Just Metal, Just Baroque.: html

Showing posts with label html. Show all posts

9/20/2012

iOS6 で input type=file を使えるようになった

先日書いたエントリーで使えるだろうとは思ってたけど、実際に使えました。

input type=file を使って post した tweet がこちら。
Twitter / WINGS1685: ついに iOS で input type=file ...

9/13/2012

iOS6 から input type=file が使えるっぽい

本日未明はアップルの発表会を Ust で聴きながら、Facebook や Twitter でｷｬｯｷｬしてましたが、iPhone 5 は事前にリークされた情報通りで残念というか、驚きなしっていうか、まぁそんな感じで。

ただ、この input type=file 問題はずっと iOS につきまとっていたもので、iOS6 から使えるようになったっぽい！
アップル内での iOS6 のページには、「you can take photos and video」としか書かれておらず、input type=file を使えるのかどうかは明確に触れていないけど、プレゼンテーション内でのキャプチャ画像では、input らしきものが映っている！おそらく「Cho」と見えているものは「Choose...」だと思えることからも、input ではなかろうか。

2/01/2012

multipart/form-data でデータを Javascript で encode して cookie に送り、php で decode する

form の enctype が multipart/form-data の場合、Javascript で送ったデータが php では文字化けしてしまう（しかも au の android のみという噂あり。Android au を謳ってるのに...）ので、なんとかならないかと思い、cookie へ突っ込んで処理をすると回避できた。

ただ、Javascript と php では encode/decode が違うので、方法を合わせないとやっぱりおかしくなる。

☆Javascript 側

// expires は 2030 年にしてある
document.cookie = 'str=' + encodeURIComponent('化け化け') + '; expires=Tue, 1-Jan-2030 00:00:00 GMT';

☆php 側

$status = rawurldecode($_COOKIE[str]);

8/28/2010

携帯電話用に Google が勝手に変換するのを防ぐ

せっかく携帯版ウェブサイトを作って、パソコン版のトップページに携帯電話からのアクセス振り分けを仕込んだとしても、携帯版の Google から表示すると、携帯サイトへジャンプしない。Google が勝手に携帯電話用に変換してしまっている。確かに便利な機能ではあると思うけど、こうやってせっかく仕込んだ振り分けが機能しないのは実に困る。そこで、下記のたった 1 行をパソコン版ウェブページの <head> 内に記述するだけで、これを回避することができる。

下記は www.xxx.com というパソコン版のウェブページに、携帯版のウェブページである www.xxx.com/m/ へジャンプさせる場合。

4/04/2010

外部ドメインのファイルを XMLHttpRequest と php で読み込む

普通に XMLHttpRequest で外部ドメインのファイルを読み込めるのは、現在確認している限りでは、Mac ローカル環境と Safari しかない。これは Dashboard で使用する widget のためなのかもしれないが、ローカル Mac と Safari の組み合わせでなら可能だ。しかし php を使えば、XMLHttpRequest 単体では読み込めない外部ドメインのファイルも読み込むことができる。これにたどり着くまでに色々と調べたりしたけど、どれもソースが長かったり jquery を使ったりとめんどくさいものが多かったが、この手法ではかなり簡単に実現できる。

javascript を含んだ html を test.html、XMLHttpRequest によって読み込まれる php を test.php とする。

★html（test.html）

★javascript（test.html）

★php（test.php）

// XMLHttpRequest で読み込むファイル名の
// ? 以降の url を取得
$fileName = $_SERVER["QUERY_STRING"];
// url を読み込み、php 内で展開する
readfile($fileName);

Safari、Firefox、Chrome で確認済み。Opera は調子悪いので未確認。

11/06/2009

現在ページの URL を取得する php を用いての ssi

ヘッダやフッタなど、ほぼ全ページに渡って同じ内容だと思うのだが、これを更新するときはどのようにしているだろうか。例によって私は Dreamweaver 嫌いなので、テンプレート機能は使わない。第一、テンプレートを更新すると、テンプレートを使っているページ全てをアップロードしなければならないので、面倒だし危険性（先祖返り）の可能性もある。もうお気づきだろうが、私は ssi を使用している。これならば ssi だけをアップロードすれば良いし、php を ssi にすればレイアウトは同じでページ毎にやや違うといった、メニューやパンくずリストにも使える。

