ぶっとびケータイ+Firefox OS Apps
-
Upload
ensekitt -
Category
Self Improvement
-
view
804 -
download
1
description
Transcript of ぶっとびケータイ+Firefox OS Apps
![Page 1: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/1.jpg)
ぶっとびケータイ+
Firefox OS Apps||?
EnsekiTT
![Page 2: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/2.jpg)
Goal
Firefox OSのアプリをケータイに入れてハック
![Page 3: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/3.jpg)
なにそれFirefox OS
オープンソースWeb技術消費者の自由デバイスに依存しない
![Page 4: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/4.jpg)
必要なものFirefox OS ケータイ(Androidでもちょっと触れます)パソコン(Linux | OS X | Windows)最新版のFirefoxを!
WiFi(会場が用意しています)
![Page 5: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/5.jpg)
では実機を…
![Page 6: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/6.jpg)
置いといて、まずシミュレータを使って開発しましょう
![Page 7: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/7.jpg)
Firefox OS シミュレータFirefox OS シミュレータ (r2d2b2g)
Firefoxのアドオン
Firefox OSのフリをしてくれる
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/
?
![Page 8: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/8.jpg)
Firefoxでここをクリック
![Page 9: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/9.jpg)
ダウンロードアドオンのインストール
Firefox OS Simulator
![Page 10: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/10.jpg)
シミュレータの起動
Firefoxの「ツール→Web開発→Firefox OS Simulator」
起動スイッチ
起動しましょう!
![Page 11: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/11.jpg)
起動しました!
引っ張りあげて色々触ってみましょう
![Page 12: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/12.jpg)
シミュレータの操作方法
左クリック:タップ右クリック:タップ長押しPgUp・PgDn/alt+fn+↑・alt+fn+↓
:音量Endキー/fn+→:スリープHomeキー/fn+←:タスク切り替え
![Page 13: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/13.jpg)
では!アプリ開発を始めよう
![Page 14: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/14.jpg)
アプリ置き場を作る
新しいフォルダの作成Windows: C:¥fxapps/myfirstapp/osx/Linux...: ~/fxapps/myfirstapp/
![Page 15: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/15.jpg)
宣言しようエディタを開く
Windows:notepad++, Mac:mi, etc...マニフェスト(宣言)ファイルを作る
C:¥fxapps/myfirstapp/manifest.webapp~/fxapps/myfirstapp/manifest.webapp
**保存時の注意**ファイルの種類:すべてのファイル文字コード: UTF-8
![Page 16: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/16.jpg)
{
"name": "マイアプリ",
"description": "私の最初のアプリ",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-‐128.png"
},
"developer": {
"name": "私の名前",
"url": "http://私のサイト.org"
},
"default_locale": "jp"
}
manifest.webappに書き込む
![Page 17: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/17.jpg)
{
"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"
}
日本語訳コード
![Page 18: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/18.jpg)
アイコンを用意するアイコンをここに置きます
C:¥fxapps/myfirstapp/img/icon-128.png~/fxapps/myfirstapp/img/icon-128.png
128×128pxの画像を用意しようWindowsならペイントOSXならプレビューで画像のサイズを調整できるよ
![Page 19: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/19.jpg)
中身を作ろうエディタを開くインデックスファイルを作る
C:¥fxapps/myfirstapp/index.html~/fxapps/myfirstapp/index.html
**保存時の注意**ファイルの種類:すべてのファイル文字コード: UTF-8
![Page 20: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/20.jpg)
index.html<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
My First App!! It’s Works!!!
</body>
</html>
![Page 21: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/21.jpg)
index.html<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
私の最初のアプリです.
</body>
</html>
<ブラウザで見られるすごいテキストだよ>
<すごいテキスト始まり>
<最初に言うべきこと始まり>
<どんな言葉も表示するよ、日本語もね>
<題名始まり> アプリ名 <題名終わり>
<最初に言うべきことは終わり>
<内容の始まり>
私の最初のアプリです.
<内容の終わり>
<すごいテキスト終わり>
日本語訳コード
![Page 22: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/22.jpg)
シミュレータに読み込み
ここをクリック
![Page 23: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/23.jpg)
自分のアプリのところからmanifest.webappを選択
![Page 24: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/24.jpg)
読み込まれたらシミュレータを起動しましょう!
確認
起動! Add Directoryでは自動で起動します二回目以降はこの方法で…
![Page 25: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/25.jpg)
シミュレータ起動
引っ張りあげて
![Page 26: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/26.jpg)
アプリを選んで起動
起動!
![Page 27: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/27.jpg)
感動の初アプリ起動
実は今みなさんここですよね
![Page 28: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/28.jpg)
Finish
ここを押すと止まる
![Page 29: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/29.jpg)
少し変えたら…index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-‐8>
<title> アプリ名 </title>
</head>
<body>
私の最初のアプリですか?
</body>
</html>
![Page 30: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/30.jpg)
変わりましたね!
![Page 31: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/31.jpg)
え、パソコンじゃん
そうですね…
ここはぶっとびケータイ!!
じゃあケータイに入れてみよう
![Page 32: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/32.jpg)
ぶっとびケータイ用のマーケットプレイス
http://buttobi.y-misc.org
@y_systemさんが一晩で作ってくれました
![Page 33: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/33.jpg)
Future Work
絵を表示してみたり…速さとかとってみたり…時計とかつけてみたり…電話をかけられたらもうそれはケータイ…
![Page 34: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/34.jpg)
アプリが完成しましたね
☕Coffee Break
![Page 35: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/35.jpg)
Advance Course
![Page 36: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/36.jpg)
ぶっとび時計
JavaScriptに挑戦!
![Page 37: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/37.jpg)
JavaScript?Firefox(パソコンのブラウザ)で普段実はお世話になってるゲームだったり時計だったり…FirefoxOSのアプリはほとんどJavaScriptが使われる!
すごいやつなんです!
![Page 38: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/38.jpg)
では、始めましょう
![Page 39: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/39.jpg)
アプリ置き場を作る
新しいフォルダの作成Windows: C:¥fxapps/imatime/osx/Linux...: ~/fxapps/imatime/
![Page 40: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/40.jpg)
宣言しようエディタを開くマニフェスト(宣言)ファイルを作る
C:¥fxapps/imatime/manifest.webapp~/fxapps/imatime/manifest.webapp
**保存時の注意**ファイルの種類:すべてのファイル文字コード: UTF-8
![Page 41: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/41.jpg)
{ "name": "ぶっとび時計",
"description": "ぶっとび、実はただの時計", "launch_path": "/index.html", "icons": { "128": "/img/icon-‐128.png" }, "developer": { "name": "時計職人", "url": "http://clock.maker/" }, "default_locale": "jp"}
manifest.webappに書き込む
![Page 42: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/42.jpg)
アイコンを用意する
アイコンをここに置きます(今回は同じの)C:¥fxapps/imatime/img/icon-128.png~/fxapps/imatime/img/icon-128.png
![Page 43: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/43.jpg)
中身を作ろうエディタを開くインデックスファイルを作る
C:¥fxapps/imatime/index.html~/fxapps/imatime/index.html
**保存時の注意**ファイルの種類:すべてのファイル文字コード: UTF-8
![Page 44: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/44.jpg)
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>
![Page 45: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/45.jpg)
時計システムを作ろうエディタを開くJavaScriptファイルを作る
C:¥fxapps/imatime/time.js~/fxapps/imatime/time.js
**保存時の注意**ファイルの種類:すべてのファイル文字コード: UTF-8
![Page 46: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/46.jpg)
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>";}
![Page 47: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/47.jpg)
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>要素に時間と分と秒を表示するよ";}
日本語訳コード
![Page 48: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/48.jpg)
シミュレータに読み込み
ここをクリック
![Page 49: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/49.jpg)
1秒ずつ時間が更新されます
![Page 50: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/50.jpg)
よくあるトラブルへのトラブルシューティング
アプリの中身を変えたのに適用されないシミュレータを終了してupdateしてみる自分のアプリが複数出来ている可能性があるので探してみる(次のページにあったりする)
![Page 51: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/51.jpg)
コードを間違えた時にそれに気づくための手順Console を有効にするシミュレータを起動するConsole のログを消す自分のアプリを起動するConsole のメッセージを確認して何行目の何が不味いのか確認する
![Page 52: ぶっとびケータイ+Firefox OS Apps](https://reader034.fdocuments.net/reader034/viewer/2022052623/559c2dae1a28ab800f8b4711/html5/thumbnails/52.jpg)
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.