提供サイト スライドショー公開JAVAスクリプト画像定義ファイル作成ツール (統合版)  ver.1.00
 
    目次

 下記項目をクリックすると各項目のページ/ブックマークにジャンプします

1 ツールへ
 ボタンをクリックして下さい 
  ツールは別ウインドウで開きます。終了するには ブラウザの終了ボタン X アイコンで閉じてください。

2 概念
      スライドショーとツールの理解を容易にしていただくために概念を表しています。

3 スライドショー作成手順

 3.1 統合版ツール 手順概要
  スライドショーを実行しツールを利用するための手順の概要を説明しています。

              スライドショーを実行するための詳細手順は 3.2の公開スクリプトページをご覧ください。

 3.2 スライドショー 公開スクリプトページへ 
スライドショー実行の説明ページです。 ( WEBサイトに接続します )

4  ダウンロード
   統合版ツールのダウンロード方法

              スライドショーを実行するためのシステムのダウンロードは 3.2の公開スクリプトページから。

5 統合版ツール 使用方法

6 初期値設定方法
  統合版ツール起動時の初期値の変更方法です。

7 FAQ 良くある質問 (統合版)

  
 スライドショー全体のFAQは [ こちらから ; ダウロード版ではリンクしません。 WEBサイトからご覧ください ]

8 改訂履歴

2 概念 


  この章ではスライドショーのこのツールを使用してデータを作成し、スライドショーを実行するのを理解が容易になるよう、主要な概念を記します。

 ・ スライドショーを実行(表示)するには、

   (1) スライドショー用HTMLファイル  auto_slide01.htm
   (2) スライドショーの表示処理を記述したスクリプトファイル   auto_slide.js
   (3) スライドショー用 ボタン等の画像
   (4) 表示する画像ファイル  ***.jpg ***.gif 等
   (5) 表示する画像のファイル名や、説明文、実行する条件を記述した 画像定義ファイル  slide_data.js
  が必要です。

   (1)〜(3)は別途、スクリプト公開のページからダウンロードします。
   (4)は貴方が表示したい画像のファイルを用意します。
   (5)のファイルの内容をこのツールで簡単に作成し、ファイルに保存します。

 ・ スライドショーを実行するための 画像定義ファイルは 2つのデータにより構成されています。

  (1) 実行条件データ : 画面を構成するボタンや枠、時間設定など

  (2) 画像データ    : 画像ファイル名・説明文や送り時間、変化禁止など画像毎の設定

 ・ 2つのデータはそれぞれのツールで作成編集します。

  (1) 実行条件設定ツール : 元の画像定義ファイル slide_data.jsからそのままの状態を取り込んだり
                 ボタンで設定できるツールで入力します
  (2) 画像データ編集ツール : いろいろな方法のツールを準備しているので使い分けて作業できます
                 2つ以上のツールを途中で切り替えて、目的に添った作業が簡単にできます

 注意) このツールでは、パソコン上のデータを直接書き換えることはありません
   出力で表示されたテキスト情報を、コピーし画像定義ファイルに貼付、保存することで完成します
   従って仮のデータで操作の練習をしても他への影響はありません。気軽に試して下さい。
   入力ツールでは 「入力完了」ボタンをクリックしないと設定したデータは内部に保存されません。
   入力完了しないでページを切り替えると、以前の状態のままで、設定したデータが反映されません。
3 スライドショー作成手順
.

目次へ

 3.1 統合版ツール 手順概要

 1) 4.1 ダウンロードの項から ツールをダウンロードします

   常時接続環境の場合はダウンロードせずオンラインでも使用できます。 1 ツールへ ボタンをクリック。

 2) ダウンロードしたファイルは 自動解凍方式ですので適当なフォルダに入れて解凍します

   (ファイルをダブルクリック) フォルダ位置は任意の位置で結構です。

 3) 解凍した tool_sys フォルダの index.htm ファイルを起動(クリック)します。

 4) するとオフラインでこのページが開きます。

 5) 必要に応じ、この行以下の説明をお読みください。

   Windowsの操作に慣れておられる方は 1項のツールへ をクリックして初期画面にジャンプしてください

   ツールは別ウインドウで開きます。 終了時はブラウザの終了ボタン Xでウインドウを閉じてください。

 6) ツールのバーの右上の ヘルプ、初期設定画面の簡易ヘルプを参考にして操作方法をご覧ください

   各種ツールのイメージ画像の上(小さな黄色の点滅)にカーソルを置くとその簡易ヘルプに切替わります

   機能説明が複数ページの場合は 1・・・/全ページ数 と表示されるのでページ切替ボタンで前後します

 7) 初期設定画面の画像定義ロード ボタンをクリックすると、サンプルのスライドショーのデータをロードするので

   各種ツールで入力・編集・出力の練習ができます。 プレビューでは編集結果でスライドショーを表示できます。

 8) 実際に あなたのスライドショー用データを編集するには...

  8.1) 画像を準備し tool_slide01 フォルダ内に一時的に保存します

  8.2) 各種ツールでファイル名、説明文、画像送り時間、切替効果の入力設定をします。

  8.3) プレビューで実際のスライドショーでの表示、関連ページHTML出力等で入力を確認できます。

  8.4) 画像定義データ出力 で画像定義ファイルデータを表示し、 テキストエリア内の文字をコピーし、

   slide_data.js ファイルに貼り付け保存します。

  8.5) 実際にサーバーにアップロードするスライドショーのフォルダに、画像ファイルと作成した
 slide_data.js を

   移動し完了です。

 9) 既に作成したスライドショーを編集するには...

  9.1) 既に存在するスライドショーの画像と定義ファイル
 slide_data.js をコピーしtool_slide01 フォルダ内に

   保存します。

   この場合、サンプル画像の定義ファイルに上書きとなります。 必要ならバックアップしておいてください。

  9.2) 以降 8)項と同様手順で編集・保存します。

