June 9, 2007 7:09 PM by 

ヤマダタイゴです。はじめましてー！

Googleデスクトップガジェット用の占いガジェットを作ってみました。

GoogleデスクトップガジェットはSDK、リファレンスと充実しているのですが、サンプルソースや実際の作り方は出回っていないので、やってみようかなーと思っている方の参考になればと思い、紹介させていただきます。

占いガジェットってどんなの？

googlepages.comに内容と実行ファイルを置いています。 さきほど、googleにこのガジェットの登録を申し込みました。 確認OKであれば、プラグインのダウンロードページにのせてもらえるとのこと。ドキドキ。

占いデータは、JugemKeyさんのWeb ad Fortune 無料API　を使って取得しています。ありがとうございますー！

さて、以降ではガジェットの作り方を簡単にご紹介したいと思います。

用意するもの

• Googleデスクトップガジェット SDK
• Google デスクトップ サイドバーガジェット入門

この2つがあればOKです。

さらに、他の人が作ったガジェットは、以下の手順で開くことできます。




1. 他の人が作ったガジェットを入手。占いガジェットはココにあります。


2. designer_ja.exeを起動


3. 「ファイル」→「開く」から、1.でゲットしたガジェットを指定。



自動的に解凍されて、xmlやjava script等々、ソース一式が見れます。

ファイル構成とメモ

ガジェットは、xmlとjava scriptで作ります。



ファイル構成とメモをまとめます。





gadget.gmanifest（designer上は「プロジェクト設定」）

ガジェットの名前、作成者、バージョン等を管理します。このファイルをWクリックでデスクトップに追加するとデバッグモードになります。

gadget.debug.trace("hoge");

のようなデバッグ文がデバッグコンソール上に出ます。ランタイムエラーのデバッグに便利です。




main.js

java scriptを書き込むファイル。がしがしコーディングしましょう。




main.xml

UIを定義します。designerでは、ドラッグ＆ドロップでbutton、image、contentArea要素等々を配置できます。




plugin_large.gif

ガジェットのアイコン（大）です。デスクトップで「折りたたむ」をしたときに表示されます。




plugin_small.gif

ガジェットのアイコン（小）です。




strings.xml

ガジェットタイトルやラベルのよう日本語を変数として外部定義します。日本語定義ファイルなのでjaフォルダに置きます。




ちなみに、gddDetailsViewFlagNoneのような変数は、


Googleデスクトップインストールディレクトリ\Google\Google Desktop Search\plugin_common.js


に定義されてるようです。

Tips

• 占いガジェットでは星座の選択という操作がありますが、ガジェットを最小化したり何かしらいじった時に、いち初期値に戻るのはめんどくさいです。 optionsオブジェクトを使うと、いい感じに保持してくれます。
• 星座をえらぶメニューUIは、

  Line:1.
  plugin.onAddCustomMenuItems = AddCustomMenuItems; // メニュー アイテムを追加するハンドラ
  
  Line:51.
  
  function AddCustomMenuItems(menu) {
  
    for (var i = 0; i < signNameArr.length; ++i) {
  
      if (i == id) {
  
        menu.AddItem(signNameArr[i], gddMenuItemFlagChecked, menuItemClicked);
  
      } else {
  
        menu.AddItem(signNameArr[i], 0, menuItemClicked);
  
      }
  
    }  
  
  }
  
  Line:62.
  
  function menuItemClicked(name) {
  
    for (var i = 0; i < signNameArr.length; i++) {
  
      if ( name == signNameArr[i] && options("id") != i){
  
        options("id") = i;
  
  gadget.debug.trace("id" + options("id")); 
  
      }
  
    }
  
    updateView();
  
  }
  
  

  
  のように作ってます。きっと使いまわしできると思います。Line:1でメニューに追加で表示しますーの宣言をして、Line:51で追加表示するメニュー名と選択された時に呼び出す関数を定義、Line:62で選択された時の挙動を書いてます。占いメニューでは、options要素に選択された星座コードをセットしてメイン関数を呼び出してます。メイン関数ではoptions要素から星座コードを抜き出してます。
  

さいごに。

今回はお試しで、すごくシンプルなものを作りました。 コードもベーシックな構成になってると思いますので、これからやってみようかなーという方、参考にしていただけるとうれしいでっす。

今回は触れていない、デスクトップガジェットに向くコンテンツや、ステキな表現、便利テクニックがあれば、またご紹介したいなーと思います。


tags：gadget  Google