ガジェットでウェブリンクを作ろう!

ガジェットの中身はウェブページと同じですので、当然テキストも表示できます。ここでは、画像とテキストを使って、比較的見た目に凝ったガジェットを作ってみましょう。

【図15】よく利用するサイトへのリンクガジェットを作ります。htmlを修正すればカスタマイズも可能。ガジェット本体に登録機能はありませんが、これはこれで意外に便利

下記のリストはリンクページのhtmlです。リストの項目風に見せるためにliタグを使っています。タイトルやリンク先を変える場合は、URLやサイト名の部分を修正してください。フォントのサイズは8行目の「font-size」で変更可能です。ガジェットマニフェストでは、nameタグの名前を変えておきましょう。これらのファイルからガジェットを作ると、図16のように表示されます。

ガジェット用htmlファイル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
width:130px;
height:130px;
font-size:80%;
margin:0;
padding:0;
}
</style>
</head><body>
<h4>マイリンク</h4>
<li><a href="http://journal.mycom.co.jp/">マイコミジャーナル</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://jp.youtube.com/">YouTube</a></li>
<li><a href="http://www.nicovideo.jp/">ニコニコ動画</a></li>
<li><a href="http://www.amazon.co.jp/">Amazon.co.jp</a></li>
</body>
</html>

ガジェットマニフェストファイル

<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>マイリンク</name>
  <version>1.0.0.0</version>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="index.html" />
      <permissions>full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

【図16】リンクを表示するだけのガジェット。項目をクリックするとブラウザーが開き、指定したページが開きます