再ビルドされた Google サイトは、2016 年 11 月 22 日にリリースされました。Sites API では、このバージョンで作成されたサイトにアクセスしたり、サイトを変更したりすることはできませんが、以前の Google サイトには引き続きアクセスできます。

このページは Cloud Translation API によって翻訳されました。

Google サイト向けガジェット

Google のガジェットは、ウェブページや他のアプリ（Google サイトなど）に埋め込むことができる HTML および JavaScript のアプリケーションです。これらのガジェットを使用すると、小さなアプリケーションやデータベース駆動型リストなどの外部コンテンツや動的コンテンツをサイトに組み込むことができます。このようなコンテンツにテキストや画像を組み込むことで、シームレスなユーザーエクスペリエンスを実現できます。

Google サイトのページは、すべてガジェットコンテナの可能性があります。さらに、Google サイトでは、ガジェットと組み合わせて使用することで、強力なアプリケーションを作成できる Data API を提供しています。つまり、ガジェットのデベロッパーは、以前の Google サイト API を活用して、他のウェブデベロッパーとそのオーディエンスのために魅力的なツールを構築したり、自分自身で利用したりできます。

Google サイト用のガジェットを作成すると、数百万人のアクティブユーザーが利用できるようになります。作成したガジェットを Google に送信するだけで、ユーザーはそのガジェットを簡単に閲覧、設定、Google サイトに追加できます。

{sites_name_short} がガジェット用の優れた配信プラットフォームであることがわかったところで、さっそく Google サイト用ガジェットを作成してみましょう。

サイトガジェットの概要

一般的に、ガジェットは外部情報を生成またはウェブページに取り込むための小さなユーティリティです。最もシンプルな形式のガジェットは、小さな .xml ファイルで情報を取得し、一度に複数のウェブページでその情報を利用できるようにします。Google サイトでは、ガジェットを含めると iframe になり、この外部情報のパイプとして機能します。他のウェブサイトの情報を渡す iframe であるガジェットによっては、これ以外のものもあります。

より高度なガジェットは、動的コンテンツを収集し、サイトのページ内でインタラクティブなアプリケーションを提供します。サンプルガジェットをご覧ください。

ガジェットは、次のコンポーネントで構成されます。

ガジェット仕様ファイル - HTML と JavaScript の関数をラップする .xml ファイル。
コンテナページ - ガジェットが挿入されるウェブページ（この場合は Google サイト）。
外部データソース - 省略可能で、.xml ファイルと同じ場所に配置できます。ただし、多くの場合、結果を提供するためにガジェット仕様によって HTTP 経由で呼び出されます。

Google サイト用に作成されたガジェットは、サイトのすべての閲覧者が使用できます。インタラクティブ性が高く、表示よりも動的コンテンツを取り込むことを重視し、サイトのコンテンツを補完するように設計されています。

この区別の好例がカレンダーガジェットです。パーソナライズされたカレンダーガジェットでは、デフォルトでログインしているユーザーのカレンダーが表示されますが、Google サイトのカレンダーガジェットでは、共同編集者がさまざまな場所に固有のカレンダーから選択できる場合があります。

サイトガジェットを使用すると、外部ソースの複数の情報（別個のだが関連するパフォーマンスダッシュボードからのライブ図など）を、サイトで直接公開された説明テキストとともに 1 つのページに表示できます。これにより、同じトピックに関するさまざまな情報を同じビュー内に収集しつつ、視覚的なスペースを節約できます。また、サイトセキュリティチェックでは対応できない動的コンテンツを追加することも可能です。

警告: 従来のガジェット API を使用して作成されたガジェットは、Google サイトで動作する場合がありますが、正式にはサポートされていません。組み込みガジェットとフィードベースのガジェットも同様にサポートされていません。そのため、Google では、すべての Google サイトガジェットを作成する際に最新のガジェット*を使用して作成することをおすすめします。できます。詳しくは、こちらの投稿をご覧ください。
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

サンプルガジェット

