Firefox OS and Web server

1. FFiirreeffooxx OOSSとWWeebbサーバ
TToommooaakkii KKoonnnnoo
22001155//22//2200 @@ FFiirreeffooxx OOSS 勉強会 88tthh

2. 自己紹介
• 今野 智明（TToommooaakkii KKoonnnnoo）
• KKDDDDII研究所
• WWeebb関連の開発
2

3. AAggeennddaa::
• モバイルWWeebbサーバ
• WWeebb--ccaasstt
• WWeebbサーバとの歩み
3

4. モバイルWWeebbサーバ：
4

5. FFiirreeffooxx OOSSのコンセプト
5
参考：http://au-fx.kddi.com/products/
• ""TThhee WWeebb iiss tthhee ppllaattffoorrmm..""
– デバイス固有機能
• ee..gg.. 加速度
– ネットワーク機能
• クライアント側は当然ある。
• サーバは…�？

6. サーバ機能も端末に
6
Web Server
Web Browser
Web Server
Web Browser

7. • コンテンツ共有
– 相手に送って終わり
– ee..gg.. 写真、ビデオ
– ccff.. AAnnddrrooiidd BBeeaamm
• 体験共有
– 相手とのインタラクション
– ee..gg.. ゲーム
– ccff.. NNiinntteennddoo DDSS
WWeebbサーバでできること
7
Webサーバ ブラウザ
ブラウザWebサーバ

8. DDEEMMOO:: じゃんけんゲーム
8
参考: http://interest-speaker.com/vector-data-of-gu-choki-pa-the-jan-ken-game/

9. WWeebbサーバアプリの実現
• FFxxOOSSアプリとしてWWeebbサーバを書く
9
Server
App
Gaia
Gecko
Client
App
スクラッチから書くのは大変

10. オープンソース：hhttttppdd..jjss
10
• ダウンロード ((kkddddii ++ hhttttppddなどで検索）
– hhttttpp::////ooppeennssoouurrccee..kkddddii..ccoomm//ffxx00//hhttttppdd..hhttmmll
• 関連情報
– hhttttpp::////sshhoowwccaassee..kkddddii..ccoomm//ccsscc//wwoorrkkss//vviieeww//2255
Server App
Gaia
Gecko
httpd.js

11. hhttttppdd..jjssの使い方紹介
11
1) アプリ領域の公開
2) SDカード領域の公開
3) リクエストハンドラ

12. ((11)) アプリ領域の公開
12
server = new HttpServer();
/* アプリ領域のディレクトリを公開 */
server.get("/", appRoot); // e.g. ./public
server.start(port); // e.g. 3000
btn.addEventListener("click", function(){
server.stop(onStop); //終了処理（ポート開放）
});
//ブラウザで、サーバ側の"./public"配下の" index.htmlへアクセス
GET http://192.168.*.*:3000/index.html
★Server側
★Client側（ブラウザ）

13. 13
/* SDカード領域のディレクトリ公開 */
server.get("/sd/", sdRoot); // e.g. /sdcard/public
var xhr = new XMLHttpRequest();
var url = "/sd/sample.txt"; //サーバ側の"/sdcard/public"配下の sample.txtへアクセス
xhr.open('GET',url);
xhr.onload = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
// hoge
}
}
xhr.send(null);
((22)) SSDDカード領域の公開
★Server側
★Client側（JS, GET）

14. 14
/* リクエストハンドラの設定 */
server.get("/xhr", function(req, res, onComplete){
var bodyStr = String.fromCharCode.apply(null, new Uint8Array(req.bodyBuffer));
var ret = parseFloat(bodyStr) < 0.3 ? 'hit!' : 'fail.';
res.write(ret);
onComplete();
});
var url = ‘/post’;
xhr.open('POST',url);
xhr.onload = function(){
//hoge
}
xhr.send("0.1");
★Server側
★Client側（JS, POST）
((33)) リクエストハンドラ

