111 名前:開発チーム★[] 投稿日:2010/12/22(水) 15:43:54 ID:???0
■setting.xmlについて
テーマの情報を記述したXMLファイルです。
テーマの名称や概要、アプリケーションの外観、メニューアイコンやタイムラインの最小幅など、タイム>ライン内部以外のすべての設定の記述はここで行います。
簡単な解説(下記ファイルをダウンロードしてメモ帳等で開いて下さい)
http://janetter.net/test/sample_setting.xml
※以下の情報は、独自研究に基づくものです。
テーマ情報
<Infomation>
<ThemeName>Silver</ThemeName>
<Description>メタリック</Description>
<SampleImage>sample.jpg</SampleImage>
<Author>Jane, Inc.</Author>
<URL>http://janetter.net</URL>
<TwitterID>Janetter_jp</TwitterID>
</Infomation>
ThemeName |
テーマファイルの名前 ※重複しないようにして下さい |
Description |
説明文を2行まで表示可能です (改行文字は「&#10;」) |
SampleImage |
サンプル画像です 実寸[ 199 x 267 ] |
Author |
作者名 |
URL |
WebページURL テーマ変更画面に表示されてリンクが貼られる |
TwitterID |
テーマ作者のツイッターアカウント テーマ変更画面のtマークにリンクが貼られる |
公開するときに、適宜書き換えて下さい。
タイムライン・プロフィール・右クリックメニュー
<HtmlFile>index.htm</HtmlFile>
<ProfileHtml>..\Common\prof\profile.html</ProfileHtml>
<ContextMenu>..\Common\ContextMenu.xml</ContextMenu>
プロフィール画面を書き換えたい時に「ProfileHtml」は変更しますが、それ以外はあまり使いません。
背景
<Background>
<Image>metal.jpg</Image>
<Style>Tile</Style>
<Color>C0C0C0</Color>
<EdgeColor>E1854D</EdgeColor>
</Background>
アプリケーションの背景を指定します。
背景に使用する画像ファイルは .jpg .png .gifを指定可能です。動画gifは動きません。
「Image」に何も指定しない場合は、「Color」で指定した色で塗りつぶされます。
EdgeColorでWindow枠の色を指定します。
Style要素
<Style></Style> |
画像を繰り返しなしで表示します。 |
<Style>Stretch</Style> |
画像を画面解像度幅に引き伸ばして表示します。 |
<Style>Tile</Style> |
画像を敷き詰めて表示します。 |
左:指定無し 中:Stretch 右:Tile
タイムラインの最小幅
<TimeLineDeck>
<TimeLineWidth>318</TimeLineWidth>
<OutLineWidth>2</OutLineWidth>
</TimeLineDeck>
TimeLineWidthでタイムラインの横幅の最小値を指定します。値を小さくすることで、同時に表示できるTL数を稼ぐことが出来ます。
OutLineWidthでタイムラインの左右下の余白の幅を指定します。小さくしすぎると、ウィンドウサイズの変更に支障が出る場合があります。
タイムラインの透過
<TimeLineBackground>
<Transmission>True</Transmission>
<Color>FFFFFF</Color>
<Alpha>60</Alpha>
</TimeLineBackground>
要素 |
値 |
説明 |
Transmission |
True / False |
透過させるか |
Color |
HEX COLOR |
色 |
Alpha |
0~255 |
透過率 値が小さいほど透過します |
透過させる場合、ある程度のマシンパワーが要求されますので注意して下さい。
Transmission を False にした場合は、スタイルシートで指定した背景色になります。
Transmission を True にした場合は、<body>に対して行った背景色や背景画像の指定は解除されます。
左:Alpha 0 中:Alpha 180 右:Alpha 255
※<Background>に青色(0000FF)、<Color>に黒色(000000)
閉じる・最大化・最小化・表示モード切替
<SystemMenu>
<IconInfo>
<Path>..\Common\sysytemicon\close.png</Path>
<ActivePath>..\Common\sysytemicon\close_on.png</ActivePath>
<Left>-47</Left>
<Top>1</Top>
<Width>41</Width>
<Height>19</Height>
<Action>WindowClose</Action>
<Name>Normal</Name>
</IconInfo>
<!-- 以下省略 -->
</SystemMenu>
Path |
通常時の画像ファイルは .jpg .png .gifを指定可能です。動画gifは動きません。 |
ActivePath |
マウスオーバー時のアイコンファイル |
Left |
アイコンの左からの位置 マイナスの場合は右から位置 |
Top |
アイコンの上からの位置 マイナスの場合は下から位置 |
Width |
アイコンのクリック領域の幅 |
Height |
アイコンのクリック領域の高さ |
Action |
クリックしたときの動作 |
Name |
表示条件 Normal:通常時, Max:最大化している時 |
メインメニュー
全般
<MainMenu>
<HeaderHeight>68</HeaderHeight>
<TopLine>True</TopLine>
<BottomLine>True</BottomLine>
<Gradation>
<Enabled>True</Enabled>
<StartColor>000000</StartColor>
<StartAlpha>70</StartAlpha>
<EndColor>FFFFFF</EndColor>
<EndAlpha>0</EndAlpha>
</Gradation>
<HeaderHeight>では、メインメニューの高さを指定します。
<TopLine>と<BottomLine>は省略することが出来ます。省略した場合は「True」を指定したときと同じになります。
左:Fales 右:True
Gradation要素
Gradationでメニューの背景を指定します。
※分かりやすくするために<Background>で赤色(#FF0000)を指定しています
<Enabled>False</Enabled>とした場合、<StartColor>等はすべて無視され<Background>が表示されます。
次のように書くと
<Gradation>
<Enabled>True</Enabled>
<StartColor>00FF00</StartColor>
<StartAlpha>255</StartAlpha>
<EndColor>0000FF</EndColor>
<EndAlpha>255</EndAlpha>
</Gradation>
このような表示になります
未読数
<Numbers>
<MainDirPath>..\Common\number\red\big</MainDirPath>
<MenuDirPath>..\Common\number\red\small</MenuDirPath>
<HPosition>Right</HPosition>
<VPosition>Top</VPosition>
<HAdjust>0</HAdjust>
<VAdjust>0</VAdjust>
</Numbers>
<Numbers>は未読数表示につかう画像と、その表示位置を指定します。
MainDirPath |
メインメニュー上に表示するファイルのあるディレクトリ 0.png~9.png,plus.pngが必要 |
MenuDirPath |
メインメニューからのポップアップメニューに表示するファイルのあるディレクトリ 0.png~9.png,plus.pngが必要 |
HPosition |
未読件数を表示する水平方向での位置 Left,Center,Right で指定 |
VPosition |
未読件数を表示する垂直方向での位置 Top,Center,Bottom で指定 |
HAdjust |
水平方向の調整 プラスで右,マイナスで左 |
VAdjust |
垂直方向の調整 プラスで下,マイナスで上 |
メニューアイコン
<IconInfo>
<Path>..\Common\iconset\main\logo.png</Path>
<Left>6</Left>
<Top>6</Top>
<Width>16</Width>
<Height>16</Height>
<Action>WindowSysMenu</Action>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\gray\home.png</Path>
<ActivePath>..\Common\iconset\main\btn_on_bg.png</ActivePath>
<Left>16</Left>
<Top>34</Top>
<Width>28</Width>
<Height>28</Height>
<ActiveLeft>-7</ActiveLeft>
<ActiveTop>-8</ActiveTop>
<ActiveWidth>43</ActiveWidth>
<ActiveHeight>45</ActiveHeight>
<ActiveBK>True</ActiveBK>
<Action>HomeTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>Home</Name>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\gray\gear_off.png</Path>
<ActivePath>..\Common\iconset\gray\gear_on.png</ActivePath>
<Left>-40</Left>
<Top>34</Top>
<Width>27</Width>
<Height>28</Height>
<Action>ShowOptions</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</MainMenu>
<IconInfo>でメニューアイコンの位置、サイズを指定します。<IconInfo>~</IconInfo>を削除することで、メニューから消すことが出来ます。
各要素
Path |
|
通常時の画像 |
ActivePath |
|
マウスオーバー時の画像 |
Left |
|
左からの位置 負の値なら右から |
Top |
|
上からの位置 |
Width |
|
画像の横幅 |
Height |
|
画像の縦幅 |
ActiveLeft |
省略 |
クリック可能エリアの開始位置 |
ActiveTop |
省略 |
クリック可能エリアの開始位置 |
ActiveWidth |
省略 |
クリック可能エリアの横幅 |
ActiveHeight |
省略 |
クリック可能エリアの高さ |
ActiveBK |
省略 |
マウスオーバー時に通常時の画像を残すか |
Action |
|
クリック時の実行内容 |
Round |
省略 |
丸みを持たせるか |
Shadow |
省略 |
影を付けるか |
Name |
|
対応する未読数を表示 |
タイムラインメニュー
背景色と文字色
<TimeLineMenu>
<TitleHeight>26</TitleHeight>
<TitleColor>FFFFFF</TitleColor>
<TitleAlpha>140</TitleAlpha>
<ActiveColor>FFFFFF</ActiveColor>
<ActiveAlpha>200</ActiveAlpha>
<HotColor>FFFFFF</HotColor>
<HotAlpha>240</HotAlpha>
<CaptionLeft>26</CaptionLeft>
<EdgeColor>E1854D</EdgeColor>
<TitleFont>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>444444</Color>
<Height>-12</Height>
<Style>B</Style>
</TitleFont>
<HotFont>
<!-- 以下省略 -->
</HotFont>
<SmallIcon>
<Left>5</Left>
<Top>5</Top>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
</SmallIcon>
タイムライン上側のタブ部分のデザインを指定します。
要素 |
説明 |
TitleHeigh |
タブの高さ |
TitleColor |
通常の背景色 |
TitleAlpha |
通常の背景透過率 |
ActiveColor |
フォーカスされているタイムラインのタブの背景色 |
ActiveAlpha |
フォーカスされているタイムラインのタブの背景通過率 |
HotColor |
マウスオーバー時の背景色 |
HotAlpha |
マウスオーバー時の背景透過率 |
CaptionLeft |
文字列の表示位置 |
EdgeColor |
タイムライン枠の色 指定しないときは全体の背景色から計算 |
TitleFont |
フォントの種類、サイズ、色、太さ |
HotFont |
マウスオーバー時のフォントの種類、サイズ、色、太さ |
SmallIcon |
タブに表示する小さいアイコンと、その表示位置 |
Color要素
<TitleColor>FF0000</TitleColor> <!-- 赤 -->
<TitleAlpha>255</TitleAlpha>
<ActiveColor>00FF00</ActiveColor><!-- 緑 -->
<ActiveAlpha>255</ActiveAlpha>
<HotColor>0000FF</HotColor> <!-- 青 -->
<HotAlpha>255</HotAlpha>
左:通常 中:タイムラインにフォーカスがある 右:タブにマウスをのせている状態
フォントプロパティ
要素 |
説明 |
Name |
フォント名 |
Charset |
不明 |
Size |
フォントサイズ |
Color |
文字色 |
Style |
B=ボールド体 I=イタリック なし=なし |
Height |
不明 |
タイムラインの文字サイズ
<TimeLineFontSize>
<Tiny>10.5</Tiny>
<Small>11.5</Small>
<Normal>12.5</Normal>
<Big>14</Big>
<Giant>16</Giant>
<UltraGiant>24</UltraGiant>
</TimeLineFontSize>
設定→基本設定のフォントプロパティで選ぶ文字サイズに対応
その他のアイコン
<AutoLabel>
<Path>..\Common\iconset\main\auto_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</AutoLabel>
<StreamLabel>
<Path>..\Common\iconset\main\strm_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</StreamLabel>
<IconInfo>
<Path>..\Common\iconset\main\close_s_off.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>4</Top>
<Width>16</Width>
<Height>16</Height>
<Action>CloseTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>30</Top>
<Width>16</Width>
<Height>16</Height>
<Action>FindClose</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</TimeLineMenu>
AutoLabelは「新しいツイートにスクロールする」が有効になっているタイムラインに表示するアイコンです。通常は左端に表示されています。
ツイート欄
<TweetWindow>
<Height>92</Height>
<VMargin>0</VMargin>
確保する高さと、余白
テキストエリアとフォント
<Edit>
<Left>10</Left>
<Top>10</Top>
<Right>80</Right>
<MinLines>3</MinLines>
<MaxLines>9</MaxLines>
<Color>FFFFFF</Color>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>333333</Color>
<Height>-12</Height>
<Style></Style>
</Font>
</Edit>
要素 |
説明 |
Left |
テキストエリアの左側の余白 |
Top |
テキストエリアの上側の余白 |
Right |
テキストエリアの右側の余白 |
MinLines |
最小の行数 ツイート欄の最小の高さ |
MaxLines |
最大の行数 |
Color |
背景色 |
Font |
フォントの種類、サイズ、色、スタイル |
カウンター
<Number>
<Left>-190</Left>
<Top>-30</Top>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>12</Size>
<Color>999999</Color>
<Height>-16</Height>
<Style>B</Style>
</Font>
<Over140FontColor>FF0000</Over140FontColor>
</Number>
文字数カウンターのフォントなどを指定します。
Over140FontColorで140字を超えたときの警告色を指定します。
サムネイル
<Thumbnail>
<Left>16</Left>
<Width>70</Width>
<Height>70</Height>
<PreserveAspect>True</PreserveAspect>
<VMargin>2</VMargin>
<CloseLeft>52</CloseLeft>
<CloseTop>2</CloseTop>
<ClosePath>..\Common\iconset\main\close_s_on_red.png</ClosePath>
</Thumbnail>
サムネイルの大きさなどを指定します。
ツイート欄の背景(省略可能)
<TopAlpha>255</TopAlpha>
<BottomAlpha>255</BottomAlpha>
左:Alpha 0 中:(指定無し) 右:Alpha 255
※TopAlpha,BottomAlphaともに同じ数値を指定
テキストエリアの背景
<Background>
<IconInfo>
<Path>..\Common\images\TweetCenterMiddle.png</Path>
<ActivePath></ActivePath>
<Left>13</Left>
<Top>8</Top>
<Width>-93</Width>
<Height>-16</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\images\TweetRightBottom.png</Path>
<ActivePath></ActivePath>
<Left>-80</Left>
<Top>-13</Top>
<Width>7</Width>
<Height>7</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</Background>
ツイート欄の背景を構成します。通常はフキダシ型になるように整形されています。
投稿者画像、切り替えボタン、閉じるボタン
<IconInfo>
<Path>$PROFILE_IMAGE</Path>
<ActivePath></ActivePath>
<Left>-60</Left>
<Top>22</Top>
<Width>48</Width>
<Height>48</Height>
<Action>ChangeAccount</Action>
<Round>True</Round>
<Shadow>True</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pulldown_gray_on.png</Path>
<ActivePath>..\Common\iconset\input\pull.png</ActivePath>
<Left>-25</Left>
<Top>59</Top>
<Width>14</Width>
<Height>10</Height>
<Action>ChangeAccount</Action>
<Name>ChangeAccountPull</Name>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on_red.png</ActivePath>
<Left>-24</Left>
<Top>3</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ToggleTweetWindow</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
URL短縮、画像の追加、下書きの保存、ツイートボタン
<IconInfo>
<Path>..\Common\iconset\input\url_s.png</Path>
<ActivePath>..\Common\iconset\input\url_s_on.png</ActivePath>
<Left>13</Left>
<Top>-25</Top>
<Width>27</Width>
<Height>16</Height>
<Action>ShortenURL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pic_s.png</Path>
<ActivePath>..\Common\iconset\input\pic_s_on.png</ActivePath>
<Left>48</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>SelectPicture</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\save_s.png</Path>
<ActivePath>..\Common\iconset\input\save_s_on.png</ActivePath>
<Left>76</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>DraftMenu</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tweet_en.png</Path>
<ActivePath>..\Common\iconset\input\tweet_en_on.png</ActivePath>
<Left>-140</Left>
<Top>-26</Top>
<Width>61</Width>
<Height>16</Height>
<Action>SendTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tw_msg.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<Left>8</Left>
<Top>10</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ClearTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>ClearTweet</Name>
</IconInfo>
</TweetWindow>
タイムライン切り替えタブ
<ScrollBar>
<SmallIcon>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
<Plus>..\Common\number\red\small\plus.png</Plus>
</SmallIcon>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>444444</Color>
<Style></Style>
</Font>
<DisableColor>999999</DisableColor>
</ScrollBar>
画面下部のタイムライン切り替えタブのデザインを指定します。
複数の指定方法
<DisableColor>999999</DisableColor> の部分を次のように書くことが出来ます
<EnableColor>CCCCCC</EnableColor>
<DisableAlpha>100</DisableAlpha>
<EnableColor>AADDFF</EnableColor>
<DisableColor>999999</DisableColor>
<EnableAlpha>240</EnableAlpha>
<DisableAlpha>100</DisableAlpha>
ステータスバー
<StatusBar>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>FFFFFF</Color>
<Style></Style>
</Font>
</StatusBar>
ステータスバーのフォントを指定します。
通知ポップアップ
<Notice>
<BackColor>FFFFFF</BackColor> <!-- 背景色 -->
<Font> <!-- フォント Default:タイムラインのタイトルフォント -->
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>91351D</Color> <!-- フォント色 Default:黒 -->
<Height>-12</Height>
<Style></Style>
</Font>
</Notice>
ポップアップウィンドウの背景色とフォントを指定します。
設定ダイアログやその他のウィンドウ
<SubWindow> <!--設定ダイアログなど その他のウィンドウ -->
<BackgroundColor>FEE895</BackgroundColor> <!-- 背景色 Default:全体の背景色 -->
<FontColor>000000</FontColor> <!-- フォント色 Default:背景色から計算 -->
<MenuFontColor>E1854D</MenuFontColor> <!-- メニューフォント色 Default:背景色から計算 -->
</SubWindow>
設定画面の文字色が変わります。
指定しない場合は、<Background>で指定した色から生成されます。
最終更新:2010年12月23日 15:40