Nrlaunchの猫スキンをClaunchに移植した話

tech 4880字：読了まで約9分2秒

Nrlaunchの猫スキンをClaunchに移植してみました。同じような作業をする方のために、備忘録を残しておきます。

Nrlaunchの猫スキンをClaunchに移植した話 アイキャッチ画像

Nrlaunchとは

Nrlaunchは 1999年にNoraneco氏によって開発されたボタン型ランチャーです。2005年まで更新されていましたが、現在は配布が停止されております。

ランチャーとはアプリケーションの起動をラクにするソフトです。Nrlaunchはショートカットボタンをあつめた画面がマウスの動きに反応して起動するランチャーで、昔から便利に使っていました。

マウスをくるくるっ！　と回転させてランチャーが起動する使用感はクセになります。

ランチャーソフトを使えば、デスクトップが散らかる問題を解決できます。また、スキン機能があり、好みの外観で動作させることができます。

Nrlaunchの猫スキン

Nrlaunch猫スキン「三毛猫」

この愛らしい猫スキンはtuz氏制作で、Plainz Style.で配布されているものです。

現在も使えるかWindows 11 Homeで試してみましたが、一応は大丈夫でした。

Claunchとは

更新が止まっているソフトを使い続けるのは問題があるので、代替を探しました。Claunchはぴょんきち氏によるソフトで、Nrlaunchと同じようなボタン型ランチャーです。

無料で使用でき、ボタンだけでなく、メニュー式での動作も可能です。

詳しくはベクターのレビューがあります。Vector： CLaunch - 新着ソフトレビュー

このページ自体が、すさまじい歴史的遺産ですね…

Nrlaunchで使っていた猫スキンを利用したく思い、移植をしてみることにしました。

スキンの移植

少し検索してみると…nrLaunch用スキンの移植方法 - CLaunch Wiki - atwiki（アットウィキ）に情報が見つかりました！ Nrlaunchの公式スキンを移植している人もおり、参考にできそうです。

必要な変更点をまとめてみると、以下のようになりますね。

  1. 画像ファイルの修正
    1. タブの画像加工
    2. ボタンの画像加工
    3. フォルダ展開メニュー画像の流用（※必須ではない）
  2. skin.ini⇒skin.xmlへの変換

tuz氏のスキン「三毛猫」を例として、スキンを移植していきたいと思います。

1.画像ファイルの修正

まず比較的簡単な画像ファイルの修正から取り掛かろうと思います。

タブ画像の修正

nrLaunch のタブ画像の並び順は

  1. 非アクティブ
  2. ホバー
  3. アクティブ
  4. 無効状態

Claunch の並び順は

  1. アクティブ
  2. アクティブホバー
  3. 非アクティブ
  4. 非アクティブホバー

nrLaunch の素材画像を Claunch の並び順に手動で並べ替える必要があります。 つまり、nrLaunch でいう 「3 → 2 → 1 → 2」の順で画像を描きなおします。 この加工はウィンドウズ付属のMSペイントを利用しました。

tab.bmpを開き、ペイントの表示メニューから「ルーラー」「グリッド線」を表示し、レイヤーを一枚増やします。

Claunchへの猫スキン移植(1)tab.bmp

そしてオリジナルの画像から上のレイヤーに順番通りにコピペしていけば完了です。

ボタン画像

ボタン画像は下1/4を切り取ればいいだけなのでもっと楽です。画像の縦サイズを1/4して、下からそのピクセル数を数えて目印をつけ、トリミングするだけです。

Claunchへの猫スキン移植(2)button.bmp

フォルダ展開メニュー画像

bar.bmpの上半分を切り取り、menu.bmpを作ります。 menu.bmpは上が非アクティブの背景、下がアクティブ時の背景です。 矢印などは画像を用意しなくてもOKですが、ある場合は流用してください、

Claunchへの猫スキン移植(3)menu.bmp

2.skin.ini⇒skin.xmlへの変換

かなり大変でした。スキンファイルの仕様（→CLaunch - Specifications of skin XML）はあるのですが、これを読み解いていくのがキツイ。

文字コードは文字コードはUTF-16(Little Endian)のみに対応しています。だそうなのでこれに合わせます。

とりあえずNrlaunch標準のEvergreenスキンを移植したファイル群からXMLファイルをもらってきました。コメントが書いてあったので助かる！

以下、猫スキン用のコードを貼っていきます。

