Firefox osで変わるアプリケーションの開発ライフサイクル

FireFoxOSコードリーティング#fxos

FirefoxOSで何が変わる？アプリケーション開発


About:me

Enterprise Engineer酒巻瑞穂

FirefoxOSコードリーディング(にぎやかし担当)

html5jエンタープライズ部（スタッフ）

html5jWebプラットフォーム部（スタッフ）

AngularJS Japan User Group（スタッフ）


Q：普段のお仕事は



どちらかと言うとNative寄り

どちらかと言うとWeb寄り

実はネットワーク技術者でして・・・

俺がフルスタックだ






















どちらかと言うとWeb寄り実はネットワーク技術者でして・・・









FirefoxOSアプリ= Webアプリ


今回は、FirefoxOSアプリ開発基礎つまるとこ、Webアプリ開発の

きほんのき


知らない技術を触るとき（FxOSアプリってどうやって作るの編）

環境環境雛型雛型学習学習公開公開


Setting

FirefoxブラウザーおすきなエディタチームNode



Rady



Sutdy

GithubのREADME.md

Source Code Reading

アプリマネージャとエミュレータ



Publish

静的サイトでもOK



これだけだと判らないですよね。


FirefoxOS(Webアプリ)開発ことはじめ(デモ)

これから作るものWebComponentで作るホステット型野良アプリ

VPS


今回の環境

Firefoxブラウザ SublimeText3(プラグイン皆無)

yeomanおじさんと愉快な仲間たち



開発の土台を用意 1/2

yeomanのテンプレートを使う(これがナウい)Generator-firefoxos-apphttps://www.npmjs.org/package/generator-firefoxos-app


テンプレートエンジンインストール# npm I generator-firefoxos-app

フォルダ移動して展開# yo firefox-os-app

試しに実行# grunt server

https://www.npmjs.org/package/generator-firefoxos-app



yeomanのテンプレートを使うGenerator-elementhttps://github.com/webcomponents/generator-element


テンプレートエンジンインストール# npm I generator-element

フォルダ移動して展開(こちらはサブジェネレータ)# yo element:repo

試しに実行# grunt server



ここは勝手に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


http://reading.fxos.org:8088/ghc/bower_components/github-card/demo.html

http://reading.fxos.org:8088/bower_components/x-pokemon/x-pokemon.html

学習は頑張って！


WebComponentsTeamによる教材がたくさん！


公開の準備

今回はGithubを使って公開そのために、gruntタスクのgh-pagesを使う(WebComponentには標準実装されてる)


公開の準備


githubにリポジトリを作ります。（２つ）

Generator-firefoxos-appは、Grunt-gh-pagesを組み込んで、ビルド ▶︎ 展開# grunt build# grunt gh-pages

Generator-elementはgh-pagesが組み込まれてるので一発デプロイ# grunt deploy


インストールページ設定

FirefoxOS用Webアプリの作成ページにやり方は乗ってますhttps://developer.mozilla.org/ja/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS

ここも同じ要領でgithubpagesを追加し、インストールボタンを追加します。

github（用意済み）https://github.com/MSakamaki/fxosinstall



インストールしてみよう


エミュレータにインストールしてみる


アプリ公開までがこんなに素早く


どんどん充実するWeb技術

Web標準が充実（じゃぁそれ標準にあればよくない？）

出来ることが増える

開発が大変になる

楽がしたいので良いツール、

ライブラリが増える


Web標準と共に進化していく

Webプラットフォーム

おまけ

AngularJSとWebComponentを使ったシンプルなWebアプリケーション

http://msakamaki.github.io/myfxosapp/

http://msakamaki.github.io/myfxosapp/



ご清聴ありがとうございました。

Technology

Firefox osで変わるアプリケーションの開発ライフサイクル