Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
-
Upload
nobuhiro-ueda -
Category
Documents
-
view
574 -
download
3
Transcript of Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
![Page 1: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/1.jpg)
Web屋さんがWebアプリを作ったら
@junkpot1212
![Page 2: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/2.jpg)
何をやってる人か
・WEB系エンジニア
・PHPer
・CakePHP
・AWSなんかも
![Page 3: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/3.jpg)
とにかくFirefoxOSで動くアプリを作ってみよう
そんなWEBな自分が
![Page 4: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/4.jpg)
課題・WEBってからにはクラウドと連携したい
・ブラウザだけじゃなく、 端末にインストールするアプリもしたい
・実機には日本語IMEがない ・自前ビルドでしょぼいIMEは出てくるけど快適とは言えない ・エミュレーターならPCのIMEから入力出来る
どんなアプリにするか?
![Page 5: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/5.jpg)
じゃんけん対決アプリ
・入力いらずで選択だけでOK・対人対戦ならクラウド必須
![Page 6: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/6.jpg)
じゃんけんアプリに必要なもの
・サーバー側処理 アプリらしくリアルタイム通信をしたいので WebSocketを使用 勝ち負けの判定
・クライアント側処理 サーバーとWebSocketで通信のやり取り
![Page 7: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/7.jpg)
WebSocketって何?
・HTML5に導入されたHTTP通信の双方向版
・常時コネクションを維持することで クライアントから一方通行だった通信が サーバーからもデータを送受信することが出来る
チャットとか
![Page 8: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/8.jpg)
サーバー側でWebSocket
WebSocketならNode.jsかjavaでやるのがメジャー?
PHPerとしてはphpでやってみたい
ってことで探してみる
![Page 9: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/9.jpg)
ありました
![Page 10: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/10.jpg)
PHP WebSocket Server(php-websocket)http://siriux.net/2010/08/php-websocket-server/
phpをコマンドラインで実行し、指定のポートでWebSocketを実現する
URLにある日付は古いがGithub上ではそこそこメンテナンスされてるっぽい
Forkされまくりで亜種も多い模様
結構綺麗に書かれてる。気がする。
でもexsampleにあったソースは動かなかった
![Page 11: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/11.jpg)
PHP WebSocketでサーバー側処理
php-websocket/exsample/server.php
実行ファイル設定もここに書く
![Page 12: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/12.jpg)
PHP WebSocketでサーバー側処理Php-websocket/lib/Wrench/Application/***Application.php
クライアントとのやり取りを行うclass
![Page 13: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/13.jpg)
クライアント側の実装
● サーバーから送信された情報の受信● 受信した結果を画面に反映● サーバーに選んだじゃんけんの手を送信● JQuery Mobile を使用
![Page 14: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/14.jpg)
jQuery Mobile
・言わずとしれた有名JavaScriptライブラリ jQuery のモバイル版
・socket.ioを使ってWebSocketを実装する
![Page 15: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/15.jpg)
jQuery Mobileでクライアント処理
socket = new WebSocket('ws://localhost:8000/echo');で接続先を指定してオープンonmessageメソッドにサーバーからの通知があった時の処理を書く
![Page 16: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/16.jpg)
FirefoxOSへのインストール準備
基本的には先程のクライアントのソースを置くだけ(エミュレーターの場合)
manifest.webappを用意する
![Page 17: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/17.jpg)
FirefoxOSへのインストール準備
manifest.webapp
●name アプリ名●description アプリの説明●launch_path アプリ起動時に表示するファイル
etc...
![Page 18: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/18.jpg)
ってことで今回作ったアプリのデモやります
![Page 19: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/19.jpg)
HTML5的なアプリが本当にそのまんま動くんです。
![Page 20: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/20.jpg)
FirefoxOSでアプリを作ってみて
●楽しい●エミュレーターが優秀●WEBとの親和性どころか想像以上にWEBそのもの●FirefoxOS向けであればIEの事を気にしなくていい
![Page 21: Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた](https://reader035.fdocument.pub/reader035/viewer/2022062220/55661852d8b42a06318b5122/html5/thumbnails/21.jpg)
ご清聴ありがとうございました