[GoogleAPI][event]Googleデベロッパー交流会 第7回 - GeoAPI@東京コンファレンスセンターに行ってきた

2008年10月6日(月) 14:00-17:00
Googleデベロッパー交流会 第7回 - GEO API東京コンファレンスセンター

前回参加したGoogle Developer Day 2008 Tokyoから4ヶ月も経ったんだな、と感慨深くなりつつ、品川にある東京コンファレンスセンターに到着。

DVC00003.jpg

なんだか今にも雨粒が落ちてきそうな曇天だったけれど、結局行きも帰りも雨が降ることはなかった。
プログラムの概要は以下の通り。

1. 基調講演(Google デベロッパープログラムエンジニア パメラフォックス)
 1-1. Google Maps API
 1-2. Google Static Maps API
 1-3. Google Maps API for Flash
2. パネルディスカッション
 2-1. メンバー紹介(あなたにとってGeoAPIとは何ですか?)
   ・モデレータ
     *Google 石原直樹さん
   ・パネラ
     *株式会社ゴーガ 石丸健太郎さん
     *安藤幸夫さん
     *勝又雅史さん
     *Google 後藤正徳さん
     *Google 片岡彗さん
     *Google パメラフォックスさん
 2-2. 「このエリアを散策」機能について(Google 片岡彗さん)
 2-3. GoogleMaps活用講座(勝又雅史さん)
 2-4. MMNN - Map Mole News Network(安藤幸夫さん)
 2-5. doodle(石丸健太郎さん)
 2-6. GEO APIをビジネスで使うにあたって疑問なこと、困ったこと
 2-7. 苦労話・Tips
3. GeoAPIへの要望・質問

基調講演の内容は、ほとんどGoogleMapsの3つのAPI(JavaScript, Flash, Static)についての解説だったので、それは「Google Maps API(日本語)」や「Google Static Maps API(日本語)」、「Google Maps API for Flash(英語)」を読めば良いと思う。

それよりも事例紹介に出てきたサービスが色々面白かったので、そちらを紹介したい。

1-1. Google Maps API(JavaScript)の事例紹介

*データベースと地図を組み合わせた「ラーメンデータベース
ピクチャ 6

*さりげなくノッポンを地図に載せている東京タワー
ピクチャ 7

*マップのUIを変更してサイトの印象に合わせたAce
ピクチャ 8

*同じくマップのUIを変更してサイトの機能と組み合わせた「【街ログ】 レジャー、観光、グルメ、ニューオープン、おすすめスポットを動画でガイド
ピクチャ 9

*架空の地図と重ね合わせた「MapWoW.com World of Warcraft Maps
ピクチャ 11

*もはや地図と呼んで良いのかすら分からない宇宙の地図「Google Sky
ピクチャ 12

*地図上でパノラマ写真が見られる「Prague, Czech - 360 Cities
ピクチャ 14

1-2. Google Static Maps APIの事例紹介

URLのパラメタを変更することで簡単にMapを取得することが出来る「Google Static Maps API」。この「Google Static Maps API」を使うメリットは「携帯電話など、JavaScriptに対応していないブラウザ向けにも使える」ことと、「初期のロード時間を短くして、ユーザエクスペリエンスを向上させる(何故ならばJavaScriptAPIよりもStaticMapsAPIの方がずっと早いから)」ことの2つ。

*一番最初のMapだけはStaticMapsAPIで表示し、ズームなどの操作が発生した瞬間にJavaScriptのMapsAPIでの表示に変更している「Yelp San Francisco Restaurants, Dentists, Bars, Beauty Salons, Doctors
ピクチャ 15

1-3. Google Maps API for Flashの事例紹介

*ドライビングシミュレーションが出来る「2D自動車シミュレーター on Google Maps
ピクチャ 16

*「CollaborativeChatRooms」と題して、Flash上の地図に絵を描きながらチャットが出来るサービスも紹介していたのだが、そちらは見つからなかった。残念。

このように、GoogleMapsに存在している3つのAPIを事例を用いて紹介して頂いたのだが、まとめとしては「何をしたいのか。早いロードを求めるのか、自由なアニメーションを求めるのか、という目的によって、最適なAPIを選択して欲しい」とのことでした。

2. パネルディスカッション

2-2. 「このエリアを散策」機能について(片岡さん)

GoogleMapsに、地図上に写真を表示する「このエリアを散策」という機能があったことを、これを聞いて初めて知った。

ピクチャ 17

ちゃんと「このエリアを散策」というリンクがある。
目に入っていても見えていないものだなぁ。

ピクチャ 19

