注意: Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。

移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。

Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。


レッスン 01


目標
Jalver の起動と終了。
初期画面設定・主画像表示データ作成。
一枚の写真の表示。






Jalver 起動と終了
 起動:
マイコンピュータやエクスプローラ等を利用して、ダウンロードした Jalver.jar を表示して、起動してください。
Windows の場合で、J2RE v 1.4.2_x が正しくインストールされていれば、ダブルクリックして起動できます。

画面左上に横長の棒のような物(メニューバー)が一つ表示されます。
これがJalverの本体です。

起動しない場合は、Java のインストール等をもう一度見直してください。


 終了:
メニューバーのファイル(F)を開いて、 終了(X)を選択します。





一枚の写真を表示する。
Lesson01 では、表示される画像データの中で中心となる画像(これを主画像といいます)を一枚だけ表示させる練習をします。
前回と同様にして、Jalver を起動します。
ファイル(F)-新規作成(N)を選択してください。
初期設定画面が表示されます。
Lesson01 で必要とする設定は「画像フォルダ」の指定と「Jalvam.jarフォルダ」の設定だけです。


初期設定画面で「画像フォルダ」を指定する。

Jalver では一つのデータを作成するための画像は全て同じフォルダの中に入っていなければなりません。
そして、その画像が入っているフォルダを初期設定で指定する必要があります。
ここで指定されていないフォルダ内の画像は使用する事ができません。

「画像フォルダ」ボタンを押してください。
フォルダ選択画面が表示されます。
Lesson01 で必要とする画像は Lesson01 というフォルダに入ってますから、そのフォルダを選択してください。
初期設定画面の画像フォルダに Lesson01 が記入されているのを確認してください。
初期設定画面で「Jalvam.jarファイル」を設定する。
Jalverで作成されたデータは、Jalvam.jar というソフトを使用して閲覧する事になります。
特別にJalvam.jarファイルを指定されず、Jalvam.jar ファイルが Jalver.jar と同じフォルダにある場合は、自動的にその Jalvam.jar が指定されますので、この設定を省略する事ができます。
ダウンロード後解凍して、素直に Jalver.jar を起動した場合には何もする必要がありません。
Javam.jarボタンの横に Jalvam.jar と記述されている事だけを確認してください。

Jalvam.jarボタンの横にJalvam.jar と言う記述がない場合や使用するJalvam.jarの位置を変更する場合にだけ、初期設定画面でJalvam.jarボタンを押して、ファイル選択画面で、閲覧に使用する Jalvam.jar (現バージョンでは Jalvam.jar)を指定します。

初期設定で指定されたJalvam.jar の保存場所は、jalver.ini に記録されますので、使用するJalvam.jarの位置を変更しない限り、初回に一度だけ指定するだけで次回からの指定は省略する事ができます。

タイトルを設定する
初期設定画面での設定が終わると、タイトル名の入力が求められます。
これから作成しようとする主画像データのタイトル名を入力してください。
タイトルはアルバムの「しおり」のようなもので、画像グループを引っ張りだしたり、くっつけたりする時に使用されます
ここでは、Lesson01 と入力して了解を押してください。
「取消し」を選択すると横長棒(メニューバー)に戻ります。


データ作成画面
左側に黒い画像表示画面(ステージ画面と呼ぶ)と右側に入力欄が沢山付いている画面(これをデータ画面と呼ぶ)が表示されます。

ステージ画面の下に表示されている横棒のような物(これをツールバーと呼ぶ)は、左端をドラッグ(windowsならば、マウスの左ボタンを押した状態でズルズル引っ張る事)させて、適当な場所に移動させてください。

データ画面では、「画面表示データ」「スポットデータ」「コメントデータ」と書かれた部分(これをタブと呼ぶ)があって、それぞれのタブを押すと設定内容の異なる画面(これをパネルと呼ぶ)が表示されます。

「画像表示データ」→「画像表示タブ」を押す→「画像表示パネル」の表示
「スポットデータ」→「スポットデータタブ」を押す→「スポットパネル」の表示
「コメントデータ」→「コメントデータタブ」を押す→「コメントデータタブ」の表示

