デベロッパー ツール

このドキュメントでは、ガジェットのプログラミング、デバッグ、ホスティングについての一般的なガイドラインを提供します。

目次

  1. プログラミングとデバッグのヒント
    1. まずは小さなものから
    2. 他のガジェットから学ぶ
    3. Firefox JavaScript コンソールを使う
    4. 仮定を検証する
    5. その他のツール
  2. Google Gadgets Editor を使用したホスティング
    1. File メニューのコマンド
    2. Google Gadgets Editor からのガジェットの公開
  3. Google Code でのホスティング
    1. 新しいプロジェクトの作成
    2. プロジェクトのチェックアウト
    3. ファイルのアップロード

プログラミングとデバッグのヒント

ガジェットの開発プロセスには (どのようなコードの開発プロセスでも)、考えたとおりに機能しない場合がある理由を把握することも含まれます。このセクションでは、問題の回避や、問題が発生したときの解決のための基本的なテクニックについて説明します。

まずは小さなものから

プログラミングの原則は、小さなプログラムから始めることです。ガジェットの基本的な骨格がまず動くようになってから、徐々に作り上げていきます。段階ごとにテストしてから、先に進みます。この方法により、何を変更したときに問題が発生するようになったかがわかりやすくなります。

他のガジェットから学ぶ

ガジェットのデベロッパーが利用できる最良のリソースの 1 つは、既存のガジェットです。コンテンツ ディレクトリにアクセスして、実装しようとしているガジェットによく似たガジェットのソース コードを見てみます。

Firefox JavaScript コンソールを使う

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 アドオンを利用すると、開発中のガジェットについて、さらに詳しく調べることができます。

  • Firebug は、デバッグ用ツールと、DOM の調査を提供します。
  • Web Developer は、ウェブ デベロッパー用ツールを含むメニューとツールバーをブラウザに追加します。

Google Gadgets Editor を使用したホスティング

サーバーにアクセスして自分のガジェットを保存することができない場合は、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 を使用して、ファイルの編集とホストはできますが、ガジェットのプレビューはできません。

File メニューのコマンド

[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] メニュー項目では、ガジェットを公開するための次のオプションが表示されます。
  • Add to my iGoogle page (自分の iGoogle ページに追加)
  • Publish to iGoogle Directory (iGoogle ディレクトリに公開)
  • Add to a webpage (ウェブページに追加)

このコマンドは、ガジェットを保存してからのみ使用できます (保存することで、ガジェットが Google Gadgets Editor でホストされます)。詳しくは Google Gadgets Editor からのガジェットの公開をご覧ください。
[Delete] Google Gadgets Editor で作成したガジェットのリストが表示されるので、選択して削除できます。

Google Gadgets Editor からのガジェットの公開

[File] メニューの [Publish] コマンドでは、ガジェットを公開するための次のオプションが表示されます。

  • Add to my iGoogle page - ガジェットを自分の iGoogle ページに追加します。これは、開発中にガジェットをテストする最も簡単な方法です。
  • Publish to iGoogle Directory - iGoogle への送信ページが表示され、ガジェットの URL があらかじめフォームに入力されます。この送信フォームを使用して、ガジェットを iGoogle コンテンツ ディレクトリに送信できます。[送信] をクリックするまでは、ガジェットは送信されません。これは、ガジェットをテストして改良した後のガジェット開発の最終ステップです。ガジェットを自分で使用し、友だちと共有するには、このステップは必要ありません。これは、自分のガジェットを多数のユーザーが使用できるようにしたいデベロッパーのためのオプションです。
  • Add to a webpage - シンジケーションの作成者用ページが表示されます。シンジケーションはまだ、gadgets.* API や OpenSocial API ではサポートされていません。

ガジェットの URL は、Google Gadgets Editor の右上に表示されます。このリンクをクリックすると、完全な URL が表示されます。

ガジェットの開発時とテスト時には、ガジェットをできるだけ多くの環境でテストすることをお勧めします。ガジェットをテストし、改良した後、iGoogle コンテンツ ディレクトリに送信して、多数のユーザーに配布することもできます。

Google Code でのホスティング

