Mac用ウィジェットをHTML/CSSで自作 (4/4)

2011年03月22日　10時00分更新

文●古籏一浩

ツイートする

文字を表示するHTMLファイルを作成

　準備ができたので、Message.wdgtフォルダ内にあるmain.htmlファイルを作成しましょう。通常のHTMLファイルと同じように、Dreamweaverなどを使って作成してもよいですし、エディターでコーディングしても構いません。

　ただし、HTMLファイルの先頭に記述するDOCTYPEで「HTML 4.01」を宣言すると、Snow Leopardでは環境設定でボタンの表示がずれてしまうことがあります。そのため、DOCTYPE宣言をXHTMLにするか、もしくはDOCTYPE自体の記述を省略します。本連載のサンプルではDOCTYPEは宣言していません。Dashcodeで生成されるHTMLはHTML 4.01のDOCTYPEが宣言されているので、Dashcodeで生成されたコードに手を加える場合は変更してください。

　ウィジェットで文字を表示してみましょう。文字を表示するだけなので簡単です。ここではh1要素を使って見出し文字を表示しています。実際のプログラムはサンプル1です。プロパティリストは以下のように定義しています。

文字表示ウィジェットのプロパティリストの定義。最初に読み込まれるHTMLファイルはmain.htmlとしている

■サンプル1

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>MacOS X Widget Sample</title>
  <style type="text/css"><!--
  body {
      margin: 0;
      padding: 0;
    }
  #headerTitle {
      position: absolute;
      top: 80px;
      left: 90px;
      z-index: 10;
      color: yellow;
    }
  --></style>
</head>
<body>
  <h1 id="headerTitle">ASCII.jp</h1>
</body>
</html>

　サンプル1を実行すると文字が表示されますが、文字のまわりが透明になったままです。これはこれで面白いのですが、他のウィジェット同様に背景画像も表示しましょう。

ASCII.jpの文字のまわりは透明になっている

　背景画像はimg要素で表示します。img要素でなくてもbody要素の背景として指定しても構いません。背景画像と文字をうまく重ね合わせたのがサンプル2です。

■サンプル2

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>MacOS X Widget Sample</title>
  <style type="text/css"><!--
  body {
      margin: 0;
      padding: 0;
    }
  #headerTitle {
      position: absolute;
      top: 80px;
      left: 90px;
      z-index: 10;
      color: yellow;
    }
  #bgImage {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }
  --></style>
</head>
<body>
  <h1 id="headerTitle">ASCII.jp</h1>
  <img id="bgImage" src="Default.png">
</body>
</html>