テーマの基本
準備
このプログラムのテーマは themes フォルダ内に入っています。
新しくテーマを作る場合はこの themes の中に新しくフォルダを作ります。
フォルダ名は半角文字を使って下さい。
1つのテーマフォルダの中身は次のようになっています。
| config.xml | テーマの詳細を記述したファイル |
|---|---|
| images | 画像ファイルを格納するフォルダ |
| sounds | 音声ファイルを格納するフォルダ |
images フォルダと sounds フォルダを作り、画像を images に、音声を sounds に入れてください。
次に config.xml ファイルを作成します。
下記のテンプレートをテキストエディタにコピーし、保存して下さい。（文字コードは UTF-8）
左端の行番号は不要です。
・テンプレート
まずはタイトルを決めます。
これはメニューバーに表示されます。
<title>Sample Clock</title>
次にフレームのサイズを決めます。
フレームは部品を張り付けていくための透明な土台のようなもので、
絵を描くキャンバスの大きさと言ってもよいでしょう。
このサイズを超えた部分は表示されずに途切れてしまいます。
<size width="220" height="220" />
width が幅、height が高さを表します。単位はピクセルです。
ある程度余裕をもたせるのは問題有りませんが、
大きくすればするほどコンピュータへの負荷が増えてしまうので
できるだけ必要最低限のサイズを指定して下さい。
次にアイコンのファイル名を指定します。
| icon.png |
<icon>icon.png</icon>
アイコンとして使用できるのは JPEG、PNG、GIF、BMP です。ICO ファイルは使用できません。
環境に応じて自動的に縮小されますが、縦横 48 ピクセル以上の正方形で作るとよいでしょう。
アイコンファイルは images フォルダの中から読み込まれます。
このアイコンはメニューバーやタスクトレイに表示されます。
次に作者の情報などを表す info を追加します。
| version | テーマファイルのバージョン情報を記入します。 特に書き方に決まりは有りませんが「1.0.0」のようにしておくのが一般的です。 |
|---|---|
| author | 作者の名前を記入します。 |
| website | Webサイトを持っている場合は URL を記入します。空欄でも構いません。 |
| Email のアドレスです。不要ならこちらも空欄で構いません。 |
ここまで追加すると次のようになっていると思います。
時計の針や背景画像、音などの要素をこのプログラムでは「item（アイテム）」と呼びます。
アイテムは <item>～</item> タグを使って指定し、項目の詳細をその内側に書きます。
アイテムは <itemset> 内に追加します。一つの <itemset> の中に複数の <item> を追加できます。
| dial.png |
itemタグに挟まれた image というタグはファイル名を示しています。
画像ファイルはテーマフォルダ内の「images」という名前のフォルダから呼び出されるので、
imagesフォルダに入っている「dial.png」という画像を表示することになります。
このままでは座標が指定されていないため、この画像は左上隅に表示されることになります。
座標の初期値は x, y ともに 0 となっています。
次に時計の針を追加してみます。
時計の針には次の三種類があります。
これは item の属性 type として指定します。
| short_hand | 短針 |
|---|---|
| long_hand | 長針 |
| second_hand | 秒針 |
| short.png |
item の type として「short_hand」を指定してあります。
<axis> という要素は回転の中心座標を指定するためのものです。
指定がない限り画像は左上を中心に回転します。これを変更するためにこの <axis> を使います。
指定する座標は画像ファイル内の座標です。フレーム全体から見た座標ではないので気をつけて下さい。
<position> はアイテムを配置する座標です。これはフレームの左上から数えた位置を x と y で指定します。
<axis> が指定されていない場合は <position> 位置に画像左上が来ます。
<axis> が指定されている場合は回転の中心が <position> の座標に来るように調整されます。
同様にして長針、秒針も追加してみます。
| long.png | second.png |
それぞれ用いる要素はすべて共通です。
type を役割に合わせて変更し、画像ファイルを指定し、位置や回転軸を必要に応じて調整します。
画像の重なり順は基本的に後に書いたものが上になります。変更したい場合は「z-index」を使い、順番を数字で指定します。 数字が大きいほど上になります。（省略時は「0」）
<item type="image" z-index="3">
基本的な時計の作り方は以上です。
ファイルを保存して実際に実行してみましょう。
テーマファイル全体
・エラーが起きたら
上手く動かない時は、タグの閉じ忘れがないかチェックしてみましょう。
XML のタグは必ず <element>～</element> のように開始と終了が対応しているか、
<element /> のように空要素になっています。スラッシュが無かったり終了タグがない場合はエラーになってしまうので気をつけましょう。
あるいは半角スペースにすべきところを全角スペースで入力していないか確かめて下さい。
また、数値であっても属性は「width="120"」のようにダブルコーテーションで括る必要があります。