Embed Size (px)
DESCRIPTION
2013/06/15 関西Firefox OS勉強会 1st にて発表した資料 http://atnd.org/events/39457
Citation preview
2013/06/15
AndroiderとiOS屋さんがFirefox OSアプリを作ったら
@kfurue
13年6月15日土曜日
自己紹介
✤ 古江和宏✤ AVCマルチメディアソフト(株)✤ iOS開発のスペシャリスト。✤ iOSの次はこいつだ！（と信じながら、色々手をだしてる）
✤ 業務では✤ 家電連携iOSアプリケーション開発とか
✤ Twitter：@kfurue✤ あいぽん系の勉強会に出没してます。
13年6月15日土曜日
協力してもらった人
✤ 名前✤ @kobashinG (こばしん)
✤ AVCマルチメディアソフト(株)✤ TechBoosterの中の人。✤ Android全般。Linuxレイヤも見るよーな「なんでも屋」さん。
✤ スキルマップ✤ Android : 難しいよねー✤ Web系 : 入門書れべる。
AndroidHTML+CSS+JS
LinuxM気質
0 25 50 75 100
最近、お腹周りがですね。。
13年6月15日土曜日
協力してもらった人
✤ 名前✤ muchiki0226(木村 尭海)✤ AVCマルチメディアソフト(株)✤ TechBoosterの中の人。
✤ 業務では✤ 家電連携Androidアプリケーション開発
✤ 個人では✤ Androidアプリ開発✤ WindowsPhone7アプリ開発✤ サッカーロボット競技大会「RoboCup」に参加
✤ Twitter：@muchiki0226
13年6月15日土曜日
今日のネタ
✤ テンプレートアプリを準備しよう。
✤ 動画再生にチャレンジ。
✤ 落書きアプリにチャレンジ。
✤ アプリ間連携にチャレンジ。
13年6月15日土曜日
テンプレートアプリを準備しよう。
✤ Templateアプリが用意されている✤ GitHub( https://github.com/mozilla/mortar )
★ 標準のTemplate★ list-detail形式のTemplate★ ゲーム用Template(deprecated？)
13年6月15日土曜日
テンプレートアプリを準備しよう。
標準のTemplate list-detailのTemplate gameのTemplate
✤ 用意されているTemplateの外観
13年6月15日土曜日
テンプレートアプリを準備しよう。
✤ Templateアプリをクローンして始めると色々捗る✤ volo をインストールしておく。
✤ voloはテンプレートのクローンや、プロジェクトへのライブラリの読み込みなどをしてくれる。
✤ mortar-app-stubをクローンする
✤ GitHubから自動でダウンロードしてくれる。
$ npm install -g volo
$ volo create プロジェクト名 mozilla/mortar-app-stub
できたプロジェクトをいじくり回して、Let’s Try...13年6月15日土曜日
✤ 一般的なWebアプリと同じ構成✤ manifest.webappを追加することでFirefoxOSアプリに。
アプリケーションの構成
13年6月15日土曜日
manifest.webappの中身
https://developer.mozilla.org/ja/docs/Web/Apps/Manifest
{ "name": "れんけい",
"description": "Firefox OSアプリ間連携テストアプリ",
"launch_path": "/index.html", "icons": { "128": "/icon.png" }, "developer": { "name": "kfurue", "url": "http://kfurue.hatenablog.com" }, "default_locale": "ja"}
13年6月15日土曜日
Applicationを実機で動かそう
✤ USBでつないだらPush
13年6月15日土曜日
動画再生
13年6月15日土曜日
サポートされるコーデック
✤ Video✤ WebM✤ Ogg✤ MP4(H.264 AAC or MP3)
✤ Audio✤ WebM✤ Ogg✤ WAVE
13年6月15日土曜日
プリインVideoアプリ使ってみる
✤ とりあえずシミュレータで起動してみる
13年6月15日土曜日
プリインVideoアプリ使ってみる
((((；ﾟДﾟ))))ェ？？？？
13年6月15日土曜日
ならば
✤ ギャラリーアプリはどうなの？？✤ こっちは動く✤ Mac環境では
✤ iPhotoにある画像が表示される
✤ ただし動画は×✤ 仕方ないので諦める
実機で開発しよう！
13年6月15日土曜日
<video>をつかって再生させる(1/2)
✤ ネットワーク上の動画ファイルを再生する
✤ index.htmlに下記を記入
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element.</video>
13年6月15日土曜日
SDカード内の動画を再生させる
✤ ストレージにアクセスしてデータを取り出す必要がある✤ マニフェストの変更
✤ アプリタイプ変更✤ 権限変更
"type": "privileged","permissions": { "device-storage:sdcard": { "description": "Required for video playing", "access": "readwrite" } }
13年6月15日土曜日
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日土曜日
らくがきアプリ
13年6月15日土曜日
落書きアプリを作ってみる。
✤ 作るもの
✤ Android入門のときに作った、タッチで落書きできるやつ。
13年6月15日土曜日
<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日土曜日
<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日土曜日
タッチイベントを取得する
✤ タッチイベントを<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日土曜日
タッチイベントを取得する
✤ タッチイベントを<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日土曜日
✤ 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日土曜日
あとは作ったの繋ぐだけ。
✤ moveの間で描画を繰り返すようにコードを繋いで完成！
✤ その他のポイント、思ったことは？✴ moveはhover状態でも飛んでくる（マウスだけ） タッチとアップの間だけ動くようにFlag管理した。 タッチでイベント登録、アップで解除でもいいかも。✴ HTMLとCSSとJavascriptってAndroidのXMLとJavaみたい。 Event登録の方法も似てるし、結構すんなり動かせた気が する（もちろん、難しいことしてないけど）。 Androiderのみなさん！第一歩の壁は低い印象です！
13年6月15日土曜日
アプリ間連携
13年6月15日土曜日
アプリ間連携とは
✤ 別々のアプリ間でデータや処理を受け渡す仕組み✤ Androidで言うインテント✤ iOSで言うURLスキーム
✤ Firefox OSではWeb Activitiesで実現
13年6月15日土曜日
Web activitiesの使い方(画像取得)
✤ アクティビティの呼び出し
✤ 画像の取得というアクティビティをサポートするアプリを取得する例
var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] }});
13年6月15日土曜日
Web activitiesの使い方(画像共有)
✤ 画像の共有というアクティビティをサポートするアプリを取得する例
var share = new MozActivity({ name: "share", data: { type: "image/*", number: 1, blobs: [this.result.blob], }});
13年6月15日土曜日
その他のアクティビティ
✤ 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日土曜日
はいできた
✤ アプリにアクティビティを登録することも可能✤ マニフェストに記述✤ コード上でアクティビティハンドラを登録
✤ アクティビティ完了後の処理の実装が肝
13年6月15日土曜日
まとめ
✤ Eventを登録して、実装する形式は他プラットフォームを知っていれば受け入れやすい。
✤ 第一歩目の壁は低い印象。
✤ 実機接続系はまだまだ粗いところも？
✤ 急にデバイスが認識しなくなった！
✤ アプリが転送されないんだが。。。
✤ 困ったときのWeb頼み。記事数はかなりある印象。
✤ FirefoxOS専用のAPIとかはまだまだ？？
✤ 知識が足りなくて、UIの互換性ががが。
✤ シミュレーターとPEAKで画面の大きさ違います。固定で大きさ突っ込んじゃダメ。
13年6月15日土曜日