この機能を追加するにあたって、MapsAPIを使ってデモを作り、Google内で提案を行ったらしい。APIはこういった形で社内でも活用されているんですね。

2-4. MMNN - Map Mole News Network(安藤さん)

パメラの事例紹介と同じく、安藤さんの事例紹介もすごく面白かった。

*ニュースと位置情報を結びつけて、地図の上に表示する「[MMNN] Map Mole News Network」。例えばおすすめキーワードの「伝説」をクリックすると、各地の伝説に関わるニュースが地図上に表示される。
ピクチャ 20

*この日一番のヒットだったのはiPhoneアプリの「World 9」。要はこのアプリを立ち上げて、ジャンプするとマリオのジャンプ音がするというアプリケーションなのだけれど、このジャンプ状況をリアルタイムで表示している世界地図がものすごく楽しい!(この辺のWorld 9に込められたピースフルな思想は「iPhone時代のコミュニケーション - World 9 Worldプロジェクト」を読むと伝わってくる)
ピクチャ 22

そんなパネルディスカッションの後、実際に開発をした際の苦労話などをパネラーが話し、最後に質問や要望を受け付けて終了。

DVC00248.jpg

Googleが提供しているサービスやAPIは、量が膨大なこともあって自分一人では追いきれないので、たまにこうして特定のAPIについて詳細な話を聞くと、知らなかったことが知れてすごくわくわくする。
「そうだよね、こういう気持ちで開発をするから楽しいんだよね」と思いながら帰路についたのでした。(ちなみに脳内がMapsAPIのことでいっぱいになり過ぎて、山手線の反対方面に乗ってしまい、行きの3倍くらいの時間をかけて帰った)

デベロッパー交流会を開催頂きましたモデレータ、パネラー、そしてGoogleの皆様に感謝します。どうもありがとうございました。

テーマ : イベント・セミナー
ジャンル : コンピュータ

[GoogleAPI][event]Google Developer Day 2008 Tokyoに行ってきた - Googleのソフトウェアエンジニアの日常

2008年6月10日(火) 17:00-17:45
「Googleのソフトウェアエンジニアの日常」@パシフィコ横浜(会議センター) メインホール
グーグル株式会社 ソフトウェアエンジニア 藤島勇造氏

●カルチャー
  ・Clarity
   *目標を明確に延べ、他人の協力を得る
  ・Transparency
   *判断の元となったデータは何か?
    どのようなプロセスでどのデータを使って、その判断に至ったのか?
    という経緯を明確にする
  ・Democracy
   *命令の連鎖ではなく、総意に基づいて意思を決定する
   *社の移転についても、住んでいる場所から全員の総意で決定した
    →実例
     *20%の時間を使って、グループ横断活動で他エンジニアを支援
     *新しく入ってきた人を助けるメンター制度

  ・Intiate
   *問題があれば自分が直す
   *責任を持って実現する
  ・Iterate
   *完璧になるのを待つのではなく試してみる
   *結果的には柔軟かつ迅速に対処出来る
  ・Scrappy
   *今使えるものを使って目標を実現する
   *安く効率的に実現する方法を考える
  ・Party
   *周囲の人を楽しませる
  ・Celebrate
   *地味な仕事、泥臭い仕事にも光を当てる
  ・Passion   
    →実例
     *利益が出たらプールを作る

●ソフトウェア開発
  ・分散開発
   *すべてのオフィスは対等
    * 全世界でひとつのプロジェクトチーム、最も近いオフィスに行く
   *複数のオフィスにプロジェクトメンバが分散
   *コミュニケーションが鍵
    * 時差が最大の問題
  ・プロジェクト
   *多様なプロジェクトが多数ある
   *ボトムアップ式で、アイデアがひらめいたら先ずは20%プロジェクトとして開始
  ・ソフトウェアエンジニアの仕事
   *各エンジニアが開発のほとんどに関わる
    * アイディア出しから開発、テスト、保守まですべてに関わる
   *必要な文書は作るが、不要な文書を作るよりもデモを作ることの方が大切
   *言語は主にC++, Java, Python, JavaScript
    * 読みやすいコードを書くため、プログラム言語ごとにスタイルを全社で統一している
    * スタイルにあったコードを各一を社内で認定
   *コードの共有
    * 1つのソースコードを全世界で共有
    * どんなコードも同僚のチェックを受けなければサービスとしてアップ出来ない

●その他の仕事
  ・採用活動
   *基本的には、ソフトウェアエンジニアは開発に集中
   *重要な例外は採用活動への協力
   *面接の内容
    * コンピュータサイエンスの基礎
    * 社風に合いそうか?一緒に働いてお互いにハッピーか?
  ・業績評価
   *四半期ごとに目標の設定と評価
    * 一緒に仕事をした人の業績を評価する

