Perlプログラマのためのスマートフォン開発ガイド CoffeeScript / Node / HTML5          Naoya Ito
キーワード•   PhoneGap•   Titanium Mobile•   CoffeeScript•   Node.js•   Socket.IO•   Express•   npm•   …
半年ほど前
一ヶ月前
今週
“Embedded Web Vies”
Web UI
モチベーション
ネイティブと Web App のハイブリッドへ• HTML5アプリケーションをネイティブで補う...• ネイティブをWeb技術 (スクリプト言語) で作る...
アジェンダ• クライアントサイド  • PhoneGap  • Titanium Mobile  • Scripting Layer for Android• サーバーサイド  • Node or Perl
PhoneGap, Titanium Mobile, Scripting Layer for Androidクライアントサイド
スクリプト言語で iOS/Android アプリ • HTML5   • Web開発、同様スクリプト言語で書きたい!      • JavaScript, CoffeeScript      • スクリプト言語な俺たち歓喜 \(^o^)/   ...
PhoneGap
PhoneGap • UIWebView ベースのアプリ開発 F/W • JavaScript / HTML / CSS   • UIWebView の js に Native Bridge な API   • Phone"Gap" navig...
例: Photo Receiver • PhoneGap (+ jQuery mobile) + Node (+ Express + Socket.IO)                           WebSocket         ...
Photo Receiver (sender, index.html)  <html>   <head>    ...    <script type="text/javascript" src="phonegap-1.0.0.js"></sc...
Photo Receiver (sender, sender.coffee)  onDeviceReady = ->    socket = io.connect http://localhost:3000/sender    onSucces...
Photo Receiver (receiver, app.coffee)  express = require "express"  app = module.exports = express.createServer()  app.get...
PhoneGap あれこれ • HTML + JS = "HTML5 ready"    •   jQuery / jQuery mobile    •   CoffeeScript    •   socket.io    •   sass, ...
Titanium Mobile
Titanium Mobile • ネイティブアプリを JavaScript で • Titanium Studio でビルド    • インタプリタ上で動く       • iOS : JavascriptCore / Android : R...
例: Cover Flow
Cover Flow win = Ti.UI.currentWindow() view = Ti.UI.createCoverFlowView   images: [     ../images/01.jpg     ../images/02....
例: HBFav           https://github.com/naoya/HBFav
HBFav • クライアント   • Titanium Mobile   • CoffeeScript • サーバー   • Node.js        • Express        • xml2json   • Heroku
HBFav コード断片require lib/underscoreTi.include feed.jsclass AbstractState  toString : () -> AbstractState  constructor: (@fee...
Titanium Mobile あれこれ • JavaScript ready    • CoffeeScript    • CommonJS ・・・ underscore, socket.io etc. • Titanium Mobile !...
Scripting Layer for Android (SL4A) • Androidアプリを Perl で    • ここは YAPC だぜ?  use Android  my $android =    Android->new;  $a...
SL4A • PhoneGap, Titanium とも別アプローチ   • Java アプリが "Scripting Layer" と JSON-RPC で通信   • Java アプリのAPIがネイティブの機能をブリッジ • 本格的なアプリ...
クライアントサイドまとめ• JavaScript によるネイティブブリッジFWは発展途上  • この方向性のフレームワークは増える  • PhoneGap, Titanium Mobile は"そこそこ" 実用的     • ※ debug し...
Node vs Perlサーバーサイド
サーバサイド• これまで通り Perl で書いても良いですが・・・• クライアントを JS で、なら、サーバも JSで  • この流れは止められない  • Node.js : server-side JavaScript が現実的に
Node.js • Perl と比較しながら見ていきたい
perl vs Node                 Perl                           Node.js プリプロセッサ         N/A                            CoffeeS...
Node.js • Single Process Event Driven な server-side JavaScript Engine    – Perl : POE, AnyEvent http = require http http.c...
npm $ npm install express cpanm Mojolicious::Lite
search.npmjs.org
underscore.js require underscore pow = _([1, 2, 3]).map (n) -> n * 2 max = _([1, 2, 3]).max() sum = _([1, 2, 3]).reduce (m...
Express • Web framework, Sinatra inspired • Perl ... Mojolicious::Lite etc • SASS/LESS/Stylus, Coffee, Jade/EJS, Socket.IO...
vows • Perl : Test::More, Test::Base, Test::Declare • vows : Asynchronous BDD vows = require vows assert = require assert ...
xml2js • Perl : XML::Simple + JSON parser = new xml2js.Parser() parser.addListener end, (json) ->   console.log json parse...
aws-lib • Perl : Net::Amazon aws = require aws-lib aws = aws.createProdAdvClient(   accessKey, secretKey, associateId,   r...
Node modules           https://github.com/joyent/node/wiki/modules
Socket.IO  • WebSocket-like API       – 抽象化 : WebSocket, xhr-polling, xhr-multipart, jsonp-polling ....  • Node.js の急先鋒/* ...
pocketio • Perl の Socket.IO server    – JS ⇔ Perl    – JS ⇔ Perl ⇔ Perl modules use PocketIO; use Plack::Builder; builder ...
サーバサイドまとめ• Node きてる  – スマートフォン開発のバックエンドを Node にする"必然性"はないが  – クライアントを JS / Coffee で書くなら"優位性"はある• npm++  • CommonJS ウマー• no...
まとめ• スマートフォン : 今後、ネイティブからHTML5へ   • Facebook/Google+   • × 100% HTML5 ○ ハイブリッド• JS (Coffee) のみでアプリが開発できるように   • PhoneGap, ...
Upcoming SlideShare
Loading in …5
×

SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for Perl Programmers

9,349 views
9,274 views

Published on

Published in: Technology

SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for Perl Programmers

  1. 1. Perlプログラマのためのスマートフォン開発ガイド CoffeeScript / Node / HTML5 Naoya Ito
  2. 2. キーワード• PhoneGap• Titanium Mobile• CoffeeScript• Node.js• Socket.IO• Express• npm• …
  3. 3. 半年ほど前
  4. 4. 一ヶ月前
  5. 5. 今週
  6. 6. “Embedded Web Vies”
  7. 7. Web UI
  8. 8. モチベーション
  9. 9. ネイティブと Web App のハイブリッドへ• HTML5アプリケーションをネイティブで補う...• ネイティブをWeb技術 (スクリプト言語) で作る...
  10. 10. アジェンダ• クライアントサイド • PhoneGap • Titanium Mobile • Scripting Layer for Android• サーバーサイド • Node or Perl
  11. 11. PhoneGap, Titanium Mobile, Scripting Layer for Androidクライアントサイド
  12. 12. スクリプト言語で iOS/Android アプリ • HTML5 • Web開発、同様スクリプト言語で書きたい! • JavaScript, CoffeeScript • スクリプト言語な俺たち歓喜 \(^o^)/ • Perl で書ける?
  13. 13. PhoneGap
  14. 14. PhoneGap • UIWebView ベースのアプリ開発 F/W • JavaScript / HTML / CSS • UIWebView の js に Native Bridge な API • Phone"Gap" navigator.camera.getPictures(onSuccess, onFail) onSuccess = function (base64data) { var img = document.getElementById(myImage); img.src = "data:image/jpeg;base64;" + base64data; }
  15. 15. 例: Photo Receiver • PhoneGap (+ jQuery mobile) + Node (+ Express + Socket.IO) WebSocket (Socket.IO) iOS app with PhoneGap Node
  16. 16. Photo Receiver (sender, index.html) <html> <head> ... <script type="text/javascript" src="phonegap-1.0.0.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="socket.io.min.js"></script> ... <script type="text/javascript" src="sender.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Photo Sender</h1> </div> ...
  17. 17. Photo Receiver (sender, sender.coffee) onDeviceReady = -> socket = io.connect http://localhost:3000/sender onSuccess = (data) -> socket.emit pushPhoto, data ... $(#camera).click -> navigator.camera.getPicture onSuccess, onFailure, opt $(document).ready -> $(document).bind deviceready, onDeviceReady # sender.coffee の変更を watch → sender.js を生成 $ coffee -cw *.coffee
  18. 18. Photo Receiver (receiver, app.coffee) express = require "express" app = module.exports = express.createServer() app.get "/", (req, res) -> res.render "index", title: "Photo Receiver" app.listen 3000 io = require(socket.io).listen app sender = io.of(/sender).on connection, (socket) -> socket.on pushPhoto, (data) -> data_uri = "data:image/jpeg;base64," + data receiver.emit showPhoto, data_uri
  19. 19. PhoneGap あれこれ • HTML + JS = "HTML5 ready" • jQuery / jQuery mobile • CoffeeScript • socket.io • sass, less, stylus • Facebook/Google+ と似ているが... • UIKit の制御は bridge しない • UIWebView は Safari より遅い • UIWebView = not Nitro • JITコンパイラなし • Adobe が買収 • Native → HTML5 アプローチとして PhoneGap モデルは有力
  20. 20. Titanium Mobile
  21. 21. Titanium Mobile • ネイティブアプリを JavaScript で • Titanium Studio でビルド • インタプリタ上で動く • iOS : JavascriptCore / Android : Rhino • JSエンジンがUIKitを操作 • 動的に動作確認できる
  22. 22. 例: Cover Flow
  23. 23. Cover Flow win = Ti.UI.currentWindow() view = Ti.UI.createCoverFlowView images: [ ../images/01.jpg ../images/02.jpg ../images/03.jpg ../images/04.jpg ../images/05.jpg ] backgroundColor: #000 win.add view
  24. 24. 例: HBFav https://github.com/naoya/HBFav
  25. 25. HBFav • クライアント • Titanium Mobile • CoffeeScript • サーバー • Node.js • Express • xml2json • Heroku
  26. 26. HBFav コード断片require lib/underscoreTi.include feed.jsclass AbstractState toString : () -> AbstractState constructor: (@feedView) -> getFeed : (url) -> self = @ onload = @.onload onerror = @.onerror xhr = Ti.Network.createHTTPClient() xhr.timeout = 100000 xhr.open GET, url xhr.onload = -> data = JSON.parse @.responseText onload.apply(self, [ data ]) xhr.onload = null xhr.onerror = null xhr = null xhr.onerror = (err) -> onerror.apply(self, [ err ]) xhr.send()
  27. 27. Titanium Mobile あれこれ • JavaScript ready • CoffeeScript • CommonJS ・・・ underscore, socket.io etc. • Titanium Mobile != HTML5 • JavaScript だからといって HTML5 へ向かってるわけではない • 「JS でネイティブ書ける」 • 現時点では、現実的な解 • 実用的だが当然、トレードオフも – メモリ管理不要、ダイナミック更新、ラピッドに開発可 – ネイティブとは速度差 / 細かなチューニングが難しい – デバッグ環境がこなれていない
  28. 28. Scripting Layer for Android (SL4A) • Androidアプリを Perl で • ここは YAPC だぜ? use Android my $android = Android->new; $android->makeToast( "Hello, Android!" );
  29. 29. SL4A • PhoneGap, Titanium とも別アプローチ • Java アプリが "Scripting Layer" と JSON-RPC で通信 • Java アプリのAPIがネイティブの機能をブリッジ • 本格的なアプリを作るのには向かない • 速度、安定性...
  30. 30. クライアントサイドまとめ• JavaScript によるネイティブブリッジFWは発展途上 • この方向性のフレームワークは増える • PhoneGap, Titanium Mobile は"そこそこ" 実用的 • ※ debug しんどい• Facebook/G+ の言う "Embedded Web Views" のFWはまだ • UIWebView アプリを作りつつ • ネイティブの "UI" と橋渡し• Perl でクライアントサイドは、さすがに ... • SL4A はおもちゃの領域を出ない
  31. 31. Node vs Perlサーバーサイド
  32. 32. サーバサイド• これまで通り Perl で書いても良いですが・・・• クライアントを JS で、なら、サーバも JSで • この流れは止められない • Node.js : server-side JavaScript が現実的に
  33. 33. Node.js • Perl と比較しながら見ていきたい
  34. 34. perl vs Node Perl Node.js プリプロセッサ N/A CoffeeScript 言語 Perl言語 JavaScript 実行環境 perlインタプリタ node ウェブ実行環境 mod_perl, PSGI http.Server, connect etc. middleware, etc. Web Framework Catalyst, Mojolicious::Lite, Express, etc. Dancer etc. パッケージ管理 cpan npm 主なWebアプリのモデル prefork (同期) Single Process Event Driven (非同期)
  35. 35. Node.js • Single Process Event Driven な server-side JavaScript Engine – Perl : POE, AnyEvent http = require http http.createServer (req, res) -> res.writeHead 200, Content-Type:text/plain res.end Hello World!¥n .listen 8080 % node-dev hello.coffee • Perl でできないことをやってるわけではない • 一方の「手軽さ」、JavaScript との相性
  36. 36. npm $ npm install express cpanm Mojolicious::Lite
  37. 37. search.npmjs.org
  38. 38. underscore.js require underscore pow = _([1, 2, 3]).map (n) -> n * 2 max = _([1, 2, 3]).max() sum = _([1, 2, 3]).reduce (memo, num) -> memo + num use List::Util qw/max reduce/; my $pow = map { $_ * 2 } (1, 2, 3); my $sum = reduce { $a + $b } (1, 2, 3); my $max = max(1, 2, 3);
  39. 39. Express • Web framework, Sinatra inspired • Perl ... Mojolicious::Lite etc • SASS/LESS/Stylus, Coffee, Jade/EJS, Socket.IO ready – emerging web technologies... express = require "express" app = module.exports = express.createServer() app.configure -> app.set view engine, "jade" app.use express.compiler src: __dirname + "/public" enable: [ "sass" ] app.get "/", (req, res) -> res.render "index", title: "Hello, Express"
  40. 40. vows • Perl : Test::More, Test::Base, Test::Declare • vows : Asynchronous BDD vows = require vows assert = require assert test = vows.describe(ゼロでの割り算).addBatch 任意の数をゼロで割った時 : topic: -> 42 / 0 無限大になる : (topic) -> assert.equal topic, Infinity ただし、ゼロをゼロで割った場合 topic: -> 0/ 0 以下となる : 数値でない : (topic) -> assert.isNan topic 自分自身とは等価でない : -> assert.notEqual topic, topic do test.run
  41. 41. xml2js • Perl : XML::Simple + JSON parser = new xml2js.Parser() parser.addListener end, (json) -> console.log json parser.parseString xml
  42. 42. aws-lib • Perl : Net::Amazon aws = require aws-lib aws = aws.createProdAdvClient( accessKey, secretKey, associateId, region: "JP" host: ecs.amazonaws.jp ) aws.call "ItemSearch", SearchIndex: "Books" Title: "Perl" ItemPage: 1 ResponseGroup: Medium (result) -> console.log result
  43. 43. Node modules https://github.com/joyent/node/wiki/modules
  44. 44. Socket.IO • WebSocket-like API – 抽象化 : WebSocket, xhr-polling, xhr-multipart, jsonp-polling .... • Node.js の急先鋒/* client (jade w/ express) */ /* server (app = express object) */script(src=/socket.io/socket.io.js) io = require(socket.io).listen app io.sockets.on connection, (socket) ->:coffeescript socket.on send, (data) -> socket = io.connect http://localhost’ console.log data socket.on recv, (data) -> socket.emit recv, data console.log data socket.emit send, "Hello!"
  45. 45. pocketio • Perl の Socket.IO server – JS ⇔ Perl – JS ⇔ Perl ⇔ Perl modules use PocketIO; use Plack::Builder; builder { mount /socket.io => PocketIO->new handler => sub { my $self = shift; $self->on( recv => sub { my ($socket, $data) = @_; $socket->emit(send, $data); }); ...
  46. 46. サーバサイドまとめ• Node きてる – スマートフォン開発のバックエンドを Node にする"必然性"はないが – クライアントを JS / Coffee で書くなら"優位性"はある• npm++ • CommonJS ウマー• node ・・・ 新しいn実装が多い • Socket.IO • CSS frameworks• 一方の perl ・・・ 莫大な資産 = CPAN• node / perl の pro/cons を比較して • (1) アーキテクチャ • 共存させるアプローチ ・・・ RPC, pocketio
  47. 47. まとめ• スマートフォン : 今後、ネイティブからHTML5へ • Facebook/Google+ • × 100% HTML5 ○ ハイブリッド• JS (Coffee) のみでアプリが開発できるように • PhoneGap, Titanium Mobile • クライアントからサーバまで一気通関 • クライアントが JS なら、Node 利用の動機は大きい • Native → HTML5 への移行は JavaScript の進化にアリ• Node.js = Web Dev の梁山泊に (beyond Rails...?) • socket.IO / express / jade, stylus, coffeekup, CSS FW / coffee ... • ただし、Node だけではサポートできない領域もまだまだ • Perl の莫大な資産は活かしたい • pocketio などのアプローチ

×