ガジェットとは、コンテナの一部として動作する小規模なコンテンツ・アプリケーションのことです。Googleサイト上で使用すると効果的です。XMLの基本と、多少のHTML/JavaScript/CSSの知識があれば、どなたでも簡単にガジェットを作成し、公開できます。事前の注意事項として、作成されたガジェットは必ず公開されなければならないということです。どのようなものでも非公開にすることはできないことに注意してください。単純なHTML/Javasript/CSSで実装されるようなものは、後述しているようなガジェット特有の手法は必要ありません。標準で公開されている「HTMLボックス」ガジェットを導入し、必要なコードを入力するだけで実装できます。コラムを参照してください。*本ページでは、直にガジェットを作成し、公開できるようになることを目的に作成されたいます。対象バージョン管理を理解・使用しており、HTML/JavaScript/CSSの基本的な知識を有しておられる方が対象です。必要な方は、それぞれのリンク先を参照してください。デバッグ方法・公開手順...しかし、下記で理解しやすいように纏めておりますので、慣れれば簡単に作成できることがご理解頂けると思います。参照して頂ければ、直に開発が始められると思います。Codeにホスティングした結果です。慣れれば非常に簡単に高機能なガジェットを作成することができるようになります。ガジェットの構成ガジェットは実装例にもありますようにXMLで記述します。詳細な属性等の情報は、リンク先を参照してください。1つのガジェットの定義本体。コンテンツ情報を包含することになります。タイトル、作成者、最適に表示されるサイズなどのガジェットの特性を記載します。<Locale>タグを使用することで、国際化も簡単に対応することができます。(i18n)を参照してください。ユーザーがガジェットの設定を指定できるようにするためのコントロールを定義します。gadgets.Prefs();で取り出すことができます。それぞれの項目にはname属性を指定し、取り出せるようにしている必要があります。実際のコンテンツを定義します。属性に「type=html」「type=url」があります。type=htmlインラインで記述します。別途ネットワーク接続が発生してしまいますので、パフォーマンスは低下してしまいます。理由がない限り、使用は極力さけるべきです。type=urlコンテンツは外部ホスティングされていることを示し、そのURLを「href」属性で指定する必要があります。インラインの場合<![CDATA[...]]>中に、各コンテンツを記述します。APIの種類それぞれのAPIの使用方法・説明は、下記リンクから、該当ページを参照してください。ガジェット作成機能を使用できます。サポートするコンテナ用のガジェットで利用できます。データを地図に重ねて、地理情報に応じてデータを表示する機能を追加します。株式情報を取得して表示します。用のガジェットで利用できます。メディア広告を提供するガジェットを作成します。より動作するガジェットで利用できます。カレンダー上で動作するガジェットを作成し、時間に応じて変化する情報を表示します。カレンダー用のガジェットで利用できます。スプレッドシート上のデータをやり取りするガジェットを作成します。概要」より開発・試験方法まずはバージョン管理の準備を行います。Codeでホスティングするためには必須です。Coda2のようなアプリケーションと併用すると、開発効率がアップし、開発環境の統一化もはかれます。バージョン管理に詳しくない方・初めての方は、こちらを確認してください。必要に応じて、Googleアカウントでログインしてください。project」をクリックします。name」を入力します。これは全て半角英数字で入力する必要があります。一度設定すると変更できませんので、注意してください。summary」を入力します。これはプロジェクトの要約です。「Description」を入力します。これはプロジェクトの詳細説明です。system」を選択します。どれもで差はありませんが、GitかSVNを選択する方が無難です。Gitを選択した場合には、クローンのカレント・ディレクトリに「.netrc」を準備する必要があります。指定する内容は、http://code.google.com/hosting/settingsで確認できます。注意しなければならないことは、アカウント自体はGoogleアカウントなのですが、パスワードは違いますので、Gitを選択された場合には、必ず確認してください。パスワードの変更はサイト上から行うことになります。license」を選択します。プロジェクトを公開する場合のライセンスです。label(s)」を選択します。必須ではありませんが、プロジェクトに含まれるファイルの種類等を必要なだけ選択すると良いでしょう。検索対象にもなります。これでバージョン管理の準備は完了です。クローンを作成し、開発を初めてください。下記に簡単ですが、編集・試験の手順を示しておきます。編集・試験手順は、ローカルでコードを編集する。バージョン管理クライアントで編集したコードをプッシュします。下記URLをその他のガジェットととして追加する。SVNの場合http://<プロジェクト名>.googlecode.com/svn/trunk/<作成したガジェット>.xmlGitの場合http://<プロジェクト名>.googlecode.com/git/<作成したガジェット>.xmlこの処理は一度だけです。更新する度に行う必要はありません。ガジェットを追加したページを更新する。これで、ガジェットを埋め込んだページを表示すると、確認できます。修正を加えてプッシュすると、リアルタイムに反映されます。テストは、ブラウザの開発機能で行うことになるでしょう。1〜4を繰り返すことになります。コマンドを使用して送信することができます。その他の方法もりますが、その他の方法で公開する場合の詳細は、「Googleガジェット公開」を参照してください。送信すれば、使用するためのURLが表示されますので、忘れないようにしてください。後述させて頂きます「Googleに追加」ボタンを付ける場合にも必要となります。ことは、表示させる速度を下げないことです。下記では、一般的な最適化を行っていることを前提に、ガジェットで考慮する必要のある項目に的を絞り込んでいます。type=urlは出来るだけ避ける。type=htmlよりも時間がかかります。外部Javascript/CSS等の使用も避け、インラインで記述するようにします。別途ネットワーク接続が発生し、パフォーマンス低下に繋がるからです。キャッシュを必要以上に更新しない。makeRequest()は、コンテンツをデフォルトで1・2時間キャッシュします。画像のサイズは指定しておく。使用して直接DOMに挿入する場合には、その必要はありません。Safariの開発機能や、FireFoxのFirebug、Chromeのデベロッパー・ツール等でパフォーマンスの確認を行ってください。補足ガジェットを導入しやすくするために、「Googleに追加」ボタンを設置することをお勧め致します。下記のようなフォームに必要事項を入力し、「HTMLを生成」ボタンをクリックすると、貼付けるためのコードが表示されます。表示されたコードを好きな場所に貼付ければ完了です。ボックス」をご紹介しておきます。このガジェットは、非常に簡単なガジェットですので、ご自身で同様のものを作成することもできるでしょう。下記がその使用例です。Googleのサンプルで示されているものです。サンプルからも分かる通り、jQueryも使用することができます。下記コードを用いると、ページ・ローディングが遅くなりますので、下記の表示例ではjQueryはローディングさせていません。そのためボタンアクションは機能しません。下記に該当するものは使用することはできません。通常は、「HTMLボックス」を保存するときにエラーが出力されますが、エラーが出力されなくても利用することのできない機能が存在しています。(iframe)」を導入してください。最後に記述することでonloadファンクションのように振る舞わせることが可能です。スクリプトや画像・リンクタグを生成するようなコード。サポートするコンテナで使用できます。使用する必要があります。カテゴリ別に一般公開されているガジェット集。簡単に自身のページに埋め込むことができます。