Header
スキンとアドオン

[ Shareazaスキンホームに戻る ]

リモートスキンの作成

リモートスキンの作成は、Mr.Potato Headで遊ぶのと同じようなものです(訳注：アメリカの子供用の玩具で、喩えて言うなら立体福笑い)。まず背景画像(顔)を設定し、その上にアンカーを配置して、全てのメディアや帯域幅等の部品(目、鼻、口等)を取り付けます。リモートではメディア・帯域幅の為の機能を制御することができます。リモートでは全てのカスタマイズが可能であり、Shareazaの機能を好きなだけ搭載することができます。

このセクションではリモートの作成をステップバイステップで学ぶことができます。 また、ここではあなたがShareazaスキンの基本的な知識を持っていることと仮定します。 リモートスキンを作成する前に、windowskin要素とmanifest要素の項をあらかじめ読んでおいて下さい。 しかしながらあなたが一刻も早くリモートスキンを作成したい場合、このチュートリアルが必要な要素の分かり易い使用例になっていますので参考にして下さい。 さらに説明が欲しい場合は太字の赤いテキストを探して下さい。 それでは始めましょう(´∇｀)

最初に.xmlファイルに次のようなanchors(アンカー)とparts(部品)を追加します:

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://www.shareaza.com/"
 email="Me@myemail.com"
 version="1.0"
 type="skin"
 language="en"
 />
<windowSkins>
<windowSkin>
</windowSkin>
</windowSkins>
</skin>

ここでは、あなたのテキストファイルにこれをコピーし、そのmanifestフィールドを編集することを推奨します。

ここに全てのmanifest要素の簡単な説明があります。

  • Name - リモート名
  • Author - リモートの作者名
  • Description - リモートに関する説明文(例：これは最小帯域幅コントローラーです)
  • Link - このリモートに関する詳しい情報や、他のリモートコレクションを得られるホームページのURL
  • E-mail - リモートのバグ報告や詳しい情報を得るための連絡先であるEメールアドレス
  • Version - バージョンを表す番号で、新しいバージョンでは数が増分されます(例：1、1.1、1.2等)
  • Type - ここはいつもskinに設定されます
  • Language - もし英語なら"en"に設定されます

次に背景画像を設定します。次のステップで設定を行います:

  • あなたのリモート画像の.bmpファイルへのパスを設定します
  • "CremoteWnd"(リモートウィンドウ)として対象のウィンドウを設定します
  • あなたのリモートの背景(<part name="Background")が占める領域(これはx、y、 幅、高さで指定します)

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://www.shareaza.com/"
 email="Me@my_email.com"
 version="1.0"
 type="skin"
 language="en"
 />
 
<windowSkins>
 
 <windowSkin>
 
 
 <image type="image" path="MyRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 </parts>
 
 
 </windowSkin>
 
        
</windowSkins>
 
</skin>

    

  

  
アンカー

  
現在あなたのリモートは背景画像を持っていて、これからいくつかのボタンをアンカーにぴったりと貼り付けていきます。アンカーはShareazaにリモートウィンドウ上の何処にボタン等の部品を描画するかを示します。一方、これらの部品はリモートの背景にx、y、幅、高さの座標で設置されます。ここにアンカーのリストと説明があります:

  

    
 
      アンカー
      説明
    

    
 
      StatusText
      曲名や経過時間、帯域幅等を表示する領域
    

    
 
      History
      帯域幅の履歴表示
    

    
 
      FlowTx
      出力帯域表示
    

    
 
      FlowRx
      入力帯域表示
    

    
 
      MediaSeekTrack
      メディアのシークトラック
    

    
 
      MediaVolTrack
      メディアのボリュームトラック
    

    
 
      ScalerTrack
      帯域制限用のスケーラトラック
    

    
 
      MediaStatePlaying
      メディア再生時のグラフィカルな"再生"アイコンの領域
    

    
 
      MediaStatePaused
      メディア一時停止時のグラフィカルな"一時停止"アイコンの領域
    

    
 
      MediaStateStopped
      メディア停止時のグラフィカルな"停止"アイコンの領域
    

    
 
      _ID_TRAY_OPEN
      システムトレイ時にShareazaを復元します
    

    
 
      _ID_MONITOR_CLOSE
      リモートを閉じます
    

    
 
      _ID_NETWORK_SEARCH
      新規検索タブを開きます
    

    
 
      _ID_TOOLS_DOWNLOAD
      torrentダウンロードウィンドウを開きます
    

    
 
      _ID_TAB_LIBRARY
      ライブラリタブを開きます
    

    
 
      _ID_MEDIA_PLAY
      再生ボタン
    

    
 
      _ID_MEDIA_PAUSE
      一時停止ボタン
    

    
 
      _ID_MEDIA_STOP
      メディアボタン
    

    
 
      _ID_MEDIA_PREVIOUS
      前へボタン
    

    
 
      _ID_MEDIA_NEXT
      次へボタン
    

    
 
      _ID_MEDIA_MUTE
      ミュートボタン
    

  

  
