Post on 13-Dec-2014
description
FireFoxOSコードリーティング#fxos
FirefoxOSで何が変わる?アプリケーション開発
FireFoxOSコードリーティング#fxos
About:me
Enterprise Engineer酒巻 瑞穂
FirefoxOSコードリーディング(にぎやかし担当)
html5jエンタープライズ部(スタッフ)
html5jWebプラットフォーム部(スタッフ)
AngularJS Japan User Group(スタッフ)
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
Q:普段のお仕事は
どちらかと言うとNative寄り
どちらかと言うとWeb寄り
実はネットワーク技術者でして・・・
俺がフルスタックだ
FireFoxOSコードリーティング#fxos
FirefoxOSアプリ= Webアプリ
FireFoxOSコードリーティング#fxos
今回は、FirefoxOSアプリ開発基礎つまるとこ、Webアプリ開発の
きほんのき
FireFoxOSコードリーティング#fxos
知らない技術を触るとき(FxOSアプリってどうやって作るの編)
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
Setting
Firefoxブラウザー おすきなエディタ チームNode
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
Rady
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
Sutdy
GithubのREADME.md
Source Code Reading
アプリマネージャとエミュレータ
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
Publish
静的サイトでもOK
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
これだけだと判らないですよね。
FireFoxOSコードリーティング#fxos
FirefoxOS(Webアプリ)開発ことはじめ(デモ)
これから作るものWebComponentで作るホステット型野良アプリ
VPS
FireFoxOSコードリーティング#fxos
今回の環境
Firefoxブラウザ SublimeText3(プラグイン皆無)
yeomanおじさんと愉快な仲間たち
環境環境 雛型雛型 学習学習 公開公開
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
FireFoxOSコードリーティング#fxos
開発の土台を用意 2/2
yeomanのテンプレートを使うGenerator-elementhttps://github.com/webcomponents/generator-element
環境環境 雛型雛型 学習学習 公開公開
テンプレートエンジンインストール# npm I generator-element
フォルダ移動して展開(こちらはサブジェネレータ)# yo element:repo
試しに実行# grunt server
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
環境環境 雛型雛型 学習学習 公開公開
学習は頑張って!
環境環境 雛型雛型 学習学習 公開公開
WebComponentsTeamによる教材がたくさん!
FireFoxOSコードリーティング#fxos
公開の準備
今回はGithubを使って公開そのために、gruntタスクのgh-pagesを使う(WebComponentには標準実装されてる)
環境環境 雛型雛型 学習学習 公開公開
公開の準備
環境環境 雛型雛型 学習学習 公開公開
githubにリポジトリを作ります。(2つ)
Generator-firefoxos-appは、Grunt-gh-pagesを組み込んで、ビルド ▶︎ 展開# grunt build# grunt gh-pages
Generator-elementはgh-pagesが組み込まれてるので一発デプロイ# grunt deploy
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
環境環境 雛型雛型 学習学習 公開公開
FireFoxOSコードリーティング#fxos
インストールしてみよう
環境環境 雛型雛型 学習学習 公開公開
エミュレータにインストールしてみる
FireFoxOSコードリーティング#fxos
アプリ公開までがこんなに素早く
FireFoxOSコードリーティング#fxos
どんどん充実するWeb技術
Web標準が充実(じゃぁそれ標準にあればよくない?)
出来ることが増える
開発が大変になる
楽がしたいので良いツール、
ライブラリが増える
FireFoxOSコードリーティング#fxos
Web標準と共に進化していく
Webプラットフォーム
おまけ
AngularJSとWebComponentを使ったシンプルなWebアプリケーション
http://msakamaki.github.io/myfxosapp/
FireFoxOSコードリーティング#fxos
FireFoxOSコードリーティング#fxos
ご清聴ありがとうございました。