Skinning HowTo/Basics/ja

/ja

このページは作成中です。このページを改良するのはご自由にどうぞ！（訳注：英語ページにも追記をお願いします）

あなたがさらに基本的な情報とチュートリアルを加えたいのであれば、似た路線でページ名を選ぶべきでしょう。

• Skinning HowTo/Resize the toolbar
• Skinning HowTo/Changing a highlighting effect
• etc

最初に

Second Lifeビューアスキンの性能は現在たかがしれていますが、Skinning Projectの進歩を通して次々と改善されています。このドキュメントはUIテクスチャ、色、XMLで定義されたフローターの読み込みと構成について提示しています。

あなたはXMLファイルをより簡単に編集するためにはXMLエディタが必要になるでしょう。

• フリーでオープンソースのようなエディタの一つに、Komodo Editがあります。

• 殆どのWindowsのバージョンはtgaファイルのサムネイルビューをサポートしていません。（スキンファイル編集では必須です）Thumb Plug TGAはこの昨日を提供する、フリーのオープンソースtgaサムネイルプラグインです。

SecondLifeのインストールされたファイルを変更するときは、常に危険が伴います。時にはXMLファイルが必須ノードや要素を失ったり、要素が不正な形式（記述）で、ビューアがクラッシュするでしょう。変更しないバックアップファイルを作ることを強くお勧めします。不正なファイルが即座にクラッシュすることを避けてビューアを動かすには、元のファイルを復元する、あるいはダウンロードページからSecond Lifeを再インストールする必要があるでしょう。

このページはビューア1.20以上のスキンの性能を記述しています。

OpenSim

OpenSimはフリーであなた自身が動かすことの出来るSLシミュレータのオープンソース版です。次のあなたのxmlエディタと画像編集プログラムはビューアのスキン作成間で最も重要なツールとなるでしょう。Lindenグリッドログインは遅くなる、もしくは無効にされ、XMLファイルの一行を編集するようにテストするものでは不都合になるでしょう。あなたのローカルマシン上で走っているシミュレータへのログインは、インターネットを越えてログインするよりも著しく早く、あなたのビューアスキンのつくったビューアスキンを編集するためのたたき台としてなら早くて簡単です。

Official OpenSim website

• ダウンロードの方法とあなたの個人シミュレータのセットアップの説明のために、"User Docs"を読みましょう。
• オープンシミュレータにあなたのビューアで接続する方法

この実用性はほとんどストレスを感じさせません。

\SecondLife\app_settings folder

(注意: Release Candidateバージョンでは、参照されるフォルダは代わりに以下の場所となります。 　\SecondLifeReleaseCandidate\app_settings)

colors_base.xml

このファイルは分離して指名されたノードのUIの基本色を定義します。

• 警告: このファイルを弄らないのは極めて賢明です。そのかわり、コピーペーストでこのファイルからcolor_base.xmlで設定を上書きする次のファイル（color.xml）に入力します。ビューアはいずれかの必須な事項を失っている、あるいはcolors_base.xmlが不正な形式の場合にクラッシュするでしょう!

colors.xml

標準では、このファイルは何も要素がありません。しかしながらこのファイルは、上書きするcolor_base.xml内のいずれかと全く同じに名づけられた要素を含有することができます。

指定している色のフォーマットは以下の通りです。

value="[R],[G],[B],[透過率]"

...R、G、B、透過率は0-255の範囲です。透過率では、128が半分透過です（つまり半透過です）。

(注意: 透過率はアルファ値としても呼ばれます)

• たとえば、colors_base.xmlから次の事項をコピーしたとして、調整することができる場所をcolors.xmlに貼り付けます。

<!-- CHAT AND IM HISTORY TEXTBOX COLORS -->
<ChatHistoryBgColor value="0, 30, 80, 200" />
<ChatHistoryTextColor value="255, 255, 255, 255" />
<IMHistoryBgColor value="0, 30, 80, 128" />
<IMHistoryTextColor value="255, 255, 255, 255" />

\SecondLife\skins\textures\ folder

(注意: Release Candidateバージョンでは、参照されるフォルダは代わりに以下の場所となります。 　\SecondLifeReleaseCandidate\skins\textures)

2008-04-08: これはビューアのインストールされたテクスチャが存在する場所です。

*.j2c, *.tga, *.jpg, *.png

