プロフィールにも「小細工好き」と書いたことだし、小技集(笑)
とゆーことで、すぐにホームページで使える「小技」の紹介です。
これは、ウチのサイトや同人ソフトで実際に使われている方法や実際に書籍などでも紹介されている技ですので、実証済みです。
やろうと思って検証予定のものについては、検証できたらここで報告させていただきます。
ここでは、「サーバのあれこれを知らなくても、どのホームページでも使える技」のみを紹介していく予定です。そうでなくちゃ「小技」じゃないもん(笑)。
また、ここではブラウザ固有機能を使うものは出来る限り排除していきます。世の中の8割はIEを使っているらしいですが、私はアンチIE派(っつーか火狐派)だということもありますし、世の中にはOperaとかLynxとか色々あるもんで、IE固有機能なんかは使いません。IE危ないから使わないし。
つまり、ここで紹介するのは「人に優しい小技」(笑)です。
本っ当に「小細工」ですので(笑)、自慢げに使うもんではありませんが。
また、スクリプト技は、来訪者がスクリプト切ってたりすると使えません。ので、そうすると意味ない場合には「スクリプトONにしてないと意味ないで〜」とか書いといてください。Noscriptタグで「スクリプト切ってあると動作しませんぜ」とか書いといてもいいです。
そこらはもう詳しく言わんけど、htmlの参考書とか見てな。小細工以前の基本なんで。
1. カーソルが乗っかると画像が変わるやつ
ウチのトップページのコーナーセレクトでやってるやつです。一応「技」です。
トップページのソース見れば書いてあります。具体的には、
1) 使う画像(入れ替える画像)を事前にバッファ(定義されたメモリエリア)にブチこんでおく
2) 表示部分に、「カーソルが乗ったら画像を入れ替え、どいたら別のにする(元に戻す)」という指示を書いておく
3) 画像入れ替えルーチンを独立関数にて作成しておく
といったことです。
画像をバッファリングしておく理由は、表示を高速にするためです。カーソルが上に乗るたびにいちいちサーバから読みこんでいたのでは、一瞬で入れ替えなど出来ません。そのため、あらかじめローカルマシンのメモリの中へ全部画像は読みこんでおくのです。
ただ、ウチのは画像入れ替えも含めて、メンテナンスを容易にするために、いろいろ小細工(またかよ!^^)が施してあります。
実行する関数自体はこれをコピペしてもらえれば簡単に実現できますが……ワナがいくつかあります。
ひとつは、「画像をバッファリングする順序」です。これはどーゆーことかというと、ブラウザに画像が読みこまれる順番は、上から、そして左から順番です。つまり、左上から右へ横に一列読み、左の2段目から右へ一列読み、……と最下段まで横に一列ずつ画像は読みこまれます。これは、画面の表示の仕方(走査線の方向)と同じです。
ゆえに、画像の入れ替えをする場合、これを考慮して順番を設定しなければなりません。
具体的には、入れ替えを行う画像の前に、例えばトップ画像、ロゴ画像、バナー4つがあったとします。すると、入れ替えバッファナンバーは「7番目」になります。入れ替えたい画像が例えば4つあれば、7〜10番目(プログラム上は6〜9番)が入れ替えを行う画像番号になります。最初にそこに初期表示画像を読みこんで、カーソルが乗ったら入れ替え画像に表示を変えます。また、戻すための初期画像は、別のバッファを確保して読みこんでおく必要があります。
つまり、バッファとしてはこういう状態です。
・html内画像バッファ設定
0:トップ画像
1:ロゴ画像
2:バナー1
3:バナー2
4:バナー3
5:バナー4
6:通常表示画像1
7:通常表示画像2
8:通常表示画像3
9:通常表示画像4
・入れ替え画像バッファ
10:入れ替え画像1 →カーソルが乗ったらバッファ6へ読みこむ
11:入れ替え画像2 →カーソルが乗ったらバッファ7へ読みこむ
12:入れ替え画像3 →カーソルが乗ったらバッファ8へ読みこむ
13:入れ替え画像4 →カーソルが乗ったらバッファ9へ読みこむ
・通常表示画像バッファ(6〜9と同じもの)
14:通常表示画像1 →カーソルがどいたらバッファ6へ読みこむ
15:通常表示画像2 →カーソルがどいたらバッファ7へ読みこむ
16:通常表示画像3 →カーソルがどいたらバッファ8へ読みこむ
17:通常表示画像4 →カーソルがどいたらバッファ9へ読みこむ
この先読み画像バッファは、htmlの初期表示画像の後に続けてもいいのですが、画像数が増減したときに混乱しますので、別バッファを取得した方がいいでしょう。また、初期表示画像は別バッファを取らなくても最初の読みこみ部分(6-9)のものを使ってもいいのですが、読みこんだ順序がわからなくなりそうな場合、新たに自分で定義した方がわかると思います。
特に、トップページの画像数を入れ替える場合、この順序がその度に変わりますんで、ウチのでは1箇所数値を入れ替えるだけで順序調整ができるようにしてあります(もちろん、表示画像数が変わればあちこち変更は必要です)。
また、あまり大量に重い画像入れ替えを行うと、モデムだとかなり負担が大きくなり、表示が遅くなります。それでは効果がありませんので、出来るだけファイルサイズも考慮して、読み込みに時間をかけないようにしましょう(目安は一htmlファイル中に150kぐらい、といわれていますが、画像系サイトではそうも言っていられません^^)。
ま、これは応用範囲広いんで、覚えておくといいでしょう。
ただし、HPびるだとかのソフトで自動的にスクリプト作成してもらった場合、ソース管理はソフトに一任されますので、中見て勝手にいじくるとワケわかんなくなる可能性もありますし、余計な行をがっしがっし入れてくれて、ソース自体が異常に「汚くなる」うえ「ムダに肥大する」ので、私としては、最初の形を作ったらあとは手でメンテすることをお勧めします。解る人はね。
2. パスワードチェックするぞ
パスワードチェックというと、結構難しいプログラミングをしなければいけない、という具合に思われますが、そうではありません。JavaScriptでも、擬似的にパスワードを使ったチェッカを作ることが出来ます。
ただ、本来これはCGIスクリプトと併用して、もっと厳重に管理されることを目的としていますので、JavaScriptだけではすげー簡単なものしか出来ません。しかも、ソースを見ればパスワードが解ってしまいます。つまり、ソースにパスワードを書いて、それと照合してチェック、という形を普通はとります。
そこで、なんとか「パスワード隠蔽方法」を考えなければいけないのですが……これが普通の方法ではムリです。スクリプトを別ファイルにすることはできますが、隠蔽することにはなりません。ブラウザで見ることが可能ですので。
これを隠すには、サーバレベルでの設定が必要なのですが、ほとんどのプロバイダアカウントではサーバでそういう設定をさせてくれません(セキュリティ上の問題がありますので、そういう細工を禁止しています)。レンタルサーバとか、CGI設置可能とかを謳っているところを使う必要があります(ここ「さくらIN」もCGI使用可能です)。
しかし、「パスワード自体を行き先に指定する」ことで、ソースにパスワードを書かずに隠蔽することが可能になるのです。
具体的には、
1) パスワード入力受付部分を作成(htmlのinputタグ)。
2) 入力されたパスワード自体をファイル名に変換・合成して、そこへリンク先を指定する
3) リンク先へ飛ばす
という手順でやります。
これを行うことで、行き先自体がパスワードの役目を果たします。当然、その行き先が解らない以上、パスワードも解らないわけです。で、パスワードが間違っていれば、当然行き先も間違っているので、「404 NotFound」エラーが出て弾かれることになります。当然、内部でパスワード照合はしていませんので、ソースに書いておく必要もないのです。
また、必要なら、いくつもページを作ることも容量の許す限り可能であるし、簡単に消去も新規作成も可能です。
これはスクリプトでなくても、Javaアプレットで作っても同じことですが、スクリプトの方が運用は簡単です(アプレットの方が見た目「いかにも」な動作はしますが、読み込みが遅かったりします)。
ただし、ディレクトリを作ってそこに行き先を指定する場合、デフォルトで表示されるhtmlファイルがない(大抵index.html)と、ファイルがリストで表示されてしまって、行き先が解ってしまいます。画像などが置いてある場合も全部見えてしまって、せっかくのパスワードの意味がなくなりますので、その対策もお忘れなく。
もちろん、「なんとかして限定された相手以外には絶対に見せたくない」という場合には、OSレベルでの制御の方が堅牢であることは事実です。
しかし、隠しページ作成の容易さや、どのサーバでも使用可能というこの手法は、簡易パスワードチェッカという目的は十分に果たせるでしょう。
ま、これはシステム的な管理しか思いつかない場合の逆転の発想、つまり「運用の技」ですな。
3. htmlに隠しメッセージ
まぁ、これは気がつけば大したことではないですし、ソースを見られたら一発ですが、そこまで気がつかない初心者相手には有効です。正に「小技」(笑)。
隠しメッセージを入れる方法として、「コメントで書いておく」という方法もありますが、ちょっと慣れた人ならすぐ解りますし、それらしきことを書いておけば、誰だってソースを見て……ぐらいはします。
この小技のポイントは、bodyタグ(もしくはスタイルシート)に背景色と文字色を指定して、通常の内容はそのまま書いて表示させますが、中に隠しメッセージを短く(一行程度)入れる場合に、そこだけ背景色と同じ色でメッセージを書き入れるのです。
これは、例えばスクリプトで色々細工をしているのと同時に使うと効果的かもしれません。スクリプトのチェックに気を取られて、本文に目が行かないようにしておいて、こっそり本文にメッセージを短く隠す……ということをすれば、意外と中級者あたりまでは騙くらかす(笑)ことができます。
また、無意味な空き行設定を悟られないようにするためには、文字を最小にして書いておく、hrタグで所々に線を入れる、テーブルを使うなど、ソースを解りにくくしておけばOKです。
これはテクニカルな手法ではなく、むしろ心理的な罠です。
