|
[ ３ ＨＴＭＬ 自動生成法
続き ］
３．３ Ｅｘｃｅｌ で HTML 文 を 合成
ひな形から作成した hinagata.txt ファイルの HTML文
の内容は 以下のようになっています。
この内 下記の
赤文字 部分を
画像毎に入れ替える必要があります。
ここを Excel を使って、画像一覧の データリストの情報を
組み込みます。
画像No はひながた画面で指定してある ５ として
説明します。
文章で細かくすると、ものすごく複雑になってしまいました。
勘所をつかめば比較的簡単ですのでチャレンジしてみて下さい。
Excel ﾜﾝﾎﾟｲﾝﾄ
で ポイントを覚えていただければ早いと思います。
複雑な行は、複数行に分け、簡単にする方法も合わせて書いてあります。
☆ ひな形 画面の HTML 文
|
行
1
2
3
4
5
6
7
8
}9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>ページタイトル01</title>
</head>
<body background="flowers2.jpg">
<table border="0" width="71%">
<tr>
<td width="59%"><b>タイトル</b></td>
<td width="15%"><a href="index.htm">Homeへ</a></td>
<td width="13%"><a href="gazou000.htm">←前へ</a></td>
<td width="17%"><a href="gazou002.htm">次へ→</a></td>
</tr>
</table>
<table border="5" width="33%" bordercolor="#008080">
<tr>
<td width="100%"><img border="0" src="gazou001.jpg"
width="441" height="109"
alt="gazou001"></td>
</tr>
</table>
<p>No 001 <b>画像タイトル</b><br>
<br>
説明文 ０１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</p>
</body>
</html>
|
☆ 手順
① ３．２ 画像データの作成で作成したＥｘｃｅｌ
のブック Auto_HTML.xls に 新しいシートを作り （ または
既にある未使用のシート sheet 2 等 ）
、これに HTML生成 という名前を付けます。
② A1セルに ひな形のテキストファイル hinagata.txt
をインポートします。
方法は、A1セルをクリックし、メニューバーの ［
データ ］［ 外部データの取り込み ］［
テキストファイルのインポート ］を選択し ファイル
hinagata.txt を指定します。
③ すると 上記の HTML文が A1
セルから下に格納されます。
④ １～７行は、ページ作成ソフト 等で
一部異なる場合がありますが、手を加える必要はありません。
⑤ ８行目 ： タイトル <title>ページタイトル01</title> の
赤字部分を 画像一覧リストから
参照するよう以下のように書き換えます。 漢字以外は全て
半角で入力します。
="<title>"&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!B7:B16)&"</title>"
① ②
③④ ⑤
⑥ ⑦
⑧⑨ ・・・・・・ 次の説明項目番号
① 文字列の式である定義のため、先頭に
= を入れます。
② <title> はそのまま使うので
文字の両側に "
（アポストロフィー）を入れます。 "<title>"
③ 次の文字との結合を表す &
を 入力します。
④ 画像一覧リストから
該当データを抽出する Excel の関数 Lookup を 作ります。 LOOKUP（
⑤ 検査値 ； データを探すための
指定値、すなわち 画像No のセル 画像一覧!C3
を記入し、次の項目の区切り , （
ｺﾝﾏ ）を入力します。
⑥ 次の項は
検査範囲で 画像No の入っている セル範囲 画像一覧!A7:A16
と 区切りの , を
入力します。
⑦ 対応範囲で
抽出されるデータのセル範囲 画像一覧!B7:B16 と関数終了の ) を入力します。
⑧ 次の文字との結合を表す &
を 入力します。
⑨ </title> はそのまま使うので
文字の両側に "
（アポストロフィー）を入れます。 "</title>"
Excel
ﾜﾝﾎﾟｲﾝﾄ ：
・ 式であることを表現するのに・・・ 先頭に =
を付けます。
・ 式の中で、文字列の両側に ” を付けます。
・ 文字列の結合には & を記入します。
・ データリストから指定したデータを抽出する関数
Lookup は
LOOKUP(検査値, 検査範囲,
対応範囲) の書式
・ セルの位置は 下記のように表現します。
（ 単独のセル ）
シート内 ； 行・列の記号 ex) A1
他のシート ； シート名 !
セル番地 ex) 画像一覧!C3
（ セル範囲 ）
（開始）セル番地
: （終了）セル番地 ex) A7:A16 （ シート内 ）、画像一覧!B7:B16 （
他のシート ）
|
⑥ １１行目 ： 背景の指定、 画像一覧でファイル名を入力することとしたので、これを参照します。
="<body background="&CHAR(34)&画像一覧!C4&CHAR(34)&">" ・・・ 合成結果の
HTML文
これは ⑤ と同じ要領で、式の =
文字列 <body background= の両側の "、結合の & セル指定 画像一覧!C4 結合の ＆ 文字 > の両側の " を入力します。
⑦ １７行目 ： 前画像へのリンク指定
<td width="13%"><a href="gazou000.htm">←前へ</a></td> ・・・ ひな形の
HTML文
の 赤文字部分をリストから抽出するため
一行は以下のように記述します。
=" <td width="&CHAR(34)&"13%"&CHAR(34)&"><a
href="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3-1,3)&".htm"&CHAR(34)&">←前へ</a></td>" ・・・ 合成結果の
HTML文
この部分には
⑥までと、新しい ２つの Excel の約束事が含まれています。
(1) ひな形の HTML文 <td
width= の後に " が付いていて、
文字の両側を囲む "
と混同されてしまうのを防ぐため、最終的に "
を表示するために、
" の替わりに CHAR(34) と記入します。
(2) 前画像のページにリンクを貼るためのファイル名 gazou001.htm
の文字を作るために "gazou"&RIGHT("00"&画像一覧!C3-1,3)&".htm" と表します。
・ 関数 RIGHT の 中身は先ず 作成する 画像No
の値は 画像一覧!C3 に記入されており（
例では ５ ）、前の画像はこのNoのマイナス
１ した値なので 画像一覧!C3-1 （
例では ４ ） としています。
・ gazou の 後の数字は 常に ３桁 とするため
"00" と 画像一覧!C3-1 （
例では ４ ） を結合し 例では 004 とし、そのうちの RIGHT
関数で 右から ３文字を 取り出しています。
例えば ２桁 ３６ の場合 ００３６ の右から
３桁で 036 という値となり、常に３桁となります。
・ あとは、既に出た文字列の結合ルールに従って
記入します。 " と char(34)
の関係が少しややこしいですが整理して入力してみてください。
・ どうしても
ややこしすぎる場合は文字と関数で表示する部分を HTMLの
＜行を変えても連続と同等＞の性質を利用し、以下のように複数行にすると簡単になります。
<td width="13%"><a
href="
=RIGHT("00"&画像一覧!C3-1,3)
">←前へ</a></td>
こうすれば この項で出た、 " を表示するための
chara(34) と 文字を囲む " "
がごちゃごちゃにならずに済みます。
Excel
ﾜﾝﾎﾟｲﾝﾄ ：
・ 文字列の式中で " を記述するには・・・
" の替わりに CHAR(34) と記述します。 CHAR() は
文字コードを文字に変換する関数で、 "の文字コードが
34 のため CHAR(34) は "
を１文字書いたことと同じ意味になります。
・ セルに文字だけを記入する時は、=
等 何も付けずに記入すると、文字列として扱われるので。 <td width="13%"><a
href="
は文字として そのまま記入します。 最後の " も
式の中でないので文字として扱われます。
|
⑧ １８行目 ： 次画像へのリンク指定
=" <td width="&CHAR(34)&"13%"&CHAR(34)&"><a
href="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3+1,3)&".htm"&CHAR(34)&">←前へ</a></td>" ・・・ 合成結果の
HTML文
これは⑦と基本的に同じですが、次画像は
現在のNo に ＋１ したものですから 画像一覧!C3+1 の所を
＋とします。
⑨ ２３行目 ： 表示画像ファイル、サイズのデータ組込
<td width="100%"><img border="0"
src="gazou001.jpg"
width="441"
height="109"
alt="gazou001"></td> ・・・ ひな形の
HTML文
今までの繰り返しで
下のように入力します。
=" <td width="&CHAR(34)&"100%"&CHAR(34)&"><img border="&CHAR(34)&"0"&CHAR(34)&"
src="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3,3)&".jpg"&CHAR(34)&" width="&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!E7:E16)&CHAR(34)&" height="&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!F7:F16)&CHAR(34)&" alt="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3,3)&CHAR(34)&"></td>" ・・・ 合成結果の
HTML文
す。
行が長いのと、" を表示すべき数が多いため
長く複雑になっていますが、頑張って下さい。
勘所は、左から変換を進めますが、どこまでが文字で
" " でくくり、結合の &
と表示すべき " を char(34) に変換する
ということを意識しながら行います。
大変そうですが 慣れると １個所の間違いくらいで
一度に変換できるようになります。
どうしてもの時は 下のように、行を変えながら分割すると簡単になります。
<td width="100%"><img border="0"
src="
="gazou"&RIGHT("00"&画像一覧!C3,3)&".jpg"
width="
=LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!E7:E16)
" height="
=LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!F7:F16)
" alt="
="gazou"&RIGHT("00"&画像一覧!C3,3)&CHAR(34)
"></td>
⑩ ２６行目 ： 画像番号、タイトルの表示
今までの応用ですので説明は省略します。
<p>No 001 <b>画像タイトル</b><br> ・・・ ひな形の
HTML文
="<p>No "&RIGHT("00"&画像一覧!C3,3)&" <b>"&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!C7:C16)&"</b><br>" ・・・ 合成結果の
HTML文
⑪ ２８行目 ： 画像説明文の表示
説明文 ０１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</p> ・・・ ひな形の
HTML文
=LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!D7:D16)&"</p>" ・・・ 合成結果の
HTML文
⑫ 大変お疲れさまでした。 これで
ひな形画像で 画像一覧シートの 指定したNo
のデータを自動的にHTML文に組み込む仕組みが完成です。
|
