Experts.jp日本に、もっとエキスパートを。(5)こんにちは、清水です。Marketplaceの公開に関する講演をさせていただきました。今回はその講演内容のうち、アプリ作成に関する部分を重点的に説明します。OSの特徴は、ユーザの目にする部分は全てHTML5で実装されている点にあります。音楽アプリ、カメラ、ギャラリーといったプリインストールされているものはもちろん、ダイヤラーや、SMS、スマホのロックスクリーンや、ホーム画面といったシステムよりのアプリもすべてHTMLとJavaScript、CSSだけで実装されています。OSのアプリ開発に必要なことはただ一つ、Firefoxのインストールです。開発者アカウントの作成も、ディベロッパープログラムへの登録も、専用SDKのインストールも必要ありません。FirefoxにはWebIDEという機能があります。Editionの利用をお勧めします。Mozillaの提供する開発者向けの機能をいち早く利用できる点が特徴です。Editionは、リリース版とは異なる場所にインストールされます。初回起動時に開発用のプロファイルを作成するため、リリース版との併用が可能です。Syncを利用して同期しておけば、ブックマークや履歴、パスワードは通常利用しているものと共有できます。Worldしてみましょう。起動すると次のような画面が表示されます。画面の左上にある「アプリを開く」をクリックすると展開されるメニューから「新規アプリ」を選びます。選ぶとテンプレートの選択を求められます。「HelloWorld」テンプレートを選び、プロジェクト名にアプリの名前を入力して、「OK」ボタンを押すとアプリのテンプレートが作成されます。シミュレータのインストール次にシミュレータをインストールします。シミュレータはブラウザのアドオンとして提供されています。OSのバージョンに合わせたシミュレータをインストールします。2.0で動作しています。2.0のシミュレータをインストールするとよいでしょう。作成したテンプレートを、インストールしたシミュレータ上で実行します。WebIDE上部にある「実行ボタン」を押すと、実行できます。実行すると、次のような画面が表示されます。このテンプレートでは、起動時にindex.htmlが表示されます。これを次のように修正します。defer></script></head><body><h1>こんにちは世界!</h1></body></html>また、app.jsを次のように修正すると、アプリのロードが終了した時点でアラートダイアログが表示されます。World!");});WebIDEの実行ボタンをもう一度押すと、これらの修正が実行中のアプリに反映されます。アプリの構造テンプレートに従って作成されるファイルは以下のような構造をしています。HTMLやJavaScriptに加えて、”manifest.webapp”というファイルがあります。Maretplaceにアプリを登録時に参照されます。manifest.webappの実体は次のようなJSONファイルです。ご覧いただくのが確実ですが、上記の例にある項目は以下のような意味を持ちます。人間が読むための、アプリ名。人間のためのアプリ説明文。アプリ起動時に読み込まれるHTMLファイルのパス。128ピクセルx128ピクセルのアイコンは必須。特権アプリの場合は、privilegedと記入する。OSアプリの最小構成となります。アプリは、すべてJavaScriptで記述します。カメラやGPSといったセンサー類へのアクセスや、バイブのコントロール、SDカードへのデータ保存などは、HTML5で利用できるAPIを通して行います。利用できるAPIの一部分を挙げると、以下のようになります。APIを利用して、SDカード中のファイルをすべてコンソールに出力するプログラムは、次のようになります。API音楽のライブラリや、写真のギャラリー、カメラでの撮影といった機能を実装する方法は2つあります。1つは上記にあげたAPIを利用して1から機能を作る方法、もう1つはWebActivitiesを利用して他のアプリを呼び出す方法です。標準でインストールされている音楽アプリや、ギャラリー、カメラアプリは、「ライブラリから音楽の選択する」「ギャラリーから写真を選ぶ」「写真を撮る」といったアプリの機能の一部を他のアプリから利用できるようになっています。Cameranは写真にフィルタや効果を追加するアプリなのですが、自分で写真撮影や管理機能を実装しているのではなく、インストールされている他のアプリの提供する「画像を選ぶ機能」を利用しています。他のアプリが提供している機能を、自分のアプリから呼び出して利用するためのAPIが、WebActivitiesです。他のアプリが提供するJPEG形式の画像を選択する機能の呼び出しは、次のようにWebActivitiesを利用して実現できます。retrieved");};尚、WebActivitiesを利用して呼び出せるのは機能の名前であって、アプリではありません。おなじ名前の機能が複数のアプリから提供されている場合、どのアプリを利用するかはユーザの選択に任されます。アクティビティをご覧ください。上記のAPIすべてを、アプリから利用できるわけではありません。強力なAPIの利用には、それに見合った権限が必要となります。OSのアプリは権限に応じて次の3つに分類されます。App)と呼ばれていたアプリは、キャリアもしくはそれに準じるベンダしか作成を許されていません。そのため私たちが作成するアプリは、一般アプリもしくは特権アプリのどちらかになります。権限と、利用できるAPIの対応関係は、OSのバージョンによって異なります。対応関係はWebIDEの「許可設定一覧」で確認できます。許可設定一覧は以下のようになっています。利用可能だが利用時にユーザに対して通知されることを表しています。APIを利用するためには、アプリを特権アプリとしなければならないことがわかります。OSアプリの概要でした。これを踏まえて、ボイスレコーダーアプリの作成を例に、アプリの作成例をみてみましょう。今回作成するアプリは次のような1画面のアプリとなります。画面をタップすると録音を開始し、もう1度のタップで録音を終了します。ファイルとして音楽ライブラリに保存されるものとします。gistで公開しています。こちらもご利用ください。今回は次のAPIを利用します。APIを利用するためには、アプリの種別を特権アプリとする必要があります。いくつかのAPIを利用するためには、manifest.webappのpermissionsの項目に記述を行う必要があります。manifest.webappを以下のように記述します。permissionsの項目が、それぞれ設定されていることを確認してください。今回のアプリでは次のものを利用しました。以下のようになっています。ここではマイクからの入力ストリームの取得、録音、そしてファイルへの出力部分について解説します。マイクからの入力ストリームの取得方法です。つぎのようにGetUserMediaを使っ、てマイクからの入力を扱うための入力ストリームを取得できます。=>{console.log(error);});この実行が成功すると、コールバック関数が呼ばれます。取得した入力ストリームは、関数の第1引数として与えられます。いう関数が呼ばれます。この関数は入力ストリームを利用する様々なオブジェクトの初期化を行います。オブジェクトがあります。初期化は次の様に行われています。function(){console.log(this.error.name);};}};};MediaRecorderオブジェクトは、その名の通りメディアデータの記録を行うオブジェクトです。startメソッドを実行すると記録を開始し、stopメソッドを実行すると記録を停止し、記録したデータを用意します。データの用意できると、dataavailableイベントが発生します。用意されたデータは、dataavailableのdata属性でBlobとして参照できます。APIのaddNamedメソッドを使って保存をしています。ここで利用しているstorageオブジェクトは次の様に作成されています。navigator.getDeviceStorage("music");これは音楽データ用のストレージを取得しています。取得できるストレージの種類は次の4種類です。これ以外にもappsというアプリ用ストレージがありますが、これはシステムアプリからのみアクセスが許可されており、我々の作成するアプリは操作できません。汎用データストレージ取得したストレージに対してメソッド呼び出しを行うと、DOMRequestオブジェクトを返します。このオブジェクトのonsuccess属性やonerror属性に関数を登録することで、その操作が成功したか、失敗したかを知ることができます。上記の例では単に成否をログに出力しているだけですが、エラー処理が必要な場合などは、こちらにその処理を記述することになります。OSアプリの構成と作成方法について概観しました。OSに向けたアプリの作成についてまとめると、次の3点になるかと思います。CSS、JavaScriptといったWeb標準技術のみで、ハードウェアへアクセスし、コントロールするようなアプリが作れます。ブラウザエンジンがOSに組み込まれているため、作成したアプリのコンパイルやビルドが必要ありません。Webページを作るように、修正したアプリを再読み込みして即座に実行できます。本文中では解説しませんでしたが、実機へのアプリの転送やデバッグもシミュレータと同様の手順で行えます。OSで、みなさんも作る自由を謳歌してください。当日のセッションの動画・スライドは、こちらからご覧ください。