Lunascape4 スキン作成手順書

出典: design.lunascape.tv

→スキンデータ仕様書
Rev. 1.08(2006/2/1)

目次

[編集]

目的

このドキュメントは、Lunascape3/4スキン作成手順書であり、Lunascape3/4でサポートされるスキンの作成方法を記述する。　

[編集]

使用される用語

スキン 
Lunascapeの外観を一括変更するための仕組み、もしくは外観の一括変更のために用意された一連のデータ群の総称。
アイコンスキン 
Lunascape3/4で変更可能なアイコンのスキン。(図1参照)
背景・フォントスキン 
Lunascape3/4で変更可能な背景画像・背景色・フォント色のスキン。(図2参照)
メインタブ 
Webページを開くごとに作成されるタブ。
サイドバータブ 
サイドバー群を切り替えるために表示されるタブ。このタブをクリックすると隠れていたサイドバーが表示される。(図2の18・19)
オートハイドタブ 
「自動的に隠す」に設定したサイドバー群が隠れている状態で表示されるタブ。このタブをクリックすると隠れていたサイドバーが表示される。(図2の15・16)
スライダー 
サイドバーのサイズを変更するつまみを指す。
スキンフォルダ 
スキンに必要なデータを格納するためのフォルダ。スキン1セットにつきスキンフォルダ1つを作成する。skin/○○と表記した場合は、skinフォルダの中の○○ファイル(フォルダ)を示す。
[編集]

スキン作成方法

Lunascape3/4では下記図1.で示すアイコン一式と図2.で示す背景・フォント一式、図3.で示すフレーム形状・画像をスキン機構によって変更可能である。本章では、個別のスキンの作成方法を定義する。

[編集]

アイコン変更

以下のアイコンを変更することができる。

  1. ツールバーのボタンのアイコン
  2. Webページの読み込み中にアニメーションするアイコン
  3. お気に入りツリーのアイコン
  4. お気に入りリストのアイコン
  5. 設定ツリーのアイコン
  6. 履歴ツリーのアイコン
  7. ウィンドウツリーのアイコン

SkinManual_Lunascape3_01.jpg


[編集]
teftechのアイコン：

画像:Example.jpg

ファイル形式24ビットカラー：PNG・BMP
32ビットカラー：BMP
透過色24ビットカラーPNG：PNGで定義される透過色
24ビットカラーBMP：BMPにおけるRGB=(255,0,255)
32ビットカラーBMP：α値に依存
ファイル名フォルダskin/toolbar内に以下のファイルを作成する。
「戻る」Goback.png/bmp
「進む」Goforward.png/bmp
「読み込み中止」Stop.png/bmp
「全て読み込み中止」Stopall.png/bmp
「再読み込み」Reload.png/bmp
「ホームへ移動」Gohome.png/bmp
「全て再読み込み」Reloadall.pngbmp
「お気に入り」Viewfavoritebar.png/bmp
「タブを追加」Tabnew.png/bmp
「タブを閉じる」Tabclose.png/bmp
「すべてのタブを閉じる」Tabcloseall.png/bmp
「アクティブなタブ以外すべてを閉じる」Tabcloseallwithoutactive.png/bmp
「右側のタブを閉じる」Tabcloserightside.png/bmp
「左側のタブを閉じる」TabCloseLeftSide.png/bmp
ファイルメニュー「印刷」Print.png/bmp
ファイルメニュー「オフライン」Offline.png/bmp
編集メニュー「コピー」Editcopy.png/bmp
編集メニュー「切り取り」Editcut.png/bmp
編集メニュー「貼り付け」Editpaste.png/bmp
表示メニュー「上の階層へ」Upperfolder.png/bmp
表示メニュー「ソース」Viewsource.png/bmp
ツールメニュー
「Internet Explorer設定」		IEsetting.png/bmp
ツールメニュー
「Lunascape設定」		Lunascapesetting.png/bmp
ツールメニュー「Gecko設定」GeckoSetting.png/bmp
タブメニュー「シフトロック」Shiftlock.png/bmp
タブメニュー「タブロック」Tablock.png/bmp
お気に入り表示Viewfavorite.png/bmp
お気に入りリスト表示Viewfavoritelist.png/bmp
履歴ビュー表示Viewhistory.png/bmp
インフォビュー表示Viewinfoview.png/bmp
設定ツリー表示Viewsettingtree.png/bmp
ウィンドウツリー表示Viewwindowtree.png/bmp
テンポラリツリー表示Viewtemporarytree.png/bmp
アウトプットウィンドウ表示Viewoutputwindow.png/bmp
エンジン切り替えTabSwapEngine.png/bmp
お気に入りに追加AddFavorite.png/bmp
リンクアイテムを追加AddLink.png/bmp
フォルダアイテムを追加AddFolder.png/bmp
RSSアイテムを追加AddRss.png/bmp
共有ブックマークアイテムを追加AddOuterLink.png/bmp
リンクをまとめて追加GetLink.png/bmp
LunaTVに移動LunaTV.png/bmp
メーラー起動Mail.png/bmp
一覧モード表示OpenThumbnail.png/bmp
備考24ビットと32ビットカラーは混在できない
[編集]
Webページの読み込み中にアニメーションするアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ高さ24ピクセル、幅40ピクセルを1フレームとし、
16フレーム：高さ24ピクセル、幅640ピクセル
透過色なし
ファイル名skin/animation/animation.bmp
画像例：SkinManual_Lunascape3_02.jpg


