From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../user_interface/sidebars/index.html | 55 ++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html (limited to 'files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html') diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..2034198dc6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,55 @@ +--- +title: サイドバー +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +--- +
{{AddonSidebar}}
+ +
+

サイドバーはブラウザーウィンドウの横側の、ウェブページの隣に表示されるペイン(枠)です。ブラウザーはユーザーに、 現在利用しているサイドバーを表示するUIと表示させるサイドバーを選ぶUIを提供します。例えば、Firefox には"表示 > サイドバー" メニューがあります。サイドバーは同時に一つだけ表示できて、すべてのタブとすべてのブラウザーウィンドウに表示されます。

+ +

ブラウザーにはいくつかの組み込み済みのサイドバーがあります。例えば、Firefox にはブックマークと連携するサイドバーがあります:

+ +

sidebar_action というmanifest.json キーを使って、拡張機能はブラウザーに独自のサイドバーを追加できます。それは組み込みのサイドバーと一緒に一覧表示され、ユーザーが組み込みサイドバーと同じメカニズムで開くことができます。

+ +

"browser action"ポップアップと同様に、サイドバーのコンテンツを HTML 文書で指定できます。ユーザーがサイドバーを開く時、サイドバーの文書がブラウザーである各ウィンドウへと読み込まれます。各ウィンドウは独立した環境のインスタンスを保持します。新しいウィンドウが開いた時も同様に独自にサイドバー文書を保持します。

+ +

{{WebExtAPIRef("sidebarAction.setPanel()")}} 関数を使って特定のタブに文書をセットできます。サイドバーはどこのウィンドウに所属しているのかを、 {{WebExtAPIRef("windows.getCurrent()")}} APIを使ってできます。

+ +
// sidebar.js
+browser.windows.getCurrent({populate: true}).then((windowInfo) => {
+  myWindowId = windowInfo.id;
+});
+ +

これは、windowごとに出しわけしたいときに有用な方法です。参考例としてこちらを参照してください。 "annotate-page".

+ +

Sidebar documents は  backgroundや popupスクリプトと同じ特権のJavaScript APIs にアクセスできます。 background page に{{WebExtAPIRef("runtime.getBackgroundPage()")}}を使いアクセスできます(incognito mode windowでなければ(訳注：プライベートタブのことかと思います))。そして {{WebExtAPIRef("tabs.sendMessage()")}} や {{WebExtAPIRef("runtime.sendNativeMessage()")}}のように messeagin APIを使って、 content scripts や ネイティブアプリケーションと連携することが可能です。

+ +

Sidebar documents はウィンドウのクローズ時かユーザがサイドバーを閉じた時にunloadされます。このように backgroundと違って常に生きているわけではありませんがポップアップと違い、ユーザがWebページと連携している間読み込まれたままでいられます。

+ +

サイドバーは初回インストール時に自動で開きます。これは拡張機能にサイドバーがあることをユーザに理解させてくれます。ただしプログラム的にサイドバーを開くことはできません。ユーザのみが開くことができます（訳注：ちなみにブラウザのツールバーボタンを押したときにサイドバーを開くプログラムは動作する）。

+ +

サイドバーを指定する

+ +

サイドバーを使うには初期起動documentを sidebar_action セクションとしてmanifest.json に a default title とiconとともに設定します。

+ +
"sidebar_action": {
+  "default_title": "My sidebar",
+  "default_panel": "sidebar.html",
+  "default_icon": "sidebar_icon.png"
+}
+ +

これら3つは同時に、{{WebExtAPIRef("sidebarAction")}} API を使ってプログラム的に変更可能です。

+ +

Title とicon は UIとしてブラウザがサイドバーのリストアップをするときユーザに示す内容です。例えば Firefoxの "表示> サイドバー" メニューで見ることができます。

+ +

サイドバーデザイン

+ +

Firefox スタイルにサイドバーをマッチさせる方法の詳細は次の文書を参考にしてください。 Photon Design System.

+ +

例

+ +

GitHub 上のwebextensions-examples repository に、サイドバーを実装した例としてannotate-page があります(訳注：annotateは注釈を意味します。サンプルはざっと見たところサイドバー上のメモ機能のようです)。

+
-- cgit v1.2.3-54-g00ecf