第4回　（勢いだけで）ゼロからのウィジェット制作編　（その1）【特集サンデープログラミング】

myLab IDをお持ちでない方

>> デスクトップウィジェット

>> ウェブウィジェット

>> 機能分類

第4回　（勢いだけで）ゼロからのウィジェット制作編
　　　　　（その1）iGoogleガジェット環境設定

イントロダクション

ウィジェット作ってみたい！
でもやり方知らん！

という方って結構多いと思います。
かくいう私も、2008年6月現在まったくプログラミングの知識がありません。

それでも作ってみたい、ウィジェット。
今回のサンデープログラミングでは、そんな私がウィジェット作りに挑戦する様をレポートします。

想定読者はウィジェット超初心者。
『ネットサーフィンとメールの送受信くらいはできます、最近ウィジェットっていう単語知りました』、という方が対象です。

この記事を読んでウィジェットに興味を持ち、実際に開発してみた方から熱いメールが返ってくるのを目標に、制作に励みたいと思います。

腕利きの開発者の方からしたらぬる過ぎの内容になってしまうかもしれませんが、少々お付き合いくださいませ。

初心者は何を作るべきか

とは言っても流石に、ウィジェット作るで！　と鼻息だけ荒くしてもどうしようもないので、

一体何を作るのか。

これを決めなければいけません。目標設定は基本です。
ここで決めなければいけないのは、

(1)　何を作るか
(2)　プラットフォームは何か

ですね。
まず、(1)の何を作るか、ですが、ここはウィジェットの街widgetownなので、それにあやかったものがいいでしょう。

そこで、弊社開発チームに指示を仰ぐと、『widgetownのRSSリーダウィジェット』、が案にあがりました。xmlという、既に存在している情報を活用してウィジェットを作る感覚を身につけるのがよい、とのことです。
玄人のご意見なので従ったほうがいいでしょう。ということで、何を作るかは決まり。

次は(2)のプラットフォームです。
プラットフォームというのは、ウィジェットを動かす環境のことですね。
詳しくは、widgetown内のプラットフォームに関する説明、

参考リンク：
デスクトップウィジェットって
 ウェブウィジェットって

をご参照いただきたいのですが、初心者にとってのポイントは、

１つウィジェットを作ればそれがどこでも動くわけではない

だと思います。
各プラットフォームには、基本的に互換性がありません。
時代が変わるといろいろと変化していくのでしょうが、現状では、１つのプラットフォームを決めて、そこのルールに合わせて開発していく、というのが常識だそうです。
この土俵で闘う、というのを決めないといけないんですね。

弊社の開発チームによりますと、初心者には一番よいプラットフォームは今のところiGoogleガジェットだろう、とのこと。
構造が最も簡単なんだそうです。
詳しいことはいろいろ覚えていくうちにきっと理解する、と信じて、プラットフォームも決まりですね。
以下、まとめると。

(1)　何を作るか『widgetownのRSSリーダウィジェット』を
(2)　プラットフォームは何か iGoogleガジェットで作る

目標ができましたね。

それで、iGoogleとかiGoogleガジェットって何？

簡単に調べたところによると、

iGoogle … Googleが提供の個人に特化したWebサービスのこと

iGoogleガジェット … iGoogleで活用できるミニアプリケーションのこと、

だそうです。

んー。
言葉ではよく分かりませんね。
実際に使用してみると感じがつかめるかもしれません。
下記のリンク先などを参照して、ぜひいろいろ自分で時間をかけて試してみてください。
私も頑張ります。

参考リンク：
ガジェットデベロッパーガイド
 iGoogleつかい方まとめ

ちなみにiGoogleガジェットは、

xml
html
javascript

の３要素で成っています。どれもweb開発の基本になる技術。そこが、iGoogleガジェットが初心者向きだという点なのですね。

GoogleアカウントとGoogle Gadget Editor

さて、どんどん行きましょう。
iGoogleガジェットを作る、と決めたので、
iGoogleガジェットで開発をする環境の設定をしなければなりません。

私が思うに、ここが初心者の開発への意志をくじかせる最初のポイントなのではないでしょうか。正直面倒です。
Googleのサイトは英語のものも多く、なかなか思うように作業が進みません。

