テーマの作成

テーマの作成

++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
       +Clientarea
       |  +Button
       |  +Menubar
       |  +Tabset
       |  |  +Tabbutton
       |  +Scrollbar
       |  |  +Scrollsumb
       |  |  +Scrollupbutton
       |  |  +Scrolldownbutton
       |  +Statusbar
       +ResizeGrip
  
要素名一覧
要素名 親要素 内容
Info なし テーマ情報を示す特殊なセレクタです。
HtmlTemplates なし 会話履歴を示す特殊なセレクタです。
Icons なし アイコンを示す特殊なセレクタです。
Images なし イメージを示す特殊なセレクタです。
Window なし ウィンドウ領域を示します。
Caption Window ウィンドウのタイトルバーを示します。
Clientarea Window ウィンドウのクライアント領域(メンバリスト表示領域)を示します。
ResizeGrip Window サイズ変更つまみを示します。これを有効にするときは必ずVisibility=1にしてください。Top, Right, Left, Bottomのプロパティ値を使用する場合はウィンドウの右下が原点となることに気をつけてください(つまりTopとLeftはマイナス値になるのが普通)。これらを使用しない場合はTop=-16, Left=-16となります。
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)を参考にして作られているので、これらの知識があると多少楽かも知れません。参考リンク:CSS2仕様書邦訳(http://www.y-adagio.com/public/standards/tr_css2/toc.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つの画像が8x8pxの場合、24x8px)となり、内容は左から順に、接続、切断、通知に適用されます。この画像セットは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 要素名 Window以下の全て 指定される要素のプロパティをコピーします。循環参照(要素Aが要素Bを参照し、要素Bが要素Aを参照すること)にならないように気を付けてください。
Font-Charset 文字列 Window以下の全て フォントのキャラクタセット(例えばSHIFTJIS_CHARSET等)を指定します。SimpleUIのオプションでフォントを上書きする際、ここの値がSYMBOL_CHARSETだと上書きされません。Marlettといった閉じるボタンに使われるシンボルフォントを指定する場合に有効です。
Font-Color Window以下の全て フォントの色を指定します。
Font-Family フォント名 Window以下の全て フォントを指定します。
Font-Style
  • Bold
  • Italic
  • Underline
  • Strikeout
Window以下の全て フォントスタイルを指定します。
Font-Size ポイント Window以下の全て フォントのサイズをポイントで指定します。
Text-Align
  • Left
  • Center
  • Right
Window以下の全て テキストの表示位置を指定します。
Padding-Top ピクセル Window以下の全て 上のパディング幅を指定します。
Padding-Left ピクセル Window以下の全て 左のパディング幅を指定します。
Padding-Right ピクセル Window以下の全て 右のパディング幅を指定します。
Padding-Bottom ピクセル Window以下の全て 下のパディング幅を指定します。
Border-Style
  • None
  • Solid
  • Dashed
  • Dotted
  • Double
  • Inset
  • Outset
  • Groove
  • Ridge
  • Image
  • System
Window以下の全て ボーダーのスタイルを指定します。これはCSS(Cascading Style Sheet)で指定される値と同じです。次のリンクを参考にしてください。CSS2仕様書邦訳 8.5.3 境界スタイル(http://www.y-adagio.com/public/standards/tr_css2/box.html#border-style-properties) また、Image,Systemは以下のように解釈されます。
  • Image:画像ファイルを使います。
  • System:通常のウィンドウ枠を使います。
Border-Width ピクセル Window以下の全て ボーダーの幅を指定します。
Border-Color Window以下の全て ボーダーの色を指定します。
Border-Top-Image ファイル名 Window以下の全て ボーダーの上部の画像ファイルを指定します。
Border-Left-Image ファイル名 Window以下の全て ボーダーの左部の画像ファイルを指定します。
Border-Right-Image ファイル名 Window以下の全て ボーダーの右部の画像ファイルを指定します。
Border-Bottom-Image ファイル名 Window以下の全て ボーダーの下部の画像ファイルを指定します。
Border-TopLeft-Image ファイル名 Window以下の全て ボーダーの上左部の角の画像ファイルを指定します。
Border-TopRight-Image ファイル名 Window以下の全て ボーダーの上右部の角の画像ファイルを指定します。
Border-BottomLeft-Image ファイル名 Window以下の全て ボーダーの下左部の角の画像ファイルを指定します。
Border-BottomRight-Image ファイル名 Window以下の全て ボーダーの下右部の角の画像ファイルを指定します。
Background-Color Window以下の全て 背景色を指定します。
Background-Image ファイル名 Window以下の全て 背景に用いる画像ファイルを指定します。
Background-Mode
  • Repeat
  • Repeat-X
  • Repeat-Y
  • No-Repeat
  • Stretch
  • Right-Bottom
Window以下の全て 背景の表示位置を指定します。
  • Repeat:全体に繰り返して表示します。
  • Repeat-X:水平方向に繰り返して表示します。
  • Repeat-Y:垂直方向に繰り返して表示します。
  • No-Repeat:繰り返し表示しません。
  • Stretch:場所を固定します。
  • Right-Bottom:右下のみに表示します。
Transparent-Color clNone Window以下の全て イメージの透過色を指定します。clNoneのときは透過色なし、それ以外のときはclFuchsiaを透過色として使います。
Top ピクセル Window以下の全て 絶対位置の上座標をピクセル指定します。
Right ピクセル Window以下の全て 絶対位置の右座標をピクセル指定します。
Left ピクセル Window以下の全て 絶対位置の左座標をピクセル指定します。
Bottom ピクセル Window以下の全て 絶対位置の下座標をピクセル指定します。
Visibility
  • 0
  • 1
Window以下の全て 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]をタブ文字に置き換えて指定してください。