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

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

Embed Size (px)

Citation preview

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

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

@junkpot1212

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

何をやってる人か

・WEB系エンジニア

・PHPer

・CakePHP

・AWSなんかも

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

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

そんなWEBな自分が

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

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

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

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

どんなアプリにするか?

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

じゃんけん対決アプリ

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

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

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

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

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

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

WebSocketって何?

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

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

チャットとか

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

サーバー側でWebSocket

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

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

ってことで探してみる

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

ありました

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

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アプリを作ってみた

PHP WebSocketでサーバー側処理

php-websocket/exsample/server.php

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

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

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

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

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

クライアント側の実装

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

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

jQuery Mobile

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

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

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

jQuery Mobileでクライアント処理

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

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

FirefoxOSへのインストール準備

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

manifest.webappを用意する

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

FirefoxOSへのインストール準備

manifest.webapp

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

etc...

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

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

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

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

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

FirefoxOSでアプリを作ってみて

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

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

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