超シンプルなガジェットを作る!

では、実際にガジェットを作ってみましょう。絶対に必要なソフトはありませんが、HTMLファイルやXMLファイル編集用にテキストエディター、画像の加工や縮小用にドロー系ツールやレタッチツールがあると便利です。ここではガジェットの基本的な作り方を勉強するために、画像を表示するだけのガジェットを制作します。

【図5】画像を1枚表示するだけのガジェット。フォトフレームとして使えないこともない?

ガジェットを収めるサイドバーの幅は150ドット。ガジェットの右側に10ドット前後の表示マージンが取られるので、サイドバーからはみ出ないようにするには、ガジェット本体のサイズを140ドット以内に収めなければなりません。実際のところ、多くのガジェットは130ドット前後で作られています。ということで、幅130ドットの画像を使ってガジェットを作りましょう。画像を用意できたら、下記のリストをコピーしてテキストエディターに貼り付け、同じフォルダーに「index.html」というファイル名で保存してください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
        width:130px;height:98px;
        margin:0;padding:0;
    }
</style>
</head>
<body>
<img src="Garden.jpg">
</body>
</html>

画像のサイズやファイル名は必要に応じて変更してください。作成したファイルを開くと、ブラウザーで内容を確認できます。ブラウザーで表示確認を行なう場合は、かならずインターネット・エクスプローラ(IE)を使いましょう。FirefoxやOperaなどでは、ブラウザーでの表示とガジェットでの表示が異なる場合があります。

【図6】念のため、正常に表示されるかをIEで確認します