Gadgets for Google Sites

  Googleサイト向けガジェット

Google Sites Gadgets
Googleでは、ガジェットはGoogleサイトを含むwebページや他のアプリケーションに埋め込むことが出来る、HTMLやJavaスクリプトのアプリケーションです。これらのガジェットはサイト内にシームレスなユーザー経験のためにテキストやイメージを組み込んだ小型アプリケーションやデータベース駆動のリストのような外部の動的なコンテントを含む能力を提供します。
あなたがまだガジェットを見たことがないなら、ガジェット、iGoogleガジェットディレクトリのセントラルインプリメンテーション(?)において多くのガジェットのサムネイルと説明を見つけるでしょう:
全てのサイトページは潜在的なガジェットコンテナです。 その上に、サイトはパワフルなアプリケーションを作成するためにガジェットと連携して用いることが出来るData API を提供します。それはあなた自身が使用するだけでなく、ガジェット開発者としてあなたが他のweb開発者と彼らのユーザー向けの魅力的なツールを構築してサイトAPIにテコ入れ出来るということを意味します?
あなたがサイト用のガジェットを構築すると、数百万のアクティブユーザー達がそれを利用可能になります。私たちにあなたのガジェットを提出すれば、それはユーザーが容易にブラウズ、設定、彼らのサイトへガジェットを追加出来るようになります。
そう、今あなたはGoogleサイトがあなたのガジェットを公開するのに素晴らしいプラットフォームであることを知っています。何をのんびりとしているのですか?今すぐ、Googleサイト向けガジェットの作成を始めましょう!

Get Started(※リンクはほとんどデッドリンクというかsite_gadgets.htmlが抜けてる?)

最も単純な形において、Googleサイト向けは他のガジェットと似ています。あなたがもし、まだガジェットに慣れ親しんでないのななら、作成を始めるためにちょっとGadget Developer Guide を見てください。それからこのページに戻ってきてGoogleサイト特有の説明を読んでください。
iGoogle、Blogger、その他のGoogleサービス用ガジェットの多くはGoogleサイトで動きます。このセクションではサイトガジェットがどのように明示的に違うのかを説明します。
ガジェットサンプルが見つけられる場所とソースの見方を説明します。
ガジェットファイルを送信(配置)出来る様々な場所について説明します。
必要とされる詳細な説明へのリンク付きのガジェット作成のおおまかな手順です。
Googleサイトへガジェットを挿入するステップです。
Googleサイト上でガジェットをテストする方法を説明します。
ユーザーが追加設定にアクセスできるconfigurationビューの作成について説明します。
サイトスタイルとレイアウトの大きいセットでの見栄えがよいガジェット作成のベストプラクティス(最も効率的な方法、良い慣例)について説明します?
今はガジェットはバグもなく申し分ありません。世界に向けて公開しましょう!

サイトガジェットの概要

一般的に、ガジェットはwebページへ外部の情報を生成したり、引っ張ってくる小さいユーティリティです。その最も単純な形では、ガジェットは一度に複数のwebページで使用できる能力を備えた情報を取得する小さい.xmlファイルです。Googleサイトでガジェットを含むということは、この外部の情報用導管(導く管、ダクト)として振舞うiframeを結果として生じさせます。幾つかのガジェットは別のwebサイトからの情報を流すだけのiframeです。
より高度なガジェットは動的コンテンツを収拾し、対話的アプリケーションをあなたのGoogleサイトページ内に提供します。 既に使用出来るガジェットについてはガジェット例の閲覧を見てください。
ガジェットは以下のコンポーネントから成ります:
  • Gadget Specファイル – HTMLとJavaScriptの関数をラップした(包んだ).xmlファイル
  • コンテナページ – ガジェットが挿入されるWebページ。このケースではGoogleサイトです。
  • 外部データソース – これはオプションです。.xmlファイルと同じ場所に配置出来ますが、その結果を提供するためにHTTP越しにgadget specによって呼び出されます。
