ぶっとびケータイ+firefox os apps
DESCRIPTION
ぶっとびケータイでやったFirefoxOSアプリをとりあえず完成させるワークショップの資料TRANSCRIPT
ぶっとびケータイ+
Firefox OS Apps||?
EnsekiTT
Goal
Firefox OSのアプリをケータイに入れてハック
なにそれFirefox OS
オープンソースWeb技術消費者の自由デバイスに依存しない
必要なものFirefox OS ケータイ（Androidでもちょっと触れます）パソコン(Linux | OS X | Windows)最新版のFirefoxを！
WiFi(会場が用意しています)
では実機を…
置いといて、まずシミュレータを使って開発しましょう
Firefox OS シミュレータFirefox OS シミュレータ (r2d2b2g)
Firefoxのアドオン
Firefox OSのフリをしてくれる
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/
?
Firefoxでここをクリック
ダウンロードアドオンのインストール
Firefox OS Simulator
シミュレータの起動
Firefoxの「ツール→Web開発→Firefox OS Simulator」
起動スイッチ
起動しましょう！
起動しました！
引っ張りあげて色々触ってみましょう
シミュレータの操作方法
左クリック:タップ右クリック:タップ長押しPgUp・PgDn/alt+fn+↑・alt+fn+↓
:音量Endキー/fn+→:スリープHomeキー/fn+←:タスク切り替え
では！アプリ開発を始めよう
アプリ置き場を作る
新しいフォルダの作成Windows: C:¥fxapps/myfirstapp/osx/Linux...: ~/fxapps/myfirstapp/
宣言しようエディタを開く
Windows:notepad++, Mac:mi, etc...マニフェスト(宣言)ファイルを作る
C:¥fxapps/myfirstapp/manifest.webapp~/fxapps/myfirstapp/manifest.webapp
**保存時の注意**ファイルの種類：すべてのファイル文字コード: UTF-8
{
"name": "マイアプリ",
"description": "私の最初のアプリ",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-‐128.png"
},
"developer": {
"name": "私の名前",
"url": "http://私のサイト.org"
},
"default_locale": "jp"
}
manifest.webappに書き込む
{
"name": "マイアプリ",
"description": "私の最初のアプリ",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-‐128.png"
},
"developer": {
"name": "私の名前",
"url": "http://私のサイト"
},
"default_locale": "jp"
}
manifest.webapp{ "アプリの名前": "マイアプリ",
"どんなアプリか": "私の最初のアプリ",
"どこにあるのか": "/index.html",
"アイコンは": {
"128": "/img/icon-‐128.png" }, "誰が作ったの": {
"名前": "私の名前",
"あなたのサイト":"http://私のサイト"
}, "どこの国か": "jp"
}
日本語訳コード
アイコンを用意するアイコンをここに置きます
C:¥fxapps/myfirstapp/img/icon-128.png~/fxapps/myfirstapp/img/icon-128.png
128×128pxの画像を用意しようWindowsならペイントOSXならプレビューで画像のサイズを調整できるよ
中身を作ろうエディタを開くインデックスファイルを作る
C:¥fxapps/myfirstapp/index.html~/fxapps/myfirstapp/index.html
**保存時の注意**ファイルの種類：すべてのファイル文字コード: UTF-8
index.html<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
My First App!! It’s Works!!!
</body>
</html>
index.html<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
私の最初のアプリです.
</body>
</html>
<ブラウザで見られるすごいテキストだよ>
<すごいテキスト始まり>
<最初に言うべきこと始まり>
<どんな言葉も表示するよ、日本語もね>
<題名始まり> アプリ名 <題名終わり>
<最初に言うべきことは終わり>
<内容の始まり>
私の最初のアプリです.
<内容の終わり>
<すごいテキスト終わり>
日本語訳コード
シミュレータに読み込み
ここをクリック
自分のアプリのところからmanifest.webappを選択
読み込まれたらシミュレータを起動しましょう！
確認
起動！ Add Directoryでは自動で起動します二回目以降はこの方法で…
シミュレータ起動
引っ張りあげて
アプリを選んで起動
起動！
感動の初アプリ起動
実は今みなさんここですよね
Finish
ここを押すと止まる
少し変えたら…index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
私の最初のアプリですか?
</body>
</html>
変わりましたね！
え、パソコンじゃん
そうですね…
ここはぶっとびケータイ！！
じゃあケータイに入れてみよう
ぶっとびケータイ用のマーケットプレイス
http://buttobi.y-misc.org
@y_systemさんが一晩で作ってくれました
Future Work
絵を表示してみたり…速さとかとってみたり…時計とかつけてみたり…電話をかけられたらもうそれはケータイ…
アプリが完成しましたね
☕Coffee Break
Advance Course
ぶっとび時計
JavaScriptに挑戦！
JavaScript？Firefox(パソコンのブラウザ)で普段実はお世話になってるゲームだったり時計だったり…FirefoxOSのアプリはほとんどJavaScriptが使われる！
すごいやつなんです！
では、始めましょう
アプリ置き場を作る
新しいフォルダの作成Windows: C:¥fxapps/imatime/osx/Linux...: ~/fxapps/imatime/
宣言しようエディタを開くマニフェスト(宣言)ファイルを作る
C:¥fxapps/imatime/manifest.webapp~/fxapps/imatime/manifest.webapp
**保存時の注意**ファイルの種類：すべてのファイル文字コード: UTF-8
{ "name": "ぶっとび時計",
"description": "ぶっとび、実はただの時計", "launch_path": "/index.html", "icons": { "128": "/img/icon-‐128.png" }, "developer": { "name": "時計職人", "url": "http://clock.maker/" }, "default_locale": "jp"}
manifest.webappに書き込む
アイコンを用意する
アイコンをここに置きます(今回は同じの)C:¥fxapps/imatime/img/icon-128.png~/fxapps/imatime/img/icon-128.png
中身を作ろうエディタを開くインデックスファイルを作る
C:¥fxapps/imatime/index.html~/fxapps/imatime/index.html
**保存時の注意**ファイルの種類：すべてのファイル文字コード: UTF-8
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>
時計システムを作ろうエディタを開くJavaScriptファイルを作る
C:¥fxapps/imatime/time.js~/fxapps/imatime/time.js
**保存時の注意**ファイルの種類：すべてのファイル文字コード: UTF-8
time.jssetInterval ( '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>";}
time.jssetInterval ( '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>";}
何ミリ秒おきに仕事するか ( 'timeoutput()',1000 ); 仕事 timeoutput(){ now に 新しく今の時間情報を追加 ; h に今の時間数を追加; mi に今の分数を追加; s に今の秒数を追加; "content"に埋め込みます = "<span>要素に時間と分と秒を表示するよ";}
日本語訳コード
シミュレータに読み込み
ここをクリック
1秒ずつ時間が更新されます
よくあるトラブルへのトラブルシューティング
アプリの中身を変えたのに適用されないシミュレータを終了してupdateしてみる自分のアプリが複数出来ている可能性があるので探してみる(次のページにあったりする)
コードを間違えた時にそれに気づくための手順Console を有効にするシミュレータを起動するConsole のログを消す自分のアプリを起動するConsole のメッセージを確認して何行目の何が不味いのか確認する
ReferencesWebAPI
https://wiki.mozilla.org/WebAPIFirefoxOSに関するWiki
https://github.com/dynamis/firefoxos/wikiFirefoxOSシミュレータ
https://github.com/dynamis/firefoxos/wiki/simulatorHTMLとかとか
http://www.htmq.com/
ぶっとびケータイ+Firefox OS Apps by EnsekiTT is licensed under a Creative Commons 表示 - 継承 3.0 非移植 License.