このページの本文へ

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です。プロパティリストは以下のように定義しています。

【図】fig3-1.png

文字表示ウィジェットのプロパティリストの定義。最初に読み込まれる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を実行すると文字が表示されますが、文字のまわりが透明になったままです。これはこれで面白いのですが、他のウィジェット同様に背景画像も表示しましょう。

【図】fig3-2.png

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>

 HTMLファイルを変更したら、Message.wdgtのアイコンをダブルクリックします。今度は背景画像の上にASCII.jpの文字が表示されました。

【図】fig3-3.png

今度は背景画像の上に文字が表示された

 ウィジェットの背景画像にPNG形式のファイルを使うと、αチャンネル=透明情報も扱えるので、うまく背景に溶け込むように画像を作成するとよいでしょう。ちなみに、Dashboardウィジェットはアプリケーションとは異なり、起動した数だけ(配置した数だけ)新たなウィジェットとして起動します。

【図】fig3-4.png

同じウィジェットをいくつでも起動できる


 次回は簡単なメモウィジェットを作成します。お楽しみに。

ウィジェットの管理

 作成したウィジェットがいらなくなった場合は、Widgetsフォルダ内にあるウィジェットを他のフォルダもしくはゴミ箱に移動させます。手動で作業した方が早いかもしれませんが、Dashboardには作成したウィジェットを管理する仕組みがあります。

 Dashboardを起動すると、画面左下に「+」のボタンが表示されます。この「+」ボタンをクリックします。

【図】fig4-1.png

「+」ボタンが表示されるのでクリックする

 するとウィジェットの一覧が表示されます。左下にあった「+」は「×」ボタンとなり、その横に「ウィジェットを管理...」というボタンが表示されます。この「ウィジェットを管理...」ボタンをクリックします。

【図】fig4-2.png

「ウィジェットを管理...」ボタンをクリックする

 ウィジェット管理するウィジェットが表示されます。削除できるのはウィジェット名の右側に「-」が表示されているものだけです。「-」をクリックします。

【図】fig4-3.png

削除したいウィジェットの右側に表示されている「-」ボタンをクリックする

 本当に削除してもよいか確認の画面がでます。削除する場合はOKボタンを、削除しない場合はキャンセルボタンをクリックします。

【図】fig4-4.png

削除するかどうかを選択する

 OKボタンをクリックするとウィジェットが削除されます。ゴミ箱に移動するだけなので再度Widgetsフォルダに入れると元の状態に戻せます。また、管理ウィジェットでウィジェットを追加しても構いません。

 うまく削除できない場合はWidgetsフォルダからウィジェットを移動させるとよいでしょう。

前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く