次に、シンプルで一般的な [インクルードガジェット] を紹介します。これは、他のウェブコンテンツを通過するための iframe を提供するだけのものです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
          description="Include another web page in your Google Site"
          thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
          screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
          height="800" width="600" author="Google">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="iframeURL" display_name="URL to content" required="true"/>
  <UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
    <EnumValue value="auto" display_value="Automatic"/>
    <EnumValue value="no" display_value="No"/>
    <EnumValue value="yes" display_value="Yes"/>
  </UserPref>
  <Content type="html" view="default,canvas">
  <div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
  <script type="text/javascript">
  gadgets.util.registerOnLoadHandler(doRender);

  function doRender(){
    // setup variables
    var prefs = new gadgets.Prefs();
    var iframeURL = prefs.getString('iframeURL');
    var scroll = prefs.getString('scroll');
    var height = 800;
    var width = 600;

    if (gadgets.window) {
      var viewport = gadgets.window.getViewportDimensions();
      if (viewport.width) {
        var width = viewport.width;
      }
      if (viewport.height) {
        var height = viewport.height;
      }
    }

    var iframe = document.createElement('iframe');
    iframe.setAttribute('width', width + 'px');
    iframe.setAttribute('height', height + 'px');
    iframe.setAttribute('frameborder','no');
    if(scroll){
      iframe.setAttribute('scrolling', scroll);
    }
    iframe.setAttribute('src', iframeURL);

    // set the slideshow to the placeholder div
    var dest = document.getElementById('dest');
    dest.innerHTML = '';
    dest.appendChild(iframe);
  }
  </script>
  </Content>
</Module>

はじめに: ガジェット*をご覧ください。API をご覧ください。

ガジェットをホストする

ガジェットの動作に関係なく、そのファイルを見つけて使用するには、ワールドワイドウェブ上に存在する必要があります。認証なしで HTTP 経由でアクセスできるオンライン上の場所であれば、どのようなものでもかまいません。ただし、選ばれるには、ガジェットが公開ディレクトリで公開されている必要があることにご注意ください。それ以外の場合は、URL を直接挿入して埋め込む必要があります。

ガジェットのホスティングオプションは次のとおりです。

App Engine - ガジェットに必要なすべてのファイルを保存できます。いくつかの設定（プロジェクトの作成とその後のファイルのアップロードなど）が必要です。多数のユーザーに容易にスケーリングできます。すべてのガジェットを保存するアプリケーションと、静的ファイルを提供する別のアプリケーション（次のような app.yaml ファイルを含む）を作成できます。
```
application: <your app name>
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  static_dir: static
```
すべてのガジェットファイルを静的ディレクトリに配置した場合、ローカルディレクトリでファイルを編集し、変更を加えるたびに App Engine にデプロイできます。/static/gadget.xml ファイルがある場合、その URL は http://<your-app-name>.appspot.com/static/gadget.xml になります。
任意のオンラインロケーション - 完全にご自身で管理できますが、完全な責任があります。サーバーでダウンタイムが発生すると、ガジェットのユーザーが停止する可能性があります。

ガジェットの作成

ガジェットは HTML であり、（必要に応じて）JavaScript、Flash、または Silverlight を使用して XML でラップされます。ガジェットデベロッパーガイドには、独自のガジェットを作成するために必要なすべての詳細が記載されています。また、OpenSocial テンプレートを使用して、ガジェット内でソーシャルアプリケーションをすばやく作成することもできます。

Google サイト用ガジェットを作成する大まかな手順は次のとおりです。

ガジェットをホストする場所を指定します。オプションの説明については、ガジェットをホストするをご覧ください。
任意のテキストエディタを使用して、仕様として機能する新しい .xml ファイルを作成します。
コンテンツタイプ（HTML または URL）を決定し、以下のようにガジェットの .xml ファイル内に指定します。
<Content type="html">
これはほぼ例外なく HTML です。この場合、すべてのコンテンツが .xml ファイルで直接提供されると仮定します。ただし、別のファイルでコンテンツを提供する場合は、URL コンテンツタイプを使用します。違いについて詳しくは、コンテンツタイプの選択をご覧ください。
ガジェットの .xml ファイル内にコンテンツを作成するか、仕様で呼び出される別々のファイル内にコンテンツを作成します。既存のガジェットを調べる方法については、サンプルガジェットの表示のセクションをご覧ください。
ユーザーが変更できるガジェットの基本設定を定義します。手順については、ユーザー設定を定義するをご覧ください。より高度な構成を行うには、「高度なユーザー構成を許可する」セクションをご覧ください。
ガジェットの作成者のみが変更できるモジュール設定を定義します。詳しくは、ガジェットの設定の定義をご覧ください。
ガジェットをテストします。手順については、ガジェットをテストするをご覧ください。

ガジェットの埋め込み

ガジェットをサイトのページに埋め込むには、サイトガジェットディレクトリ（iGoogle ガジェットディレクトリと同期）からガジェットを選択するか、その URL を直接追加します。

Google サイトにガジェットを埋め込むには:

