You are here : トップ -> IT -> インターネット -> その場で表示が変化する「おみくじ」を作る...

文字を動的に変化させて「おみくじ」を作る

サイドバーなど、ページの端にでも掲載しておける小さな「おみくじ」を作ってみましょう。短いJavaScriptを使って、簡単に作れます。
次のサンプル画像の下部にある「おみくじを引く」ボタンをクリックしてみて下さい。その場で、おみくじが表示されます。
※JavaScriptが利用できる環境でのみ動作します。
クリックするたびに、おみくじの内容が変化します。（種類が少ないので、たまたま同じ内容が連続して表示されることもあります。）
以下のように、ボタンを1回しかクリックできないようにしても良いでしょう。
 

Step.1 おみくじのHTMLを書く

まずは、HTMLを記述します。これはとても簡単で、div要素とp要素と、ボタンを作るinput要素の3種類しか使っていません。
JavaScriptを使って動的に内容を変化させられるよう、id属性を使ってID名を割り振っています。また、スタイルシートを使ってデザインできるよう、class属性を使ってクラス名も割り振っています。
ID名やクラス名は何でも自由に付けて構いません。ただし、id属性で指定したID名と、onclick属性で呼び出している関数（ShowKuji）に渡している引数の名前は一致させて下さい。（上記ソースでは、「KujiRes」と「KujiCom」）
同一ページ内に複数のおみくじを掲載したい場合は、このID名だけを異なる値に書き換えて下さい。例えば「KujiRes2」・「KujiCom2」にするなどです。（なお、スタイルシートは共通して使えるので、クラス名は変更せず同じままで問題ありません）
※同一ページの中では、同じID名を重複して使うことはできません。
※ID名とは別にクラス名を付加しているのは、おみくじを複数掲載する場合でもスタイルシートの記述は1回だけで済ませるためです。
このHTMLの構造は、下図のようにシンプルなものです。
おみくじ表示領域全体をdiv要素で囲み、その中に「おみくじ結果」を表示するp要素と「おみくじコメント」を表示するp要素を入れているだけです。

それでは次に、おみくじの本体であるJavaScriptを記述しましょう。
 

Step.2 おみくじを実現するJavaScriptを書く

それでは、JavaScriptを記述しましょう。それほど長いソースではありませんし、ほとんどコピー＆ペーストで利用可能です。
上記のJavaScriptソース中で書き換える必要があるのは、「おみくじの結果」（mres配列）と「おみくじのコメント」（mcom配列）部分だけです。それ以外のスクリプト本体は修正不要です。
※上記のサンプルのまま使ってみる場合は、一切修正不要です。
前ページのHTMLソースと合わせて表示させると、以下のようになります。まだ装飾を施していないので文字がそのまま表示されるだけですが、ボタンをクリックすれば「おみくじ」として機能します。
「おみくじを引く」ボタンをクリックすると、クリックするたびに表示が変化することがおわかり頂けるでしょう。これだけでも「おみくじ」として機能はします。（たまたま連続して同じ内容が表示されることがあります。）
上記のJavaScriptソースをカスタマイズするポイントや各所の意味については、次のページで解説します。
 

Step.3 スタイルシートでおみくじを装飾する

それでは最後に、スタイルシートを記述して装飾を施しましょう。
今回の記事でご紹介したサンプルでは、以下の画像（docplate.jpg）を用意し、その上に文字列を表示させました。
※もっと「おみくじ」らしい画像を用意できれば良かったのですが。

この画像をdiv要素の背景画像に指定することで、画像の上に文字列を重ねて表示できるようにしています。
冒頭のサンプルで使用したスタイルシートソースは下記の通りです。
HTMLの各要素・スタイルシートの装飾対象と、実際の表示内容との関係は、下図のようになっています。