• これらのテクスチャの多くはUUIDによるファイル名を持ちます。
  • これらの殆どはオリエンテーションランドで用いられるテクスチャでインストールされます。
• Dazzle projectの一部でUIに用いられている全てのテクスチャは、例外として人が読解できるファイル名を持っています。 (これらの省略はSkinning フェイズ 1で転向されるでしょう)
  • 7a0b1bdb-b5d9-4df5-bac2-ba230da93b5b.tga (製作ツールアイコンボタン)
  • 0098b015-3daf-4cfe-a72f-915369ea97c2.tga (選択状態の製作ツールアイコンボタン)
  • 3c18c87e-5f50-14e2-e744-f44734aa365f.tga (左側の最初の一つめにスクロールのアイコン（＜）)
  • 7dabc040-ec13-2309-ddf7-4f161f6de2f4.tga (右側の最初の一つめにスクロールのアイコン（＞）)
  • 9cad3e6d-2d6d-107d-f8ab-5ba272b5bfe1.tga (左側の最初の一つめにスクロールのアイコンのハイライト（＜）)
  • 89e9fc7c-0b16-457d-be4f-136270759c4d.tga (ボリュームをあらわすスピーカアイコン)
  • 5748decc-f629-461c-9a36-a35a221fe21f.tga (空のアイコン)

• Skinningの将来のフェイズでこれらのUIテクスチャを区切りのフォルダへの移動が計画されており、さらに簡単に見つけて操作することができるでしょう。

• かつて、アイコン画像（テクスチャ）は2のべき乗（例えば 32x128、64x128など）のサイズでしたが、今ではいずれのサイズも可能です。（例えば 24x96）

textures.xml

2008-04-08: ここはtextures.xmlの幾つかの単純な項目の例です。引き伸ばしできない定義済みの長方形で、、あらかじめ読み込まれず、UUIDで参照されません。

  <icon_auction.tga/>
  <icon_avatar_offline.tga/>
  <icon_avatar_online.tga/>
  <icon_day_cycle.tga/>
  <icon_diurnal.tga/>
  <icon_event.tga/>
  <icon_event_mature.tga/>
  <icon_for_sale.tga/>
  <icon_group.tga/>
  <icon_groupnotice.tga/>
  <icon_groupnoticeinventory.tga/>
  <icon_lock.tga/>
  <icon_place.tga/>
  <icon_popular.tga/>
  <icon_top_pick.tga/>

長方形の拡大縮小 (scale_rect)

UI画像テクスチャはしばしば、同じヴィジェット内で異なる幅や高さに適応して、様々にリサイズします。くっきりとした角に見えるのを維持するために、画像の一部は拡大縮小から'維持'あるいは保護されます。標準では、引き伸ばしは画像のあらゆる側面の8ピクセルを保護するでしょう。

• この標準を変えるには、<scale_rect />要素を設定します。

<scale_rect left="x1" top="y1" right="x2" bottom="y2" />

• 画像のピクセル構成は、左底の角を参照して、位置を(0,0)から数えます。(第一象限の直交座標系のようなものです)

• 例えば、この画像 toolbar_btn_selected.tga は、128ピクセルの幅 x 24ピクセルの高さの寸法です。

• • 以下は<scale_rect />のコードです。

 <toolbar_btn_selected.tga>
       <scale_rect left="26" top="24" right="102" bottom="0" />
 </toolbar_btn_selected.tga>

• 左右に26ピクセルを保持していた長方形が引き伸ばして定義しました。

use_mips

(製作中)

事前読み込み

Setting preload="true" は、ログイン画面が表示される前に、テクスチャがランタイムで読み込まれることを意味します。一般的に、ビューアのメモリ使用量に依存するので、重要な少数のテクスチャを事前読み込みするのが一番のぞましいです。

Example:

 <checkbox_disabled_false.tga preload="true" />

\SecondLife\skins\xui\ folder

(注意: Release Candidateバージョンでは、参照されるフォルダは代わりに以下の場所となります。 　\SecondLifeReleaseCandidate\skins\xui)

• XUI (読み方はズーイ) はXMLユーザインターフェイスを支持しています。XUIはSecondLifeユーザインターフェイスの記述のためのカスタムXML data形式で構成され、 Secondlifeのデータを結びつける処理のコードです。

..\[lang] フォルダ