●遊び
  ・遊びは重要
   *「遊びと仕事は両立する」という社風
  ・オフサイトイベント
   *年に数回、オフィスを離れてチームビルディング
  ・部活動
   *ジャグリング部
   *ラーメン部
   *マリオカート部

●私のケース
  ・入社動機
   *優秀な人たちと一緒に、世界中の人に向けてソフトウェア開発がしたい
  ・入ってみたら
   *人間的にも魅力のある人たちが本当に多かった
   *想像以上に動きが速い
    * やった仕事がすぐに世界に出て行く
    * ソフトウェアツールがどんどん改善されていく
   *誰が言ったのか?ではなく、その意見が本当に正しいか?が重視される
   *エンジニアは尊重/信頼されている
   *良いソフトウェアを開発するために、真剣に仕事に取り組んでおり、
    必要なら泥臭いことも厭わない

●心がけていること
  ・分かり易いコードを書く
  ・他人のコードを尊重する
   *全体としての生産性を重視する
  ・正確かつ簡潔なコミュニケーションをする
   *文化が異なる人との、母国語以外でのやり取り
   *受け手の負担を考える
  ・Easier To Ask Forgiveness Than Permission
  ・仮説立て/仮決定してとにかく進めてみる
  ・目先の仕事以外にも目を向ける
  ・良き仲間たれ
   *結局これが一番重要

●Q&A
  ・Googleはどこに向かっているのですか?
   →Googleのミッションは世界中の情報を整理し、どこからでもアクセス出来るようにすること
  ・公開されている他プロジェクトのソースコードは、共有されているだけでなく実際よく見られているのですか?
   →関係する他プロジェクトのソースを見たり、新しいメンバが過去に書いたソースを見たり、
    新しいプロジェクトに参考になりそうなソースを見たりと、結構な頻度で見ています

テーマ : Google
ジャンル : コンピュータ

[GoogleAPI][event]Google Developer Day 2008 Tokyoに行ってきた - Google Maps API for Flash

2008年6月10日(火) 16:00-16:45
「Google Maps API for Flash」@パシフィコ横浜(会議センター) L-4会議室
グーグル株式会社 ソフトウェアエンジニア 加藤定幸氏

●Google Maps API for Flash概要
  ・Google MapsをFlash上で表示するためのAPI
   *http://code.google.com/apis/maps/documentation/flash/
  ・2008年5月15日にリリースされたばかり
  ・ActionScriptを使ってプログラミング可能
   *FlashCS3ではなく、FlexBuilderもしくはFlexSDKでのみ開発可能
  ・作成にあたって
   *開発環境は無料で配信されているソフトで構築可能
   *APIキーが必要だが、AJAX用のキーを取得していればそれをそのまま使用出来る

●Google Maps API for FlashでHello World(デモンストレーション)
  1. Adobe Flex SDKを用意
  2. Interface Libraryの取得
  3. アプリケーションのパッケージ名を定義
  4. Interface Libraryのパッケージをインポート
  5. イベントリスナーを関数として定義し、イベントと関連づける
   *Maps API for Flashはイベント駆動型だから
  6. Maps APIを使用するため、Mapsクラスを拡張したクラスを作成する
  7. MXMLファイルを作成
  8. ビルドを行う
  9. サーバ上にUPする

●Google Maps API for Flashのさまざまな機能
  ・現在用意されているイベントは4つ
   *http://code.google.com/apis/maps/documentation/flash/events.html
   *onMapReady
   *onMapMoveEnd
   *onMapReady
   *onMapClick
  ・用意されているコントロールも4つ
   *http://code.google.com/apis/maps/documentation/flash/controls.html
   *PositionControl
   *ZoomControl
   *MapTypeControl
   *OverViewMapControl
  ・オーバーレイについてはこちらを参照
   *http://code.google.com/apis/maps/documentation/flash/overlays.html

●基調講演で見せようとしていたアプリケーション
  ・加速度センサーとアプリケーションが連動し、センサーを動かすことでGoogle Mapsが動く
   フライトシミュレータのようなアプリケーション

●Google Maps APIの使い分け
  ・Flash
   *Flashの視覚効果を活かしたい
   *Flashで開発中のアプリケーションと連動させたい
   *JavaScriptよりもActionScriptが得意 という場合に使うと良い

●Flash開発者へのメッセージ
  ・Google Mapsの開発チームも日本初のアプリケーションに注目している
  ・是非開発された際には、簡単で良いので英語のReadMeも用意して欲しい

