WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

Google Personalized Homepage ガジェットの作り方 : ガジェットディレクトリに登録する

これまで長期にわたって Google Personalized Homepage ガジェットの作り方をご紹介してきました。やっとのことで、必要な知識をほとんど網羅できたと思います(先日アップデートされた分はまだですが^^;)。そこで、本日はいよいよ制作したガジェットを Googleガジェットディレクトリに登録する方法をご紹介します。登録申請自体はフォームにガジェットソースの URL を入力するだけなのですが、個人的に使用しているときは省略可能だった記述をきちんと整えておく必要があります。そのあたりも交えて手順をご紹介しますので、制作したガジェットをたくさんの人に使ってほしいという方は、ぜひ挑戦してみてください。

スクリーンショットの準備

ガジェットをディレクトリに登録する準備の手始めとして、ディレクトリに表示されるスクリーンショットやサムネイルを用意します。それらがなくても登録申請は可能ですが、ユーザーの目を引くことができないので意味がありません。さして面倒な作業でもないので、さっさとやってしまいましょう。スクリーンショットやサムネイルはどんな画像でもいいというわけではなく、いくつか条件があります。こちらの記事でもご紹介しましたが、ここで復習しておきましょう。

サムネイル

サムネイル画像はガジェットディレクトリのリスト画面で表示される画像です。ユーザーへのファーストインプレッションを与えるものですので、多くの人に使ってもらうためにもアピールできる画像を用意したいところです。必須条件は以下のようになります。

  • 画像フォーマットは PNG が推奨ですが、 JPEG, GIF でもかまいません。
  • 画像サイズは 120x60 に固定です。

画像の内容はとくに制限されていないので、ガジェットの機能やメリットが的確に伝わる、インパクトの強いものを選ぶと良いでしょう。ただし、あまりにガジェットの内容からかけ離れていると、審査に落ちたり画像を差し替えられたりする可能性がありますので、ほどほどに。

スクリーンショット

スクリーンショット画像はディレクトリでガジェット名をクリックしたときのページに表示される画像です。ユーザーにガジェットを追加したときの動作を的確に伝えることが求められますので、内容にはいろいろと制限があります。

  • 画像フォーマットは PNG が推奨ですが、 JPEG, GIF でもかまいません。
  • 画像の横幅は 280 ピクセル固定で、高さはガジェット全体が写るようなサイズにします。
  • 画像はタイトルバーも含めて動作中の画像全体を含めなければならず、その他のものを含めてはなりません。
  • リサイズやトリミングなどの画像加工は禁止されています。
  • 編集ウインドウ(タイトルバーの「編集」をクリックしたときに開く設定ウインドウ)が開いている状態を使うことはかまいません。
  • 周囲の余白はできるだけ少なくしてください。
  • もし画像が基準を満たさないと Google が判断した場合、スクリーンショットを差し替えることもあるそうです。

個人的な意見ですが、スクリーンショットは奇をてらわずに、素直に作るのが良いでしょう。この画像を見た時点でユーザーはある程度興味を持っているので、信頼できる印象を与えることが肝要かと思います。また、もしガジェットが国際化されているなら、対応する言語ごとに別々の画像を用意するのも良い方法です。東京アメッシュガジェットも日本語と英語のスクリーンショットを用意していますので、参考にしてください。

開発者の写真

こちらは完全に任意ですが、開発者の顔写真を登録することもできます。登録したガジェットが人気を博したあかつきには、ガジェット開発者ページに掲載されます。必須条件は画像フォーマットとサイズだけです。

  • 画像フォーマットは PNG が推奨されていますが、 JPEG, GIF でもかまいません。
  • 画像サイズは 70x100 に固定です。

全世界に自分の顔を晒すのに抵抗があるなら、その他の画像でもかまいません。もちろん開発者ページで顔写真が空白でもよければ、省略しても問題ありません。私も今回は省略しています。

それぞれの画像の公開方法

用意した画像は、公開 Web サーバーにアップロードする必要があります。自分が所有する Web サーバーを使う場合は、ユーザー認証や robots.txt でクロールを禁止していない場所に配置してください。適当な公開 Web サーバーがなければ、 こちらのページでご紹介した方法のいずれかを使えばよいでしょう。

