Web系 - Tips

■HTMLからCGI/Perlを呼び出す

ホームページの更新で、いつも決まった部分だけを更新していて、HTMLを毎回修正するのは面倒ということで、CGIを使って更新する方法です。

HTMLが読み込まれたタイミングで、CGIが呼び出されるようにしたいので、この様な場合にはJavaScriptを利用して呼び出しが出来るようです。
※<img src="***.cgi">もHTMLが読み込まれたタイミングでCGIが起動するが、今回は画像ではなく、テキストを表示したいので・・・

● HTML側(呼び出し元）

<script type="text/javascript" src="***.cgi"></script>

● CGI(Perl)側

print "Content-type: application/x-javascript\n\n";
print "document.write(\"メッセージ\");\n";

これで、HTMLが読み込まれる度に、CGIが呼び出されるので、後はCGI側でテキストファイルなどを読み込み、必要なテキストを出力すれば出来ます。

CGI側の"Content-type: application/x-javascript"がポイントです。

<<TipsTop   ▲PageTop▲

■指定した秒数後にジャンプする

指定した秒数後に、指定したアドレスへジャンプします。

<meta http-equiv="refresh" content="秒数;url=アドレス">

ホームページのサーバー移転時に、旧ページから新ページへの案内など、特定ページへ誘導する際に使用すると便利です。

<<TipsTop   ▲PageTop▲

■ファイル参照ボタンをつける

データの入力を行うのに、１件ごと入力していたのでは手間がかかるので、ファイルを読み込ませて一気に入力してしまおうと考えたのですが、ファイル名のフルパスを手で入力するのは面倒なので、よく見かける参照ボタンをクリックするとファイルが選択できるものを実現したいと考え調べてみました。

● HTML側

<form action="***.cgi" method="post" enctype="multipart/form-data">
<input type=file name="upfile" size="50">
<input type=submit value="開く">
</form>

● CGI(Perl)側

$upfile = $in{'upfile'};

$upfile にファイルの内容が入ります。

formタグで指定する enctype="multipart/form-data" がポイントのようです。
これが無いと、$upfileにはファイル名（フルパスで）が入りました。
このファイル名もブラウザによってパスがあったり、無かったりだとか。
因みに私は IE6 使ってます。

※この方法にも課題が残っています。
enctype="multipart/form-data"でファイルの内容が取得できるのはいいけど、その内容を（サーバー上に）保存する際、元のファイル名と同じで保存したい場合は、どうやってファイル名を取得したらいいのか。
仮に、enctype="multipart/form-data"を指定しないで、ファイル名を取得した場合、こんどはローカルPC上のファイルをどうやって開いて読み込むのか。
この点が不明です。

<<TipsTop   ▲PageTop▲

■テキスト入力の背景色を変更する

ホームページ上の入力フォームで、氏名やメールアドレスを入力するテキスト領域の背景色をフォーカスがきたら色を変え、フォーカスが無くなったら元に戻す方法です。

JavaScriptの onFocus と onBlur イベントを使用します。

onFocus="this.style.background='#ff8080'"　　← フォーカスがきた時の色指定
onBlur="this.style.background='#ffffff'" 　　← フォーカスが無くなった時の色指定

● 使用例

<input type=text name="sample" onFocus="this.style.background='#ff8080'" onBlur="this.style.background='#ffffff'">
　　← フォーカスがくると色がわかります

フォーカスがきたら 薄い赤色(#ff8080)に変化し、フォーカスが無くなったら、元の白色に戻ります。

<<TipsTop   ▲PageTop▲

■印刷ボタンを付ける

ホームページに「印刷」ボタンを付けます。

JavaScriptの onClick イベントを使用します。

onClick="print();"

● 使用例

<input type="button" value="印刷" onClick="print();">
　　←クリックすると印刷ダイアログが開きます

ブラウザの「ファイル」−「印刷」(IE6)でも同じなのですが、印刷用ページなどでボタンになっていたら、ちょっと便利な気がしませんか？

<<TipsTop   ▲PageTop▲

■閉じるボタンを付ける

ホームページに「閉じる」ボタンを付けます。

JavaScriptの onClick イベントを使用します。

onClick="window.close();"

● 使用例

<input type="button" value="閉じる" onClick="window.close();">

ブラウザで閉じてもいいのですが、別ウインドウなどをポップアップさせた時は、そのページにボタンがあると操作性が向上したような気がしませんか？

<<TipsTop   ▲PageTop▲

■バナーサイズいろいろ

ホームページのリンクや広告用のバナーには色々なサイズがあり、人それぞれなのかなと思っていたのですが、これらバナーにも規格（？）があるようです。

絶対これらのサイズを使用しなくてはいけないのかは、わかりませんがこのサイズで作っておけば無難ですね。

少し調べて、名前、サイズをまとめてみました。（間違いがあるかもしれませんが・・・）

<<TipsTop   ▲PageTop▲