注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
Lesson10
- 目標
- データ画面のボタン・ラベルのアイコンをカスタマイズする。
Jalver では、ボタンやアイコンをカスタマイズできます。
データ作成作業には直接に関係ありませんが、興味があれば好きなアイコンを作って、自分専用のソフトにする事ができます。
アイコンは JPG/JPEG/PNGファイルのみで作成して、アイコン専用の一つのフォルダに入れてください。
- base10.jvam を読み込む。
- Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson10 フォルダに入っている base10.jvam を選択する。
ステージ画面で、「Lesson10 主画像01」という画像が表示されたのを確認してください。
このデータは、Jalver のデータ画面を表示するために用意しただけで、データ内容に意味はありません。
- カスタマイズツールの起動
- メニューバーのツール(T)-アイコン カスタマイズ(I)を選択してカスタマイズ画面を表示させます。
リストボックスが表示される左側をカスタマイズ設定画面、ボタンが多くある左側をカスタマイズ選択画面といいます。
- アイコンフォルダの指定
- フォルダ(F)-開く(O) を選択するか、画面左側の「アイコンフォルダ」ボタンを押します。
フォルダ選択画面で、Lesson10 フォルダの中にある testIcon フォルダを選択して、「開く」を押します。
アイコンデータは、各フォルダ毎に専用の定義ファイル(jverIcon.txt)で管理され、フォルダを選択すると自動的に読み込まれます。
新規に作成する場合(指定したフォルダの中にjverIcon.txt がない場合)は、自動的に作成されます。
アイコンフォルダを選択すると、フォルダの中に入っている JPG/JPEGファイルが左側のカスタマイズ設定画面のリストボックスに一覧表示されている事を確認してください。
- カスタマイズボタンの選択
- 右側のカスタマイズ選択画面で、これからカスタマイズしようとするボタンを選択します。
ここでカスタマイズしようと思っているのは、スポットデータパネルの「スポット0・1・2」ボタンと「スポット0・1・2設定チェックボックス」です。
主画像アイコンタブを押して主画像アイコンパネルを表示させ、スポットデータタブを押して、スポットアイコンパネルを表示させます。
スポット0ボタンを押してください。
左側のカスタマイズ設定画面に 「スポット0選択(ボタン)」と「ボタン標準アイコン」という表示がされました。これを設定項目と呼びます。
スポット0ボタンの標準アイコンを設定中だと言う意味です。
- アイコン画像の選択
- ボタン型のアイコンの場合は、通常表示されるアイコンと、ボタンにカーソルを乗せた時のアイコンとボタンを押した時の3つのアイコンが設定できます。
アイコンリストの「spot00.jpg」を選択してください。
リストの左側にリストで選択したアイコンの画像が表示されます。アイコンの画像が表示される場所をアイコン表示ボックスと呼ぶ事にします。
- アイコンの設定
- アイコンリストのアイコン表示ボックスの画像をとラッグして、ボタン標準アイコンのアイコン表示ボックスにドロップしてください。
ボタン標準アイコンのアイコン表示ボックスと、右側のアイコン選択画面のスポット0ボタン位置にドロップしたアイコンと同じ画像が表示されたのを確認してください。
ボタン型アイコンの場合は最初の標準アイコンを設定すると、上乗アイコン・押下アイコンの設定が可能になります。
同様にして二つのアイコンを設定します。
- ボタン上乗アイコンの設定
- アイコンリストで 「spot01.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン上乗アイコンのアイコン表示ボックスでドロップする。
- ボタン押下アイコンの設定
- アイコンリストで 「spot02.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン押下アイコンのアイコン表示ボックスでドロップする。
これでボタンアイコンの設定は完了です。
アイコン選択画面でスポット0ボタンを押して動作を確認してください。
標準アイコンを設定して、上乗アイコンや押下アイコンを設定しないと設定しない部分には標準アイコンが機能します。ボタン型の場合は少なくとも押下アイコンは用意しておいてください。(押したかどうかわからなくなります)
続けてスポット1ボタン・スポット2ボタンを設定します。
- スポット1ボタンの設定
- カスタマイズボタンの選択
- スポットアイコンパネルの「スポット1」ボタンを押す。
- 標準アイコンの設定
- アイコンリストで「spot10.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をとラッグして、ボタン標準アイコンのアイコン表示ボックスにドロップする。
- ボタン上乗アイコンの設定
- アイコンリストで 「spot11.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン上乗アイコンのアイコン表示ボックスでドロップする。
- ボタン押下アイコンの設定
- アイコンリストで 「spot12.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン押下アイコンのアイコン表示ボックスでドロップする。
- スポット2ボタンの設定
- カスタマイズボタンの選択
- スポットアイコンパネルの「スポット2」ボタンを押す。
- 標準アイコンの設定
- アイコンリストで「spot20.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をとラッグして、ボタン標準アイコンのアイコン表示ボックスにドロップする。
- ボタン上乗アイコンの設定
- アイコンリストで 「spot21.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン上乗アイコンのアイコン表示ボックスでドロップする。
- ボタン押下アイコンの設定
- アイコンリストで 「spot22.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ボタン押下アイコンのアイコン表示ボックスでドロップする。
- スポット0−設定チェックボックス
- スポット設定チェックボックスの選択
- チェックボックス型のアイコンは、チェックオフ・アイコンとチェックオン・アイコンの2つです。
カスタマイズ選択画面でスポット0ボタンを押してください。
「スポット0-設定」と書かれたボタンが表示されます。
この部分は、スポット1ボタンを押すと「スポット1-設定」、スポット2ボタンを押すと「スポット2-設定」と表示されます。
スポット0ボタンに対応したチェックボックスをカスタマイズするので、スポット0ボタンを押して、表示された「スポット0-設定」を押してください。
カスタマイズ設定画面の設定項目に「スポット0-設定チェックボックス」と表示された事を確認してください。
- チェックオフアイコンの設定
- アイコンリストで 「spotChk00.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオフアイコンのアイコン表示ボックスでドロップする。
- チェックオンアイコンの設定
- チェックオフアイコンの設定が完了するとチェックオンアイコンが設定できるようになります。
アイコンリストで 「spotChk01.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオンアイコンのアイコン表示ボックスでドロップする。
これでスポット0のチェックボックスのカスタマイズは完了です。
同様にしてスポット1・スポット2のチェックボックスもカスタマイズします。
- スポット1−設定チェックボックス
- スポット設定チェックボックスの選択
- カスタマイズ選択画面でスポット1ボタンを押す。
「スポット1-設定」ボタンを押す。
カスタマイズ設定画面の設定項目に「スポット1-設定チェックボックス」と表示された事を確認する。
- チェックオフアイコンの設定
- アイコンリストで 「spotChk10.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオフアイコンのアイコン表示ボックスでドロップする。
- チェックオンアイコンの設定
- アイコンリストで 「spotChk11.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオンアイコンのアイコン表示ボックスでドロップする。
これでスポット1のチェックボックスのカスタマイズは完了です。
- スポット2−設定チェックボックス
- スポット設定チェックボックスの選択
- カスタマイズ選択画面でスポット2ボタンを押す。
「スポット2-設定」ボタンを押す。
カスタマイズ設定画面の設定項目に「スポット2-設定チェックボックス」と表示された事を確認する。
- チェックオフアイコンの設定
- アイコンリストで 「spotChk20.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオフアイコンのアイコン表示ボックスでドロップする。
- チェックオンアイコンの設定
- アイコンリストで 「spotChk21.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、チェックオンアイコンのアイコン表示ボックスでドロップする。
これでスポット1のチェックボックスのカスタマイズは完了です。
- ラベルアイコン
- 座標(pX pY)と領域(幅 高さ)のアイコンをカスタマイズします。
これはラベル型と言って、アイコンは一つだけです。
- x座標のラベル変更
- ラベルの選択
- カスタマイズ選択画面で pX と書かれたボタンを押します。
カスタマイズ設定画面の設定項目に「X座標(ラベル)」と表示される事を確認してください。
アイコンリストで 「xPoint.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ラベルアイコンのアイコン表示ボックスでドロップする。
これでx座標ラベルのカスタマイズは完了です。
同様にしてy座標、幅、高さもカスタマイズします。
- y座標のラベル変更
- ラベルの選択
- カスタマイズ選択画面で pY と書かれたボタンを押します。
カスタマイズ設定画面の設定項目に「y座標(ラベル)」と表示される事を確認する。
アイコンリストで 「yPoint.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ラベルアイコンのアイコン表示ボックスでドロップする。
これでy座標ラベルのカスタマイズは完了です。
- 幅のラベル変更
- ラベルの選択
- カスタマイズ選択画面で 幅 と書かれたボタンを押します。
カスタマイズ設定画面の設定項目に「幅(ラベル)」と表示される事を確認する。
アイコンリストで 「xSize.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ラベルアイコンのアイコン表示ボックスでドロップする。
これで幅ラベルのカスタマイズは完了です。
- 高さのラベル変更
- ラベルの選択
- カスタマイズ選択画面で 高 と書かれたボタンを押します。
カスタマイズ設定画面の設定項目に「高(ラベル)」と表示される事を確認する。
アイコンリストで 「ySize.jpg」を選択する。
アイコンリストのアイコン表示ボックスの画像をドラッグして、ラベルアイコンのアイコン表示ボックスでドロップする。
これで高ラベルのカスタマイズは完了です。
- カスタマイズデータの保存
- カスタマイズのデータを保存します。保存しない場合は、設定は無効になります。
カスタマイズ画面のメニューバーで ファイル(F)-保存(S) を選択します。
Lesson10フォルダの testIcon フォルダ 中に jverIcon.txt というファイル名で保存されます。
- カスタマイズの終了
- カスタマイズ画面のメニューバーでファイル(F)-終了(X) を選択します。
- カスタマイズの確認
- アイコンの変更は Jalver の初期設定で設定します。
- 初期設定の変更
- Jalver のメニューバーで ファイル(F)-初期設定(B) を選択して、初期設定画面を表示させます。
「アイコンフォルダ」ボタンを押して、フォルダ選択画面が表示されたら、Lesson10フォルダの testIcon フォルダを選択してください。
「アイコンフォルダ」ボタン横に testIcon と書かれている事を確認して、「了解」ボタンを押します。
- アイコン変更の確認
- データ画面で、主画像データパネルのスポットデータパネルを開いて、カスタマイズされたアイコンが表示されている事を確認してください。
- 同一項目変更の確認
- データ画面の主画像パネル、副画像パネルの色々のパネルを開いてみてください。
x座標、y座標、幅、高さのような同じラベル項目は全て変更れているはずです。
主画像パネルと副画像パネルののスポットデータパネルのアイコンも変更されている事を確認してください。
カスタマイズのデータは、Jalver 起動時の jalver.ini に書き込まれ次回の起動時にも引き継がれます。
次回起動時時、カスタマイズされた状態でデータ作成ができます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
- カスタマイズ内容を見る
- Leson10.jvam を読み込む。
- Jalver を起動して、メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson10 フォルダに入っている Lesson10.jvam を選択する。
データ作成画面のスポットデータパネルを開いて、カスタマイズされている状態なのかどうかを確認してください。
- カスタマイズの変更
- アイコンのカスタマイズを変更する時は、初期設定の「アイコンフォルダ」ボタンでカスタマイズ用のアイコンフォルダを変更してください。
サンプル用のアイコン画像が sampIcon に入ってますので、初期設定のアイコンフォルダ指定で sampIcon のフォルダを指定して、一度使ってみてください。
これで Lesson10 は終了です。