---
title: チュートリアル
slug: orphaned/Tutorials
original_slug: Tutorials
---
<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。</span></p>
<hr>
<h3 id="はじめに"><a name="getting-started">はじめに</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Installation">インストール</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。</span></dd>
  </dl>
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">トラブルシューティング</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">よくある問題を解決する場合や、支援を求める場合のヒントを説明します。</span></dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx">入門</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">シンプルなアドオンを作成を始めるための手順の概略です</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">。</span></dd>
   <dd>
     </dd>
  </dl>
 </div>
</div>
<h3 id="ユーザーインターフェイスの作成"><a name="create-user-interfaces">ユーザーインターフェイスの作成</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">ツールバーボタンの追加</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Firefox アドオンツールバーにボタンを追加します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Firefoxへのメニュー項目の追加</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Firefox のメインメニューにアイテムを追加します。</span></dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">ポップアップの表示</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">HTML および JavaScript を使用して実装したポップアップダイアログを表示します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">コンテキストメニュー項目の追加</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Firefox のコンテキストメニューに項目を追加します。</span></dd>
  </dl>
 </div>
</div>
<hr>
<h3 id="ブラウザの操作"><a name="interact-with-the-browser">ブラウザの操作</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webページを開く</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-size: 13px; line-height: 19.9939994812012px;"><font face="andale mono, monospace">tabs</font></span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">モジュールを用いて、新しいタブまたはウィンドウでWebページを開き、そのコンテンツにアクセスします。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load">ページの読み込みを確認する</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-size: 13px; line-height: 19.9939994812012px;"><font face="andale mono, monospace">tabs</font></span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">モジュールを用いて、</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">新しい Web ページが読み込まれたときに通知を受け取り、それらの Web ページのコンテンツにアクセスします。</span></dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">開いているタブの一覧を表示する</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-size: 13px; line-height: 19.9939994812012px;"><font face="andale mono, monospace">tabs</font></span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">モジュールを用いて、</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。</span></dd>
   <dd>
     </dd>
  </dl>
 </div>
</div>
<h3 id="Webページの変更"><a name="modify-web-pages">Webページの変更</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">URLに基づいたWebページの変更</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">URL に基づいて Web ページを検索するフィルタを作成します。フィルタに一致する URL の Web ページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。</span></dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">アクティブなWebページの変更</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">現在アクティブな Web ページに、動的にスクリプトを読み込みます。</span></dd>
  </dl>
 </div>
</div>
<hr>
<h3 id="開発テクニック"><a name="development-techniques">開発テクニック</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Logging">ログの出力</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">診断を行うために、メッセージをコンソールにログとして出力します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">再利用可能なモジュールの作成</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">ユニットテスト</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome 権限</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">この権限を使用すると、アドオンが Components</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">イベントターゲットの作成</a></dt>
   <dd>
    定義したオブジェクトがイベントを発生させられるようにします。</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">読み込みと読み込み解除の確認</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">サードパーティーモジュールの使用</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK 自体に含まれていない追加のモジュールをインストールして使用します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/l10n">ローカライゼーション</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">ローカライズ可能なコードを作成します。</span></dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">モバイル開発</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。</span></dd>
  </dl>
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">アドオン用のデバッガー</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">アドオン内のJavaScriptのデバッグを行います。</span></dd>
  </dl>
 </div>
</div>
<hr>
<h3 id="応用"><a name="putting-it-together">応用 </a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">アノテーターアドオン</a></dt>
   <dd>
    <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">より複雑なアドオンの開発作業を順を追って説明します。</span></dd>
  </dl>
 </div>
</div>
<p> </p>