［ ２ 基礎編 ］
１ ツールのダウンロード
1-1) ツールのダウンロード tool_teikeihtm.exe をクリックするとダウンロードを開始します。
適当なフォルダに保存して下さい。
1-2) ダウンロードしたファイルを実行（ダブルクリック）すると自動的に解凍され、tool_teikeihtmフォルダと
その内容が作成されます。 これで使用する準備ができました。
1-3) ツールの動作確認、操作を試すために次の操作で様子を見て下さい。
・ 「data_list.jsのデータをロード」ボタンをクリックし、サンプルのひながた、置換文字列をロードして下さい。
・ このデータに基づき各ボタンで表の表示、ページの表示、HTML文出力、保存データ出力を試して下さい。
・ 置換文字列の窓でタイトル等の文字を編集し、ページ表示ボタンで変更された文字が表示されるのを
ご覧下さい。
* これらの操作でツールの機能を把握していただくと共に、ダウンロードしたデータが正常であることを確認
できます。
２ ご自分のイメージでのページ作成
2-1) 貴方のお好みのページを作成します。（または既に作成されたものを使用します）
これを「ひながたページ」と呼びます。
以降は内容だけが入れ替わったページを作成することになります。
３ 複数ページの変更するデータ； 置換文字データ作成
3-1) ひながたページのHTML文から、２ページ目以降で変更する文字列を選び、カンマ（半角）で区切った文字列にしテキスト編集ソフトに貼り付けます。
この文字列を置換元文字列と呼びます。
3-2) 置換元文字列に対応した、２ページ目以降に書き込むべき文字列をカンマで区切られた文字列とし、テキスト編集ソフトの２行目以降に貼り付けます。
置換文字列作成時の注意についてはこちらを参照して下さい → ［ 置換文字列の注意事項 ］
置換文字列の例 （ カンマは解りやすいように赤文字にしてあります）
Title ページタイトル 見出し 画像ファイル名 画像名 画像説明文
Sample01,鳥シリーズ,可愛い鳥を見付けました,kogera01l.jpg,コゲラ,木を登りながら樹皮の中の虫を探す
Sample02,鳥シリーズ,可愛い鳥を見付けました,sirasagi01l.jpg,シラサギ,川、湖沼で小魚を捕らえる
Sample03,花シリーズ (1),可憐な花が咲いていました,maizurusou01l.jpg,マイズルソウ,直径5mmの花
・ ・ ・ |
← 置換元文字列
（１行目）
← 置換後文字列
（２行目以降）
↑ 全て合わせ
置換文字列 という |
４ ツールの基本操作
4-1) 定型 ＨＴＭＬ 作成ツール tool_teikeihtm.htm を起動し
4-2) ひながたページのHTML文を ツールの (1) 定型のHTML文の窓に貼付
ひながたページは最終的に保存するホルダ位置で作成・保存して下さい。
（他フォルダを参照する画像、リンク等がある場合）
4-3) 作成した、置換元・置換後文字列を (2) 置換文字データの窓に貼付
4-4) (3) 行選択窓に、作成するHTMLファイルの番号（置換後文字列の行数）を入力
＋１、−１ボタンで増減できます
4-5) 「 選択した番号で文字列でテキスト表示 」ボタンをクリックすると、ひながたページの中で置換元文字列が、置換後文字列に書き換えられ 置換後HTML文 出力領域 に表示されます。
4-6) この出力領域に表示された文字をコピーし、２ページ目以降のHTMLファイルに貼付保存すれば、ファイルが完成です。
4-7) 4-4)〜4-6)を繰り返すことで、複数のページの置換後文字列に入れ替わったファイルを作成できます。
5 ツールの各ボタン操作
5-1) 「 置換文字データを表で表示 」 ボタン
クリックすると、(2) 置換文字データの窓に入力された置換文字を表形式で表示します。
置換文字の内容が一覧でき、データの整合性についてチェックするのに便利です。
5-2) 「 選択した文字列でページ表示 」 ボタン
クリックすると、入力されたデータに基づき (3) 行選択窓で指定された行の置換後文字列に置き換え
られたHTMLに基づくページが表示されます。
ただし、画像等他の要素を参照・表示するものはここでは正しく表示されません。 （ 画像は ×マーク表示）
ひながたと同じフォルダ内のHTMLファイルに保存し実行すれば正しく表示されます。
注１） ここで表示されるページは、内部で生成されたデータに基づき表示しており、実際のHTMLファイルが作成されたわけでは
ありません。
置換後HTML文出力領域
に表示されたHTML文をコピーしHTMLファイル内に貼付保存することで、実際のHTMLファイルが完成です。
注２） 画像等をテスト的に表示したい場合は次の２つのいずれかの方法で対応します。
(1) ツール tool_teikeihtm.htm data_list.js を ひながたHTMLと同一フォルダ内にコピーし起動する。
(2) ひながたHTMLの保存されているフォルダから見た、画像等の保存フォルダの階層関係を、ツールのフォルダtool_teikeihtmから、
同等の階層・同名フォルダに画像を置く。
具体的な例は下図のようにする。
注３） ツールや出来上がったHTMLファイルをコピーし他のフォルダに貼付、または移動するとき、ホームページ作成ソフト（例えばフロント
ページやホームページビルダー等）では、HTML内の参照アドレスがフォルダ移動によって自動的に修正されてしまうので正しく動作
しません。 エクスプローラ等で行って下さい。
5-3) 「 data_list.jsのデータをロード 」 ボタン
ツールと同じフォルダに data_list.js が存在し、ひながたのHTML文と置換文字列の本形式に変換された
テキスト（ 5-4で作成 ）が保存されている場合、 それらデータをツールに読み込み、(1) 定型のHTML文の窓
および (2) 置換文字データの窓 に表示します。
5-4) 「 data_list.jsデータ書出し 」 ボタン
次の２つの窓 (1) 定型のHTML文 および (2) 置換文字データ に入力されたデータを data_list.js ファイル
に保存できる形式に変換します。
ボタンをクリックし、ひながた・置換文字列保存データ 出力領域に表示された文字列をコピーし、 data_list.js
ファイルに貼付保存することで、いつでも読み出すことができます。
5-3) で読み出した以前のデータの置換文字列の窓に 新たな行の置換文字列を追加入力しページ作成し 5-4)
で保存することにより一連のデータとすることができます。
注） ひながたページのHTMLや、置換文字列そのままを data_list.js ファイルに保存するとツールを起動したときエラーになります。
６ ツールの操作とデータの系統図
７ 置換文字列の注意事項
・ 置換文字列に区切り以外のカンマがあるとエラ−になります
・ 置換文字列の途中に改行があるとエラ−になります （改行タグの <BR>は正常処理されます）
・ 置換元文字列にスペースが含まれる場合 （半角、全角とも）正しく置換されません。
→ 置換元文字を分割して下さい。 置換後文字列にはスペースを含んでいても正しく動作します。
・ 同一置換文字が複数存在する場合
→ (1) 全てのひながた内の文字で合致するものは変換されます。
共通に変換して良いもの（例；文字色指定 #FFFFFF等）
(2) 複数存在するが、部分により変換する／しないを分けたい場合はひながたHTMLおよび置換元文字列
に識別できるよう文字を追加／変更します
・ 置換文字の順番は問いません。
８ 参考情報 V1.01 追加
・ 画像を切り替える場合、それに連れてサイズも異なる場合が多く、いちいち切り替えるのは大変な作業です。
画像サイズ width="***" や height="***" をひながたHTMLから削除する事で対応すると有効です。
サイズをしていないと描画速度が低下するといわれますが、最近のCPUパワーではほとんど問題ありません。
・ サムネイルページで、画像枚数が異なる場合、ひながたページは最大枚数で作成し、少ないページの余分の
画像データはダミーを記入し、HTML生成後、ホームページ編集ソフトでダミーの画像・リンクを削除します
９ 置換文字列をページ毎に変換する仕組みの説明
（ 通常この章はご覧戴く必要はありません。 置換文字列をより良く選択していただくための参考情報です ）
・ ひながたHTMLの１行毎に置換元文字の合致判定／置換を行います
・ 置換文字列の左側の文字から、対象のひながたの行内で該当する文字を探し、置換元文字に合致するもの
を指定されたページ（行数）の置換文字に置き換えます。
合致個所が複数ある場合、全て置き換えます。 全く合致しない場合は置き換えず処理を続行します。
・ 最初の置換文字の合致判定が完了すると、次の置換元文字の判定を行い、全ての置換元文字の処理が完了
するまで続行します。
・ 以上のひながた１行の処理が完了すると次の行の処理に進み、全ての行が完了するまで繰り返します。
・ 一旦合致／置換した文字は、以降の置換元文字列で合致しても変換されません。
例えば、置換元文字列で置換した結果の文字が、以降の置換元文字に一致しても、一旦変換されているので
その文字は置換対象になりません。
またこれにより置換元と、置換文字が同一でも正常に処理されます。
|