■div.omikujibase
看板を持った犬の画像を background-imageプロパティを使って表示させています。この画像サイズは、149(px)×139(px)なので、widthプロパティとheightプロパティを使って、div要素のサイズを画像のサイズと一致させています。また、line-heightプロパティに値「1.2」を指定して、行間を狭めに設定しています。
background-repeatプロパティに値「no-repeat」を指定することで、背景画像をタイル状には並べずに1回だけ表示するようにしています。また、background-positionプロパティに値「top」と「left」を指定することで、背景画像の表示位置を左上にしています。（※div要素のサイズを画像と一致させているので、これら2つのプロパティはなくても構いません。）
■div.omikujibase p.kRes
くじの結果を表示するp要素（kResクラス）の装飾です。
文字サイズを21ポイントにし、上端と左端から5ピクセルの余白を設けています。この余白は、画像内のちょうど良さそうな位置に文字列を配置するためです。
paddingプロパティの値には、数値を4つ記述しています。その場合、上側から時計回りの順（[上]→[右]→[下]→[左]）に余白量を指定したことになります。
■div.omikujibase p.kCom
くじのコメントを表示するp要素（kComクラス）の装飾です。
文字サイズを8ポイントにし、上端と左端から3ピクセルの余白を設けています。また、文字列が犬画像に重ならないように、右端から89ピクセルの余白を設けています。（犬画像に重なる前に、自動改行されるようになります。）
この余白量の指定（paddingプロパティの値）は、使う画像によって調整して下さい。
■p.button
「くじを引く」ボタンの表示位置を、（おみくじ画像の左右方向での）中央に寄せています。
これまでのHTMLソース・JavaScriptソース・スタイルシートソースを合わせて表示させると、以下のようになります。
「おみくじを引く」ボタンをクリックすると、クリックするたびに表示が変化します。
この状態では、「おみくじを引く」ボタンが何度でも押せます。1回しか引けないようにするには、1度クリックするとボタンが無効になるように記述を加える必要があります。
 

おみくじを1回しか引けないようにするには

おみくじを1回だけしか引けないようにするには、「おみくじを引く」ボタンをクリックした後に、そのボタンを無効にするようにJavaScriptを書き加えます。
ボタンを作るinput要素には、onclick属性を使って「おみくじ」を実行するスクリプトを記述していました。その直後に、上記のように「disabled = true;」という記述を加えます。これによって、1度クリックするとボタンが無効になり（ページを再読込しない限り）クリックできなくなります。
詳しくは、記事「」をご参照下さい。
実際に表示すると、以下のようになります。ボタンは1度しかクリックできません。

おみくじを複数個掲載する場合は

今回ご紹介した「おみくじ」は、同一ページ内にいくつでも同時に掲載できます。その場合、JavaScriptソースとスタイルシートソースは、（いくつ掲載する場合でも）1回だけ記述すれば十分です。
動的に変化させるためにHTMLで記述したid属性（ID名）の値だけ、「おみくじ」ごとに異なる値にして下さい。例えば、以下のソースのようにです。（ID名は、HTMLソース中に2回ずつ記述する必要があります。コピー＆ペーストして作る場合は、修正を忘れないようご注意下さい。）
上記では、1つめの「おみくじ」では「KujiRes1」と「KujiCom1」をID名にし、 2つめでは「KujiRes2」と「KujiCom2」をID名にしています。このように番号を加えるだけでも構いませんし、「Orange」と「Apple」のようにまったく異なる名称にしても構いません。
※ただし、「おみくじ」に限らず、同一ページ内にある他のid属性の値と重複してはいけません。
それでは最後に、今回の記事でご紹介してきたソース（HTML・JavaScript・スタイルシート）すべてをまとめて掲載しておきます。コピー＆ペーストして使ってみる際にご活用下さい。
 

Step.2(続き) おみくじを実現するJavaScriptの解説