[編集]
お気に入りツリー・お気に入りリストのアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ高さ15ピクセル、幅16ピクセルを1個のアイコンとし、

1個～60個：高さ15ピクセル、幅16～960ピクセル
※既定では一番左のアイコンが表示され、ユーザは詳細設定画面を

通じてアイテムのアイコンを最大60個の中から選択できる。
透過色BMP形式におけるRGB=(255,0,255)
ファイル名フォルダskin/treeitem内に以下のファイルを作成する。
お気に入りの最上位フォルダ非選択時：root_images.bmp
選択時：selected_root_images.bmp
お気に入りのフォルダ 非選択時：folder_images.bmp
選択時：selected_folder_images.bmp
お気に入りのリンクグループ非選択時：linkgroup_images.bmp
選択時：selected_linkgroup_images.bmp
お気に入りのページリンク非選択時：link_images.bmp
選択時：selected_link_images.bmp
RSSアイテム非選択時：rssroot_images.bmp
選択時：selected_rssroot_images.bmp
RSSアイテム内の記事リンク非選択時：rsslink_images.bmp
選択時：selected_rsslink_images.bmp


[編集]
設定ツリーのアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ高さ15ピクセル、幅16ピクセルを1個のアイコンとし、

1個～60個：高さ15ピクセル、幅16～960ピクセル
※既定では一番左のアイコンが表示され、ユーザは詳細設定画面を