他の言語がビューア(Preferences > General > Language)で選択されたとき、[lang]フォルダの適当なファイルはen-us版からこなして階層的に読み込まれ、ビューアの次回開始に動きます。

要素（あるいは内部ファイル）が[lang]版にない場合、ビューアはen-us版の指定された値ヘ後退します。

2008-04-08: 存在する言語は、ビューア内のものを含みます。

• \ko Korean
• \ja Japanese
• \de German
• \fr French - 公式にサポートされておらず、定期アップデートもされません
• \es Spanish - 公式にサポートされておらず、定期アップデートもされません
• \zh Simplified Chinese - 公式にサポートされておらず、定期アップデートもされません

フローター、あるいはパネルの\[lang] 版はen-us版から上書きされる最小の値のみを所有しています。

• 一般的にこれはname=プロパティに一致するものとlabel=のstringに変換されるもののみです。
• しかしながら、特定の言語のために細部のヴィジェットの大きさを調整するために、幾つかの個々の言語例によっては既定にされるべきかもしれません。

..\en-us フォルダ

このフォルダはビューアで用いられるテキスト文字が英語でかかれた、フローター、パネル、および定義されたヴィジェットがあります。

重要なノート: 存在してる（英語）名称のうち、いずれのname=パラメータも決して変更しないでください。name=パラメータはビューアコードで呼ばれたときに 予期された各ノードを定義するのに用いられ、同じノードのほかの翻訳と一致するのに用いられます。

ローカライゼーションとの関連

英語テキスト文字の更なる議論とどのように翻訳を取り扱うかは、どのように世界をローカライズするかにて見つけられます。

色の関連

2008-04-08: スキンの目的として、\en-usフォルダ内から指定の色を、現段階での2つのXMLファイルに設置して記録するのが重要となります。

1. \skins\xui\en-us\floater_instant_message_ad_hoc.xml

• bg_readonly_color, bg_writeable_color, text_color,とtext_readonly_colorと<text_editor />ウィジェットを含みます。

A. "im_history"と名づけられたウィジェット

<text_editor type="string" length="1" bg_readonly_color="ChatHistoryBgColor" 
	bg_writeable_color="ChatHistoryBgColor"
	bottom="-265" embedded_items="false" enabled="false"
	follows="left|top|right|bottom" font="SansSerif" height="239" left="5"
	max_length="2147483647" mouse_opaque="true" name="im_history"
	text_color="ChatHistoryTextColor"
	text_readonly_color="ChatHistoryTextColor" width="490" word_wrap="true" />

• これら4つの値はcolors.xmlに名づけられた項目(bg_readonly_color="ChatHistoryBgColor")か、R,G,B,O 値のように直接設定されたもの(bg_readonly_color="50, 115, 185, 150")のいずれかを設定できるでしょう。
  • ノート: あなたは、XMLで使っている text_color= パラメータで、いずれかの <text_editor /> のようなウィジェットへテキストカラーを設定できます。

2. \skins\xui\en-us\floater_chat_history.xml

• bg_readonly_color, bg_writeable_color, text_color,とtext_readonly_colorと2組の<text_editor />ウィジェットを含みます。

A. "Chat History Editor"と名づけられたウィジェット

<text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false"
	follows="left|top|right|bottom" font="SansSerif" height="74" left="5"
	max_length="2147483647" mouse_opaque="true" name="Chat History Editor"
	text_color="ChatHistoryTextColor" text_readonly_color="ChatHistoryTextColor" width="299"
	bg_readonly_color="ChatHistoryBgColor"
	bg_writeable_color="ChatHistoryBgColor"
	word_wrap="true" />

B. "Chat History Editor with mute"と名づけられたウィジェット

<text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false"
	follows="left|top|right|bottom" font="SansSerif" height="74" left="5"
	max_length="2147483647" mouse_opaque="true"
	name="Chat History Editor with mute" text_color="ChatHistoryTextColor"
	text_readonly_color="ChatHistoryTextColor" width="300" word_wrap="true" 
	bg_readonly_color="ChatHistoryBgColor"
	bg_writeable_color="ChatHistoryBgColor"/>

サイズ変更との関連

このフォルダ内のXMLファイルにはフロート、パネル、その他のUIウィジェットの大きさ(width=, height=)の設定もまたあります。

ほとんどのコメントパラメータは、ここに一覧化されています。(作成中):

