スキンの作り方・はじめに


◆ PowerProのスキン

PowerProのバーは非常に地味です。単なる棒です。やっぱりもっとかっこよく、便利に使いたいよなぁと思っている人も多いと思います。 そこでPowerProのスキン機能を使ってみましょう。

PowerProのスキンは画像1枚があればなんでもスキンになります。そして自由度が非常に高いです。 例えばマウスがボタンの上にきたらホバー画像を表示したり、カーソルを変えたり、音まで鳴らすことができます。 つまり自分に合わせた自分だけのスキンを作成することができるのです。

ただ自由度が高い代わりスキン作りは少し複雑です（他のソフトのスキンを作ったことが無いのでよくわかりませんが）。 また汎用性があまり無いです。汎用性が無いというのは人が作ったスキンはあまり使えないということです。 PowerProのスキン作りの基本はボタンの配置です。バー上のボタンの構成や使い方は人によって違うでしょう。 スキンを作る人は当然自分が使いたいバーの構成を考えながらスキンを作ります。 しかし他の人のバーの使い方は違います。つまりそのスキンは自分以外ほとんど使えない可能性が高いのです。

それはとりあえず置いておいてPowerProでは本当に自分だけのスキンというものを作ることができます。 やはり自分で作ってこそのPowerProのスキンです。スキンのヘルプを見てもよくわからんという人も多いでしょう。 そこでスキン作りについて説明していきたいと思います（といっても私も全てわかっているわけではないのでわかっていることだけ 説明したいと思います)。

※ちなみに私は絵がかけないので適当に素材を作ってやっていきます。

◆ スキンの構成

スキンはどのように作られるのでしょうか。当然スキンはファイルという形で存在します。 そのファイルというのは画像ファイル（BMP）、カーソル、WAVEファイルなどが使われます。 しかしこれらのファイルだけあってもスキンはできません。それらのファイルをどのように使うかという スキンの構造を記したものが必要なのです。

その役目をするのがスキンファイルです。といってもこれは単なるテキストファイルです。 このテキストファイルにあの画像をここに使って、このボタンはここに配置するよ・・・などということを書くのです。 スキンを作るというのはほとんどこのスキンファイルを作ることです。


◆ とりあえず作る

ああだこうだ言っててもよくわからないと思うのでとりあえず作ってみましょう。 PowerProのスキン作りの基本はボタンの配置です。これが最も重要でありわかりにくいところでもあると思います。

ところでさっきから言ってる「ボタン」って何？と思われてる方もいると思います。 ボタンというのは単にバー上のボタンのことです。スキンというのはあくまでバーの上にかぶせるだけの物です。 基本はコマンドリストで作ったバーであることを忘れないで下さい。スキンで指定できるのは それらバー上のボタンの位置です。

さて早速作ってみるのですがまずスキンを適用するバーを用意しなければなりません。 とりあえずなんかバーを作ってください。ここでは名前は「skin」とでも付けておきます。 そしてバーの構成は次のようにしてください。



一つだけアイテムがあるだけです。コマンド等は適当でいいです。バーを表示させることを忘れないで下さい。 あと「Command List Properties」の「Bars」タブの「Border」のチェックははずしておいた方がいいでしょう。

次にスキンの土台として使う一枚の画像を用意します。今回最初に使う画像は次です。



はい、単なる真っ白な画像です。まわりに黒い線が見えますがそれもこの画像に描かれているものです。 「こんなのスキンじゃないよ!」と思うかもしれませんが 今回はとりあえず作ってみるだけなのでこれでやります。他の画像を使ってもかまいません。

この画像をビットマップ形式(bmp)で保存してもらいたいのですが保存する場所はPowerProのフォルダの中の「skins」フォルダの中です。 実はスキンを入れておく場所は決まっています。それがPowerProのフォルダ(通常はC:\Program Files\PowerPro)の中の「skins」フォルダです。 もしなかったら作ってください。このskinsフォルダの中にスキンを入れておくわけですが、Skinsフォルダの中にさらにサブフォルダを作って 整理して入れておいてもかまいません。できればサブフォルダを作ってそれぞれのスキンを一つ一つまとめて入れて管理した方がいいでしょう。

というわけでskinsフォルダの中に今回は「white」とでも名前をつけたフォルダを作り、先の白い画像を保存してください。 ビットマップしか使えないようなのでbmp形式で保存してください。今回は「white.bmp」というファイル名にします。

次にスキンファイルを作ります。これは単なるテキストファイルなのでメモ帳を立ち上げて何も記入せずに「名前をつけて保存」から 先の「skins->white」フォルダの中に「white.txt」という名前で保存します。スキンファイルと先の画像は同じフォルダになくては なりません。これからこのファイルにスキンの構成を記述していきます。

さてこのスキンファイルに次の文をコピーアンドペーストしてください。 