通じてアイテムのアイコンを最大60個の中から選択できる。
透過色BMP形式におけるRGB=(255,0,255)
ファイル名フォルダskin/treeitem内に以下のファイルを作成する。
設定ツリーの最上位
フォルダ		非選択時：setting_tree_root_images.bmp
選択時：selected_setting_tree_root_images.bmp
検索エンジンの最上位
フォルダ		非選択時：searchengine_root_images.bmp
選択時：selected_searchengine_root_images.bmp
検索エンジンの「標準」
フォルダ		非選択時：searchengine_defaultfolder_images.bmp
選択時：selected_searchengine_defaultfolder_images.bmp
検索エンジンのフォルダ非選択時：searchengine_folder_images.bmp
選択時：selected_searchengine_folder_images.bmp
検索エンジンアイテム非選択時：searchengine_link_images.bmp
選択時：selected_searchengine_link_images.bmp
サービスの最上位
フォルダ		非選択時：function_root_images.bmp()
選択時：selected_function_root_images.bmp
サービスのフォルダ非選択時：function_folder_images.bmp
選択時：selected_function_folder_images.bmp
サービスアイテム非選択時：function_link_images.bmp
選択時：selected_function_link_images.bmp
プロキシの最上位
フォルダ		非選択時：proxy_root_images.bmp
選択時：selected_proxy_root_images.bmp
プロキシのフォルダ非選択時：proxy_folder_images.bmp
選択時：selected_proxy_folder_images.bmp
「直接接続」アイテム非選択時：proxy_direct_images.bmp
選択時：selected_proxy_direct_images.bmp
「IEのプロキシ設定
を利用」アイテム		非選択時：proxy_ie_images.bmp
選択時：selected_proxy_ie_images.bmp
プロキシアイテム非選択時：proxy_link_images.bmp
選択時：selected_proxy_link_images.bmp
スクリプトの最上位
フォルダ		非選択時：script_root_images.bmp
選択時：selected_script_root_images.bmp
スクリプトのフォルダ非選択時：script_folder_images.bmp
選択時：selected_script_folder_images.bmp
スクリプトアイテム非選択時：script_link_images.bmp
選択時：selected_script_link_images.bmp
スタートアップのフォルダ非選択時：startup_root_images.bmp
選択時：selected_startup_root_images.bmp
フィルタアクションの
最上位フォルダ		非選択時：filteraction_root_images.bmp
選択時：selected_filteraction_root_images.bmp
フィルタアクションの
フォルダ		非選択時：filteraction_folder_images.bmp
選択時：selected_filteraction_folder_images.bmp
フィルタアクションアイテム非選択時：filteraction_link_images.bmp
選択時：selected_filteraction_link_images.bmp
ティッカーの最上位
フォルダ		非選択時：ticker_root_images.bmp
選択時：selected_ticker_root_images.bmp
設定バーの最上位フォルダ非選択時：settingbar_root_images.bmp
選択時：selected_settingbar_root_images.bmp
設定バーアイテム非選択時：settingbar_link_images.bmp
選択時：selected_settingbar_link_images.bmp
スタイル設定の最上位
フォルダ		非選択時：style_root_images.bmp
選択時：selected_style_root_images.bmp
各種スタイルのフォルダ非選択時：style_folder_images.bmp
選択時：selected_style_folder_images.bmp
スタイル設定の
既定アイテム		非選択時：style_default_images.bmp
選択時：selected_style_default_images.bmp
スタイル設定アイテム非選択時：style_link_images.bmp
選択時：selected_style_link_images.bmp


[編集]
履歴ツリーのアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ高さ15ピクセル、幅16ピクセルを1個のアイコンとし、

1個～60個：高さ15ピクセル、幅16～960ピクセル
※既定では一番左のアイコンが表示され、ユーザは詳細設定画面を

通じてアイテムのアイコンを最大60個の中から選択できる。
透過色BMP形式におけるRGB=(255,0,255)
ファイル名フォルダskin/treeitem内に以下のファイルを作成する。
履歴の最上位
フォルダ		非選択時：history_root_images.bmp
選択時：selected_history_root_images.bmp
「最近閉じたタブ」
フォルダ		非選択時：recently_closed_root_images.bmp
選択時：selected_recently_closed_root_images.bmp
「閲覧履歴」フォルダ非選択時：browse_history_root_images.bmp
選択時：selected_browse_history_root_images.bmp


[編集]
ウィンドウツリーのアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ高さ15ピクセル、幅16ピクセルを1個のアイコンとし、

1個～60個：高さ15ピクセル、幅16～960ピクセル
※既定では一番左のアイコンが表示され、ユーザは詳細設定画面を

通じてアイテムのアイコンを最大60個の中から選択できる。
透過色BMP形式におけるRGB=(255,0,255)
ファイル名フォルダskin/treeitem内に以下のファイルを作成する。
ウィンドウツリーの
最上位フォルダ		非選択時：window_tree_root_images.bmp
選択時：selected_window_tree_root_images.bmp
[編集]

背景・フォント色

