2012-05-16

第29回 HTML5とか勉強会に参加してきた #html5j

勉強会 HTML5

今回からは、最近増えて増えて仕方ないJavaScriptフレームワークをガンガン追求していきたいと思います。
今回と次回は、モバイルフレームワークに焦点を当てて紹介したいと思います。

『JavaScriptモバイルフレームワーク』をテーマとして、前編/後編開催と銘打たれたHTML5とか勉強会。第29回の今回はその前編として位置づけられました。個人的にも興味深いテーマだったので告知待機し、速効申込みDone。この日参加してきました。

開催会場はDeNAヒカリエ会議室＠渋谷。最近移転した事自体大きなニュースになりましたが、やはり綺麗で羨ましい限りですね〜。地階から辿り付いたので2階に伸びている連絡通路経由で入ることは叶いませんでしたw(^_^;)

渋谷ヒカリエ/Shibuya Hikarie

モデレータの小松健作さんからの簡単な導入トークを経て、講演スタートです。以下メモ。
(※ボリューム的にメモを取り切れていないパートなどがあるかと思いますが、その辺は御容赦下さい。m(_ _)m)

モバイル系フレームワークについて(20分×3組)

ngCore on HTML5

DeNA 紀平さん (TwitterID:@Takuo Kihira

自己紹介：読みは『きひら』。酷い時は『のりへい』と呼ばれる事も･･･
- DeNAにおいてHTML5の総括的立場

ngCoreとは
- Javascriptを使ったゲーム用フレームワーク
- ゲームとソーシャル機能に特化
- ゲームライブラリ:ngGo

1つソースを書くだけで、iOS/Androidの両方で展開可能。
個人でも無料で使用可能
ng:Next Generationらしい。

ngCore使用ゲーム、忍者ロワイヤル、アクアコレクション等々。

ngCoreの大雑把な仕組み…1番上を変更すると内容も変わる
- GameCode(Javascript)
- Javascript Engine
- ngCore
- iOS/Android

他にもゲームエンジンはたくさんある
- Unity 3Dで非常に有名。様々な言語が利用可能
- Adobe AIR
- Moai SDK Luaベースの高速かつ軽量エンジン
- Corona SDK 実績豊富なLuaベースの2Dエンジン

ngCoreの特徴
- 収益を上げる実績がある
- 開発支援環境の充実
- SDKに標準でソーシャルのAPI
- 開発言語がJavascriptである。

Javascriptだと何が嬉しいのか？
- 高速なスクリプト実行エンジン
- 豊富なツール群 JavascriptLint, Google Closure Compiler, etc
- ブラウザでそのまま実行できる※メリットを享受するには全てをJavascriptで動かす。

iOSやandroidで動いているゲームアプリを、そのままブラウザで動かすことが出来る
- インストールの必要なし
- 起動時間の大幅な短縮
- 特定シーンをURLで共有可能

実際ngCoreがどのように動いているか(HTML5実機デモ実演)
ngCore on HTML5 構成

HTML5化のメリット
- リアルタイム更新
  - バグがあった時に2週間直せない
  - クリスマス終了後のクリスマスイベント
- 新しいプラットフォームの対応
  - Windows Phone, PS Vita, etc
- 既存資産の移行可能
  - アプリとWeb、どちらが流行っても即時対応可能

FrameworkはJavascriptだ！
- アプリのフレームワークであっても、将来のHTML5移行を見据えるのが重要
- JavascriptのFrameworkを優先的に使おう！

PhoneGap

DeNA タチゾノマサヒコさん (TwitterID:@mshk)

PhoneGapで作るハイブリッドアプリケーション

自己紹介
- 最初は組み込みソフトウェア・エンジニア
- Webのスピード感に憧れて業種チェンジ→ナタリー
- DeNAｄｅ海外版mobage→ngCore
- 現在は再びWebメディアのお仕事

Webアプリか、ネイティブアプリか？

★Webアプリのいいところ
- 色んなプラットフォームに対応しやすい。
- アップデートが簡単。
- HTML/CSS/JSなど、ウェブの技術が使える。
●弱いところ
- App Store/Google Playが使えない。
  - 課金を自前で実装、集客で大変。
  - 『鼻毛系』ゲームを揃えて30万ダウンロード→割と集客できるらしい。広告にとってもメリット
- カメラ、傾きセンサー、アドレス帳等スマホ特有の機能が利用出来ない。

★ネイティブアプリの良いところ
- objective-c/Java/C++で開発。等々...
●弱いところ
- 開発が大変。
- プラットフォームごとに開発が必要。
- iOSでAppStoreを使う場合など、審査が必要、アップデートに時間が掛かる。

まとめると
- アプリ形式でないと色々厳しい。
- が、ネイティブで開発するのは大変だし…

→んで、『ハイブリッドアプリ』という選択肢。

ハイブリッドアプリと言う選択肢

ネイティブアプリ上に配置されたWebViewで、HTML/CSS/Javascriptで記述されたアプリケーションを動かす。
単体アプリとして提供されるので、ネイティブアプリと同じようにアプリストアで配布可能。
1ソースで多くのプラットフォームに対応

そこでPhone Gap。

PhoneGapのご紹介

Web Viewをベースに、各種プラットフォーム上で動くアプリとして、『ラップ』する。
JSから、ネイティブAPIへのブリッジを提供。
Adobeが買収、現在はOSSとして運営しながら、Dreamweaver等の製品･･･
対応プラットフォーム：非常に多い。(WebViewを乗っけてるだけなので)

ネイティブAPIサポート
- モーションセンサ、カメラ、キャプチャ系、コンパス、場所センサー、ネットワーク状況･･･
- アドレス情報へのアクセス、メディア系...

UIウィジェットは無い。
プラットフォームによっては、サポートされないものもある。
PhoneGapプラグイン
- 機能追加を行える。
- ネイティブ実装も含める事が出来る。
- 公開されているプラグインは、必ずしも全てのプラットフォームをサポートしていない。

PhoneGapベースのアプリケーション
- TINY TERRORS
- WIKIPEDIA(のアプリ)

コードサンプル
- CAMERA API
  - ベース、HTML5。サイトコードを編集する感覚で変更が出来る。

PHONEGAP BUILD
- PhoneGap Build
- PGベースのウェ部あぷり書き出しを行ってくれるWebサービス。
- HTML/CSS/JS
- ビルド設定画面(Github)

Dreamweaver連携
- Adobe DW CS6で、モバイル向けテンプレートでサイトを作成。
- 作ったアプリがそのまま行けますよ、という立ち位置。

まとめ
- PhoneGapはHTML5ベース。
- UIは、Javascript/CSSを使って何とかする。
- サポートしているプラットフォームが多い。
- PhoneGap Builderを使える。
- ウェブサイトをベースに、アプリにも展開するような用途に向きそう。

Titanium Mobile

Appcelarator 増井さん (TwitterID:@masuidrive)

自己紹介
- プラットフォームエバンジェリスト
- PukiWiki
- 10分Rails Video
- MobiRuby等々

Titanium Mobileを触った人、アプリ作っちゃった人…？後者はそこまで居ない

ネイティブか、HTML5か･･･
- 全然環境が違う
HTML5ベースで作ろう。でも出来ない部分も。パフォーマンスの問題等も。
でもObjC/Java、覚えるのがつらい。
JSだけでアプリを組む。その解としてのTitanium Mobile。

HTML5 vs Titanium→×(対立する必要なし)。上手く混在させることも出来る。

実際に使われているの？
- 30万人の開発者
- 35000のアプリがマーケットへ。
Titanium Mobile製のアプリ例
- ココログのエディタ
  - iPhone/Android両方をTitanium Mobileで作る。既存の資産(ObjC/Java)は捨てた。
- サイボウズLive
- 積ん読本(博報堂からのリリース) 灰色ハイジさん
  - Titanium Mobileを独学で勉強して2〜3週間で作った
  - 作る前はSQL何？DB何？という位だったらしい。

UIの部分：OS毎に見栄えが変わってしまう。(iOS/Android)
- 例：タブ位置の違いによる操作感の違い
- I/Fを活かして作りこむ事が出来る。
- それぞれに書き分けが出来る。
- アーキテクチャ

どこまで書けるの？
- (だいたい)全機能使えます。
何が出来ないの？
- 画像操作/処理周りがあまり得意ではない。
- 非常に高いリアルタイム性の実現も、若干のノウハウが必要。
- 暗号化機能：暗号解凍処理(重い)が必要
- →ObjC,Javaで拡張するModuleがある。

Open Modile Marketplace(モジュール売買の場所)
- 150以上のデザインエレメンツ、モジュールがある。

最終的にはモジュールを書ける、というのが大きい。

同じAPIがあるけど、同じ動きをするとは限らない。
- OS跨いで同じUI実装すると困るかも
UI部分は一部分ける。

Titanium Mobile 2.0
- 画面レイアウトのエンジン改善
- Appcelerator Cloud Serviceの組み込み
  - APIでサーバ機能を実装
  - BaaS
  - Titanium以外にiOS/Androidのnative SDKを提供

座談会

Video streaming by Ustream

アイスブレイク：改めて自己紹介、JSのどこが好き？

- 実はJSでそんなに大規模やってない、サービス作るのがメインだった。
  - Webから素直に行き来出来るところ。
- 基本的にスクリプト言語は好き。どこでも動き、使いやすいところ。
- JS、私ほど嫌ってる人は居ないのであろうか(笑)
  - 21世紀のC言語、という印象。

JSでアプリその裏側を語るパフォーマンスの追及

パフォーマンスは常に付きまとう問題。
Titaniumはツールで使われる事が多く、そんなに問題にならない。むしろネットワークの問題？
わかりません！→PGはWebで使われることが多いので、問題にならない(しない？)
ガベージコレクションが問題。
ngCoreはゲーム専用なので、非常に大きな問題となる。
- あるタイミングで1秒近く停まる、みたいな事もあるのでガベージコレクションしないような対応も。
ネットワークが遅いのをいかに隠すか、という所も重要。
ゲームの場合、通信は最初に一括ダウンロード、後はサクサク。
重さに関しては作り方で逃げる事が出来る。

Browser Segmentation(includes HardWare issue)：ブラウザの世代間の違いをどうやって吸収していくか

PGはブラウザを提供している、その上の層は自分たちで頑張ってね、という感じ
ますい：適用するのは頑張ってね
- どっちにしてもFWで吸収できるほど、良く出来たものではない。
ngCore：ゲームに特化している特性上、対応OS全てで動くことを保障せねばならない。
- 画面の解像度等は出来るだけライブラリで吸収できるように･･･
- エンジン側でも吸収する部分も。
- ゲームエンジンの場合、レートを間引く等する事で対応している事も。
所謂『ドライバの初期化』の順番などが実装によって違う場合も。ngCoreはエンジン側で吸収しているイメージ。内部の人は血を見ていると思われる･･･w
Android上で完全UI互換できるツールキットが出来れば売れるのに…w
Canvas：Android 2.1では動かない。
- 2.2以降は相当使えるようになっている。
- Canvasの互換性は大分良くなっている。
WebKitのバージョン管理はあんま良く出来て無いらしい。

モバイルJSフレームワーク　どこまで進化する？

Titanium Mobile：本体の進化はひと段落ついた？FWとしての進化はあまりせず、機能追加の方向に。
進化の方向としては『インストールをしない』方向に行くのではないか。そうなればPG自体はそちらの方向に行けるのに。
FWの進化と同時にブラウザの進化も重要。
JSが根底にあって、ネイティブ機能がガンガン動かせるような方向に行ってくれるとモバイルFWが進化し、色々なものが出来るのかなと。
派手なUI系の進化は？

マルチデバイスへの対応 UI/UX

スマホやTVとのUIとはかなり違ってくるのではないか。
画面の視野角が重要･･･もしかしたら同じUIが使えるのでは？
- TVで動くアプリが出てきたとしても、スマホ等と同じUIで使えたとしてもおかしくは無い。
TVでブラウザ･･･ページとしての機能が出来ると、布教してくるのではないか。
- UXの大きなジャンプが無いと使われないのではないか。
TVでTwitterつぶやきを実現しているものもある、『ネットとテレビの融合』(by ホリエモン)がついに来るか？
その点、ニコニコ動画は面白い。新しいUI。

今後どうなる？バイバイ ObjC？

言語は目的を達成するうえで選ぶべきである。
残っていくとは思う。
ObjCを知っていくことはプラスになるとは思う。
JSで簡単、早いからどうか
開発環境としての速さ、強化してくるだろう
取捨選択、幅を持つ事は重要。

この後、軽く質疑応答。その中から幾つか抜粋してメモ。

Q.開発環境について：PG(Dream Weaver)
- Titanium Mobile:Titanium Studioというものがある。Eclipseベース。一通りの機能はサポートしている。IFビルダー的なものは未だ。
- ngCore:ngBuilder(スクラッチから作っている)。ゲームに必要な機能を集中的にサポートしている。

Q.HMTL5の場合ソースが記述簡単に見えるが、セキュリティ的に大丈夫なのか？
- ngCoreの場合、ソースに難読化をかけている。
- でも、本気になるとどうとでもされてしまうしなぁ…。
- 音の素材に関するお話、ライセンス管理されてるとこでしか上手く動かない仕組みとか。

この後懇親会があったのですが参加せず。TLを見るとどうやら豪華なお寿司が振る舞われていたようで、ちょっと参加すべきだったかな〜と後悔(笑)

昨日は同じスマホ絡みでもiOS/iPhoneにやや偏った形の勉強会でしたが、今回はその辺りOSを跨いだ色々な意見も聞く事が出来ました。こっち(Javascript)もこっちで、苦労されている点も多いんですね(^_^;) とは言え、Javascriptのみで作れる！リアルタイムで更新反映(確認)が出来る！等と言った点等は魅力的でもあり、取っ付きやすい部分でもありますよね。話しの中で女性の方が2〜3週間でアプリを作ってしまったという例もありましたし。

個人的にはJavascriptに関しては最近離れ気味だったので、書籍等を元に改めて基礎から叩き直して2012年Ver.のJavascriptを付け、世の荒波を乗り切れるように備えていきたいと思います。

本日主催されたスタッフの皆様、会場ご提供頂いたDeNA様、そして参加された皆様方。ありがとうございました！

その他関連：

2012/05/16 第29回 HTML5とか勉強会 #html5j - Togetter