diff options
Diffstat (limited to 'files/ja/archive/b2g_os/quickstart')
3 files changed, 406 insertions, 0 deletions
diff --git a/files/ja/archive/b2g_os/quickstart/index.html b/files/ja/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..7688a15ac5 --- /dev/null +++ b/files/ja/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: 開発 +slug: Archive/B2G_OS/Quickstart +tags: + - Apps + - Quickstart +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p><span class="seoSummary">Open Web Apps のコーディングに関するクイックスタート情報です。</span></p> +</div> +<dl> + <dt> + <a href="/ja/Apps/Quickstart/Build/Intro_to_open_web_apps">Open Web Apps 入門</a></dt> + <dd> + Open Web Apps とは？ 通常の Web ページとどう違うのでしょうか？ なぜそれが重要なのでしょうか？ この記事はそうした質問などに答えることを目的としています。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/Your_first_app">初めの一歩</a></dt> + <dd> + この記事は、インストール可能な Open Web Apps の作成に求められる基本的段階と、通常の Web 開発をベースとした付加的知識について一通りの情報を提供します。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/Intro_to_Firefox_OS">Firefox OS 入門</a></dt> + <dd> + Open Web Apps を基盤とした Mozilla の新しいモバイルプラットフォーム、Firefox OS の紹介です。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/Intro_to_manifests">マニフェスト入門</a></dt> + <dd> + マニフェスト、アプリのホスティング、配信元、その他関連トピックに関して考えられるあらゆる質問への回答をまとめました。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/For_Web_developers">Web 開発者のアプリ開発</a></dt> + <dd> + あなたが Web 開発者なら、これまで開発してきたサイトと Open Web Apps がどう違うのか疑問に思うことでしょう。この記事ではそれについて説明します。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/For_mobile_developers">モバイル開発者のアプリ開発</a></dt> + <dd> + あなたがネイティブモバイルアプリケーション開発者なら、Open Web Apps がどんなメリットをもたらすのか、これまで開発してきたアプリとどう違うのか、疑問に思うことでしょう。この記事ではそれについて説明します。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/Developing_app_functionality">アプリ機能の開発</a></dt> + <dd> + このページは、あなたがアプリに組み込みたいと思われる様々な機能の種類について、関連情報へのリンクとともに解説します。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/Payments">決済</a></dt> + <dd> + ユーザに有料で Open Web Apps をインストールしてもらうための機能を開発するには？ ここでそのすべてを解説します。</dd> + <dt> + <a href="/ja/Apps/Quickstart/Build/App_tools">アプリツール</a></dt> + <dd> + このセクションの最後では、素晴らしい Open Web Apps の開発に役立つツールに関する詳しい情報へのリンクをいくつ家庭今日します。</dd> +</dl> diff --git a/files/ja/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html b/files/ja/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html new file mode 100644 index 0000000000..34b809813b --- /dev/null +++ b/files/ja/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html @@ -0,0 +1,89 @@ +--- +title: Open Web Apps と Web 標準 +slug: Archive/B2G_OS/Quickstart/Open_Web_apps_and_Web_standards +tags: + - Apps +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +<div class="note"> +<p><strong>注</strong>: クイックスタートの項目は、<a href="/ja/docs/Web/Apps/Quickstart">新しい、より集中的なクイックスタート記事</a> として更新され、従来のクイックスタート記事をすべて置き換えるものとなりました。この記事がより有益な情報源となり、古い一連の記事よりもより素早い学習体験を提供することを期待しています。</p> +</div> + +<p><img alt="" src="/files/4523/multidevices.png" style="height: 225px; width: 640px;"></p> + +<div class="summary"> +<p>この記事は、開発者、プロジェクトマネージャ、その他アプリの開発や配布に関わる役割を担いつつ、Open Web Apps についてより詳しく学びたいというすべての人にとって最適なスタート地点となることを意図して書かれています。Open Web Apps とその背景にある哲学の、簡単で高次元な概要を提供します。</p> +</div> + +<p>Open Web Apps は一般的な Web サイトや Web ページと本質的な違いはありません。いずれも HTML、CSS、JavaScript といった標準的でオープンな Web 技術を用いて開発され、Web ブラウザ経由でアクセスできます。主な違いは、端末にインストールしてオフラインでも動作させられる機能、そして、カメラ、アドレス帳、その他端末機能との相互作用を可能にする高度な API にアクセス可能であること、といった点が上げられるでしょう。さらに、それらはできる限りオープンな技術に基づいて開発されています。プラットフォーム間の技術実装に差異がある場合、各プラットフォーム向けの機能判別と適切なコード、機能が利用不可能な場合の巧みな対応策の組み合わせを通じて、どちらにも対応するよう努力が行われるべきです。</p> + +<h2 id="Advantages_of_Open_Web_Apps" name="Advantages_of_Open_Web_Apps">Open Web Apps の利点</h2> + +<p>Open Web Apps の利点を少し詳しく見ていきましょう。</p> + +<ul> + <li><strong>ローカルインストールとオフラインストレージ</strong>: Open Web Apps は端末上にインストール可能で、<a href="/ja/docs/Web/Guide/DOM/Storage">ローカルストレージ</a> や <a href="/ja/docs/IndexedDB">IndexedDB</a> といった API を活用してローカルデータストレージ機能を提供できます。さらに、オープンな Web 技術は、ネイティブアプリよりも格段にフットプリントが小さい傾向があり、更新があるたびに新しい完全なパッケージをインストールするのではなく通常は自動的に更新できます (ここでの例外は、更新時に完全に新しいパッケージが必要となるパッケージ型アプリです)。このためアプリは常時接続への依存度が低く、ネットワークが不安定な場合により利便性を発揮します。</li> + <li><strong>ハードウェアアクセス</strong>: Open Web Apps とともに提供されるメタデータは、端末ハードウェア機能の使用を可能にする特権 API へのアプリケーション許可設定を与えるために利用可能となっています。これは Web プラットフォームが従来享受できなかった利点のひとつです。</li> + <li><strong>壁に囲まれた庭からの脱出</strong>: モバイルプラットフォームにおけるノルマは、プロプライエタリな技術で書かれた「壁に囲まれた庭」にも例えられ、アプリはそれらのプラットフォーム内に閉じ込められてしまっています。スマートフォンは比較的高価であり、アプリの購入にはクレジットカードが必要となります。Open Web Apps は、文字通り軽量な Linux カーネル上で Firefox が動作しているだけの Firefox OS 端末の場合は特に、格段に安価なハードウェアでも動作させることが可能です。またそれらはオープンな Web 技術を用いて書かれおり、それは最も広く普及しているプラットフォームです。さらに、Firefox OS 端末は、ユーザがアプリの料金を前払いしたり電話料金に上乗せしたりできる課金システムも備えています。</li> + <li><strong>Open Web App ストア</strong>: ひとつ前の利点からの続きになりますが、(<a href="https://marketplace.firefox.com/">Firefox Marketplace</a> など) 既存のマーケットプレースでアプリをホストするか、あるいは完全に別の場所でホストするか選ぶことが可能です。これは開発者次第です。Mozilla では、より簡単な開発から、配布、直接的な顧客関係管理に至るまで、アプリ体験のあらゆる面をコントロールする権利を開発者の手に戻したいと考えています。また、アプリは一般的な Web ベースの体験と同じように検索できます。</li> +</ul> + +<p>以下の動画も Open Web Apps の一般的な利点と Firefox OS プラットフォーム向けの開発について取り上げています。</p> + +<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/RJJkFshnnVc?rel=0&html5=1"></iframe></div></div><p></p> + +<h2 id="The_Web_is_the_platform" name="The_Web_is_the_platform">Web はプラットフォーム</h2> + +<p>Firefox OS のようなプラットフォームにインストールされた形での Open Web App は単なるブックマークではなく、システムの正式な一部となっています。Open Web Apps はそうした大きな将来性を持っています。私たちはそれを逃すべきではない機会と捉えており、さもなければ Web は再度断片化してしまうかもしれないとも考えています。それを念頭に置けば、Open Web Apps (略して OWA) が標準化と Web の一部になることを意図したものであることが明らかでしょう。OWA は、もし成功すれば、最終的にすべてのブラウザ、OS、端末で動作するはずです。</p> + +<p>私たち Mozilla は、オープン Web に完全に支えられたこのアプリプラットフォームの開発に尽力しています。それは「Mozilla プラットフォーム」あるいは「Firefox プラットフォーム」となることを意図したものではありません。<strong>Web こそがプラットフォームなのです</strong>。私たちは一連のオープンな API と実装を開発し、ベンダーロックインなしに移植性のあるアプリがどう Web 上に存在できるかを示そうとしています。Facebook や Google Chrome など他の団体も Web に支えられたアプリプラットフォームに取り組んでいます。<a href="https://developers.facebook.com/docs/guides/canvas/">Facebook アプリ</a> は Facebook に組み込まれることを意図したものであり、また <a href="http://www.google.com/intl/ja/chrome/webstore/apps.html">Chrome アプリ</a> は Chrome OS 端末や Google サーバ向けに設計されています。Chrome アプリは Open Web Apps と最もよく似ています。アプリ標準は進化しており、当然のことながら多くの同じビジョンを共有していることから、私たちは Google Chrome チームと協力を続けていきます。すべての Web ベースのアプリプラットフォームには非常に大きな集結の可能性があり、私たちはあらゆるベンダーに対して適切な Open Web App API を開発する Mozilla の取り組みへの協力を呼びかけています。</p> + +<p>今のところ Open Web Apps を使うには Mozilla Firefox ベースのエンジン (「Web ランタイム」) が必要ですが、 これが常態化することは意図したものではありません。Open Web Apps プロジェクトの大部分はまだ計画段階であり、すべての機能をすべてのブラウザへ一度に実装することは不可能です。Open Web Apps の大部分は既に標準化されているものの、その他大部分はまだ流動的です。私たちは、Open Web Apps がすべての主要ブラウザで利用可能な標準機能となることを意図し望んでいます。</p> + +<p>そのため、MDN 内の Open Web Apps に関する記事を読むときは、今のところその情報の多くは Firefox 限定であるものの、将来的にうまくいけばすべてのブラウザ向けに Open Web Apps を開発できるようになるということを念頭に置いてください。</p> + +<h2 id="Web_standards" name="Web_standards">Web 標準</h2> + +<p>OWA の技術はひとつのパーツではなく、様々な技術を集めた傘のようなもので、その一部はまだ初期段階です。現時点で、OWA の一部パーツは標準化されています (HTML5、CSS、JavaScript、IndexedDB など)。その他のパーツはまだ標準化されておらず、そのため Mozilla の実装は Firefox やその他 Mozilla 技術固有のものとなっています。Mozilla のミッションは共有であり、またすべての人を力づけることであるため、この状況は一時的なものに過ぎません。私たちが、OWA のパーツがまだ標準化されていないことを OWA 関連の記事で明記しているのはそのためです。</p> + +<p>なお、Mozilla が使用していない OWA 関連の提案や潜在的標準も一部存在する可能性があります。</p> + +<h3 id="Intended_eventual_standards" name="Intended_eventual_standards">今後標準となる技術</h3> + +<p>様々な Web プラットフォーム上でまだ標準化されておらず、現時点でまだ Firefox 固有となっているパーツは以下の通りです。</p> + +<ul> + <li>アプリを定義する <a href="/ja/docs/Web/Apps/Manifest">OWA マニフェスト</a></li> + <li>アプリと連携する <a href="/ja/docs/Web/Apps/JavaScript_API">完全な OWA API</a></li> + <li>電話、位置情報などの機能にアクセスする <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a>。状況報告は <a href="http://arewemobileyet.com/">arewemobileyet.com</a> を参照してください。</li> + <li>ユーザデータと連携する <a href="/ja/docs/Mozilla/Persona">個人認証システム (Persona)</a></li> + <li>アプリ内課金やあらゆるマーケットプレイスからのアプリの購入を容易にする <a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a></li> + <li>あらゆる端末上で有料アプリを検証し、あらゆるマーケットプレイスでアプリを販売できるようにする <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA レシート</a></li> +</ul> + +<h3 id="Marketplace" name="Marketplace">Marketplace</h3> + +<h4 id="Buy_Once.2C_Run_Everywhere" name="Buy_Once.2C_Run_Everywhere">一度購入すればどこでも動く</h4> + +<p>Mozilla は当初から、ユーザが一度購入すればすべての HTML5 対応端末で実行できるようなアプリシステムを開発してきました。Mozilla はまもなく <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">初の Firefox OS 搭載スマートフォンを展開</a> する予定ですが、それはアプリを実行できる端末のひとつに過ぎません。<a href="https://marketplace.firefox.com/">Firefox Marketplace</a> からアプリを購入した場合、システムは端末上にレシートをインストールします。<a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">レシート</a> は、Marketplace の公開鍵とその検証サービス URL にリンクしたメタデータを含む JSON Web トークンです。アプリは起動時にレシートを検証できますが、端末上のレシートは Firefox Marketplace に縛られていないという点に注意してください。レシートは単に暗号化技術によって検証可能な購入証明なのです。レシートの仕様に従えば誰でも Open Web Apps を販売できます。<strong>アプリを購入する際、それは Open Web Apps システムに対応しているあらゆる端末間で持ち運び可能であることが想定されています</strong>。</p> + +<p>Mozilla はあらゆる HTML5 対応端末で Open Web Apps を実行するのに必要なインフラを開発しています。<a href="http://www.mozilla.jp/firefox/android/features/">Android 版 Firefox</a> ではアプリをインストールして実行できます (<a href="http://nightly.mozilla.org/">Nightly ビルド</a> で今すぐ試せます)。インストールしたアプリのアイコンは、通常の Android アプリのようにホーム画面へ追加されます。Firefox を使えばアプリを Windows、Mac、Linux のデスクトップ上でも実行できます (今のところ <a href="http://nightly.mozilla.org/">Nightly ビルド</a> のみ対応)。現時点では Firefox の特定バージョンが必要ですが、Open Web Apps システムは最終的にすべての主要ブラウザによって一連の標準技術として対応されることを想定したものです。Mozilla は当初からすべての主要な HTML5 対応ブラウザをデモの実行環境に含めてきました。このホストされている JavaScript <a href="https://apps.persona.org/include.js">シム</a> を見てみれば、Firefox 以外のブラウザでアプリプラットフォームに対応する方法の考え方が分かるでしょう。</p> + +<p>将来的には Open Web Apps システムは端末を越えた <a href="http://mozilla-services-docs.readthedocs.org/en/latest/aitc/">インストール済みアプリの同期</a> に対応する予定です。レシートは移動可能であることから、必要なら自分自身でそれを同期することもできます。念のために言えば、無料の Open Web Apps は通常の Web サイトと変わらないため、いつでもあらゆるブラウザで実行できます。ただし、アプリによっては、すべてのプラットフォームで実装されていない新しい <a href="https://wiki.mozilla.org/WebAPI/">モバイル固有の WebAPI</a> を使っている可能性もあります。</p> + +<p>以下の動画は、オープンなマーケットプレースと、Web を通じたオープンなアプリ発見アプローチの利点について、その概要を分かりやすく解説しています。</p> + +<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/QCH_ncCrZfE?rel=0&html5=1"></iframe></div></div><p></p> + +<h3 id="WebPayment_API" name="WebPayment_API">WebPayment API</h3> + +<h4 id="Commerce_For_Apps" name="Commerce_For_Apps">アプリの商取引</h4> + +<p>iOS や Android といったモバイルアプリプラットフォームが成功した背景のひとつには、それらがモバイル課金を通じて新しいビジネスモデルを非常に簡単に試せるようにしたという点が挙げられるでしょう。そうしたモデルはまだ成長を続けていますが、商取引は、現時点ではおそらく、デスクトップ Web 上ではぎこちなく、一方モバイル上ではより自然なものに見えるでしょう。具体的には、何かを電話料金と併せて課金することは、既にそれに電話からアクセスしている場合、非常に便利です。Firefox OS の展開に伴い、アプリエコシステムは <a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a> を通じたアプリの購入とアプリ内課金に対応します。商取引への対応はアプリプラットフォームの成長に不可欠です。なお、<strong> 提案されている課金 API の使用は完全に任意です</strong>。Mozilla はアプリが独自のアプリ内課金システムを使うことを妨げるようなことはしません。</p> + +<h2 id="See_also" name="See_also">関連記事</h2> + +<ul> + <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a> - Kumar McMillan (この記事の内容の多くを借用したブログ記事)</li> + <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a> - Paul Irish</li> +</ul> diff --git a/files/ja/archive/b2g_os/quickstart/初めてのアプリ/index.html b/files/ja/archive/b2g_os/quickstart/初めてのアプリ/index.html new file mode 100644 index 0000000000..3a873f736f --- /dev/null +++ b/files/ja/archive/b2g_os/quickstart/初めてのアプリ/index.html @@ -0,0 +1,268 @@ +--- +title: 初めてのアプリ +slug: Archive/B2G_OS/Quickstart/初めてのアプリ +tags: + - Apps + - Guide +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<div class="note"> +<p><strong>注記</strong>: Quickstart セクションは新しく、<a href="/ja/Apps/Quickstart">Firefox OS アプリの基礎</a> にフォーカスしたものに更新されていて、以前の Quickstart 記事とは置き換わっています。古い記事よりも使いやすく学びやすくなったドキュメントになっているでしょう。</p> +</div> + +<article class="brush: js"> +<div class="summary"> +<p>Open Web Apps は、Web 開発者が何年も望んでいた HTML / CSS / JavaScript だけで作られたインストール可能なアプリに対応しているクロスプラットフォーム (Open Web Apps のための Firefox OS などの) を提供します。<span class="seoSummary">このガイドは、素晴らしいアプリを作成するために基本アーキテクチャですぐに動作させる方法とビルド手順を紹介します。</span></p> +</div> + +<p>このガイドに沿って作業したい場合、<a href="https://github.com/chrisdavidmills/mdn-app-template">クイックスタートアプリテンプレート</a> をダウンロードしてください。これに含まれているものについての詳細は、<a href="/ja/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">アプリテンプレート</a> ガイドをご覧ください。</p> + +<h2 id="アプリ構造">アプリ構造</h2> + +<h3 id="パッケージ型_vs._ホスト型アプリ">パッケージ型 vs. ホスト型アプリ</h3> + +<p>パッケージ型とホスト型の 2 つの Open Web Apps のタイプが存在します。パッケージ型アプリは、アプリケーションのすべてのアセット (HTML / CSS / JavaScript / 画像 / マニフェストなど) が含まれる zip ファイルです。ホスト型アプリは、与えられたドメインでサーバー上から起動するアプリです。両方のアプリのタイプはマニフェストを利用します。Firefox Marketplace でアプリが一覧に表示される際に、アプリは zip ファイルとしてアップロードするか、ホスト型アプリとして存在する URL が提供する必要があります。</p> + +<div style="width: 480px; margin: 0 auto;"> +<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/Q7x-B13y33Q?rel=0&html5=1"></iframe></div></div><p></p> + +<div class="video-caption"> +<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> +</div> +</div> + +<p>このガイドの目的は、<code>localhost</code> アドレスに存在するホスト型アプリを作成することです。アプリを Firefox Marketplace に表示する準備ができると、パッケージ型もしくは、ホスト型として起動するかを選択することができます。</p> + +<h3 id="アプリマニフェスト">アプリマニフェスト</h3> + +<p>すべての Firefox アプリはアプリのルートに配置する manifest.webapp ファイルが必要です。<code><a href="/ja/Apps/Manifest">manifest.webapp</a></code> はアプリのバージョン、名前、説明、アイコン、ロケール、インストールすることのできるドメインなど多くの重要な情報を提供します。必須項目はアプリの名前と説明だけです。アプリテンプレート内にある簡単なマニフェストの例は以下のようなものになります:</p> + +<pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + +<div style="width: 480px; margin: 0 auto;"> +<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/dgAUgHQOm8M?rel=0&html5=1"></iframe></div></div><p></p> + +<div class="video-caption"> +<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> +</div> +</div> + +<p> </p> + +<p>基本的なマニフェストは整いました。マニフェストに関するもっと詳しい情報は <a href="/ja/Apps/Manifest">App Manifset</a> の記事をご覧ください。</p> + +<h2 id="アプリのレイアウトと設計">アプリのレイアウトと設計</h2> + +<p>様々な端末上で画面解像度が増えるにつれ、レスポンシブデザインはますます重要になっています。アプリのメインターゲット端末が Firefox OS のようなモバイルプラットフォームでも、他の端末でも同じようにアクセスできます。<a href="/ja/docs/Web/Guide/CSS/Media_queries">CSS メディアクエリ</a> を使用すると、レイアウトを端末に適応することができます。以下に、スケルトン CSS の例を示します:</p> + +<pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + +<p>多くの JavaScript と CSS のフレームワークは、レスポンシブデザインとモバイルアプリ開発に役立ちます(<a href="http://getbootstrap.com/">Bootstrap</a> など)。アプリや開発スタイルに最も適したフレームワークを選んでください。</p> + +<h2 id="Web_API">Web API</h2> + +<p>JavaScript API は端末と同様に次々と作成され拡張されています。Mozilla の <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> は数十もの標準モバイル機能の JavaScript API へ影響を与えました。<a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> のページで、端末のサポートとステータスの一覧を確認できます。以下に例のような JavaScript の機能検知はまだベストプラクティスです:</p> + +<pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + +<p>以下の例では、端末のバッテリ状態の変化に基づいて <code><div></code> の表示スタイルが変更されます。</p> + +<div> +<pre class="brush: javascript">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + +<p>上記のコード中では、<a href="/ja/docs/Web/API/window.navigator.battery">Battery API</a> を一度サポートしているか確認してから、<code>chargingchange</code> <code>や</code> <code>levelchange</code> <code>のリスナーを追加して、要素の表示を更新しています。以下のクイックスタートテンプレート追加して、動作しているか確認することが出来ます。</code></p> + +<p><a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> のページで、最新のデバイス API のステータスを確認してください。</p> + +<h3 id="インストール_API_機能">インストール API 機能</h3> + +<p>クイックスタートアプリのテンプレートサンプルでは、アプリを標準的な Web ページとして表示したときに、クリックできるインストールボタンを実装していています。クリックすると Firefox OS にアプリとしてインストールします。ボタンのマークアップに特別なことはしていません:</p> + +<pre class="brush: html"><button id="install-btn">Install app</button></pre> + +<p>このボタンの機能はインストール API (install.jsをご覧ください) を使用して実装されています:</p> + +<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + +<p>簡単に何をしているのかを見ていきます。</p> + +<ol> + <li>インストールボタンを参照して、<code>button</code> 変数にそれを格納します。</li> + <li><code>navigator.mozApps.checkInstalled</code> を使用して、<code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> <code>の</code>マニフェストファイルに定義されたアプリが既に端末にインストールされているかを確認します。この検証結果は <code>installCheck</code> <code>変数へ格納します。</code></li> + <li>確認が成功したら、成功イベントが発火し、<code>installCheck.onsuccess = function() { ... }</code> <code>が実行されます。</code></li> + <li><code>installCheck.result</code> <code>が存在するかを</code> <code>if</code> <code>文で確認します。</code>もし存在する場合、アプリはインストール済みを意味するため、ボタンを非表示にします。インストールボタンは既にインストール済みであれば不要です。</li> + <li>アプリがインストールされていない場合、ボタンクリック時に <code>install()</code> <code>関数が</code>実行されるように、ボタンにリスナーを追加します。</li> + <li>ボタンがクリックされ <code>install()</code> <code>関数が実行されると、</code><code>manifest_url</code> <code>と呼ばれる変数にマニフェストファイルのロケーションを格納し、</code><code>navigator.mozApps.install(manifest_url)</code> <code>を使用してアプリをインストールして、インストールの参照を</code> <code>installLocFind</code> <code>変数へ格納します。</code>インストールも成功 / 失敗のイベントを受け取ることができるので、成功 / 失敗の時のアクションを実行することが出来ます。</li> +</ol> + +<p>最初にインストール可能な Web アプリに遭遇した時、<a href="/ja/Apps/Apps_JavaScript_API">API の実装状況</a> を検証したいでしょう。</p> + +<div class="note"> +<p>注記: インストール可能な Open Web Apps は "1つのオリジンに対して1つのアプリ" のセキュリティポリシーがあります。基本的に、1つのオリジンで1つ以上のインストール可能なアプリをホスティングすることはできません。これはちょっとトリッキーなテストになりますが、アプリごとのに異なるサブドメインを作ったり、Firefox OS シミュレータを使ってテストをしたり、デスクトップにインストール可能なWeb Apps をインストールすることになりますが、Firefox Aurora/Nightly のインストール機能を使うなどの回避手段は存在します。<br> + オリジンについての更なる情報は<a href="/ja/Apps/FAQs/About_app_manifests">アプリマニフェストについてのFAQ</a> をご覧ください。</p> +</div> + +<h2 id="WebRT_API_(パーミッションベース_API)">WebRT API (パーミッションベース API)</h2> + +<p>利用可能な WebAPI は数多くありますが、機能を有効にするためのパーミッションが必要です。アプリは以下のように <code>manifest.webapp</code> <code>ファイルにパーミッションを登録しなくてはなりません。</code></p> + +<pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + +<p>パーミッションには、以下のように3つのレベルが存在します。</p> + +<ul> + <li>Normal — アクセスパーミッションを記載する必要のないAPI群</li> + <li>Privileged — アプリ開発者が自身のアプリのためにマニフェストファイルへパーミッションを記載していたり、信頼されたソースを通して配布している場合に利用可能なAPI群</li> + <li>Certified — 電話やメッセージサービスなどの端末のクリティカルな機能を制御するAPI群。これらは一般的にサードパーティーが開発する時には利用することが出来ません。</li> +</ul> + +<p>パーミッションレベルの更なる情報については、<a href="/ja/Apps/Packaged_apps#Types_of_packaged_apps">パッケージ型アプリの種類</a>を参照してください。どのAPIがパーミッションが必要で、どのパーミッションが必要なのかは、<a href="/ja/Apps/App_permissions">アプリの許可設定</a>をご覧ください。</p> + +<div class="note"> +<p>Firefox OS シミュレータではすべてのWeb API は実装されていない点については注意してください。</p> +</div> + +<h2 id="ツールとテスト">ツールとテスト</h2> + +<p>モバイル端末をサポートするときテストは非常に重要になってきます。インストール可能なOpen Web Apps のテストのオプションは多く存在します。</p> + +<h3 id="Firefox_OS_シミュレータを含むWebIDE">Firefox OS シミュレータを含むWebIDE</h3> + +<p><a href="/en-US/docs/Tools/WebIDE">WebIDE</a> と呼ばれるテストツールの新参者があります。このツールはデスクトップ版Firefox とUSB 経由の互換端末(または、Firefox OS シミュレータ)と接続し、アプリを直接端末へインストールしたり、アプリの検証をしたり、端末上で動作させながらデバッグすることが出来ます。</p> + +<h3 id="ユニットテスト">ユニットテスト</h3> + +<p>ユニットテストは、異なる端末でのテストするときやビルドするときにとても価値のあるものになります。 jQuery の<a href="http://qunitjs.com/">QUnit </a>はクライアントサイドのテストユーティリティとして人気がありますが、あなたが望むほかのテストツールを使っても構いません。</p> + +<h3 id="端末にFirefox_OS_をインストールする">端末にFirefox OS をインストールする</h3> + +<p>Firefox OS はオープンなプラットフォームなので、あなたの端末にFirefoxOS をインストールしたり、ビルドするためのコードやツールは入手可能です。ビルドとインストール説明や、同じように端末へインストール可能かどうかの注意書きについては、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a> から見つけ出すことが出来ます。</p> + +<p>Firefox OS 開発者プレビュー専用のデバイスは入手可能です。更なる情報については我々の<a href="https://marketplace.firefox.com/developers/dev_phone">開発端末ページ</a>をご覧ください。</p> + +<h2 id="アプリの提出と公開">アプリの提出と公開</h2> + +<p>一度アプリが完成すると、標準的なウェブサイトまたはアプリ(更なる情報は、<a href="/ja/Marketplace/Options/Self_publishing">アプリの自主配布</a>をご覧ください)としてホスティングすることが出来ます。または、<a href="https://marketplace.firefox.com">Firefox マーケットプレイス</a>へ<a href="https://marketplace.firefox.com/developers/submit/app/manifest">提出</a>することが出来ます。アプリのマニフェストは検証され、どの端末でアプリをサポートするかを選択することが出来ます(例：Firefox OS、デスクトップ版Firefox、モバイル版Firefox、タブレット版Firefox)<br> + 一度検証されると、アプリについての追加情報(スクリーンショット、説明、価格など)を加えることが出来ます。そして、公式に提出されたアプリとしてマーケットプレイスにリスト化されます。一度承認を得ると、アプリは全世界から購入・インストールすることが可能になります。</p> + +<h3 id="マーケットプレイスと表示情報についての更なる情報">マーケットプレイスと表示情報についての更なる情報</h3> + +<ol> + <li><a href="/ja/Apps/Submitting_an_app">Firefox OS マーケットプレイスにアプリを提出する</a></li> + <li><a href="/ja/Apps/Marketplace_review_criteria">マーケットプレイスのレビュー基準</a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">アプリ提出までのビデオ</a></li> +</ol> +</div> +</article> |