Download - FirefoxOSを始めてみよう
![Page 1: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/1.jpg)
FirefoxOSを始めてみよう@junkpot1212
![Page 2: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/2.jpg)
自己紹介
名前: 上田 信尋!
Twitter: @junkpot1212!
Blog: http://tech.junkpot.net!
株式会社 tech vein!
php をメインに開発しているWEB屋さん
![Page 3: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/3.jpg)
普段のお仕事
Linux でサーバー作ったり!
phpでWEBシステム作ったり!
MySQLでデータベース作ったり!
アプリのクラウド連携API作ったり
![Page 4: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/4.jpg)
そんなWEB屋さんが!なんでFirefoxOS?
![Page 5: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/5.jpg)
FirefoxOSのホスティング型アプリはほとんどブックマークと同じ!
クラウドに設置するだけでアプリとして完結出来る!
AndroidやiPhoneと違ってHTMLとjavascript でOK!
サーバーサイドは動けばなんでもOK!
実際に作成するのはスマホ対応WEBとあまり変わらない
![Page 6: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/6.jpg)
FacebookやTwitterのFirefoxOS版公式アプリも!このホスティング型アプリで公開されている
![Page 7: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/7.jpg)
ホスティング型アプリはクラウドにFirefoxOSお約束のファイル(マニフェストファイル)をJSON形式で書いて設置するだけ!
極端な話スマホ表示に対応していてマニフェストファイルを設置すれば自分のブログもアプリ化することが出来る
![Page 8: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/8.jpg)
あくまで極端な話でちゃんとアプリとしての規約はあります
![Page 9: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/9.jpg)
実際にFirefoxOSアプリを!開発してみよう
![Page 10: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/10.jpg)
まずはクラウドの準備
![Page 11: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/11.jpg)
Google Cloud Platform!を使ってみよう
![Page 12: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/12.jpg)
Google Cloud Platformって?
天下のGoogleのデータセンター内に仮想マシンを作ることが出来る!
Google App Engineからしか使用出来なかったデータベース等が個別に使用出来る!
Googleが提供するAWSのような環境?!
Google App Engine の機能に直接アクセス出来るようなイメージ
![Page 13: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/13.jpg)
つい先日2/12!
Cloud SQLが!2年半の!プレビュー期間を経て!正式公開されました
![Page 15: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/15.jpg)
!!Try it now から進むと!Google Developer Consoleへ!!GAEとかと同じ管理画面!!最初は英語で表示
![Page 16: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/16.jpg)
安心の日本語
![Page 17: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/17.jpg)
安心の日本語
![Page 18: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/18.jpg)
インスタンス作成画面ここは少しややこしいので頑張る!分単位で課金されるらしいので注意
![Page 19: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/19.jpg)
何もかも英語のAWSよりはとっつきやすいかも!
作成したインスタンスに接続するにはGoogle
Cloud SDKを使う!
1分おきに課金されるので遊んだ後は削除しましょう
![Page 20: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/20.jpg)
FirefoxOSアプリの準備
![Page 21: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/21.jpg)
一番単純な形の!アプリを作ってみる
![Page 22: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/22.jpg)
FirefoxOSアプリ
ホスティングアプリは基本WEBと同じ!
特別な環境は必要ない!
最低限HTMLさえ書ければOK!
アイコンぐらいはあった方がアプリっぽい
![Page 23: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/23.jpg)
FirefoxOSシミュレーター
![Page 24: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/24.jpg)
Mozillaから公式に提供されてます!https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/!
![Page 25: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/25.jpg)
インストールしたら!!
ツール!↓!
Web開発!↓!
アプリマネージャ!!
から起動
![Page 26: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/26.jpg)
あとは書くだけ
![Page 27: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/27.jpg)
!
!
HTMLを書く!
!
!
manifest.webapp を書く!
!
アイコンを置く
![Page 28: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/28.jpg)
アプリマネージャーから!ホストされたアプリを追加に!manifest.webapp を入力して追加
!
ここにmanifest.webappのURLを入力
![Page 29: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/29.jpg)
できあがり
![Page 30: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/30.jpg)
最後に
見ての通りFirefoxOSアプリはとっても簡単!
javascriptを頑張れば複雑なこともOK!
インストール型のアプリならGPSやマイク等を使ってもっとスマホらしいことも!
使われているのは全て「WEB」な技術
![Page 31: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/31.jpg)
これからはWEB屋さんが!アプリも作る時代ですよ
![Page 32: FirefoxOSを始めてみよう](https://reader033.vdocuments.pub/reader033/viewer/2022060202/559c04361a28aba2188b457a/html5/thumbnails/32.jpg)
ご清聴!ありがとうございました