1. JavaScriptのクロスプラット
フォーム開発について色々
2013­09­10 20:30
@sugimoto1981

2. 自己紹介
1.杉本 吉章 ( @sugimoto1981 )
2.株式会社 音生
3.フロントエンドエンジニア…？
作ってるものとかはgithub見てください(๑╹‫ڡ‬ )╹๑
https://github.com/ysugimoto

3. Agenda
1.クライアントサイドJavaScript
2.スマートフォンJavaScript（Web Browser）
3.スマートフォンJavaScript（Native）
4.デスクトップアプリJavaScript

4. Case1: クライアントサイドJavaScript

5. 最近のJavaScript
1.シングルページ / Statefulアプリケーション
– JavaScript MVC / Worker Thread
2.高度なアニメーション/グラフィック表現
– Canvas / WebGL
3.幅広くなったNetwork周り
– WebSocket / Cross Origin XHR
4.サーバーサイドでもJavaScript
– Node.js
and more...

6. 周辺技術の多様化
1. ECMAScript...5? 6？
– それこのブラウザで使えるんですか？
2. Gruntで自動化する人が増えた
– JavaScriptをビルドする/ 周辺ツールとの組み合わせ
3. altJSで型安全に書く人も
– Haxe / TypeScript
4. アプリケーション規模の拡大（コードステップ数の増加）
– メンテナブル / テスタブルな設計が求められるように
– jQueryで書き散らしたコードだと近い将来死ぬ
5. IE6対応してたら仙人と呼ばれるようになった

7. 特に紹介するツールがないのでこの辺で…
Node.js / Gruntについては後半で紹介しているアプリで使っています

8. Case 2:
スマートフォン
JavaScript
（Web Browser）

9. スマートフォンでもクロスブラウザ…
1. iOSはバージョンいくつから対応ですか
– 実機用意してもらえるんですよね？
2. Androidェ・・・
3. リクエスト減らして！
4. 画像最適化して！
5. リフロー/リペイントに気を遣って！
6. 一つ一つの処理は可能な限り軽くして！

10. シビアな処理対応の要求
1.ライブラリの選定から考える
– ネットワークコストは？実行コストは？
– そのライブラリは必ず必要？
2.要求知識も広くなる
– HTTPの仕組みと知識も必要になってくる
3.ブラウザの気持ちを知る、ブラウザの気持ちになる
– リフロー/ リペイントのタイミング制御
– Composite Layerの理解とか
4.Chrome Devtoolの使い方覚えなきゃ

11. ここも紹介するツールがないのでこの辺で…

12. Case 3:
スマートフォン
JavaScript
（Native）

13. 開発ツール（サービス）
今日はTitanium触ってみたので話します。
（本当はHerlockの話したかったんですが、
βアカウントが開放されるのがギリギリすぎた）

15. Titanium Alloy
1. Appcerelatorが公式に提供しているMVC-Framework
2. Node.js（npm）で提供されている
3. Railsライクなgeneratorが使える
4. ModelはBackbone.jsを継承している
– Collectionも使える（Modelと同じクラスで定義するのでちょっと違和感が
ある）
– SQLiteアダプタが使えるのでDB操作が楽
– RESTアダプタが欲しい
5. Viewはxmlで定義する

16. How to Install?
$ npm install -g alloy
Document
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start

17. お題
今日のイベントの概要・参加者リストを取ってきて
表示する（だけの）アプリをTitanium Alloyで
出来上がったものがこちら
https://github.com/ysugimoto/HTML5_Study_Nagoya_7/tree/master/titanium-alloy

18. GenyMotion

19. Genymotion
1.標準のエミュレータに比べて爆速で動くエミュレータ
2.ただしAndroid4.xからのデバイスのみ
3.VirtualBoxと連携して動作する
4.OpenGLを使っているらしくヌルヌル動く
これからのAndroid開発はこれを使うのが良いんじゃないでしょうか
https://cloud.genymotion.com/page/customer/login/?next=/

20. How to Install and build
1. 公式サイトにサインアップ、ログイン
2. それぞれのプラットフォームのファイルをダウンロード
3. ビルドしてパスを通す
4. 好きなデバイスを作成してローンチ
5. デバイスはVirtualBox経由でネットワーク接続されているので、デ
バッグビルドの転送はちょっと手間がかかる
Titaniumとの連携は下記を参照
http://qiita.com/sngmr/items/d7c244114d7242c681c5
または、サンプルアプリでgruntビルドタスクを書いたので参考にしてください

21. Case 4:
デスクトップアプリ

22. JavaScriptでデスクトップアプリ
1. Tide SDK
2. node-webkit
3. Windowsは標準で作成可能
node-webkitを触ってみたので話します。

23. node-webkit
1. Chromiumをベースにnodeを再実装しているらしい
– なにそれキモイ
2. nodeが動く→npmが使える
– 多様なモジュールが利用できる
3. クロスプラットフォーム
4.採用例も少しある
– Prepros http://alphapixels.com/prepros/

24. こんな感じ
<script>
var fs = require('fs');
fs.readFile('/path/to/file', function(err, buffer) {
var element = document.getElementById('hogehoge');
element.innerHTML = buffer;
});
</script>
!?
DOM meets node

25. Hou to install and build
1. GithubからOS用のパッケージをダウンロード
2. index.html作成
3. package.json作成
4. コマンド実行でコンパイル
5. アプリケーション実行
自分でビルドするのは結構しんどい・・・

26. パッケージのダウンロード
https://github.com/rogerwang/node-webkit

27. index.htmlの作成
普通のHTML

28. package.jsonの作成
npmのpakcage.jsonといい感じにマージされる

29. コマンド実行でコンパイル
$ zip app.nw /path/to/project/* ­r
実際はzip圧縮しているだけ
node_modulesをバンドルしておけばnpmがrequireで使える
Windowsの場合は一旦.zipにしてからリネームでOK（未検証）

30. アプリケーション実行
$ /usr/local/bin/nw app.nw
パッケージ内のnwコマンドの引数にアプリケーションを渡す
Windowsの場合はapp.nwをnw.exeにDrag-Dropで起動
実行ファイルにしたい場合は・・・
$ cp nw.pak /path/to/project/
$ zip app.nw /path/to/project/* ­r
$ cat /usr/local/bin/nw app.nw > app
$ chmod +x app

31. お題
今日のイベントの概要・参加者リストを取ってきて
表示する（だけの）アプリをnode-webkitで
出来上がったものがこちら
https://github.com/ysugimoto/HTML5_Study_Nagoya_7/tree/master/node-webkit

32. 感想など
1. まだ不安定な部分が結構ある
– watchしてるとissue（というか質問）がバシバシ
– 特にメディア周りがちょっと…
2. さくっとデスクトップアプリ作るのにいいかも
– Webアプリのデータ入力I/Fとか監視ツールとか
3. altJS使いながら書けばそれっぽくなる（かも）
結構期待している

33. ありがとうございました
Photos in this slide:
http://bit.ly/15JSSbq / http://bit.ly/16fbJhO
http://bit.ly/1e9uwkw/ http://bit.ly/14z6Zp9