Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
JavaScriptのクロスプラット
フォーム開発について色々
2013­09­10 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.幅広くなっ...
周辺技術の多様化
1. ECMAScript...5? 6?
– それこのブラウザで使えるんですか?
2. Gruntで自動化する人が増えた
– JavaScriptをビルドする/ 周辺ツールとの組み合わせ
3. altJSで型安全に書く人も
...
特に紹介するツールがないのでこの辺で…
Node.js / Gruntについては後半で紹介しているアプリで使っています
Case 2:
スマートフォン
JavaScript
(Web Browser)
スマートフォンでもクロスブラウザ…
1. iOSはバージョンいくつから対応ですか
– 実機用意してもらえるんですよね?
2. Androidェ・・・
3. リクエスト減らして!
4. 画像最適化して!
5. リフロー/リペイントに気を遣って!
...
シビアな処理対応の要求
1.ライブラリの選定から考える
– ネットワークコストは?実行コストは?
– そのライブラリは必ず必要?
2.要求知識も広くなる
– HTTPの仕組みと知識も必要になってくる
3.ブラウザの気持ちを知る、ブラウザの気持ち...
ここも紹介するツールがないのでこの辺で…
Case 3:
スマートフォン
JavaScript
(Native)
開発ツール(サービス)
今日はTitanium触ってみたので話します。
(本当はHerlockの話したかったんですが、
βアカウントが開放されるのがギリギリすぎた)
Titanium Alloy
1. Appcerelatorが公式に提供しているMVC-Framework
2. Node.js(npm)で提供されている
3. Railsライクなgeneratorが使える
4. ModelはBackbone....
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/tre...
GenyMotion
Genymotion
1.標準のエミュレータに比べて爆速で動くエミュレータ
2.ただしAndroid4.xからのデバイスのみ
3.VirtualBoxと連携して動作する
4.OpenGLを使っているらしくヌルヌル動く
これからのAndroid開...
How to Install and build
1. 公式サイトにサインアップ、ログイン
2. それぞれのプラットフォームのファイルをダウンロード
3. ビルドしてパスを通す
4. 好きなデバイスを作成してローンチ
5. デバイスはVirtu...
Case 4:
デスクトップアプリ
JavaScriptでデスクトップアプリ
1. Tide SDK
2. node-webkit
3. Windowsは標準で作成可能
node-webkitを触ってみたので話します。
node-webkit
1. Chromiumをベースにnodeを再実装しているらしい
– なにそれキモイ
2. nodeが動く→npmが使える
– 多様なモジュールが利用できる
3. クロスプラットフォーム
4.採用例も少しある
– Prep...
こんな感じ
<script>
var fs = require('fs');
fs.readFile('/path/to/file', function(err, buffer) {
var element = document.getElem...
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にしてか...
アプリケーション実行
$ /usr/local/bin/nw app.nw
パッケージ内のnwコマンドの引数にアプリケーションを渡す
Windowsの場合はapp.nwをnw.exeにDrag-Dropで起動
実行ファイルにしたい場合は・・・
...
お題
今日のイベントの概要・参加者リストを取ってきて
表示する(だけの)アプリをnode-webkitで
出来上がったものがこちら
https://github.com/ysugimoto/HTML5_Study_Nagoya_7/tree/m...
感想など
1. まだ不安定な部分が結構ある
– watchしてるとissue(というか質問)がバシバシ
– 特にメディア周りがちょっと…
2. さくっとデスクトップアプリ作るのにいいかも
– Webアプリのデータ入力I/Fとか監視ツールとか
3...
ありがとうございました
Photos in this slide:
http://bit.ly/15JSSbq / http://bit.ly/16fbJhO
http://bit.ly/1e9uwkw/ http://bit.ly/14z6Z...
Html5 nagoya 07
Prochain SlideShare
Chargement dans…5
×

Html5 nagoya 07

0 vue

Publié le

  • Soyez le premier à commenter

Html5 nagoya 07

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

×