4  ダウンロード
.

目次へ

   tool_sys100.exe をクリックし、任意のフォルダに保存してください。 ( 約 467kB )

   保存した tool_sys100.exe をクリックすると自動的に解凍します。
5 ツール使用方法
.

目次へ

各種ツールの一覧と機能
 ツール 入力ツールの編集対象データ その他
実行条件 画像ファイル名 説明文・
条件
 初期設定・メニュー クリア クリア データのロード/クリアと各ツールへのジャンプ、データ入力完/未表示
規定値からロード *1)
 メニューバー 各ツールへのジャンプ、 データ入力完(青点灯)/未表示(赤点滅) 画像の保存されているフォルダへのパス *1) を指定します。初期値は tool_slide01 フォルダ


実行条件設定 入力・編集 スライドショーの実行条件の編集をします
リスト入力・編集   入力・編集 入力・編集 画像ファイル名、説明文、画像送り時間、切替効果を画像ごとに1行の入力範囲で編集。行の挿入・削除・コピー貼付・入替ができます 
連番ファイル名入力   入力   固定文字+連番 例)img01.jpg・・・を一括してファイル名入力します。
画像貼付入力   入力 \tool_sys\tools\tools_inp_gazouhari.htmにあらかじめ使用する画像をホームページ編集ソフトで貼付けておき、実行すると画像のファイル名を入力できます


画像定義データ出力 入力・編集された画像定義データがテキストエリアに表示されるので、全ての文字をコピーし slide_data.js ファイルに貼り付け保存します。
プレビュー 編集中のデータでスライドショーを実行します。画像と説明文、切替の設定確認に利用します。文字色やボタン等の設定は反映されません。 画像送り切替ボタンのクリックで送り時間が短縮(1秒)されます。
関連ページHTML出力 スライドショーの補助をするページのHTML文を出力します。
 ・ 画像の一覧表示 ; 画像と説明文の確認
 ・ HTML表示     : 画像一覧ページのHTML文を表示
 ・ サムネイルHTML : サムネイルページを設ける場合のHTML文を表示します。
 HELP 各ツール・機能のヘルプを表示します。 初期設定の簡易HELPを一覧で表示します。

 *1) 初期値とは tool_slide01 フォルダ/規定値とは、その中の slide_data.jsファイルのデータです

 *2) 編集対象データが 入力・編集 の機能は 編集中データがツールを起動時読み込まれます。

   編集中データとは、初期設定での画像定義データロード で読み込んだデータも対象となるので既に作成した
   スライドショーデータを編集することができます。

   入力完了ボタンをクリックすることで内部データ領域に記憶されます。

.

6 初期値設定方法
.

目次へ

 起動時にツールで設定されている初期値を下記方法で変更できます。
毎回設定し直す手間が省けるので必要部分を編集してください。
フォルダ名\
ファイル名
機能 編集方法/内容 初期値
tool_sys\tools\
tools_menu.htm
画像フォルダ指定 変数 var pic_dir の値を変更する " ../../tool_slide01/"
tool_sys\tools\
tools_inp_cond.htm
実行条件設定初期定義 ホームページ編集ソフトでフォームの初期値を変更する ツール起動時のフォーム内容参照
tool_slide01\
slide_data.js
画像定義データ読込内容 初期設定に使用する条件で作成した スライドショー用 画像定義ファイルを上書きする tool_slide01\slide_data.js の内容( サンプル画像スライドショー )
tool_slide01\
tools_inp_renban.htm
連番入力初期定義 ホームページ編集ソフトでフォームの初期値を変更する ツール起動時のフォーム内容参照
tool_slide01\
tools_out_itiran.htm
関連ページHTML出力
 画像枠指定
 サムネイル条件
