Gadgets API

概要

Google ガジェットとは、コンテナの一部として動作する小規模なコンテンツ・アプリケーションのことです。
Googleサイト上で使用すると効果的です。
XMLの基本と、多少のHTML/JavaScript/CSSの知識があれば、どなたでも簡単にガジェットを作成し、公開できます。

事前の注意事項として、作成されたガジェットは必ず公開されなければならないということです。どのようなものでも非公開にすることはできないことに注意してください。

単純なHTML/Javasript/CSSで実装されるようなものは、後述しているようなガジェット特有の手法は必要ありません。
標準で公開されている「HTMLボックス」ガジェットを導入し、必要なコードを入力するだけで実装できます。コラムを参照してください。

*本ページでは、直にガジェットを作成し、公開できるようになることを目的に作成されたいます。


対象

バージョン管理を理解・使用しており、HTML/JavaScript/CSSの基本的な知識を有しておられる方が対象です。
必要な方は、それぞれのリンク先を参照してください。

深い知識を持っておられる方は、逆に違和感を感じることと思います。
作成内容・配置場所・デバッグ方法・公開手順...
しかし、下記で理解しやすいように纏めておりますので、慣れれば簡単に作成できることがご理解頂けると思います。
このような方は、直接「開発・試験方法」を参照して頂ければ、直に開発が始められると思います。

実装例

まずは、お決まりの「Hello, world!」です。

コード

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
        <ModulePrefs title="hello world example" /> 
        <Content type="html">
            <![CDATA[
                Hello, world!
            ]]>
        </Content> 
</Module>

結果

ホスティングする場所は問題ではありませんが、下記は上記コードのガジェットをGoogle Codeにホスティングした結果です。
http://ins-test.googlecode.com/git/ins-test.xml

hello world example

ガジェットの仕様の URL が見つかりませんでした

慣れるまでは、違和感を感じるかもしれませんが、
慣れれば非常に簡単に高機能なガジェットを作成することができるようになります。

ガジェットの構成

ガジェットは実装例にもありますようにXMLで記述します。
詳細な属性等の情報は、リンク先を参照してください。

セクション 説明
<Module>1つのガジェットの定義本体。
この中に、ガジェット情報・環境定義情報・コンテンツ情報を包含することになります。
<ModulePrefs>タイトル、作成者、最適に表示されるサイズなどのガジェットの特性を記載します。
<Locale>タグを使用することで、国際化も簡単に対応することができます。
詳細は、ガジェットと国際化 (i18n)を参照してください。
<UserPrefs>ユーザーがガジェットの設定を指定できるようにするためのコントロールを定義します。
ここで定義した内容は、

var prefs = new gadgets.Prefs();

で取り出すことができます。
勿論、それぞれの項目にはname属性を指定し、取り出せるようにしている必要があります。
 <Content>実際のコンテンツを定義します。
属性に「type=html」「type=url」があります。

type=html
インラインで記述します。
別途ネットワーク接続が発生してしまいますので、パフォーマンスは低下してしまいます。余程の理由がない限り、使用は極力さけるべきです。

type=url
コンテンツは外部ホスティングされていることを示し、そのURLを「href」属性で指定する必要があります。

インラインの場合

<![CDATA[
...
]]>

中に、各コンテンツを記述します。

APIの種類

それぞれのAPIの使用方法・説明は、下記リンクから、該当ページを参照してください。
(リンクされていないものは準備中です)
API 説明 適用
OpenSocial ソーシャル ガジェット作成機能を使用できます。 Orkut や iGoogle サンドボックスなど、OpenSocial API をサポートするコンテナ用のガジェットで利用できます。
Maps データを地図に重ねて、地理情報に応じてデータを表示する機能を追加します。 Google マップ用のガジェット (マプレット) で利用できます。
Finance API Google Finance から株式情報を取得して表示します。 iGoogle 用のガジェットで利用できます。
Ads 動的なリッチ メディア広告を提供するガジェットを作成します。 Google AdSense により動作するガジェットで利用できます。
カレンダー カレンダー上で動作するガジェットを作成し、時間に応じて変化する情報を表示します。 Google カレンダー用のガジェットで利用できます。
スプレッドシート  スプレッドシート上のデータをやり取りするガジェットを作成します。 スプレッドシート内だけでなく、ガジェットをサポートする別のウェブ ページ (iGoogle など) で利用できます。

