Embed Size (px)
Citation preview
Firefox OS + Open Web Board
群馬大学 工学部 情報工学科 B4 仲野裕文
2015/05/03
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 1 / 26
自己紹介About:me
基本情報
名前: 仲野裕文 (ナカノヒロフミ)通称: すぱさん (スパゲッティのような髪癖が由来)専攻: 情報工学科 4年 ソフトウェア工学 F研究室所属役職: IGGGのエバンジェリスト (自称:宣伝本部長)出身: 海外 (アルゼンチン、ウルグアイ、中国、マダガスカル)
補足情報
夜中にサイクリング (眠れない夜に思いつきから始まる)
自然の写真など、人は脇役の写真を撮るのが好き
研究室でのテーマは、定理証明支援器 Coq。(使い方の勉強中)
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 2 / 26
最近、頭から離れないこと
Figure: Youtubeからのスクリーンショット
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 3 / 26
1 Firefox OSとは
2 Firefox OS搭載デバイス
3 アプリの開発方法
4 Demonstration
5 Open Web Board
6 最後に
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 4 / 26
Firefox OSとの出会い
出会いは、そう、
Gunma.web #18の「Firefox OSの紹介」 by @ic lifewoodさんから始まった…
はじめは、「ブラウザってハードウェアの情報読み取れるの？」という疑
問があったが…
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 5 / 26
Firefox OS とは
Firefox OSとは
Firefox OSとは
「Firefox OS(Boot to Gecko または B2Gのコードネーム)はMozillaのオープンソースモバイルOSです。それは、Geckoベースのランタイム環境が起動し、オープンWebアプリがインストール・起動できる LinuxベースのOSです」a
aFirefox OS アプリセンター クイックスタートより
※ Geckoは、「GeckoはFirefoxがWebコンテンツを表示・レンダリングに利用しているレンダリングエンジンです。1」
1Firefox OS アプリセンター クイックスタートより群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 6 / 26
Firefox OS とは
Firefox OSとは
つまり、Firefox OSの上で走るのは、Webアプリ。ウェブサイトを作る言語で書ける。
そして、今までパソコンのブラウザ上で動くアプリしか開発できなかった
ウェブプログラマ、デザイナーがスマホをWebAPI(コンテンツ、データ、デバイスハードウェアまで扱えるインターフェース)を用いて幅広い！
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 7 / 26
Firefox OS 搭載デバイス
Firefox OS 搭載デバイスList of Devices with Firefox OS
スマートフォン
スマートテレビ
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 8 / 26
Firefox OS 搭載デバイス
Firefox OS 搭載デバイスFirefox OS 搭載スマートフォン
日本国内では、KDDIが Fx0を販売。
日本を含む 28カ国、14機種が既に販売されている。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 9 / 26
Firefox OS 搭載デバイス
Firefox OS 搭載デバイスFirefox OS 搭載スマートテレビ
Panasonic ビエラ 4K
CX800, CX800N, CX700シリーズに搭載！ 発売は、今年 5月下旬！
Panasonic ケーブルテレビ セットトップボックス
Boot to Gecko OS(Firefox OSのノーブランド版)を搭載したケーブルテレビ セットトップボックスがすでに販売中
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 10 / 26
Firefox OS 搭載デバイス
Firefox OS 搭載スマートテレビ
Figure: engadget日本版より
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 11 / 26
Firefox OS 搭載デバイス
Firefox OS 搭載スマートテレビ
Figure: Panasonicプレスリリースより
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 12 / 26
アプリの開発方法
アプリの開発方法How to Develop App for Firefox OS
Firefox OSのアプリ開発方法は、3つあります。
WebIDE
デスクトップ版 Firefoxの「開発」内から。プロジェクト作成、エディタ、シミュレータが付属する統合開発環境。
Framin
スマートフォンからスマートフォンのアプリを開発することができる。
自分でアプリを作って、自分の端末にインストールができる。
Mozilla AppMaker
ウェブブラウザ上からFirefox OS向けのアプリを開発できるツール。ページアクセスと同時に開発ができる。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 13 / 26
アプリの開発方法
WebIDEFirefox OSアプリの開発方法 1: WebIDE
Figure: WebIDEとシミュレータのスクリーンショット
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 14 / 26
アプリの開発方法
WebIDEWebIDE: エディタはご自由に
WebIDEでプロジェクトを作成後は、使っているコンピュータのディレクトリにすでにある。
よって、
エディタはご自由に
自分が好んで使っているエディタで編集することが可能！
さらに、プロジェクト自体も自分で作成ができる。Firefox OS アプリを作るための最低限のファイルを含めれば、WebIDEでシミュレータにインストールできる！
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 15 / 26
アプリの開発方法
Firefox OSのアプリに必要なもの
manifest.webapp(アプリ情報に関するファイル JSON)
アイコン (アプリのアイコン)
Webアプリ本体
HTMLJavaScriptCSS
以上の 3つがあれば最低限のアプリは作成可能！
HTML + JS + CSS + manifest = App!
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 16 / 26
アプリの開発方法
FraminFirefox OSアプリの開発方法 2: Framin
Figure: Framinのスクリーンショット群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 17 / 26
アプリの開発方法
Mozilla AppMakerFirefox OSアプリの開発方法 3: Mozilla AppMaker
Figure: Mozilla AppMakerのスクリーンショット群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 18 / 26
アプリの開発方法
アプリの配布方法作ったアプリを公開する方法！
アプリの種類
パッケージ型アプリ
ホスト型アプリ
アプリの配布方法
Firefox Marketplaceでの配布
セルフホスティングでの配布 (制限がかかる)
※セルフホスティングでの配布は、GitHub、Heroku, Google App Engineなどで配布できる。
※ただし、権限の必要な APIを使う場合は、Marketplaceからのみ配布可能。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 19 / 26
Demonstration
DemonstrationFirefox OSのアプリを作ってみた！
WindowsでFirefox入れてアプリを作ってみた
お題は、今話題のあのふ・た・りで○○○○○○○○！
※ WebAudio API を使って、img タグをクリックすると特定の音が流れるアプリを紹介。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 20 / 26
Open Web Board
Open Web BoardOpenWebBoardとは、何？
Open Web Boardとは
「Open Web Boardは、Firefox OSを搭載した HDMIドングル型開発ボードです。USBホスト機能を搭載し、マウスやキーボード、カメラ、オーディオ、USBシリアル機器などをFirefox OSから利用することができます。また、ネットワーク機能として無線 LAN、BT(Bluetooth)、BLE(Bluetooth Low Energy)を搭載し、センサー機器と通信することも可能です。簡単なWeb技術で様々な周辺機器を活用したアプリケーション開発にご利用いただけます。」a
aKDDI Firefox OS Portal Siteより
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 21 / 26
Open Web Board
Open Web BoardOpen Web Boardとは、何??
Open Web Boardとは
「また本デバイスに関するソースコードなどのソフトウェア、技術情報を
公開し、Firefox OS上でアプリケーションを作成するのみでなく、様々な活用方法を広げていくことを指向するデバイスです。」a
aKDDI Firefox OS Portal Siteより
要は、使い道は自由！
アイディア次第で、Open Web Boardは何でも使える！
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 22 / 26
Open Web Board
Open Web Boardとは私が考える Open Web Boardとは
My idea to Open Web Board
画面出力がHDMIからできるため、テレビを用いた拡張性が強いとみた。今のテレビは、テレビを視聴することしかできない。
テレビにOSを入れて販売するには時間がかかる。HDMIであれば、いち早くテレビにテレビ以上のエンターテインメントを提供できるのではないか。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 23 / 26
最後に
Special Thanks
Special Thanks to... Akihiko Kigure! @ic lifewood深夜の Facebookで参加を決定してヘルプしてくれた兄貴！
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 24 / 26
最後に
ご清聴ありがとうございました。
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 25 / 26
最後に
参考にした資料
「Firefox OS の紹介」 http://www.slideshare.net/AkihikoKigure/20150117-gunmaweb-firefox-os
「Firefox OS Expands to Nearly 30 Countries」https://blog.mozilla.org/blog/2014/12/16/firefox-os-expands-to-nearly-30-countries/
「Mozilla Press Center(画像)」https://blog.mozilla.org/press/media-library/screenshots/
「Panasonic プレスリリース」http://news.panasonic.com/press/news/data/2015/04/jn150402-1/jn150402-1.html
群馬大学 工学部 情報工学科 B4 仲野裕文 Firefox OS + Open Web Board 2015/05/03 26 / 26
