Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた

Web屋さんがWebアプリを作ったら

@junkpot1212

何をやってる人か

・WEB系エンジニア

・PHPer

・CakePHP

・AWSなんかも

とにかくFirefoxOSで動くアプリを作ってみよう

そんなWEBな自分が

課題・WEBってからにはクラウドと連携したい

・ブラウザだけじゃなく、 端末にインストールするアプリもしたい

・実機には日本語IMEがない ・自前ビルドでしょぼいIMEは出てくるけど快適とは言えない ・エミュレーターならPCのIMEから入力出来る

どんなアプリにするか？

じゃんけん対決アプリ

・入力いらずで選択だけでOK・対人対戦ならクラウド必須

じゃんけんアプリに必要なもの

・サーバー側処理 アプリらしくリアルタイム通信をしたいので WebSocketを使用 勝ち負けの判定

・クライアント側処理 サーバーとWebSocketで通信のやり取り

WebSocketって何？

・HTML5に導入されたHTTP通信の双方向版

・常時コネクションを維持することで クライアントから一方通行だった通信が サーバーからもデータを送受信することが出来る

チャットとか

サーバー側でWebSocket

WebSocketならNode.jsかjavaでやるのがメジャー？

PHPerとしてはphpでやってみたい

ってことで探してみる

ありました

PHP WebSocket Server(php-websocket)http://siriux.net/2010/08/php-websocket-server/

phpをコマンドラインで実行し、指定のポートでWebSocketを実現する

URLにある日付は古いがGithub上ではそこそこメンテナンスされてるっぽい

Forkされまくりで亜種も多い模様

結構綺麗に書かれてる。気がする。

でもexsampleにあったソースは動かなかった

PHP WebSocketでサーバー側処理

php-websocket/exsample/server.php

実行ファイル設定もここに書く

PHP WebSocketでサーバー側処理Php-websocket/lib/Wrench/Application/***Application.php

クライアントとのやり取りを行うclass

クライアント側の実装

● サーバーから送信された情報の受信● 受信した結果を画面に反映● サーバーに選んだじゃんけんの手を送信● ＪQuery Mobile を使用

ｊQuery Mobile

・言わずとしれた有名JavaScriptライブラリ jQuery のモバイル版

・socket.ioを使ってWebSocketを実装する

ｊQuery Mobileでクライアント処理

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

FirefoxOSへのインストール準備

基本的には先程のクライアントのソースを置くだけ(エミュレーターの場合)

manifest.webappを用意する

FirefoxOSへのインストール準備

manifest.webapp

●name アプリ名●description アプリの説明●launch_path アプリ起動時に表示するファイル

etc...

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

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

FirefoxOSでアプリを作ってみて

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

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