Download as PDF, PPTX
![JavaScriptを準備• 今回は文字列を変えるスクリプトです。function helloJS() {var hello =document.getElementsByClassName('hello');hello[0].innerHTML = 'hello, JavaScript!';}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fweb-140517020801-phpapp01%2f75%2fWeb-for-CMU16-12-2048.jpg&f=jpg&w=240)
Uploaded byMasami Yabushita
PDF, PPTX1,484 views
できる！スマホアプリ：Webからはじまるアプリ for CMU16
Tutorial session of Firefox OS for Creators Meetup 16.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to できる！スマホアプリ：Webからはじまるアプリ for CMU16
More from Masami Yabushita
できる！スマホアプリ：Webからはじまるアプリ for CMU16
- 1.
- 2.
- 3.自己紹介• 藪下 正美•FxOSコードリーディングの発起人– コミュニティサイト• http://reading.fxos.org/– Facebookグループ•https://www.facebook.com/groups/fxos.code.reading/– Githubグループ• https://github.com/FxOS-Code-Reading-Group
- 4.会社紹介• 株式会社グローバルサイバーグループ– 基本的に組み込み系の会社–携帯電話の案件がメイン– Firefox OSは次世代モバイルプラットフォームとして期待• カーネルからアプリまでどこのレイヤでもやりますよ！
- 5.アジェンダ• まずは簡単にhello, world!•開発ツールの使い方• アプリのデモ• マーケットの話• アプリ開発に関するドキュメント• 付録
- 6.
- 7.まずは簡単にhello, world!• まずはおなじみhello,world!しますね– サンプルは hello フォルダです– https://github.com/aoitan/FxDevCon2014Kyoto/tree/master/hello• hello, world!では大きく次のみっつのことをします– HTML（とかCSSとかJavaScript）を準備– マニフェストを準備– シミュレータでみてみる
- 8.HTML（とかCSSとかJavaScript）を準備• まずはふつうにHTMLとCSSとJavaScriptを用意します。• 今回は–index.html– hello.css– hello.js• という名前で用意しました。
- 9.HTMLを準備• hello, world!だけ表示するHTMLです。•CSSとかJavaScriptから操作しやすいようにidとclassを設定してます。• ボタンをクリックすると後で出てくるスクリプトが実行されます。
- 10.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>
- 11.
- 12.JavaScriptを準備• 今回は文字列を変えるスクリプトです。function helloJS(){var hello =document.getElementsByClassName('hello');hello[0].innerHTML = 'hello, JavaScript!';}
- 13.ブラウザで見る• hello, world!してますね！•ボタンを押すとhello, JavaScript!してくれます！
- 14.
- 15.manifest.webappを用意• マニフェストはFirefox OSアプリの情報を書いたファイルです。•今回は簡単にアプリの名前と概要、アプリ起動時に実行するHTMLファイル、アイコン、開発者情報、デフォルトの言語を書いています。• これでhello, world!もFirefox OSアプリです！
- 16.manifest.webappを用意{"name": "Hello App","description":"Firefox Developers Conference 2014 in KyotoSample 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"}
- 17.
- 18.
- 19.開発ツールの使い方• hello, world!を開発ツールでいろいろいじっていきます。•特によく使うコンソールとインスペクタ、デバッガを中心に話します。• 他にもありますが今回は話しません。
- 20.コンソール• コンソールには二つの側面があります。• 一つはログビューワとしての側面です。–JavaScriptでconsoleのメソッドを呼んだとき出力される先がコンソールになります。• 困った時には変数の値を表示したりそこを通っているか確認したりでconsole.log()はとてもよく使うのでよく見ることになります。• もう一つはコマンドラインとしての側面です。– ちょっとしたJavaScriptを実行したらどうなるのか見てみたいときコンソールにJavaScriptを書いてみることができます。
- 21.インスペクタ• HTMLから表示上の範囲を調べることができます。• 逆に画面からHTMLの要素の位置を調べることもできます。•まだ製品版には入っていませんが将来的にはマージンやパディングも図示してくれるようになりますよ！– 試してみたい方はAurora版というのを探してきてインストールしてみてくださいね。
- 22.
- 23.
- 24.今回は説明しないツール• スタイルエディタ– スタイルを書き換えることができます。–リアルタイムに反映されるので見た目に楽しいですよ！• スクラッチパッド– スクラッチパッドはコンソールよりもうちょっとちゃんとJavaScriptを書きたいときに使います。– 保存できたり補完も利いたりするのでちょっとした開発ならブラウザ上でできますね！• プロファイラ• ネットワーク– この辺りはパフォーマンス解析でとても役立つんですが今回は説明しません。• 3Dビュー– 見た目に楽しいので帰ったら是非遊んでくださいね！• レスポンシブデザインビュー– デスクトップでアプリを仮組みする間はちょくちょく使うんですが今回は説明しません。
- 25.
- 26.APIを使ったアプリ• デスクトップとデータを共有するブックマークアプリです。– サンプルはこちら•https://github.com/aoitan/FxDevCon2014Kyoto/tree/master/AoiroBookmark• 単に同じデータを見るだけではなくて更新もリアルタイムに反映されるようにしてみます。
- 27.
- 28.
- 29.マーケットの話• Firefox OSアプリはFirefoxMarketplaceで流通しています。•作ったアプリはDevelopers Hubから登録できます。– 使っているAPIによっては審査があります。– リジェクトされても審査員がアドバイスをくれます。• ボランティア審査員になることもできますよ！
- 30.デスクトップやfor Androidからも利用できます！• FirefoxMarketplaceはFirefox OSだけのものではありません。• デスクトップ版やAndroid版からも利用できます。– デスクトップ版はこちら• https://marketplace.firefox.com/– Android版はこちら• メニュー → ツール → アプリ
- 31.
- 32.
- 33.Mozilla Developer Network•ほとんどの情報はMozilla DeveloperNetwork (MDN) にあります。– https://developer.mozilla.org/ja/• アプリを作るときによく読むところはここら辺が入口になります。– https://developer.mozilla.org/ja/docs/Web– https://developer.mozilla.org/ja/docs/WebAPI• チュートリアルもありますよ！– https://developer.mozilla.org/ja/docs/Web/Tutorials
- 34.Mozilla Developer Street•リファレンスというよりニュースの趣きがありますが新しい情報を探すならMozilla Developer Street (modest) です。– https://dev.mozilla.jp/• 各種情報へのハブにもなっているので見るところに迷ったらmodestを見てみるのもいいですね。
- 35.Mozilla Wiki• 最新の情報を先取りしやすいのはMDNよりMozillaWikiです。– https://wiki.mozilla.org/Main_Page• ただしあまりまとまった書き方ではないので慣れはいります。• ほとんどのことはMDNで見つかるのでMozilla Wikiはあまり見ないかもしれませんね。
- 36.GoogleグループFirefox OS(Boot2Gecko)• FirefoxOSコミュニティが日々やり取りしているMLです。– https://groups.google.com/forum/#!topic/firefoxos/• わからないことがあったら質問してみると知ってる人が答えてくれますよ！
- 37.fxos.org• Firefox OSコミュニティのサイトです。–http://fxos.org/• イベント情報やイベントリポートもあるのでコミュニティの雰囲気を知りたい方は是非見てみてください。
- 38.FxOSコードリーディング• Firefox OSにかかわるソースコードを読むグループです。–http://reading.fxos.org/– fxos.orgに間借りしてます。• ソースコードを読んで知識を蓄えている方々がいるのでこちらに質問してみるのもよいですよ！
- 39.さいごに• Firefox OSコミュニティはまだ若いコミュニティです。•この機に気軽に参加して気軽に盛り上げてくださいね！
- 40.
- 41.
- 42.今日のサンプル置き場• 今日使うサンプルは以下のURLにあります– https://github.com/aoitan/FxDevCon2014Kyoto–短縮URLはこちら• http://goo.gl/TUZnhQ
- 43.
- 44.ダウンロード方法（zipをダウンロード）• 1. DownloadZIPボタンをクリック
- 45.ダウンロード方法（ダウンロードの確認）• 1. ダウンロードの確認画面で「ファイルを保存する」にチェックを入れてOK–敢えてFirefoxのスクショしか貼らないけど大丈夫だよね！
- 46.
- 47.
- 48.アプリマネージャの起動• ツール →Web開発 → アプリマネージャ• とたどってアプリマネージャを開きます
- 49.
- 50.シミュレータのインストール２• 1. アプリマネージャの解説ページでInstallSimulatorボタンを押す
- 51.シミュレータのインストール３• 1. AppManageradd-onページでInstall Firefox OSv1.3 Simulator(stable)ボタンを押す• 2. Install ADB Helperボタンも押す
- 52.
- 53.シミュレータの起動２• 1. FirefoxOS v1.3ボタンを押す
- 54.
- 55.
- 56.アプリマネージャにアプリを登録する２• 1. 登録したいアプリのマニフェストが置いてあるフォルダを開く•2. フォルダーの選択ボタンを押す
- 57.
- 58.シミュレータにアプリをインストールする• 1. シミュレータを起動する•2. 更新ボタンを押す
- 59.
- 60.