ガラケー向けだったDECOLOGも最近どんどんスマートフォン化してます。
ガラケーとスマートフォンではブラウザの表現力が雲泥なので、各ページのHTML書き直し必須です。
これを機にHTMLを勉強しなきゃ、ということでHTML5を新年の抱負にしました。
まずは、HTML5ってなんですかってところなんですが、HTML5が示す仕様って範囲広い。
HTML5に含まれている仕様には以下のようなものがあるらしいです。
- セマンティックス
- オフラインとストレージ
- デバイスアクセス
- 接続性
- マルチメディア
- グラフィック
- パフォーマンス
- CSS3
というのも、HTML5はブラウザプラグインで提供されているFlashなどのリッチインターネットアプリケーションをプラグインレスで利用できるようにするために、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素をすべて取り込んだものになってる模様。
HTML5を勉強するって決めたもののどこから手を付ければいいのかなと、途方に暮れそうになりましたが、考え方を変えると最近のWEBトレンドを追いかければ大概それはHTML5なんじゃないかと気づきました。
いうことで、気にせず好きなところから始めることにしました。
で、最初に手をつけたのがキャッシュマニフェストです。
キャッシュマニフェストは、HTML5で実装されたWEBアプリケーションをオフラインで実行できるようにするための仕組みだそうです。
ところで、オフラインWEBアプリケーションって自己矛盾した言葉ですよね。
WEBアプリケーションはサーバーにリクエストを投げて、レスポンスとしてHTML、Image、CSS、Javascriptといったリソースをダウンロードしてページを表示する仕組みなので、ネットワークに接続して利用することが前提という先入観を持ってました。
まぁともあれお勉強ってことでこんな本読んだり、こんなとこを読んだりしました。
じゃぁ、キャッシュマニフェストって？
単純にWEBアプリケーションをオフライン実行するには、必要となるHTML、Image、CSS、Javascriptといったリソースファイルが事前にローカルにキャッシュされている必要があります。
キャッシュマニフェストは、オフラインWEBアプリケーションが使用するリソースファイルをページのリクエストとは別契機でダウンロードしておき、リクエストの代わりにキャッシュを返す仕組みです。
キャッシュマニフェストを利用するには、マニフェストファイルと呼ばれるリソースファイルのURLをリストにしたファイルを用意し、このマニフェストファイルをhtmlタグのmanifest属性で指定します。
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
…
</body>
</html>
するとこのページにアクセスした際、オンラインの間にオフライン実行に必要なリソースをダウンロードしてローカルにキャッシュしてくれます。
なお、マニフェストファイルはMIMEタイプtext/cache-manifest使って送信するので、Apacheの設定ファイルにAddTypeディレクティブを追加しく必要があります。
AddType text/cache-manifest .manifest
マニフェストファイルのリソースリストは以下のように記述しておきます。
CACHE MANIFEST
/hoge.css
/hoge.js
/hoge.jpg
オフラインWEBアプリケーションでもローカルにキャッシュしたくないリソースもあると思います。
マニフェストファイルにはそんなリソースを定義する構文がいくつか用意されてます。
マニフェストファイルは３つのセクションヘッダで分けられるようになっています。先のようにセクションヘッダがない場合は全体がCACHEセクションとして扱われます。
- CACHEセクション
これ以降に記述されたリソースはすべてキャッシュ対象になります。
- NETWORKセクション
これ以降に記述されたリソースはキャッシュされません。ネットワークに接続してリソースを取得します。
- FALLBACKセクション
キャッシュ対象だが何らかの理由でキャッシュできない場合の代替リソースになります。
と、キャッシュマニフェストはこんな感じです。
このキャッシュマニフェストを使えば、DECOLOGでも静的な画像やCSSなどの配信トラフィックを減らせるのではという期待しました。
が、世の中そんなに甘くないですね。
というのはキャッシュマニフェストは、マニフェストファイルを指定したhtmlファイル自身もローカルにキャッシュします。
なのでそのhtmlファイルがcgiで動的に生成される場合、キャッシュされると不都合が生じます。
マニフェストファイルのNETWORKセクションにhtmlファイルのURLを指定しても回避できないないんです。考えてみたら当然何ですけどね。
AJAXを利用するなどして、ページ全体をロードする必要がなくなればキャッシュマニフェストを活かせるかなと思いますが、DECOLOGではもう少し先になりそうです。
では、今回はこのへんで