ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
?
94 likes?41,066 views
第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
- 2. 自己紹介 ? Kazuaki Hidaka ? クックパッド株式会社(2013/02～) Androidとか担当 ? @kaa?facebook ? Android以前はFlashやっていました。
- 4. アジェンダ ? ハイブリッドアプリのタイプ ? ハイブリッドアプリの设计 ? Cookpadはなぜハイブリッドアプリか ? Android,iPhoneに対応するために。
- 5. 話さないこと ? webアプリかNativeアプリかみたいな話 ? ゲーム環境としてのHTML5,Unity ? ソーシャルゲームの話 ? コードの話
- 6. アプリの環境の流れ ? 端末のスペック向上。 WebViewでも一定のレベルで動かせるようになった。 ? HTML5の仕様固まってきた。 搭載されるブラウザも共通化されてきた。 ? iOSのUI面での審査緩くなってきた。 アプリ独自UIもやりやすくなった。 ? やっとAndroidのOS分布も変わってきた。
- 8. ハイブリッドアプリとは ? HTML5を生かしたアプリ。 ? 公式マーケットで配布できる。 ? 複数プラットフォーム対応しやすい メリット。 ? ハイブリッド＝技術を組み合わせる
- 9. ハイブリッドアプリのタイプ1 ? アプリはWebViewを包むだけのもの。 ? コンテンツ(HTML)はサーバーに置く。 ? WEBアプリをそのまま移植できる WebViewをラッピング 1
- 10. ハイブリッドアプリのタイプ2 ? 1と違いHTMLはアプリに埋め込む。 ? サーバーとはAPI通信を行ない連携。 ? ローカルでもある程度動かせる。 アプリの実装のかわりにHTML5を使う。 WebViewをラッピング 2
- 12. ハイブリッドアプリの设计
- 14. 価値とは？ ? 出来上がるものの品質 どの程度差が現れるのか ? 実装コスト HTML5にすることでどれだけ楽になるのか ? 運用コスト データの更新頻度?手間はどのくらいか
- 16. WebViewが適しているもの ? 詳細画面などのコンテンツ。 ? HTMLのレイアウト能力の高さはNativeよりも メリットが大きい。 文字の回り込み、枠付け、リンクの挿入など。 ? 特に更新されていくコンテンツの運用では当初の 想定外の見せ方は起きる。 ? 運用開始後に自由度の高いコンテンツ
- 18. 実装例 2 ? 要素の長押しの処理?フリックの処理は javascriptで行ない、Native側に通知。 ? call:,mail:などのリンクは定番なので 対応しておく ? Cookieでログイン状態を連動させる
- 19. 忘れがちな違い ? HTMLでの遷移は画面遷移ごとにサーバーから 取得する。 ? Nativeなら、その次の画面までまとめて取得、 次の画面の途中まで先に取得などできる。 ? 通信のタイミングの設計がしやすいので 待ち時間を削れる。 ? 遷移図ではわかりにくいが体験に差。
- 21. サービスの性質 ? 基本的にコンテンツはサーバー上にある。 ? PC、タブレットと常に同期しているものも多 いのでローカルで管理するものが少ない。 ? 更新が多い。リアルタイム性もある ? 特定の機能を提供するというよりは、 総合アプリという立ち位置。
- 22. Nativeで行なっていること ? アプリ間連携用のアカウント情報管理 ? レシピをのせる機能全般 ? 各種ダイアログ?API通信 ? 検索時の候補?音声検索?ウィジェット
- 23. 運用上の理由 ? 細かく仮説?検証が行われている →chanko http://bit.ly/cookpad2012 ? A/Bテスト、一部ユーザー向けテストを するための環境が整っている ? スマホサイトとAndroidでコンテンツを 共通化
- 24. まとめ ? ハイブリッドアプリの幅は広い ? WebViewのメリット?デメリットを もっと把握しよう。 ? 運用は大切。 ? 仲間も大切。 http://bit.ly/cookpadjob