外に出るのは寒いなどと言訳をしつつ、パソコンばかりにかじりついている。そのなかで今回は、ホームページの主題としている「花写真鑑」の模様替えに着手したのでその顛末を記録する。
1. 改造に至った理由
「花写真鑑」の収録数が増えるに従い、その目次にアクセスしたときに、画像の全てが表示されるまでに、私のパソコンで10~40秒ほどの時間がかかるし、スクロールしたように画面が動くようになってきたので、改造しなければと思ったのである。
現在の「花写真鑑」目次の第一ページ(先頭部分のみ)
2. 現状の構造
花の種類は1600種を越えてきたが、この目次は、アイウエオ順に、ア行、カ行、サ行・・・ワ行までを、10のファイルに分けている。中でもア行とかハ行はその数が多く、目次の画像を呼び出すのに時間が掛かるのである。
表示する画像は、長辺が120pxと小さいが、これは、花写真鑑本文に使用する画像を自動的に縮小して表示させているのである。レンタルサーバーにある元画像は、長辺が500px(100KB前後)であり、目次を開ける度にこのの画像を最大約300枚を同時に開けていることに無理があると思われる。
目次専用の小さい画像をサーバーに入れておけば、かなり早くなると思うが、小さくても数が多いから結構な容量となり、これでは今のレンタルサーバーの容量が不足となり、その追加が必要となるので、出来ればやりたくないことなのである。
3. 対策
そこでやることは、ファイルを分割して、一ファイルあたりの画像数を減少させる事である。目次の機能を保持しつつ、次のステップとしてやれることは多く無いが、”ア"、"イ"、"ウ"・・・"ワ"までの44の文字毎のファイルとすることであろうと思う。
しかし、こうすると、文字毎の花の数は大きくバラツキ、”ア”とか、”ハ”のように多いものとラ行や”ワ”のように少ないものが出来て、決定的な対策にはならないが、従来よりは、幾分早くなることから、当面の対策とした。
4. ついでのリニューアル
折角、総書き換えをするのであるから、この際思いつく模様替えをしようと思う。
(1) 私のHTMLプログラムは、いくつかの本の部分的応用であるがために、古くて今は使わないタグであったり、文法上のミスがあるが、何とか動いているものがある。 今のHTMLエディーターには、HTML5に対し、今は使わないものや文法ミスを見付けて、指摘してくれるので、これを使い修正する。
(2) 今は使わないタグであっても、それに代わる機能を持つタグが無い(定義されていない、または、利用出来ない要素)もの、例えば、<align> とか <center> などは、動作不良を起こさない限り、エラー表示があっても暫定的ながら使用する(後日修正のつもり)。
(3) 目次は従来10ページであったものが、44ページに増えるので、容量が増加するが、それを少しでも押さえるために、共通の装飾部分を全て抽出し、CSSをフルに活用して、容量の削減(プログラム文字数の削減)を図る。
(4) シンプルがベストというから、余計なものを全て削除し、シンプル化を目指す。 例えば、他のプログラムへの移動や、ホームページ表紙への戻りコマンドを無くし、プラウザの戻りボタンで戻るようにする。 これは、具体的には書かないが、迷路に入り込むことを防ぐ意味もあり。
(5) 目次には長辺が160px(自動縮小)のサムネイル写真を掲示しているが、ここに縦長サイズの写真をそのまま使っているために、横長写真と並ぶと見栄えがわるい。 そこで原則は縦長写真から切り出して(トリミング)横長写真に変える。 写真の原版が無い古い写真などは、縦長さを332px近くにカットして使用した。
4. 試験飛行(試行)
まだ、最終的に確定したわけではないが、HTML5は初飛行であるために、予期せぬトラブルがありはしないかと思い、ほんの一部分にすぎないが、試験的にアップロードしたのである。なお、従来のものはそのままにし、全体完成後入れ替えを行うつもりである。
試行状況を見るためには、ホームページ表紙の「花図鑑」下の欄外に”「花写真鑑」目次の改造試行” とある所をクリックすると、下の画面が出るので、見られた方々のご意見を賜りたいとも思っている。
5,試行結果
今まで気に掛かっていた所を修正したが、肝心の「全体を開く時間短縮」は若干の効果はあったものの、まだ、瞬時とは行かず、パソコンにもよるが、数秒~10秒くらいはかかるが、二回目はほぼ瞬時に開くので、ひとまずよしとした。 その他外観なども、もう少し”垢抜け”したものにしたいが、私のセンスはこれくらいのものと諦めざるを得ないのであった。
ここまで来るのに、結構試行錯誤を繰り返したが、結局今と大きく替えるアイデアは出てこなかった。 依って、”なんだ、単に色が変わっただけじゃないか”と言われそうであるが、確かに、それは間違いの無い指摘であるが、ならば、どこをどう替えたら良いかご意見を賜りたいのである。
以上