2009年9月28日
トップページ画像をランダムに表示する
ここひと月ほど時間のあるときに、嫁のショップのウェブサイトを制作していたのですが、その時にフッと表題のことは簡単にできそうだな、と思い調べてみました。多くの選択肢があるのでどれにしようか迷ってしまうのですが、その中でも特に簡単で良さそうな下記の方法にしました。
それは、A LIST apart に掲載されている Random Image Rotation です。
良い点は、とにかく簡単すぎることです。以下に列記します。
- PHPスクリプトなので、ブラウザのJavaScriptの On/Off 設定に影響されません。と言っても、アクセス解析を見る限りOff 設定にしているケースはほとんど検索ロボットのみですが・・・。
- 設定のカスタマイズは、ランダム表示させる画像を入れるフォルダの作成しその中に画像を好きなだけ入れ、フォルダまでのパスをPHPスクリプトに指定するだけ。
- 更に、スクリプトをブラウザから直接実行すると、ランダムに表示される画像のファビコンまで自動生成して表示してくれます。
悪い点は、A LIST apart は英語のサイトなので、英語のドキュメントを読まなければならないことです。
その他の仕様ですが、デフォルトでは jpeg, gif, png ファイルのランダム表示のみ可能なのですが、カスタマイズによって、htmlの表示、 テキストファイルのソース、tiff, pdf など他のフォーマットもランダムに表示させることができます。
以下設定メモです。
- Random Image Rotation のページの下の方のリンク “PHP source right here” で表示されるPHPソースをテキストエディタにコピーして”rotate.php” というファイル名で保存する。
- ランダムに表示させたい画像とrotate.php を任意のフォルダにアップロードする。その際、rotate.php の107行目のフォルダパスを指定しておくこと。たとえばサーバがxreaの場合は、
$folder = ‘/virtual/username/public_html/url/image/randomizer/’;
というような感じ。フォルダのパーミッションは’755’。
- 表示方法は、直接urlを打込みアクセスする。htmlで表示させる場合は、たとえば下記のようにする。
<p> <img src="http://url/image/randomizer/rotate.php" alt="random images"/> </p>
で、嫁のウェブサイトのトップページ画像のランダム表示はこんな感じになりました。
>くらしの道具
よろしければご覧ください。