1 files changed, 103 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..0ce45c98db
--- /dev/null
+++ b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,103 @@
+---
+title: ユーザーインターフェイス
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - Landing
+  - User Interface
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtension API を使った機能拡張にはいくつかのユーザーインターフェイスオプションが提供されていて、ユーザーがこれによって機能を利用できます。この節では、下記にこのオプションの要約と、各ユーザーインターフェイスオプションの詳細な導入とがあります。</p>
+
+<div class="note">
+<p>あなたの機能拡張で、これらの UI コンポーネントを使って優れたユーザー体験を生むためのアドバイスとして、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">ユーザー体験のベストプラクティス</a> の記事を見てください。</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI オプション</th>
+   <th scope="col">記述</th>
+   <th scope="col" style="width: 350px;">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">ブラウザーツールバーボタン</a>(ブラウザーアクション)</p>
+   </td>
+   <td>ブラウザーツールバーのボタンで、クリック時に機能拡張にイベントを送る。既定では全てのタブででこのボタンが表示されている。</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのツールバーボタン</p>
+   </td>
+   <td>ボタンがクリックされた時の、ブラウザーツールバーのボタン上のポップアップ。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">アドレスバーボタン</a>(ページアクション)</p>
+   </td>
+   <td>ブラウザーアドレスバー上のボタンで、クリック時に機能拡張にイベントを送る。既定では、全てのタブでこのボタンは非表示。</td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのアドレスバーボタン</td>
+   <td>
+    <p>ブラウザーアドレスバーのボタン上のポップアップで、クリック時に開く。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</p>
+   </td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">コンテキストメニュー項目</a></td>
+   <td>ブラウザーのコンテキストメニュー上の、メニュー項目や、チェックボックスや、ラジオボタン。また、メニューはセパレーターを追加して構造化もできる。メニュー項目がクリックされたとき、機能拡張にイベントが送られる。</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">サイドバー</a></td>
+   <td>
+    <p dir="ltr">ウェブページの隣に表示される HTML 文書で、ページ毎に固有なコンテンツを持つ。サイドバーは機能拡張がインストールされた時に開かれて、ユーザーのサイドバー可視化の選択に従う。サイドバー内のユーザーインタラクションは HTML 文書によって扱われる。</p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a></td>
+   <td>機能拡張に対してユーザーが変更できる設定値を決めるページ。ユーザーはブラウザーのアドオンマネージャーからこのページにアクセスできる。</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>ウィンドウやタブの中で、フォームやヘルプやその他必要となるあらゆるコンテンツを提供するには、機能拡張に含めたウェブページを使います。</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">通知</a></td>
+   <td>OS の通知の仕組みを通じてユーザーに表示される一時的な通知。ユーザーが通知をクリックした時や、(自動的に、あるいはユーザーが要求した場合の両方に)通知が閉じた時、機能拡張にイベントを送る。</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">アドレスバーサジェスト</a></td>
+   <td>ユーザーがキーワードを入力した時のカスタムアドレスバーサジェスト</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">開発ツールパネル</a></td>
+   <td>ブラウザーの開発ツール内で表示される、タブと関連 HTML 文書。</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>下記の方法ガイドにはユーザーインターフェイスオプションを作成するためのステップバイステップのガイドがあります。:</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines">アクセシビリティガイドライン</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">ツールバーにボタンを追加する</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">ブラウザースタイル</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールを拡張する</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">設定ページの実装</a></li>
+</ul>