必要なガジェット設定の追加

次は、必要なガジェット設定(ModulePrefs 要素の属性)を記述します。必須のものはさほど多くありませんが、その他のものもなるべく記述しておきましょう。また、ガジェットが国際化されている場合は "__MSG_???__" による置換が使えますので、タイトルや説明文などを言語ごとに用意してやるとさらに良いです。それぞれの設定項目はこちらの記事でもご紹介しましたが、ここでも簡単にまとめておきます。

必須の属性

まずは必須の属性から。これらがないと登録申請自体ができませんので、忘れずに記述してください。

属性名 設定する値
title ガジェットのタイトルバーに表示する文字列
description ガジェットの説明
author 作者の名前
author_email 作者のメールアドレス
directory_title ディレクトリに表示するタイトル

最後の directory_titletitle 属性が "__UP_???__" による置換を含んでいる場合に必須となります。ディレクトリに表示する段階ではユーザー設定が存在せず、置き換えようがないためです。 "__MSG_???__" による置換は問題ありません。

推奨の属性

次は必須ではないができるだけ記述したほうが良いとされている属性です。これらはディレクトリの表示内容に関わるものなので、きちんと書いておいたほうがユーザーへの印象は良くなるでしょう。

属性名 設定する値
screenshot スクリーンショット画像の URL
author_location 作者の居住地(Tokyo, Japan 程度で OK)
author_affiliation 作者の所属組織
title_url タイトルバーをクリックしたときの飛び先 URL

せっかくスクリーンショット画像を用意したので、忘れずに screenshot 属性に指定しておきましょう。単純に URL を書くだけです。

その他の属性

以下は完全に任意とされているものの、記述しておけばディレクトリや前述の開発者ページに記載される情報です。

属性名 設定する値
thumbnail サムネイル画像の URL
author_photo 作者の画像の URL
author_aboutme 作者の自己紹介
author_quote 座右の銘など(?)
author_link 作者の Web サイトの URL

これらはガジェットをディレクトリに登録するかどうかの判断にはほとんど関係ないので(よっぽど悪質なのは別でしょうが)、内容は自由です。 thumnailauthor_photo に用意した画像を設定するのを忘れずに。

動作確認

ガジェットの準備が整ったら、きちんと動作確認しておきましょう。とくに国際化対応している場合は、サポートしている各言語が正しく表示されることもチェックする必要があります。 Google Personalized Homepage は "hl=<言語>" という CGI パラメータを URL に負荷することで表示言語を変更できますので、これを使うのが手軽です。例えば、以下の URL は本来の設定に関わらず英語のページが表示されます。

http://www.google.com/ig?hl=en

また、スクリーンショットの表示を確認したい場合は、以下の URL が使えます(インラインガジェット不可)。 "hl=<言語>" による表示言語の変更も可能です。

http://www.google.com/ig/add?synd=open&nocache=1&moduleurl=<ソースのURL>

残念ながら、サムネイルや説明文などを確認する方法は、いまのところ見つかっていません。なにか良い方法があれば、ぜひ教えてくださいませ。

ガジェットの情報を送信

さあ、すべての準備が整ったら、いよいよガジェットを Google に送信しましょう。以下のページの下のほうにある「Gadget URL」というフォームにガジェットソースファイルの URL を入力し、「Send」ボタンを押すだけで完了です。あっけないほど簡単ですね。

http://www.google.com/ig/submit

その後、 Google によりガジェットの内容や危険なコードが挿入されていないかなどのチェックが行われ、それをパスすれば晴れてガジェットディレクトリに登録されます。このチェック作業はどうやら人力でやっているようで(?)、送信してから実際にディレクトリに現れるまで、かなり時間がかかります。だいたい 2 週間くらいと言われていますが、状況によって変化するようです。以下のスレッドに Google からの見解が示されています。

http://groups.google.com/group/Google-Gadgets-API/browse_thread/thread/8740864470ca163

