FFiirreeffooxx OOSSとWWeebbサーバ

TToommooaakkii KKoonnnnoo

22001155//22//2200 @@ FFiirreeffooxx OOSS 勉強会 88tthh

自己紹介

• 今野　智明（TToommooaakkii KKoonnnnoo）

•  KKDDDDII研究所

•  WWeebb関連の開発

2

AAggeennddaa::

• モバイルWWeebbサーバ

• WWeebb--ccaasstt

• WWeebbサーバとの歩み

3

モバイルWWeebbサーバ：

4

FFiirreeffooxx OOSSのコンセプト

5

参考：http://au-fx.kddi.com/products/

•  ""TThhee WWeebb iiss tthhee ppllaattffoorrmm.."" – デバイス固有機能

•  ee..gg.. 加速度

– ネットワーク機能 • クライアント側は当然ある。 • サーバは…�？

サーバ機能も端末に

6

Web  Server

Web  Browser

Web  Server

Web  Browser

• コンテンツ共有 – 相手に送って終わり –  ee..gg.. 写真、ビデオ –  ccff.. AAnnddrrooiidd BBeeaamm

• 体験共有 – 相手とのインタラクション –  ee..gg.. ゲーム –  ccff.. NNiinntteennddoo DDSS

WWeebbサーバでできること

7

Webサーバ ブラウザ

ブラウザWebサーバ

DDEEMMOO:: じゃんけんゲーム

8 参考:  http://interest-speaker.com/vector-data-of-gu-choki-pa-the-jan-ken-game/

WWeebbサーバアプリの実現

•  FFxxOOSSアプリとしてWWeebbサーバを書く

9

Server  App

Gaia

Gecko

Client  App

スクラッチから書くのは大変

オープンソース：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

hhttttppdd..jjssの使い方紹介

11

1)   アプリ領域の公開

2)   SDカード領域の公開

3)   リクエストハンドラ

((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

/*  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

/*  リクエストハンドラの設定  */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)) リクエストハンドラ

事前設定

•  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領域を利用するなら

モバイルWWeebbサーバのまとめ

• 端末サーバによる共有

•  WWeebbサーバアプリをJJSSで書ける

• アプリ向�けのOOSSSS hhttttppdd..jjss

16

WWeebb--ccaasstt：

17

WWeebb--ccaassttがつくる体験

11)) 直感的に

22)) 手間なく

33)) 近くの相手と共有

18

参考：http://au-fx.kddi.com/products/

DDEEMMOO VVIIDDEEOO:: 動画の共有

19

WWeebb--ccaasstt ç サーバ ++ いろいろ

• 直感的にするためには…� – タッチ?? NNFFCC??

• 手間なくするためには…� – ペアリング?? WWii--FFii??

20

通信機能を持つアプリ

21

典型的なデザイン Web-castのデザイン

Webserver

NW

NFC

WWii--FFii NNWW構築をサポート ((端末AAPP//外部AAPP))

UURRLLやNNWW情報の交換をサポート

サービス

NW

相手探し

サービス部分を集中的に

Req.

参考：http://au-fx.kddi.com/products/index.html

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のみ利用可能

WWeebb--ccaassttのまとめ

• 直感的に手間なく共有

• 共有アプリを簡単に作るための仕組み

• 現状は、FFxx00でのみ利用可能

23

WWeebbサーバとの歩み：

24

33年くらい前

• 世の中 –  HHTTMMLL55がバズワード –  BB22GGも正式発表

• 自身 – ようやくWWeebbを始める

25

デバイス間コミュニケーション

• クラウドサーバ経由では可能 – 目の前の相手と、わざわざ電話で話している感じ

• もっと直感的にやりとりしたい – 端末にサーバがあればできる？

26

トライ&&エラー

27

Gonk

Gecko httpd

Gonk

Gecko

httpd.js

Gonk

Gecko

アプリアプリ

ライブラリ

TCP  Socket  API

・Webで書けない・セキュリティモデル

・アプリから利用できない ・TCPのListenのAPIがない・httpdライブラリもない

11)) とにかく端末サーバ 22)) GGeecckkooの枠組みで 33)) アプリでサーバ

モチベーション

•  TTCCPP SSoocckkeettのCClliieennttのAAPPIIは存在

•  MMLLでSSeerrvveerr側を望む声

•  CClliieenntt側の開発者は手一杯

28

""自分たちで作ってみるか!!""

コミュニティ活動開始

• 担当者っぽい人にメール ⇒BBuuggに即AAssssiiggnn

29 Bugzillaでのサポートを受けつつ

参考：https://bugzilla.mozilla.org/show_bug.cgi?id=797561

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

31

参考：https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket.listen

なんとかv1.2の時点で盛込み

WWeebb--ccaassttのキセキ

32 参考：http://showcase.kddi.com/csc/works/view/25

まとめ

• モバイルWWeebbサーバ – アプリでWWeebbサーバ ((hhttttppdd..jjss))

•  WWeebb--ccaasstt – 直感的に手間なく共有

•  WWeebbサーバとの歩み –  WWeebb--ccaassttに至るまでのヨモヤマ話

33