firefox os勉強会 2nd web屋さんがwebアプリを作ってみた
Post on 28-May-2015
574 Views
Preview:
TRANSCRIPT
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
クライアント側の実装
● サーバーから送信された情報の受信● 受信した結果を画面に反映● サーバーに選んだじゃんけんの手を送信● JQuery Mobile を使用
jQuery Mobile
・言わずとしれた有名JavaScriptライブラリ jQuery のモバイル版
・socket.ioを使ってWebSocketを実装する
jQuery Mobileでクライアント処理
socket = new WebSocket('ws://localhost:8000/echo');で接続先を指定してオープンonmessageメソッドにサーバーからの通知があった時の処理を書く
FirefoxOSへのインストール準備
基本的には先程のクライアントのソースを置くだけ(エミュレーターの場合)
manifest.webappを用意する
FirefoxOSへのインストール準備
manifest.webapp
●name アプリ名●description アプリの説明●launch_path アプリ起動時に表示するファイル
etc...
ってことで今回作ったアプリのデモやります
HTML5的なアプリが本当にそのまんま動くんです。
FirefoxOSでアプリを作ってみて
●楽しい●エミュレーターが優秀●WEBとの親和性どころか想像以上にWEBそのもの●FirefoxOS向けであればIEの事を気にしなくていい
ご清聴ありがとうございました
top related