iGoogleでは、ガジェットは個人を対象とする傾向があります。例えば、iGoogle上の一般的なガジェットはユーザーが、彼らのカレンダーを見る、TODOリストをつける、彼らの星占いを読む、ゲームをするなどのようなことをするのを可能にします。 
GoogleサイトでのガジェットはiGoogleや他のGoogleAppsで使用されるガジェットと同一であることがあり得ます。違いはその意図です。iGoogleで使用するために公開されているガジェットが個別のユーザーを持つ一方でGoogleサイト向けに構築されたガジェットはサイト閲覧者全てに使用され得ます。これらのガジェットはプレゼンテーションよりも動的コンテンツを引っ張ってくることに焦点をあわせた、より対話的であるという傾向を持ち、スタンドアロンというよりもサイトの内容を補完するように設計されています。 
カレンダーガジェットはこの区別の良い例です。iGoogleでのパーソナライズされたカレンダーガジェットはデフォルトではおそらくログインしたユーザーのカレンダーを表示し、一方、Googleサイトのカレンダーガジェットはコラボレーターが各種のロケーション特有のカレンダーから選択することを可能にすることが出来ます。
サイトガジェットはサイトで直接公開されている説明のテキストと共に単一のページで外部ソース(関連したパフォーマンスダッシュボードではなく別個のライブダイアグラムと言います?)からの複数の情報を公開することを可能にします。ガジェットは同じビューの同じトピック上で異なる情報を収拾する間、visual real estate(画面の状態?)を保ちます。 更にガジェットは別の方法でサイトセキュリティチェックによって妨げられる動的コンテンツを含むことも可能にします。
警告legacy gadgets API で構築されたガジェットはGoogleサイトでは動くかもしれませんが、公式にサポートはしていません。 組み込み型とフィードベースのガジェットも同様にサポートしていません。したがって、Googleは現行のgadgets.* APIを使用して全てのサイトガジェットを構築することを推奨します。この記事の説明を参照してください:

ガジェット例の閲覧

iGoogle gadget directoryで何千もの既存のガジェットを見ることが出来ます。さらに調査したいガジェットを見つけたら、 XMLをみる為にガジェットのリンク先ページの右側のナビゲーションでView source をクリックしてください。
以下は、シンプルだけれども人気のある、他のwebの内容を流すiframeを提供するくらいの機能をもつInclude gadget です: ※以下のサンプルは

の次のimgタグのsrc属性のダブルクォーテーションのエラーで動かない?上のリンクのソースだと動く。

xml version="1.0" encoding="UTF-8" ?>

 
title="Include gadget (iframe)" title_url="http://sites.google.com/"
         
description="Include another web page in your Google Site"
         
thumbnail="http://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
         
screenshot="http://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
         
height="800" width="600" author="Google">
   
feature="dynamic-height"/>
 

 
name="iframeURL" display_name="URL to content" required="true"/>
 
name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
   
value="auto" display_value="Automatic"/>
   
value="no" display_value="No"/>
   
value="yes" display_value="Yes"/>
 

 
type="html" view="default,canvas">
 
id='dest'> src=/code.google.com/apis/sites/gadgets/"http://www.google.com/ig/images/spinner.gif">
 

 

ガジェットタグと予期される内容?の完全な説明はスタートガイド: gadgets.* APIを見てください。

ガジェットのホスティング

