last updated: 2021.04.08
これは、もともと、ある人が作成した図版の多い私家版の本を、出来るだけ無料に近い方法によって、ネットに上げるために、私が、実際に作成したHTML文書の記録というか、備忘録でもある。
私が遭遇した状況以外に、このような方法で、似たような作業をする人がいるとは思えないのだが、なにか、近いことをしようとして、方法論的に行きづまっている人がいたなら、なにかの参考になれば、と思って記すしだいである。
あまり汎用性がある方法ではないし、使っているツールなども、あまり一般的ではない。違う方法もあるだろうが、私には、これが一番、手っ取り早いやり方だった、というだけで、誰にも押しつける気はない。
今となっては、オールドファッションドな方法だ、ということは充分、理解している。それを承知して、ご披見願えれば幸いである。
さて――、
まず、元データとして、まあ500枚の連番のベースネームの画像ファイルがあるとする。
別に固有名がなくてもいいので、たとえば、001.jpg、002.jpg〜500.jpg というようなファイル群である。だったら、HTML文書も、それに対応して、001.html、002.htmｌ〜500.html という具合だ。
これが大前提なので、元データが、もし万一、連番でない場合は、ややこしい手順で、ムリクリに連番にする必要がある。
それは色々な方法があるのだが、ここでの主題ではないので、省く（いつか別項で書くかも知れない）。
とにかく、連番データがある、という前提で話を進める。
で、HTMLは、その画像を読みこんで、表示し、末尾に次ページへのリンク先も記す、とする。
つまり、001.jpgを元に作る001.htmlは、内部に、001.jpgの読み込みが必要で、かつ、ワンナップした次ページ（002.html）へのリンク先の表示が要る。ワンナップが2箇所あり、それぞれ数値が異なる。
当然のことながら、002.htmlは、002.jpgを読みこまなくちゃだから、そこでもワンナップが必要であり、次の003.htmlは（以下略）。ただし、画像の表示はファイル名と同じ000からのワンナップだが、ファイル内のリンク先はそれプラスワン、となる。つまり、002.htmlの中で、それは003.htmlを呼び出す＝リンクを張ることになる。具体的には、「<a href="△"></a>」タグを使うが、この2つの法則性を忘れずに作らないといけない。
まあ、しかし、これを、10枚とか30枚とか作るんだったら、手作業でもなんとかなるだろう。だが、100枚超えたら地獄だろうし、500枚なんていったら、もう冗談じゃなくなる。
私が遭遇した条件とは、しかし、まさしく、そういう冗談じゃないものだったのだ。
だが、物ごと、やろうと思えば、なんとかなるものである。それには機械（つまりPCとそのソフト）を使うのだ。
機械とは、そのためにある。つまり、人間様の代わりに、黙ってくり返しの作業を文句も云わずに働らいてこそ、機械である。そして機械的な仕事をさせたら、機械に勝るものはない。これは、冗談とか笑い事ではなく、大真面目な話である。
堅苦しい言い方をするなら、その当時の私は、日常的に、文字列データも、電子的にデータ処理するような仕事をメインにやっていた。その中で編み出された、これは方法論である。あまり他所で聴いたことがないし、そういう人も少ないだろうが、その頃、私がやっていた作業は、まさに、そういう言葉すらデータとして処理しなければ出来ない、そういう仕事だったのだ。まあ、そんな背景があったと思って貰えればいい。
云われたみれば、それほど特殊な作業ではない。教えられれば、ある程度の習熟と鳴れさえするなら、誰だって可能な仕事だ。
ただ、日常のデスクワークを、WordとExcelとpptだけ使って、その機能本来の使い方しか知らない人には、奇妙に思えるだろう。だが、世の中は広いのであって、こうした仕事を余儀なくしている人だっているのである。
では、以下、その方法を記していく。
ここで使う機械とは、エディタとExcelだけである。
エディタが何か、といった論説はすでに済ませている。拙作のWZエディタの（少し古いが）操作マニュアルページを参照されたい。
あと、手もとにExcelがない。という人には、OOo（Open Office org）のカルク（計算ソフトで、Excelの代替品、互換性あり）を推奨する。無料で開発されたオフィススイート製品だが、使い勝手には、さして差はない。
MS社のExcelは単体でも1万以上する。オフィス製品だと最低でも5万くらいか。学生なら学割（アカデミックプライス）が適用されるが、それでも4万はするだろう。OOoなら、同じ機能が（マクロや関数の制限はあるが）無料で使える。働らいていて、職場にあるExcelが使えれば別だが、無いからといって出来ない作業ではない、ということだ。
エディタも、無料で高機能なものが、ネットを探せば一杯ある。私は、初期からのWZユーザなので、WZを使っている。WZはパッケージ版のある数少ない市販ソフトだ（最近ではダウンロード版も差がないので、そちらを推奨する）。Windows向けで圧倒的にユーザ数が多いのは秀丸だろう。それでもいい。WZは新規ユーザだと8000円強くらいで、秀丸のシェアウェアは4000円だ（学生は無料のサービスがある）。
他にも、それほど著名でなくても、好いフリーソフトは沢山ある。自分の好きなものを選べば好い。ただし、友だちが先に使ってる品を選ぶこと、これが大事だ。教えてもらえるからだ。全く無名の製品を使っていても、イザと云う時に、友だちが少ないと、簡単なことですら教えてもらえない。秀丸なら、市販のマニュアル本があるし、作者が作成したものもある（WZは大昔にはあったが、今は市販マニュアル本はない。パッケージ版にも付属しなくなったから、PDF版を精読するしかない）。各自で、工夫されたし。
このジョブは、実を云うと、私が図書館時代に実際の業務が必要となって、編み出した工夫だ。その時は、確か、1000個ほどのファイルを連番で作らねばならなかった。だから、これはその応用なのである。
その当時、私は、ふだんはエディタだけで、HTML文書を作成していた。手打ちである。
それでも、最初の頃は、さすがにテーブルタグなどは既成のHTMLツール（その当時は、職場に、HPビルダーやPageMillなどがあった。今でも、どちらもバージョンを重ねてあるそうだ）を使っていたのだが、同僚が手軽にテーブルタグを手打ちして作表のHTMLを作っているのを見て、（とても敵わない）と思ったものだ。しかし、そのうち慣れると、自分でも出来るようになったので、慣れ、というのはコワいものだ(笑)。現場から遠ざかった今は、とても出来ない。
その後、Webサイト作成は単にHTML文書を書くだけではなく、データ管理やFTP転送まで単一の総合ソフトでやるのが主流となり、逆に面倒くさいシロモノとなった。職場にDreamWeaverなどが購入されたが、誰も使わなかった(笑)。まだHMTL5.0の時代は到来する前だったから、エディタとファイル管理ユーティリティさえあれば、何とかやれたのだ。
そして、職場で、HTML文書を作成し、図書館の公式サイトを管理運営するのは、私の仕事になったし、その後任者には、エディタを勧めたから、そうしたWebオーサリングツール、などと云ったものは、あまり需要がなかったのである。
だが、この仕事ばかりは、エディタだけ使ってやっていては、ちょっと出来ない。一つのファイルの中に、それぞれワンナップする文字列を違う法則性で作らないといけない。エディタだけでは無理。不可能である。
数値をワンナップするんだったら、なんといってもExcelだろう。
私は、あんまりExcelは普段、使わないのだが、必要とあらば、ためらいなく使う。
ある目的のために、一番、効率のいいツールを使う、というのが私の基本方針なので、普段、Excelを使わないで、スクリプト言語で代用したりしているのは、単に、私には、そっちの方が早いからだ。そりゃ計算する、となったら、今のビジネスパースンにとって、Excelは必須アイテムだろうが、ランダムに並んだ文字列や数字列のデータがあり、それをソートして、さらに重複したデータを1つだけにして、他は削除する。などという作業になったら、Excelの関数を使わないと出来ないだろう。だが、エディタやスクリプト言語なら、一行で可能だ。だから、私は自分はプログラムが出来ないから、SUM以上の関数を使うようなExcelマスターにはなれないが、同じ作業を瞬速でやることが出来る。関数など不要だ。まあ、今はそれは措く。
とにかく、この厖大なファイルを作成するには、Excelの支援がどうしても必要なのだ。
当然のことながら、Excelは表計算ソフトであり、私のように、言語データを数値のように扱う、といった使い方は邪道、というか、あまり見たことがないと思う。それこそ、常日ごろ、Excelの関数やマクロを使いこなしているExcelのヘヴィユーザな人には、だから、私の方法論は向かないだろう。Excelは言語だってデータ処理できる、という発想がないからだ。
私だって、いつもは、表計算ソフトとして、Excelは使っている。ただし、関数はSUMしか知らないし、マクロも書けない。ただの計算器の代用である。
だが、このような条件の作業なら、私だってExcelを使うにやぶさかではない(笑)。
要するに、いち早く結果を出せれば好いので、手段は問わないのだ。エディタだけで出来るんだったら、エディタだけで、私は仕事をするし、できなければ、いつでも柔軟に姿勢を変えて、代替のツールを求める。それだけのことである。
Excelでは、ワンナップする箇所だけ、セル（列）を別にする。
たとえば、以下のようなHTML文書だとして――、
赤字の箇所だけセルを別にするのだ（css＝スタイルシートは、私は組込で使ってるが、むろん外部シートでもよい）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="ja">
<HEAD">
<meta http-equiv="Content-Type" content="text/html; charset="Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<STYLE">
<!-- body {background-color : "lightcyan"
; text-decoration : none; color : "black"; margin : 0 auto;}
#yohaku {margin:0 1%;} //--">
</STYLE"><title">なにやらかにやら</title">
</head"><body"><p align="center">
<a href="javascript:history.back()">[戻る]</a">
</p"><br"><br"><center">
<img src="images/001.jpg" height="800">
</center"><hr"><div align="left">
<font color="fuchsia" size="-1">
<strong"> <a href="000html#index>▲ Top Page Index</a>
</strong"></font">
</a></div"><div align="right">■ ■<a href="002.html">
<font color="fuchsia" size="-1">
<strong">Next >></strong">
</font"></a></div">
</BODY"></HTML">
（上記は、Webでの表示の都合上、改行を入れているが、本来、改行タグなしで、1行のデータとなる。でないとExcelで読みこまない。後述のワンナップする箇所だけ改行し、作業することになる）
なお、下から5行目の空白は全角スペースを入れており、判りやすいように「■」で囲んである。
すなわち、「<!DOCTYPE HTML PUBLIC "」から始まり、「<a href="」で終わるセル1があり、「000」からワンナップするセル2があり、その後、間の文字列のセル3があって、「001」からワンナップするセル4があり、その後、文字列のあとから末尾までのセル5までが、1データ（項目）となるのが、1枚のHTML文書となり、それが500行あるわけだ。
これを、最終的に、各行ずつ、テキストで出力すれば好い。
もう少し詳しくくり返すと、この1行のデータで、ワンナップするのは、イメージタグの「images/001.jpg"」の（後半処と、次ページへのリンクタグの「<a href="002.html">」の2箇所だけだ。
だからExcelでの作業は簡単にいえば、冒頭の「<!DOCTYPE 」から、画像がワンナップする箇所の直前、つまり「<img src="images/」までを、A列にコピペする。
B列には、Excelの機能（オートフィルだったか？）で、「^001」を入力し、そのセルをクリックして、右下の小さい■印にカーソルを合わせて、（これはヴァージョンに依って違うらしいが）、この時点で私が使っていたExcel2013版では、そのままドラッグする。500行までドラッグして離すと、001から500までの数値が入力される。むろん、「^001」に、半角キャレット「^」が付いてたらダメだから、これは後でエディタに移した段階で削除する(笑)。
次に、ワンナップする箇所は、次ページへのリンクだから、その間の文字列を、つまり、「.jpg" height="800">」から「<a href="」までコピペして、これをC列のセルにコピペする。
D列には、「^002」と入力し、上述の方法でドラッグし、「^501」までの数列をワンナップしてコピーする。
最後に、その箇所から末尾まで、すなわち「.html">」から「</BODY"></HTML">」までをE列のセルにコピペする。
A、C、E列の文字列は、単純に同じものをコピーすればいいので、Excelの機能を使って、当該セルにカーソル当てて、コピー（CTRL+C）機能で記憶させ、後は、その下の2行目から500行目まで、ドラッグする。さすれば、同じ文字列が、500行分、コピーされる。実際には501.htmlは無いので、そこはタグごと、後で削除すればよい。
Excelでの作業はこれで終わりだ。
ただ、不都合なことに、Excelで作成した、これをテキストファイルとして、外部に出力する時には、必ず余計なものが付いてくる。バカな機械で、迷惑だが、仕方ない。Excelには、テキスト出力の際、セルをダブルコーテーション「"」で囲む特性があり、その他にも、いろいろと不都合な点があるのだ。こちらは、これ以外に方法がないのだから、それに応じた作業をするだけだ。
この不都合は、タブ付きテキストファイルで出力しようが、範囲指定して、コピペしようが、同じだ。私の好みで、ここは、範囲指定して、そのままエディタにコピペした、とする。
以下は、だからエディタ上での作業となる。
大体、こんな感じになる（これも便宜上、任意の箇所で改行している）。
"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN""">
<html lang=""ja"""><HEAD">
<meta http-equiv=""Content-Type"" content=""text/html; charset=Shift_JIS""">
<meta http-equiv=""Content-Script-Type"" content=""text/javascript""">
<STYLE">
<!-- body {background-color : ""lightcyan""; text-decoration : none; color : ""black"
"; margin : 0 auto;} #yohaku {margin:0 1%;} //--"></STYLE">
<title">なにやらかにやら</title"></head"><body"><p align=""center""">
<a href=""javascript:history.back()""">[戻る]</a"></p">
<br"><br"><center"><img src="""\t^001\t".jpg"" height=""800""">
</center"><hr"><div align=""left""">
<font color=""fuchsia"" size=""-1""">
<strong"> <a href=""kinuto01.htm#index""">▲ Top Page Index</a"></strong"></font">
</a"></div"><div align=""right"""> <a href="""\t002\t.htm"
"><font color="fuchsia" size="-1""><strong">Next >
></strong"></font"></a"></div"></BODY">
</HTML"></pre">
見て判るように、これを1行で出力するには、絶対、あっちゃいけない改行が、列ごとに区切られている。しかも、セル区切りを示す「"（コーテーション）」記号まで付されている。さらに、よく見ると、タブ区切りマーク「\t」（制御記号）まである。全くジャマだ。これを削除しなければいけない。
（上記の図では、タブ記号「\t」はそう記述しているが、実際には、エディタ画面上では「→」などの制御記号を表す記号の空白になる。これは見やすくその箇所を「\t」としているだけである）
まあ、改行はすぐ判るんで、直すのは簡単だが、これが全部で500行ある、ということを念頭においてもらわないと間違う。一律に「\n」を全削除したりすると、もの凄い、たった1行の厖大な文字列が出来上がる(笑)。
これを避けるためには、エディタの置換機能を使いこなさねばならない。
ここで、エディタの置換機能に言及しておく。
置換には、「基本」と「正規表現」の2つがある。これはWZエディタの例で、秀丸だと「正規表現」にチェックを入れるか入れないか、その違いとなる。
この説明はメンドイので省くが、ここは重要なので、知りたい人は拙サイト別項↓を参照されたい。
以下、まず、不要な制御記号である、改行とタブ記号を削除する。
正規表現だと、改行は「\n」、タブは「\t」である。これはタブ記号はともかく、改行記号まで全置換しちゃったら、大変なことになるので、留意する。
要は正規表現を使えばいいのだが、危険を回避するためには、その前後に着目すれば、いいだけの話だ。この場合、タブ記号は全置換してもいいので、エディタの置換機能を開いて、検索文字列に「\t」を入力し、置換文字列をブランクにし、「正規表現」にチェックを入れて、全置換すれば、いい。
問題は、改行記号だが、これも注意すれば、不用意な置換はしないですむ。
よく見ると判るが、どちらも一意的（ユニークネス）な文字列の後に、改行が入っている。
1つ目は「<img src=""」の直後、2つ目は、「<a href=""」の直後だ。
最終的に、1行にするには、末尾の「</BODY"></HTML">」以外の改行記号がジャマ、というか、それだけを残せばいいのだから、他に類似の文字列の後の改行がないなら、簡単だ。そこだけ範囲指定して、ピンポイントで検索文字列にすればいい。
ただし、正規表現では、「<」や「>」などの半角記号は、「\」や「^」と同じく、特別な意味を持つので（「メタキャラクタ」と云う）、これも注意が必要である。特に、この置換の場合、改行記号は「\n」以外に表現しようがないため、正規表現による置換作業は必須だ。
だからこそ、正規表現で特別な意味のある記号を検索文字列に雑ぜるわけにはいかない。
そこで「<」は省いて、「img src=""\n」と「a href=""\n」をそれぞれ検索文字列にして、置換文字列には「\n」を省いた「img src=""」と「a href=""」にすればよい。
すると、該当箇所は、「<img src="""^001".jpg""」と「<a href="""002.htm">」になる。一目瞭然、コーテーション記号が3つも連続している。
だから、当然、ここはコーテーションが必要なのだが、3つも要らない、1つでいい。
そこで、検索文字列に「"""」、置換文字列を「"」にして、全置換する。ただし、ここでは「正規表現」は使わない。「基本」置換でいい。秀丸だと、「正規表現」のチェックを外した状態である。
HTMLでは、引数に当たる文字列は、コーテーションで囲まねばならない規則だから、「color="fuchsia"」などは、コーテーション1つで残さねばならない。だから、ここで「""」を全部、ブランクに置換しちゃったりは厳禁だ。
こうして、注意して、一つずつ、不可逆的に置換作業は進めなければならないのだが、コツを掴めば、大体のことは判る。
だが、コツを掴むためには、何度も失敗する必要がある(笑)。
こうした「実学系」のツールは、失敗を重ねて、みんな学んでいくので、ゆえに、バックアップは必須だ。最近のエディタだと、アンドゥ機能は充実しているのだが、対象がこんな厖大な分量のファイルだと、アンドゥが利かないこともあるので、バックアップを取っておくにしくはない。
私は元文書は取っておいて、コピーしたテキストファイルで、何度か正規表現を使った置換作業をおこない、出来上がったら、元の文書に日付とか「001」といった番号を付して保存する。そうしておけば、どんな失敗をしても、最低限、元の文書だけは残る。被害は最小限ですむ。
一括置換の作業は、やってみるまで結果が判らないので、試して実行するしかないのだ。それで失敗したら、コピーしたファイルなら、何度でも失敗できる。そういう安心感もある。だからバックアップは、どういう方法をとってもいいが、絶対に必要なので、肝に銘じてほしい。
さて、コーテーション2つ連続がまだ残ってるが、これが全部、１つにしてよい。検索文字列に「""」を、置換文字列を「"」にして全置換だ。
これで必要な箇所だけ、コーテーション記号が残り、不要な記号は消える。
以上だ。
あとは、完成した500枚のHTML文書を、FTPで転送すれば、出来上がりとなる。