3/5 複数の画像リンクからランダムに1つを表示する方法 [ホームページ作成] All About

2. ランダムに選んで、表示用HTMLを生成するJavaScriptを作る

次に、先ほど用意した「画像リンク群」の中から、ランダムに1つを選んで表示するJavaScriptを書きます。以下のソースを前ページでご紹介したソースの続きに記述します。なお、ここはすべてのソースをコピー＆ペーストするだけで構いません(何も修正する必要はありません)。

<script type="text/javascript"><!--
function RandomImageLink() {
   // ▼(A)どれか1つを選ぶ
   var selectnum = Math.floor(Math.random() * imglist.length);
   // ▼(B)画像とリンクを生成
   var output = 
      '<a href="' + imglist[selectnum][2] + '">' +
      '<img src="' + imglist[selectnum][0] + '"' +
      ' alt="' + imglist[selectnum][1] + '"></a>';
   // ▼(C)生成したHTMLを出力
   document.write(output);
}
// --></script>

上記ソースの各部分について、A～Cの3つに分けて、以下で簡単に解説しておきます。このソースは修正しなくても使えるため、以下の解説は読み飛ばしても問題ありません。

■(A)どれか1つを選ぶ
この部分で、何番目の「画像リンク」を選択するかを決定しています。

var selectnum = Math.floor(Math.random() * imglist.length);

この1行の右辺は、以下のように3つに分割できます。

Math.floor(       /* 3 */
   Math.random()   /* 1 */
   *
   imglist.length  /* 2 */
);

それぞれの意味は、以下の通りです。

まず、Math.random() で、0以上1未満のランダムな数(小数)が得られます。
その値に、imglist.length(＝配列の数／つまり画像リンクの数)を掛けています。これで、「0」以上「画像リンクの数」未満のランダムな数になります(小数のまま)。
最後に Math.floor(……) で値を整数にしています。floorメソッドは、(引数が正の値の場合は)小数点以下を切り捨てます(※正確には、その値以下での「最大の整数」を返すメソッドです)。

上記の計算によって、「0以上で『画像リンクの数』未満のランダムな整数」が得られます。これによって、例えば画像リンクが4つある場合には「0」・「1」・「2」・「3」のどれか1つの数値が得られます。つまり、用意した画像リンクの中から1つの番号がランダムに選ばれるわけです。選ばれた番号は、変数selectnumに格納されます。

※JavaScriptでは、配列の番号は「0」から始まります。ですから、画像リンクが4つなら、「1～4」ではなく「0～3」から1つを選ぶ必要があります。

■(B)画像とリンクを生成
この部分で、リンクと画像表示を行うHTMLを生成しています。ここを書き換えれば、表示内容を自由にカスタマイズできます。

var output = 
   '<a href="' + imglist[selectnum][2] + '">' +
   '<img src="' + imglist[selectnum][0] + '"' +
   ' alt="' + imglist[selectnum][1] + '"></a>';

先の(A)によって、変数selectnumの中には「ランダムに選ばれた番号」が格納されているため、以下のように記述することで、選ばれた番号に対応する「画像ファイル名」・「説明」・「リンク先URL」が得られます。

imglist[selectnum][0]　：　選ばれた画像ファイル名
imglist[selectnum][1]　：　選ばれた画像の説明文
imglist[selectnum][2]　：　選ばれた画像のリンク先URL

これを使って、例えば、

'<a href="' + imglist[selectnum][2] + '">'

のように記述すると、JavaScriptが実行された際には imglist[selectnum][2] の部分が「リンク先URL」に置き換えられ、

<a href="pageb.html">

のように、リンクを作るHTMLになります。

これらのHTML生成部分を修正する場合は、(JavaScriptで文字列の範囲を表すための)シングルクォーテーション記号「'」と、(生成するHTMLで属性値を囲むために使われる)ダブルクォーテーション記号「"」の存在が紛らわしいので、混同したり書き忘れたりしないよう注意して下さい。特にシングルクォーテーションの記述を忘れると、JavaScriptがうまく動きません。

■(C)生成したHTMLを出力
先の(B)で生成されたHTMLは、変数outputの中に格納されています。ですから、最後にこの変数の中身を出力すれば完了です。

document.write(output);

この「document.write( …… );」は、「……」の中身を書き出す(表示する)という意味です。

最後に、関数を呼び出して画面に表示

ここまでで、「複数の画像リンクから1つをランダムに選んで表示する」ためのJavaScriptができあがりました。しかし、まだJavaScriptで関数を作っただけなので、画面には何も表示されません。

最後に、この関数を呼び出して実行するHTMLを書く必要があります。その際、JavaScriptが実行できない環境で閲覧された場合に表示する代替内容も書いておきましょう。

それでは次のページで、作ったJavaScript(関数)を呼び出して表示する方法を見てみましょう。