ホームページ編集ソフトでフォームの初期値を変更する ツール起動時のフォーム内容参照

7 FAQ 良くある質問 ( 統合版 )
.

目次へ

* 各ツールをどういう順番に、使い分け
 Q) 新規にスライドショーを作成する場合の基本的に使うツールの種類と順番は ?
  A) 実行条件設定ツールか画像定義データのロードで実行条件を決め、ライン入力ツールで画像ファイル名、
    説明文等を入力します。 プレビューで確認後 HTML出力ツールで表示した定義データをコピーし
    slide_data.js ファイルに貼り付け、保存します。
.
 Q) 既に作成したスライドショーのデータを編集するには ?
  A) 元のスライドショーの画像と slide_data.js を tool_slide01フォルダに保存し
    初期設定で画像定義データロード → ライン入力ツールで編集 します。
.
* 既に作成したスライドショーの編集
 Q) 既に作成したスライドショーのデータに新たな画像を追加するには ?
  A) 元のスライドショーの画像と slide_data.js と追加する画像を tool_slide01フォルダに保存し
    初期設定で画像定義データロード で既に作成したデータを吸い上げ → ライン入力ツール編集します。

    元の画像の前に新たな画像を表示する場合は ;
      No.1の選択ボタンをクリックし点滅させ、挿入ボタンで行追加 → 行に新画像のデータを入力 →
      入力完了ボタンで記憶し、HTML出力で保存します。 
      複数追加の場合挿入・入力を繰り返します。

    元の画像の後に新たな画像を表示する場合は ;
      行移動の 最終へ ボタンをクリックし、最後の行にデータを入力し入力完了ボタンで記憶し、
      HTML出力で保存します。
      複数追加の場合入力・完了ボタンを繰り返します。
.
* フォルダについて
 Q) メニューバーの画像保存フォルダとは ?
  A) スライドショーに使用する画像ファイルを保存してあるフォルダを指定します。
   tools フォルダからの相対アドレス指定か、絶対アドレス指定します。
   ツールで画像を表示しながら編集する場合ツール上部メニューバーの画像フォルダ指定窓に書き込みます。
   初期値はダウンロードしたサンプル画像のある ../../tool_slide01/ です。
   このフォルダに編集する画像を保存している場合そのままの指定で作業できます。

   異なるフォルダの画像を表示しながら作業する場合、画像保存先フォルダを指定します。
  パスは 
 tool_sys/tools/ からの相対パス、または絶対パスで指定します。
    相対パス 例) ../../tool_slide01/
    絶対パス file:///C:/slideshow/slide01/ (PC内にある画像)
           http://www.***.ne.jp/slideshow/slide01/ 等  (外部のサーバーにある画像の場合)
  フォルダ指定
の区切りは 半角の /  フォルダの最後に / を付ける必要があります。
.
 Q) 画像定義データのロードのフォルダ と画像フォルダの関係は ?
  A) 画像定義データロードは tool_slide01フォルダ固定です。
    この中の slide_data.jsのデータをロードします。 従って作成済みの画像定義を編集するには tool_slide01
   フォルダに 編集する slide_data.js を上書きします。
   画像フォルダの初期値も tool_slide01フォルダですが、画像を置くフォルダは変更可能です。
   メニューバーの画像フォルダ指定で設定してください。 (上の項目参照)
.
 Q) 編集した画像定義データの画像フォルダは ?
  A) スライドショー実行時のフォルダの中に画像ファイル、スライドショー実行用 auto_slide01.htm 、画像定義
   ファイル slide_data.jsを格納します。
   画像定義データでの画像のパスは同一フォルダ内なので パス指定なしで作成されます。
.
 Q) 別のサーバーの画像を参照しながらスライドショーを実行できるようにするには ?
  A) メニューバーの画像フォルダ指定を絶対アドレス指定します。
   サーバーによっては外部から直接画像を呼び出すことができない場合がありますのでご注意ください。
.
* 切替効果について
 Q) グループ1と 2の違いは何ですか ?
  A) グループ1より 2の方が見た目に面白い効果がたくさんあります。
   公開時 ver1.00から 1.10 まではグループ1のみでしたが ver1.20 以降で グループ2が使えます。
   インターネットエクスプローラ機能で 切替効果のJavaスクリプト命令の構造がそれぞれ違います。
.
 Q) 今までのスライドショーで グループ2の切替効果を使うためにはどうすればいいですか ?
  A) スライドショーHTML auto_slide01.htm を新しいバージョンを使用したものに差し替え、auto_slide01.js を新しいバージョンで上書きすることで実現できます。
 slide_data.js は今までのものと同じです。
.
8 改訂履歴
.

目次へ

バージョン

改訂内容 互換性 改定日

1.00

公開 第1版 2004.2 .1

目次へ