ガジェットを公開

このドキュメントでは、ガジェットを公開するためのさまざまなオプションについて説明します。

ガジェットを配置できる場所

ガジェットは、さまざまなアプリケーションや環境で動作します。API の概要には、いくつかの一般的な選択肢が記載されています。

すべてのガジェットがすべての環境に適しているわけではありません。その環境でサポートされている機能の詳細については、コンテナ、アプリケーション、サイトのドキュメントをご覧ください。

公開に向けた準備

ガジェットを公開する前に、ガジェットを実行するターゲット環境の要件と制限を考慮して、ガジェットをテストする必要があります。

すべてのガジェットに対して次のテストを行う必要があります。

UserPref の値の組み合わせをすべて試してください。
800×600 からできる限り横長まで、さまざまなサイズの画面に表示します。Firefox ウェブデベロッパー拡張機能とリンクします。これにより、Firefox のサイズを簡単に特定のサイズに変更できます。
幅と高さのテストで説明されているように、さまざまなサイズのガジェットをテストします。
ガジェットは、実行する可能性のあるすべての環境でテストします。
ブラウザ（IE 6 以降、Firefox 3.0 以降、Google Chrome 5.0 以降、Safari 4.0 以降）でガジェットをテストします。
さまざまなフォントサイズを試す
- Firefox でフォントサイズを変更するには、[ツール] > [オプション] > [コンテンツ] を選択します。[フォントと色] 領域で [詳細設定] をクリックします。フォント設定を変更して、[ページでのフォントの選択を許可する] のチェックボックスを [オフ] にします。
- Internet Explorer でフォントサイズを変更するには、[ツール] > [インターネットオプション] > [一般] を選択します。[Fonts] ダイアログと [Accessibility] ダイアログを使用して、フォント設定を変更します。

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

幅と高さのテスト

ガジェットの大きさは、それがどこで実行されるかに大きく依存します。詳しくは、コンテナやサイトのドキュメントをご覧ください。

ガジェットの設計とテストでは、200 ～ 600 ピクセルの任意の幅を準備します。一部のガジェットでは、幅がさらに大きくなります。原則として、余分なスペースがある場合に適切に表示されるようガジェットを設計してください。たとえば、マップガジェットはエリアを埋め、画像ガジェットはフレーム内に中央配置し、テキストガジェットはテキストを上部にフロートさせる必要があります（たとえば、通常は下部にクリック用リンクがあるときは、ガジェットウィンドウの下部にフローティングするのではなく、コンテンツの近くに置いてください）。

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

大量トラフィックの発生が想定されるガジェットを作成する場合、可用性を確保して優れたパフォーマンスを実現するための手順が用意されています。ガジェットの 1 日あたりの視聴回数が 20 万回を超えている場合や、1 秒あたり約 1 ～ 2 回のリクエストの場合は、このセクションのヒントを参考にしてください。50 KB のガジェットで 1 日あたり 200,000 件のリクエストを受け取る場合でも、帯域幅は毎月約 300 GB を消費します。

ガジェットが多くのユーザーを引きつける理由はさまざまです。コンテンツディレクトリで人気が高まれば、または、ガジェットを特別なプロモーションや広告に使用すると、トラフィック量が増えることがあります。

高トラフィックガジェットの目標は、0.25 秒（250 ミリ秒）以下でレンダリングすることです。レイテンシの測定に関するガイドでは、ガジェットのパフォーマンスを測定する方法の詳細を確認できます。ガジェットの応答性を改善することは、ユーザーエクスペリエンスを向上させるうえで確実な方法です。ガジェットのパフォーマンスを最適化するためのヒントについては、大量のトラフィックを最適化するをご覧ください。管理のヒントについては、大量のトラフィックの管理をご覧ください。一般的なテストガイドラインは、人気が高いガジェットであれば特に重要です。

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

ガジェットで大量のトラフィックが発生すると思われる場合は、以下のガイドラインを遵守してください。

外部 JavaScript ファイルまたは CSS ファイル（HTML タグ内の「>src"」または「quo &href"」属性で参照されるファイル）は使用しないでください。これを使用すると、別のネットワーク接続のコストが発生します。代わりに、ガジェットの仕様に JavaScript と CSS コードをインラインにします。
type=html ガジェットを使用します。type=url のガジェットは一般に、type=html ガジェットよりもレンダリングが遅くなります。これは、他のホスティングサーバーのパフォーマンスとキャッシュサポートの性能が低いためです。
makeRequest() メソッドは、デフォルトでは約 1 ～ 2 時間コンテンツをキャッシュに保存します。これらの関数で refreshInterval パラメータを使用すると、キャッシュをより頻繁に更新できます。ただし、コンテンツをキャッシュに保存すると、コンテンツをホストしているリモートサーバーに送信されるリクエストの数が最小限に抑えられ、ガジェットのパフォーマンスが向上します。キャッシュから必要以上に鮮度をリクエストしないでください。そうしないと、キャッシュから提供されるリクエストの割合が低くなります。また、フェッチ URL に乱数やタイムスタンプを含めるなど、キャッシュ無効化の手法を使用しないでください。キャッシュ URL に応答するシステムが過負荷になる可能性があります。更新間隔の設定方法について詳しくは、キャッシュの更新をご覧ください。
以下の方法（複数可）を使用して、頻繁に使用するコンテンツまたは値をキャッシュに保存します。
- UserPref を非表示
  長所
  - 高速で、ガジェットを使用して読み込むことができます。サーバーとクライアントの追加の往復は必要ありません
  - ブラウザの要件なし
  短所
  - データは URL を介して渡され、URL の長さの制限が適用されます（ガジェットの URL には大量のデータが渡されるため、実際のデータサイズは小さくなり、数百文字になります）。
- HTML5 WebDatabases
  長所
  - 速い
  - 実質的に無制限のストレージ
  短所
  - ブラウザサポートが必要
- OpenSocial AppData
  長所
  - ブラウザの要件なし
  - 約 10 KB の保存容量（鍵を含む。コンテナごとの制限あり）
  短所
  - データ読み込みにはガジェットの読み込み後に 2 回目のリクエストが必要
  - AppData に保存されているデータは、ユーザーのソーシャルグラフで他のユーザーに公開される可能性がある
ガジェットのパフォーマンスを監視する方法については、レイテンシの測定ガイドをご覧ください。次に、ボトルネックを解消します。
ガジェットの 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 には高品質の迷惑メールフィルタがあります。

トップへ戻る