[ # 0 ] R a n d o m I m a g e
Top > Enrance > Tutorial > [#0] Random Image

Flow Necessaries Source About

 

  ●● Introduction ●●●●●
ミナ 先生? シュリーマン先生っ。このページ、なんですか? それにナンで左寄り?
先生 む、ミナくんっ。ここは暫定公開中には隠しページだったところだが、「ランダムイメージスクリプト」を解説するページだ。ページが左寄りなのは下にある「新しいウィンドウでソースを開く」ボタンを押したときに並べて表示しやすくするためだっ。
ミナ ははあ。・・・ランダムイメージ?
先生 そそ。あのページはリロードするたびに画像が切り替わるのだ。画像の下に「[ rand ][ srand ]で乱数を発生させている」、と書いてあったろう?
ミナ ええまあ・・・ナンのコトだかサッパリでしたけど。
先生 まあ、最初はそんなもんさ。ミナくんはまだ頭がやわらかいからスグに覚えられるさ。では、具体的にどういうものなのか、というコトを、必要なアイテムの説明のとともに『ソース』を見ながら解説していくぞっ。



  ●● Flow ●●●●●

【処理の流れとポイント】

乱数の生成   [ srand ][ rand ]
   
乱数の結果により
表示する画像を選択
  if文(条件分岐)
   
画像表示   HTMLの埋め込み

 




  ●● Necessaries ●●●●●

【必要アイテム/パーミッション設定】

【ファイル名】 Permission 【働き】
randomimg.cgi 755 メインスクリプト。乱数生成〜選択〜表示
random1.jpg
|
random5.jpg
644(標準) 画像ファイル1~5(ファイル名/数は任意)




  ●● Source ●●●●●


[ randomimg.cgi ]

1 #!/usr/local/bin/perl
   
2 #乱数生成
3 srand;
4 $x=rand(100);
   
5 #乱数による表示画像選択(条件分岐)
6 if ( $x < 20) { $image="random1.jpg";
7 } elsif ( $x < 40) { $image="random2.jpg";
8 } elsif ( $x < 60) { $image="random3.jpg";
9 } elsif ( $x < 80) { $image="random4.jpg";
10 } else { $image="random5.jpg"}
   
11 #表示
12 print "Content-type: text/html¥n¥n";
13 print "<img src=¥"$image¥">";

※行番号は便宜上表記しているだけです。 実際のスクリプトには行番号はつきません。



  ●● About this Script ●●●●●
ミナ ・・・うう〜ん、思ったよりシンプルなんですね??
先生 確かに短いスクリプトだな。しかし『条件分岐』や『HTMLの埋め込み』といった基本ワザが盛りダクサンなのだ。これが全て理解できなくちゃ先には進めないからな。やる気まんまんでイこうッ。
ミナ はあ。(←気のない返事)
先生 さて、まずは1行目だ。これはPerlのパス』というやつ。これはプロバイダのサーバーによって違うから、必ず事前にチェックしておく必要があるぞ。詳しいイミに関してはPerlの解説本なんかを見たほうが良いな。
ミナ このサイトの存在意義が薄れちゃいますねー。
先生 ・・・。で、3行目と4行目で乱数を発生させている。
4行目では生成した乱数を[ $x ]という変数に代入しているんだな。[ rand ] のあとの[ (100) ]というのは、0~100までの幅で乱数を生成してちょ、というイミだ。
ミナ 3行目の[ srand ]てのはナンですか? 変数とかついてないみたいですけど。
先生 ふむ。実はこの[ rand ]関数(そういう言い方をするとだけ覚えておきたまえ)は「一度生成した乱数をけっこう保持する」性質を持っているんだ。だが事前に[ srand ]と命令しておけば、リロードかけたときに改めて乱数の生成に取り組むようにできる。
ミナ ほほう。で、6行目からはなんですか?
先生 これがPerlの基本ワザのひとつ、『条件分岐』だ。生成した乱数[ $x ]に応じて表示する画像を決定するんだな。
具体的には、このようになる。


[ 1 ] 6行目)乱数 [ $x ][ 20 ]より小さかった場合、[ random1.jpg ]を表示。(厳密には[ $image ][ random1.jpg ]を代入)
[ 2] 7行目)[ 1 ]に当てはまらなかった場合(つまり乱数 [ $x ][ 20 ]より大きかった場合)で、なおかつ[ 40 ]より小さかった場合、[ random2.jpg ]を表示。
[ 3] 8行目)[ 2 ]と同じような感じ。
[ 4] 9行目)同じような感じ。
[ 5] 9行目)以上のどの条件にも当てはまらなかったケース、すなわち乱数 [ $x ][ 80 ]以上の場合は、[ random5.jpg ]を表示。

(ちなみに、ファイル名は別に連番であったりする必要は全くない。スクリプト内での記述と対応させさえすれば英数小文字の範囲内でスキに付ければ良い)
ミナ ん〜〜〜こんがらがってきたよ〜〜。
先生 きちんとアタマで整理すりゃなんてコトないさ。
で、最後の2行で [ $image ]に代入された画像ファイルを表示しているんだ。
ミナ なんか、フツウのHTMLと較べてぐちゃぐちゃしてますね。
先生 PerlHTMLを埋め込む』場合は こういうふうになってしまうんだよ。もう少しうまく見せるワザもあるが、それはもっと後でやるぞ。どういうルールなのかはやっぱり解説書でしっかり確認したほうが良いかも。
ミナ これで、スクリプトは完成ですねっ?
先生 うむ。ただ、保存するときに「文字コードをEUCにする」だの「改行コードをLFにする」だの細かい注意点がある。さらにサーバーにアップしたあとでパーミッションを立ててやるとかして、ようやく完成だな。もちろん画像ファイルを用意するのも忘れちゃイカンぞ。
ミナ どれどれ、わたしの初スクリプト・・・おおッこれはオミゴト! きっちり動作してますよっ!!
先生 ほほうナカナカやるのう。たいていはセミコロンの付け忘れとかでうまく行かないもんなんだがな。
ミナ ちょっと先生イイ感じじゃないですか? このイキオイでどんどんイッちゃいましょッ!
先生 おいおいミナくん。今回うまくいったからって「もぉCGIなんてヨユゥ」なんて思っちゃイカンぞ! 今後は「掲示板」「アクセスカウンタ」「アクセスログ」「オンライン日記」「メールフォーム」といった高等なものにも挑戦していくのだからなっ!
ミナ ははあソレはスゴイ! ・・・でも、どれもけっこうプロバイダが用意してくれたりしてますよね・・・。
先生 そ、そりゃ言っちゃいかんッ! それこそこのサイトの存在意義が・・・。


< Back to Index
[ Sample ] [ Source]