新規作成の場合は、「主画像」ボタン以外は何も選択できない状態になっています。
最初に、この「主画像」ボタンを押して画像ファイルを選択する事になります、
「主画像」ボタンを押して、ファイル選択画面を表示させます。
表示させようとする画像(Lesson01では、さっき初期設定画面の画像フォルダで設定したLesson01というフォルダに入っている samp10.jpg を選択します。
主画像ボタン横に選択した画像ファイル名が表示されている事を確認してください。
中央に主画像と書かれた画像が左側のステージ画面に、そのデータが右側のデータ画面・画像表示パネルに表示されます。
初期状態では、画像は左端に、データは 描画領域 pX=0, pY=0,幅=320,高=240 になっているはずです。


主画像の表示位置と表示領域を設定する。
今、左上に表示されている主画像は、その表示位置を変える事ができます。

「表示領域」ボタンを押して主画像の表示位置や領域の設定を指示します。(ステージ画面では黄色の枠がつく)。
主画像の表示位置や領域はステージ画面とデータ画面の両方でできます。


主画像位置設定
主画像を表示する位置(画像の左上端の位置)は、ステージ画面・データ画面の両方で設定できます。

 ステージ画面での設定
画像の四つ角にカーソルを合わせ(形状が四方向カーソルになる)、ドラッグします。
画像がステージ画面から出てしまうような移動はできません。
画像を移動させると、データ画面で 表示位置のpX(x座標)pY(y座標)の数値が変化するのを確認して位置を見てください。


 データ画面での設定
表示領域の pX pY に直接数値を入力する事によって画像の位置を設定できます。
入力欄をクリックして、数値を入力後、Enterを押して入力を完了してください。
入力の完了は Tabを押す、他の入力欄をクリックしてもできます。
画像がステージ画面から出てしまうような数値は入力できません。
入力された数値に従って、ステージ画面の画像位置が変化するのを確認してください。


主画像表示横幅設定
主画像表示の横幅と高さで囲まれた画像の見える部分を表示領域といいます。
主画像を表示する横幅は、ステージ画面・データ画面の両方で設定できます。
 ステージ画面での設定
画像の左右の縦線中央にカーソルを合わせ(形状が左右カーソルになる)、ドラッグします。
画像がステージ画面から出でたり、画像の幅を超える設定はできません。
横幅を変更すると、データ画面で 幅の数値が変化するのを確認してください。
 データ画面での設定
表示領域の 幅 に直接数値を入力する事によって画像の位置を設定できます。
入力欄をクリックして、数値を入力後、Enterを押して入力を完了してください。
入力の完了は Tabを押す、他の入力欄をクリックしてもできます。
画像がステージ画面から出でたり、画像の幅を超える設定はできません。
入力された数値に従って、ステージ画面の表示幅が変化するのを確認してください。


主画像高さ設定
画像の表示高さは、画像の高さに固定され設定できません。

 黄色い枠線上のドラッグ位置(カーソルの形状が変わる位置)で枠をドラッグする事によって、表示位置を変えたり、表示幅を変えたりする事ができますので、色々動かしてみてください。


Lesson01 最終設定
Lesson01 では画像を中央に画像全体を表示します。
pX(x座標)の入力欄をクリックして選択して、160 を入力後、Enter を押す。
pY(y座標)の入力欄をクリックして選択して、120 を入力後、Enter を押す。
幅の入力欄をクリックして、320 を入力後、Enter を押す。

それ以外のデータは色々触ってもいいですが、レッスンの範囲外ですので、元に戻してください。


データの保存
データの作成が終わったのでデータを保存します。
メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson01 のフォルダを選択して、ファイル名を Lesson01.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
Jalver用のデータの拡張子は必ず「.jvam」とします。 ファイル名やフォルダは自由なのですが、(まだ慣れていないので)ここでは必ず Lesson01 フォルダの中にLesson01.jvam と正確に入力して保存してください。


データ閲覧用のHTMLファイル作成
Jalver で作成したデータは、 HTMLファイルを作成して、通常のブラウザ(Java対応)を使用して閲覧できます。
Java対応ブラウザのJava使用が不許可になっている場合は、マイコンピュータのコントロールパネルの中にある「Java Plug-in」を起動して、使用しているブラウザのJava使用を許可しておいてください。



閲覧HTMLファイルの作成
閲覧用のHTMLファイルを作成するためには、ディスクに保存してある閲覧したいデータを Jalver に読み込んである必要があります。
また、Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「上書き保存」した後で作成する必要があります。

ステージ画面に「 Lesson01 主画像 」と書かれた画像が表示されている事を確認して、 メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
閲覧HTML設定画面が表示されます。


 「HTML保存フォルダ選択」(ボタン)
フォルダ選択画面で、HTMLファイルを保存するフォルダを選択します。
初期値では、作成したデータ(Lesson01.jvam) が保存されているフォルダが指定されます。


 「HTMLファイル名入力」(テキスト入力)
作成するHTMLファイルの名前(拡張子「.html」)を入力します。
初期値では、 viewJalver.html という名前が指定されています。


 「Jalvam.jar選択」(ボタン)
ファイル選択画面で、データを閲覧するソフトの Jalvam.jar ファイルを指定します。
既に初期設定画面で設定済みの場合は指定する必要はありません。
Jalvam.jar と記述されている事を確認してください。

ここでは、あまり難しい事を考えずに、「了解」ボタンだけを押してください。

これでどういう事が起こるかというと、Lesson01フォルダの中に viewJalver.html というHTMLファイルが作成されます。

Jalver の終了
メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。


作成したデータを閲覧する
いよいよ作成したデータを見る番になってきました。

エクスプロ−ラやマイコンピュータを使用して、Lesson01フォルダを開いて、中にある viewJalver.html を起動(通常はダブルクリック)させてください。
ブラウザの起動とJavaの準備をするために、表示されるまでちょっと時間がかかるかもしれません。(初回の表示だとホントに待つかもしれません)が、このような画面が見れれば合格です。

これがブラウザで見れないという場合は、先に進んでもあまり効果はありませんので、データ保存のファイル名や、閲覧用HTML作成手順をもう一度確かめて、再度挑戦して見てください。




もう一度起動する
Jalver.jar をもう一度起動させて、jalver.ini が作成されているかどうかを確認します。
Jalver.jar を起動(通常はダブルクリック)させてください。
前回、Lesson01.jvam というデータファイルを作成しているのであれば、前回と同じデータを読込むかどうかの確認画面が表示されるはずです。
確認画面で「はい」を押して、前回作成したデータが表示される事と、初期設定画面で Jalvam.jarファイルの記述がされている事を確認して終了してください。