1. Web屋さんがWebアプリを作ったら
@junkpot1212

2. 何をやってる人か
・WEB系エンジニア
・PHPer
・CakePHP
・AWSなんかも

3. そんなWEBな自分が
とにかくFirefoxOSで動く
アプリを作ってみよう

4. 課題
・WEBってからにはクラウドと連携したい
・ブラウザだけじゃなく、
端末にインストールするアプリもしたい
・実機には日本語IMEがない
・自前ビルドでしょぼいIMEは出てくるけど快適とは言えない
・エミュレーターならPCのIMEから入力出来る
どんなアプリにするか？

5. じゃんけん対決アプリ
・入力いらずで選択だけでOK
・対人対戦ならクラウド必須

6. じゃんけんアプリに必要なもの
・サーバー側処理
アプリらしくリアルタイム通信をしたいので
WebSocketを使用
勝ち負けの判定
・クライアント側処理
サーバーとWebSocketで通信のやり取り

7. WebSocketって何？
・HTML5に導入されたHTTP通信の双方向版
・常時コネクションを維持することで
クライアントから一方通行だった通信が
サーバーからもデータを送受信することが出来る
チャットとか

8. サーバー側でWebSocket
WebSocketならNode.jsかjavaで
やるのがメジャー？
PHPerとしてはphpでやってみたい
ってことで探してみる

9. ありました

10. PHP WebSocket Server(php-websocket)
http://siriux.net/2010/08/php-websocket-server/
phpをコマンドラインで実行し、指定のポートで
WebSocketを実現する
URLにある日付は古いがGithub上ではそこそこメン
テナンスされてるっぽい
Forkされまくりで亜種も多い模様
結構綺麗に書かれてる。気がする。
でもexsampleにあったソースは動かなかった

11. PHP WebSocketでサーバー側処理
php-websocket/exsample/server.php
実行ファイル
設定もここに書く

12. PHP WebSocketでサーバー側処理
Php-websocket/lib/Wrench/Application/***Application.php
クライアントとのやり取りを行うclass

13. クライアント側の実装
●
サーバーから送信された情報の受信
●
受信した結果を画面に反映
●
サーバーに選んだじゃんけんの手を送信
●
ＪQuery Mobile を使用

14. ｊQuery Mobile
・言わずとしれた有名JavaScriptライブラリ
jQuery のモバイル版
・socket.ioを使ってWebSocketを実装する

15. ｊQuery Mobileでクライアント処理
socket = new WebSocket('ws://localhost:8000/echo');
で接続先を指定してオープン
onmessageメソッドにサーバーからの通知があった
時の処理を書く

16. FirefoxOSへのインストール準備
基本的には先程のクライアントのソースを置くだけ
(エミュレーターの場合)
manifest.webappを用意する

17. FirefoxOSへのインストール準備
manifest.webapp
name アプリ名
●description アプリの説明
●launch_path アプリ起動時に表示するファイル
●
etc...

18. ってことで今回作ったアプリのデモやります

19. HTML５的なアプリが
本当にそのまんま動くんです。

20. FirefoxOSでアプリを作ってみて
楽しい
●エミュレーターが優秀
●WEBとの親和性どころか想像以上にWEBそのもの
●FirefoxOS向けであればIEの事を気にしなくていい
●

21. ご清聴ありがとうございました