[gadget]各viewにhello world

昨日、viewの紹介をしたので、今日は、実装方法について。

まず、単純に各viewに対して、文字を表示してみたいと思います。

基本的にはgadgetには、決まった約束があるのですが、ファイル形式はxmlです。

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="test" directory_title="" title_url="" description="" author="maito.kuwahara" author_email="mai.musicfactory+gadgetfactory@gmail.com" author_location="japan" screenshot="" thumbnail="" height="200" author_photo="" author_aboutme="" author_link="http://temping-amagramer.blogspot.com/" author_quote="" > <Require feature="opensocial-0.8"/> </ModulePrefs> <!-- home view --> <Content type="html" view="home"> <![CDATA[ home viewです。 ]]> </Content> <!-- canvas view --> <Content type="html" view="canvas"> <![CDATA[ canvas viewです。 ]]> </Content> <!-- home、canvas viewに対応していない場合 --> <Content type="html"> <![CDATA[ defualtのviewです。 ]]> </Content> </Module>

xmlは大元となるタグが存在するのですが、それはModuleタグが担っています。

次に、ModulePrefsタグの属性をそれぞれ解説していくと、
title="ガジェット上に表示されるタイトル"
directory_title="iGoogle gadgetの検索結果に表示される時のタイトル"
title_url="タイトルをクリックした時に遷移されるurl"
description="gadgetの詳細"
author="gadgetの作者"
author_email="gadget作者のメールアドレス"
screenshot="gadgetの詳細画面に表示される画像(280ピクセルでpngが望ましい。)"
thumbnail="gadgetの検索結果時に表示される画像(120x60ピクセルでpngが望ましい。)"
author_affiliation="gadget作者が所属している"
author_location="gadget作者が住んでいるところ"
author_photo="gadget作者の写真(70x100ピクセルでpngが望ましい)"
author_aboutme="gadget作者に関して500文字以内で"
author_link="任意のurl"
author_quote="引用したい言葉300文字以内で"
author_affiliation="gadget作者の所属"
height="gadgetの高さ(後で、動的に変更ができる)"
ってな具合になっていると思う。
(see also：Gadgets XML Reference)

author_XXXで始まるのは、authorページで表示されるものを設定しています。

もし、自分が作ったgadgetが超人気になった場合、上位ページに表示されるので、その場合に備えて記入しておいた方がいいと思います。

次に、Requireタグですが、いくつかあって、今回は、feature="opensocial-0.8"を書いています。

これは、open socialを意識したgadgetを作成しますよーっと意思表示したタグです。

次に、Contentタグですが、

view属性の値が

home

canvas

何もない

と3つのバリエーションがあります。
(いずれもtype="html"です。)

基本的にtypeはhtmlでよくて、他にもurlという属性値があるのですが、今回はしょーりゃく。

で、上の3つの違いですが、これは昨日、紹介したとおり、3種類のviewをあらわしています。

homeは、home view
で
canvasは、canvas view
で
何もないのは、
home viewとcanvas viewに
対応していないview
とまさにそのまんまですね。

各viewに表示するコンテンツは、
<![CDATA[から]>までの部分に記述します。
htmlタグ、headタグ、titleタグ、metaタグなどは必要なく、bodyタグ内に記述するものをそのまま書けばオッケーです。
もちろん、scriptタグを書いて、javascriptを実行したり、styleタグを使って、cssの設定することも可能です。

後は細かいjsのファンクションを覚えていくだけなので、楽勝ですね。