新しいガジェットを追加する Google サイトのページに移動します。
編集するページを開きます。
[挿入] > [その他のガジェット] を選択します。
ガジェットを検索し、左側のカテゴリから選択するか、[URL でガジェットを追加] をクリックして .xml ファイルに URL を貼り付けます。[追加] をクリックします。
ヒント: 同じ方法で [URL でガジェットを追加] を使用して、iGoogle やその他のオンライン上のガジェットを埋め込むことができます。
ガジェットのサイズを指定し、使用可能な設定から選択して [OK] をクリックします。ガジェットがページに追加されます。
ページを保存して、サイトでガジェットを表示、テストします。

ガジェットのテスト

ガジェットを作成したら、使用する前に徹底的にテストし、他のユーザーが同じことを行えるようにする必要があります。1 つ以上のテスト用の Google サイトを作成し、ガジェットを埋め込んで、ガジェットを手動でテストします。正確な手順については、ガジェットの埋め込みセクションをご覧ください。ガジェットの機能や外観は、ガジェットを含むサイトによって異なります。そのため、ガジェットをデバッグする最善の方法は、実際の Google サイトのコンテキストでガジェットをテストすることです。Google サイトのさまざまなテーマを切り替えて、それぞれのテーマでガジェットが正しく表示されることを確認します。

ガジェットをテストすると、必然的にバグが発見され、ガジェットの .xml ファイルを修正する必要があります。XML を調整するときは、ガジェットのキャッシュを無効にする必要があります。設定しないと、変更内容がページに表示されません。Google サイトでの指示がない限り、ガジェットの仕様はキャッシュされる。開発中にキャッシュをバイパスするには、（ガジェット仕様の .xml ファイルの URL ではなく）ガジェットを含む Google サイトのページの URL の末尾に、次の行を追加します。

 ?nocache=1

Google サイトでは、標準 UI でガジェットを追加、設定できます。ガジェットを追加すると、プレビューと、設定可能な UserPref パラメータが表示されます。さまざまな設定値の更新や、テストサイトへのガジェットの追加をテストできます。サイトでガジェットが想定どおりに動作することを確認します。定義したすべての UserPref がサイト管理者によって正しく設定されているかどうかをテストする必要があります。

その他のテストについては、「ガジェットの公開」の「公開の準備」セクションをご覧ください。

高度なユーザー構成を許可する

すべてのガジェットで、ガジェット仕様ファイルの UserPref セクションを通じて、基本的なユーザー設定を行うことができます。これらは通常、サイズ、スクロールバー、枠線、タイトル、ガジェット固有の設定に影響します。次のスクリーンショットをご覧ください。

サイトガジェットのユーザー設定

しかし、標準の UserPref コンポーネントよりも高度な設定を使用する方がガジェットでメリットが得られる場合も多くあります。多くの場合、設定には、カスタムビジネスロジック、検証、選択ツールなどの機能を含める必要があります。ガジェットの UserPref セクションで生成されるインターフェースは、限られた数のデータ型（文字列、列挙型など）しかサポートしないため、URL や日付などの入力の検証は実施できません。

さらに、閲覧者とエディタが同じである iGoogle などのコンテナでは、ガジェット作成者は標準ビューの一部として設定を拡張できます。Google サイトでは、閲覧者が常に編集者であるとは限らないため、ガジェット作成者は、閲覧ユーザーに設定の更新権限があることを保証できません。Google サイトなどのソーシャルコンテナでは、作成者のみが設定を変更できるようにすることは禁止されています。

Google サイトでは、UserPref で生成されるガジェットの基本設定インターフェースを設定ビューに置き換えることができます。設定ビューでは、以下のスクリーンショットに示すように、多くの追加設定とデータタイプを指定できます。

サイトガジェットの構成ビュー

設定ビューは、挿入時または編集時に UserPref 設定の代わりに表示されます。このビューを使用して、カスタムインターフェースでユーザー設定を行うことができます。また、カスタム入力要素を使用することもできます。たとえば、地図の座標を入力する代わりに、地図上で位置を選択できます。

デベロッパーは標準の setprefs API を使用して、このビューの設定を保存できます。詳しくは、ガジェットの XML リファレンスとデベロッパーの基礎コースの「状態の保存」セクションをご覧ください。これらのビューを使用すると、コンテナアプリケーションで補足的な構成情報を提供できます。このビューは、ガジェットの .xml 仕様ファイルの UserPref セクションの後に、次のような開始タグで設定されます。

  <Content type="html" view="configuration" preferred_height="150">

たとえば、上記の構成ビューを提供する news.xml ガジェットには、このセクションが含まれています。