図2で示す各部位に対応した背景・フォント色を変更することができる。

  1. ツールバーの背景・タイトルフォント色
  2. ステータスバーの背景・フォント色
  3. ティッカーのトピックフォント色
  4. ティッカーの記事タイトル背景・フォント色
  5. サイドバーのツールバー背景
  6. スライダーの背景
  7. サイドバータイトル(選択時・非選択時)の背景・フォント色
  8. オートハイドタブの背景
  9. オートハイドタブ(選択タブ・非選択タブ)の背景・フォント色
  10. サイドバータブの背景
  11. サイドバータブ(選択タブ・非選択タブ)の背景・フォント色
  12. メインタブの背景
  13. メインタブ(選択タブ・非選択タブ)の背景色・背景・フォント色

SkinManual_Lunascape3_03.jpg 図２：背景・フォントスキン


[編集]
ツールバーの背景・タイトルフォント色

ツールバーの背景・ツールバータイトルのフォント色を変更する。 背景の画像ファイルは以下の形式で作成する。

ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名skin/frame/back.bmp

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
ステータスバーの背景・フォント色
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかステータスバー専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/statusbar /back.bmp

フォント色は後述のskin.configファイルの記述によって変更する。

[編集]
ステータスバーのアイコン
ファイル形式24ビットカラー：Windows用BMP
画像サイズ16×16
透過色BMPにおけるRGB=(255,0,255)
ファイル名ActiveXのダウンロードの許可/禁止：enable_dlactivex.bmp/disable_dlactivex.bmp

ActiveXの実行の許可/禁止：enable_execactivex.bmp/disable_execactivex.bmp
画像読み込みの許可/禁止：enable_image.bmp/disable_image.bmp
サウンドの有効/無効：enable_sound.bmp/disable_sound.bmp
Javaアプレットの許可/禁止：enable_java.bmp/disable_java.bmp
Javaスクリプトの有効/無効：enable_script.bmp/disable_script.bmp
プライバシーアイコンの有効/無効：enable_video.bmp/disable_video.bmp
プライバシーアイコンの有効/無効：enable_privacy.bmp/disable_privacy.bmp
SSLの有効/無効：enable_ssl.bmp/disable_ssl.bmp
オンライン/オフライン：online.bmp/offline.bmp
RSSの検知アイコン：ready_rss.bmp
ズーム：zoom.bmp
読み込み中アニメーション：loading_animation.bmp

[編集]
ティッカーのトピックフォント色

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
ティッカーの記事タイトル背景・フォント色
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかティッカー専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/ticker/caption.bmp

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
サイドバーのツールバー背景
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかサイドツールバー専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/sidebar/toolbar.bmp


[編集]
スライダーの背景
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかスライダー専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/sidebar/slider.bmp


[編集]
サイドバータイトル(選択時・非選択時)の背景・フォント色
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかサイドバー専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。

選択時：skin/sidebar/active_caption.bmp

非選択時：skin/sidebar/nonactive_caption.bmp

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
オートハイドタブの背景
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかオートハイドタブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/autohide_tab/back.bmp


[編集]
オートハイドタブ(選択タブ・非選択タブ)の背景・フォント色
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかオートハイドタブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。

選択時：skin/autohide_tab/active.bmp

非選択時：skin/autohide_tab/nonactive.bmp

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
サイドバータブの背景
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかサイドバータブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/ sidebar_tab/back.bmp


[編集]
サイドバータブ(選択タブ・非選択タブ)の背景・フォント色
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかサイドバータブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。

選択時：skin/sidebar_tab/active.bmp

非選択時：skin/sidebar_tab/nonactive.bmp

フォント色は後述のskin.configファイルの記述によって変更する。


[編集]
メインタブの背景
ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかメインタブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。
skin/main_tab/back.bmp


[編集]
メインタブ(選択タブ・非選択タブ)の背景色・背景・フォント色

メインタブの背景色(もしくは背景)・フォント色を変更する。

ファイル形式24ビットカラー：Windows用BMP
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
透過色なし
ファイル名後述のスキン設定ファイルにより、ツールバーの背景をそのまま
表示するかメインタブ専用の背景を用いるかを選択できる。
専用の背景を作成する場合は下記の名前で作成する。

選択時：skin/main_tab/active.bmp

非選択時：skin/main_tab/nonactive.bmp
[編集]

フレーム形状・画像

