Regnessem Logo テーマの作成

テーマの作成

Regnessemには標準で4つのテーマが付いていますが、それとは別に、またそれを参考に新たなテーマを自作する事が出来ます。ここではテーマの作成方法について基本的な事を解説します。下記のサイトでより詳しい説明がされていますので参考にするといいかも知れません。

テーマの構成要素

テーマには、その構成を定義するテーマ定義ファイル(skin.ini)と各構成要素の画像部品、メッセージ履歴、絵文字定義(replace.txt)があります。通常テーマ定義ファイルはPlugins\SimpleUI\skins\固有のフォルダ以下に配置されます。

テーマ定義ファイル(skin.ini)

テーマ定義ファイルには画面を構成する画像部品、絵文字ファイルを定義するファイルです。Regnessemではこの定義ファイルをテーマとして読み込みます。

テーマ定義ファイルには、各構成要素のセレクタとそれに対応したプロパティを記述します。セミコロンで始まる行はコメントと見なされます。

;コメント
[セレクタ]
プロパティ=属性値
プロパティ=属性値
...

セレクタ

セレクタではクラス名と状態を省略できます。また、セレクタをスペースで区切った場合そのセレクタは親セレクタに対する子セレクタとなります。テーマ定義ファイルではこれをINIセクション([]で囲まれたもの)として記述することでセレクタと認識させます。

[要素名.クラス:状態]
[親要素名.クラス:状態 子要素名.クラス:状態]

以下の例はウィンドウのメイン領域がアクティブになった場合のセレクタを示します。

[Window.Main:Active]

以下の例はアクティブなウィンドウにある押されていない閉じるボタンのセレクタです。

[Window:Active Button.Close:Up]

要素名、クラス、状態については以下の表を参考にして下さい。

要素名一覧
要素名 親要素 内容
Info なし テーマ情報を示す特殊なセレクタです。
HtmlTemplates なし 会話履歴を示す特殊なセレクタです。
Icons なし アイコンを示す特殊なセレクタです。
Images なし イメージを示す特殊なセレクタです。
Window なし ウィンドウ領域を示します。
Caption Window ウィンドウのタイトルバーを示します。
Clientarea Window ウィンドウのクライアント領域(メンバリスト表示領域)を示します。
Button Clientarea ウィンドウの最小化、最大化、閉じるボタン等のボタンを示します。
Menubar Clientarea ウィンドウのメニューバーを示します。
Tabset Clientarea 接続タブ、会話タブ等のタブ領域を示します。
Tabbutton Tabset 接続タブ、会話タブ等のタブボタンを示します。
Scrollbar Clientarea ウィンドウに収まりきらない場合に表示されるスクロールバーを示します。
StatusBar Clientarea 会話ウィンドウ下部のステータスバーを示します。
Scrollthumb Scrollbar スクロールバーのつまみを示します。
Scrollupbutton Scrollbar スクロールバーの上方向ボタンを示します。
Scrolldownbutton Scrollbar スクロールバーの下方向ボタンを示します。
クラス一覧
クラス 適用可能要素 内容
Main Window メイン領域
Chat Window 会話領域
Notify Window 通知領域
SelectedListItem Window.Main 選択されたメンバリストを示す特殊なクラスです。
Close Button [閉じる]ボタン
Max Button [最大化]ボタン
Min Button [最小化]ボタン
Restore Button [元のサイズ]に戻すボタン
Top Tabset
Tabbutton
上部
Right Tabset
Tabbutton
右部
Left Tabset
Tabbutton
左部
Bottom Tabset
Tabbutton
下部
状態一覧
状態 適用可能要素 内容
Active Window
tabbutton
アクティブ状態を示します。
Inactive Window
tabbutton
非アクティブ状態を示します。
Up button
scrollsumb
scrollupbutton
scrolldownbutton
ボタンが押されていない状態を示します。
Down button
scrollsumb
scrollupbutton
scrolldownbutton
ボタンが押された状態を示します。
Hot button ボタンの上にマウスポインタが来た状態を示します。
システム定義
要素名.クラス 内容
Window.Main メインウィンドウ
Window.Main .SelectedListItem メンバリストの選択状態
Window.Chat 会話ウィンドウ
Window.Notify 通知ウィンドウ
Button.Close [閉じる]ボタン
Button.Max [最大化]ボタン
Button.Min [最小化]ボタン
Button.Restore [元のサイズに戻す]ボタン
Tabset.Top タブセット上
Tabset.Right タブセット右
Tabset.Left タブセット左
Tabset.Bottom タブセット下
Tabbutton.Top タブボタン上
Tabbutton.Right タブボタン右
Tabbutton.Left タブボタン左
Tabbutton.Bottom タブボタン下

プロパティ

