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