Androiderとi os屋さんがfirefoxosアプリを作ったら

2013/06/15
AndroiderとiOS屋さんが
Firefox OSアプリを作ったら
@kfurue
13年6月15日土曜日

自己紹介
✤ 古江和宏
✤ AVCマルチメディアソフト(株)
✤ iOS開発のスペシャリスト。
✤ iOSの次はこいつだ！（と信じながら、色々手をだしてる）
✤ 業務では
✤ 家電連携iOSアプリケーション開発とか
✤ Twitter：@kfurue
✤ あいぽん系の勉強会に出没してます。

協力してもらった人
✤ 名前
✤ @kobashinG (こばしん)
✤ TechBoosterの中の人。
✤ Android全般。Linuxレイヤも見るよーな「なんでも屋」さん。
✤ スキルマップ
✤ Android : 難しいよねー
✤ Web系 : 入門書れべる。
Android
HTML+CSS+JS
Linux
M気質
0 25 50 75 100
最近、
お腹周りが
ですね。。

協力してもらった人
✤ 名前
✤ muchiki0226(木村尭海)
✤ TechBoosterの中の人。
✤ 業務では
✤ 家電連携Androidアプリケーション開発
✤ 個人では
✤ Androidアプリ開発
✤ WindowsPhone7アプリ開発
✤ サッカーロボット競技大会「RoboCup」に参加
✤ Twitter：@muchiki0226

今日のネタ
✤ テンプレートアプリを準備しよう。
✤ 動画再生にチャレンジ。
✤ 落書きアプリにチャレンジ。
✤ アプリ間連携にチャレンジ。

テンプレートアプリを準備しよう。
✤ Templateアプリが用意されている
✤ GitHub( https://github.com/mozilla/mortar )
★ 標準のTemplate
★ list-detail形式のTemplate
★ ゲーム用Template(deprecated？)

標準のTemplate list-detailのTemplate gameのTemplate
✤ 用意されているTemplateの外観

✤ Templateアプリをクローンして始めると色々る
✤ volo をインストールしておく。
✤ voloはテンプレートのクローンや、プロジェクトへのライブラリの読み込みなど
をしてくれる。
✤ mortar-app-stubをクローンする
✤ GitHubから自動でダウンロードしてくれる。
$ npm install -g volo
$ volo create プロジェクト名 mozilla/mortar-app-stub
できたプロジェクトをいじくり回して、Let’s Try...

✤ 一般的なWebアプリと同じ構成
✤ manifest.webappを追加することでFirefoxOSアプリに。
アプリケーションの構成

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"
}

Applicationを実機で動かそう
✤ USBでつないだらPush

動画再生

サポートされるコーデック
✤ Video
✤ WebM
✤ Ogg
✤ MP4(H.264 AAC or MP3)
✤ Audio
✤ WebM
✤ Ogg
✤ WAVE

プリインVideoアプリ使ってみる
✤ とりあえずシミュレータで起動してみる

プリインVideoアプリ使ってみる
((((；ﾟДﾟ))))ェ？？？？

ならば
✤ ギャラリーアプリはどうなの？？
✤ こっちは動く
✤ Mac環境では
✤ iPhotoにある画像が表示される
✤ ただし動画は×
✤ 仕方ないので諦める
実機で開発しよう！

<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>

SDカード内の動画を再生させる
✤ ストレージにアクセスしてデータを取り出す必要がある
✤ マニフェストの変更
✤ アプリタイプ変更
✤ 権限変更
"type": "privileged",
"permissions": {
"device-storage:sdcard": {
"description": "Required for video playing",
"access": "readwrite"
}
}

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);
}
}

らくがきアプリ

落書きアプリを作ってみる。
✤ 作るもの
✤ Android入門のときに作った、タッチで落書きできるやつ。

<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>

<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)

タッチイベントを取得する
✤ タッチイベントを<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について詳しくは

タッチイベントを取得する
✤ タッチイベントを<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);

✤ 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;
}
}
タッチ座標をひろってくる

あとは作ったの繋ぐだけ。
✤ moveの間で描画を繰り返すようにコードを繋いで完成！
✤ その他のポイント、思ったことは？
✴ moveはhover状態でも飛んでくる（マウスだけ）
タッチとアップの間だけ動くようにFlag管理した。
タッチでイベント登録、アップで解除でもいいかも。
✴ HTMLとCSSとJavascriptってAndroidのXMLとJavaみたい。
Event登録の方法も似てるし、結構すんなり動かせた気が
する（もちろん、難しいことしてないけど）。
Androiderのみなさん！第一歩の壁は低い印象です！

アプリ間連携

アプリ間連携とは
✤ 別々のアプリ間でデータや処理を受け渡す仕組み
✤ Androidで言うインテント
✤ iOSで言うURLスキーム
✤ Firefox OSではWeb Activitiesで実現

Web activitiesの使い方(画像取得)
✤ アクティビティの呼び出し
✤ 画像の取得というアクティビティを
サポートするアプリを取得する例
var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]
}
});

Web activitiesの使い方(画像共有)
✤ 画像の共有というアクティビティを
サポートするアプリを取得する例
var share = new MozActivity({
name: "share",
data: {
type: "image/*",
number: 1,
blobs: [this.result.blob],
}
});

その他のアクティビティ
✤ conﬁgure
✤ 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

はいできた
✤ アプリにアクティビティを登録することも可能
✤ マニフェストに記述
✤ コード上でアクティビティハンドラを登録
✤ アクティビティ完了後の処理の実装が肝

まとめ
✤ Eventを登録して、実装する形式は他プラットフォームを知っていれば受け入れやすい。
✤ 第一歩目の壁は低い印象。
✤ 実機接続系はまだまだ粗いところも？
✤ 急にデバイスが認識しなくなった！
✤ アプリが転送されないんだが。。。
✤ 困ったときのWeb頼み。記事数はかなりある印象。
✤ FirefoxOS専用のAPIとかはまだまだ？？
✤ 知識が足りなくて、UIの互換性ががが。
✤ シミュレーターとPEAKで画面の大きさ違います。固定で大きさ突っ込んじゃダメ。

Androiderとi os屋さんがfirefoxosアプリを作ったら

Recomendados

Recomendados

Más contenido relacionado

Similar a Androiderとi os屋さんがfirefoxosアプリを作ったら

Similar a Androiderとi os屋さんがfirefoxosアプリを作ったら (20)

Último

Último (7)

Androiderとi os屋さんがfirefoxosアプリを作ったら