html5とう勉強会lt アニメーション無し.pptx
TRANSCRIPT
自己紹介
株式会社コネクションワークス 森 真吾 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を 更新してもキャッシュが 更新されない?
更新 リロード あれ? リロード おk
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)
まとめ • それなりに苦労しました • でも色々と改善されてるかもしれない • 間違ってるところとかあったら教えて下さい
ありがとうございました