●Q&A
  ・携帯電話のFlashには対応していますか?
   →FlashLiteには未対応ですし、対応の目処も具体的にはたっておりません
  ・AJAX版とFlash版でパフォーマンスは異なりますか?どちらが良いですか?
   →きちんと比較検討したことがないので分かりません
    少し前まででしたらFlashの方が上かと思いましたが、FireFoxのバージョン3などで
    JavaScriptの速度も上がっているので、どちらが早いかは検証してみないと分かりません
  ・CS3やAIRには対応予定ですか?
   →開発チームとしては強い要望があることは把握しておりますが、
    具体的な対応日時については未定です
  ・AJAX版で出来て、Flash版で出来ないことはありますか?
   →多分あると思います
  ・カスタムアイコンを使って表示をする場合に、影は自動生成されますか?
   →AJAX版と同様に、自分で用意をする必要があると思います

テーマ : Google
ジャンル : コンピュータ

[GoogleAPI][event]Google Developer Day 2008 Tokyoに行ってきた - マッシュアップアプリケーションとGoogleAPI

2008年6月10日(火) 13:00- 13:45
株式会社リクルート メディアテクノロジーラボ 川崎有亮氏
「マッシュアップアプリケーションとGoogleAPI」

●はじめに
 ・GoogleのAPIはいくつあるのか?
  *毎月増えていて、現在は60
  *http://kawa.at.webry.info/200806/article_1.htmlで確認出来る
 ・プレゼンテーションツールとGoogleAPIのマッシュアップ
  *マッシュアップとGoogleAPIについての話題なので、実際にGoogle AJAX Language APIを使って
   スライドの内容を翻訳しながらトークする
 ・本日のアジェンダ
  *Google Language API
  *Webサービスとマッシュアップ
  *Google Maps API
  *Google Chart API
 ・自己紹介
  *http://www.kawa.net/

●マッシュアップとは?
 ・元々は音楽用語、複数の曲を組み合わせて1つの曲を作る手法
  →転じて、複数のWebサービスのAPIを組み合わせて、1つのサービスを作ること
 ・世界のAPIの総数は?
  *programmablewe.comに登録されているだけで775
 ・リクルートでも14媒体(事業)のAPIを公開中
  *http://webservice.recruit.co.jp/
  *Mashup Award 4thも開催中

●マッシュアップ開発サンプル
 ・Google MapsとHot Pepper Webサービスを使って、2時間くらいで作った
 ・リクルート WEBサービス UI Library
  *http://mtl.recruit.co.jp/sandbox/rui/
  *リクルートが提供しているAPI使ってサービスを作る際に利用出来るJavascript ライブラリ

●Google Maps API
 ・Google Maps APIを使用するには、APIキーが必要
 ・Google Maps API for FlashやGoogle Static Maps APIなど、Google Maps APIのファミリーも増えている
  *GIF, JPEG, PNG対応
  *さらにmaptypeをmobileにすると「携帯電話で見やすいように」出力してくれる

●Google Chart API
 ・折れ線、棒、円グラフなどの基本的なグラフから白地図機能まで利用可能
  *http://code.google.com/intl/ja/apis/chart/

●AJAX Libraries API
 ・人気のJavaScriptライブラリをGoogleが配信してくれる
  *http://code.google.com/apis/ajaxlibs/
 ・インターネットプラットフォームの3レベル
  Level1 - Access API
   :各企業が持っているデータを提供してもらい、それを利用する
  Level2 - Plug-In API
   :企業から提供されたサービスを、自分のサービスにプラグインとして組み込める
  Level3 - Runtime Environment(online platform)
   :Google App Engineのように、ローカルマシン上ではなく共通のプラットフォーム上でサービスが提供出来る
 ・Wiiリモコンを使ったデモンストレーション
  *PCのインタフェースはキーボード(1D)から、マウス(2D)へと発展
  *さらに3D,4Dへと発展するのでは?

●まとめ
 ・APIの利用は手軽になり、開発者の裾野も広がった
 ・黎明期の「マッシュアップのためのアプリ開発」から、「サイトを活かすマッシュアップ」へ

テーマ : Google
ジャンル : コンピュータ

[GoogleAPI][event]Google Developer Day 2008 Tokyoに行ってきた - 基調講演

Google Developer Day 2008 Tokyo

2008年6月10日(火) 10:00- 12:00
基調講演@パシフィコ横浜(会議センター) メインホール

シニアプロダクトマネージャ 及川卓也氏
「次世代ウェブに向けて クライアント(client)、コネクティビティ(connectivity)、そしてクラウド(cloud)」