1<?xml version="1.0" encoding="UTF-16" standalone="yes" ?>
2
3<!-- CLaunch Skin -->
4
5<skin title="NORA-MIKENEKO" author="TUZ" version="4.10">
6
7	<comment>nrLaunchスキンから移植 元はtuzさん制作「neko_MIKENEKO」</comment>
8	<!-- スキン全般設定 -->
9	<general tabPosition="top" clippingColor="#FF00FF" alphaChannel="false" sizeArea="6, 6, 6, 6"/>

コメントだけ書き換えておきます。あとはいじらなくてOK.

general

tabPosition=""
タブエリアの位置 "top""left""right""bottom" ボタンエリアに対する相対位置を指定します。
alphaChannel=""
アルファチャンネル使用指定"true""false"
パーツ画像のアルファチャンネルを使って透過させたい場合は、"true"を指定します。
※"true"指定時は以下の制限があります。
  • ANSI版では使用出来なくなります。
  • 画面色数が32bpp以外の環境では使用出来なくなります。
  • フォルダ展開メニューを半透明にすることは出来ません。
clippingColor=""
透過色"即値(HEX)"
パーツ画像に使われている透過色を指定します。
alphaChannel="true"の場合は指定不要です。
sizeArea=", , , ""
ウィンドウのサイズ(ボタン数)変更領域の幅を、"左辺, 上辺, 右辺, 底辺"の順に指定します。"即値(×4)" 
1	<!-- ウィンドウの背景 (画像属性は省略可能) -->
2	<background image="bg.bmp" left="1/1" top="1/1" width="1/1" height="1/1" method="stretch" border="0, 0, 0, 0">
3		<arrangement offset="1, 1, -1, -1"/>
4	</background>

とくに縮小・拡大などをしません

background

画像属性を省略すると、背景の無いウィンドウになります。

image=""
パーツ画像のファイル名"文字列"
BMP形式、およびPNG形式に対応します。
left=""
元画像内で使用する領域の左端座標"即値""n/分割数"
分数を指定すると、画像の横幅を「分母」で等分割した、「分子」番目の領域の左端になります。
top=""
元画像内で使用する領域の上端座標"即値""n/分割数"
分数を指定すると、画像の高さを「分母」で等分割した、「分子」番目の領域の上端になります。
width=""
元画像内で使用する領域の横幅"即値""n/分割数"
分数指定は、元画像の横幅に対する割合となり、"1/1"で画像全体の横幅になります。
height=""
元画像内で使用する領域の高さ"即値""n/分割数"
分数指定は、元画像の高さに対する割合となり、"1/1"で画像全体の高さになります。
method=""
パーツの描画方法"stretch""tile"
  • "stretch"は元画像を伸縮して描画先の領域サイズに合わせます。
  • "tile"は元画像を伸縮せず、描画先の領域内へ敷き詰めます。
border=", , , "
サイズ固定領域"即値(×4)"
元画像外周の、伸縮させない領域の幅を、"左辺, 上辺, 右辺, 底辺"の順に指定します。

arrangement

配置設定

offset=", , , "
ウィンドウ背景の領域座標を、基準パーツからのオフセット値で、"左辺, 上辺, 右辺, 底辺"の順に指定します。"即値(×4)"
  • 左辺：左フレーム右辺からのオフセット
  • 上辺：上フレーム底辺からのオフセット
  • 右辺：右フレーム左辺からのオフセット
  • 底辺：下フレーム上辺からのオフセット

frame

同じなので説明を省略します。 ※数値は猫スキン用に調整したものです。

 1	<!-- ウィンドウフレーム (画像属性は省略可能) -->
 2	<frame>
 3		<top image="top.bmp" left="0" top="0" width="1/1" height="1/2" method="stretch" border="21, 26, 25, 2">
 4			<arrangement height="ImageSize"/>
 5		</top>
 6		<left image="left.bmp" left="0" top="0" width="1/1" height="1/2" method="stretch" border="2, 0, 2, 0">
 7			<arrangement width="ImageSize"/>
 8		</left>
 9		<right image="right.bmp" left="0" top="0" width="1/1" height="1/2" method="stretch" border="2, 0, 2, 0">
10			<arrangement width="ImageSize"/>
11		</right>
12		<bottom image="bottom.bmp" left="0" top="2/2" width="1/1" height="1/2" method="stretch" border="10, 0, 10, 10">
13			<arrangement height="ImageSize"/>
14		</bottom>
15	</frame>

Buttons

