initial commit

2 files changed, 463 insertions, 0 deletions

diff --git a/files/ja/archive/b2g_os/add-ons/developing_b2g_os_add-ons/index.html b/files/ja/archive/b2g_os/add-ons/developing_b2g_os_add-ons/index.html
new file mode 100644
index 0000000000..f554cd6126
--- /dev/null
+++ b/files/ja/archive/b2g_os/add-ons/developing_b2g_os_add-ons/index.html
@@ -0,0 +1,357 @@
+---
+title: B2G OS のアドオンを開発する
+slug: Archive/B2G_OS/Add-ons/Developing_B2G_OS_add-ons
+tags:
+  - Add-ons
+  - Apps
+  - CSS
+  - Extensions
+  - Firefox OS
+  - JavaScript
+  - Manifest
+  - cuztomizations
+translation_of: Archive/B2G_OS/Add-ons/Developing_B2G_OS_add-ons
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/ja/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<p class="summary">アドオンは Web ブラウザの世界ではよく知られたコンセプトであり、Firefox OS にもアドオンの仕組みが導入されることとなりました。アドオン 1 つでアプリ 1 つ、または複数、もしくは全アプリを拡張できます。この記事では自分で Firefox OS アドオンを作るためのガイドやヒント、Tips やその他の有益な情報を提供します。</p>
+
+<div class="note">
+<p><strong>脚注</strong>: Firefox OS アドオンは Chrome/Blink アドオンの基礎となるWebExtensionsの拡張機能モデルを利用しており、 互換性と機能の点においてアドオンの作成に多くの利点をもたらします。より詳細については鋭意執筆中の <a href="/Add-ons/WebExtensions">WebExtensions ドキュメント</a>をご確認ください。</p>
+</div>
+
+<div class="warning">
+<p><strong>重要</strong>: アドオンは Firefox OS 2.5 以降でのみ使用可能であり、また拡張機能をデバッグするための最新の WebIDE サポートを得るために新しいビルドを端末にインストールする必要があります。Firefox OS アドオンの開発を始める前に、開発用端末が最新の利用可能なビルドにアップグレードされているかご確認ください。</p>
+</div>
+
+<h2 id="アドオンの開発">アドオンの開発</h2>
+
+<p>アドオンはJavaScript, CSSやその他のファイルからなるアプリパッケージです。ただし、アドオンは独立したアプリとしては動作しません。アドオンのマニフェストはどのアプリに アドオンを適用するのかを定義するための特別な機能を含んでいます。アプリがアドオンのインストールされた Firefox OS 端末から起動されるとき、アドオンは <a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#manifest.json">manifest.json</a> のフィールドで指定されたパターンにマッチするアプリに注入されます。</p>
+
+<p>Firefox OS アドオンは、<a class="external external-icon" href="https://wiki.mozilla.org/WebExtensions">WebExtensions API</a> を利用して開発する新しい Firefox アドオン群と同様の構文と構造になっています。WebExtension API は <a class="external external-icon" href="https://developer.chrome.com/extensions">Chrome extensions</a> のモデルをベースにしています。</p>
+
+<h3 id="簡単な例">簡単な例</h3>
+
+<p>Firefox OS アドオンの基本について説明するために、クリックすると消えるバナーをシステムアプリに追加する簡単なサンプルを紹介します。</p>
+
+<p><img alt="firefox os screenshot showing add-on banner" src="https://mdn.mozillademos.org/files/11445/add-on-screenshot.png" style="display: block; height: 445px; margin: 0px auto; width: 250px;"></p>
+
+<p>これはとても基本的でありふれた例ですが、開発を始めるには充分なものです。<a class="external external-icon" href="https://github.com/mdn/simple-addon">Github 上のサンプルコード</a>を確認のうえ、ローカル環境に clone もしくは <a class="external external-icon" href="https://github.com/mdn/simple-addon/archive/gh-pages.zip">ZIP をダウンロード</a>し、WebIDE で自分の Firefox OS 端末にアドオンをインストールしてみてください。(<a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#Testing_your_add-on_using_WebIDE">Testing your add-on using WebIDE</a> セクションもご覧ください。) アドオンはいずれ <a class="external external-icon" href="https://marketplace.firefox.com/">Firefox Marketplace</a> で配布できるようになります。</p>
+
+<p>Firefox OS アドオンはここに列挙したこと以上にたくさんのことができることに注意してください。<a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> のドキュメントにはこれから情報が充実していきます。</p>
+
+<h2 id="Firefox_OS_アドオンの構造">Firefox OS アドオンの構造</h2>
+
+<p>このセクションではサンプルアドオンの内容の各項目を順に説明していきます。ディレクトリ構成は以下のようになっています:</p>
+
+<ul class="directory-tree">
+ <li>simple-addon/
+  <ul>
+   <li>manifest.json</li>
+   <li>update.webapp</li>
+   <li>css/
+    <ul>
+     <li>style.css</li>
+    </ul>
+   </li>
+   <li>js/
+    <ul>
+     <li>index.js</li>
+    </ul>
+   </li>
+   <li>icons/
+    <ul>
+     <li>128.png</li>
+    </ul>
+   </li>
+   <li>extension.zip</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>サンプルアドオンのディレクトリには、2 つのマニフェストファイルが含まれていることにお気付きでしょう。最初のものは <code>manifest.json</code> で、Chrome スタイルのマニフェスト構成をもち、CSS や JavaScript、アイコンファイルなどとともに <a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#extensions.zip">extensions.zip</a> パッケージのなかに配置されるものです。様々な指示を含めることができます (<a class="external external-icon" href="https://developer.chrome.com/extensions/manifest">Chrome Manifest File Format</a> をご覧ください) 。ただし、この例ではシンプルなものを利用することにしましょう:</p>
+
+<pre class="brush: json">{
+  "manifest_version": 1,
+  "name": "Add-on banner",
+  "description": "Firefox OS add-on example",
+  "version": "1.0",
+  "author": "Chris Mills",
+  "content_scripts": [{
+    "matches": ["app://system.gaiamobile.org/index.html"],
+    "css": ["css/style.css"],
+    "js": ["js/index.js"]
+  }],
+  "icons": {
+    "128": "/icons/128.png"
+  }
+}</pre>
+
+<p>多くのフィールドは説明するまでもありませんが、最後のいくつかを紹介します。</p>
+
+<p>まずはじめに、<code>content_scripts</code> フィールドはアドオンが適用されるアプリに注入されるコードを参照します。CSS と JavaScript のファイルはそれぞれ <code>css</code> と <code>js</code> フィールドでバスを指定します。<code>matches</code> フィールドはどのアプリにコードが注入されるのかを指定するパターンを含むものです。このパターンは多様な形式で書けます (<a class="external external-icon" href="https://developer.chrome.com/extensions/match_patterns">Chrome Match Patterns</a> をご覧ください)。いまはシンプルに <code>app://system.gaiamobile.org/index.html</code> と指定されており、システムアプリのみに限定されています。すべてのアプリに適用したい時には <code>app://*/* </code> を利用します。</p>
+
+<div class="note">
+<p><strong>脚注</strong>: 配列に複数の要素を含めることで、容易に複数のスクリプトやスタイルシートを参照することができます。例えば <code>"css": ["css/style.css", "css/more.css"]</code> のような形になります。</p>
+</div>
+
+<div class="note">
+<p><strong>脚注</strong>: Firefox OS では、現在のところ Chrome の &lt;all_urls&gt; キーワードはサポートしていません。</p>
+</div>
+
+<p>マニフェストの最後の部分で、<code>icons</code> フィールドをインクルードしていますが、これについての詳細は次のセクションをご覧ください。</p>
+
+<h3 id="update.webapp">update.webapp</h3>
+
+<div class="note">
+<p><strong>Note</strong>: You don't need the <code>.webapp</code> manifest if you are <a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">submitting add-ons to the Firefox Marketplace</a> — you just need the <code>.zip</code> file.</p>
+</div>
+
+<p><code>update.webapp</code> マニフェストは <a href="https://developer.mozilla.org/Apps/Build/Manifest">Firefox OS スタイルのマニフェスト</a>であり、基本的にはパッケージアプリと同様の簡易マニフェストです。 (<a href="https://developer.mozilla.org/Marketplace/Options/Self_publishing#Self-publishing_packaged_apps">Self-publishing packaged apps</a> をご覧ください)</p>
+
+<p><code>update.webapp</code> ファイルは以下のようなものです:</p>
+
+<pre class="brush: json">{
+  "name" : "Add-on banner",
+  "description": "Firefox OS add-on example",
+  "developer": { "name": "Chris Mills" },
+  "package_path": "extension.zip",
+  "icons": {
+    "128": "/icons/128.png"
+  }
+}</pre>
+
+<p>やはり、これらのほとんどは説明するまでもありません。</p>
+
+<p>おそらく、ここでいちばん重要なフィールドは <code>package_path</code> でしょう。これはエクステンションを含むパッケージのパスを指すものです。</p>
+
+<p>ここで、<a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#manifest.json">manifest.json</a> のときと同様に <code>icons</code> フィールドが含まれていることにお気付きでしょう。<code>update.webapp</code> は現時点でアイコンに関する情報をもつ<em>必要がある</em>唯一の場所ですが、仕様が変更になる可能性もあるため、いまのところ両方にフィールドを含めることを推奨しています。<code>icons</code> フィールドで指定されたアドオンのアイコンは Gaia Settings アプリ内で利用され、また、アドオンのホストが開始されれば Firefox Marketplace でも利用されます。</p>
+
+<h3 id="アイコンのインクルード">アイコンのインクルード</h3>
+
+<p>アイコンは少なくとも1つ含まれなければならず、マニフェストから参照しなければ、そのマニフェストは有効なものとはなりません。詳細については <a href="https://developer.mozilla.org/Apps/Build/Manifest#icons">Manifest リファレンスのアイコンセクション</a> をご覧ください。</p>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="warning">
+<p><strong>重要</strong>: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1179536">bug 1179536</a> によると、システムアプリ以外にスタイルシートを注入するのは動作しません。このアドオンはシステムアプリにのみ影響するため、チュートリアルは動作しますが、その他のアプリやwebページにスタイルを追加するには、JavaScriptを使ってスタイル変更する必要があります。</p>
+</div>
+
+<p>CSSについて、例ではなにも特殊なことはしていませんが、覚えておくべきことは、アドオンのクラス名やセレクタ名はそのアドオンを適用するアプリの CSS とコンフリクトさせるべきではないということです。</p>
+
+<p>例えば、バナーのサンプルでは、バナーを <code>fxos-banner</code> というクラス名の <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/div" title="HTML の &lt;div> 要素 (HTML Document Division Element) は、何か特定のセマンティクスを表すものではない、フローコンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 class 属性か id 属性、lang 属性等と共に使われます。セマンティクス上で(&lt;article> 、&lt;nav>) など他に適切な要素がある場合はそちらを使用して下さい。"><code>&lt;div&gt;</code></a> で囲いました。しかし本来はクラス名について、より一意性のあるコードとなるように考えるのが良いでしょう。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>JavaScript についても、なにも特殊な機能は持たせていません (<a class="external external-icon" href="https://github.com/mdn/simple-addon/blob/gh-pages/js/index.js">Github 上の JavaScript ソース</a>をご覧ください)。JavaScript ソースは、<a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#manifest.json">manifest.json</a> ファイルで指定された CSS に続いてアプリに注入されます。</p>
+
+<div class="note">
+<p><strong>脚注</strong>: アドオンのコードはアプリが起動し、マニフェストの指定とマッチする度に注入されます。また、アドオンが有効化される度に注入されます。アプリの起動時に アドオンが注入される場合、アプリの DOM を含めたすべてのものが初期化される前にアドオンの各ファイルが注入されます。アプリの初期化を待たずに即時注入するか、アプリの起動を待ってから注入す るか、起動処理タイミングの選択はアドオンの開発者に任されています。以下でより詳細について説明します。</p>
+</div>
+
+<p>その他の主な事柄は以下に記載されています。</p>
+
+<h4 id="window_オブジェクト">window オブジェクト</h4>
+
+<p>アドオンはプロキシされた <code>window</code> オブジェクトを共有します。結果として、アドオンから <a href="https://developer.mozilla.org/docs/Web/API/Window">window</a> オブジェクトに書き込まれたものはアプリ側のコードでは利用できません。しかし、アプリ側で <code>window</code> オブジェクトにセットされたものはアドオンで利用できます。同様に、DOM も普段通りにアクセス可能です。</p>
+
+<h4 id="DOM_へのコード注入">DOM へのコード注入</h4>
+
+<p>アプリの DOM を操作するのに JavaScript API を利用できます。</p>
+
+<h4 id="正しいタイミングでコードを注入する">正しいタイミングでコードを注入する</h4>
+
+<p>アプリがロードされた後にアドオンが注入される場合に正しく処理されるように気をつけねばなりません。そのようなシナリオは、アプリがすでに起動している状態でアドオンが有効化されたときに起こります。その場合、<a href="https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> イベントがすでに発生してしまっているため、<a href="https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onload">window.onload</a> ハンドラは動作しません。</p>
+
+<p>現在、この問題に対するうまい解決策はありません。一時的な対処として、<code>DOMContentLoaded</code> コールバックをセットする前に DOM がロードされているかどうかを確認することをおすすめします。このパターンはサンプルコードでも利用されています:</p>
+
+<pre class="brush: js">// If injecting into an app that was already running at the time
+// the app was enabled, simply initialize it.
+if (document.documentElement) {
+  initialize();
+}
+
+// Otherwise, we need to wait for the DOM to be ready before
+// starting initialization since add-ons are usually (always?)
+// injected *before* `document.documentElement` is defined.
+else {
+  window.addEventListener('DOMContentLoaded', initialize);
+}
+
+function initialize() {
+  // ...
+}
+</pre>
+
+<h4 id="複数の注入の防止">複数の注入の防止</h4>
+
+<p>最後に、一つのアプリインスタンスに対して、何度もアドオンが注入されてしまうことを防ぐために、アドオンの初期化処理が既に終わっているか確認すると良いでしょう。以下に例を示します:</p>
+
+<pre class="brush: js">function initialize() {
+  if (document.querySelector('.fxos-banner')) {
+    // Already injected, abort.
+    return;
+  } else {
+    var body = document.querySelector('body');
+    var fxosBanner = document.createElement('div');
+    fxosBanner.classList.add('fxos-banner');
+    var bannerText = document.createElement('p');
+    var closeBtn = document.createElement('button');
+
+    fxosBanner.appendChild(bannerText);
+    fxosBanner.appendChild(closeBtn);
+    body.appendChild(fxosBanner);
+
+    closeBtn.textContent = 'X';
+    bannerText.textContent = 'Wow, you have an extension installed!';
+
+    closeBtn.onclick = function() {
+      fxosBanner.parentNode.removeChild(fxosBanner);
+    }
+  }
+}
+</pre>
+
+<p>ここでは、バナーがすでに存在するかを確認するために <code>if (document.querySelector('.fxos-banner'))</code> を利用しています。もしそうであれば、関数から抜け出します。そうでなければ、<code>querySelector()</code> メソッドは <code>null</code> を返し、バナーを作成するコードブロックが実行されます。</p>
+
+<h4 id="アドオンのアプリマネジメント関数">アドオンのアプリマネジメント関数</h4>
+
+<p>すべての <code><a href="/docs/Web/API/DOMApplicationsRegistry">Apps</a></code> と <code><a href="/docs/Web/API/DOMApplicationsRegistry/mgmt">Mgmt</a></code> の関数はアプリで動作するのと同じようにアドオン上でも動作します。後者については <code>webapps-manager</code> パーミッションがマニフェストで指定されている特権アプリに注入されたアドオンでのみ利用可能であることに注意してください。</p>
+
+<p>これらの関数に加えて、アドオンが有効化、無効化される際のコールバックとして <code><a href="http://mxr.mozilla.org/mozilla-central/source/dom/webidl/Apps.webidl#141">onenabledstatechange</a></code> が用意されています。このイベントはすべてのアドオンに対して発火するため、初期化やクリーンアップの処理の前にどのアドオンが有効化・無効化されたのかを確認する必要があるでしょう</p>
+
+<pre class="brush: js"><span>navigator.mozApps.mgmt</span>.<span>addEventListener('enabledstatechange</span>', <span>function</span>(<span>event</span>) {
+  var app = event.application;
+  if (app.manifestURL === 'https://origin.of.manifest/manifest.webapp') {
+    var wasEnabled = app.enabled;
+    // do something with this information
+  }
+});
+</pre>
+
+<div class="warning">
+<p><strong>重要</strong>:  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1214155">bug 1214155</a> にあるように、<code>navigator.mozApps.mgmt.</code><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>onenabledstatechange = function() {...}</code> を通じて有効なステートリスナーを追加できません。つまり上で述べている <code>addEventListener</code> を使わないといけません、</span></span></p>
+</div>
+
+<h3 id="extension.zip">extension.zip</h3>
+
+<div class="note">
+<p><strong>脚注</strong>: <code>extension.zip</code> ファイルは、どのようにシステムが動作するのかといった説明のためにデモ用のリポジトリの中に配置されています。実際には、 Zip ファイルをディレクトリの中に含める必要はなく、WebIDE がアドオンをインストールする際に自動生成します。Firefox Marketplace がアドオンの掲載を始める際にも、同様にする予定となっています。</p>
+</div>
+
+<p><code>extension.zip</code> アーカイブはエクステンションのためのコードを含み、それらは <a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#update.webapp">update.webapp</a> の <code>package_path</code> フィールドで指定されています。このため、Gecko がインストールするべきコードを見つけることができるのです。アーカイブのなかは以下のようになっています:</p>
+
+<ul class="directory-tree">
+ <li>css/
+  <ul>
+   <li>style.css</li>
+  </ul>
+ </li>
+ <li>js/
+  <ul>
+   <li>index.js</li>
+  </ul>
+ </li>
+ <li>icons/
+  <ul>
+   <li>128.png</li>
+  </ul>
+ </li>
+ <li>manifest.json</li>
+</ul>
+
+<p>このように <code>manifest.json</code> ファイルはアーカイブのなかに配置され、どのファイルをどのアプリに注入するのかを参照するために提供されます。</p>
+
+<h3 id="WebIDE_を利用したアドオンのテスト">WebIDE を利用したアドオンのテスト</h3>
+
+<p>Mozilla の WebIDE ツールはデスクトップ版の Firefox ではじめから利用可能です。これを利用してアドオンを端末にインストールするには、以下のステップに従います:</p>
+
+<ol>
+ <li>Firefox 43 かそれ以降のバージョンの Firefox がインストールされているか確認してください (執筆時点では <a class="external external-icon" href="https://nightly.mozilla.org/">Nightly</a> バージョンが必要でした)。WebIDE でのアドオン開発はこのバージョン以降でのみサポートされています。</li>
+ <li>ブラウザを開き、WebIDE ボタンを押下する、もしくはメニューから <em>Tools &gt; Web Developer &gt; WebIDE</em> を選択して WebIDE ツールを開きます。</li>
+ <li>端末のリモートデバッグが有効になっているかを確認します。(<em>Settings アプリ &gt; Developer &gt; "Debugging via USB" の項目で "ADB and DevTools" を選択します。</em>)</li>
+ <li>USB ケーブルを利用し端末を PC に接続します。同時に2台以上の端末が接続されていないようにしてください。</li>
+ <li>WebIDE の UI 上で、<em>Select Runtime</em> オプションを押下し、<em>USB Devices</em> に列挙されている端末のなかから接続された端末を選択します。</li>
+ <li>現時点では、<em>Allow USB debugging connection?</em> というプロンプトが端末上に表示されます。<em>Allow</em> を選択してください。(訳注: 開発者向けビルドの場合プロンプト無しでインストール可能になっている場合もあります)</li>
+ <li><em>Open App</em> オプションから <em>Open Packaged App...</em> を選択します。</li>
+ <li>ファイルの選択画面で <code>update.webapp</code> マニフェストファイルを含むディレクトリまで遷移し、<em>Open</em> を押下します。</li>
+ <li>警告もエラーも報告されなければ、"Play" ボタンを押下してアドオンを端末にインストールすることができます。(<em>Install and Run</em>)</li>
+ <li>動作しているアドオンを確認するには、<em>Settings アプリ &gt; Add-ons &gt; Add-on example &gt; 上部のチェックボックスにチェック</em>してアドオンを有効化します。</li>
+</ol>
+
+<h2 id="アドオンをデバッグする">アドオンをデバッグする</h2>
+
+<p>Please note due to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185464" title="The new extension API should come with debuggability">バグ 1185464</a> にある通り、現在 WebIDE を使ってデバッグすることはできないことに気をつけてください。</p>
+
+<h2 id="アドオンの設定">アドオンの設定</h2>
+
+<p><em>Settings アプリ &gt; Add-ons</em> から端末上のアドオンを管理することができます。この項目ではインストールされたアドオンが列挙され、それぞれをタップしてそれぞれの詳細について確認することができます。</p>
+
+<p style="width: 520px; margin: 0 auto;"><img alt="firefox os screenshot showing a list of installed add-ons in the settings app" src="https://mdn.mozillademos.org/files/11447/add-on-settings-screen.png" style="height: 445px; margin-right: 20px; width: 250px;"><img alt="information screen for an individual addon, with a list of apps this add-on affects, and controls to disable and delete the add-on" src="https://mdn.mozillademos.org/files/11449/individual-add-on-settings-page.png" style="height: 445px; width: 250px;"></p>
+
+<h3 id="アドオンの有効化・無効化、そして削除">アドオンの有効化・無効化、そして削除</h3>
+
+<p>標準では、アドオンは Firefox Marketplace からインストールされると有効になります。WebIDE からインストールされた場合は、最初は無効化された状態になります。</p>
+
+<p>各アドオンのページ (<em>Settings app &gt; Add-ons</em> 以下にあります) の上部のチェックボックスから、手動でアドオンを有効化、無効化することができます。また、これを自動化したい場合は <a href="https://developer.mozilla.org/docs/Web/API/DOMApplicationsManager/setEnabled">navigator.mozApps.mgmt.setEnabled()</a> 関数を利用することが可能です (この Github 上の <a class="external external-icon" href="https://github.com/fxos/directory/blob/master/app/js/controller/list_controller.js#L220-L223">setEnabled() 利用例</a> をご覧ください)。</p>
+
+<p>各アドオンのページにある <em>Delete</em> ボタンをタップすることでアドオンを削除することができます。</p>
+
+<h2 id="パーミッション">パーミッション</h2>
+
+<p>アドオンはホストアプリからすべてのパーミッションを継承します。アドオンのマニフェスト (<a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons#update.webapp">update.webapp</a>) でパーミッションを要求しても効果はなく、ホストアプリで利用できない API はアドオンにも提供されません。</p>
diff --git a/files/ja/archive/b2g_os/add-ons/index.html b/files/ja/archive/b2g_os/add-ons/index.html
new file mode 100644
index 0000000000..6f689e46ef
--- /dev/null
+++ b/files/ja/archive/b2g_os/add-ons/index.html
@@ -0,0 +1,106 @@
+---
+title: B2G OS アドオン
+slug: Archive/B2G_OS/Add-ons
+tags:
+  - Add-ons
+  - Apps
+  - Extensions
+  - Firefox OS
+  - customizations
+translation_of: Archive/B2G_OS/Add-ons
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/ja/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/ja/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<div class="note">
+<p dir="ltr"><strong>注記</strong>: B2G OS アドオンは、<a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions">WebExtensions API</a> を基礎としていて、これはデスクトップ版Firefox の42以降からサポートされており、Chrome と Operaで使われているエクステンション(拡張機能)を基礎としています。</p>
+</div>
+
+<h2 id="前提条件">前提条件</h2>
+
+<p>エクステンションの開発を始めるためのセットアップを行うには、下記のステップに従う必要があります。</p>
+
+<h3 id="1._USB_デバッグの有効化">1. USB デバッグの有効化</h3>
+
+<p>端末の <em>Settings</em> アプリで、<em>Developer &gt; De bugging via USB &gt; ADB and Devtools</em>.を選びます。ここで WebIDE を用いてインストール型のアプリを USB ケーブル <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">と</a><a href="https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">Wifi 上</a> (USB ケーブル不要) の両方からデバッグできるはずです。</p>
+
+<h3 id="2._WebIDE_のセットアップ">2. WebIDE のセットアップ</h3>
+
+<p><a href="https://developer.mozilla.org/ja/docs/Tools/WebIDE">WebIDE</a> ツールは Firefox の一部分であり、開発期間に電話機へアドオンをインストールするのに使われます — 詳しくは <a href="https://developer.mozilla.org/ja/Firefox_OS/Add-ons/Developing_B2G_OS_add-ons#WebIDE_%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88">WebIDE を利用したアドオンのテスト</a>をご覧ください。</p>
+
+<h2 id="その他の情報">その他の情報</h2>
+
+<h3 id="開発する">開発する</h3>
+
+<ul>
+ <li dir="ltr"><strong>チュートリアル</strong>: <a href="https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Add-ons/Developing_Firefox_OS_add-ons">https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Add-ons/Developing_Firefox_OS_add-ons</a></li>
+ <li dir="ltr"><strong>詳しい例</strong>: <a href="https://hacks.mozilla.org/2015/11/building-an-ios-style-unread-notifications-add-on-for-firefox-os/">https://hacks.mozilla.org/2015/11/building-an-ios-style-unread-notifications-add-on-for-firefox-os/</a></li>
+ <li dir="ltr"><strong>API リファレンス</strong>: <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions">https://developer.mozilla.org/ja/Add-ons/WebExtensions</a></li>
+</ul>
+
+<h3 dir="ltr" id="参加する">参加する</h3>
+
+<ul>
+ <li dir="ltr"><strong>メーリングリスト(日本語)</strong>:<a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">https://groups.google.com/forum/#!forum/mozilla-translations-ja</a></li>
+ <li dir="ltr"><strong>メーリングリスト(英語)</strong>:<a href="https://mail.mozilla.org/listinfo/dev-addons">https://mail.mozilla.org/listinfo/dev-fxos</a></li>
+ <li dir="ltr"><strong>講演フォーラム</strong>: <a href="https://discourse.mozilla-community.org/c/add-ons/development">https://discourse.mozilla-community.org/c/add-ons/development</a></li>
+ <li dir="ltr"><strong>IRC</strong>:  irc.mozilla.org, #webextensions and #fxos</li>
+ <li dir="ltr"><strong>どの新規</strong><strong> API を優先付けるべきかは、こちらで教えてください</strong>: <a href="https://webextensions.uservoice.com/forums/315663-webextension-api-ideas">https://webextensions.uservoice.com/forums/315663-webextension-api-ideas</a></li>
+ <li dir="ltr"><strong>Twitter でフォローしてください</strong>: <a href="https://twitter.com/MozWebExt">@MozWebExt</a></li>
+</ul>
+
+<div id="divDic" style="opacity: 0.9; font-size: small; background-color: #EDF4FC; color: Gray; position: absolute; top: 774px; left: 229px; min-height: 50px; max-width: 50%; padding: 5px; text-align: left; border-radius: 4px; box-shadow: -2px 0px 9px 5px #898D91;">
+<div id="divResult" style="overflow: auto; padding: 3px;"><a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">https://groups.google.com/forum/#!forum/mozilla-translations-ja</a></div>
+<a id="optionsLink" style="opacity: 0.2; position: absolute; right: 13px; font-size: 18px; text-decoration: none!important; background: #528DDF; padding: 1px; color: #fff; border-radius: 6px 6px 6px 6px; border: 2px solid #EEEEEE; font-weight: bold; width: 20px; text-align: center; display: block;">+</a></div>