できる！スマホアプリ：webからはじまるアプリ for cmu16
TRANSCRIPT
できる！スマホアプリ Webからはじまるアプリ開発
株式会社
グローバルサイバーグループ
藪下 正美
はじめに
自己紹介
• 藪下 正美
• FxOSコードリーディングの発起人
– コミュニティサイト • http://reading.fxos.org/
– Facebookグループ •
https://www.facebook.com/groups/fxos.code.reading/
– Githubグループ • https://github.com/FxOS-Code-Reading-Group
会社紹介
• 株式会社グローバルサイバーグループ
– 基本的に組み込み系の会社
– 携帯電話の案件がメイン
– Firefox OSは次世代モバイルプラットフォームとして期待
• カーネルからアプリまでどこのレイヤでもやりますよ！
アジェンダ
• まずは簡単にhello, world!
• 開発ツールの使い方
• アプリのデモ
• マーケットの話
• アプリ開発に関するドキュメント
• 付録
まずは簡単にhello, world!
まずは簡単にhello, world!
• まずはおなじみhello, world!しますね – サンプルは hello フォルダです
– https://github.com/aoitan/FxDevCon2014Kyoto/tree/master/hello
• hello, world!では大きく次のみっつのことをします – HTML（とかCSSとかJavaScript）を準備
– マニフェストを準備
– シミュレータでみてみる
HTML（とかCSSとかJavaScript）を準備
• まずはふつうにHTMLとCSSとJavaScriptを用意します。
• 今回は
– index.html
– hello.css
– hello.js
• という名前で用意しました。
HTMLを準備
• hello, world!だけ表示するHTMLです。
• CSSとかJavaScriptから操作しやすいようにidとclassを設定してます。
• ボタンをクリックすると後で出てくるスクリプトが実行されます。
HTMLを準備
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello, world!</title> <script src="hello.js"></script> <link rel="stylesheet" type="text/css" href="hello.css"> </head> <body> <div class="hello" id="hello"> hello, world! </div> <div class="buttons"> <input type="button" value="run script" onclick="helloJS();"> </div> </body> </html>
CSSを準備
• 今回は文字列の色を指定しています。
.hello { color: black; }
JavaScriptを準備
• 今回は文字列を変えるスクリプトです。
function helloJS() { var hello = document.getElementsByClassName('hello'); hello[0].innerHTML = 'hello, JavaScript!'; }
ブラウザで見る
• hello, world!してますね！
• ボタンを押すとhello, JavaScript!してくれます！
アプリにしよう
• 次はこの単なるHTMLをアプリにします。
• アプリにするためにはマニフェストを用意します。
manifest.webappを用意
• マニフェストはFirefox OSアプリの情報を書いたファイルです。
• 今回は簡単にアプリの名前と概要、アプリ起動時に実行するHTMLファイル、アイコン、開発者情報、デフォルトの言語を書いています。
• これでhello, world!もFirefox OSアプリです！
manifest.webappを用意
{ "name": "Hello App", "description": "Firefox Developers Conference 2014 in Kyoto Sample App", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "YABUSHITA Masami", "url": "http://www.gcg.bz/labo_blog/?author=2" }, "default_locale": "en" }
シミュレータで見てみる
• 今用意したHTMLをシミュレータで見てみましょう。
• まずはシミュレータにアプリをインストールします。
開発ツールの使い方
開発ツールの使い方
• hello, world!を開発ツールでいろいろいじっていきます。
• 特によく使うコンソールとインスペクタ、デバッガを中心に話します。
• 他にもありますが今回は話しません。
コンソール
• コンソールには二つの側面があります。
• 一つはログビューワとしての側面です。 – JavaScriptでconsoleのメソッドを呼んだとき
出力される先がコンソールになります。 • 困った時には変数の値を表示したりそこを通っている
か確認したりでconsole.log()はとてもよく使うのでよく見ることになります。
• もう一つはコマンドラインとしての側面です。 – ちょっとしたJavaScriptを実行したらどうなる
のか見てみたいときコンソールにJavaScriptを書いてみることができます。
インスペクタ
• HTMLから表示上の範囲を調べることができます。
• 逆に画面からHTMLの要素の位置を調べることもできます。
• まだ製品版には入っていませんが将来的にはマージンやパディングも図示してくれるようになりますよ！ – 試してみたい方はAurora版というのを探し
てきてインストールしてみてくださいね。
デバッガ
• JavaScriptの実行を止めてその時の変数の状態などを見ることができます。
– 変数の値を変えることもできるのでこっちの場合はどうなるのかなとかも試せます。
デモ
• 実際やってみましょう。
今回は説明しないツール
• スタイルエディタ – スタイルを書き換えることができます。 – リアルタイムに反映されるので見た目に楽しいですよ！
• スクラッチパッド – スクラッチパッドはコンソールよりもうちょっとちゃんとJavaScriptを書きたいと
きに使います。 – 保存できたり補完も利いたりするのでちょっとした開発ならブラウザ上でできます
ね！
• プロファイラ • ネットワーク
– この辺りはパフォーマンス解析でとても役立つんですが今回は説明しません。
• 3Dビュー – 見た目に楽しいので帰ったら是非遊んでくださいね！
• レスポンシブデザインビュー – デスクトップでアプリを仮組みする間はちょくちょく使うんですが今回は説明しませ
ん。
アプリのデモ
APIを使ったアプリ
• デスクトップとデータを共有するブックマークアプリです。
– サンプルはこちら
• https://github.com/aoitan/FxDevCon2014Kyoto/tree/master/AoiroBookmark
• 単に同じデータを見るだけではなくて更新もリアルタイムに反映されるようにしてみます。
デモ
• いろいろ触ってみますよ！
マーケットの話
マーケットの話
• Firefox OSアプリはFirefox Marketplaceで流通しています。
• 作ったアプリはDevelopers Hubから登録できます。
– 使っているAPIによっては審査があります。
– リジェクトされても審査員がアドバイスをくれます。
• ボランティア審査員になることもできますよ！
デスクトップやfor Androidからも利用できます！
• Firefox MarketplaceはFirefox OSだけのものではありません。
• デスクトップ版やAndroid版からも利用できます。
– デスクトップ版はこちら
• https://marketplace.firefox.com/
– Android版はこちら
• メニュー → ツール → アプリ
アプリ開発に関する ドキュメント
アプリ開発に関するドキュメント
• アプリ開発しようにもわからないことたくさんありますよね。
• わからないことがあった時によく見る資料を紹介します。
Mozilla Developer Network
• ほとんどの情報はMozilla Developer Network (MDN) にあります。 – https://developer.mozilla.org/ja/
• アプリを作るときによく読むところはここら辺が入口になります。 – https://developer.mozilla.org/ja/docs/Web – https://developer.mozilla.org/ja/docs/Web
API
• チュートリアルもありますよ！ – https://developer.mozilla.org/ja/docs/Web/
Tutorials
Mozilla Developer Street
• リファレンスというよりニュースの趣きがありますが新しい情報を探すならMozilla Developer Street (modest) です。
– https://dev.mozilla.jp/
• 各種情報へのハブにもなっているので見るところに迷ったらmodestを見てみるのもいいですね。
Mozilla Wiki
• 最新の情報を先取りしやすいのはMDNよりMozilla Wikiです。
– https://wiki.mozilla.org/Main_Page
• ただしあまりまとまった書き方ではないので慣れはいります。
• ほとんどのことはMDNで見つかるのでMozilla Wikiはあまり見ないかもしれませんね。
Googleグループ Firefox OS(Boot2Gecko)
• Firefox OSコミュニティが日々やり取りしているMLです。
– https://groups.google.com/forum/#!topic/firefoxos/
• わからないことがあったら質問してみると知ってる人が答えてくれますよ！
fxos.org
• Firefox OSコミュニティのサイトです。
– http://fxos.org/
• イベント情報やイベントリポートもあるのでコミュニティの雰囲気を知りたい方は是非見てみてください。
FxOSコードリーディング
• Firefox OSにかかわるソースコードを読むグループです。
– http://reading.fxos.org/
– fxos.orgに間借りしてます。
• ソースコードを読んで知識を蓄えている方々がいるのでこちらに質問してみるのもよいですよ！
さいごに
• Firefox OSコミュニティはまだ若いコミュニティです。
• この機に気軽に参加して気軽に盛り上げてくださいね！
付録
サンプル
今日のサンプル置き場
• 今日使うサンプルは以下のURLにあります
– https://github.com/aoitan/FxDevCon2014Kyoto
– 短縮URLはこちら
• http://goo.gl/TUZnhQ
ダウンロード方法 （githubにアクセス）
• 1.https://github.com/aoitan/FxDevCon2014Kyoto にアクセス
ダウンロード方法 （zipをダウンロード）
• 1. Download ZIPボタンをクリック
ダウンロード方法 （ダウンロードの確認）
• 1. ダウンロードの確認画面で「ファイルを保存する」にチェックを入れてOK – 敢えてFirefoxのスクショしか貼らないけど大丈夫だよね！
シミュレータのインストール
シミュレータの準備
• 今日のサンプルはシミュレータで動かしてみます
• シミュレータを準備していきましょう
アプリマネージャの起動
• ツール → Web開発 → アプリマネージャ
• とたどってアプリマネージャを開きます
シミュレータのインストール１
• 1. シミュレータをインストールボタンを押す
シミュレータのインストール２
• 1. アプリマネージャの解説ページでInstall Simulatorボタンを押す
シミュレータのインストール３
• 1. AppManager add-onページでInstall Firefox OS v1.3 Simulator(stable)ボタンを押す
• 2. Install ADB Helperボタンも押す
シミュレータの起動１
• 1. シミュレータを起動ボタンを押す
シミュレータの起動２
• 1. Firefox OS v1.3ボタンを押す
シミュレータへの アプリのインストール
アプリマネージャに アプリを登録する１
• 1. パッケージアプリを追加の＋ボタンを押す
アプリマネージャに アプリを登録する２
• 1. 登録したいアプリのマニフェストが置いてあるフォルダを開く
• 2. フォルダーの選択ボタンを押す
アプリマネージャに アプリを登録する３
• 1. アプリマネージャにアプリが出て来たらアプリマネージャへの登録完了です！
シミュレータにアプリを インストールする
• 1. シミュレータを起動する
• 2. 更新ボタンを押す
シミュレータにアプリを インストールした
• 1. シミュレータ上にアイコンが出てきたら成功です！
おしまい
• ご清聴ありがとうございました。