1. ホーム
  2. Blog
  3. ホットペッパーBeauty APIでGoogleデスクトップガジェット

ホットペッパーBeauty APIでGoogleデスクトップガジェット

山田 大悟

山田 大悟

技術

ヤマダタイゴです。ホットペッパーBeautyのAPIを使ってGoogleデスクトップガジェットを作ったのでご紹介します。
Mash up Award 3rdiGoogle ガジェットコンテントも終わり、何とも間が悪いですが、、間の悪さは僕の持ち味ということで、どうかご容赦を。。。

はじめに

今回のガジェットは、iGoogle サイト内の解説記事の、ユニバーサルではない方です。 解説記事にあるとおり、デスクトップガジェットはiGoogleでは利用できません。 これから作ってみようかあなと思っている方、「Googleデスクトップガジェット」でググると、こっちが上になりますのでご注意くださいね。 本エントリーの最後に、デスクトップガジェットとユニバーサルガジェットの向き/不向きを簡単に書いてみましたので、迷っている方がいれば参考にしていただければと思います。

ガジェットのご紹介

ガジェットおよび紹介ページはコチラ。 仕事の合間にふとガジェットを見て、「あーそろそろ髪切り行かないとー。」を思い出してその場で週末のカットの予約をする、といった使い方をイメージして作りました。

大変だったこと

基本的な作り方は、Google デスクトップ サイドバーガジェット入門や、Developer Knowledge Baseにお任せして、大変だったところ、苦労した点をメモします。
画像の表示に1手間
beauty01

HTMLで画像の表示は、imgタグでsrc指定すれば可能ですが、
デスクトップガジェットでは以下のように書かないといけません。

(1)画像のロード

var mainPhoto = loadMainPhoto(salon.main.photo.s);
item.image = mainPhoto;

(2)画像の表示

var imgWidth = 119;
var imgHeight = 89;
graphics.DrawImage(x, y, imgWidth, imgHeight, item.image, 100);

※x,yはそれぞれ表示する座標を指定します。

メモを残す機能
beauty_button

詳細画面上で、美容院に行った感想とか次これに行ってみよかな、みたいなメモをローカルに保存する機能です。

HTML形式でコンテンツを書いて、「メモを残す」ボタンのonClickイベントを受けてローカルに保存するような実装にしてます。

(1)アイテムを定義する際に詳細画面の定義を追加


var item = new ContentItem();
item.onDetailsView = OnDetailsView;

(2)OnDetailsView関数のHTMLコンテンツ部分でボタンを押すとガジェット上の関数を呼び出すようにセット


html_text += ">input type=\"button\" value=\"" + LABEL_BTN_MEMO + "\" onClick=\"window.external.onSetMemo(\'" + salon.id + "\',document.f.memo.value); \"<";

(3)DetailsViewオブジェクトではHTMLフラグや、(2)のHTML内に書いた関数をセット


var control = new DetailsView();
control.SetContent(item.source, item.time_created, html_text, true, item.layout);
control.html_content = true;
var externalObject = new Object();
externalObject.onSetMemo = onSetMemo;
control.external = externalObject;

(4)optionsオブジェクトにメモを書き出す関数を定義

function onSetMemo(id,val)
{
..中略..
// set options
// id:val,id:val...
options("memo") = tmpArr.join(",");
..中略..
}

「options("memo")」とすることで、memoというキーに対して右辺の値を保存できます。
ちなみにoptionsオブジェクトは、Googleデスクトップガジェットのアプリケーションデータフォルダに、
「sidebar_plugin_data」というファイル名で保存されてるそうです。
僕のVista環境では、
C:\Users\[Account]\AppData\Local\Google\Google Desktop\7088ccc28c35
にありました。

まとめ:Googleデスクトップガジェットで出来ること

まとめです。ここまで紹介しといてナンなんですが、 今回紹介ガジェットであれば、iGoogleでできちゃいます。詳細は割愛しますが、コードも圧倒的に少ないし、デスクトップガジェットよりも手軽に作れます。 さらにiGoogleユニバーサルガジェットはデスクトップガジェットにも、はてなダイアリーにも展開できるので、単純にWEB APIを使って表示するガジェットであればユニバーサルガジェットの方をおすすめします。

逆にデスクトップガジェットでは、PCローカルにあるアプリケーションと連携させた使い方が向いているのかなあと思いました。すでに公開されているところでは、メモリやネットワーク負荷状況をウォッチできるガジェットなんかがそうですね。
まだアイデアレベルですが、今後はメッセンジャーをガジェットにしてUIをまとめてしまう、なんてことにチャレンジしてみたいなーと思ってます。

トップへ戻る