Embed Size (px)
Citation preview
JavaScriptのクロスプラットフォーム開発について色々
20130910 20:30
@sugimoto1981
自己紹介
1.杉本 吉章 ( @sugimoto1981 )
2.株式会社 音生
3.フロントエンドエンジニア…？
作ってるものとかはgithub見てください(๑╹ڡ )╹๑
https://github.com/ysugimoto
Agenda
1.クライアントサイドJavaScript
2.スマートフォンJavaScript（Web Browser）
3.スマートフォンJavaScript（Native）
4.デスクトップアプリJavaScript
Case1: クライアントサイドJavaScript
最近のJavaScript
1.シングルページ / Statefulアプリケーション
– JavaScript MVC / Worker Thread
2.高度なアニメーション/グラフィック表現
– Canvas / WebGL
3.幅広くなったNetwork周り
– WebSocket / Cross Origin XHR
4.サーバーサイドでもJavaScript
– Node.js
and more...
周辺技術の多様化
1. ECMAScript...5? 6？
– それこのブラウザで使えるんですか？
2. Gruntで自動化する人が増えた
– JavaScriptをビルドする/ 周辺ツールとの組み合わせ
3. altJSで型安全に書く人も
– Haxe / TypeScript
4. アプリケーション規模の拡大（コードステップ数の増加）
– メンテナブル / テスタブルな設計が求められるように
– jQueryで書き散らしたコードだと近い将来死ぬ
5. IE6対応してたら仙人と呼ばれるようになった
特に紹介するツールがないのでこの辺で…
Node.js / Gruntについては後半で紹介しているアプリで使っています
Case 2:スマートフォンJavaScript（Web Browser）
スマートフォンでもクロスブラウザ…
1. iOSはバージョンいくつから対応ですか
– 実機用意してもらえるんですよね？
2. Androidェ・・・
3. リクエスト減らして！
4. 画像最適化して！
5. リフロー/リペイントに気を遣って！
6. 一つ一つの処理は可能な限り軽くして！
シビアな処理対応の要求
1.ライブラリの選定から考える
– ネットワークコストは？実行コストは？
– そのライブラリは必ず必要？
2.要求知識も広くなる
– HTTPの仕組みと知識も必要になってくる
3.ブラウザの気持ちを知る、ブラウザの気持ちになる
– リフロー/ リペイントのタイミング制御
– Composite Layerの理解とか
4.Chrome Devtoolの使い方覚えなきゃ
ここも紹介するツールがないのでこの辺で…
Case 3:スマートフォンJavaScript（Native）
開発ツール（サービス）
今日はTitanium触ってみたので話します。
（本当はHerlockの話したかったんですが、 βアカウントが開放されるのがギリギリすぎた）
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で定義する
How to Install?
$ npm install -g alloy
Document
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start
お題
今日のイベントの概要・参加者リストを取ってきて
表示する（だけの）アプリをTitanium Alloyで
出来上がったものがこちら
https://github.com/ysugimoto/HTML5_Study_Nagoya_7/tree/master/titanium-alloy
GenyMotion
Genymotion
1.標準のエミュレータに比べて爆速で動くエミュレータ
2.ただしAndroid4.xからのデバイスのみ
3.VirtualBoxと連携して動作する
4.OpenGLを使っているらしくヌルヌル動く
これからのAndroid開発はこれを使うのが良いんじゃないでしょうか
https://cloud.genymotion.com/page/customer/login/?next=/
How to Install and build
1.公式サイトにサインアップ、ログイン
2. それぞれのプラットフォームのファイルをダウンロード
3. ビルドしてパスを通す
4.好きなデバイスを作成してローンチ
5. デバイスはVirtualBox経由でネットワーク接続されているので、デバッグビルドの転送はちょっと手間がかかる
Titaniumとの連携は下記を参照
http://q i ita.com/sngmr/items/d7c244114d7242c681c5
または、サンプルアプリでgruntビルドタスクを書いたので参考にしてください
Case 4:デスクトップアプリ
JavaScriptでデスクトップアプリ
1. Tide SDK
2. node-webkit
3. Windowsは標準で作成可能
node-webkitを触ってみたので話します。
node-webkit
1. Chromiumをベースにnodeを再実装しているらしい
– なにそれキモイ
2. nodeが動く→npmが使える
– 多様なモジュールが利用できる
3. クロスプラットフォーム
4.採用例も少しある
– Prepros http://alphapixels.com/prepros/
こんな感じ
<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
Hou to install and build
1. GithubからOS用のパッケージをダウンロード
2. index.html作成
3. package.json作成
4. コマンド実行でコンパイル
5. アプリケーション実行
自分でビルドするのは結構しんどい・・・
パッケージのダウンロード
https://github.com/rogerwang/node-webkit
index.htmlの作成
普通のHTML
package.jsonの作成
npmのpakcage.jsonといい感じにマージされる
コマンド実行でコンパイル
$ zip app.nw /path/to/project/* r
実際はzip圧縮しているだけ
node_modulesをバンドルしておけばnpmがrequireで使える
Windowsの場合は一旦.zipにしてからリネームでOK（未検証）
アプリケーション実行
$ /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
お題
今日のイベントの概要・参加者リストを取ってきて
表示する（だけの）アプリをnode-webkitで
出来上がったものがこちら
https://github.com/ysugimoto/HTML5_Study_Nagoya_7/tree/master/node-webkit
感想など
1. まだ不安定な部分が結構ある
– watchしてるとissue（というか質問）がバシバシ
– 特にメディア周りがちょっと…
2. さくっとデスクトップアプリ作るのにいいかも
– Webアプリのデータ入力I/Fとか監視ツールとか
3. altJS使いながら書けばそれっぽくなる（かも）
結構期待している
ありがとうございました
Photos in this slide:
http://bit.ly/15JSSbq / http://bit.ly/16fbJhO
http://bit.ly/1e9uwkw/ http://bit.ly/14z6Zp9