図3.で示す各部位のフレーム形状・画像を変更することができる。 また、最大化・最小化等指定の機能を持ったボタンをフレーム上に配置することができる。

SkinManual_Lunascape3_04.jpg

図３：フレームスキン

[編集]
メインフレームの形状

メインフレームの形状を変更する。

ファイル形式24ビットカラー：Windows用BMP
透過色BMP形式におけるRGB=(0,0,0)

透過色の部分のフレームが切り取られる。

透過色(フレームの切り取り)に対応しているのは以下の部位。
画像サイズ任意
各部位の画像サイズに対応してフレームサイズが変更される。
ファイル名フォルダskin/mainframe内に以下のファイルを作成する。
また、フルスクリーンモード時のフレームは同ファイル名で
フォルダskin/mainframe_full内に以下のファイルを作成する。
左上topleft.bmp
中央上topcenter.bmp
右上topright.bmp
タイトルcaption.bmp
左middleleft.bmp
右middleright.bmp
左下bottomleft.bmp
中央下bottomcenter.bmp
右下bottomright.bmp


[編集]
メインフレームの背景画像

メインフレームの背景画像を変更する。

ファイル形式24ビットカラー：Windows用BMP
透過色なし。但しフレームを切り取る場合には前述のフレーム形状スキンに
透過色を設定することで対応可能である。
画像サイズ任意

※表示領域より小さい画像ファイルを適用した際には、

表示領域を覆うように隙間なく上下左右に敷き詰められる。
ファイル名skin/mainframe/back.bmp
[編集]
メインフレーム上のコマンドボタン

メインフレームに指定の動作をするボタンを配置する。

ファイル形式24ビットカラー：Windows用BMP
透過色なし。
画像サイズ任意
ファイル名フォルダskin/mainframe内に以下のファイルを作成する。
後述のスキン設定ファイルで、各画像のファイル名を指定する。
通常xxx.bmp
例：close.bmp		例： SkinManual_Lunascape3_04a.jpg
マウスカーソルが上にある時yyy.bmp
例：close_hot.bmp		例： SkinManual_Lunascape3_04b.jpg
マウスの左ボタン押下中zzz.bmp
例：close_down.bmp		例： SkinManual_Lunascape3_04c.jpg
[編集]

スキン設定ファイル

Lunascapeのスキンにおける情報の詳細を記述したファイル。 スキン設定ファイルを適切に記述することでアイコンサイズや背景スキンの参照先、フォントの色等を変更することができる。 ファイル名はskin/skin.configとし、ファイル形式は以下に示すXMLテキスト形式である。 以下の書式に基づきスキンに関する情報を記述する。

SkinManual_Lunascape3_05.jpg

[編集]

備考

太字既定値を表す。
値が太字表記されている項目を省略した場合は既定値が用いられる。
数字3-2、3-3章の各項目に対応する。
スキン名任意の文字列。
Lunascape3/4デザイン切り替え時に表示されるタイトルとして用いられる。
コメント任意の文字列
フォントの色#000000～#FFFFFF(RGBカラーの16進数表記)
タブの色#000000～#FFFFFF(RGBカラーの16進数表記)
アイコンの幅・高さ数値(10～32の整数)
アニメーションバーの幅・高さ数値(10～40の整数)
background_imageの
値と適用される画像
ファイルの関係		・file…前述の各部位専用に指定された画像ファイルで描画する。

・none…Windowsで設定された背景色で背景を塗りつぶす。

・transparent…ツールバーの背景画像ファイルをそのまま透過して描画する。
ボタンを押した時に
実行されるコマンド		・close…Lunascapeを終了する。

・minimize…Lunascapeを最小化する。
・maximize…Lunascapeを最大化する。
・restore…Lunascapeを通常のサイズに戻す。

・http://xxx(URL) …指定のURLのページを表示する。

以上

"http://jp.design.lunascape.tv/index.php?title=Lunascape4_%E3%82%B9%E3%82%AD%E3%83%B3%E4%BD%9C%E6%88%90%E6%89%8B%E9%A0%86%E6%9B%B8" より作成