前ページに掲載したJavaScriptソースの解説です。
サンプルをそのまま使ってみる場合は、一切修正不要です。また、スクリプト本体部分も一切修正不要です。「おみくじ」の結果とコメントの定義部分（配列に値を代入している箇所）だけ、自由に修正して下さい。

おみくじの結果とコメント部分：

おみくじの結果とコメントは、下記のような形式で記述します。（mres配列に結果を、mcom配列にコメントを記述します。）
番号（添字）は、半角数字で0から順番に記述して下さい。例えば、下記のように記述します。（※1からではなく0から記述するのは、JavaScriptの配列が0番から始まる仕様なため。）
サンプルのソースでは0番から4番までの5種類しか記述していませんが、個数に制限はありません。いくつでも好きなだけ追記して下さい。ただし、番号は0番から順番に使わなければなりません。
なお、結果の文字列にもコメントの文字列にも、直接HTMLタグを含めて記述しても構いません。
上記のように、HTMLタグを含めた記述も可能です。

出現割合を偏らせるには

JavaScriptのrandomメソッドを利用して乱数を生成しているので、おみくじの結果はランダムに選ばれます。 0番のくじ（例えば大吉）と5番のくじ（例えば末吉）が出る確率は同じです。
特定のくじの出現割合を増やすには、同じ内容のくじを複数個作成します。
上記のように記述すれば、「大吉」が出る確率は「中吉」が出る確率の2倍になります。また、同じ「大吉」でもコメントだけ異なるものにするなどの活用もできるでしょう。

JavaScriptソース各所の解説：

修正は不要ですが、JavaScriptソースの意味について簡単に解説しておきます。すべてコピー＆ペーストで動作可能なので、読み飛ばしても構いません。
ここでは、用意した「くじ」の中から1つをランダムに選択しています。選択した結果（番号）は、変数kujiに代入されます。
◎「 Math.random() 」： 0～1未満のランダムな値(小数)を得ます。
◎「 mres.length 」： 用意した「くじ」の個数（＝mres配列の数）です。
→「Math.random() * mres.length」で、「0」以上・「くじの個数」未満のランダムな実数が得られます。
◎「 Math.floor() 」：小数点以下を切り捨て、整数にします。
この2行では、おみくじを表示するために用意した領域（p要素）の内容を書き換え、表示を変化させています。
◎mres[kuji] ： くじの結果が格納されています。
◎mcom[kuji] ： くじのコメントが格納されています。
◎kRes ： くじの結果を表示するp要素のID名が格納されています。
◎kCom ： くじのコメントを表示するp要素のID名が格納されています。
getElementByIdメソッドを使って表示を変化させる要素を特定し、innerHTMLプロパティを使って内容を変化させています。 innerHTMLプロパティに文字列を代入することで、ページ内に表示されている内容を動的に変化させられます。
「ShowKuji」という関数を作成しています。この関数をボタン（input要素で作るボタン）から呼び出すことで「おみくじ」機能を実現しています。
2つの引数「kRes」と「kCom」には、それぞれ「くじの結果を表示するp要素のid名」と「くじのコメントを表示するp要素のid名」を渡します。順番を間違えないようにして下さい。
なお、ソース中に直接id名を記述せずに引数で受け取るようにしたのは、1つのスクリプトで複数のおみくじを動作させられるようにするためです。
※同一ページ内に複数のおみくじを掲載する場合、それぞれの表示用p要素に付加するID名（id属性の値）は異なるものにする必要があります。
それでは最後に、スタイルシートを用いて装飾してみましょう。
 

「おみくじ」ソースのまとめ

以下に、今回の記事でご紹介してきたすべてのソースを一括して掲載しています。コピー＆ペーストして使ってみる際などにご活用下さい。
スタイルシートとJavaScriptは head要素内に、 HTMLソースは「おみくじ」を実際に表示させたいbody要素内の箇所に記述します。

前のスレッド ：LANアダプタを接続しよう...  || 次のスレッド ：カーソルの位置によってスライドす...