15. 事前設定
• JJSSライブラリの読み込み
• MMaanniiffeessttの設定
15
<script type="text/javascript" src="js/httpd.js"></script>
"type": "privileged",
…
"permissions": {
"tcp-socket":{"description": "For Jan-Ken Game"},
"device-storage:sdcard":{"access": "readwrite"}
}
必須
privilegedまたはcertified
SD領域を利用するなら

16. モバイルWWeebbサーバのまとめ
• 端末サーバによる共有
• WWeebbサーバアプリをJJSSで書ける
• アプリ向�けのOOSSSS hhttttppdd..jjss
16

17. WWeebb--ccaasstt：
17

18. WWeebb--ccaassttがつくる体験
11)) 直感的に
22)) 手間なく
33)) 近くの相手と共有
18
参考：http://au-fx.kddi.com/products/

19. DDEEMMOO VVIIDDEEOO:: 動画の共有
19

20. WWeebb--ccaasstt ç サーバ ++ いろいろ
• 直感的にするためには…�
– タッチ?? NNFFCC??
• 手間なくするためには…�
– ペアリング?? WWii--FFii??
20

21. 通信機能を持つアプリ
21
典型的なデザイン Web-castのデザイン
Webserver
NW
NFC
WWii--FFii NNWW構築をサポート
((端末AAPP//外部AAPP))
UURRLLやNNWW情報の交換を
サポート
サービス
NW
相手探し
サービス部分を集中的に
Req.
参考：http://au-fx.kddi.com/products/index.html

22. WWeebb--ccaassttのしくみ
22
Device
Peer
System App
Web-cast
Manager
Network Manager
App
Web Server
Module
NFC Manager
Control
NDEF exchange
Establish Network
content URL
over IAC
over NFC-P2P
SD card
Resource
HTTP
ただし、IACは、現状Certifiedのみ利用可能

23. WWeebb--ccaassttのまとめ
• 直感的に手間なく共有
• 共有アプリを簡単に作るための仕組み
• 現状は、FFxx00でのみ利用可能
23

24. WWeebbサーバとの歩み：
24

25. 33年くらい前
• 世の中
– HHTTMMLL55がバズワード
– BB22GGも正式発表
• 自身
– ようやくWWeebbを始める
25

26. デバイス間コミュニケーション
• クラウドサーバ経由では可能
– 目の前の相手と、わざわざ電話で話している感じ
• もっと直感的にやりとりしたい
– 端末にサーバがあればできる？
26

27. トライ&&エラー
27
Gonk
Gecko httpd
Gonk
Gecko
httpd.js
Gonk
Gecko
アプリ
アプリ
ライブラリ
TCP Socket
API
・Webで書けない
・セキュリティモデル
・アプリから利用できない ・TCPのListenのAPIがない
・httpdライブラリもない
11)) とにかく端末サーバ 22)) GGeecckkooの枠組みで 33)) アプリでサーバ

28. モチベーション
• TTCCPP SSoocckkeettのCClliieennttのAAPPIIは存在
• MMLLでSSeerrvveerr側を望む声
• CClliieenntt側の開発者は手一杯
28
""自分たちで作ってみるか!!""

29. コミュニティ活動開始
• 担当者っぽい人にメール
⇒BBuuggに即AAssssiiggnn
29
Bugzillaでのサポートを受けつつ
参考：https://bugzilla.mozilla.org/show_bug.cgi?id=797561

30. 30
米Mozillaさんに行ってみたり、

31. 31
参考：https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket.listen
なんとかv1.2の時点で盛込み

32. WWeebb--ccaassttのキセキ
32
参考：http://showcase.kddi.com/csc/works/view/25

33. まとめ
• モバイルWWeebbサーバ
– アプリでWWeebbサーバ ((hhttttppdd..jjss))
• WWeebb--ccaasstt
– 直感的に手間なく共有
• WWeebbサーバとの歩み
– WWeebb--ccaassttに至るまでのヨモヤマ話
33