共通パラメータ

name

必須です。 この要素のXML名です。この名前は、あなたが編集しているフローターに固有でなければなりません。

• 重要: 上記で述べられたように、ローカライゼーションのことを考慮にいれて、XML要素を名称変更しないでください。要素名の多くはビューアによって調べられます。ビューアが予期していた要素名を見つけることが出来ない場合、クラッシュするでしょう。

String: name="input_first_name"

width

必須です。 ピクセルでの要素の幅です。

テキストでは、クリック可能なエリアのように、有効なテキストを定義します。テキスト要素の幅がテキストを表示するのに十分ではない場合、テキストの一部が切り取られたように省略されるでしょう。これはあなたがビューアをローカライズするときに多分広げるべきでしょう。

ほとんどのほかの要素では、ボタン、アイコン、パネル、テキストエリア、その他のような要素のサイズを記述します。

• ヒント: ビューアの全XML要素の矩形を見てみましょう。Advanced menu > UI > Debug Views

Integer: width="140"

height

必須です。 ピクセルでの要素の高さです。

テキストでは、クリック可能なエリアのように、有効なテキストを定義します。テキスト要素の高さがテキストを表示するのに十分でない場合、テキストの一部が切り取られたように省略されるでしょう。これはあなたがビューアをローカライズするときに多分広げるべきでしょう。

ほとんどのほかの要素では、ボタン、アイコン、パネル、テキストエリア、その他のような要素のサイズを記述します。

Integer: height="24"

left

任意です。 コンテナと相対的に、要素の寸法の左端位置のx地点を設定します。正の値と負の値が認められています。

Integer: left="6"

right

任意です。 コンテナと相対的に、要素の寸法の右端位置のx地点を設定します。正の値と負の値が認められています。何かの右側に一直線にするのが最善の方法です。たとえば、幅500をフローターに付与して、ボタンをフローターに右詰で加えたいなら、フローターの右側から10ピクセル離して、ボタンの右端を置くので、490をrightに設定します。

Integer: right="6"

left_delta

任意です。 前の要素と相対的に、要素の寸法の左端位置のx地点を設定します。正の値と負の値が認められています。前の要素と現在の要素を左詰めにするのが最善の方法です。たとえば、幅100をボタンBに付与し、幅50を前のボタンAに付与して要素間距離を6とすると、ボタンAの左側から106ピクセル離してボタンBの左側を置くので、-106をleft_deltaに設定すればいいのです。私達は左側に動かすには負の数値を、右側に動かすには正の数値を使います。

Integer: left_delta="-106"

right_delta

任意です。 前の要素と相対的に、要素の寸法の右端位置のx地点を設定します。正の値と負の値が認められています。前の要素と現在の要素を右詰めにするのが最善の方法です。たとえば、幅100をボタンBに付与し、幅50を前のボタンAに付与して要素間距離を6とすると、ボタンAの左側から106ピクセル離してボタンBの左端を置くので、106をleft_deltaに設定すればいいのです。

Integer: left_delta="106"

bottom

任意です。 コンテナと相対的に、要素の寸法の下端位置のy地点を設定します。正の値と負の値が認められています。たとえば、300の高さをフロータに付与して、タイトルを20ピクセル高くしたいなら、フロータの上端から40ピクセル離してタイトルの下端を置くので、bottomに計算結果を設定しなければなりません