ガジェットのすることに関わらず、それ自身のファイルは見つけられ使用される為にワールドワイドウェブ上に存在しなければなりません。この条件の例外は Google Secure Data Connectorを使用して非公開で保存されたプライベートガジェット(Google Apps Premierのカスタマー(顧客)のみが利用可能) です。とは言っても?、認証なしにHTTPでアクセス出来る任意のオンライン上で動作します?  ガジェットは選択できる?パブリックディレクトリで公開されていなければならないことを覚えておいてください。さもなければ、ユーザーはそのURLを直接挿入することによって埋めこまなければなりません。
以下はガジェットホスティングオプションです:
  • App Engine – ガジェットによって要求される全てのファイルを格納出来ます。多少のセットアップ(即ち、プロジェクトの作成とその後のファイルアップロード)を必要とします。しかし多くのユーザーに容易に出来るでしょう? ガジェットや他の物全てを格納するアプリケーションとapp.yamlファイルみたいなものを含めて静的ファイルを提供するための別のものを作成できます? :

    application: <your app name>
    version
    : 1
    runtime
    : python
    api_version
    : 1

    handlers
    :
    - url: /.*
      static_dir
    : static
    全てのガジェットファイルを静的ディレクトリへ置いたら、ローカルディレクトリで編集し変更を加える度にAppエンジンへデプロイします。ファイルを/static/gadget.xml に置いた場合、そのURLは次のようになります: http://.appspot.com/static/gadget.xml
  • code.google.com – Appエンジンのように、ガジェットに必要な全てのファイルを格納することが出来ます。更にプロジェクトの作成が必要ですが、Appエンジンよりもセットアップ時間は短く済みます。これはガジェットを複数の人間が利用する、またはGoogleコードでコードをホスティングすることによってコミュニティが恩恵を受けると感じる場合にとても便利です? code.google.comはAppエンジンより帯域が狭いので通信量が極めて高いと問題が発生するかもしれません。
  • Google Gadget Editor – 使用するのは簡単ですが、保存するのに制限があります。.XMLファイルの保存が出来るブラウザでのみ編集が可能です? これを使用することは 必要な静的ファイル(画像、CSS、JavaScriptファイルなどなど)がどこかでホスティングされている必要があるということを意味します。
  • あなたの選択した任意のオンラインロケーション(場所) – 完全にあなたの管理下ですが、完全に責任を負います。 あなたのサーバのダウンタイム(休止時間)は結果としてあなたのガジェットのユーザーにとっての停止時間を発生させるかもしれません。
  • プライベートガジェットディレクトリ –  Google Apps Premier のカスタマーにのみ,  ドメインのメンバーにのみ見ることが出来る組織のガジェット用のプライベートGoogleストレージが提供されています。 Google Gadget Editorで作成された公開ガジェットのようにプライベートガジェットはプライベートディレクトリに保存されたそれ自身の.xmlファイルを持ちます。これはガジェットに要求される他の全てのファイルをガジェットによって呼び出される別のオンラインリポジトリに置いておかなければならないことを意味します。 (このケースではファイアウォール内) デベロッパーステップ用のサイトヘルプセンターの記事 Developing Private Gadgets for Google Sitesとプライベートガジェットディレクトリをメンテナンスについて説明しているPrivate Gadget Administrator’s Guideを見てください?

ガジェットの構築

ガジェットはHTMLと(オプションで)XMLでラップされたJavaScript、Flash、Silverlightです。 gadgets.* API デベロッパー ガイドはガジェットの構築に必要な詳細全てを提供します。更に OpenSocial テンプレートを使って素早くガジェットでソーシャルアプリケーションを構築出来ます。
以下はサイト向けガジェットの作成用のおおまかな手順です:
  1. いくつかのリポジトリは特定のエディタ(特にGoogle Gadget Editor)の使用を必要とするのでガジェットが何処でホスティングされるか決定します? 選択についての説明はガジェットのホスティングセクションを見てください。
  2. あなたが選んだテキストエディタを使用して gadget specファイルとして機能する新しい.xmlファイルを作成します?
  3. コンテンツタイプをHTMLかURLのどちらかに決定し、gadget .xmlファイル内で次のように指定します:

    これはほとんど常にHTMLで、全ての内容が.xmlファイルで直接提供されると仮定されます。しかしもし分離したファイルで供給するつもりの場合はURLコンテンツタイプを使用します。これらの二つの違いについての完全な説明はChoosing a Content Typeを見てください。
  4. gadget .xml内、または gadget specファイル?によって呼び出される分離したファイルに内容を作成します。 既存のガジェットを調査する方法についてはガジェット例の閲覧セクションを見てください。
  5. ユーザーによって変更することが出来るガジェットの基本プリファレンス(好みの設定)を定義します。説明はユーザー設定の定義 を見てください。より高度なコンフィギュレーションを提供するためには、アドバンスト(高度な)ユーザー設定の使用セクションを見てください。
  6. ガジェットの著作者のみが変更出来るモジュールプリファレンスを定義します。詳細はガジェット設定の定義を見てください。
  7. ガジェットをテストします。説明はガジェットのテストセクションを見てください。

ガジェットの埋め込み