開発・試験方法

まずはバージョン管理の準備を行います。
Google Codeでホスティングするためには必須です。

Coda2のようなアプリケーションと併用すると、開発効率がアップし、開発環境の統一化もはかれます。
バージョン管理に詳しくない方・初めての方は、こちらを確認してください。
  1. http://code.google.com/hosting にアクセスします。
    必要に応じて、Googleアカウントでログインしてください。

  2. 「Create a new project」をクリックします。
  3. 「Project name」を入力します。
    これは全て半角英数字で入力する必要があります。
    一度設定すると変更できませんので、注意してください。
  4. 「Project summary」を入力します。
    これはプロジェクトの要約です。
    後に修正可能です。
  5. 「Description」を入力します。
    これはプロジェクトの詳細説明です。
    後に修正可能です。
  6. 「Version control system」を選択します。
    どれもで差はありませんが、GitかSVNを選択する方が無難です。
    Gitを選択した場合には、クローンのカレント・ディレクトリに「.netrc」を準備する必要があります。
    指定する内容は、http://code.google.com/hosting/settingsで確認できます。 
    注意しなければならないことは、アカウント自体はGoogleアカウントなのですが、パスワードは違いますので、Gitを選択された場合には、必ず確認してください。
    勿論パスワードの変更はサイト上から行うことになります。
  7. 「Source code license」を選択します。
    プロジェクトを公開する場合のライセンスです。
  8. 「Project label(s)」を選択します。
    必須ではありませんが、プロジェクトに含まれるファイルの種類等を必要なだけ選択すると良いでしょう。
    検索対象にもなります。

これでバージョン管理の準備は完了です。
クローンを作成し、開発を初めてください。
下記に簡単ですが、編集・試験の手順を示しておきます。

編集・試験手順は、
  1. ローカルでコードを編集する。
  2. バージョン管理クライアントで編集したコードをプッシュします。
  3. 下記URLをその他のガジェットととして追加する。
    SVNの場合
      http://<プロジェクト名>.googlecode.com/svn/trunk/<作成したガジェット>.xml
    Gitの場合
      http://<プロジェクト名>.googlecode.com/git/<作成したガジェット>.xml
    この処理は一度だけです。
    更新する度に行う必要はありません。
  4. ガジェットを追加したページを更新する。
これで、ガジェットを埋め込んだページを表示すると、確認できます。
修正を加えてプッシュすると、リアルタイムに反映されます。
テストは、ブラウザの開発機能で行うことになるでしょう。
1〜4を繰り返すことになります。

公開方法

上記で説明しております通り、Google Codeにホスティングすることが簡単ですが、それ以外の場合の作成したガジェットの公開方法は、Google Gadget Editor の [File] > [Publish] コマンドを使用して送信することができます。
その他の方法もりますが、その他の方法で公開する場合の詳細は、「Googleガジェット公開」を参照してください。
送信すれば、使用するためのURLが表示されますので、忘れないようにしてください。
後述させて頂きます「Googleに追加」ボタンを付ける場合にも必要となります。

公開されたガジェットはソースコード(XMLのみ)は閲覧可能になってしまうことを理解しておく必要があります。

最適化方法