●3つのC
  ・メインフレームの時代(30年前)
   *処理能力やデータ容量は高い
   *実際にユーザに使ってもらう展開の容易さはあった
   *しかしながらUIの観点から見ると使いやすい環境ではなかった
  ・パーソナルコンピュータの時代
   *処理能力やデータ容量は低い
   *個人のPCにアプリケーションを入れて使ってもらうことは難しかった(個々の環境によって動作が異なるため)
  ・インターネットの時代
   *メインフレームの時代に戻ったような感覚

    →インターネットの時代を経て、現在の課題は
     「クラウド」をよりアクセスしやすく、
     「コネクティビティ」をユビキタスに、
     「クライアント」をよりパワフルに という3つのC

  しかしすべての人のコンセンサスを取りながら、物事が決まっていくのがウェブの標準であり、
  Googleが一方的に解決策を決める訳ではない

●Client(よりパワフルに)
  ・1年前に発表したGears
   *ブラウザを拡張することでリッチウェブアプリケーションの開発を可能に
   *ローカルデータベース、ローカルサーバを利用することでよりリッチなアプリケーションを提供
  ・Android
   *実際にAndroidが載った端末でデモンストレーション
   *Google Mapsで特定の場所を選んだら、その場所での視点が再生されてた、すごい

●Cloud(よりアクセスしやすく)
  ・Google App Engine(ソフトウェアエンジニア鵜飼氏)
   *Google App Engineを使うことで、Googleのプラットフォームを使って自由に開発が可能となる
   *なぜGoogle App Engineを用意したのか?
    →アプリケーションを開発するのは、
     物理的にマシンを用意し、Linux,Apache,MySQL,PHPなどを準備する必要があり、
     初期コストや運用コストがかかり、非常に大変なことである
     これを助けるのがGoogle App Engine(みんなが作ったシステムを実際に動かせるプラットフォーム)
   *どうやってGoogle App Engineを使うのか?
    1. 先ずはコードを書く
    2. ローカルマシンで動作を確認する
    3. Googleに対してコードをデプロイするだけ!
   *Google App Engineを使った事例
    a) Twitter Wheel
     http://www.tweetwheel.com/
    b) Later Loop
     http://www.laterloop.com/
   *日本のキャリアの対応が遅れてはいるが、近々に解決する予定
   *GData(プロトコル)を用いて、Googleをデータエンジンとして使うことが出来る

●3つのC以外に・・・ソーシャル化
  ・ウェブが人やサービスを結びつける基盤となり、よりいっそうソーシャル化が進んでいく
  ・Googleの提供するソーシャル技術
   *iGoogle
   *Google Maps
   *Youtube
  ・OpenSocial
   *2007年11月に発表された完全なオープンソースプロジェクト
    * 利用者は2億7千5百万人
    * 開発者は2百万人
    * サポート表明コンテンツパートナーには日本企業も多い
   *既存のソーシャルサービスは、各サービスごとに閉じてしまっている
   *そこを共通部分化することで、どのサービスでも共通で使えるアプリケーションが開発出来るようにしたい
   *開発事例(株式会社リクルート メディアテクノロジーラボ 近藤氏)
    a) コマーシャライザー
     http://cmizer.com/
    b) ドコイク?
     http://www.doko.jp/
   *Google Friend Connect
    * オープン標準に基づく
    * 単純なコピー&ペーストでサイトを構築可能
    * OpenSocialコンテナや開発者に対しての新しい可能性の提示
    * これを用いることで、よりユーザにリーチ出来る場が広がる

●3つのC以外に・・・ウェブアプリケーションの開発をより身近に
  ・ウェブデザイナや一般ユーザにもGoogleのサービスを取り込んでもらえるように
  ・Google Maps API for Flash
   *FlashでGoogle Mapsの機能を利用したアプリケーションの開発が可能になる
   *今までのJavaScriptと同じように、ActionScriptからAPIが使えるようになった
   *実際のデモンストレーション(ソフトウェアエンジニア 加藤氏)
    * 加速度センサーとアプリケーションが連動し、センサーを動かすことでGoogle Mapsが動く(はず)
    * フライトシミュレータのようなアプリケーション
  ・Google Earth API
   *Google Earthのにより提供される3次元のレンダリング機能をウェブサイトに組み込める
   *現時点ではWindows環境のみ
   *実際のデモンストレーション(Mano Marks氏)
    * MONSTER MILKTRUCK!
     http://www.google.com/earth/plugin/examples/milktruck/
  ・Chart API
   http://code.google.com/intl/ja/apis/chart/
   *URLのパラメタで値を渡すことで、グラフ、チャートをPNG形式のファイルで返してくれる
   *このAPIを使うことでチャートの作成を動的に行うことが出来る
   *このAPIがRESTful対応の例のひとつ

