ハブろぐ - havelog.ayumusato.com

Feb 02, 2010manifestファイルとかの続き

制約というか仕様というか

そもそもアプリケーションキャッシュって何よ、って話ですがブラウザが勝手にするキャッシュの超強いヤツと捉えればOKです。強すぎて、ミスったときに消しづらいです。HTML5からの実装です。

manifestの指定はドメイン単位で効果があるので、サブドメイン含めてドメインが異なれば効果がありません。Safariは問答無用に適用されますが、Firefox3.6の場合だと「This website ( ayumusato.com ) is asking to store data on your computer for offline use.　Allow | Never for This Site | Not Now」と洋風に訊いてくれます。不具合ありそうならここで拒否ればOKなわけですね。

いまのところ主要ブラウザではSafariとFirefoxがサポートしている模様。そもそもDOCTYPEの宣言が、「<!DOCTYPE html>」でないと無視されるようなのでご注意を。XHTMLのまま味見することはできないみたい。

manifestファイル記述の謎

CACHEのみ（非明示含む）: リロード動作でSafariが発狂。キャッシュしてないコンテンツを全て見失う。
CACHE + NETWORK: 大体ちゃんと効いてる感じ。

NETWORKの宣言自体が、Firefox3.6ではサポートしてないとか見た覚えがあるわけですが、サポートしてるSafari的には全部きちんと明示しやがれコノヤロウとおっしゃっているように見えます。CACHEはキャッシュ対象コンテンツ、NETWORKはキャッシュしない対象のコンテンツです。

参考：今回のmanifestファイル例

キャッシュさせたいコンテンツだけ書けば、あとはブラウザがよろしくやってくれると思い込んでいましたが、そうもいきませんでした。キャッシュをあてにせずサーバーを見に行くことも明示しないといけないようです。

超強いキャッシュ

強すぎて本当に消せません。とりあえず自分が分かっている消し方について以下に。

Safari 4: アプリケーションメニューから"Reset Safari"・・・。
Firefox 3.6: Preferences -> Advanced -> NetworkタブのOffline Storageグループからドメインを選んでremeove。唯一まともな削除方法。
iPhone: 消し方わからない or2

強すぎて散々です。ひどい。

a-blog cms的に

a-blog cms他、動的生成でURLはmod_rewrite使ってチョロまかしているシステムの場合は、なるべく実存パスを書いたほうがよさそうです。仮想パスでアクセスするようにmanifest内に書いたら、SafariもFirefoxも微妙な感じの動作でした。たぶんキャッシュできてない。

よって、manifest内のパスは実存パスと同じように記述したほうが確実そうです。manifestファイル自身はあまり関係ないようなので、/havelog.manifestのように仮想パスで通してシステムを仲介させてもOKっぽいです。manifestファイルを動的に生成するのは便利そう。

a-blog cmsの管理ページとかも、そうそう変わるもんでは無いはずなので、うまいことコントロールしてやればajax以上に軽快に動作するんじゃないかなーと思います。

参考

今回のmanifest事変は、以下のURLを参考にしました。その他名も分からないリソースもいくつかありましたが割愛します。

このまま、HTML5の未来的実装方面から、Javasciprtのほうに遊んでいきたいと思っています。今のところ、Javascriptまともに書いたことないんですよねー。PHPばっか！

面白いことできたら、またブログに書いてみます。

Feb 01, 2010HTML5的にmanifestファイルをゴニョった

Category : HTML < ウェブ開発

Tags : HTML5 manifest

とりあえず自サイトのために

本当はもっと深遠な用途があるんでしょうけれども、jQuery系のデカいけど滅多に変更がないファイルをどうにかするためにHTML5のアプリケーションキャッシュを試してみました。（という建前）

Javascriptとかでガシガシやるような、エンジニア系の風情はありません。なるべくチョロい感じで。

manifestファイルをつくるよ

ともかく、HTML要素の属性としてmanifestファイルを指定しないと始まらないので、以下のような内容のファイルを用意しました。

CACHE MANIFEST

## Revision: 20100201-2300

#############################################################

### キャッシュ対象のコンテンツ
CACHE:

themes/havelog/syntax/scripts/shCore.js
themes/havelog/syntax/scripts/shBrushPhp.js
themes/havelog/syntax/scripts/shBrushXml.js

themes/havelog/syntax/styles/shCore.css
themes/havelog/syntax/styles/shThemeDefault.css

js/jquery/jquery.js
js/jquery/jquery.cookie.js
js/jquery/ui/jquery.ui.js

