アンケートに答える (英語) | 日本語 | サイト ディレクトリ
注意: 一部のページは英語でのみご利用いただけます。

ガジェットの公開

このドキュメントでは、ガジェットを公開するためのさまざまなオプションについて説明します。Google Gadgets Editor (GGE) を使用してガジェットを作成し、ホストする場合は、ガジェットの公開が簡単になります。

目次

  1. ガジェットの設置場所
  2. 公開の準備
    1. 幅と高さのテスト
    2. ガジェット パフォーマンスの改善
  3. iGoogle コンテンツ ディレクトリへの公開
    1. 送信したガジェットの管理

ガジェットの設置場所

ガジェットは次の場所のいずれかに設置できます。

  • 自分または友人の iGoogle ページ。
  • Orkut など、ガジェットをサポートするその他のソーシャル ネットワーク コンテナ。
  • Google コンテンツ ディレクトリ。ガジェットをコンテンツ ディレクトリに送信すると、幅広いユーザーが利用できるようになります。

すべてのガジェットがすべての環境に適しているわけではありません。特定の環境でどの機能がサポートされているかについて詳しくは、そのコンテナに関するドキュメントをご覧ください。

公開の準備

ガジェットを公開する前に、ガジェットが実行されるようになる対象環境の要件と制限を考慮して、ガジェットをテストする必要があります。

ガジェットはすべて、以下のテストを行う必要があります。

  • UserPref の値のすべての組み合わせを試します。
  • さまざまなサイズの画面 (800x600 から可能な最大の画面まで) で実行します。Firefox Web Developer Extension にリンクすると、Firefox を特定のサイズに簡単に変更できるようになります。
  • 幅と高さのテストで説明するように、ガジェットをさまざまなサイズに変えてテストします。
  • ガジェットを実行する可能性のあるすべての環境でテストします。
  • IE 7、IE 6、Firefox 2.x、Firefox 1.5.x、Opera 9.x、Safari 2.x の各ブラウザ上ガジェットをでテストします。
  • さまざまなフォント サイズを試します。
    • Firefox でフォント サイズを変更するには、[ツール] > [オプション] > [コンテンツ] の順に選択します。[フォントと配色] エリアの [詳細設定] をクリックします。フォントの設定を変更し、[Web ページが指定したフォントを優先する] チェックボックスをオフにします。
    • Internet Explorer でフォント サイズを変更するには、[ツール] > [インターネット オプション] > [全般] の順に選択します。[フォント] ダイアログと [ユーザー補助] ダイアログを使用して、フォントを変更します。

makeRequest() を使用している場合、データ ソースがダウンしたときやエラーを返したときにどうなるかをテストします。これをシミュレートするには、URL を一時的に別の URL. に変更します。

幅と高さのテスト

ガジェットのサイズは、ガジェットを実行するスペースの大きさによって異なります。詳しくは、そのコンテナのドキュメントをご覧ください。

ガジェットの設計とテストの際に、200 ピクセルから、600 ピクセルまでの任意の幅に対処できるようにします。ガジェットによっては、幅をさらに広くする必要があります。より大きいスペースが提供された場合も、通常正しく表示されるように、ガジェットを設計します。たとえば地図のガジェットは、そのスペース全体を埋める必要があり、画像のガジェットはそのフレームの中心に画像を配置する必要があり、テキストのガジェットはテキストを上部に表示する必要があります (たとえば通常、最下部に表示される詳細を表示するためのリンクは、ガジェット ウィンドウの最下部ではなく、コンテンツの近くに表示する必要があります)。

ガジェット パフォーマンスの改善

大量のトラフィックが予想されるガジェットを作成する場合、利用できる状態とよいパフォーマンスを保証するための手順があります。1 日に 20 万件以上利用されるガジェットや、約 1 秒間に 1、2 件のリクエストがあるガジェットの場合、このセクションの下記のヒントを検討する必要があります。50 KB のガジェットでも、1 日に 20 万件のリクエストがあれば、1 か月に約 300 GB の帯域幅を消費します

ガジェットが多数のユーザーをひきつける理由はさまざまです。コンテンツ ディレクトリでただ人気が高いからである場合もあります。ガジェットが特別なプロモーションや広告で使用される場合、トラフィックが増加することがあります。

トラフィックの多いガジェットの場合、0.25 秒 (250 ミリ秒) 以内で表示されることを目標とする必要があります。これを測定するには、Firebug (Firefox のみ) を使用します。ガジェットの応答性を改善することは、ユーザーの利用によい影響を与える確かな方法です。ガジェットのパフォーマンスを最適化するヒントは、大量のトラフィックの最適化をご覧ください。管理のヒントは、大量のトラフィックの管理をご覧ください。人気の高いガジェットにとって、一般的なテストのガイドラインも特に重要です。

大量のトラフィックの最適化

