狠狠撸

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=/slideshow/androideri-osfirefoxos/23365155/"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=/slideshow/androideri-osfirefoxos/23365155/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=/slideshow/androideri-osfirefoxos/23365155/"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アフ?リを作ったら

More Related Content

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