まず、php で現在ページを取得する。

$url = $_SERVER['REQUEST_URI'];

これで ssi として php を読み込んでいる側の html の url を取得できる。そしてこの取得した url を使って条件分岐を行う。
その前に、/index.html と / を分岐させなくてもいいように、置換しておく。

$url = str_replace("index.html", "", $url);

もしこの ssi がタイトルやメタ情報など、ページごとに違う用途に使うのであれば、$url に対する switch で分岐を行い、メニューのようにディレクトリごとに違う用途であれば、$url にディレクトリ名を strpos で探し、分岐を行う。

これでメタ情報だろうがメニューだろうがパンくずだろうが ssi にすることができ、更新が楽になる。

9/17/2009

css を読み込めない

と思ったら、rel の設定が alternate stylesheet だった。。。気づくまで大層な時間がかかったorz
html 内の css 読み込み部分をコピーしてたんだが、そのコピー元で alternate stylesheet で、そのまんまだった、と言い訳してみる。

はぁ〜、すんごいしょーもないことで無駄な時間を使った。。。

9/12/2009

Javascript(DOM) で入力チェックをし、php にデータを送る

私はお問い合わせフォームやら自作 CMS やらで、javascript(DOM) で入力チェックを行うようにしている。php でやると画面遷移が必要になるし、作るのも正直手間がかかる。その点 DOM でやってしまうと簡単にできるし、画面遷移も発生しない。

さらに、チェック済みのデータを php に送って、お問い合わせフォームならメールを送信したり、CMS ならデータをファイルに書き込むという流れにしている。その際に iframe を使うのだが、直接 iframe の src に php の url を書き、? 以降にデータを持たせ、php ではそれを $_GET で受け取ることもできるが、スマートではないし、CMS となると渡すデータが多いため、url の最大長も気になるところ。

なので、以下のようにしている。

◆html 側

<form id="sendForm" action="javascript:return false;" onsubmit="javascript:saveThis();" method="post" target="php">
  input や select などのフォーム部品を書く
  <iframe src="" name="php" width="1" height="1"></iframe>
  <input type="submit" value="保存" />
</form>

◆javascript 側

saveThis() {
// チェックの処理を書く
// チェックをパスした場合に下記を実行
document.getElementById("sendForm").action = "php の url";
}

これで、見た目上画面遷移なく、DOM で入力チェックをし、php で処理を実行できる。php の最後にアラートでも出せば判りやすいのではないだろうか。form の action に予め php の url を書いてしまうと、チェック結果がなんであろうと送信してしまうので、初期値は javascript:return false; にしておく。

echo "<script type='text/javascript'>";
echo "alert('処理が終了しました。');";
echo "</script>";

8/14/2009

お問い合わせフォームのエラー処理

お問い合わせフォームでのエラー処理はページによってマチマチだ。

「○○が未入力です」とか「○○は△文字以内です」とかの表示だけで入力画面に戻るには、ブラウザの戻るボタン等を押させるようなページは最悪だと思う。ユーザのことをなにも考えていない。そんなエラー文だけ出されても、いくつかあれば憶えられない人もいるだろう。第一、お問い合わせやら資料請求やらのフォームに入力しているユーザは、良くも悪くも興味を持ってくれているからこそ使う。そんな貴重なユーザに対して再入力をさせるのに戻るボタンを強要するなんて、ナンセンスだ。私ならその瞬間に問い合わせをやめる。

あと、入力画面内の上部にエラー文をつらづらと表示するページもある。まだマシだ。だが、入力項目が多い場合、エラー文を見るために上にスクロールし、入力するために下にスクロールなんて、やっぱりナンセンスだ。もっと入力しやすくするべきであろう。

私はお問い合わせフォームを今までにいくつも作ってきたが、エラー処理については次のような手法を採っている。
まず、不備があった項目のすぐ隣など近くにエラー内容を表示する。さらにテキストボックスだった場合は、background を赤系の色で塗る。これでエラー箇所をすぐに見つけられるし、エラー内容も見やすい位置にある。また、半角入力を求める場合は、例え全角で入力されていても文字列を半角に変換することで、「半角で入力せよ」なんてエラーを出さない。そして、エラー項目が複数あった場合は、一番上の項目に focus() を行い、すぐにユーザが再入力できるようにしている。

