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
クライアント側の実装
●

サーバーから送信された情報の受信

●

受信した結果を画面に反映

●

サーバーに選んだじゃんけんの手を送信

●

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の事を気にしなくていい
●
ご清聴ありがとうございました

More Related Content

PPTX
3流プログラマーから見たPhalconとWISP
PPTX
Lt 20130209
PDF
5分でわかるPhalconPHP
PPTX
とある技術の快速聊天
PDF
TypeScript And ALM
PDF
究極にして至高のWAF
PPTX
Cod2013 Sapporo #1
PPTX
爆速フレームワークでREST APIを作った話
3流プログラマーから見たPhalconとWISP
Lt 20130209
5分でわかるPhalconPHP
とある技術の快速聊天
TypeScript And ALM
究極にして至高のWAF
Cod2013 Sapporo #1
爆速フレームワークでREST APIを作った話

What's hot (20)

PPT
Perl Beginners #7 おとなのWAF
PPTX
Xamarinとmvvm crossとf#と
PPTX
PHPから離れて感じるPHPの良さ
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PPTX
8th july2013 packaged_apps_codelab
PDF
Yeomanではじめる爆速webアプリ開発
PPTX
Web開発の 今までとこれから
PDF
2014.07.09 WordBench Tokyo LT
PDF
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
PPTX
「ふくてん」に来てんね
PDF
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
PPTX
TypeScriptの大規模開発への適用
PDF
Web API のすすめ
PPT
T itanium概要
PPT
titanium_outline20111227
PDF
Wordbench愛媛・WordCamp Tokyo 2015レポート
PPTX
WPF on .NET Core 3.0
PDF
中の下のエンジニアを脱出するための仕事術
PPTX
エンジニアと"協同"してサービスをつくる
PDF
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Perl Beginners #7 おとなのWAF
Xamarinとmvvm crossとf#と
PHPから離れて感じるPHPの良さ
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
8th july2013 packaged_apps_codelab
Yeomanではじめる爆速webアプリ開発
Web開発の 今までとこれから
2014.07.09 WordBench Tokyo LT
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
「ふくてん」に来てんね
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
TypeScriptの大規模開発への適用
Web API のすすめ
T itanium概要
titanium_outline20111227
Wordbench愛媛・WordCamp Tokyo 2015レポート
WPF on .NET Core 3.0
中の下のエンジニアを脱出するための仕事術
エンジニアと"協同"してサービスをつくる
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Ad

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

PPTX
Webエンジニアによるスマートフォンアプリ開発
PDF
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
ODP
HTML5 アプリ開発
PPTX
PhoneGapユーザー会@大阪 講演資料
PDF
Titanium Mobile ~本当にあったこわい話~
PPT
無料環境でWindows Mobileアプリ開発
PPTX
Phone gap+javascriptスマホアプリ開発(入門編)
PPTX
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
PPTX
Windows IoT Core and Robot Arm
KEY
Android webブラウザのhtml5対応状況
PPTX
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
PPT
ネットワーク分散型フレームワークConView
PPTX
自動的に開発環境設定(1)
PPTX
Aiming のクラウド採用基準
PPTX
Androidが変えたもの
PPTX
Visual Studio 2017 事はじめ
PPTX
Azure App Service を使った無料のハンズオン
KEY
スマートフォン開発の事例 Html5開発の導入ポイント
PDF
アウトプットのすすめ
Webエンジニアによるスマートフォンアプリ開発
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
HTML5 アプリ開発
PhoneGapユーザー会@大阪 講演資料
Titanium Mobile ~本当にあったこわい話~
無料環境でWindows Mobileアプリ開発
Phone gap+javascriptスマホアプリ開発(入門編)
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
Windows IoT Core and Robot Arm
Android webブラウザのhtml5対応状況
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
ネットワーク分散型フレームワークConView
自動的に開発環境設定(1)
Aiming のクラウド採用基準
Androidが変えたもの
Visual Studio 2017 事はじめ
Azure App Service を使った無料のハンズオン
スマートフォン開発の事例 Html5開発の導入ポイント
アウトプットのすすめ
Ad

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