| さ み だ れ 雑 記 | ５４ | ２０００年５月２１日 |
さてさて、前回の続きである。
どこから話をしようかな？なのであるが、話がややっこしくなりそう、である。
というのもウエッブのページをダウンロードするにはどうするのが便利か？という話であるのだが、ぜ〜んぶ、一長一短があって、結論は各人が各用途に合わせてお好みの手法を使えばよい、ということにしかならないと思われるのである。
ということで、ダラダラと、IEではこれが便利でこれが不便で、ネスケならこれが便利でこれが不便でという話になるのである。もちろん、私もそう本気で追求しているわけでもなく、今回テーマにしようと決めて、実験してみて発見したこともあったりするのであって、間抜けなこと書いていたらぜひご教授下さいませ。
あ、最初に断っておきますが、「ホームページ録画ソフト」を使えば楽なのかも知れませんが、ポイントは、ブラウザでネットサーフィンしている時に、「お、ちょこっと保存しておこうかな？」という場合を想定していますので・・・けど、もし「そんなに苦労するぐらなら＊＊＊を使ったら？」というソフトがありましたら、ぜひ教えて下さいませ。
「ブラウザでネットサーフィン中に」ということで話題になるのは、IEとネスケ。ちなみに私のIEはWindowsが4.0、Macが4.5と5、ネスケはWindowsが4.05（古い！）Macが4.5です。
単にテキストだけ（文字情報だけ）でよい場合。
どのブラウザでも、基本的には、同じです。保存の際に、（微妙に表記法が違いますが）「テキスト」を選択して保存すれば終わりです。
ただし、どこにそのファイルがあるか、つまりURLの保存を考えると、Macのネスケの勝ち、です。Macのネスケが保存するファイルは
このように「情報を見る」でURLを自動で保存してくれています。この情報は、コピー＆ペイストが可能ですから、もう一度そのページにいく場合、楽に行けます。別にURL情報なんか（ページを保存してしまうんですから）いらないようなものですが、友達に「こんな情報あるよ」とか、私みたいに「＊＊はベクターの＋＋に行けば」とソフトを紹介する場合、便利なんです。「モアイの技」を紹介した時には、手元にURL情報が無かったから、わざわざ場所探しのためにベクター行ってしまいました。
Macのネスケ以外でURL情報を保存しようとすると、コピーして、テキストエディターに張り付け、それを保存、でしょうか？・・・面倒です。
HTMLファイルだけでいい場合
これは文字、表、背景色など、「画像以外の情報」が欲しい場合です。
これも、どのブラウザでも同じです。「HTML」を選択して保存すれば終わりです。URL情報もMacのネスケでは「情報を見る」に残ります。
HTML＋画像の場合
これが、色々な選択肢に分かれていくのですが、まず、基本的なやり方。
まず、上の方法で、表示しているページをHTMLファイルで保存します。(HTMLファイルって何？というかたは、ぜひ、弊ページの「HTML講座」でも、読んで下さい。）
次に画像を保存します。画像のとこにマウスを合わせて、右クリックなり、Macの方はクリックしてしばらく指を離さないでおくと、ポップアップメニューが出てくるので、「画像を別名で保存」とか、それに似たような選択肢を選び、HDに保存すればよろしい。
のではあるが、これが・・・・。
実際にやってみた方は、おわかりであろうが、いろんな面倒しさ、トラブルが出るのである。
「面倒しさ」に関しては、一つは単純に画像の数が多いと「やってらんねぇ！」なのである。
他にも、小さな画像や、画像と分からないような画像を見落とす、ということもある。「画像と分からないような画像」の見本が当ページの、「HTML講座」の中にもあります・・・。
で、結果、ダウンロードしたHTMLファイルを表示させると、無惨にも画像抜けのマークがぽつんと表示されたりするのである。
くそ〜、Let's Try Again! なんて嫌じゃ！、である。
が、しかし、である。恐ろしいことに、
画像はあるのに表示されない！！！！
という、HTMLの知識、というよりは「パス」の知識がない人を大いに悩ます、もちろん理屈は分かっている人でも、「あ〜面倒しい！」と悩む事態が起きる場合もあるのである！
<IMG SRC="sample.jpg" >
のような場合には、問題は起きない。
え〜っと、ここら辺はHTMLを知っている人には説明不要、知らない人には何のことか分からない、では困るので、詳しくは、「HTML講座」参照のこと、なのであるが、まあ、さらっというと、
<img src="ファイル名">
という呪文で画像ファイルを呼び出しているわけである。imgはimageで「画像」srcはsourceで「ソース：源」である。日本語で言うと：
＜ここで画像表示 その画像がある場所は＝”＊＊＊”＞
って訳で、別段難しいことを言っているわけでもないのである。記号化されているから難しく見えるだけである。（上の日本語の方が「理解しやすい」けど、毎回上のように書かなければならないのなら、それはそれで鬱陶しくて仕方なくなります・・・）
さて、上の説明で「その画像の名前は」ではなく、「その画像がある場所は」というのがポイントである。
<IMG SRC="sample.jpg" >
の場合は同じ場所にあるから、名前だけで終わっている。ところが、
<img src="http://ww3.tiki.ne.jp/~kawa_s/zakki_02/54_01.gif">
<img src="image/54_01.gif">
<img src="../54_01.gif">
などと、「別の場所」にあれば、いくらその画像ファイルがあろうとも見つからないのである。
この「場所の問題」は後でまた出てくるので、少し説明しておくと、
一番上の、"http://ww3.tiki.ne.jp/~kawa_s/zakki_02/54_01.gif"のような指定を「絶対パス」と読んでいるが、見てのとおり、住所を最初から書いていくやり方である。何のことはないURLのことである。
脱線するが、URLとは普通ホームページの場所と考えられているが、別に
http://ww3.tiki.ne.jp/~kawa_s/zakki_02/54_01.gif
を呼び出したら、このページの最初の画像が（私がミスぷりしてなければ）表示されます。
<img src="image/54_01.gif">
これは、今いる場所の下にimageというディレクトリ（＝フォルダ）があり、そのimageフォルダの中にある54_01.gifということである。
<img src="../54_01.gif">
これは今いる場所より一つ上のディレクトリにあるファイルである。
さて、不幸にして、画像が表示されなかった場合どうするか、であるが、これは、ダウンロードし忘れたのならもう一度、HDにあるのに表示されなかったら、HTMLファイルの書き換え、である。
HTMLファイルの書き換え〜！？！？！？
と、素っ頓狂な声を出してしまったあなたにこそ、この箇所は読んでいただきたいが、「面倒くさい！」だけで「難しい！」ではないのである。
ネスケ付属のcomposerというHTMLエディタ使ってもいいです。ネスケで、HDに落としたファイルを読み込む。「あれ？画像が壊れてるってか？」ということになったら、おもむろに、「ファイル」の中の「ファイルを編集」を選びます。するとcomposerが立ち上がります。で、問題の画像のところへ行って、Windowsなら右クリックして、「画像のプロパティ」を選択します。Macならまず、画像をクリックして選択し、（何故か右クリックしても「コンテキストメニュー」はでませんが、）左クリックでも右クリックでも、しばらく指を離さないでいるとメニューがでてきますので、そこの「画像の情報」を選択。（またはメニューバーの「書式」から「画像の情報」を選択）。
そこに、その画像のリンク先＝場所が出ますので、不要箇所を消して、画像のファイル名だけにします。
ネスケは嫌いだ！という人はお好きなエディタで。
テキストエディタを使うのなら、<img="・・・>の場所を、目で探すのは面倒なので、「検索」を使えばいいっでしょう。<img ぐらいで検索すればすぐ見つかります。もし見つからなかったら、大文字小文字が合っていないとか、そういう理由だと思います。で、場所を見つけたら、同様に、ファイル名だけに書き換え。
これで再読込すれば無事画像が表示されるはずです。不幸にして表示されなかったら、それはダウンロードし忘れたということなので、行ってらっしゃい、もう一度〜・・・・・
まあ、上の方法、HTMLファイルを保存して、画像を保存する、という方法も、簡単な時は簡単なのである。
画像だとすぐ分かる画像が２つ程度、画像のリンク先は同じ場所、なら、そのページをHTMLで保存し、画像を保存すれば終わる。
問題は、画像がたくさんあったり、画像とも分からない画像があったり、その画像が別の場所にあったりする場合である。
その場合、鬱陶しいんである。面倒は嫌だ！で色々人は楽をしようと試行錯誤するのである。
MacのIEでの「Webアーカイブ」形式で保存
とりあえず便利である。
これで保存しておけばとりあえず、「画像が表示されない！」と悩む必要はない。前回のフクダさんのページでも、ファイル名を「i%27s%20eye.html」じゃなしに、パーセント文字を使わないファイル名にすれば問題は全くない。（HTMLファイルを保存し、さらに画像を保存するやり方で保存すると、**.jpg%20でトラブルのであった。）
で、とりあえず便利なのであるが、これはこれで不便なのである。
不便、その１：リンクが維持されない。
リンクをクリックすると、たとえそのページがHDにあってもウエッブを探しに行く。
解決法：「Webアーカイブ」の「オプション」を開いて、「リンク」にチェックを入れる。
「階層」という選択肢は１なら、同じ場所（＝ディレクトリ＝フォルダ）にある（リンクが張られている）ファイルを全部。２は、おそらく、その下の階層クトリまで含む、ということでしょう。（上の階層ではないでしょう）
これを使うと、例えばこのサイトのようにフレームを使ったページでも録画できます。（ただし、全部録画しますので、けっこうな時間がかかりますが・・・）
それでも、録画後に更新されたページは、これはもう別に保存するしかないです。
不便、その２：画像が再利用できない。
保存したWebアーカイブを表示させて、それからHTMLファイルは再保存できますが、画像は再保存がききません。もっとも、クリップボード経由で利用することはできますが、アニメーション・ジフはアニメーションしません。
不便、その３：IEでしか使えない。
IEは全く使わない人とIEしか使わない人には問題ないっす。
また、「情報」は「たかだか数年の命」と割り切っている人にも問題ないっす。
けど、HTMLおよびその関連技術は、互換性、汎用性の高さ、が売りです。htmlファイルと、gif、jpgなどの画像ファイルという基本形で保存しておけば、MacでもWindowsでもUnixでも、あるいは、それらのいずれでもない、これから出現するかもしれないプラットフォームでも使用可能でしょう。
わたしにはこの不便その３が一番致命的です。
ま、「そんなに大切な情報があるんかいな？」といわれたら、ちょっと言葉につまりますが、でも、例えば、昔の８ミリのフィルムがあるのに映写機がないから見えない悲しさ、みたいなもんでしょうか。
ネスケでの「ページを編集」
これも、完全ではありません。けど、まあ、少しはましか・・・ただしMacのネスケは鬱陶しいです。
これは、ネスケで表示しているページをネスケ付属のcomposerで「編集」してから保存するという手法です。
これで何が解決するか、というと「画像を保存するさいの手間と、画像のリンク切れ問題」です。
やり方は、ページを表示しているさいに、まず「ページの編集」を選択して、composerを起動させ、ファイル、画像を読みとらせてから（少し時間がかかりますが、始めてそのページを表示させる時間よりは短めのようです）、名前を付けて自分のマシンのHDに保存します。
この場合、ネスケは張り付けられた画像を自動的に、そのHTMLファイルが保存される場所と同じ場所に保存します。
これでIEのWebアーカイブで保存よりは、すこし面倒ですが、画像もちゃんと表示され、かつ、ほぼ生の素材のまま保存されます。
ほぼ、と断ったのは、一度composerを通すので、例えばフクダさんのページはアドビのPageMill製ですが、それがMozilla/4.5<Machintosh; 1;PPC>[Netscape} に置き換わったりします。しかし同じネスケでHTMLファイルで保存＋画像保存の場合問題になった、jpg%20もjpg+空白文字に置き換わっていて、画像表示の問題は無くなりました。
あと、保存する前に、そのページのURLをコピーして張り付けてから保存することもできます。こうしておいたらデザインが少し汚くなりますが、後で再訪するのには便利です。（黒字の背景に白字の場合はちゃんと白字でURLが張り付きます）（ま、これはIEのWeb保存を使えば、もっとスマートですが）
さて、最後の話題・・・・・リンクを生かす
これも、楽なときは楽です。
楽なときは、一つだけの注意で終わりです。それは、「ファイル名の維持」です。
原理から入っていったほうが分かり易いと思うので、ざっと説明します。
リンクはHTMLファイルの中で
<a href="ファイル名">コメント</a>のように記述されます。詳しくはこれも「HTML講座」読んで下さい、ですが、
＜飛んでね 行き先は＝”ファイルの場所”です＞ここに好きなこと書いてね＜／ここまで下線つけてね＞
てなもんです。（オイオイ、ちょっと違うんでないの？・・いいじゃん、分かりやすくて・・）
さて、つまりは画像の場合と同じである。
同じ場所にあると、ファイル名だけでいいのである。
であるからして、ダウンロードする元のファイルが、すべて同じディレクトリにあれば、特に問題ない（ことが多い）のである。
しかし、この場合でも必ず守らなければならないのは、「ファイル名の維持」である。
<a href="ファイル名">コメント</a>のファイル名が変わってしまったら、ブラウザとしては探しようがないのである。前回のフクダさんの場合では、このファイル名に空白が含まれていたため、ブラウザが探せなくなってしまったのであった・・・。
さて、この「ファイル名の維持」がMacのネスケでは、面倒な事態が起こるのである。
WindowsではIEもネスケも、サーバにあるファイル名をデフォルトで表示しますので、そのまま保存すれば問題ありません。
ところが、Macのネスケでは、デフォルトに与えられる名前は、そのHTMLファイルのタイトルです。ブックマークに登録するときの登録名になる名前です。それを一々ファイル名に変えなければなりません。ハッキリ言って面倒くさいです。私みたいにタイプミスに自信があるひとは、これはマウスで、ブラウザに表示される、URLの最後にくるファイル名を範囲指定して、コピー＆ペーストがお薦めです。
MacのIEは、デフォルトでは、Webアーカイブで保存する場合は、タイトル名を、HTMLで保存するときには、ファイル名を表示させますので、画像が少ないページの保存はIEの方が楽だと思います。画像がたくさんあったり、気が付きにくい画像があったりするページは、やはりネスケのcomposer経由で保存する方が楽でしょう。
注意１
ウエッブのトップページ（「ホームページ」の「ホームページ」のこと・・ややこし、ややこし）
は、普通、index.html、あるいはindex.htmになっていますが、これが何故かブラウザによっては、なにも表示されなかったり、「無題」となったり、あるいは、例えば「fuku-mac.html」になったり、あるいはindex.htmlと表示されたり色々です。この場合、とりあえず、index.htmlとして保存、うまくトップページに戻らなかったら、index.htmとリネームすればいいでしょう。
それで、だいたいはOKのはずですが、それでもダメなら、HTMLファイルのソースを読んで、
<a href="ここ">に書かれているファイル名にすればいいでしょう。何でもdefault.htmlとかの場合もあるんだそうです。他にもマイクロソフトのマックでのウエッブ・サーバーは変な名前を使っているとかいう話ですし・・・。
注意２
ネスケのcomposer経由で保存する場合は、「設定」でのcomposerの出版の設定に注意して下さい。
この説明の、「リモート」とか「ローカル」は分かりにくいですが、結局、「ローカル」とは「同一フォルダ（＝ディレクトリ）」、「リモート」は「別のフォルダ」の意味です。
デフォルトでは、上の「リンクを維持」にチェックが入っているはずです。
この状態で保存しようとすると、composerは「リンクを維持」しようとします。ということは、保存するファイルは、自分のHDに保存される。そのファイルにあるリンク先のファイルはまだサーバにあるのですから、「リンクを維持」するために、「絶対パス」でリンク先を書き換えて保存することになります。
つまり、このファイルを保存すると仮定すると、このファイルには
<A HREF="zakki_053.html">53</A>というリンクが張ってあるのですが、zakki_053.htmlというファイルはサーバ上にあるため、
<A HREF="http://ww3.tiki.ne.jp/~kawa_s/zakki_02/zakki_053.html">53</A>と書き換えるという事態になるわけです。
チェックを必ず外しましょう。 （サーバ上の住所を保存したい場合はチェック入れると便利です）
なお、下のチェック項目「ページの画像を残す」のチェックは外さないように。この項目が生きているから、上で述べた、「composerで開いて保存」すると、画像がついでに保存され、かつ「リンク切れ」が起こらないのです。
注意：３
あまり無いと思いますが、場合によっては、リンクを「絶対パス」で張ってあるHTMLファイルもあるでしょう。
つまり、同じフォルダにあるのなら、
<A HREF="zakki_053.html">53</A>という「相対パス」で十分なのに、
<A HREF="http://ww3.tiki.ne.jp/~kawa_s/zakki_02/zakki_053.html">53</A>とパスが記述されている場合です。
この場合は、HTMLのソースを読んで、確認しつつ書き換える、ということになります。
さて、以上までが、基本でした。
次に、難しい場合。それは、サブ・ディレクトリがある場合です。
この場合は、サーバのディレクトリ構成と自分のマシンのHDのディレクトリ（フォルダ）構成を揃えます。
例えば、
http://www.kore.co.jp/~sore/
を「ホーム」とするページがあったとすると、自分のHDに"sore"というフォルダを作って、index.html以下の「同一フォルダ」にあるファイル群を保存します。
http://www.kore.co.jp/~sore/are/
となると、自分のHDの"sore"というフォルダの中に"are"というフォルダを作って、その中に、サーバのare/にあるファイル群を保存する
ということです。
まあ、面倒です。 しかも、せっかく苦労しても、各サブディレクトリの中にファイルが２つ３つというガックリくるディレクトリ構成になっているのもあったりします。けど、まあ、済んでみないとそんなことは分からないから・・・。
さらに、このページのように、フレームを使っていると、ブラウザはいつも
http://ww3.tiki.ne.jp/~kawa_s
の位置に「腰をかけて」います。その中で、右のフレーム内に、このページが表示されていたら、
このページは：
http://ww3.tiki.ne.jp/~kawa_s/zakki_02/zakki_054.html
という場所にあるのですが、表示されるURLは、http://ww3.tiki.ne.jp/~kawa_sのままです。
ということで「新しいウインドウでフレームを開く」を選択してもらって、まずフレームを外さなければなりません。フレームなしの単体表示にするとURLに現在位置が表示されるようになるので、サーバ上のディレクトリ関係を自分のHDに再現しつつ、正しい場所にファイルを保存する、という作業になります。
う〜ん、今回も、ややこしい割には、利用価値のない情報だったりして・・・・。
ということで、常連客に送る、K's Kornerの保存の仕方・・・・・って、何考えてんだか・・ま、笑って許して下さいな・・・。
K's Kornerのディレクトリ構成は：
front ・・・表紙類
html ・・・HTML入門講座
music ・・音楽関係、さらにchro, daisel, kayoのサブディレクトリあり
zakki ・・雑記(1)〜(50)まで
zakki_02 ・雑記(51)から
download ・雑記の圧縮ファイル
となっています。（「発言書込」「アンケート」などCGIを使っているコーナーは他のサーバにリンク張っているので、tikitikiにはありません。）
けっこう難易度高いか？ でもまあ、imageというフォルダ作って画像を纏める、などということはしていませんので、その点は楽です。画像も、「HTML講座」で使った画像以外は「画像とすぐわかる画像」しか使っていませんので、「composer経由で保存する」みたいな裏技は使わなくても、クラシックなHTMLファイルと画像の保存という手法で十分です。
ということで、まず、「kawa_s」とか「K's Korner」というフォルダを作ります。さらに、その下に上のディレクトリ構成に合わせて、サブのフォルダを作ります。
さて、このページに来ます。
まず、index.htmlを保存・・・・と、試しにやってみたら、ネスケが難しいです。一度composer経由にしないと、index.htmlは保存されません。IEはOK。「名前を付けて保存」とすると、ウインドウズ版では「無題」と出ますので、index.htmlという名前で保存。マックの５なら、最初は「Webアーカイブで保存」となるはずなので、それを「htmlファイル」に変えて、一度キャンセル。ふたたび、「別名で保存」を選ぶと、こんどは「index.html」という名前がデフォルトで表示されますので、そのまま保存。
その次に、「フレームを外す」ということします。マックの方は、画面上で、じっとクリックしたままにすると、しばらくしてポップアップメニューが出ますので、「新しいウインドウでフレームをひらく」を選択。
これでフレームが外れます。
フレームを外した状態で、html、画像を保存して行きます。
すると
| index.html | フレームを作るためのファイル |
| left.html | 左に表示される、メニュー画面。menu.htmlと名付けるべきだった。 |
| logo2.gif | K's Kornerのロゴ |
| post_b.gif | 赤いポスト |
| counter.pl | カウンター |
| pfront.html | 右に表示される「仮表紙」ファイル |
| links.html | ポップアップする「リンク集」 |
| music.html | 左のメニュー画面で音楽を選択したとき入れ替わるファイル |
| front.html | 左のメニュー画面で表紙を選択したとき入れ替わるファイル |
これだけダウンロードされるはずです。
めんどうなので、lzhファイルにしちゃいました。kawa_s.lzh(11KB)。もの好きな方だけどうぞ・・。
これを溶かすと、kawa_sというフォルダの中に上のファイルが解凍されます。
そのkawa_sというフォルダの中に、zakki_02というフォルダを作って下さい。
さて、次回の更新からは、
１。私のページに来る
２。「仮表紙」の雑記の最新版を「新しいウインドウでリンクを開く」で呼び出す。
３。呼び出したファイル（と画像）を、zakki_02フォルダの中に保存する。
４。すぐさま電話を切る、あるいは他のページに飛ぶ。
とまあ、こうすれば、電話代も少しはお安くなり、自分のHDの中でゆっくり読める。
と、しかし、「仮表紙」は毎回書き変わるので、すぐに最新版には行きにくくなります。（例えば５５を読みたければ、当時最新だった５３を呼び出して、それから５４，５５と進む・・・）
ということで、左のメニューの中の「雑記」のところで、「コンテキスト・メニュー」を出して、「新しいウインドウでリンクを開く」を選択。出てきたページ(zakki_index.html)を、zakki_02フォルダの中に保存して下さい。そうするとHD内閲覧の場合は、まず「雑記」をクリックして、そこから最新版を選択できます。
もちろん、もの好きにも、「雑記(1)〜(50)をダウンロード」したかたは、そのzakkiフォルダをkawa_sフォルダの中へ入れていただければ「リンク」が生きます。
うう、し、しかし変な展開になったもんじゃて。。。。
繰り返しになりますが、もっとスマートな方法がある！とかありましたら、ぜひぜひお知らせ下さい。