これによると、既に多くのユーザーに使われているガジェットなら迅速に登録されるということです。そのため、あらかじめ自分の Web サイトに掲載するなどしてユーザーを増やしておくとよいでしょう。その他のプロモーション手段として、以下のサイトに登録することも推奨されています。どちらも英語サイトですが・・・。

ディレクトリに正式に登録されたかどうかは、以下の URL で確かめることができます。

http://www.google.com/ig/directory?url=<ガジェットのURL>

ガジェットがディレクトリに登録されれば、スクリーンショットや説明などが正常に表示されるようになります。

実例

この記事を書くにあたり、試しに東京アメッシュガジェットを登録してみました。やはり 2 週間くらいかかりましたが、無事に英語のディレクトリに登録されたようです。日本語のディレクトリへの登録はまだのようですが、そのうち登録されるでしょう。というわけで、一応きちんと登録された例として掲載しておきます。

ソースは以下のようになっています。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="__MSG_title__"
               directory_title="__MSG_title__"
               title_url="http://tokyo-ame.jwa.or.jp/__MSG_locale__/1-top.html"
               height="200"
               description="__MSG_description__"
               screenshot="http://webos-goodies.googlecode.com/svn/trunk/blog/articles/51038077/__MSG_screenshot__.jpg"
               thumbnail="http://webos-goodies.googlecode.com/svn/trunk/blog/articles/51038077/__MSG_thumbnail__.jpg"
               author="WebOS Goodies"
               author_email="support@webos-goodies.jp"
               author_affiliation="WebOS Goodies"
               author_location="Tokyo, Japan"
               author_link="http://webos-goodies.jp/">
    <Locale messages="http://webos-goodies.googlecode.com/svn/trunk/blog/articles/51038077/ALL_ALL.xml"/>
    <Locale lang="en" messages="http://webos-goodies.googlecode.com/svn/trunk/blog/articles/51038077/en_ALL.xml"/>
  </ModulePrefs>
  <UserPref name="location" display_name="__MSG_area_selection__" datatype="enum" default_value="1">
    <EnumValue value="1" display_value="__MSG_area_all__"/>
    <EnumValue value="11" display_value="__MSG_area_23__"/>
    <EnumValue value="22" display_value="__MSG_area_tama__"/>
  </UserPref>
  <Content type="html">
    <![CDATA[
      <a href="http://tokyo-ame.jwa.or.jp/__MSG_locale__/__UP_location__-top.html" target="_top">
        <img style="width:100%; height:200px; border-width: 0px;"
             src="http://tokyo-ame.jwa.or.jp/__UP_location__-0.jpg"/>
      </a>
    ]]>
  </Content>
</Module>

こちらは日本語用の言語ファイルである "ALL_ALL.xml" です。

<messagebundle>
  <msg name="locale">jp</msg>
  <msg name="title">東京アメッシュ</msg>
  <msg name="description">東京の現在の降雨量を表示します。</msg>
  <msg name="area_selection">地域選択</msg>
  <msg name="area_all">全域</msg>
  <msg name="area_23">23区</msg>
  <msg name="area_tama">多摩</msg>
  <msg name="screenshot">screenshot_ja</msg>
  <msg name="thumbnail">thumbnail</msg>
</messagebundle>

最後に英語用の "en_ALL.xml" です。

<messagebundle>
  <msg name="locale">en</msg>
  <msg name="title">Tokyo Amesh</msg> 
  <msg name="description">View the amount of rainfall in tokyo on your page.</msg>
  <msg name="area_selection">Area Selection</msg>
  <msg name="area_all">All Tokyo Met.Area</msg>
  <msg name="area_23">23-ward Area</msg>
  <msg name="area_tama">Tama Area</msg>
  <msg name="screenshot">screenshot_en</msg>
  <msg name="thumbnail">thumbnail</msg>
</messagebundle>

このように、 JavaScript をまったく使っていない手抜きガジェットでも、ちゃんと登録してもらえるようです(笑)。皆さんもオリジナルのガジェットを制作した際は、ぜひディレクトリに登録してください。日本語のガジェットはまだまだ数が少ないので、どんどん登録して盛り立てていきましょう!

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles