狠狠撸

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

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

そんなWEBな自分が

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

課題
?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の事を気にしなくていい
●

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

狠狠撸

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

More Related Content

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