ガジェットの仕様とリソースをホストする最も簡単な方法は、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 を使用できます。ご使用のオペレーティング システムによって異なるクライアントから選択します。ご使用のシステムと互換性のあるクライアントを必ずインストールしてください。お勧めするクライアントは次のとおりです。

  • TortoiseSVN は、Windows 用の使いやすい Subversion クライアントで、Windows エクスプローラに直接機能を統合します。
  • AnkhSVN は、Visual Studio 用のプラグインで、IDE から Subversion にアクセスできます。
  • ZigVersion は、Mac OS X 用の Subversion クライアントです。
  • RapidSVN は複数のプラットフォームで使用できる GUI Subversion クライアントです。このクライアントでは、Windows、Mac OS X、Linux の 3 つの主要なオペレーティング システムがサポートされています。

クライアントとプラグインの一覧は、Clients and plugins をご覧ください。

Subversion をコンピュータにインストールした後、Google Code を使用してプロジェクトのホストを始める方法は、次のとおりです。

新しいプロジェクトの作成

新しいプロジェクトを作成するには:

  1. http://code.google.com/hosting にアクセスして、Gmail アカウントでサインインします。Gmail アカウントをお持ちでない場合は、作成してください
  2. [Create a new project] をクリックします。
  3. 新しいプロジェクトについて、フィールドに入力します。
    • プロジェクトの名前を小文字で入力します (例 my-gadgets)。プロジェクト名はそのプロジェクトの URL の一部になり、後で変更できないことに注意してください。
    • 概要と説明を入力します。
    • オープン ソース ライセンスを選択します。詳しくは Open-source license をご覧ください。
    • オプションのステップ: このプロジェクトを他のユーザーが検索できるように、ラベルを割り当てます。
  4. 必須のフィールドにすべて入力したことを確認してから、[Create Project] をクリックします。
  5. できあがりです。[Project Home] ページにリダイレクトされます。そのページの URL が次のようになっていることを確認します: http://code.google.com/p/<プロジェクト名>/

これで code.google.com 上にプロジェクトが作成されました。そのプロジェクト名を使用した Subversion リポジトリが作成されています。[Source] タブをクリックして、Subversion リポジトリのリンクをクリックします。

リポジトリの URL は、http://<プロジェクト名>.googlecode.com/svn/ のようになります。branchestagstrunk の 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 を使用している場合の手順を説明します。

プロジェクトをチェックアウトするには:

  1. Windows エクスプローラで新しいフォルダを作成し、そのフォルダの中に移動します。
  2. 右クリックして、[SVN チェックアウト] を選択します。
  3. 自分のリポジトリ URL を入力し、[OK] をクリックします。このステップでは、https で始まるリポジトリ URL のバージョンを使用する必要があることに注意してください。これは、読み取り書き込みアクセスのために必要です。http で始まるバージョンを使用すると、読み取りアクセスしかできず、ファイルの追加やコミットができなくなります。
  4. TortoiseSVN はサーバーに接続して、認証しようとします。ユーザー名とパスワードを入力するように要求されます。ユーザー名とパスワードを入力し、[認証を保存] チェックボックスをオンにして、[OK] をクリックします。ユーザー名とパスワードの入力を要求されなかった場合は、ステップ 3 に戻り、http ではなく、https で始まるリポジトリ URL を入力したことを確認します。

この時点でクライアントが接続され、リポジトリ全体がチェックアウトされます。できあがりです。

チェックアウトが正常に完了すると、新しい隠しフォルダ /.svn が表示されます。このフォルダを変更や削除しないでください。

ファイルのアップロード

プロジェクトをチェックアウトすると、Subversion コマンドを使用して、ディレクトリに新しいフォルダやファイルを追加できるようになります。このセクションでは、TortoiseSVN を使用している場合の手順を説明します。

ファイルをアップロードするには:

  1. <プロジェクト名>.googlecode.com/svn/trunk/ ディレクトリに新しいファイルを作成して、保存します (例 new-gadget.xml)。このファイルは、/trunk のすぐ下や /trunk の下のサブディレクトリの中に置くことができます。
  2. ファイルを右クリックして、[追加] を選択します。この時点では追加するファイルとしてマークが付くだけで、ファイルはまだサーバーにはアップロードされません。リポジトリにまだ追加されていないディレクトリにファイルを置いた場合、そのディレクトリも追加する必要があります。ディレクトリを追加すると、その中のファイルもすべて追加されます。変更のコミットについても、同じルールが提供されます。ファイルをリポジトリにコミットするには、それが含まれるディレクトリをコミットしておく必要があります。
  3. コミット (アップロード) する準備ができるまで、ファイルを編集します。
  4. ファイルをコミットする準備ができたら、ファイルを右クリックして [SVN コミット] を選択します。

メモする必要があれば、メッセージ ログが表示されたときに入力し、[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 をご覧ください。

トップへ戻る