Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to ぶっとびケータイ+Firefox OS Apps
Similar to ぶっとびケータイ+Firefox OS Apps (20)
More from EnsekiTT
ぶっとびケータイ+Firefox OS Apps
- 1. ぶっとびケータイ + Firefox OS Apps || ? EnsekiTT
- 4. 必要なもの Firefox OS ケータイ （Androidでもちょっと触れます） パソコン (Linux | OS X | Windows) 最新版のFirefoxを！ WiFi (会場が用意しています)
- 5. では実機を…
- 7. Firefox OS シミュレータ Firefox OS シミュレータ ? (r2d2b2g) Firefoxのアドオン Firefox OSのフリをしてくれる https://addons.mozilla.org/ja/ firefox/addon/firefox-os- simulator/
- 12. シミュレータの 操作方法 左クリック :タップ 右クリック :タップ長押し PgUp・PgDn/alt+fn+↑・alt+fn+↓ :音量 Endキー/fn+→ :スリープ Homeキー/fn+← :タスク切り替え
- 13. では！ アプリ開発を始めよう
- 15. 宣言しよう エディタを開く Windows:notepad++, Mac:mi, etc... マニフェスト(宣言)ファイルを作る C:¥fxapps/myfirstapp/manifest.webapp ~/fxapps/myfirstapp/manifest.webapp **保存時の注意** ファイルの種類：すべてのファイル 文字コード: UTF-8
- 16. manifest.webapp に書き込む { "name": "マイアプリ", "description": "私の最初のアプリ", "launch_path": "/index.html", "icons": { "128": "/img/icon-‐128.png" }, "developer": { "name": "私の名前", "url": "http://私のサイト.org" }, "default_locale": "jp" }
- 17. manifest.webapp コード 日本語訳 { "name": "マイアプリ", { "アプリの名前": "マイアプリ", "description": "私の最初のアプリ", "どんなアプリか": "私の最初のアプリ", "launch_path": "/index.html", "どこにあるのか": "/index.html", "icons": { "アイコンは": { "128": "/img/icon-‐128.png" "128": "/img/icon-‐128.png" }, }, "developer": { "誰が作ったの": { "name": "私の名前", "名前": "私の名前", "あなたのサイト":"http://私のサイト" "url": "http://私のサイト" }, }, "どこの国か": "jp" "default_locale": "jp" } }
- 18. アイコンを用意する アイコンをここに置きます C:¥fxapps/myfirstapp/img/icon-128.png ~/fxapps/myfirstapp/img/icon-128.png 128 128pxの画像を用意しよう Windowsならペイント OSXならプレビュー で画像のサイズを調整できるよ
- 19. 中身を作ろう エディタを開く インデックスファイルを作る C:¥fxapps/myfirstapp/index.html ~/fxapps/myfirstapp/index.html **保存時の注意** ファイルの種類：すべてのファイル 文字コード: UTF-8
- 20. index.html <!DOCTYPE html> <html> <head> <meta charset=UTF-‐8> <title> アプリ名 </title> </head> <body> My First App!! It’s Works!!! </body> </html>
- 21. index.html コード 日本語訳 <!DOCTYPE html> <ブラウザで見られるすごいテキストだよ> <html> <すごいテキスト始まり> <head> <最初に言うべきこと始まり> <meta charset=UTF-‐8> <どんな言葉も表示するよ、日本語もね> <title> アプリ名 </title> <題名始まり> アプリ名 <題名終わり> </head> <最初に言うべきことは終わり> <body> <内容の始まり> 私の最初のアプリです. 私の最初のアプリです. </body> <内容の終わり> </html> <すごいテキスト終わり>
- 22. シミュレータに読み込み ここをクリック
- 24. 読み込まれたら シミュレータを起動しましょう！ 確認 起動！ Add Directoryでは自動で起動します 二回目以降はこの方法で…
- 25. シミュレータ起動 引っ張りあげて
- 26. アプリを選んで起動 起動！
- 27. 感動の初アプリ起動 実は今みなさんここですよね
- 28. Finish ここを押すと止まる
- 29. 少し変えたら… index.html <!DOCTYPE html> <html> <head> <meta charset=UTF-‐8> <title> アプリ名 </ title> </head> <body> 私の最初のアプリですか? </body> </html>
- 30. 変わりましたね！
- 32. ぶっとびケータイ用の マーケットプレイス http://buttobi.y-misc.org @y_systemさんが一晩で作ってくれました
- 34. アプリが 完成しましたね ☕ Coffee Break
- 35. Advance Course
- 37. JavaScript？ Firefox(パソコンのブラウザ)で 普段実はお世話になってる ゲームだったり 時計だったり… FirefoxOSのアプリは ほとんどJavaScriptが使われる！ すごいやつなんです！
- 38. では、始めましょう
- 40. 宣言しよう エディタを開く マニフェスト(宣言)ファイルを作る C:¥fxapps/imatime/manifest.webapp ~/fxapps/imatime/manifest.webapp **保存時の注意** ファイルの種類：すべてのファイル 文字コード: UTF-8
- 41. manifest.webapp に書き込む { "name": "ぶっとび時計", "description": "ぶっとび、実はただの時計", "launch_path": "/index.html", "icons": { "128": "/img/icon-‐128.png" }, "developer": { "name": "時計職人", "url": "http://clock.maker/" }, "default_locale": "jp" }
- 42. アイコンを用意する アイコンをここに置きます(今回は同じの) C:¥fxapps/imatime/img/icon-128.png ~/fxapps/imatime/img/icon-128.png
- 43. 中身を作ろう エディタを開く インデックスファイルを作る C:¥fxapps/imatime/index.html ~/fxapps/imatime/index.html **保存時の注意** ファイルの種類：すべてのファイル 文字コード: UTF-8
- 44. index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset=UTF-‐8> <title>ぶっとび時計</title> <script type="text/javascript" src="time.js"></script> </head> <body> <h1>ぶっとびただの時計</h1> <div id="content"></div> </body> </html>
- 45. 時計システムを作ろう エディタを開く JavaScriptファイルを作る C:¥fxapps/imatime/time.js ~/fxapps/imatime/time.js **保存時の注意** ファイルの種類：すべてのファイル 文字コード: UTF-8
- 46. time.js setInterval ( 'timeoutput()',1000 ); function timeoutput(){ now = new Date() ; h = now.getHours(); mi = now.getMinutes(); s = now.getSeconds(); document.getElementById("content").innerHTML = "<span id="+ "time" +">" + h + ":" + mi + ":" + s +"</ span>"; }
- 47. time.js コード 日本語訳 何ミリ秒おきに仕事するか setInterval ( 'timeoutput()',1000 ); ( 'timeoutput()',1000 ); function timeoutput(){ now = new Date() ; 仕事 timeoutput(){ h = now.getHours(); now に 新しく今の時間情報を追加 ; mi = now.getMinutes(); h に今の時間数を追加; s = now.getSeconds(); mi に今の分数を追加; document.getElementById("content") s に今の秒数を追加; .innerHTML = "<span id="+ "time" +">" "content"に埋め込みます = + h + ":" + mi + ":" + s + "<span>要素に時間と分と秒を表示するよ"; "</span>"; } }
- 48. シミュレータに読み込み ここをクリック
- 49. 1秒ずつ時間が更新されます
- 51. コードを間違えた時に それに気づくための手順 Console を有効にする シミュレータを起動する Console のログを消す 自分のアプリを起動する Console のメッセージを確認して何 行目の何が不味いのか確認する
- 52. References WebAPI https://wiki.mozilla.org/WebAPI FirefoxOSに関するWiki https://github.com/dynamis/firefoxos/wiki FirefoxOSシミュレータ https://github.com/dynamis/firefoxos/wiki/simulator HTMLとかとか http://www.htmq.com/ ぶっとびケータイ+Firefox OS Apps by EnsekiTT is licensed under a Creative Commons 表示 - 継承 3.0 非移植 License.