第39回 HTML5とか勉強会+日本Androidの会に行った。
第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会に行きました。東海大学高輪キャンパスで会社から近いぜと調子こいてたら道に迷い、最初のセッションを聞き逃した。。 取ったメモをまとめる
セッション2「AndroidとChromeの統合について」
講演者 丸山不二夫 さん
ぽんぽん進んでいたのでメモがちゃんと取れていたか、かなり不安。。
- Packaged Web Appが来る
- Webアプリをパッケージ形式で配信・インストール
- デバイスのハードウェアにアクセスするAPIが使える
- スマフォだけでなく、WinやMac、Linuxでも動くだろう
- Chrome Packaged App
- Firefox OS、Tizenにも
- 従来のRich ClientからThin Server Architectureへ
- AndroidはHTML5の対応が遅れていたが、4.2でChromeが搭載されたことでだいぶ改善した。
- AndroidとChromeのマーケットの統合が今年中に起きそう
- Android開発者はチャンスだから頑張れ
- iOSの3〜5倍のシェア
- PlayのランキングにJapanのアプリがいっぱいある
セッション3「ハイブリッドアプリの設計」
講演者 日高一明 さん(クックパッド株式会社)
- ハイブリッドアプリの種類
- WebViewをラッピングその1
- サーバにあるコンテンツをWebViewで読み込む
- WebViewをラッピングその2
- HTMLをアプリに埋め込む
- サーバから読み込むのではなくアプリに含めるってことかしら?
- サーバとはAPI通信を行わない
- ローカルでもある程度動かせる
- HTMLをアプリに埋め込む
- 基本的にはNativeで一分画面でWebViewを使う
- WebViewをラッピングその1
- 大事な方針 → どちらでやった方が価値がある画面なのか?
- じゃあ価値って何?
- 完成品の品質
- 実装コスト
- 運用コスト
- WebViewが適さないもの
- リスト・ギャラリー画面
- 画像が多い画面
- Native使ったほうが利点が多い
- Viewの再利用、画像のキャッシュ・開放等をやってくれるから
- 起動時の画面
- 表示するコンテンツ以外に付加情報(アップデート情報とか)を取得したい画面
- リスト・ギャラリー画面
- WebViewが適しているもの
- 詳細画面などのコンテンツ
- HTMLのレイアウト能力の高さはNativeよりもメリットが大きい
- 特に更新されていくコンテンツの運用では当初の想定外の見せ方は起きる
- 詳細画面などのコンテンツ
実装例1
- WebViewのすすむ・もどる繊維とNativeの画面遷移の管理の問題が起きやすい
- WebViewでのリンク遷移させない方針
- 遷移はWebViewで行いNative部分はダイアログの展開
- WebViewのすすむ・もどる繊維とNativeの画面遷移の管理の問題が起きやすい
実装例2
- 要素の長押しの処理・フリックの処理はJSで行い、Native側に通知
- call: mailto:などのリンクは定番なので対応しておく
- Cookieでログイン状態を連動する
- 要素の長押しの処理・フリックの処理はJSで行い、Native側に通知
忘れがちな違い
- HTMLでの遷移は画面遷移ごとにサーバから取得する
Cockpadはなぜハイブリッドか?
- サービスの性質
- もともとWeb
- 画像とかコンテンツがサーバにある
- PCタブレットでローカルで管理するものが少ない
- 逆に、ローカルで行なっていること
- アプリ間連携用のアカウント情報の管理
- レシピを載せる機能全般
- 各種ダイアログ・API通信
- 検索とか
- 運用上の理由
- 細かく仮設・検証をやっている → chanko
- A/Bテスト、一部ユーザ向けテストをするための環境が整っている
- サービスの性質
まとめ
- ハイブリッドアプリの幅は広い
- WebViewのメリット・デメリットをもっと把握しましょう
- 運用は大切
セッション4「ハイブリットソーシャルゲームの現場」
講演者: 鈴木匠太さん (株式会社ポケラボ クリエイティブ事業部 部長) 前田翔悟さん (株式会社ポケラボ ソーシャルメディア事業部)
ポケラボ?
なぜハイブリッド?
ハイブリッドどうよ?
- 運用楽。1ソースマルチデバイス
- 毎日更新しないとあきられる
- 音も出せるし特に問題なし。
- WebView遅い?
- CSSアニメーションも使い分けたり工夫してる
- 運用楽。1ソースマルチデバイス
困ったこと
- CreateJSにないAPIを使ってると変換できない アバター開発時にFlashでBoneAnimation作ってJSに変換 → がCreateJSではBone使えね
- 増え続けるスキル演出
- 必要な画像ファイル等多すぎて管理が大変
- RequireJSで都度読み込ん出る
Androidでユーザに楽しんでもらうための3つのアプローチ
- ハイブリッド固定メニュー
- ヘッダーフッターをoverflow: scrollとposition:fixedで実装すると、遅い or 動かない端末あり
- ヘッダー・フッター用のコマンドを用意し、JSから叩く
- 例)header://json=...
- Native側でViewに変換
- ハイブリッド固定メニュー
- ハイブリッド高速アニメーション
- 2段階変換する
- Flash → JS → Android
- 約3倍のフレームレート!!
- 2段階変換する
- iOSとのUUID連携
- AndroidのUUID使いづらいので、独自にUUID管理している
パネルディスカッション
もう眠いのでざっくりと。
- TizenのHTML5スコアが高い
- 性能が良くなっているとはいえ、スマフォのHTML5で3Dゲームはまだきつい。それ以外だったらスマフォでも全然OK。
- Google IOに行ったが、HTML5周りで目新しい新機能はなかった。 − パフォーマンス、Packaged Web App、Web Componentsが目についた
- WebアプリケーションのPFとしてAndroidやモバイルデバイスのこれから
- Canvas, SVGに対してOpenGLやネイティブアプリの動向は?
感想
- Packaged Web App気になる。
- Nativeアプリ開発は難しいけど、逃げててもダメだなーと思った。
- TizenやFirefox OS気になる
- Android端末持ってないので買いたい