スキンの作り方・ボタンの配置スキン作りの最も重要なところともいえるボタンの配置について詳しくやってみましょう。 なお今回も前回使った白い画像を使ってやっていきます。 ◆ 準備ボタン配置の説明をする前に前回のコマンドリストに少しアイテムを加えておきましょう。 前回のように一つではお話になりませんからね。とりあえず合計4個のアイテムをコマンドリストに登録しましょう。 次のようにコマンドリストを作りました。 アイテム名やコマンドはどうでもいいです。 ◆ スキンを反映するための操作スキンを作っているときスキンの結果を確かめるために何度もスキンを適用させることが多いです。 いちいち設定ダイアログを開いていると大変なのでもっと楽にスキンを反映させる操作を説明しておきます。バーをCtrlを押しながら右クリックするとメニューが出てくるのでその中の「Re-Apply Skin for Bar」を選択します。 これだけですぐにスキンが反映されます。 ◆ *Button コマンドボタンの配置を指定するコマンドは*Buttonコマンドです。今回はこれを中心に話していきます。 前回少し説明した*Skinや*Barコマンドについては今回やりません。もちろんスキンファイルにはこれらのコマンドが必要ですが 前回と全く同じとします。◆ キーワード ID*buttonコマンドのキーワードの中で最も重要なものは「ID」です。ちなみにPowerProのスクリプトでは大文字、小文字を区別しないので 「ID」とか「id」とか書いても全く同じです。このキーワードはコマンドリストの何番目のアイテムをその*buttonコマンドに適用するか を指定するためのものです。例えば「*button id 0」とすればその*buttonコマンドは一番最初のアイテムに適用されます。 IDは0から始まることに注意してください。「*button id 4」とすればコマンドリストの上から5番目のアイテムになります。前回キーワードの順番は問われないと書きましたがこのキーワードIDは*buttonのすぐ後に来なければなりません。そして必ず必要なキーワードです。 とにかく使ってみましょう。次の例を見れば大体理解できると思います。前回作ったスキンをそのまま使うことにします。 スキンファイル「white.txt」の中身を次の文に書き換えてください。 *skin *bar shape "white.bmp" *button id 0 left 20 top 5 *button id 1 left 20 top 20 *button id 2 left 53 top 80 *button id 3 left 80 top 1514つのボタン全てについて一つ一つ座標を指定しています。このスキンを適用すると  このようになります。IDとボタンの位置をよく比較してみてください。しっかりそれぞれのボタンが指定した位置に来ていることがわかると思います。 しかし実際のところこのようにきっちりIDを指定することはあまりないです。なぜならキーワードIDは「next」という便利な値を とることができるからです。この「next」はコマンドリストのアイテムの順番通りにスキンファイルを書くときに非常に便利です。 確かにIDできっちりあのボタンはこの座標に配置する・・・と書いてもいいのですが、「次のアイテムってID何だっけ？」とか考えるのが 面倒です。そこで次のIDを自動計算してくれる「next」という値を使います。例えば前の*buttuon コマンドで「id 0」と書いてあって、 次の*buttonコマンドで「id next」と書いたとするとそのコマンドのidは1となります。さらに次の*buttonコマンドで「id next」と書くこともできます。 コマンドリストの順番通りに順々に属性を指定していくならこの「next」を使う方が楽です。 ただしコマンドリストの順番通りに自動的にボタンが割り当てられるのでスキンファイルに書く*Buttonコマンドの順番が重要になることを忘れないで下さい。 このnextを使うと先のスクリプトは次のように書けます。 *button id 0 left 20 top 5 *button id next left 20 top 20 *button id next left 53 top 80 *button id next left 80 top 151*skinや*barコマンドは省略しました（以降省略します）。最初のボタンだけはわかりやすいようにIDを直接指定してあります。 これだけではあまりありがたみがないですが。 ◆ 位置が指定されていないボタンは？ここで少しわき道へそれますが先のスキンファイルでは全てのボタンに対し位置が指定してありました。 それでは先のスクリプトの最後の*buttonコマンドを削除するとどうなるのでしょう？つまり次のようにしてしまいます。*button id 0 left 20 top 5 *button id next left 20 top 20 *button id next left 53 top 80こうすると4番目のボタン「Paint」に対する*buttonコマンドがないことになります。つまり位置が指定されていません。 この場合「Paint」というボタンはどうなってしまうのでしょうか？実際にスキンを適用すると次のようになります。  「Paint」ボタンが変なところに配置されていますね。実は位置を指定しなかった場合PowerProが勝手に場所を決めて 好き勝手に配置してしまいます。大体直前のボタンの下の左端に配置されます。このように勝手に配置されて非常にかっこ悪いことになります。 位置が指定されないボタンがないように注意しましょう。 ◆ キーワード repeat今までIDで一つ一つボタンの属性を指定してきました。じゃあボタンが10個や20個あったらどうすんだ？いちいち一つ一つ属性を指定していくのか？ それは非常に面倒です。そこである規則通りに複数のボタンを並べてくれるキーワード「repeat」を使います。repeatを使う前にもう少しアイテムの数を増やしておきましょう。とりあえず10個にしてみます。次のようにリストを作りました。  アイテム名やコマンドは適当でいいです。面倒なのでAやBなどにしておきました。 このように10個とか多くなると一つ一つ位置を指定するのは面倒です。そこでrepeatを使って規則正しく配置してしまいましょう。 とりあえず次の*buttonコマンドを使って適用させてください。 *button id 0 repeat "10 1 0 0" left 20 top 5 width 60このスキンファイルを使うと次のようになります。  たった一行で10個のボタンが綺麗に配置されました。repeatに続く値は少し複雑なので具体的に試しながらやっていきましょう。 まずこの行のIDはリピートする最初のボタンのIDです。今回最初のボタンからrepeatを適用するので「id 0」としています。 leftやtopはリピートする最初のボタンの位置です。この位置を基準にして繰り返し配置されます。 他のキーワードに「width」というのが新しく使われています。これは単にボタンの幅を指定するものです。 なぜ「width」を指定するかというと、repeatで繰り返し配置された全てのボタンの幅や高さは一番最初のボタンに合わせられてしまうからです。 widthを指定しなかった場合自動的にボタン名の幅に合わせられます。つまり今回の場合全てのボタンが「Main」ボタンの幅に合わせられてしまい、 「Main」より長い名前を持つ「Explorer」などのボタン名が途中で切れてしまうからです。ためしにwidthをなくしてスキンを適用してみてください。 それでは肝心なrepeatがとる値について説明しましょう。先の行のrepeatは「repeat "10 1 0 0"」のように値として「"10 1 0 0"」をとっています。 このようにrepeatは次のような形をとります。 repeat "Count ColumnNum GapX GapY"repeatの値は4つの数字でできています。一番目の数字Countはリピート数を指定します。先の例なら 10個のボタンを繰り返し配置させているので10となっています。二番目の数字ColumnNumは列数を指定するものです。 先のは1列に配置しているので1となっています。三番目の数字GapXは水平方向のボタンとボタンの間のギャップ（間隔）を ピクセル単位で指定します。そして四番目の数字GapYは垂直方向のボタンとボタンの間のギャップをピクセル単位で指定します。 GapXとGapYはわかりにくいのであとで具体的にいろいろ変えてやってみましょう。 まずは二番目の数字のColumnNumを変えていろいろ試してみましょう。
見ればわかると思いますがColumnNumの数だけ列が作られます。ボタンの順番に注意してください。左から右へボタンが並べられます。 次に三番目の数字GapXについて見てみましょう。とりあえずわかりやすいように列は3列でやります。 GapXは水平方向のボタンとボタンのギャップを指定するものです。これは列数が2以上のときに意味があります。 GapXの値をいろいろ変えたときの例を次に示します。なおわかりやすいようにコマンドリストプロパティのBarsタブで「Flat」のチェックを はずして表示しています。こうするとボタンの大きさがわかりやすくなります。
並べてみると違いがわかりますね。水平方向のボタンとボタンの間隔がそれぞれ違います。 最後に四番目のGapYについて見てみましょう。これはGapXと同じようにボタン間隔を指定するものですが水平方向ではなく垂直方向です。 GapYの値をいろいろ変えた時の例を次に示します。わかりやすいように全て1列でやります。
垂直方向のボタンの間が指定したピクセル数空いているのがわかると思います。 多くの場合リピート数は大きな数にしておきます。ボタンの数に合わせてぴったりリピート数を指定する必要はありません。 逆に少ないと困りますが。リピート後にまた別のボタンを配置したいときはIDにnextを使うと便利でしょう。 また値の一番目の数字Countには「ToSubbar」という特別な値を指定することもできます。 これを指定するとサブバーの始まりである「*Format StartSubbar」にあたるまで繰り返します。サブバーを使うときに便利です。 以上のことを理解していればほぼ自在にボタンの配置ができるはずです。いろいろ自分で絵を描いてボタンを配置してみてください。 他にも魅力的な効果などをつけることができますがこれはあとで説明したいと思います。 前へ（はじめに） トップに戻る 次へ（その他の基本事項） |