<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
  .config-options {
    margin: 10px;
  }
  .label {
    font-weight: bold;
    width: 35%;
    vertical-align: top;
  }
  .gray {
    color:#666666;
  }
  html {
    font-family:arial,sans-serif;
    font-size:0.81em;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.5;
  }
  a:link, a:visited, a:active { text-decoration: none }
</style>
  <img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
  <table class="config-options">
  <tr>
  <td align="left" class="label">Size:</td>
  <td align="left">
  <select id="size" onchange="Update()">
  <option selected="selected" value="300x250">Medium rectangle (300x250)</option>
  <option value="728x90">Leaderboard (728x90)</option>
  </select>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Select sections:</td>
  <td align="left">
  <table>
  <tbody><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
  <td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
  <td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
  <td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
  <td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
  <td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
  <td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
  </tr></tbody>
  </table>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Or create one:</td>
  <td align="left">
  <input type="text" id="query" onchange="Update()"/>
  <br/>
  <span class="gray">Example: 2010 Olympics</span>
  </td>
  </tr>
  <tr>
  <td colspan="2">
  <div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
  <iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
  style="border:0;margin:0;"
  scrolling="no" allowtransparency="true"></iframe>
  </div>
  </td>
  </tr>
  </table>
  <script type="text/javascript">
  var prefs = new gadgets.Prefs();

  function getSelectedTopics() {
    var selected = [];
    var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
    for (var i = 0; i < topics.length; i++) {
      if (document.getElementById('sec_' + topics[i]).checked) {
        selected.push(topics[i]);
      }
    }
    return selected.join(',');
  }

  function setSelectedTopics(selected) {
    if (selected && selected.length >= 0) {
      var topics = selected.split(',');
      for (var i = 0; i < topics.length; i++) {
        document.getElementById('sec_' + topics[i]).checked = true;
      }
    }
  }

  function Update() {
    var topic = getSelectedTopics();
    var query = document.getElementById('query').value;
    var size = document.getElementById('size').value;

    var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
        'format=SIZE&element=true';
    var iframe = document.getElementById('preview_ifr');
    url = url.replace(/SIZE/, size);
    if (topic.length > 0) {
      url += '&topic=' + topic;
    }
    if (query.length > 0) {
      url += '&q=' + encodeURIComponent(query);
    }
    iframe.src = url;
    if (size == '728x90') {
      iframe.style.width = '728px';
      iframe.style.height = '90px'
    } else {
      iframe.style.width = '300px';
      iframe.style.height = '250px';
    }
    prefs.set('size', size);
    prefs.set('topic', topic);
    prefs.set('query', query);
    gadgets.window.adjustHeight();
  }

  function Initialize() {
    var size = '__UP_size__';
    if (size.length > 0) {
      document.getElementById('size').value = size;
    }
    var query = '__UP_query__';
    if (query.length > 0) {
      document.getElementById('query').value = query;
    }
    setSelectedTopics('__UP_topic__');
    Update();
  }

  gadgets.util.registerOnLoadHandler(Initialize);
  </script>
  </Content>

この例と設定ビューでサイト固有のその他のガジェットはこちらをご覧ください:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml

サイトのガジェットに関するベストプラクティスの実践

ユーザーはウェブ上で見栄えを良くしたいと考えています。以下のおすすめの方法を実践すると、ガジェットが Google サイトで使用されている多くのテーマとシームレスに調和します。ガジェットの作成の詳細については、ガジェットの概要をご覧ください。このセクションの残りの部分では、Google サイトのガジェットに固有のガイドラインを示します。

ガジェットは一般に公開されるため、ガジェットの仕様やタイトルに機密情報を含めないでください。たとえば、内部のプロジェクト名は含めないでください。
ガジェットの公開範囲を最小限に抑えるため、iGoogle ガジェットディレクトリやその他の公開リストサービスには送信しないでください。代わりに、すべてのユーザーに URL のみを含めるようにしてください。さらに、（すべてのコンテンツが含まれる通常の HTML タイプではなく）URL タイプのガジェットを作成して、別のファイルでそのコンテンツを呼び出すだけで済みます。このパススルーオプションを使用すると、2 番目のファイルの URL のみが公開されます。HTML と URL のガジェットの違いについては、デベロッパー向け基礎の「コンテンツタイプを選択する」セクションをご覧ください。ガジェットをマスキングする別の方法については、独自のガジェットを作成する方法についての説明の「ガジェットは一般公開」セクションをご覧ください。
最も重要なことは、ガジェットを複数の異なるサイトでテストすることです。ガジェットがさまざまなテンプレートに溶け込むように、サイトの背景色、テキストの色、フォントフェースを変更します。

トップへ戻る