pirosikick's diary

君のハートにunshift

第39回 HTML5とか勉強会+日本Androidの会に行った。

勉強会 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へ
    • 全てのプレゼンテーション層のロジックをサーバからクライアントへ
    • 背景
      • クライアントの性能向上
      • Ajaxによるネットトラフィック増大
      • プログラムとViewの分離が難しい
  • AndroidはHTML5の対応が遅れていたが、4.2でChromeが搭載されたことでだいぶ改善した。
  • AndroidとChromeのマーケットの統合が今年中に起きそう
  • Android開発者はチャンスだから頑張れ
    • iOSの3〜5倍のシェア
    • PlayのランキングにJapanのアプリがいっぱいある

セッション3「ハイブリッドアプリの設計」

講演者　日高一明 さん(クックパッド株式会社)

  • ハイブリッドアプリの種類
    • WebViewをラッピングその１
      • サーバにあるコンテンツをWebViewで読み込む
    • WebViewをラッピングその２
      • HTMLをアプリに埋め込む
        • サーバから読み込むのではなくアプリに含めるってことかしら？
      • サーバとはAPI通信を行わない
      • ローカルでもある程度動かせる
    • 基本的にはNativeで一分画面でWebViewを使う
  • 大事な方針 → どちらでやった方が価値がある画面なのか？
  • じゃあ価値って何？
    • 完成品の品質
    • 実装コスト
    • 運用コスト
  • WebViewが適さないもの
    • リスト・ギャラリー画面
      • 画像が多い画面
      • Native使ったほうが利点が多い
        • Viewの再利用、画像のキャッシュ・開放等をやってくれるから
    • 起動時の画面
      • 表示するコンテンツ以外に付加情報（アップデート情報とか）を取得したい画面
  • WebViewが適しているもの
    • 詳細画面などのコンテンツ
      • HTMLのレイアウト能力の高さはNativeよりもメリットが大きい
      • 特に更新されていくコンテンツの運用では当初の想定外の見せ方は起きる

  • 実装例１

    • WebViewのすすむ・もどる繊維とNativeの画面遷移の管理の問題が起きやすい
      • WebViewでのリンク遷移させない方針
      • 遷移はWebViewで行いNative部分はダイアログの展開

  • 実装例２

    • 要素の長押しの処理・フリックの処理はJSで行い、Native側に通知
      • call: mailto:などのリンクは定番なので対応しておく
      • Cookieでログイン状態を連動する

  • 忘れがちな違い

    • HTMLでの遷移は画面遷移ごとにサーバから取得する

  • Cockpadはなぜハイブリッドか？

    • サービスの性質
      • もともとWeb
      • 画像とかコンテンツがサーバにある
        • PCタブレットでローカルで管理するものが少ない
      • 逆に、ローカルで行なっていること
        • アプリ間連携用のアカウント情報の管理
        • レシピを載せる機能全般
        • 各種ダイアログ・API通信
        • 検索とか
    • 運用上の理由
      • 細かく仮設・検証をやっている　→　chanko
      • A/Bテスト、一部ユーザ向けテストをするための環境が整っている

  • まとめ

    • ハイブリッドアプリの幅は広い
    • WebViewのメリット・デメリットをもっと把握しましょう
    • 運用は大切

セッション4「ハイブリットソーシャルゲームの現場」

講演者: 鈴木匠太さん （株式会社ポケラボ クリエイティブ事業部 部長） 　　　　 前田翔悟さん　（株式会社ポケラボ ソーシャルメディア事業部）

  • ポケラボ？

  • なぜハイブリッド？

    • Webエンジニアが多かった
      • もともとガラケーやってたからWebエンジニアが多かった
    • 先人たちの教えに共感した
      • 投資家たち「Webこそ最強やで」
    • ネイティブでのアニメーションが作れなかった
      • 現在はCreateJSメインでやっている
        • SwiffyはAndroidの一部端末で動かなかった

  • ハイブリッドどうよ？

    • 運用楽。１ソースマルチデバイス
      • 毎日更新しないとあきられる
      • 音も出せるし特に問題なし。
    • WebView遅い？
      • CSSアニメーションも使い分けたり工夫してる

  • 困ったこと

    • CreateJSにないAPIを使ってると変換できない アバター開発時にFlashでBoneAnimation作ってJSに変換　→　がCreateJSではBone使えね
    • 増え続けるスキル演出
      • 必要な画像ファイル等多すぎて管理が大変
      • RequireJSで都度読み込ん出る

  • Androidでユーザに楽しんでもらうための３つのアプローチ

    • ハイブリッド固定メニュー
      • ヘッダーフッターをoverflow: scrollとposition:fixedで実装すると、遅い or 動かない端末あり
      • ヘッダー・フッター用のコマンドを用意し、JSから叩く
        • 例）header://json=...
      • Native側でViewに変換
  • ハイブリッド高速アニメーション
    • ２段階変換する
    • 約3倍のフレームレート！！
  • iOSとのUUID連携
    • AndroidのUUID使いづらいので、独自にUUID管理している

パネルディスカッション

もう眠いのでざっくりと。

  • TizenのHTML5スコアが高い
  • 性能が良くなっているとはいえ、スマフォのHTML5で3Dゲームはまだきつい。それ以外だったらスマフォでも全然OK。
  • Google IOに行ったが、HTML5周りで目新しい新機能はなかった。 − パフォーマンス、Packaged Web App、Web Componentsが目についた
  • WebアプリケーションのPFとしてAndroidやモバイルデバイスのこれから
    • AndroidはHTML5で遅れをとっているが、Packaged Appに期待
    • リッチな3Dゲームとかはまだ無理。そういうとこはOpenGL使ったほうがよい。
      • 適材適所っていう状態はまだまだ続きそう
      • どのくらいおそい？　→　リッチな3Dゲームがまともに動くのは今のところChromeだけ
      • OpenGLからWebGLへの移植は楽
    • 2・3年前くらいはDevice APIくるんじゃねって感じだったけど、今はPackaged Web AppでOSやデバイスの機能にアクセスするのが現時的にかも
  • Canvas,　SVGに対してOpenGLやネイティブアプリの動向は？
    • WebGLいいけどiOS, Androidでまともに動かないので独自のRuntime Engineを作ってるとこが多い。
      • 独自でWebViewを作るってこと
    • 古い端末に対応しようと思うとOpenGLでいいかも。Unityとかあるし。
    • Canvasは最終手段

感想

  • Packaged Web App気になる。
  • Nativeアプリ開発は難しいけど、逃げててもダメだなーと思った。
  • TizenやFirefox OS気になる
  • Android端末持ってないので買いたい