このページの本文へ

Web技術で作るDashboardウィジェット開発入門 (4/5)

2011年03月08日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

Dashcodeを使ってGoogleマップウィジェットを作成する

 Dashcodeには、あらかじめよく利用されるウィジェットのテンプレートが用意されています。ここではGoogleマップのテンプレートを使って地図を表示してみましょう。

 Dashcodeが起動すると以下のような画面になります。

【図】fig4-1.png

Dashcodeの起動画面

 テンプレートがいくつか表示されています。この中から「マップ」のアイコンをクリックし、「選択」ボタンをクリックします。

【図】fig4-2.png

マップのアイコンをクリックして選択ボタンを押す。マップのアイコンをダブルクリックしてもよい

 マップウィジェットの作成画面が表示されます。適当にリサイズしてウィジェットの大きさを決めます。

【図】fig4-3.png

マップウィジェットが表示されるのでサイズを調整する

 マップウィジェットは、Google Earthなどで使われているKMLとも組み合わせらせます。KMLにお店の情報などを記述しておくと、マップウィジェット上に情報を重ね合わせて表示できます。

 今回はKMLは使用しないので、「マップフィードを提供」のカテゴリーは無視します。一応完了したものとしたい場合は「完了したものとしてマーク」ボタンをクリックします。ボタンをクリックすると以下の図のようになります。

【図】fig4-4.png

完了したことにしておく

 次に、マップ表示に必要な情報を入力していきます。サイドバーにある「ウィジェットの属性」をクリックします。図のような設定画面に切り替わります。

【図】fig4-5.png

マップウィジェットの設定画面

 Dashcodeで生成されるマップウィジェットはGoogleマップのバージョン2を使用しているので、GoogleマップのAPIキーが必要です。APIキーを取得していない場合は以下のサイトでAPIキーを入手してください。

 取得したAPIキーをプロパティのカテゴリーにあるMaps APIキーの欄に、マップに表示する場所を初期アドレスの欄に入力します。入力した住所はジオコーディングされ、指定した住所の地図が最初に表示されます。

 次に、ウィジェット識別子を入力します。識別子は他のウィジェットと異なっていればよいのですが、「map」のように単純に思いつく名前を入力すると世界中の誰かが作ったウィジェットと重複してしまう可能性があります。そこで、なるべく他と被らないように、ドメイン名を逆にした名前を指定します。たとえば「www.openspc2.org」なら「org.openspc2.www」といった具合です。これで、同一の名前を持つウィジェットが存在する可能性を減らせます。

 ウィジェット識別子の横にバージョンを入力する部分があります。とりあえず現時点では初期バージョンなので「1.0」にします。このほかは特に入力する必要はありません。

【図】fig4-6.png

必要な項目を入力する

 ウィジェットを作成します。サイドバーの「実行と共有」をクリックすると、以下の図のような画面になります。ウィジェット名のカテゴリーにウィジェットの名前を入力します。ここで入力した名前が実際に表示されるウィジェット名になります。

 オプションの動作に必要なMac OS Xのバージョンはそのままにしておきます。どうしても10.4.0で動作させたい場合のみ、10.4.0(後方互換)を選択します。

【図】fig4-7.png

ウィジェット名を入力する

 ウィジェット名を入力したら、ウィンドウ右下にある「Dashboardに動作形式で保存」ボタンをクリックします。

【図】fig4-8.png

「Dashboardに動作形式で保存」ボタンをクリック

 確認のダイアログが表示されるので「インストール」ボタンをクリックします。

【図】fig4-9.png

インストールボタンをクリックしてインストール

 確認画面になるのでインストールする場合は「保持」をクリックします。

【図】fig4-10.png

「保持」をクリックするとマップウィジェットがインストールされる

 マップウィジェットがインストールされ、ほかのウィジェットとともに表示されます。地図の表示までに時間がかかることがありますが、少し待ちましょう。ウィジェットのまわりをドラッグするとウィジェットを移動できます。こうした挙動は他のウィジェットと変わりません。

【図】fig4-11.png

他のウィジェットとともに表示される

【図】fig4-12.png

航空写真なども表示できる。機能はWebサイトのGoogleマップと変わらない

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く