ハブろぐ - 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 )

Jan 28, 2010iPadでたねー

Category : ハードウェア < コンピューター

Tags : iPad Apple

バカにするつもりが結構欲しくなった

参考：Apple - iPad - The best way to experience the web, email, ＆ photos

米アップルのサイトはとっくに更新されてるみたい。ビデオは必見。何言ってるか分からなくても利用シーンをなんとく見せてもらえると欲しくなる感じの製品。きっと、人が持ってるのを見ると、自分も欲しくなっちゃうような一番危ないタイプ。

地味にスペックいいなー。

参考：Apple - iPad - Technical specifications and accessories for iPad.

CPU: Apple A4 1Ghz
色: White, Black
サイズ: 242.8mm x 189.7mm x 13.4mm（大体B5ノートぐらい）
ディスプレイ: 9.7inch LED 1024x768px　（地味にIPSパネル）
保存容量: 16GB・32GB・64GBのいずれか
バッテリー: 公称10時間(！)
ネットワーク: Wifi, Blutooth
その他: VGA外部出力(？)・ボイススクリーンリーダー・加速度計・方位探知・環境光センサー・モノラル内蔵スピーカー・GPS対応(3Gモデルのみ)

デカいiPhoneであり、そうでなく

iPhone（＋Wifi使いまくりのiPod Touch）ユーザーからすると、デカいiPhoneに過ぎない印象だけど、実際はもちょっとエグい立ち位置だと思う。値段といい、サイズ感といい。

使う人次第

このあたりの特性はiPhoneも同じ。PDAにも、ゲーム機にも、ただの電話にもなりえる。そこから更に発展して、値段感とサイズ感が並んだことで、今度はネットブックあたりと用途や印象が近づいた。その上で他より魅力的な製品ってのがAppleらしい。薄いからカバンにも入れやすそう。

使う人次第でネットブックにもなるし、Kindleにもなるし、ゲーム・ビデオ・音楽のエンターテイメント機にもなる。何食わぬ顔で、他の製品の用途を良いトコ取りしようとしてる。さすがApple。後発のくせに、先発を蹴散らすプロだね！

ネットブック買うぐらいならiPad？

日本的には、Kindleは比較対象にならんけど、ネットブック買うぐらいならiPadかなー。という感じ。そうでなくても、家置きのお遊び端末にいいかな。

個人的には近親者で、家庭内シェアする端末として魅力的。ああオモチャ欲しい！キーボードドックいいなー！でも、四六時中MacBookとiPhone触ってる自分には無用の長物なんだろうなー！くそー！

日本の携帯を使ってる人: ケータイ＋αとして使うと、弱点が良い感じに補強できるかも
ネットブック使ってる人: ビジネス用じゃなければ、iPadのほうが楽しいかも（iWorksも一応あるみたいだけど）
iPhoneもっててネットブック使ってない人（俺）: たぶん不要・・・

とりあえず、これから溢れていくであろう評価を見つつ、様子見したいと思います。