数値は猫スキン用に調整しています。コントロール用ボタン群は猫スキンでは下部に来るのでBottomFrameを指定します。

 1	<!-- 閉じるボタン (要素自体を省略可能) -->
 2	<closebutton>
 3		<normal image="closebutton.bmp" left="0" top="1/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
 4		<hover image="closebutton.bmp" left="0" top="2/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
 5		<down image="closebutton.bmp" left="0" top="3/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
 6		<arrangement>
 7			<left base="BottomFrame" side="right" offset="-60"/>
 8			<top  base="BottomFrame" side="top" offset="0"/>
 9			<right width="ImageSize" base="" side="" offset=""/>
10			<bottom height="ImageSize" base="" side="" offset=""/>
11		</arrangement>
12	</closebutton>
13
14	<!-- ウィンドウロックボタン (要素自体を省略可能) -->
15	<lockbutton>
16		<normal image="clipbutton.bmp" left="0" top="1/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
17		<hover image="clipbutton.bmp" left="0" top="2/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
18		<down image="clipbutton.bmp" left="0" top="3/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
19		<downhover image="clipbutton.bmp" left="0" top="4/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
20		<arrangement>
21			<left base="BottomFrame" side="right" offset="-113"/>
22			<top base="BottomFrame" side="top" offset="0"/>
23			<right width="ImageSize" base="" side="" offset=""/>
24			<bottom height="ImageSize" base="" side="" offset=""/>
25		</arrangement>
26	</lockbutton>
27
28	<!-- 表示モード切替えボタン (要素自体を省略可能) -->
29	<modebutton>
30		<normal image="buttonbarbutton.bmp" left="0" top="1/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
31		<hover image="buttonbarbutton.bmp" left="0" top="2/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
32		<down image="buttonbarbutton.bmp" left="0" top="3/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
33		<downhover image="buttonbarbutton.bmp" left="0" top="4/4" width="1/1" height="1/4" method="stretch" border="0, 0, 0, 0"/>
34		<arrangement>
35			<left base="BottomFrame" side="right" offset="-166"/>
36			<top base="BottomFrame" side="top" offset="0"/>
37			<right width="ImageSize" base="" side="" offset=""/>
38			<bottom height="ImageSize" base="" side="" offset=""/>
39		</arrangement>
40	</modebutton>
image=""
パーツ画像のファイル名"文字列"
BMP形式、およびPNG形式に対応します。
left=""
元画像内で使用する領域の左端座標"即値""n/分割数"
分数を指定すると、画像の横幅を「分母」で等分割した、「分子」番目の領域の左端になります。
top=""
元画像内で使用する領域の上端座標"即値""n/分割数"
分数を指定すると、画像の高さを「分母」で等分割した、「分子」番目の領域の上端になります。
width=""
元画像内で使用する領域の横幅"即値""n/分割数"
分数指定は、元画像の横幅に対する割合となり、"1/1"で画像全体の横幅になります。
height=""
元画像内で使用する領域の高さ"即値""n/分割数"
分数指定は、元画像の高さに対する割合となり、"1/1"で画像全体の高さになります。
method=""
パーツの描画方法"stretch""tile"
  • "stretch"は元画像を伸縮して描画先の領域サイズに合わせます。
  • "tile"は元画像を伸縮せず、描画先の領域内へ敷き詰めます。
border=", , , "
サイズ固定領域"即値(×4)"
元画像外周の、伸縮させない領域の幅を、"左辺, 上辺, 右辺, 底辺"の順に指定します。

Caption

Nrlaunchのスキンのskin.iniから、「Captionの設定」のカラーを移しました。

 1	<!-- キャプション (画像属性は省略可能) -->
 2	<caption>
 3	<!--  キャプションに背景画像を表示する場合は、画像属性を指定してください↓
 4	<caption image="caption.png" left="0" top="0" width="1/1" height="1/1" method="stretch" border="0, 0, 0, 0">
 5	-->
 6		<arrangement>
 7			<left base="TopFrame" side="left" offset="24"/>
 8			<top base="TopFrame" side="top" offset="4"/>
 9			<right width="Variable" base="ModeButton" side="left" offset="-2"/>
10			<bottom height="Variable" base="TopFrame" side="bottom" offset="-1"/>
11		</arrangement>
12		<text fontFace="MS UI Gothic" fontSize="11" fontStyle="bold" shadow="none" color="#501000" shadowColor="#000000"/>
13	</caption>

Tab