Shareazaのどのような機能もリモートに据え付けることができます。 さらに多くの機能を探すにはdefault-en.xmlを調べて下さい。 このファイルはskinフォルダに存在するLanguagesフォルダで見つかります。 あなたのアンカーセクションはどのように見えますか？ 少し覘いてみてください。

  

    
 
      
<anchors>
 
<anchor name="StatusText" rect="69,46,262,20"/>
 
<anchor name="History" rect="70,27,208,13"/>
 
<anchor name="FlowTx" rect="292,27,12,13"/>
 
<anchor name="FlowRx" rect="319,27,12,13"/>
 
        
<anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
<anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
<anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
<anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
<anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
        
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
<anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
<anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
<anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
        
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
<anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
</anchors>

    

  

  
部品

  
次に、ボタンのアップ、ホバー、ダウン、無効状態の設定をします。ここにボタンの状態の追加方法があります:

  

    
 
      部品
      説明
    

    
 
      _ID_MEDIA_STOP.Up
      通常(アップ)状態のストップボタン
    

    
 
      _ID_MEDIA_STOP.Hover
      マウスが上に来た状態のストップボタン
    

    
 
      _ID_MEDIA_STOP.Down
      押下状態のストップボタン
    

    
 
      _ID_MEDIA_STOP.Disabled
      無効状態のストップボタン(メディアプレーヤーOFF)
    

  

  
全ての部品でこれらの状態を持つことができます。 リモートにマウスが上に来た時に"hover(ホバー)"状態がペイントされます。 ボタンが押された時には、"down(ダウン)"状態がペイントされます。 もちろん、これらの部品はアンカーが付随する場合にだけペイントされます。 もし停止状態を追加したいなら以下のアンカーと部品が必要になります。

  

    
 
      
<anchors>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
</anchors>
 
<parts>
 
        
  <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
        
  <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
</parts>

    

  

  
いくつかの興味深いポイントがあります:

  
    
    
  • 再生と一時停止のアンカーを同じ領域に置き、無効状態の部品を除外して下さい。音楽再生中は一時停止ボタンが表示され、音楽が一時停止/停止中は再生ボタンが表示されます。
    • 
    
  • 再生のために無効状態を除外します。そうすればメディアプレイヤーが閉じる/空の時に、再生ボタンはメディアファイルを開くボタンとして機能します。
    • 
    
  • 履歴/フロー部品では、下部からペイントされる画像を持つには"1"を使用し、上部からペイントされる画像を持つには"2"を使用します(例：帯域バーの上端部)。
    • 
  

  
ここに例としてparts(アップ、ダウン、無効、ホバーボタン状態)セクションがありますので参照して下さい。

  

    
 
      
<parts>
 
<part name="Background" rect="0,0,341,125"/>
 
<part name="HistoryTx1" rect="6,150,208,13"/>
 
<part name="HistoryRx1" rect="6,131,208,13"/>
 
<part name="FlowTx1" rect="228,131,12,13"/>
 
        
<part name="FlowRx1" rect="255,131,12,13"/>
 
<part name="MediaSeekTab" rect="159,210,23,11"/>
 
<part name="MediaSeekBar" rect="209,210,92,10"/>
 
<part name="MediaVolTab" rect="140,210,9,17"/>
 
<part name="MediaVolBar" rect="159,221,58,17"/>
 
<part name="ScalerTab" rect="224,224,9,9"/>
 
        
<part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
<part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
<part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
<part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
<part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
<part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
        
<part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
<part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
        
<part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
<part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
        
<part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
<part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
<part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
        
<part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
        