themes/havelog/images/twitter_16.png
themes/havelog/images/facebook_16.png
themes/havelog/images/flickr_16.png
themes/havelog/images/tumblr_16.png
themes/havelog/images/lastfm_16.png
themes/havelog/images/rss_16.png

#############################################################

### 必ずサーバーを見るコンテンツ
NETWORK:

## 大雑把にルートの諸々
/index.php
/index.js
/favicon.ico
/archives
/themes
/js

## 外部リソース
http://www.google-analytics.com
http://b.hatena.ne.jp
http://farm3.static.flickr.com

これを拡張子 .manifestとして任意の場所に置いて、HTML要素のmanifest属性としてパスを通します。

<html lang="ja" manifest="havelog.manifest">

Content-Typeも大事

.htaccessなどで下記のような記述を加えます。htpd.confとかでもモチロンOKです。.manifestがContent-Type: text/cache-manifestでヘッダー送出されるようにします。Content-Typeがちゃんと付与されないと、ブラウザに認識してもらえないようです。

AddType text/cache-manifest .manifest

読み飛ばしてOK@ a-blog cmsの場合は、アクセスの仕方によってはシステムが仲介するので、システム側にもContent-Typeを定義してあげます。private/mime.typesに以下の記述を追加します。

text/cache-manifest                    manifest

これがこうなる

かなり見づらいスクリーンショットになってしまいましたが、キャッシュしたファイルの読み込み時間が、100msから0msに短縮されています。オフラインに保存してるので当たり前ですね。:-D　AFTERのほうで長い帯が伸びているのは、google analyticsのファイルです。さすがにキャッシュ対象外にしてあるので。

当たり前ですが結構な効果です。ブログのように、更新があって始めてアクセスされるようなサイトにとっては効果がやや薄そうですが、一般サイトにうまく使うことができれば、高い効果がありそう。

結構長くなってしまったので、ちょい改めてハマったポイントとかについて記録します。次エントリーに続きます。

続く@manifestファイルとかの続き ( HTML )

Jul 18, 2009HTML5の情報（主に海外）

Category : HTML < ウェブ開発

Tags : HTML5

HTML5

　HTML5って言ったら、みんな興味津々な空気感になっているんじゃないかと思って、手持ちの情報をシェアしてみます。国内でもそうですが、海外でもHTML5の情報が多くなっているような気がしなくもないです。

海外系の漁りモノ

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using - Nettuts+: 非常に実践的な記事。articleの中のheader, footerの解釈についてもコメントの中で論じられています。CSS3についても書かれています。
HTML5 Gallery | A showcase of sites using HTML 5 markup: 更に実践的な情報。HTML5でマークアップされたウェブサイトが陳列されています。実際の用例で、色々な見識をインプットできます。明らかにおかしかったり、bodyの中で結局divdivしてたり混沌としたサイトもありますが。
HTML5 Doctor, helping you implement HTML 5 today: 上のサイトと見た目的に姉妹関係の模様。HTML5についての疑問について、一定の回答をもたらしてくれています。
Yes, You Can Use HTML 5 Today! [HTML & XHTML Tutorials]: HTML5、はじめちゃおうぜ！的なチュートリアルです。個人のBlog規模で導入する上では、参考になります。
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using - Nettuts+: 割とライトな記事。HTML5について、インプットしたことがない人は、とりあえず図だけでも見ておくとよろしいかと。読み込むと全般的な話に及んでるかも。
A List Apart: Articles: A Preview of HTML 5: ブログのマークアップ的な視点で新要素について解説されています。HTMLとXHTMLのそれぞれの便益を比較しているあたりが、今となっては哀愁モノ。
Carsonified » 23 Essential HTML 5 Resources: さらにHTML5関係の情報集。更に掘り下げたい方はどうぞ。前述で紹介済みの記事もいくつか含まれていますが。

国内系もちょびっとね

HTML 5 の新要素: まずはこれ、当時の記事ではあるけれど主要なエッセンスは十分伝わる良いコンテンツ
HTML 5 ― HTML 4 からの変更点: 正確には和訳文章。今までと何が違うの？って意味でコレを見ておけば大丈夫な感じ

HTML5って

　あまりセマンティックがどうだとか、インタラクティブコンテンツがどうだ、とかそういう話に明るくはないのですが。aside要素やarticle要素でマークアップの意味付けが変わった！っていうのは、それほど重要ではない気がしています。

　APIがどうだとか、Webアプリーケションと親和性を高めるための要素の追加だとか、microdataがどうのだとか。今後のWebコンテンツを維持しうるマークアップ言語として進化を遂げているように感じます。

　情報を追っかけるのだけが楽しいさとうです。