INIセクションで指定されるセレクタに与えるプロパティを定義します。プロパティはそのプロパティに=を用いて属性値を代入します。プロパティはCSS(Cascading Style Sheet)を参考にして作られているので、これらの知識があると多少楽かも知れません。参考リンク:CSS1仕様書邦訳(http://www.doraneko.org/webauth/css1/css1.html)

プロパティ=属性値

プロパティには以下に挙げるシステムで定義されたプロパティのみを指定できます。また、その要素で適用できないプロパティは無視されます。

プロパティ一覧
プロパティ 属性値 説明
Name 文字列 Infoセレクタのみに与えることが出来るプロパティです。テーマの名前を記入します。
Author 文字列 Infoセレクタのみに与えることが出来るプロパティです。テーマの制作者を記入します。
Version 文字列 Infoセレクタのみに与えることが出来るプロパティです。テーマのバージョンを記入します。
Url アドレス Infoセレクタのみに与えることが出来るプロパティです。テーマの置いてあるアドレスを記入します。
Copyright 文字列 Infoセレクタのみに与えることが出来るプロパティです。テーマの著作権を記入します。
Thumbnail ファイル名 Infoセレクタのみに与えることが出来るプロパティです。テーマのサムネイル画像を指定します。
WindowIcon ファイル名 Iconsセレクタのみに与えることが出来るプロパティです。ウィンドウのシステムアイコンを指定します。
MainWindowIcon ファイル名 Iconsセレクタのみに与えることが出来るプロパティです。メインウィンドウのシステムアイコンを指定します。
ChatWindowIcon ファイル名 Iconsセレクタのみに与えることが出来るプロパティです。会話ウィンドウのシステムアイコンを指定します。
NotifyWindowIcon ファイル名 Iconsセレクタのみに与えることが出来るプロパティです。通知ウィンドウのシステムアイコンを指定します。
TabIcons ファイル名 Imagesセレクタのみに与えることが出来るプロパティです。タブに表示する状態を示す画像セットのbmpファイル名を指定します。正方形を3つ横に並べたものが1セット(例えば1つの画像が8x8ピクセルの場合、24x8ピクセル)となり、内容は左から順に、接続、切断、通知に適用されます。この画像セットは1ファイル中に1セット、2セット、4セットのいずれかで含むことが出来ます。
1セット(先の例だと24x8px):上下に適用されます。左右は画像を90度回転したものが使われます。
2セット(先の例だと48x8px):左1セットが上下、右1セットが左右に適用されます。
4セット(先の例だと96x8px):左から順に、上、右、下、左に適用されます。
CommonIcons ファイル名 Imagesセレクタのみに与えることが出来るプロパティです。通知ウィンドウ等に使用される144x16サイズのbmpファイルを指定します。16ピクセル幅毎に左から、警告、エラー、情報、問い合わせ、メッセージ受信、メール受信、メール送信、オンライン、オフラインに利用されます。
ListIcons ファイル名 Imagesセレクタのみに与えることが出来るプロパティです。メンバリストに使用される111x16ピクセルのbmpファイルを指定します。16ピクセル幅毎に左から、オンライン、取り込み中(電話中)、一時退席中(退席中、昼休み)、オフライン、禁止、閉じたグループ、開いたグループに使用されます。
HeaderTemplate ファイル名 HtmlTemplatesのみに与えることが出来るプロパティです。会話ウィンドウでのメッセージ履歴部分に適用するHTMLヘッダファイルを指定します。記述方法は下記で詳述します。
MessageTemplate ファイル名 HtmlTemplatesのみに与えることが出来るプロパティです。会話ウィンドウでのメッセージ履歴に表示するメッセージ本文に適用するHTMLテンプレートを指定します。記述方法は下記で詳述します。
ReplaceTable ファイル名 HtmlTemplatesのみに与えることが出来るプロパティです。会話ウィンドウでのメッセージ履歴で、受信した単語をイメージに置き換えるテーブルを指定します。記述方法は下記で詳述します。
Clone 要素名 指定される要素のプロパティをコピーします。循環参照(要素Aが要素Bを参照し、要素Bが要素Aを参照する事)にならないように気を付けて下さい。
Font-Color フォントの色を指定します。
Font-Family フォント名 フォントを指定します。
Font-Style Bold
Italic
Underline
Strikeout
フォントスタイルを指定します。
Font-Size ポイント フォントのサイズをポイントで指定します。
Text-Align Left
Center
Right
テキストの表示位置を指定します。
Padding-Top ピクセル 上のパディング幅を指定します。
Padding-Left ピクセル 左のパディング幅を指定します。
Padding-Right ピクセル 右のパディング幅を指定します。
Padding-Bottom ピクセル 下のパディング幅を指定します。
Border-Style None
Solid
Dashed
Dotted
Double
Inset
Outset
Groove
Ridge
Image
System
ボーダーのスタイルを指定します。これはCSS(Cascading Style Sheet)で指定される値と同じです。次のリンクを参考にして下さい。CSS1仕様書邦訳5.5.17Border-Style(http://www.doraneko.org/webauth/css1/css1.html#border-style)
また、Image,Systemは以下のように解釈されます。
  • Image:画像ファイルを使います。
  • System:通常のウィンドウ枠を使います。
Border-Width ピクセル ボーダーの幅を指定します。
Border-Color ボーダーの色を指定します。
Border-Top-Image ファイル名 ボーダーの上部の画像ファイルを指定します。
Border-Left-Image ファイル名 ボーダーの左部の画像ファイルを指定します。
Border-Right-Image ファイル名 ボーダーの右部の画像ファイルを指定します。
Border-Bottom-Image ファイル名 ボーダーの下部の画像ファイルを指定します。
Border-TopLeft-Image ファイル名 ボーダーの上左部の角の画像ファイルを指定します。
Border-TopRight-Image ファイル名 ボーダーの上右部の角の画像ファイルを指定します。
Border-BottomLeft-Image ファイル名 ボーダーの下左部の角の画像ファイルを指定します。
Border-BottomRight-Image ファイル名 ボーダーの下右部の角の画像ファイルを指定します。
Background-Color 背景色を指定します。
Background-Image ファイル名 背景に用いる画像ファイルを指定します。
Background-Mode Repeat
Repeat-X
Repeat-Y
No-Repeat
Stretch
Right-Bottom
背景の表示位置を指定します。
  • Repeat:全体に繰り返して表示します。
  • Repeat-X:水平方向に繰り返して表示します。
  • Repeat-Y:垂直方向に繰り返して表示します。
  • No-Repeat:繰り返し表示しません。
  • Stretch:場所を固定します。
  • Right-Bottom:右下のみに表示します。
Transparent-Color clNone イメージの透過色を指定します。clNoneの時は透過色なし、それ以外の時はclFuchsiaを透過色として使います。
Top ピクセル 絶対位置の上座標をピクセル指定します。
Right ピクセル 絶対位置の右座標をピクセル指定します。
Left ピクセル 絶対位置の左座標をピクセル指定します。
Bottom ピクセル 絶対位置の下座標をピクセル指定します。
Visibility 0
1
0で不可視、1で可視になります。
属性値詳細
属性値 説明
以下の3種類の方法が指定できます。
  • #RRGGBB:CSS等で使用される色定義
  • $AABBGGRR:AA(α値)BB(青)GG(緑)RR(赤)
  • Delphi色定数:clBtnFace, clWindow, clRed等
ピクセル ピクセルを指定します。単位は必要ありません。
ポイント 文字のポイントサイズを指定します。単位は必要はありません。
フォント名 システムにインストールされているフォント名(MS ゴシック等)を指定します。
ファイル名 画像ファイルのパスを含めたファイル名を指定します。パスは相対パスでも絶対パスでも構いません。画像ファイルはビットマップ(bmp)形式を指定します。

HtmlTemplatesセレクタで定義されるHtmlHeader及びMessageHeaderについて解説します。

HtmlHeader

HtmlHeaderで指定されるファイルは会話履歴の表示に利用するヘッダを指定します。通常は以下のように記述します。もちろん記述には通常のHTMLを使用しますので、HTMLで扱えるものは全て扱うことができます。

<HTML>
<HEAD>
<!--BASE-->
</HEAD>
<BODY>
<DL>

先に述べた通り、HTMLで扱えるものは全て扱う事が出来るので、外部CSSを定義し、CSSによるスタイルシートの適用も出来ます。例えばchat.cssを外部スタイルシートとして使用する場合は以下のようなテンプレートを記述します。

<HTML>
<HEAD>
<!--BASE-->
<LINK rel="stylesheet" href="chat.css">
</HEAD>
<BODY>
<DL>

ここで指定される<!--BASE-->はシステムが使用しますので必ず入れるようにして下さい。これを利用してシステムはテーマの相対フォルダを理解します。

MessageHeader

MessageHeaderで指定されるファイルは会話履歴の本文の表示に利用するテンプレートファイルです。2つの変数タグとHTMLで扱える全てのタグが利用できます。

<DT><!--MSGHEAD--></DT>
<DD><!--MSGBODY--></DD>
変数タグ名 置き換え内容
<!--MSGHEAD--> オプション会話ウィンドウのメッセージ設定で指定される通常のメッセージヘッダに置換されます。
<!--MSGBODY--> メッセージ本文に置換されます。

絵文字定義

HtmlTemplatesセレクタで定義されるReplaceTableについて解説します。

ReplaceTableはIMで扱う絵文字と文字列の置換テーブルを定義したファイルです。Regnessemは受信したメッセージをこの置換テーブルを使って絵文字であるかそうでないかを判別します。

対象文字列[TAB]置換文字列[TAB]プロトコル名[TAB]表示フラグ
対象文字列 送受信メッセージ中にこの文字と一致するものがある場合、置換文字列に置換します。
置換文字列 対象文字列がこのフィールドで指定される文字列に置換されます。通常ここにはIMG要素を書くことで絵文字を表示させます。
プロトコル名 置換対象となる会話のプロトコル名(MSNP8やYMSG)を指定します。全てのプロトコルで使用したい場合はALLを指定します。
同じ対象文字列がある場合、一番最初に見つかったプロトコルが適用されます。ALL指定は一番末尾に書いておくのが望ましいでしょう。
表示フラグ 会話ウィンドウの絵文字ショートカットに表示させる場合は1を、表示させない場合は0を指定します。

注意:ここではタブ文字を[TAB]と表記しています。実際には[TAB]をタブ文字に置き換えて指定して下さい。