間が開いてしまいましたが、CSS Nite 4周年記念イベント（Vol.40 reprise）の続きです。HTML5のメリットを活かしたコンテンツアイデア」というテーマでお話されたのはKAYACの山田敬美さん。
HTM5を取り上げたブログ記事などを多く見るようになりましたが、その多くは新要素のマークアップについてが特に目立つ気がします。
そんな中、マークアップエンジンニアでもあり、KAYACのブッコミ11メンバーでもある山田さんはWebアプリケーションとしてのHTML5を生かしたアイデアをお話されていました。
iPhoneがHTMLで使える理由
HTML5といっても現状ブラウザごとで実装が異なり、実務として使うのは非常に難しい。でもそういったブラウザの種類に左右されないデバイスがある。
それがiPhoneだということです。iPhone SafariのWebkitはHTML5を要素のいくつかに対応している上に、CSS3についても広く対応しています。個人的にはCSS3を活用できることも嬉しいですし、このアイデアには納得でした。
またできる範囲はずいぶんと狭くなりますが、Objective-Cを覚える必要もなく、
今知っているHTML+CSS+JSで作ることができるのは魅力的です。
Webアプリケーションに使える要素
セッションで取り上げられた要素・機能は下記です。
メディア要素
Flashの代替、と言い切ってしまうのは難しいかと思うのですが、iPhoneでFlashが使えない分Canvasで再現できることがあります。
またvideo要素やaudio要素はプラグイン無しでメディアファイルを再生できるという素晴らしいよう要素です。ただiPhoneではどのくらい恩恵を受けられるのかはわからないですが。
- menu（ツールバーやコンテキストメニュー）
- datagrid（リスト構造や表を表現）
- progress（タスクの進捗を表す）
- meter（認知の範囲にある数量）
入力値のバリデーションを ブラウザで行う
JavaScriptでおこなうようなバリデーションをHTML5では属性値でおこなうことができます。これも対応できているブラウザは少ないのですがやはり使えると便利でしょう。
- inputのtype属性（search, tel, url, email, datetime …）
- required（必須項目）
- pattern（正規表現）
入力補助
これもバリデーション同様、JavaScriptで実装できるものがHTML5で実装できます。
- placeholder (入力例のヒント)
- autofocus (自動フォーカス)
- autocomplete (オートコンプリート)
- datalist (補完候補のリスト)
JavaScript API
WebアプリケーションとしてHTML5を活用する上で便利なAPIです。
- Web Workers (JSをバックグラウンド処理する)
- Web Storage (キー/バリュー型の単純なストレージ)
- Web Database (SQLを実行できるローカルDB)
- Web Sockets API (サーバとの双方向通信)
- Geolocations API (現在位置の座標を特定)
イケメンホイホイiPhone版を題材に
まず先に完成版を見てもらうといいかもしれません。
イケメンホイホイのiPhone版ということで、オフラインでもイケメンが見られるという配慮までされています。HTML5でここまで出来るのはおもしろいですね。
このイケメンホイホイiPhone版で使用しているHTML5の要素・機能は下記の通り。
まずinputの新しいtype属性ですね。type=”number”（数字のみ）、type=”email”（メールアドレス向けのバリデーション）を使われたようですが、これらはiPhone Safariのwebkitでは完全対応はされていないようです。ですが、入力を半角英数字に制限できるというのは可能で、そのために採用されたようです。ちなみにOpera 10以降ではこのform系のものに広く対応しています。
placeholderは使えるようです。これも使えるなら使う方が便利ですね。
次にCanvas。イケメンホイホイでは写真がメインコンテンツなのですが、その写真の装飾やアニメーションに採用しています。今回のように色々な制御をするためにはcanvasという要素を置くだけでなく、JavaScriptで処理をする必要があります。
ここからはオフラインでもイケメンを見られるようにするための重要な機能です。
ひとつがアプリケーションキャッシュ。画像やCSSやJavaScriptなどのリソースをオフラインで使える機能です。
- manifestファイルというファイルをつくり、その中でキャッシュしたいファイルのパスなどを記述する。
- manifestファイルのパスをhtml要素で属性として指定します。
- MIMEタイプを”text/cache-manifest”として配信する。
例）.htacessに下記のような記述。
AddType text/cache-manifest .manifest
しかしこのアプリケーションキャッシュがくせ者らしく、これを開発段階で実装してしまうと修正後の確認などが困難になるようです。（修正しても反映されない、など）
もうひとつのオフライン対応がローカルストレージ。
アプリケーションキャッシュと違い、都度内容が変わるイケメンの写真データをクライアント側に格納してしまうというものです。ドメイン単位でのデータになるようで、別ドメインからはアクセスできないようになっているみたいです。
イケメンホイホイでのストレージ対象は画像なのですが、ローカルストレージではバイナリ形式に対応しておらず、データスキーム（base64形式）で保存する必要があります。ちょっとひと工夫必要になりますね。
HTML+CSS+JSだけで！とはいってもやはり単純に静的なサイトをつくるのとは違うので、良い勉強になりました。
ご本人の記事ではテンプレートセットも配布されているので、是非こちらをダウンロードしてソースなどを見てみるとおもしろいですよ。
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise）
関連した記事：
この記事にTwitterでコメント■「iPhoneとツイッターで会社は儲かる」
ツイッター全社導入によるメリット・デメリット、導入して起きた効果、社内への落とし込み方、
iPhone とツイッター、iPhone 活用方法、
さらには、iPhone×ツイッター×Google Apps™によって起こる
クラウド上のコミュニケーション革命について詳細に解説します。
最終章にはGoogle 代表取締役社長 辻野氏との対談を収録。
「iPhoneとツイッターで会社は儲かる」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