Androiderとi os屋さんがfirefoxosアプリを作ったら
Upcoming SlideShare
Loading in...5
×
 

Androiderとi os屋さんがfirefoxosアプリを作ったら

on

  • 1,742 views

2013/06/15 関西Firefox OS勉強会 1st にて発表した資料

2013/06/15 関西Firefox OS勉強会 1st にて発表した資料
http://atnd.org/events/39457

Statistics

Views

Total Views
1,742
Views on SlideShare
1,738
Embed Views
4

Actions

Likes
3
Downloads
7
Comments
0

2 Embeds 4

https://twitter.com 2
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Androiderとi os屋さんがfirefoxosアプリを作ったら Androiderとi os屋さんがfirefoxosアプリを作ったら Presentation Transcript

  • 2013/06/15AndroiderとiOS屋さんがFirefox OSアプリを作ったら@kfurue13年6月15日土曜日
  • 自己紹介✤ 古江和宏✤ AVCマルチメディアソフト(株)✤ iOS開発のスペシャリスト。✤ iOSの次はこいつだ!(と信じながら、色々手をだしてる)✤ 業務では✤ 家電連携iOSアプリケーション開発とか✤ Twitter:@kfurue✤ あいぽん系の勉強会に出没してます。13年6月15日土曜日
  • 協力してもらった人✤ 名前✤ @kobashinG (こばしん)✤ AVCマルチメディアソフト(株)✤ TechBoosterの中の人。✤ Android全般。Linuxレイヤも見るよーな「なんでも屋」さん。✤ スキルマップ✤ Android : 難しいよねー✤ Web系 : 入門書れべる。AndroidHTML+CSS+JSLinuxM気質0 25 50 75 100最近、お腹周りがですね。。13年6月15日土曜日
  • 協力してもらった人✤ 名前✤ muchiki0226(木村 尭海)✤ AVCマルチメディアソフト(株)✤ TechBoosterの中の人。✤ 業務では✤ 家電連携Androidアプリケーション開発✤ 個人では✤ Androidアプリ開発✤ WindowsPhone7アプリ開発✤ サッカーロボット競技大会「RoboCup」に参加✤ Twitter:@muchiki022613年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でつないだらPush13年6月15日土曜日
  • 動画再生13年6月15日土曜日
  • サポートされるコーデック✤ Video✤ WebM✤ Ogg✤ MP4(H.264 AAC or MP3)✤ Audio✤ WebM✤ Ogg✤ WAVE13年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にはtypelistenerEventTypeを指定する。functionを指定するmouse touch タイミングmousestart touchstartmousemove touchmovemouseend 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✤ view13年6月15日土曜日
  • はいできた✤ アプリにアクティビティを登録することも可能✤ マニフェストに記述✤ コード上でアクティビティハンドラを登録✤ アクティビティ完了後の処理の実装が肝13年6月15日土曜日
  • まとめ✤ Eventを登録して、実装する形式は他プラットフォームを知っていれば受け入れやすい。✤ 第一歩目の壁は低い印象。✤ 実機接続系はまだまだ粗いところも?✤ 急にデバイスが認識しなくなった!✤ アプリが転送されないんだが。。。✤ 困ったときのWeb頼み。記事数はかなりある印象。✤ FirefoxOS専用のAPIとかはまだまだ??✤ 知識が足りなくて、UIの互換性ががが。✤ シミュレーターとPEAKで画面の大きさ違います。固定で大きさ突っ込んじゃダメ。13年6月15日土曜日