ガジェットはサイトガジェットディレクトリ(iGoogleガジェットとディレクトリと同期しています)から選択するかそれ自身のURLを含むことによりサイトページに埋め込むことが出来ます。更に、Apps Premierのカスタマーは組織のドメイン下にあるサイトガジェットディレクトリ内にリストされるプライベートガジェットから選択することも出来ます。
Googleサイトへガジェットを埋め込み為には:

  1. 新しいガジェットを含ませるサイトページへ行きます。
  2. ページの編集を開きます。
  3. [挿入]-[その他のガジェット…]を選択します。























  4. ガジェットを検索し左のカテゴリから選択するか、URLを指定してガジェットを追加をクリックして.xmlファイルへのURLを貼り付けます。それから追加をクリックします。
    Tip: この同じURLによるガジェットの追加の方法はiGoogleや他のオンライン上の何処かから埋め込む為に使用することが出来ます?















  5. ガジェットの縦横を指定し、利用可能な設定を選択して、OKをクリックします。ガジェットがページに追加されます。
  6. (実際の表示を)見る為にページを保存し、サイトでガジェットのテストをします。

ガジェットのテスト

ガジェットを構築した後、それを使用したり、同じように使えるよう他のユーザーに許可する前に徹底的にテストすべきです。最初にGadget Checker(他の公開ガジェットを確認するためのガジェット。ガジェットファイルを開き、共通エラーを探します。)をインストールします。
それから1つ以上のテスト用Googleサイトを作成しガジェットを埋め込んで、手動でガジェットをテストします。正確な方法はガジェットの埋め込み セクションを見てください。ガジェットの機能性と外見はそれを含むGoogleサイトに依存します。 したがって、ガジェットをデバッグする一番良い方法は、実際のGoogleサイトの環境でテストすることです。それぞれのテーマでガジェットの正しく表示されるか確かめる為に色々なサイトテーマを切り替えてみてください。
ガジェットをテストすると、必然的にバグを発見しgadget .xmlファイルを訂正する必要があるでしょう。XMLを調整している間はガジェットキャッシングを使用不可能にしておくべきです。さもなければ、あなたの変更はページに現れないでしょう。  (明示的に)Googleサイトに指示しない場合Gadget specファイルはキャッシュされます。開発中、キャッシュを回避するには、ガジェットをふくんでいるGoogleサイトページのURLの末尾に次のパラメータを追加します。(gadget spec .xmlファイルのURLではなく):
 ?nocache=1
Googleサイトはガジェットを追加・設定(調整)するための標準ユーザーインターフェースを提供します。ガジェットを追加した時、UIはプレビューを表示し設定出来る任意のUserPref パラメータを表示します。色々な設定値を更新したり、テストサイトへガジェットを追加してテストしてください。そのサイト自身でガジェットが予期した動作をするか確認してください。あなたが定義した任意の UserPrefサイト管理者によって正しく設定出来るかテストすべきです。
それから、実行すべき他のテストについては公開の準備を参照してください。

アドバンスト(高度な)ユーザー設定の使用

全てのガジェットはgadget specファイルのUserPrefセクションを通じて生成された基本ユーザープリファレンスをセットする機能を提供出来ます。次の画面ショットで表されるように、これらは概して縦横のサイズ、スクロールバー、枠線、タイトル、ガジェット特有の設定に影響します:


しかし、多くの場合、標準のUserPrefコンポーネントよりも高度なプリファレンスの方がより多い利益をガジェットにもたらします。プリファレンスはしばしばカスタマービジネスロジック、検証、ピッカー(摘み手?)のような機能を含む必要があります。 ガジェット UserPrefセクションから生成されたインターフェイスは限られたデータ型(string、enumなど)をサポートするので、URLや日付のような入力の検証をするこどが出来ません。
さらに、閲覧者と編集者が同じiGoogleのようなコンテナでは、ガジェット作成者は標準ビューの一部として拡張設定できます?(can extended configuration?)  Googleサイトでは、閲覧者は必ずしも編集者ではないのでガジェット作成者はプリファレンスを更新するためにユーザーがアクセスするビューを保証できません。 Googleサイトのようなソーシャルコンテナは作成者以外のユーザーがプリファレンスを変更することを許可出来ません。
Googleサイトでは、次に示されるスクリーンショットのように UserPrefによって生成される基本ガジェットプリファレンスインターフェイスは多くの追加設定とデータ型を供給出来るconfiguration viewに置き換えることが出来ます:


configurationビューは挿入時または編集時にUserPref 設定の代わりに表示され、カスタムインターフェイスを備えたユーザープリファレンスをセットすることを可能にします。そしてマップ座標を入力するのではなくマップ上の位置を選択するような、カスタム入力要素を持つことが出来ます。
開発者はこのビューでプリファレンスをセーブするために標準setprefs APIを使うことが出来ます。さらなる詳細はガジェット XML リファレンス状態の保存を見てください。これらのビューはコンテナアプリケーションに補足の設定情報を提供することに可能にし、gadget  .xml specファイル内の以下開始タグを備えたUserPrefセクションみたいに作成します?:
例えば、上のこのセクションを含むconfigurationビューを提供するnews.xml ガジェットです?:
 type="html" view="configuration" preferred_height="300">
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 }

 
alt="Google Web Elements" src=/code.google.com/apis/sites/gadgets/"http://www.google.com/webelements/images/web_elements_logo.gif"/>
 
class="config-options">
 

 
align="left" class="label">Size:
 
align="left">
 
id="size" onchange="Update()">
 
selected="selected" value="300x250">Medium rectangle (300x250)
 
value="728x90">Leaderboard (728x90)
 

 

 

 

 
align="left" class="label">Select sections:
 
align="left">
 

 

 
type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories
 
type="checkbox" onclick="Update()" id="sec_w" value="w"/> World
 
type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business
 

 
type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics
 
type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation
 
type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment
 

 
type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology
 
type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports
 
type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health
 

 

 

 

 

 
align="left" class="label">Or create one:
 
align="left">
 
type="text" id="query" onchange="Update()"/>
 


 
class="gray">Example: 2010 Olympics
 

 

 

 
colspan="2">
 
id="preview" style="margin-top:10px;overflow:auto;width:100%;">
 
id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
 
style="border:0;margin:0;"
 
scrolling="no" allowtransparency="true">
 

 

 

 

 

 
以下で この例と他のConfigurationビューを備えたGoogleサイト固有ガジェットを見ることが出来ます:

サイトガジェット向けベストプラクティスに習う

サイトユーザーはweb上で(自分のサイトを?)良く見せることを欲します。 ガジェットがサイトで使用される多くのテーマと継ぎ目なく調和するように、これらのベストプラクティスに習ってください。全てのガジェット向けのベストプラクティスについてはPromote Your Website’s Content Using Gadgets 、サイトガジェットに特定のガイドラインについてはこのセクションの残りを見てください。.
  • ガジェットは誰にでも閲覧出来るのでgadget spec内に機密情報またはタイトルを入れないでください?例えば、内部のプロジェクトネームは含まないでください。
  • ガジェットの可視性を最小化する場合はガジェットをiGoogleガジェットディレクトリまたは他の公開リストサービスに提出しないでください。代わりに全てのユーザーにURLのみでガジェットを含まさせてください。さらに、単にその内容を含む別のファイルを呼び出すURLタイプのガジェット(全ての内容を含む一般的なHTMLのタイプではなく)を作成出来ます。このパススルーオプションで、二番目のファイルのURLだけが公開されます。ガジェットのHTMLタイプとURLタイプの違いはコンテンツタイプの選択とガジェットを覆う他の方法についてはGadgets are Public section of Writing Your Own Gadgetsを見てください。
  • Google Apps Premier カスタマーでさらにガジェットの可視性を最小化したい場合はガジェット全てを保存するためのプライベートディレクトリを使用してください。
  • 最も重要なのは、幾つかの異なるサイトでガジェットをテストすることです。 ガジェットが様々なテンプレートと調和することを確認するためにサイトの背景色、テキストカラー、フォントフェイスを変更してください。

ガジェットの提出

ガジェットをテストし終えたら、iGoogleガジェットディレクトリへガジェットを提出する準備が出来ています。 最初にiGoogle コンテンツ ディレクトリへの公開を読んでください。 それからGoogleへガジェットを提出します! iGoogleディレクトリとGoogleサイトディレクトリにあなたのガジェットが現れるのに数日かかるかもしれません。あなたはその間、URLによってページへガジェットを追加出来ます。その方法はガジェットの埋め込みを見てください。