●One more C
  ・課題に対しての完全な形を見つけきれている訳ではなく、みんなと一緒に解決し、
   ウェブをあるべき姿に成長させていければと考えている
  ・もうひとつのC(執行役員 辻野氏)
   *Cloud, Connectivity, Client, and One more C is Communication
   *ニーズの高いドキュメントから、今後も随時日本語化を進めていく予定
   *Googleが用意した土壌に、デベロッパが自由に種を蒔き、育った木がコミュニティとなっていって欲しい
   *デベロッパをサポートするプログラム
    * デベロッパ交流会を開催
     http://groups.google.co.jp/group/developer-round-table
    * Google API experts program(各APIの認定エキスパートを中心として、サポート活動を行う)
     http://googlejapan.blogspot.com/2008/06/google-developer-day-2008-japan-ask.html
   *Be Social

テーマ : Google
ジャンル : コンピュータ

[GoogleAPI][event]iGoogle Art Cafe@Hills Café/Spaceに行ってきた

12時ごろや、イベントをやっている時間帯は混みそうな気がしたので、14時ごろにiGoogle Art Cafe@Hills Café/Spaceへ行ってみた。
平日で、しかもランチには遅い時間とあって結構空いていたけれど、まるで高校の文化祭のように誰がオーダーを取るのかもよく分からず、スタッフが忙しそうでいて妙に暇そうなのがなんだか面白かった。

Couleur de Google (クルール・ドゥ・グーグル)を食べてみた。
お皿にココアパウダーで「iGoogle Art Cafe」って書いてあったのだけれど、どんなに頑張ってもさらさらな粉なので、崩れてしまったのがちょっと悲しかった・・・まあたった2週間のイベントのためにお皿作らないよね。

CouleurdeGoogle.jpg


きっとこれはiGoogleを広めるためのイベントなんだと思うんだけど、来ていたお客さんはどの人も既にiGoogle使っていそうな人ばっかりだったな。
あとママン(蜘蛛のオブジェ)の直ぐ近くにあるあの場所がカフェだったことを、この時初めて知りました。

ちょうど使っていたテーマのぬいぐるみがあった、これが可愛かったので満足。
朝の7時から夜の23時半まで働いた時の僕はこんな感じになってます。

blue.jpg

テーマ : Google
ジャンル : コンピュータ

[GoogleAPI]iGoogle Theme Manager BETAを使ってみた

以前、iGoogle Themes APIで自分のテーマを作成した際に、GoogleグループアドバイスをくれたString氏がガジェットを公開したようです。

実際、iGoogleでこのガジェットを使ってみたのですが、
・Googleを通じて一般に公開されているテーマ
・「?skin=」のパラメータをつけて個人的に使っていたテーマ
のどちらも、テーマ名で瞬時に切り替えることができ、特に後者は毎度パラメータを付け直して使っていたことを考えると、感動的な使い心地です。

iGoogleThemeManagerBETA.png


こんな感じで簡単に切り替えが出来ます、便利ー。
iGoogleのテーマや、iGoogleThemesAPIを使っている人には、ぜひこちらのガジェットを使ってみることをお勧めします。

以下はString氏がGoogleグループに書いていたガジェットの紹介文、「New beta of Theme Manager gadget」の意訳。(間違っている所があるかも知れないので、原文を参照することをお勧めします)



もし関心を持ってくれる人がいれば、私はこの自分で作ったiGoogleテーママネージャガジェットの改訂版を今後リリースしていくつもりです。
このベータ版ガジェットは下記のURLからiGoogleに追加できます。

http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=www.udell.name/inline_gadget.xml

新しいバージョンはiGoogleとの一体化を強化し、テーマごとに場所(ロケーション)の違いをサポートしたり、その他幾つかの良い点を含んでいます。
私がこのガジェットを広く普及させ始める前に、どなたかこのガジェットを試してフィードバックを頂ければ、感謝いたします。

String



技術を通じていなければ、恐らく一生関わることのなかった人のメッセージを、ここで私が翻訳している不思議。
不思議だな、人との関わりや繋がりによって私は今の状態の私で在る。

テーマ : Google関連
ジャンル : コンピュータ

[GoogleAPI]iGoogle Themes APIで自分のテーマを作ってみた

Google,iGoogle用にオリジナルのテーマが作成できるAPIを公開:ITpro
という記事を見て、面白そうだったので自分だけのテーマを作ってみた。

WebAPIと聞くと「プログラムの中で、Googleから提供されてるこのメソッドを呼び出して・・・」と身構えてしまうかもしれないけれど、方法は意外と簡単。

