September 28, 2009
トップページ画像をランダムに表示する
ここひと月ほど時間のあるときに、嫁のショップのウェブサイトを制作していたのですが、その時にフッと表題のことは簡単にできそうだな、と思い調べてみました。多くの選択肢があるのでどれにしようか迷ってしまうのですが、その中でも特に簡単で良さそうな下記の方法にしました。
それは、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>
で、嫁のウェブサイトのトップページ画像のランダム表示はこんな感じになりました。
＞くらしの道具
よろしければご覧ください。
投稿者 hyodo in コンピュータ | コメント (4) | トラックバック (0)
このエントリーのトラックバックURL
http://www.hyodo-arch.com/mtos/mt-tb.cgi/252
はじめまして、マルチパパと申します。
この記事を参考に、私のxreaのサイトでもランダムにヘッダー画像を表示しようとしましたがうまくいきません。
もし何かご存知でしたらアドバイスをいただけますでしょうか。
私の場合、ウェブサイトにはWordPressというものを使っています。
そしてスタイルシートを利用しており、
style.cssにヘッダーの背景画像として
rotate.phpを指定しています。
rotate.phpのファイルは何も編集していない状態です。
（rotate.phpと画像は同じフォルダに入れてあります）
ＰＣ上で仮想サーバーをたて、そこでの表示はうまくいくのですが、なぜかxreaでは表示されません。
画像とrotate.phpが入っているフォルダは
～/images/header/
なのですが、
表示されたページのソースでは背景画像は
～/images/head.jpg
と書かれています。
（head.jpgは存在しません）
でもこれでＰＣ上では表示されています。
背景画像自体のアドレスがなぜこうなるのか不思議です
が、
ブラウザで直接rotate.phpのフルアドレスを入力すると
変な記号が表示されるのもわかりません。
もしおわかりであれば。
それでは。
投稿者 マルチパパ : 2010年3月11日 10:08
マルチパパさん、こんにちは！
css というと、background-image で指定しているのですか？
僕はやってみたことが無いので、わかりません。
ちなみに、 タグから呼び出した場合は、画像ファイル名は出力されず、
src="http://url/image/randomizer/rotate.php"
のままになります。
cssから呼び出すと、画像ファイル名が出力されるのですね。
今、rotate.php のソースを見て思いついたのですが、どうしても上手くいかなければ、
効率が悪いでしょうが、cssファイルを複数作って、ランダムに選ぶというのは、
いかがでしょうか？
※追記
マルチパパさんのご質問がヒントになり、「なるほど、いろいろな使い方があるんだなぁ」と思い、実験してみました。
結果は、cssのbackground-image からrotate.php をよび出すことができました。
ソースを確認すると、
background-image: url("/images/randomizer/rotate.php");
のままでした。
よって、rotate.php で呼び出した画像は、ソースからはファイル名がわからないはずです。画像プロパティからもファイル名は取得できません。
rotate.php が一部おかしくなっているのかもしれません。もう一度、rotate.phpを作り直して、フォルダ設定をして、パーミッションを設定してをやり直してみては、いかがでしょうか？僕もこういうこと良くあります。
投稿者 hyodo
: 2010年3月11日 12:52
ご返答ありがとうございました。
あのあと、いろいろ試しましたがだめでした。
もともと他人のソースをいじったものなので
ほかのphp関数が裏で動いていたりするのが
把握できていないのです。
表示されたページのソースでは背景画像が
～/images/head.jpg
と書かれていたのは
functions.php
というプログラムが原因でしたし。
ランダムに背景画像を出したいだけで
致命的ではないため、今回はあきらめます。
それでは。
追伸：
ここに書き込み投稿する時に
確認ボタンを押さずに
投稿ボタンを押すとエラーメッセージがでるようです。
確認ボタンを押し投稿ボタンも押すと大丈夫でした。
投稿者 マルチパパ : 2010年3月12日 03:05
マルチパパさん、そうですか・・・残念ですね。
何か良い解決方法が見つかるといいですね。
投稿でご迷惑をおかけしたようで、ｽﾐﾏｾﾝ。
時々発生するようです。
僕からは、確認できないのですが、
今後対策します。
ご指摘ありがとうございました。
投稿者 hyodo
: 2010年3月12日 10:38
コメントをお願いします！
お名前とメルアド（非公開です）は必須です。