Nrlaunchの「タブに関する設定」に色情報があるのでそれを流用します。

 1	<!-- タブエリア (画像属性は省略可能) -->
 2	<tabarea image="bg.bmp" left="0" top="0" width="1/1" height="1/1" method="stretch" border="2, 2, 2, 2">
 3		<arrangement offset="0, 0, 0, 0" margin="2, 2, 2, 2"/>
 4
 5		<!-- タブ (画像属性は必須) -->
 6		<tab image="tab.bmp" method="stretch" border="4, 4, 4, 4" pattern="1">
 7			<arrangement pitch="2, 2"/>
 8			<active>
 9				<text fontFace="MS UI Gothic" fontSize="9" fontStyle="normal" shadow="none" color="#501000" shadowColor="#000000">
10					<hover shadow="none" color="#FFFFFF" shadowColor="#000000"/>
11				</text>
12			</active>
13			<inactive>
14				<text fontFace="MS UI Gothic" fontSize="9" fontStyle="normal" shadow="none" color="#501000" shadowColor="#000000">
15					<hover shadow="none" color="#FFFFFF" shadowColor="#000000"/>
16				</text>
17			</inactive>
18		</tab>
19
20	</tabarea>

Button

 1	<!-- ボタンエリア (画像属性は省略可能) -->
 2	<buttonarea image="bg.bmp" left="0" top="0" width="1/1" height="1/1" method="stretch" border="0, 0, 0, 0">
 3		<arrangement offset="0, 0, 0, 0" margin="4, 4, 4, 4"/>
 4
 5		<!-- ボタン (画像属性は必須) -->
 6		<button image="button.bmp" method="stretch" border="10, 10, 10, 10" pattern="1">
 7			<arrangement pitch="2, 2" shiftHover="0, 0" shiftDown="1, 1"/>
 8			<text fontFace="MS UI Gothic" fontSize="8" fontStyle="normal" shadow="none" color="#501000" shadowColor="#000000">
 9				<hover shadow="none" color="#FFFFFF" shadowColor="#000000"/>
10			</text>
11		</button>
12
13		<!-- ボタンのロックマーカー (要素自体を省略可能) -->
14<!--		<lockmarker image="lockmarker.bmp" left="0" top="0" width="1/1" height="1/1" method="stretch" border="0, 0, 0, 0">
15			<arrangement zOrder="over" />
16arrangement
17zOrder=""           ロックマーカーの描画Z順位指定"under""over"
18		    "under"：アイコンの裏へ描画 "over"：アイコンの上から描画
19/
20		</lockmarker>-->
21	</buttonarea>

foldermenu

フォルダ展開メニューとその他です。 これはfoldermenuのバックグラウンドにbg.bmpの色と同色を指定しておきます。 あとはフォントの色をNrlaunchのskin.iniの「フォルダの階層表示に関する設定」と同じにしておきましょう。

 1	<!-- フォルダ展開メニュー (画像属性は必須) -->
 2	<foldermenu backColor="#ffffff">
 3		<normal image="menu.bmp" left="0" top="0" width="1/1" height="1/2" method="stretch" border="10, 10, 10, 10"/>
 4		<selected image="menu.bmp" left="0" top="2/2" width="1/1" height="1/2" method="stretch" border="10, 10, 10, 10"/>
 5		<arrangement margin="2" interval="4"/>
 6		<text fontFace="ＭＳ Ｐゴシック" fontSize="11" fontStyle="normal">
 7			<color normal="#501000" selected="#FFFFFF" disabled="#ACA899"/>
 8		</text>
 9	</foldermenu>
10</skin>

推奨設定です。要素自体を省略可能なので省略しました。

結果

Claunchスキン「MIKENEKO」表示

Claunchスキン「MIKENEKO」通常表示

これがモード1のボタン表示です。オリジナルでは操作用のボタン猫が4匹いますが、Claunchではマウス監視モードがないので、3匹に減っています。

Claunchスキン「MIKENEKO」フォルダ展開メニュー表示

Claunchスキン「MIKENEKO」フォルダ展開メニュー表示

モード2のメニュー風表示です。フォルダ展開メニューはこのようになります。

Claunchスキン「SIAMNEKO」表示

Claunchスキン「SIAMNEKO」モード1フォルダ展開メニュー表示

ほかの猫スキンも移植してみました。

Claunchスキン「SIAMNEKO」表示

Claunchスキン「SIAMNEKO」フォルダ展開メニュー表示

令和のPCでも猫ちゃんたちに会えて感無量です。 まだ猫スキンは二種類あるので、移植を進めていきたいですね！

関連記事