作成するガジェットに大量のトラフィックが予想される場合、次のガイドラインに従ってください。

  • 外部の JavaScript ファイルや CSS ファイル (HTML タグの src 属性や href 属性で参照するファイル) の使用は避けます。これは、別途ネットワーク接続が発生するからです。代わりにそのガジェットのスペックの中に JavaScript や CSS のコードをインラインで含めます。
  • type=html ガジェットを使用します。type=url のガジェットは、他のホスティング サーバーに対するパフォーマンスとキャッシュのサポートがよくないために、type=html ガジェットより表示に時間がかかります。
  • makeRequest() メソッドは、デフォルトで約 1～2 時間、コンテンツをキャッシュします。refreshInterval パラメータをそのメソッドに使用すると、キャッシュをより頻繁に更新できます。ただしキャッシングによって、コンテンツをホストしているリモート サーバーへのリクエストの回数が最小限に抑えられ、ガジェットのパフォーマンスが向上します。キャッシュを必要以上に更新しないようにして、キャッシュを使用するリクエストの割合が減らないようにします。このトピックに関して詳しくは、キャッシュの更新をご覧ください。
  • Firebug (Firefox のみ) を使用して、ガジェットのパフォーマンスを微調整します。その他のブラウザには、Fiddler を使用できます。
  • できれば Google Analytics の使用は避けます。サーバー接続が別途発生するからです。Analytics の代わりに、http://www.google.com/ig/directory?url=<gadget-url> を使用して、1 週間のガジェットのページビューを調べます。
  • ガジェットの HTML 内のすべての <img> タグについて高さと幅を指定します。これによって、ガジェットの表示が早くなります。gadgets.io.getProxyUrl() を使用して、画像要素を直接 DOM に挿入している場合は、幅と高さのプロパティを設定する必要はありません。
  • ホスティング プロバイダに直接リンクする代わりに、 gadgets.io.getProxyUrl() 関数を使用して埋め込み画像をすべてキャッシュし、embedCachedFlash() 関数を使用して Flash コ テンツをキャッシュします。 gadgets.io.getProxyUrl() を使用して画像をプリロードするガジェットの例を、次に示します。

gadgets.io.getProxyUrl() の使用方法を示すサンプル ガジェットを次に示します。 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Zombies!" height="350" />
  <Content type="html">
  <![CDATA[
  <div id="zombiecontainer"
    style="text-align:center;">
  </div>
  <script type="text/javascript">
  var counter = 0;

  // Preload the images using gadgets.io.getProxyUrl()
  function load(imageList) {
    var ret = [];
    for (var i = 0, j = imageList.length; i < j; ++i) {
      var img = document.createElement("img");
      img.src = gadgets.io.getProxyUrl(imageList[i]);
      ret.push(img);
    }
    return ret;
  }

  var files = [
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-0.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-1.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-2.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-3.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-4.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-5.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-6.jpg"
  ];

  var images = load(files);
  browse();

  // Browse through photos sequentially. When you get to the end of the array, start over.
  function browse(){
    if (counter == images.length)
    {
      counter = 0;
    }
    document.getElementById("zombiecontainer").innerHTML = "";
    document.getElementById("zombiecontainer").appendChild(images[counter]);
    counter++;
  }

  </script>
  <br />
  <div style="text-align: center;">
    <input type=submit value="Next ->" onClick="browse()">
  </div>
  ]]>
  </Content>
</Module>

大量のトラフィックの管理

次のガイドラインは、大量の処理が必要なガジェットの管理に役立ちます。

  • ガジェットのユーザーから大量のメールを受信している場合は、Gmail を使用し、フィルタを設定して、大量のメールを管理します。そのガジェットのスペックで、<username>.feedback+<gadgetname>@gmail.com の形式のアドレスを使用することをお勧めします。これによって、ガジェットのユーザーから受信したメッセージをフィルタにかけることができます。Gmail では、プラス記号 (+) の後はすべて切り捨てられます。したがってこのメール アドレスは <username>.feedback@gmail.com となります。Gmail には高品質のスパム フィルタがあります。
  • iGoogle コンテンツ ディレクトリにガジェットを送信した場合、そのガジェットについての説明ページを定期的に確認して、ユーザーのコメントを読みます。ユーザーは貴重なフィードバック、機能のリクエスト、ガジェットの使用中に発生したバグの報告をたびたびそのページに残してくれます。ユーザーのコメントに常に対応して、ユーザーとかかわることをお勧めします。

iGoogle コンテンツ ディレクトリへの公開

ガジェットを設計、実装、テストした後、Google にガジェットを送信して、iGoogle コンテンツ ディレクトリに公開できます。このセクションでは、ガジェットの公開の準備に必要な一般的な手順について説明します。

ステップ 1: ガジェット設定

