html5とう勉強会lt アニメーション無し.pptx

自己紹介

株式会社コネクションワークス　森 真吾 twitter: @sngmr http://d.hatena.ne.jp/sngmr

HTML5で Webアプリケーション作って 苦労したこととか

作ってたサービス http://www.enquetepad.com

どういうサービス？ ブラウザでアンケート作成・集計 iPadでｱﾝｹｰﾄ取得

前職の(株)プレイウェルで 作ったサービスです

使ったフレームワーク・機能

• Offline Web applications • Web Storage (localStorage)

• Sencha Touch

• ホーム画面登録(iOS)

WARNING!! 今から話す内容は1年前の情報に基づいています！！

情報が古かったらｺﾞﾒﾝﾅｻｲ

Offline Web のハマリどころ

MIMEタイプ設定を忘れる

AddType text/cache-manifest .manifest

.htaccess

Offline Web のハマリどころ

CACHE MANIFESTを 更新し忘れる

CACHE MANIFEST #20110307-1 ← ココを変更してファイル更新 /images/hoge.png /images/fuga.png /styles/cool.css

CACHE MANIFEST

Offline Web のハマリどころ

CACHE MANIFESTを 更新してもキャッシュが 更新されない？

更新 リロード あれ？ リロード おｋ

Offline Web のハマリどころ

いつキャッシュが更新される か分かりにくい

あっ！ CACHE MANIFEST が更新されてる！

よしキャッシュを更新しよう。 でも動きを止めるのは怒られるなぁ。バックグラウンドでやるか。

キャッシュの更新できたよ！ でも先に進んじゃってるし、使うのは次回からにするね！

Offline Web のハマリどころ

どうしても即刻キャッシュを 更新したかったので・・・

window.applicationCache.addEventListener('updateready', function() { window.applicationCache.swapCache(); window.location.reload(true); // 強制リロード }, true); window.applicationCache.update();

JavaScriptで逃げました

localStorage のハマリどころ

容量は3～5MB 意外とキツイかもしれない

•  動的画象をキャッシュしたい •  CACHE MANIFEST は動的生成できるけども・・・ •  画象データをBase64変換してlocalStorageに保存だ！ •  容量が足らんがや・・・

ホーム画面登録？ iOSのSafari独自機能で、ホーム画面登録すると通常アプリのように アイコンが登録される。まるでアプリみたいな見た目にできる。

※faviconがアイコンに

localStorage のハマリどころ

ホーム画面登録すると localStorageが別領域に！

ホーム

データA のコピー

Safari

データA

ホーム画面登録しますね

localStorage のハマリどころ

保存データが泣き別れする のは避けたかったので・・・

Safariからの実行時は、ホーム画面 登録を強制するページに遷移するよう にしました。 (window.navigator.standalone)

まとめ •  それなりに苦労しました •  でも色々と改善されてるかもしれない •  間違ってるところとかあったら教えて下さい

ありがとうございました