©2009 Google - Code サイト ホーム - 利用規約 - プライバシー ポリシー - サイト ディレクトリ
Google Code が利用できる言語: English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)
| 
日本語 | ログイン
このドキュメントでは、ガジェットのプログラミング、デバッグ、ホスティングについての一般的なガイドラインを提供します。
ガジェットの開発プロセスには (どのようなコードの開発プロセスでも)、考えたとおりに機能しない場合がある理由を把握することも含まれます。このセクションでは、問題の回避や、問題が発生したときの解決のための基本的なテクニックについて説明します。
プログラミングの原則は、小さなプログラムから始めることです。ガジェットの基本的な骨格がまず動くようになってから、徐々に作り上げていきます。段階ごとにテストしてから、先に進みます。この方法により、何を変更したときに問題が発生するようになったかがわかりやすくなります。
ガジェットのデベロッパーが利用できる最良のリソースの 1 つは、既存のガジェットです。コンテンツ ディレクトリにアクセスして、実装しようとしているガジェットによく似たガジェットのソース コードを見てみます。
Firefox ウェブ ブラウザを使用して、開発中のガジェットを iGoogle 上でテストできます。ガジェットが正しく機能しない場合、JavaScript コンソール ([ツール] > [JavaScript コンソール]) を開き、[エラー] を選択し、スクロール ダウンして、ガジェットに JavaScript の構文エラーがないかどうかを調べます。テストする前に毎回必ずコンソールをクリアして、古いエラー メッセージを消去します。
Firefox 以外のブラウザを使用している場合は、そのブラウザでサポートされている JavaScript コンソールやデバッガを探します。
開発プロセス時に仮定を検証することで、多くの時間と無駄な労力を省くことができます。変数に思ったとおりの値が設定されているか、配列に要素が含まれているかを確認します。「正しく機能していないように見える」関数が、まったく呼び出されていない可能性もあります。プログラムのさまざまな箇所でステータス メッセージを出力して、仮定をテストできます。たとえば次のガジェットには、debug フラグに 0 以外の値が設定されていると、debug_div にデバッグ用メッセージを書き込む print() 関数があります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs(); // debug flag. When its value is non-zero, debugging messages are displayed var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){ // DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
document.getElementById("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
document.getElementById("debug_div").innerHTML = debug_html;
}
}
gadgets.util.registerOnLoadHandler(displayDate);
</script>
]]>
</Content>
</Module>
注: MiniMessage API については、MiniMessage をご覧ください。この API を使用すると、ガジェットに表示するメッセージの動作や外観を変更できます。
以下の Firefox アドオンを利用すると、開発中のガジェットについて、さらに詳しく調べることができます。
サーバーにアクセスして自分のガジェットを保存することができない場合は、Google Gadgets Editor (GGE) でガジェットを編集してホスティングすることができます。Google Gadgets Editor を使用するには、必ず Google アカウントでログインします (そうしないと、ガジェットを保存できません)。たとえば「Hello, world!」のメッセージを「Hello, gadget developers!!」に変更して、[File] > [Save As] を使用して新しい名前のガジェットの仕様として保存すると、指定した名前で新しいガジェットの仕様が Google Gadgets Editor によりホストされます。
注: Google Gadgets Editor はgadgets.* API を完全にサポートしてはいないので、すべての機能が使用できるわけではありません。Google Gadgets Editor を使用して、ファイルの編集とホストはできますが、ガジェットのプレビューはできません。
[Editor] タブには [File] ドロップダウン メニューがあり、次のコマンドが含まれています。Google Gadgets Editor は Google アカウントを使用して、あなたのファイルを識別するので、通常、これらのコマンドを使用するにはログインする必要があります。
| コマンド | 説明 |
|---|---|
| [Open] | Google Gadgets Editor を使用して以前に作成し、保存したガジェットを開きます。 |
| [Save] | 編集したガジェットの仕様を保存します。そのガジェットを以前に保存したことがない場合は、ガジェットの名前を入力するように要求されます。Google Gadgets Editor にガジェットを保存すると、Google Gadgets Editor は自動的にそのガジェットをホストします。ガジェットは公開する前に公開サーバー上にホストする必要があります。Google Gadgets Editor はそのガジェットをホストし、いくつかの公開方法をユーザーに提供します。 |
| [Save As] | 編集したガジェットを、指定する名前で保存します。 |
| [Rename] | 編集したガジェットの名前を変更します。ガジェットを保存してからのみ使用できます。 |
| [Upload] | ファイル システムを参照してガジェットのリソースを探し、それを Google Gadgets Editor 環境に保存できます。ガジェットの仕様や、画像ファイルなどのガジェットのリソースをアップロードできます。リソースを Google Gadgets Editor にアップロードすると、Google Gadgets Editor でホストされます。これによって、そのリソースの Google Gadgets Editor の URL を参照することで、ガジェットの仕様にリソースをインポートできます。 |
| [Publish] | [Publish] メニュー項目では、ガジェットを公開するための次のオプションが表示されます。
このコマンドは、ガジェットを保存してからのみ使用できます (保存することで、ガジェットが Google Gadgets Editor でホストされます)。詳しくは Google Gadgets Editor からのガジェットの公開をご覧ください。 |
| [Delete] | Google Gadgets Editor で作成したガジェットのリストが表示されるので、選択して削除できます。 |
[File] メニューの [Publish] コマンドでは、ガジェットを公開するための次のオプションが表示されます。
gadgets.* API や OpenSocial API ではサポートされていません。 ガジェットの URL は、Google Gadgets Editor の右上に表示されます。このリンクをクリックすると、完全な URL が表示されます。
ガジェットの開発時とテスト時には、ガジェットをできるだけ多くの環境でテストすることをお勧めします。ガジェットをテストし、改良した後、iGoogle コンテンツ ディレクトリに送信して、多数のユーザーに配布することもできます。
ガジェットの仕様とリソースをホストする最も簡単な方法は、Google Gadgets Editor を使用することです。Google Gadgets Editor よりもフル機能のソース コントロール システムが必要なデベロッパーには、Google Code (http://code.google.com/hosting) 上でガジェットをホストすることをお勧めします。これはガジェット デベロッパーに多くのメリットを提供するサービスです。主なメリットの 1 つは、オープン ソース バージョン管理システムである Subversion によるバージョン管理です。Subversion を使用すると、ガジェットの変更の追跡や複数バージョンの管理ができます。すべての更新履歴が利用できるので、バージョン間のロールバックや違いの分析ができます。Subversion について詳しくは、Subversion によるバージョン管理をご覧ください。
Google Code でガジェットをホストするには、最初にデスクトップ プログラム (Subversion クライアント) をインストールする必要があります。これにより、ファイルを code.google.com (Subversion リポジトリ) にロードして、保存できます。Subversion クライアントには通常、グラフィカル ユーザー インターフェースが付属しており、コマンド ライン インターフェースよりも簡単に、Subversion を使用できます。ご使用のオペレーティング システムによって異なるクライアントから選択します。ご使用のシステムと互換性のあるクライアントを必ずインストールしてください。お勧めするクライアントは次のとおりです。
クライアントとプラグインの一覧は、Clients and plugins をご覧ください。
Subversion をコンピュータにインストールした後、Google Code を使用してプロジェクトのホストを始める方法は、次のとおりです。
新しいプロジェクトを作成するには:
my-gadgets)。プロジェクト名はそのプロジェクトの URL の一部になり、後で変更できないことに注意してください。 これで code.google.com 上にプロジェクトが作成されました。そのプロジェクト名を使用した Subversion リポジトリが作成されています。[Source] タブをクリックして、Subversion リポジトリのリンクをクリックします。
リポジトリの URL は、http://<プロジェクト名>.googlecode.com/svn/ のようになります。branches、tags、trunk の 3 つのディレクトリのリンクが表示されます。プロジェクトにファイルをアップロードすると、/trunk フォルダに置かれます。後で参照するために、URL http://<プロジェクト名>.googlecode.com/svn/trunk/ をブックマークに追加することもできます。
ファイルをアップロードする前に、自分のプロジェクトの Subversion リポジトリからコードをチェックアウトする必要があります。チェックアウトするためには、リポジトリ URL (http ではなく https で始まるバージョンを使用する必要があります)、ユーザー名、パスワードの 3 つの情報が必要です。この情報を得るには、プロジェクトの [Source] タブ (http://code.google.com/p/<プロジェクト名>/source) にアクセスします。次のような表示があるはずです。
svn checkout https://<プロジェクト名>.googlecode.com/svn/trunk/ gadgets-test --username <ユーザー名>
要求があれば、生成された SVN passwordを入力します。
ブラウザでこのページを開いたままにしておくと、必要に応じて該当する情報を調べることができます。
実際のチェックアウトは、使用している Subversion クライアントによって多少異なりますが、全体的なプロセスは同じです。このセクションでは、TortoiseSVN を使用している場合の手順を説明します。
プロジェクトをチェックアウトするには:
この時点でクライアントが接続され、リポジトリ全体がチェックアウトされます。できあがりです。
チェックアウトが正常に完了すると、新しい隠しフォルダ /.svn が表示されます。このフォルダを変更や削除しないでください。
プロジェクトをチェックアウトすると、Subversion コマンドを使用して、ディレクトリに新しいフォルダやファイルを追加できるようになります。このセクションでは、TortoiseSVN を使用している場合の手順を説明します。
ファイルをアップロードするには:
/trunk のすぐ下や /trunk の下のサブディレクトリの中に置くことができます。 メモする必要があれば、メッセージ ログが表示されたときに入力し、[OK] をクリックします。ファイルのサーバーへの送信が開始されます。
ファイルがサーバーに送信されると、コミット (アップロード) が完了となり、ファイルはすぐに http://<プロジェクト名>.googlecode.com/svn/trunk/new-gadget.xml でオンラインで利用できるようになります。リポジトリ内のファイルを参照する (読む) だけであれば、http で始まるリポジトリ URL のバージョンを使用できます。
リポジトリ内にディレクトリ構造を作成でき、その構造は URL に反映されます。たとえば /a/b/c/new-gadget.xml に新しいファイルを追加してコミットすると、そのファイルは、http://<プロジェクト名>.googlecode.com/svn/trunk/a/b/c/new-gadget.xml でホストされます。
Google Code でのプロジェクト ホスティングについて詳しくは、Project Hosting FAQ をご覧ください。