ここでやることは２つ。

(1)Googleアカウントを取得する
(2)Google Gadget Editorを手に入れる

まず、(1)のアカウントを取得するところから始めましょう。
GoogleのアカウントがないとiGoogleは使えません。

もしかしたら既にやGmailなどを活用されている方もいらっしゃるかと思います。
その方は既にアカウントを持っていることになるので、ここは飛ばしてかまいません。

Googleアカウント

の右下、『Google アカウントの取得・アカウントの作成』をクリックして、情報を入力してアカウントをゲットしてください。

次は(2)、Google Gadget Editorの入手です。これはiGoogleの制作には欠かせないツールなんだそうです。
開発・実行・テスト・デバッグ・公開がこれ1つでできちゃうという優れもの。

このGoogle Gadget Editor自体もiGoogleガジェットなんですね。iGoogleガジェットでiGoogleガジェットを作る、ということです。

Google Gadget Editor

ここの、『今すぐ追加』を押せば、iGoogleにこのガジェットを追加できます。
一番目立つところにガツンと貼り付けちゃってください。

Google gadget editorの使い方

さて、手に入れたGoogle gadget editorですが、使い方を覚えましょう。

英語なのでちょっと難しいですが、こいつを操作できるようになれば、環境設定は完了です。

editorタブとpreviewタブがありますね。
簡単な説明になりますが、要は、editorタブのほうで入力したプログラミングをpreviewタブで見ると動作確認ができる、というわけなんです。これは便利。

左上に「file」とあります。ここをクリックするとプルダウンが出ます。
意味はざっと、

・New
　最初から登録されているファイルを開く

・Open
　自分で登録したファイルを開く

・Open from URL
　URLを指定してファイルを開く

・Save
　ファイルを上書き保存

・Save As
　ファイルに名前をつけて保存

・Rename
　ファイルに名前をつけて上書き保存

・Upload
　ファイルをアップロードする

・Publish
　ファイルを公開する

・Delete
　ファイルを削除する

といったところでしょうか。
実際にいろいろいじってみてください。

Hello World!を出そう

何かプログラミングをするとき、
最初に、「Hello World!」、と出すのがギークたちのならわしなのだそうです。
ので、それにならってここではiGoogleに「Hello World!」を出させてみようと思います。

実はGoogle gadget editorには、既に「Hello world!」のプログラムは組み込まれてしまっています。

左上の「file」のプルダウンメニューから、「New」を選択し、「Popular Gadget」の項から「Hello World!」を選んでください。

すると、

と表示されます。
そして、プレビューを見ると、

はい出ました。Hello, world!。
儀式終了です。

これだけでは味気なさ過ぎるので、各タグの意味を調べました。
< >内がコードと呼ばれる、システムへの指示文字列。※以降が、私の付け加えた解説になります。

<?xml version="1.0" encoding="UTF-8"?>
※xmlのバージョンとエンコーディングです。宣言しています。ここはそれぞれ"1.0"、"UTF-8"で設定しておくのが通例だそうです。

<Module>
※ここからiGoogleガジェットですよーというお知らせタグですね。モジュールという単語が使われているのは、かつてユニバーサルガジェットがモジュールと呼ばれていた時代があり、その名残だそうです。

参考リンク：
iGoogleとガジェット

<ModulePrefs title="hello world example" />
※Prefsというのはpreferenceの略です。ここにiGoogleガジェットのメタ情報を載せます。ここでは”hello world example”がこのガジェットのタイトルということですね。

<Content type="html">
※タイプはhtmlに指定しています。urlというのにも指定できるそうですが、難しいみたいです。

<![CDATA[　　Hello, world!　　]]>
※<![CDATA[　　　　]]>にはさまれたものが表示されます。CDATAとはCharacter DATAという意味です。

</Content>
</Module>
※上の2つでタブを閉じてますね。ContentとModuleはここで終わりです。

以上です。
思ったより分量も少なくていいですね。
ここまではなんとかこれました。今週はここまで。
来週はいよいよプログラミングを開始します。

参考リンク：
5分で学ぶGoogle Gadget開発

文：widgetown編集部　下地　　監修：widgetown開発チーム　黒崎
2008年7月2日