Google サイト向けガジェット

Google のガジェットとは、ウェブに埋め込むことができる HTML および JavaScript のアプリケーションです。 ページや他のアプリ（Google サイトなど）これらのガジェットを使用すると、Google Workspace の 動的なコンテンツ（ミニチュア アプリケーションやデータベース形式のリストなど）を シームレスなユーザー エクスペリエンスを実現します。

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

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

{sites_name_short} はガジェットの配布プラットフォームとして最適です。 待っていますか？Google サイト用のガジェットの作成を今すぐ始めましょう。

Google サイト ガジェットの概要

一般的に、ガジェットは外部情報を生成したり、ウェブに pull したりする小さなユーティリティのことを指します。 できます。最もシンプルな形式では、ガジェットは小さな .xml ファイルで、 複数のウェブページで同時に利用できるようにしますGoogle サイト（ガジェットの検索結果を含む） この外部情報のパイプとして機能する iframe に一部のガジェットはご利用いただけなくなりました 他のウェブサイトからの情報を渡す iframe

より高度なガジェットでは、動的コンテンツを収集し、Google 内で サイトページを最適化しますサンプル ガジェットをご覧ください。

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

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

対象読者 サイトはすべての閲覧者が使用できます。インタラクティブな傾向があり、 動的コンテンツで表現することを目的としており、 サイトをご覧ください。

そのわかりやすい例がカレンダー ガジェットです。パーソナライズされたカレンダー ガジェットを デフォルトでログイン ユーザーのカレンダーを表示し、カレンダー ガジェットは を使用すると、共同編集者が地域固有のさまざまなカレンダーから選択できるようになります。

サイト ガジェットを使用すると、外部ソース（ パフォーマンス ダッシュボードのライブの図など）を 1 つのページに表示し、 Google サイトで直接公開される説明テキスト。これにより、画像を収集しながら 同じトピックに関する異なる情報を同じビューで表示できます。ガジェットでは、 動的コンテンツを検出できます。

警告: ガジェットは以前の方法で作成されています。 ガジェット API は Google サイトでは動作する場合がありますが、正式にはサポートされていません。組み込みガジェットとフィードベースのガジェット サポートされていません。そのため、Google サイト ガジェットはすべて、 現在のガジェット*API詳しくは、
の投稿をご覧ください。 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 サイト用ガジェットを作成する大まかな手順は次のとおりです。

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

ガジェットを埋め込む

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

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

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

ガジェットのテスト

作成したガジェットは、使用したり他のユーザーが使用できるようにする前に、入念にテストする必要があります。 行います。1 つ以上のテスト用の Google サイトを作成して埋め込みを行い、ガジェットを手動でテストする クリックします。正確な手順については、ガジェットを埋め込むをご覧ください。「 ガジェットの機能と外観は、 できます。したがって、ガジェットをデバッグする最善の方法は、 実際の Google サイトで確認できます。Google サイトのさまざまなテーマを切り替えて、それぞれのテーマでガジェットが正しく表示されるか試してみてください。

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

 ?nocache=1

Google サイトでは、ガジェットを追加、設定するための標準 UI が提供されています。ガジェットを追加すると、プレビューと設定可能な UserPref パラメータが表示されます。さまざまな構成値の更新をテストし、 テストサイトにガジェットを追加します。上で、ガジェットが できます。まず、 定義した UserPref は、サイト管理者が正しく設定できます。

その後、「ガジェットの公開」の「公開の準備」セクションを参照して、他のテストを行ってください。

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

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

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

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

Google サイトでは、UserPref で生成される基本的なガジェット設定インターフェースを設定ビューに置き換えることができます。設定ビューでは、次のスクリーンショットに示すように、さまざまな設定とデータの種類を指定できます。

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

デベロッパーは標準の setpref 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 サイトで使用されている多くのテーマとシームレスに調和します。詳しくは、 ガジェットの作成について詳しくは、ガジェットの概要をご覧ください。残りの このセクションでは、Google サイト ガジェットに固有のガイドラインを紹介します。

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

トップへ戻る