1. リファレンスで指定されたとおりにXMLファイルを書く
2. Webサーバに置く
3. (もし持ってないなら)Googleのアカウントを取得してiGoogleにログイン
4. URLの後ろに「?skin=XMLファイルのURL」をつける

Googleがサンプルとして提供しているXMLファイルがあるので、そこを見てみると分かりやすいかもしれない。

http://www.google.co.jp/igにアクセスしたら、いつものiGoogleが表示される。
次にURLの後ろに「?skin=XMLファイルのURL」をくっつけた状態でアクセスしてみよう。

ちょっと長いけど、http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xmlを開いてみる、さっきとおなじiGoogleに「skin=」というパラメータをくっ付けただけなのに・・・・・・背景とGoogleロゴの色が変わったー。

目に見える変化は楽しいし、嬉しい。
じゃあ自分のXMLファイルを作ってみよーうー、と勢い込んで作ってみた。

作るも何もiGoogle Themes APIのHOMEにある"How do I start?"に書いてある通り、例を見てデベロッパー向けガイドを読んで、必要に応じてリファレンスを参照して色々直すだけです。

とはいえリファレンスは英語のままなので、「XMLファイルにコメントの形式でリファレンスの日本語訳をつけたもの」を以下にざっくり並べておきます。
リファレンスを0から10まで訳したありませんし、解釈の間違っているものがあるかも知れません。上手くいかないときはぜひ元のリファレンスも参照して下さい。
ついでにコメントで間違いや不足を教えていただけると嬉しいです。

■XMLファイルの書き方の例

