Download - Firefox osで変わるアプリケーションの開発ライフサイクル
![Page 1: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/1.jpg)
FireFoxOSコードリーティング#fxos
FirefoxOSで何が変わる?アプリケーション開発
![Page 2: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/2.jpg)
FireFoxOSコードリーティング#fxos
About:me
Enterprise Engineer酒巻 瑞穂
FirefoxOSコードリーディング(にぎやかし担当)
html5jエンタープライズ部(スタッフ)
html5jWebプラットフォーム部(スタッフ)
AngularJS Japan User Group(スタッフ)
![Page 3: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/3.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
![Page 4: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/4.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 5: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/5.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 6: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/6.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 7: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/7.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 8: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/8.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 9: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/9.jpg)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
![Page 10: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/10.jpg)
FireFoxOSコードリーティング#fxos
FirefoxOSアプリ= Webアプリ
![Page 11: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/11.jpg)
FireFoxOSコードリーティング#fxos
今回は、FirefoxOSアプリ開発基礎つまるとこ、Webアプリ開発の
きほんのき
![Page 12: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/12.jpg)
FireFoxOSコードリーティング#fxos
知らない技術を触るとき(FxOSアプリってどうやって作るの編)
環境環境 雛型雛型 学習学習 公開公開
![Page 13: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/13.jpg)
FireFoxOSコードリーティング#fxos
Setting
Firefoxブラウザー おすきなエディタ チームNode
環境環境 雛型雛型 学習学習 公開公開
![Page 14: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/14.jpg)
FireFoxOSコードリーティング#fxos
Rady
環境環境 雛型雛型 学習学習 公開公開
![Page 15: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/15.jpg)
FireFoxOSコードリーティング#fxos
Sutdy
GithubのREADME.md
Source Code Reading
アプリマネージャとエミュレータ
環境環境 雛型雛型 学習学習 公開公開
![Page 16: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/16.jpg)
FireFoxOSコードリーティング#fxos
Publish
静的サイトでもOK
環境環境 雛型雛型 学習学習 公開公開
![Page 17: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/17.jpg)
FireFoxOSコードリーティング#fxos
これだけだと判らないですよね。
![Page 18: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/18.jpg)
FireFoxOSコードリーティング#fxos
FirefoxOS(Webアプリ)開発ことはじめ(デモ)
![Page 19: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/19.jpg)
これから作るものWebComponentで作るホステット型野良アプリ
VPS
![Page 20: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/20.jpg)
FireFoxOSコードリーティング#fxos
今回の環境
Firefoxブラウザ SublimeText3(プラグイン皆無)
yeomanおじさんと愉快な仲間たち
環境環境 雛型雛型 学習学習 公開公開
![Page 21: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/21.jpg)
FireFoxOSコードリーティング#fxos
開発の土台を用意 1/2
yeomanのテンプレートを使う(これがナウい)Generator-firefoxos-apphttps://www.npmjs.org/package/generator-firefoxos-app
環境環境 雛型雛型 学習学習 公開公開
テンプレートエンジンインストール# npm I generator-firefoxos-app
フォルダ移動して展開# yo firefox-os-app
試しに実行# grunt server
![Page 22: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/22.jpg)
FireFoxOSコードリーティング#fxos
開発の土台を用意 2/2
yeomanのテンプレートを使うGenerator-elementhttps://github.com/webcomponents/generator-element
環境環境 雛型雛型 学習学習 公開公開
テンプレートエンジンインストール# npm I generator-element
フォルダ移動して展開(こちらはサブジェネレータ)# yo element:repo
試しに実行# grunt server
![Page 23: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/23.jpg)
FireFoxOSコードリーティング#fxos
開発の土台を用意 3/2
ここは勝手にreading.fxos.orgへCROSS可能なテンプレートサイトを追加http://reading.fxos.org:8088/ghc/bower_components/github-card/demo.html
X-pokemon component Linkhttp://reading.fxos.org:8088/bower_components/x-pokemon/x-pokemon.html
当コミュニティではGMOインターネット様よりコミュニティ支援としてConoHa VPSの提供を受けてます。
ConoHaについてはこちら→http://www.conoha.jp/community
環境環境 雛型雛型 学習学習 公開公開
![Page 24: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/24.jpg)
学習は頑張って!
環境環境 雛型雛型 学習学習 公開公開
WebComponentsTeamによる教材がたくさん!
![Page 25: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/25.jpg)
FireFoxOSコードリーティング#fxos
公開の準備
今回はGithubを使って公開そのために、gruntタスクのgh-pagesを使う(WebComponentには標準実装されてる)
環境環境 雛型雛型 学習学習 公開公開
![Page 26: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/26.jpg)
公開の準備
環境環境 雛型雛型 学習学習 公開公開
githubにリポジトリを作ります。(2つ)
Generator-firefoxos-appは、Grunt-gh-pagesを組み込んで、ビルド ▶︎ 展開# grunt build# grunt gh-pages
Generator-elementはgh-pagesが組み込まれてるので一発デプロイ# grunt deploy
![Page 27: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/27.jpg)
FireFoxOSコードリーティング#fxos
インストールページ設定
FirefoxOS用Webアプリの作成ページにやり方は乗ってますhttps://developer.mozilla.org/ja/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS
ここも同じ要領でgithubpagesを追加し、インストールボタンを追加します。
github(用意済み)https://github.com/MSakamaki/fxosinstall
環境環境 雛型雛型 学習学習 公開公開
![Page 28: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/28.jpg)
FireFoxOSコードリーティング#fxos
インストールしてみよう
環境環境 雛型雛型 学習学習 公開公開
エミュレータにインストールしてみる
![Page 29: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/29.jpg)
FireFoxOSコードリーティング#fxos
アプリ公開までがこんなに素早く
![Page 30: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/30.jpg)
FireFoxOSコードリーティング#fxos
どんどん充実するWeb技術
Web標準が充実(じゃぁそれ標準にあればよくない?)
出来ることが増える
開発が大変になる
楽がしたいので良いツール、
ライブラリが増える
![Page 31: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/31.jpg)
FireFoxOSコードリーティング#fxos
Web標準と共に進化していく
Webプラットフォーム
![Page 32: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/32.jpg)
おまけ
AngularJSとWebComponentを使ったシンプルなWebアプリケーション
http://msakamaki.github.io/myfxosapp/
![Page 33: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/33.jpg)
FireFoxOSコードリーティング#fxos
![Page 34: Firefox osで変わるアプリケーションの開発ライフサイクル](https://reader034.vdocuments.site/reader034/viewer/2022051514/548c4b8db47959341b8b4781/html5/thumbnails/34.jpg)
FireFoxOSコードリーティング#fxos
ご清聴ありがとうございました。