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>で指定した色から生成されます。

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2010年12月23日 15:40