<?xml version="1.0" encoding="UTF-8" ?>
<ConfigMaps>

 <!-- どんな時間も常に適用されるスキン -->
 <ConfigMap type="Skin">
  <!-- テーマ名(テーマ一覧で表示される), 0-30文字 -->
  <Meta name="title">HogeTheme</Meta>
  <!-- テーマの説明, 0-300文字 -->
  <Meta name="description">Tis the Theme of Hoge</Meta>
  <!-- 作者名(テーマ一覧で表示される), 0-50文字 -->
  <Meta name="author">mochikoAsTech</Meta>
  <!-- 作者のEメールアドレス(Googleやユーザからのコンタクト用), 0-100文字で@必須 -->
  <Meta name="author_email">myMailAddress@mail.ne.jp</Meta>
  <!-- 作者の所在地, 0-100文字 -->
  <Meta name="author_location">Japan</Meta>
  <!-- サムネイル(410px×70px)のURL(FQDN), png, gif, jpgのどれか -->
  <Meta name="thumbnail.url">http://hoge.com/image/thumbnail.png</Meta>
  <!-- スクリーンショット(680px×116px)のURL(FQDN), png, gif, jpgのどれか -->
  <Meta name="Screenshot.url">http://hoge.com/image/screenshot.png</Meta>

  <!-- ヘッダの背景色, 画像がない場合や透過画像の背景に表示される -->
  <!-- 指定方法は3種類, #xxxxxx, RGB(x,x,x), もしくは下記の色名(以下「色名」と書いてあるものは全てこれと同様) -->
  <!-- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow -->
  <Attribute name="header.background_color">purple</Attribute>
  <!-- ヘッダ画像(640px×175px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="header.tile_image.url">http://hoge.com/image/header.png</Attribute>

  <!-- ヘッダリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="header.link_color">white</Attribute>
  <!-- ヘッダテキスト色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="header.text_color">white</Attribute>

  <!-- iGoogleのヘッダロゴ, 28種類から選択 -->
  <!-- http://code.google.com/apis/themes/docs/reference.html#Ref_Logos -->
  <Attribute name="header.logo">beveled_white</Attribute>

  <!-- タブのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.tab.border_color">silver</Attribute>
  <!-- 選択タブの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.tab.selected.background_color">purple</Attribute>
  <!-- 選択タブの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.tab.selected.text_color">white</Attribute>
  <!-- 非選択タブの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.tab.unselected.background_color">purple</Attribute>
  <!-- 非選択タブの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.tab.unselected.text_color">white</Attribute>
  <!-- ガジェットエリアのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.border_color">silver</Attribute>
  <!-- ガジェットエリアのタイトルの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.gadget.header.background_color">white</Attribute>
  <!-- ガジェットエリアのタイトルの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.gadget.header.text_color">white</Attribute>
  <!-- ガジェットエリアのガジェットのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.gadget.border_color">silver</Attribute>
  <!-- ガジェットエリアのリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="gadget_area.gadget.body.link_color">white</Attribute>

  <!-- 選択タブのメニューアイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.menu_icon.image.url">http://hoge.com/image/01.png</Attribute>
  <!-- ガジェットのメニューアイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.menu_icon.hover_image.url">http://hoge.com/image/01.png</Attribute>
  <!-- ガジェットの削除アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.delete_icon.image.url">http://hoge.com/image/03.png</Attribute>
  <!-- マウスオーバー時のガジェットの削除アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.delete_icon.hover_image.url">http://hoge.com/image/04.png</Attribute>
  <!-- ガジェットの折畳アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.collapse_icon.image.url">http://hoge.com/image/05.png</Attribute>
  <!-- マウスオーバー時のガジェットの折畳アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.collapse_icon.hover_image.url">http://hoge.com/image/06.png</Attribute>
  <!-- ガジェットの展開アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.expand_icon.image.url">http://hoge.com/image/07.png</Attribute>
  <!-- マウスオーバー時のガジェットの展開アイコン(12px×12px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="gadget_area.expand_icon.hover_image.url">http://hoge.com/image/08.png</Attribute>

  <!-- フッタの背景色, 画像がない場合や透過画像の背景に表示される -->
  <Attribute name="footer.background_color">purple</Attribute>
  <!-- フッタリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="footer.link_color">white</Attribute>
  <!-- フッタテキスト色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
  <Attribute name="footer.text_color">white</Attribute>
  <!-- フッタ画像(640px×140px)のURL(FQDN), png, gif, jpgのどれか -->
  <Attribute name="footer.center_image.url">http://hoge.com/image/footer.png</Attribute>
  <!-- 作成者のロゴ画像(100px×50px)のURL(FQDN), png, gif, jpgのどれか -->
  <!-- リファレンスだと先頭にfooter.がついているがfooter.つけてると出ない -->
  <Attribute name="attribution.image.url">http://hoge.com/image/auther.png</Attribute>

 </ConfigMap>
</ConfigMaps>

補足事項

元々のリファレンスに間違いが有ります
 「attribution.image.url」はリファンレンスだと、「footer.attribution.image.url」になっていますが、正しくは「attribution.image.url」です
 (Googleグループでも同じ指摘が出ていた)
・時間ごとにスキンを変更することが出来ますが、そちらはまだ試していないので上記のサンプル(兼日本語リファレンス)には含めていません。「<Trait name="TimeOfDay">8am-10am</Trait>」のような形で、分単位で指定可能です。(例えば5:15pm-5:20pmのように、一日の中で5分だけ見られる特別なスキンも用意できます)
・さらにリファレンスを読むと、お天気によってもスキンを変えられるようです。
 「A ConfigMap represents one fully-qualified skin. That is, it represents a skin with all attributes that apply to it (for example, Foo skin for Cloudy weather)」とあったのですが、残念ながらその部分の書き方が分かりません。ご存知の方は教えてください。
・完成した!このスキンは我ながら素晴らしいので、公開してみんなに使ってもらいたい!と思ったら、Submit iGoogle ThemesでXMLファイルのURLを登録して、公開することが可能です
 但し、公開する場合は「メタデータを全て含めなければならない」「フッタのattribution.image.url以外の場所に社名を入れてはならない」など色々制限事項がありますので、よくガイドラインを読み、十分テストをした上で公開するようにしましょう
FC2ホームページのように、画像に対する直リンクを禁止しているWebサーバを利用すると、ヘッダやフッタの画像が表示されないことがあります(というか表示されません)
 iGoogleにskinパラメータをつけて開くと、HTTPヘッダにリファラが含まれた状態で、画像を置いてあるサーバにリクエストが行くため、「外部ドメインから画像への直リンクだ」と見なされて、302で「この画像に対するアクセス権限がありません」というページに飛ばされてしまいます

iGoogleの画面をずっと開きっぱなしということはあんまりないかと思いますが、使ってみると検索の折々で意外と目につきます。
自分のiGoogle Themeを自分で作る、暫く色々試して楽しめそうです。

テーマ : Google関連
ジャンル : コンピュータ

プロフィール

Author:mochiko
前職は携帯コンテンツ会社のエンジニア、現在は独立系SIerで色々。
GenesisLightningTalksのお手伝いをしたり、気になる勉強会に参加したりしつつ、毎日本を読んで過ごしています。
どれだけ本を読んでいるのか、はライトニングトークの動画を見てもらえれば・・・。

テクノラティお気に入りに追加する
はてな
mixi
SlideShare
Ustream.TV
YouTube
Wassr

最近の記事
最近のコメント
最近のトラックバック
全記事表示リンク

全ての記事を表示する

月別アーカイブ
カテゴリー
mochikoAsTechCnt
ブログ内検索
RSSフィード