WebPage_Tips

Web Page作成上のTips　　　　09th March 2019

筆者の開発環境のOSはLinux MintであるがWindows上でもコマンドプロンプト，もしくは代替のソフトで使用可能だと思う（試していないが）．
また筆者のWebPage作成はseamonkeyのcomposer（最新のバージョン）を昔から用いている．初心者にも使いやすいWebPage作成ソフトだと思う．
ただしftp転送はcomposerだとやや制約があり，画像のディレクトリが勝手に変更されたり，転送に失敗することもあるので，
自分のデスクトップで表示できることが確認できたら，
自分のwebページを格納したディレクトリごと，gftp（linux）あるいはFFFTP（winodws）などでサーバーに転送することが望ましい．

※Composerで作成したhtmlは冗長なコードや，日本語表示で決まった条件のときに半角スペースが入るバグがあるが，それらに余りある使いやすい環境を与える．そのままでhtmlソースコードをいじれるのもよい（Composerページの下部にあるsourceをクリックして表示する）．このページも当然Composerで作っている．ダウンロードなどは下記から．
seamonkeyで当該ページを表示して，編集(edit）を選択するだけで，seamonkeyブラウザ表示画面からcomposerが自動的に立ち上がって編集画面になるのも素晴らしい．

https://www.seamonkey-project.org/

１．WebPageで２枚の写真を交互に表示させるTips

薄片写真を公開するのに，写真の上にマウスが重なると写真が交代する表示を考えた．様々なページを調べた結果，下記がもっとも簡単．
onmouseを用いる．下記で，my_photo-19.jpg　が常時表示，my_photo-20.jpg　がマウスが画像に置かれたときだけ表示．表のタグごと示す．

<tr>
<td style="vertical-align: top;"><span style="font-weight: bold;"></span>
<img src="my_photo-19.jpg" alt="" onmouseover="this.src='my_photo-20.jpg'" onmouseout="this.src='my_photo-19.jpg'">
</td>
</tr>

２．Webサイト中の画像ファイルのサイズを一括変換．

画像を格納したディレクトリでmogrify コマンドを用いる．あらかじめ ImageMagick　がインストールされていることが前提．

mogrify -geometry 1280x960 *.jpg　は画像のhalfサイズを作るオプション

画像の解像度をいじってファイルを軽くするには，

mogrify -quality 80 *.jpg

などという使い方ができるので便利．

３．写真整理用のWeb Index Pageを作る．

http://cachu.xrea.jp/mkthumb/　よりmkthum_pl.zipをインストールする．使い方も載っている．ただし，コードはUNIXで一般的なEUC-JPで書かれているので日本語が化ける．EUC-JPが表示できるエディタで読み込んでから，一般的なUnicodeなどに変更するとよい．

筆者はさらにこのperlスクリプトと画像を半分にするmogrifyコマンド，さらにファイル名を小文字jに変えるkomoji.plを組み合わせたスクリプトで操作している．

#!/bin/sh
komoji.pl
mkdir exif
mkthum5.pl --exif-info
mkdir half
cp *.jpg half
cd half
mogrify -geometry 1280x960 *.jpg
rename_h.pl
mkthum3.pl
cd thumb
# rm dsc?????.jpg

が最終的な画像一括処理スクリプト