基本的なことは、表示させる速度を下げないことです。
下記では、一般的な最適化を行っていることを前提に、ガジェットで考慮する必要のある項目に的を絞り込んでいます。
  • type=urlは出来るだけ避ける。
    type=htmlよりも時間がかかります。
  • 外部Javascript/CSS等の使用も避け、インラインで記述するようにします。
    別途ネットワーク接続が発生し、パフォーマンス低下に繋がるからです。
  • キャッシュを必要以上に更新しない。
    makeRequest()は、コンテンツをデフォルトで1・2時間キャッシュします。
  • 画像のサイズは指定しておく。
    gadgets.io.getProxyUrl() を使用して直接DOMに挿入する場合には、その必要はありません。
Safariの開発機能や、FireFoxのFirebug、Chromeのデベロッパー・ツール等でパフォーマンスの確認を行ってください。

補足

ガジェットを導入しやすくするために、「Googleに追加」ボタンを設置することをお勧め致します。
下記のようなフォームに必要事項を入力し、「HTMLを生成」ボタンをクリックすると、貼付けるためのコードが表示されます。
表示されたコードを好きな場所に貼付ければ完了です。

コラム:HTMLボックス・ガジェット

余談ですが、簡単にガジェットのテストを行うことのできる「HTML ボックス」をご紹介しておきます。
このガジェットは、非常に簡単なガジェットですので、ご自身で同様のものを作成することもできるでしょう。

下記がその使用例です。
Googleのサンプルで示されているものです。
サンプルからも分かる通り、jQueryも使用することができます。

下記コードを用いると、ページ・ローディングが遅くなりますので、下記の表示例ではjQueryはローディングさせていません。
そのためボタンアクションは機能しません。

サンプル















コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"> </script>
<script>
  var current_slide = 0; // zero-based
  var slide_count = 3;
  var slide_size = 400;
  
  var Direction = {
    LEFT: -1,
    RIGHT: 1
  };
  
  /**
   * Moves to the next slide using the direction (dx) parameter.
   */
  var nextSlide = function(dx) {
    current_slide = (current_slide + slide_count + dx) % slide_count;

    // Calculate the new value for css 'left' property and animate.
    var left_offset = '-' + (current_slide * slide_size) + 'px';
    $('.items').animate({'left': left_offset}, 300);
  };

  $('.right-button').click(nextSlide.bind(null, Direction.RIGHT));
  $('.left-button').click(nextSlide.bind(null, Direction.LEFT));


  $('.carousel').show();
</script>

<style>
  .carousel {
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background-color:black;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
  }
  .items {
    width: 1200px;
    position: absolute;
  }
  .items > div {
    width: 400px;
    height: 180px;
    font-size: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .nav {
    position: absolute;
    bottom: 5px;
    right: 15px;
  }
  .button {
    cursor: pointer;
    font-weight: bold;
  }
</style>

<div class="carousel" style="display:none;">
  <div class="items">

    <div>
      Content for slide one.
    </div>

    <div>
      Content for slide two.
    </div>

    <div>
      <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>

  </div>
  <div class="nav">
    <span class="button left-button">prev</span>
    &nbsp;&nbsp;
    <span class="button right-button">next</span>
  </div>
</div>


注意事項

下記に該当するものは使用することはできません。
通常は、「HTMLボックス」を保存するときにエラーが出力されますが、エラーが出力されなくても利用することのできない機能が存在しています。
    • iframe
      必要があれば、別途外部ガジェット「Include gadget (iframe)」を導入してください。
    • Document/windowのonload / onready ファンクション。
      但し、最後に記述することでonloadファンクションのように振る舞わせることが可能です。
    • スクリプトや画像・リンクタグを生成するようなコード。

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

表示
gadgets.* API 用のデベロッパー ガイドです。OpenSocial API をサポートするコンテナで使用できます。OpenSocial API がまだサポートされていない環境では、レガシー Gadgets API を使用する必要があります。  2012/10/11 20:38 浅野利博
ċ

表示
カテゴリ別に一般公開されているガジェット集。 簡単に自身のページに埋め込むことができます。  2012/10/12 20:26 浅野利博