</parts>

    

  

  
フォント

  
次にtext-caption(テキストの見出し)を設定する必要があり、それはStatusTextアンカー内に現れるフォントとスタイルを設定します。 これは曲名や時間、帯域等に使用されます。

  
    
    
  • Face - フォントフェース名(例: "Tahoma")
    • 
    
  • Size - フォントサイズ(例: "8")
    • 
    
  • Weight - フォントウェイト。定数か1～1000迄の間の整数値。"normal"や"bold" 等を指定することも出来ます。
    • 
    
  • Colour - html形式でのStatusTextの色
    • 
  

  

    
 
      
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>

    

  

  
リージョン

  
最後に、リージョンを使用することでリモートをどんな形にでも指定できます。 もしregions(リージョン)要素が含まれていれば、 基本的な形を表す一つ以上の<shape>要素から構成され、 最終的に複雑なリージョンを形成する為に標準セット操作を使用することでそれらを一つに結合します。

  
例:

  

    
 
      
<region>
 
 <shape type="rectangle" rect="9,25,-11,-1"/>
 
 <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
 
</region>

    

  

  
それぞれの連続したシェイプは最終的なウィンドウの形を形成する為に、現在のリージョンに結合されます。各シェイプは以下を含みます:

  
    
    
  • type - シェイプの種類(下を参照)
    • 
    
  • rect - このシェイプの矩形領域はx1,y1,x2,y2形式で指定しなければなりません。負数はウィンドウの右または下の端と比例しています。その為"0,0,-1,-1"はウィンドウ全体を表します。
    • 
    
  • combine - 前のシェイプとこのシェイプの結合方法。最初のシェイプは結合属性を持つべきではありません
    • 
  

  
可能な結合モード:

  
    
    
  • or - このシェイプを前のシェイプに追加する(論理OR演算)
    • 
    
  • and - このシェイプと前のシェイプの重なり領域を得る(論理AND演算)
    • 
    
  • xor - 重なり領域ではなく、このシェイプまたは他のシェイプによって遮蔽される領域を得る(論理XOR演算)
    • 
    
  • diff - 前のシェイプからこのシェイプを減算します
    • 
  

  
可能なシェイプの種類:

  
    
    
  • rectangle - 矩形
    • 
    
  • ellipse - 楕円
    • 
    
  • roundRect - 角が丸い長方形。この種類のシェイプは角の曲線の幅と高さを表す、2つの整数パラメータであるsize という名前の拡張属性を持つ必要があります。例: size="16,20"
    • 
  

  
最終的な.XMLファイル

  

    
 
      
<?xml version="1.0" encoding="UTF-8"?>
 
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
 
<manifest name="My Remote"
 
 author="My name"
 
 description="A remote"
 
        
 link="http://www.shareaza.com/"
 
 email="Me@myemail.com"
 
 version="1.0"
 
 type="skin"
 
 language="en"
 
 />
 
        
<windowSkins>
 <windowSkin> 
 <image type="image" path="WMPRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
 <anchors>
 
 <anchor name="StatusText" rect="69,46,262,20"/>
 
        
 <anchor name="History" rect="70,27,208,13"/>
 
 <anchor name="FlowTx" rect="292,27,12,13"/>
 
 <anchor name="FlowRx" rect="319,27,12,13"/>
 
 <anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
 <anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
        
 <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
 <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
 <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
 <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
 <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
        
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
 <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
 <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
 </anchors>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 <part name="HistoryTx1" rect="6,150,208,13"/>
 
 <part name="HistoryRx1" rect="6,131,208,13"/>
 
 <part name="FlowTx1" rect="228,131,12,13"/>
 
 <part name="FlowRx1" rect="255,131,12,13"/>
 
        
 <part name="MediaSeekTab" rect="159,210,23,11"/>
 
 <part name="MediaSeekBar" rect="209,210,92,10"/>
 
 <part name="MediaVolTab" rect="140,210,9,17"/>
 
 <part name="MediaVolBar" rect="159,221,58,17"/>
 
 <part name="ScalerTab" rect="224,224,9,9"/>
 
 <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
        
 <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
 <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
 <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
 <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
        
 <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
        
 <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
        
 <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
        
 <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
 <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
  <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
 </parts>
 
        
 <caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/>
 
 <region>
 
  <shape type="rectangle"  rect="1,15,341,83"/>
 
  <shape type="roundrectangle" rect="319,0,332,1" combine="or" />
 
 </region>
 
 </windowSkin>
 
        
</windowSkins>
</skin>

    

  

  
グッドラック！　何か質問があるなら、スキンフォーラムでそれを投稿して下さい。(´∇｀)

  

 
[ 
    Shareazaスキンホームに戻る ]





      

    

    
  




Shareazaは多数の人達によって支えられています。謝礼ページを参照して下さい。

    
Visit Shareazaプロジェクトページ(SourceForge.net)

          

      SourceForge.netロゴ

      

      誇り高きオープンソース

  < トップ | 連絡先 >