Integer: bottom="--"(タイトル本来の高さをふまえた別途計算が必要です。）

bottom_delta

任意です。 前の要素と相対的に、要素の寸法の下端位置のy地点を設定します。正の値と負の値が認められています。

Integer: bottom_delta="260"

follows

任意です。 含んでいる要素がサイズ変更された時に追従して各端を設定します。指定する全ての端は、動的にサイズ変更できるエレメント自身とコンテナに変更の追従をもたらします。

Values: left, top, right, bottom. 複数のString値が同時に使用しているパイプラインです。

以下の例は、フローターのタイトルが設計されているかのように、左と上の両方を追従することを要素に設定します。 String: follows="left|top"

ボタンパラメータ

scale_image

任意です。 コンテナ（フローター）がサイズを変更されるように、ボタン画像のサイズを変更するかどうか指定します。1.18では、全てのボタン画像はサイズが32x128に及ばないように、プロパティがtrueと設定していました。

Boolean: scale_image="true"

label

任意です。 ラベルはボタンの面上のテキストです。指定されたラベルがないと（そしてimage_overlayが定義されてない）、ボタンは"Button"とラベル付けされるでしょう。

String: label="Click Me!"

label_selected

任意です。 ラベルは'オン'状態へ押されるときの、ボタンの面上のテキストです。このプロパティを省略した場合、ボタンの表記は labelのままです。 String: label_selected="I've been clicked."

font

(製作中)

font_style

任意です。 テキストのスタイルです。複数のスタイルセレクションが可能です。1.18.xより、スタイルオプションは以下の通りになります。

• normal: 選択されたフォントのスタイルを標準として適用します。（例えば、SansSerifBoldは適用された太字スタイルです。）
• bold: テキストを太字にします。
• italic: テキストをイタリック文字にします。
• underline: テキストに下線を引きます。
• drop_shadow: テキスト下部に古いスタイルの1pxの黒いオフセットをつけます。
• drop_shadow_soft: テキスト下部に新しいスタイルの3pxのぼかした影のオフセットをつけます。

String: font_style="bold|underline|drop_shadow_soft"

halign

(作成中)

image_unselected

任意です。 非選択になった（押されていない）ボタンと有効状態のボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_unselected="btn_square_32x128.tga"

image_selected

任意です。 選択された（押された）ボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_selected="btn_square-down_32x128.tga"

image_hover_selected

任意です。 選択された（押された）ボタンとマウスが乗っている状態のボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_unselected="btn_square-down-hover_32x128.tga"

image_hover_unselected

任意です。 非選択になった（押されていない）ボタンとマウスが乗っている状態のボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_unselected="btn_square-up-hover_32x128.tga"

image_disabled

任意です。 無効になっている状態のボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_unselected="btn_square-disabled_32x128.tga"

image_disabled_selected

任意です。 無効になっている状態のボタンと選択された（押された）ボタンの、標準の絵を上書きします。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。標準では、ボタンの絵は指定されたボタンサイズに適応するように伸縮されます。

String: image_unselected="btn_square-down-disabled_32x128.tga"

image_overlay

任意です。ボタンにオーバーレイイメージを適用します。ボタンの絵は適用するようにサイズが変更されるでしょう。1.18.xでは、これらのアイコンは最小縮小結果が標準の高さの24pxで、最大は16px高くなるようになるでしょう。テキストは使っても使わなくても可能です。絵はSecond Life アプリケーションフォルダ内..\skins\texturesに（MacではパッケージのContents/MacOS/Resources/skins/textures内部に）配置されなければいけません。絵はUUIDを割り当てられてtextures.xmlにもまた指名される必要があります。位置オプションはimage_overlay_alignmentを見ましょう。

String: image_overlay="icn_media-play_16.tga"

image_overlay_alignment

任意です。 image_overlayアイコンの位置を設定します。

Values:

• left: ボタン上の絵を左寄せします。この基準はDazzle仕様でのテキストと新しいボタン絵に用いられます。
• right: ボタン上の絵を右寄せします。
• center: ボタン上の絵を中央寄せします。この基準はDazzle仕様でのテキストと新しいボタン絵に用いられます。

String: image_overlay_alignment="left"

line_editor parameters

bevel_style

• none
• in
• out
• bright
• line
• texture

関連項目

• Dazzle Tutorial Part 1 Yukiko Omegamu作。
• 1.20 "Retro" skin sneak-preview Thraxis Epsilon作。
  • あなたの選んだzipファイルを解凍します。"app_settings"と"skins"の2つのフォルダになるでしょう。SecondLifeReleaseCandidateプログラムのフォルダ(Windowsでは C:\Program Files\SecondLifeReleaseCandidate\)にこれら2つのフォルダをコピーします。
    • "Retro" skin download - このzipファイルは、1.20の"Dazzle"の標準に上書きする暗めの画像テクスチャとカスタムのcolors.xmlファイルを含んでいます。
    • Skin to revert back to Dazzle Skin - このzipファイルは1.20の再インストールいらずで1.20標準に戻したい人のための、"Dazzle look"画像テクスチャと空のcolors.xmlファイルを含んでいます。
• Classic_lookに1.20から戻す McCabe Maxsted作。
  • クラシックスキンダウンロード
• 異なる透過度のチャットウィンドウ