HTML5 conferenceのオフラインアプリケーションの話がすごく良かったのでまとめ

レポート いい話

HTML5 conference 2013に参加してきました。

賑わいのある、大変楽しいイベントでした。

講演も、どれもこれも勉強になるものでしたが、
中でも @ さんの オフラインWebアプリケーションの「選択肢」 という講演がすごく良かったのでまとめます。

プレゼン資料・動画は、下記で公開されていますので、合わせてご覧ください。

動画 (1:07:00 あたりから):

ルーム5B - HTML5 カンファレンス 2013 - YouTube

資料:
http://0-9.sakura.ne.jp/pub/html5conf201311/start.html

まとめ

スマホユーザーはオンラインとオフラインを意識するのが難しいので、
アプリケーション側でユーザーの状態を判断して、適切に処理してあげる事が大切

■変化するオンライン/オフライン事情

  • PCのユーザー
    • オンライン/オフラインを自らコントロールして使う
  • スマホのユーザー
    • オンライン/オフラインを意識したり、コントロールする事が難しい

■「Offline First」という考え方

  • 下記の様な設計思想
    • まず、オフラインで動作させる方向で検討する
    • 次に、オフラインでの実現が難しいところだけ、オンラインでの実現方法を検討する
  • モバイル環境で使いやすいアプリケーション設計ができる

■「オフラインで動作する事」の価値はさまざま

  • オフラインで動作する事の価値は、アプリケーションの種類により異なる
    • ソーシャル性の低いものなら、価値が高まる
    • 逆に、ソーシャル性のあるものはオフラインにする価値はあまり無いのでは？
  • 「対応されていない」≠「価値がない」に注意
    • 多くのアプリケーションで対応されていなくても、価値のある事だってある

■オフラインで動作させる事の「検討」には、とても価値がある

  • オフラインで動作させる事は、 「いかにキャッシュをうまく使うか」に関係がある
  • 今作っているサービスに「オフライン機能を入れれないか」という検討をすだけでも、技術的に大変価値のある事

■「オフラインは機能の１つ」という考え方

  • 全てがオフラインで動作する必要はない

■「つながらない事はエラーではない」という考え方

  • 「つながらない」状況を、ユーザーが知れる/コントロールできる様にしてあげよう

■あなたのサービスに、いつオフライン機能を導入するか

  • かならずしも 今 ではない
    • ブラウザ上のアプリケーションがオフラインで動く事は、正直なところ、現在はそんなに求められていない
  • ただし、通信エラーへの対応や適切にキャッシュを扱う事は、需要が高い
    • 現時点では、こまかくキャッシュを制御するくらいがちょうどいいのかも

■キャッシュをどのタイミングで入れるか

  • 「どこにキャッシュを入れるか」は、設計段階で考える
  • 実装は、最後に行なう
    • 最初に実装しちゃうと、動作確認などの妨げになる事が多い

■キャッシュの設計/実装のポイント

「なぜつながらないのか/どうすればつながるのか」を、ユーザーに教えてあげる

  • なぜつながらないのか は、JSのAPIを利用すれば判定できるらしい

「オフラインで動作する事/している事」をユーザーに伝える

  • ユーザーに、オフライン機能の存在/使い方を伝える
  • どの様に伝えるのがいいかは、まだ結論はでていない

重複更新などに注意する

タイムアウトを短くして、ユーザーに頻繁に通知する？

  • ユーザーが状況をコントロールできる様にするための方法の１つとしての提案

初期ダウンロードとリロードは、分けて考える

  • 処理にかかる時間が全然違う
    • 初期ダウンロードが遅すぎて、結局キャッシュしない方が早いなどは、よくある話

初期表示に必要なデータのダウンロードと、キャッシュのダウンロードは分けて実装する

  • キャッシュのダウンロードは、ユーザーががんばっているが、機能が暇な時に行なう
    • ログインページや、アカウントの入力ページなどが狙い目

通信の回数を減らす

  • データを一括で読み込む
  • 部分的なキャッシュなどは行なわない？（すみません、ここ記憶があやふや）

appCache はサイズに注意

  • appCache は、全てのデータをダウンロードし終わらないと使えないので注意
    • キャッシュが大きすぎると、ダウンロードが終わる前に画面遷移される → 次のページでもういっかいダウンロードする → ダウンロードが終わる前に(ry という感じで、いつまでたっても使われないので注意

セキュリティに気をつける

  • 一度攻撃を受けると、キャッシュが続いてる間づっと攻撃が続いてしまう可能性がある
    • firefox などのブラウザが、何かをダウンロードする時にユーザーに許可を求めるのは、この理由から
  • ユーザー情報がキャッシュされているかもしれない
    • 例えば、ツイッターの投稿に失敗 → 投稿がローカルにキャッシュされている → 他の人が端末を使う時、公開前の投稿が見えちゃう　とか

以上です。

新しい知識を仕入れる系講演も面白いですが、
上記の様な、自分のサービスを見直すきっかけになる系講演もいいですね。

f:id:nz650:20131203134530p:plain