Fx0 アプリ開発 TIPS au Firefox OS Project! 2015.5.29 Agenda Fx0で開発してみる! Creator Showcaseの使い⽅方 Open Web Board! 2 Fx0 3 Fx0とは Firefox OS搭載の国内初スマートフォン Quad Core LTE搭載 Firefox OS 2.0 現状最高スペックのFirefox OS Phone Cut & Paste iWnn for! Firefox OS High! Performance 4 Application キャリアメール! webメール Google カレンダー共有 NAVITIME Facebook Twitter LINE 5 用意するもの下記を用意して下さい・PC（Windows, mac, Linux)! ・Firefoxブラウザ（なるべく最新版）! ・Fx0 6 1. WebIDEの起動ツール >> web開発 >> WebIDE と選択 ! 7 2. シミュレータのインストール ADB Helper アドオン! Firefox OS シミュレータをインストール（Fx0は2.0ベースです）! 8 3. Fx0側の準備開発者メニュー >> USB経由のデバッグ >> ADBと開発ツールに設定! 9 4. Fx0につなぐ PCにFx0をUSB経由で接続! ※端末がロック画⾯面になるとWeb IDEから⾒見見えなくなるので注意！! 詳しくはこちら→ http://opensource.kddi.com/fx0 10 準備完了！! さぁ、何つくる？ Lock Screen Customize ロック画⾯面で動作するFx0オリジナルアプリ! http://au-fx.kddi.com/creators/#tool_contents_23 12 Lock Screen Specification Fx0向けの独自開発機能! ロックスクリーン画面でアプリの起動が可能！! プリインロックアプリ人気のロックアプリこれ ※ロックスクリーン設定画面移行時に、サーバにアクセスしランキングを取得 webっぽい！! 13 Lock Screen apps p ロックスクリーン向けに追加開発が必要! Lock Screen用のフラグを立てると、ロック画面から呼び出せる! ・ホーム画面からは参照不可! ・ホームキー長押、エッジジェスチャーでのアプリ切替不可（アプリの起動は一つのみ）! ・初期設定ではタップ操作不可（開発者オプションで可能）! ・文字入力不可! ・APIに制限あり TwitterのTL表示やお気に入りの画像表示など 14 hello world on Lock Screen WebIDEで新規アプリ→ hello world! manifestファイルを修正! 15 その前に！ Creator Showcase Lock Screen アプリを! 実機にインストールするには! Creator Showcaseへの! アップロードが必須！ Creator Showcase Creator Showcaseにアクセスし、アカウントを作成する! http://showcase.kddi.com! Creator Showcaseはアカウント/アプリに対し承認機能を備えています。! まずはアカウントがシステムに承認されないと、アプリ共有ができません。 19 Creator Showcaseのお作法フッダ >> ご利用についてを見て下さい! ! マニフェストファイルに必要な情報! ・version （命名規則あり）! ・role （lock screen appsかどうかのフラグ）! ・csp（Content Security Policy）項目! ! ! ミニマニフェストファイルの用意! ・name（必須）! ・developer（推奨）! ・package_path （必須） 20 WebIDEに戻ります。! マニフェストファイルの修正下記を追記! ・version : “ xxx.yy.zz ”! ・role : lockscreen に指定 ! ・csp（Content Security Policy）! 22 CSPについて詳細はMDNよりご確認ください。! これ! コピペするとハマります•･•･•･対応済み（詳細は次ページ） 23 大事な大事な「 ‘」 2015年 6月対応済み MDNと同様の標準的な記載で、CSPチェックを行う実装となりました MDNからコピペすると “csp” : “default-src ＊; ∼ ”! ! Creator Showcase向けには･･･ “csp”: “ ‘default-src’ ＊; ∼” CSPの指定では、項目名もクオートで囲む必要がある! ※MDNの記載例はクオートなしなので注意！! 24 Mini Manifest File 下記を記載! ・name（必須。manifest fileの内容と同一であること）! ・package_path （必須。パスは適当でおK サーバ格納時に上書きされます）! ・developer（推奨。記載する場合はmanifest fileの内容と同一であること）! ! 25 Upload to Creator Showcase！画像を登録（別途用意）全ファイルをzipに固める! mini manifest fileを指定! Application（LockScreen)! を指定! 26 Upload to Creator Showcase!! フリーコメントを入力可能画像のアップロードも可能非公開（自分のみ参照可能）! 公開には承認依頼が必要! （審査が入ります）! 27 Upload to Creator Showcase!!! 登録完了！ 28 Fx0で確認する Fx0でサイトにアクセス! ログイン >> マイページ! これ 29 Fx0でhello world ロック画面でhello worldが! 動きました！! ! ロック画面のハック! 色々試してみて下さいね。! 30 開発にあたって 1.  Lock Screen appの権限! web権限で作成する（Privileged / certified権限では、showcaseにアップできません）! 2.  Lock Screen appの種別! Package型として作成する（Host型ではshowcaseからダウンロードできません）! 3.  タップ操作! デフォルトではタップ操作不可。開発者メニューよりタップ操作を可能にできます。! 4.  文字入力! 文字入力不可（ソフトウェアキーボードを呼び出すことができません）! 5.  Lock Screen appsの終了動作について! Lock Screen appは、ロック画面において唯一つのみ起動。アプリの切替は出来ません。! なので、アプリ内に自分で自分を殺せるような仕組みを入れないで下さい。! ! 31 まとめ WebIDEがあれば、簡単にFirefox OS appを作成することが可能！! ! ! 作ったアプリを、ロック画面に設定することが可能！! ただし、細かい条件が結構あるのでガイドラインを参照のこと! →http://au-fx.kddi.com/creators/#tool_contents_23 ! ! Lock Screen appを Fx0に入れるには、Creator Showcaseへの登録も必要！! ただし、細かいお作法があるので、ガイドラインを参照のこと! →http://showcase.kddi.com/csc/howto! ! 32 Contact Firefox OS Portal Site! http://au-fx.kddi.com! Twitter (Follow Me!) ! @au_fxos! 33 Webの最先端へご静聴ありがとうございました 34