diff options
Diffstat (limited to 'files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html')
| -rw-r--r-- | files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..18f9ae7071 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,57 @@ +--- +title: 拡張機能とは何か？ +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +tags: + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>拡張機能はウェブブラウザーに機能を追加します。標準化されている web 技術（JavaScript / HTML / CSS）に専用の JavaScript API をいくつか加えて書かれます。とりわけ、拡張機能はブラウザーに新しい機能を追加したり、特定のウェブサイトが持つ見た目やコンテンツを変更したりできます。</p> + +<p><strong>ウェブサイト全体の改良</strong>: アドオンを使ってブラウザー内の機能やウェブサイトからの情報を届けます。ユーザーが訪れたページの詳細を集めるようにできて、サービスを向上させることができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> + +<p><strong>ユーザーの個性を見せる</strong>: ブラウザー機能拡張はユーザーによってブラウズされるページコンテンツを操作できます。例えば、ユーザーのお気に入りのロゴや写真を、訪れるすべてのページの背景として追加できます。拡張機能は Firefox UI の見た目を更新する力を与えることもできます (スタンドアローンの <a href="https://developer.mozilla.org/ja/Add-ons/Themes/Theme_concepts">テーマアドオン</a>を使っても同様に Firefox UI を更新できます)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>ウェブページのコンテンツを追加/削除</strong>: ウェブページで触れられた国や都市への旅行ガイドへのアクセスを提供してウェブページのしつこい広告をユーザーがブロックするのを補助したり、読む体験の一貫性を提供するためにページの再フォーマットをしたいかもしれません。ページの HTML と CSS にアクセスして更新する力を持って、拡張機能はユーザーが見たい方法でウェブを見るのを助けることができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> + +<p><strong>ツールや新しいブラウズ機能を追加</strong>: タスクボードに新しい機能を追加したり、URL やハイパーリンクやページのテキストから QR コード画像を生成したりします。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions">WebExtensions APIs</a> の柔軟な UI オプションや力を得て、ブラウザーに新機能を簡単に追加できます。そしてほぼあらゆるウェブサイトの機能を改良できて、それはあなたのウェブサイトだけとは限りません。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p> + +<p><strong>ゲーム</strong>: オフラインで遊べるような伝統的なコンピューターゲームや、新しいゲームの可能性を探検できます。例えば、日々のブラウジングにゲームを取り込むなど。</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p> + +<p><strong>開発ツールを追加</strong>: あなたのビジネスに沿った開発ツールを提供したり、共有しておきたい便利なテクニックやウェブ開発へのアプローチを提供できます。いずれの方法でも、開発者ツールバーに新規タブを追加することで、組み込みの Firefox 開発ツールを改良できます。<img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> + +<p>Firefox 用の拡張機能は <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions">WebExtensions APIs</a> を使って作成され、この API はクロスブラウザーで動作可能な拡張機能を開発するための技術です。この API の大半は、Google Chrome や Opera でサポートされている <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。これらのブラウザー向けに書かれた拡張機能のほとんどは、少し<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">変更を加えるだけで</a> Firefox や Microsoft Edge でも動かせるようになります。この API は完全に<a href="https://developer.mozilla.org/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> にも対応しています。</p> + +<p>何かアイデアがあったり、レガシーアドオンを WebExtensions API に移植する手助けが必要な場合、ご連絡は <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons メーリングリスト</a> や <a href="https://chat.mozilla.org/#/room/#addons:mozilla.org">Add-ons room</a> や <a href="https://wiki.mozilla.org/Matrix">Matrix</a> までお願いします。英語のサポートです。</p> + +<h2 id="Whats_next" name="What's_next">次のステップ</h2> + +<ul> + <li>シンプルな拡張機能を一通り作成するには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">初めての拡張機能</a>を参照してください。</li> + <li>拡張機能の構成については <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">拡張機能の中身</a>を参照してください。</li> + <li><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples">拡張機能サンプル</a>にある拡張機能のサンプルを動かしてみましょう。</li> +</ul> |