itochin2の日記（仮）

主に備忘録。Perl、MySQL、Unity、開発管理などについて情報を残していきたい。

HTML5とか勉強会+日本Androidの会に参加してきた

html5 android

いろいろ刺激になったので、忘れないうちにメモ。
貴重なお話ありがとうございました。

概要

http://kokucheese.com/event/index/90708/
ハッシュタグ：#html5j

１．最近のHTML5はどうなっているのか

HTML5＆API入門の中の人、本物を初めてみた！
オシャレ坊主に憧れて坊主にしたけど、今は後悔している・・・
みたいな場を温めるネタも面白かった。

「HTML5は７つの◯◯WEBに対応している」というお話。

１．オフラインWEB

コンテンツをローカルにキャッシュし、オフラインでもサービスが動く

２．リアルタイムWEB

webSocketを利用して、リアルタイム性の高いサービスを作れる。
あと今後重要で、覚えておいて損はないと言ってた「Web RTC」。
ググったら「Web Real Time Communication」の略で、
プラグイン無しでブラウザ間の音声通話が可能になるAPIらしい。
電話とか無くなる時代がくるのかな・・・。

３．レスポンシブWEB

１つのHTLMで複数のレイアウトを実現できる。
CSSメディアクエリを使えば、スタイルシートの定義だけで
スマホ用、タブレット用、PC用にレイアウト変更できる！

４．セマンティックWEB

「セマンティック」が何を意味するのかがよく分からなかったけど
メタデータを埋め込むことでコンテンツに意味を付加するものらしい。
そうすると、情報が効率よく集められて、WEB全体がデータベースになっていく。
なんだか壮大な話だ。

５．スピーディーWEB

SPDY。HTTPの拡張プロトコル。HTTP 2.0とも。
HTTPの拡張があること自体知らなかった。

６．プラットフォームWEB

デバイスAPIが揃ってきて、BlueToothとかカメラとか扱えるようになってきた。

７．インプレッシブWEB

白石さんの造語。インプレッシブ(感動的)なサービスが生まれてきた。
Web GL使って、３Dのアプリを作ったりもできる！
[rome]
http://www.ro.me/
このデモはパない。

HTML5のメリット・デメリット

ネイティブに比べると動作遅いし、アプリストアからの動線もないけど
インストール不要だし、サービスの取り回しは軽くて自由度が高い。

２．AndroidとChromeの統合について

WEBアプリといえば、以前はサーバサイドだったけど、
今はサーバとクライアントに分かれつつある。

今までAndroidとWebアプリは接点がなかったけど、
最近はサーバ側の負担が重くなってきたのと、端末の処理能力が向上したので
徐々に統合される流れがある。

課題はロジックとViewの分離が難しいこと。
プログラマはデザインの変更で追加実装を嫌がるし、
デザイナーはプログラムの修正に合わせて、デザインを修正するのを嫌がるっていうのは
思い当たる節があった。

AndroidはiOSに比べて３〜５倍のユーザーがいるので
数を持って市場を制す方針。

３．ハイブリッドアプリの設計

cookpadさんの事例。
ユーザーにとって価値あるサービスを提供できるように
WebViewで出来ること、Nativeで出来ることを把握して
取捨選択して設計しましょう、という話だった。
ちょっと前にボコボコに叩かれてから持ち直しただけに、説得力があった。

講演でのハイブリットアプリの定義は
「基本Nativeで、一部の画面がWebView」スタイル。

画面を設計する時に検討すること。

品質：NativeとのUXがどのくらい違うのか。
実装コスト：HTML5でどれだけ楽に作れるのか。
運用コスト：更新の頻度と手間を考える。

WebViewが適さないもの

リスト系、画像のギャラリー系。
動的にDOM要素が増えていくものや、大量に画像読み込んでいくもの。
メモリをガンガン食って落ちたりするし、Nativeのサクサクな操作性には勝てない。

WebViewに適しているもの

詳細画面とかの文字ベースコンテンツ。
レイアウトを変えたりするのは、頻繁に情報を更新するページは
HTMLで作った方が良い。
もともとHTMLって文字を表示するための技術だからな！

画面遷移はNativeで管理するのが吉。

Webの画面遷移はユーザーごとに違うので読めないけど、Nativeなら制御できる。
制御できるので、先読みでリソース落としたりしてストレス軽減を狙える。
良いサービスにはこういう細かい気配りが必要だよなー。

４．ハイブリットソーシャルゲームの現場

ポケラボさんの事例。
せっかく用意してきた会社紹介ムービーをばっつり終了させたのは笑った。
毎日が負のログインボーナス！っていうのは笑えるけど笑えない・・・。

スマホでのアニメーションをどのようにして実装しているか
ヒントを貰えてよかった。

ハイブリットアプリ導入の流れ

消去法。
WEBエンジニアとflasherが多くて、ネイティブは無理だからハイブリットにした。

WebViewは遅いんじゃないか？

ちょっとしたアニメーションはCSSで。ガッツリした奴は変換したものを使う。
あとキャッシュをちゃんと使うことで高速化を図っている。

膨大なスキル演出

１００を超える演出の管理が大変。
RequireJSを使って、つど読み込みしてる。

固定のヘッダー・フッター

UXを向上させるヘッダー・フッターをハイブリットに実装してる。
webからjson形式でパラメータを渡し、Nativeが解析＆Viewに変換して表示。
動作は早いし、更新も簡単！
このアイデアはいいと思った。

演出アニメーションの高速化

flash→JS→Androidに変換させる仕組みを自作した。
CreateJSよりも３倍のフレームレートが出た！
わざわざ作ったのはLWFに不満があるからなのだろうか・・・？


今後やろうと思ったこと

  • web Storage使って、アプリケーション高速化することを調べる。
  • CreateJS、Google Swiffy、ExGame、LWFあたりのキーワードを調べる。
  • 絶対防衛レヴィアタンもプレイしてみる。LWFを導入してるらしい。
  • RequireJSって何かを調べる。