お問い合わせフォームのエラー処理はユーザビリティの塊だと、個人的には思っている。

8/07/2009

css3 でメニューのアニメーション

CSS Transitions Module Level 3
5.2 Properties from SVG

CSS3 では transition やら transform やら animation などが定義され、個人的には懐かしい SVG ライクな感じになっている。実際、SVG のプロパティも移植？されているみたいだし、W3C は SVG を CSS に組み込んで、普及を託したような感じを受ける。
以前働いていた会社では SMIL や SVG についてやっていた（2003〜2004 年頃）が、そのときはまともな文書は W3C しかなく、書籍はあるにはあったが簡単な触りの部分しか載ってなかったりして、相当難儀した。しかし CSS に組み込まれるとなると、おそらく色々な書籍が今後出るだろうし、大きく普及する可能性を秘めていると思われる。

さて、そんな SVG 譲りの定義から transition を用いて、ナビにマウスを合わせたらサブ項目がスルスルと現れるアニメーションも可能になる。パッパッと開閉するようなのは CSS 2.1 でも当然可能だが、ダイナミックさに欠ける気がする。ちなみに、Firefox 用と Opera 用の記述でも試したが効果を得られなかったので、いつものように webkit のみの記述だけを書いてみる。

--- html 側 ---

--- css 側 ---

#nav {
  width: 100px;
  height: 20px;
  padding: 0px 3px 0px;
  overflow: hidden; /* 通常はサブ項目が隠れている */
  background-color: #ddeeff;
  border: 1px solid #0066ff;
  -webkit-transition: height 0.5s ease-out;
    /* ↑高さを変更、0.5 秒、最後をゆっくり */
}
#nav:hover {
  height: 80px; /* overflow を再定義しなくても現れる */
}
#nav a {display: block;}

html5 や css3 に対応するブラウザが早く普及してほしい。MS がブラウザ開発を放棄しなければ無理かもしれないが。

8/04/2009

制作のチェック時に alt や title が入っているか見たい時

ウェブ制作をしていく中で避けては通れない、むしろ重要なポイントであるチェック。

画像に alt が入っているかや a 要素に title が入っているかなどを調べるのには、最悪、マウスを動かしてちゃんと出るか見る必要が出てくる。もちろん、画像の alt など W3C で必須と言われるものは、Markup Validation Serviceで調べてもらえる。
しかし、必須ではないがあった方がいいようなもの、a 要素の title や img 要素の title、果ては h1〜h6 の title など、見た目はともかく SEO に絡んでくる属性については正直、めんどくさい。

そこで、テストしたいページを iframe の中に読み込み、iframe の onload で iframe 内の要素を取得、そこでチェックすれば良いのではと思った。

--- html 側 ---

--- javascript 側 ---

ちょっと今時間がないので取り急ぎ感満載で、しかも Safari 4 しか動作してないが、個人的にはちゃんとカスタマイズすれば自動チェックツールとして使えるようになる。

7/30/2009

CSS3 の text-overflow

html5 と同じように CSS3 も気になってはいるのだが、text-overflow をちょっと気に入っている。
ボックスよりも文字が長い場合、文字を途中で切って自動的に「...」を付随してくれるというもの。

今のところ、Safari 4 と Opera 10.00 beta2 で確認している。おそらく Safari と同じ WebKit の Chrome もいけるだろう。

--- CSS 側 ---

.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* この指定がないと効果が出ない。 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}

--- html 側 ---

<div class="test">
ボックスより長い文章はちぎれて表示、マウスをあわせると全部表示。
</div>

今まではプログラムで文章の長さを見て同様の処理をする必要があったが、これは便利。

Firefox 用の「-moz-text-overflow: ellipsis;」というのもあるんだが、何故か確認できない。。。

7/29/2009

チェックボックスをチェックしたら、テキストボックスなどの有効無効を切り替える

例えば、チェックしないとテキストボックスが有効にならず、チェックを外したらまた無効になるというものをよく見る。
これも ! を使えば簡単。

--- js 側 ---