*skin
*bar shape "white.bmp"
*button id 0 left 20 top 5
とりあえず内容はわからなくていいです。このファイルを保存したらいよいよスキンを適用します。 設定ダイアログ(Configure)を表示し「Command Lists」タブを表示します。右上の方にある「Set skin」をクリックし スキン選択ダイアログを表示します。ドロップダウンメニューから先ほど自分で作ったスキンファイルを選択してください。 もしここに自分で作ったスキンファイルが表示されていなかったらスキンファイルの位置が間違っている可能性があります。 「skins」フォルダの中にあることを確認してください。そしてOKを押し続け設定ダイアログを閉じます。すると・・・



ついにスキンが適用されました！たったこれだけですが大きな一歩です。


◆ スキンファイルの中身

さて先のスキンファイルに貼り付けた文についてみていきましょう。まず最初の「*skin」というのはこれがスキンファイルであることを示します。 なので最初に「*skin」は必ず必要です。この「*skin」のようにアスタリスク（*）が付くものは特殊なキーワードです。Built-in コマンドに 似ていますね。この*skinを忘れてしまうとそのテキストファイルがスキンファイルとして認識されないので忘れないようにしましょう。

次の行の「*bar」は主にバーに関する設定を記述するキーワードです。その前にここで少しキーワードとその値について説明しておきましょう。

アスタリスクの付くキーワードには*Skin, *Bar, *Font, *Buttondefault, *Buttonの5種類があります。 これらをコマンドと呼ぶことにします（実際には何と言うのか知りません。Built-in コマンドとは違うので注意してください）。 このコマンドの後にさらにキーワードをとります。つまりスキンファイルの一行一行は全て 

command   keyword value  keyword value ...
のような形をとります。わかりにくいので具体例を見てみましょう。例えば先のスキンファイルで 

*button id 0 left 20 top 5
というのがありました。この最初にあるアスタリスクつきの「*button」がコマンドです。 基本的に一行に一つだけのコマンドを書く形をとります。*buttonに続く最初の文字「id」がキーワードです。 そしてキーワード「id」に続く数字がその直前のキーワードの「値」ということになります。 つまり「 id 0 」とあれば「id = 0」という意味になります。このようにキーワードと値はセットにして使います。 ただし中には値をとらないキーワードもあります（no3dなど）。

さて「0」の次にある「left」もキーワードです。その後ろにある「20」というのがキーワードleftの値です。 このようにキーワードは値とセットにしながらコマンドのあとにいくつも並べることができます。 大体予想が付くでしょうが後ろから2番目にある「top」もキーワードでその値は「5」となります。

なんとなくコマンド、キーワード、値の関係がわかったでしょうか？ちなみにキーワードを書く順番は特に決まっていません。 ただし*buttonのキーワード「id」は最初に書かなくてはいけませんが。例えば先の行は次のように書いても同じです。 

*button id 0 top 5 left 20
キーワードtopとleftを入れ替えました。これでも同じです。ただしidは最初に無くてはならないので注意してください。


それではスキンファイルの内容に戻りましょう。2行目の*barの行を見てください。*barコマンドは主にバーに関する設定をします。 *barの後にキーワード「shape」がありその値は「white.bmp」です。なんとなくわかると思いますがshapeはスキンとして使う土台となる 画像を指定するキーワードです。たったこれだけで好きな画像をバーにかぶせることができます。これはかならず使うので覚えておいてください。

3行目をみてください。*buttonコマンドはボタンの配置を指示するものです。PowerProのスキン作りではこのコマンドを書くことが 中心になります。そしてこのコマンドは扱いが少し難しいです。まあ今は簡単なことしかやらないのでそう心配しなくてもいいです。

最初のキーワード「id」はバー上のボタンのIDです。つまりバー上のボタンを指定するための数字です。idが0ならば コマンドリストの一番最初のアイテムの事を指します。2番目のアイテムなら「id 1」となります。0から始まることに注意してください。

idは0ですからコマンドリストの最初のアイテム、つまり「最初のボタン」というボタンがこのコマンドに対応することになります。 このようにidを指定して特定のボタンの位置や効果を指定するのです。次にキーワード「left」はボタンの位置をスキン上の座標で水平方向位置(x)で指定するものです。 なおスキン上の座標は下図のように右に向かってx軸があり、下方向に向かってy軸があります。



leftの値は20なのでx座標は20となります。次のキーワード「top」はボタンの垂直方向位置(y)を指定するものです。topの値は5なのでy座標は5となります。 つまりこの行「*button id 0 top 5 left 20」をまとめると「idが0のボタン（最初のアイテム）を座標(20,5)に配置する」ということを 指示していたのです。ちなみにボタンは四角い形をしています。このボタンのどこが座標(20,5)に合わせられるかというと四角いボタンの左上の点です（下図）。



これだけならそれほど難しくありませんね。実際にスキンを適用した結果をみると大体座標(20,5)あたりにボタンが 配置されているのがわかると思います。topやleftの値をいろいろ変えて試してみてください。


まだ何もやってませんが長くなったので今回はこれくらいにします。次はボタンの配置についてもっと詳しくやる予定です。

トップへ戻る　　次へ（ボタンの配置）