Download to read offline
![✤ touchEvent.pageX とか touchEvent.pageY とかで取れる。
✤ 赤色ではなく緑色がとれる
✤ canvasの開始位置（水色）がとれれば？
✤ element.offsetLeft / element.offsetTop でOK!
// x,y座標をx,yに読み込む
function getPoint(e){
if(isDebug){
x = e.clientX - canvas.offsetLeft;
y = e.clientY - canvas.offsetTop;
}else{
var touch = e.touches[0];
x = touch.pageX - canvas.offsetLeft;
y = touch.pageY - canvas.offsetTop;
}
}
タッチ座標をひろってくる
13年6月15日土曜日](https://image.slidesharecdn.com/androideriosfirefoxos-130623092423-phpapp01/75/Androider-i-os-firefoxos-26-2048.jpg)
![Web activitiesの使い方(画像取得)
✤ アクティビティの呼び出し
✤ 画像の取得というアクティビティを
サポートするアプリを取得する例
var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]
}
});
13年6月15日土曜日](https://image.slidesharecdn.com/androideriosfirefoxos-130623092423-phpapp01/75/Androider-i-os-firefoxos-30-2048.jpg)
![Web activitiesの使い方(画像共有)
✤ 画像の共有というアクティビティを
サポートするアプリを取得する例
var share = new MozActivity({
name: "share",
data: {
type: "image/*",
number: 1,
blobs: [this.result.blob],
}
});
13年6月15日土曜日](https://image.slidesharecdn.com/androideriosfirefoxos-130623092423-phpapp01/75/Androider-i-os-firefoxos-31-2048.jpg)
Uploaded byKazuhiro Furue
Androiderとi os屋さんがfirefoxosアプリを作ったら
2013/06/15 関西Firefox OS勉強会 1st にて発表した資料 http://atnd.org/events/39457
Androiderとi os屋さんがfirefoxosアプリを作ったら
- 1.
- 2. 自己紹介 ✤ 古江和宏 ✤ AVCマルチメディアソフト(株) ✤iOS開発のスペシャリスト。 ✤ iOSの次はこいつだ！（と信じながら、色々手をだしてる） ✤ 業務では ✤ 家電連携iOSアプリケーション開発とか ✤ Twitter：@kfurue ✤ あいぽん系の勉強会に出没してます。 13年6月15日土曜日
- 3. 協力してもらった人 ✤ 名前 ✤ @kobashinG(こばしん) ✤ AVCマルチメディアソフト(株) ✤ TechBoosterの中の人。 ✤ Android全般。Linuxレイヤも見るよーな「なんでも屋」さん。 ✤ スキルマップ ✤ Android : 難しいよねー ✤ Web系 : 入門書れべる。 Android HTML+CSS+JS Linux M気質 0 25 50 75 100 最近、 お腹周りが ですね。。 13年6月15日土曜日
- 4. 協力してもらった人 ✤ 名前 ✤ muchiki0226(木村尭海) ✤ AVCマルチメディアソフト(株) ✤ TechBoosterの中の人。 ✤ 業務では ✤ 家電連携Androidアプリケーション開発 ✤ 個人では ✤ Androidアプリ開発 ✤ WindowsPhone7アプリ開発 ✤ サッカーロボット競技大会「RoboCup」に参加 ✤ Twitter：@muchiki0226 13年6月15日土曜日
- 5. 今日のネタ ✤ テンプレートアプリを準備しよう。 ✤ 動画再生にチャレンジ。 ✤落書きアプリにチャレンジ。 ✤ アプリ間連携にチャレンジ。 13年6月15日土曜日
- 6. テンプレートアプリを準備しよう。 ✤ Templateアプリが用意されている ✤ GitHub(https://github.com/mozilla/mortar ) ★ 標準のTemplate ★ list-detail形式のTemplate ★ ゲーム用Template(deprecated？) 13年6月15日土曜日
- 7. テンプレートアプリを準備しよう。 標準のTemplate list-detailのTemplate gameのTemplate ✤用意されているTemplateの外観 13年6月15日土曜日
- 8. テンプレートアプリを準備しよう。 ✤ Templateアプリをクローンして始めると色々 る ✤volo をインストールしておく。 ✤ voloはテンプレートのクローンや、プロジェクトへのライブラリの読み込みなど をしてくれる。 ✤ mortar-app-stubをクローンする ✤ GitHubから自動でダウンロードしてくれる。 $ npm install -g volo $ volo create プロジェクト名 mozilla/mortar-app-stub できたプロジェクトをいじくり回して、Let’s Try... 13年6月15日土曜日
- 9.
- 10. manifest.webappの中身 https://developer.mozilla.org/ja/docs/Web/Apps/Manifest { "name": "れんけい", "description": "FirefoxOSアプリ間連携テストアプリ", "launch_path": "/index.html", "icons": { "128": "/icon.png" }, "developer": { "name": "kfurue", "url": "http://kfurue.hatenablog.com" }, "default_locale": "ja" } 13年6月15日土曜日
- 11.
- 12.
- 13. サポートされるコーデック ✤ Video ✤ WebM ✤Ogg ✤ MP4(H.264 AAC or MP3) ✤ Audio ✤ WebM ✤ Ogg ✤ WAVE 13年6月15日土曜日
- 14.
- 15.
- 16. ならば ✤ ギャラリーアプリはどうなの？？ ✤ こっちは動く ✤Mac環境では ✤ iPhotoにある画像が表示される ✤ ただし動画は× ✤ 仕方ないので諦める 実機で開発しよう！ 13年6月15日土曜日
- 17. <video>をつかって再生させる(1/2) ✤ ネットワーク上の動画ファイルを再生する ✤ index.htmlに下記を記入 <videosrc="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element. </video> 13年6月15日土曜日
- 18. SDカード内の動画を再生させる ✤ ストレージにアクセスしてデータを取り出す必要がある ✤ マニフェストの変更 ✤アプリタイプ変更 ✤ 権限変更 "type": "privileged", "permissions": { "device-storage:sdcard": { "description": "Required for video playing", "access": "readwrite" } } 13年6月15日土曜日
- 19. SDカード内の動画を再生させる ✤ SDカードの中のファイルを取り出す var sdcard= navigator.getDeviceStorage('sdcard'); var request = sdcard.get("foo.ogg"); request.onsuccess = function () { var file = this.result; console.log("Get the file: " + file.mozFullPathInternal); var video = document.createElement("video"); if(video.canPlayType(file.type)){ console.log("video can play."); video.controls = true; video.src=URL.createObjectURL(file); document.body.appendChild(video); } } 13年6月15日土曜日
- 20.
- 21.
- 22. <canvas>を使ってみる ① ✤ index.htmlに<canvas>を作成。 ✤に聞くHTML5！ ✤ javascriptから触りたいので、idを振っておく <body> <h1>Canvas Sample</h1> <div id="content"> <button id="func-btn">clear</button> <canvas id="sample-canvas" width=300 height=300></canvas> </div> <script type="text/javascript" src="js/app.js"></script> </body> 13年6月15日土曜日
- 23. <canvas>を使ってみる② ✤ Canvasに固定線を引いてみる。 function drawLine(){ //コンテキストを取得する var canvas = document.querySelector("#sample-canvas"); var ctx = canvas.getContext('2d'); // 線を書く宣言 ctx.beginPath(); // 線の始めから終わりまでの座標 ctx.moveTo(10,10); ctx.lineTo(200,200); // 線を書く、Pathを閉じる ctx.stroke(); ctx.closePath(); } (10, 10) (200, 200) 13年6月15日土曜日
- 24. タッチイベントを取得する ✤ タッチイベントを<canvas>に設定してみる ✤ element.addEventListener(type,listener ); ✤ EventTypeには type listener EventTypeを指定する。 functionを指定する mouse touch タイミング mousestart touchstart mousemove touchmove mouseend touchend タッチした時に呼ばれる 移動中に呼ばれる アップした時に呼ばれる。 https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent?redirectlocale=en-US&redirectslug=DOM%2FTouchEvent ※TouchEventについて詳しくは 13年6月15日土曜日
- 25. タッチイベントを取得する ✤ タッチイベントを<canvas>に設定してみる ✤ var canvas= document.querySelector("#sample-canvas"); var ctx = canvas.getContext('2d'); // マウス用 canvas.addEventListener("mousedown",onCanvasDown); canvas.addEventListener("mouseup",onCanvasUp); canvas.addEventListener("mousemove",onCanvasMove); // タッチパネル用 canvas.addEventListener("touchstart",onCanvasDown); canvas.addEventListener("touchend",onCanvasUp); canvas.addEventListener("touchmove",onCanvasMove); 13年6月15日土曜日
- 26. ✤ touchEvent.pageX とかtouchEvent.pageY とかで取れる。 ✤ 赤色ではなく緑色がとれる ✤ canvasの開始位置（水色）がとれれば？ ✤ element.offsetLeft / element.offsetTop でOK! // x,y座標をx,yに読み込む function getPoint(e){ if(isDebug){ x = e.clientX - canvas.offsetLeft; y = e.clientY - canvas.offsetTop; }else{ var touch = e.touches[0]; x = touch.pageX - canvas.offsetLeft; y = touch.pageY - canvas.offsetTop; } } タッチ座標をひろってくる 13年6月15日土曜日
- 27. あとは作ったの繋ぐだけ。 ✤ moveの間で描画を繰り返すようにコードを繋いで完成！ ✤ その他のポイント、思ったことは？ ✴moveはhover状態でも飛んでくる（マウスだけ） タッチとアップの間だけ動くようにFlag管理した。 タッチでイベント登録、アップで解除でもいいかも。 ✴ HTMLとCSSとJavascriptってAndroidのXMLとJavaみたい。 Event登録の方法も似てるし、結構すんなり動かせた気が する（もちろん、難しいことしてないけど）。 Androiderのみなさん！第一歩の壁は低い印象です！ 13年6月15日土曜日
- 28.
- 29. アプリ間連携とは ✤ 別々のアプリ間でデータや処理を受け渡す仕組み ✤ Androidで言うインテント ✤iOSで言うURLスキーム ✤ Firefox OSではWeb Activitiesで実現 13年6月15日土曜日
- 30. Web activitiesの使い方(画像取得) ✤ アクティビティの呼び出し ✤画像の取得というアクティビティを サポートするアプリを取得する例 var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } }); 13年6月15日土曜日
- 31. Web activitiesの使い方(画像共有) ✤ 画像の共有というアクティビティを サポートするアプリを取得する例 varshare = new MozActivity({ name: "share", data: { type: "image/*", number: 1, blobs: [this.result.blob], } }); 13年6月15日土曜日
- 32. その他のアクティビティ ✤ configure ✤ costcontrol/balance ✤costcontrol/data_usage ✤ costcontrol/telephony ✤ dial ✤ new (例 type: “websms/ sms”, “webcontacts/contact”) ✤ open ✤ pick (例 type: “image/png”) ✤ record ✤ save-bookmark ✤ share ✤ test ✤ view 13年6月15日土曜日
- 33. はいできた ✤ アプリにアクティビティを登録することも可能 ✤ マニフェストに記述 ✤コード上でアクティビティハンドラを登録 ✤ アクティビティ完了後の処理の実装が肝 13年6月15日土曜日
- 34. まとめ ✤ Eventを登録して、実装する形式は他プラットフォームを知っていれば受け入れやすい。 ✤ 第一歩目の壁は低い印象。 ✤実機接続系はまだまだ粗いところも？ ✤ 急にデバイスが認識しなくなった！ ✤ アプリが転送されないんだが。。。 ✤ 困ったときのWeb頼み。記事数はかなりある印象。 ✤ FirefoxOS専用のAPIとかはまだまだ？？ ✤ 知識が足りなくて、UIの互換性ががが。 ✤ シミュレーターとPEAKで画面の大きさ違います。固定で大きさ突っ込んじゃダメ。 13年6月15日土曜日