リファレンス には、ガジェットに関する｢メタ｣情報の提供に使用できるすべての <ModulePrefs> 属性の一覧を示しています。ガジェットのスペックに含める必要のある情報は、次のとおりです。

  • title
  • description。この属性は、ガジェットが何をするかをユーザーに知らせるために、特にそれがわかりにくい場合に重要です。
  • author
  • author_email。これにより、Google やガジェットのユーザーが作者に連絡できます。どのメール システムでも使用できますが、スパム対策のため個人用のメール アドレスは使用しないようにしてください。ガジェットのスペックで、helensmith.feedback+coolgadget@gmail.com の形式のメール アドレスを使用することも 1 つの方法です。Gmail では、プラス記号 (+) の後はすべて切り捨てられます。したがってこのメール アドレスは helensmith.feedback@gmail.com となります。こちらで、Gmail アカウントを作成できます。
  • screenshot。これは、ガジェットのスクリーンショットの URL を示す文字列です。この URL は相対パスではなく、絶対パスを指定する必要があります。この画像は、robots.txt によるブロックが行われていない、公開されているウェブサイト上にある必要があります。PNG が推奨フォーマットですが、GIF や JPG も使用できます。ガジェットのスクリーンショットの幅は 280 ピクセルにする必要があります。スクリーンショットの高さは、ガジェットの使用時に「自然な」高さにする必要があります。これによってユーザーは、ガジェットを自分のページに追加する前に、ガジェットが画面上に占めるスペースの大きさを把握できます。スクリーンショットでは、ガジェットの青いヘッダー バーの上に空白が入らないようにする必要があります。スクリーンショットには、タイトル バーも含めてガジェット全体を示し、それ以外のものは含めないでください。編集ウィンドウを開いた状態でガジェットのスクリーンショットをとることもできます。スクリーンショットのサイズの変更や、トリミングはしないでください。品質や一貫性の維持のために、どのガジェットも Google が独自のスクリーンショットをとる場合があります。
  • thumbnail。サムネイルは、コンテンツ ディレクトリで、ユーザーにガジェットのプレビューを提供するために使用されます。全体を表示するのではなく、ガジェットの主要な機能をとらえている必要があります。この属性の値は、ガジェットのサムネイルの URL を示す文字列です。この URL は相対パスではなく、絶対パスを指定する必要があります。この画像は、robots.txt によるブロックが行われていない、公開されているウェブサイト上にある必要があります。PNG が推奨フォーマットですが、GIF や JPG も使用できます。サムネイルは 120x60 ピクセルにする必要があります。タイトル バーは含めないでください。
  • author_location
  • author_affiliation
  • title_url。この属性を使用して、ガジェットのタイトルを外部の HTML ページにリンクさせます。たとえばガジェットが、あるサービスのフロント エンドである場合、ガジェットのタイトルをそのサービスのウェブサイトにリンクできます。
  • directory_title (タイトルにユーザー設定置換変数が含まれる場合に必要です)。

開発者のページへの表示を希望する場合は、次の追加のフィールドを含めることができます。

  • author_photo。写真への URL です (70x100 の PNG フォーマット推奨ですが、JPG や GIF もサポートされています)。
  • author_aboutme。自分に関する説明です (500 文字内)。
  • author_link。自分のウェブサイト、ブログなどへのリンクです。
  • author_quote。含めたい引用です (300 文字内)。

詳しくはこちらをご覧ください。例はこちらをご覧ください。

ステップ 2: 強固で安全なガジェットを作成したことを確認します。

セキュリティ リスクを最小限に抑えるように、ガジェットをコーディングしたことを確認します。

ステップ 3: 互換性要件があれば追加します。

すべてのガジェットが、すべての環境で実行できるわけではありません。ガジェットによっては、実行に特定のブラウザまたはソフトウェアが必要な場合があります。<ModulePrefs> の下に <MayRequire> タグを使用して、ガジェットの特別な要件に関する情報を指定できます。詳しくは、互換性要件の指定をご覧ください。

ステップ 4: 関連するロケール情報があれば追加します。

<ModulePrefs> の下に <Locale> タグを使用して、自分のガジェットが対応するロケールを指定できます。詳しくは、ロケールの指定をご覧ください。

ステップ 5: ユーザーがガジェットを簡単に追加できるようにします。

ガジェットの利用を促すために、[Google に追加] ボタンをガジェットに追加することを検討します。

ステップ 6: ガジェットを Google に送信します。

ガジェットはこちらから Google に送信できます。Google Gadget Editor の [File] > [Publish] コマンドを使用して、ガジェットをコンテンツ ディレクトリに送信することもできます。ディレクトリ内で自分のガジェットを探す方法や、その配置がどのように決まるかについては、Gadgets API FAQ をご覧ください。

送信したガジェットの管理

異なる URL にあるガジェットの複数のバージョンを送信して、正式なバージョンを 1 つ指定したい場合、Submit an Alias Request ページを使用します。

トップに戻る