ちょっとしたおみくじをつくりたい。
でも何が何だかわからん。
そんなあなたでも超簡単におみくじをつくる方法です。
それぞれのタグの意味やJavascriptの意味について解説していくので、どうしてそうなるのかもわかりますよー。
そもそもなんでHTMLとJavasScriptなの
HTMLはホームページを、JavaScriptはそこに動きをつけるための言語です。
これに加えて形をつくるCSSを学習すると、ホームページ制作はほぼ完ぺきと言っていいぐらいのレベルになります。
このHTML、CSS、JavaScriptはブラウザ上で表示できるゲームやホームページをつくるうえで欠かせない存在なのです。
HTMLの基本的な構造をつくる
HTMLを記述する際に必ず行うことがあります。
ひとつはどのバージョンのHTMLで記述した（する）のかを宣言すること。
もうひとつは<html><head></head><body></body>を必ず入れることです。
・・・むしろなくても表示はできますが、ブラウザによっては不具合が生じる場合があるので必ず入れましょう。
HTMLバージョンの宣言
HTMLも最初から現在使用しているものが普通だったわけではありません。
たとえば、日本語も古文と現代文ではまったく書き方や表現が違いますよね。
もっというと、ギャル語や方言などは標準語を使っている人には意味が分からないですよね。
それと同様に、HTMLにもこれまで積み重ねてきた歴史があって、今のバージョンになっています。
昔はナウいバージョンでも今は古いバージョンってことです。
でも、どのバージョンかわからないと同じHTMLなのにうまく表示されなかったり、意図したものと違う動きをしたりする場合があります。
なので、必ず最初にバージョンの宣言を行います。
２０２１年現在はHTML5が主流なので、次のように宣言しましょう。
記述例
<!DOCTYPE HTML>長々と説明しといてこれだけかと思われるでしょう。
・・・これだけです。
htmlとheadとbody
さて、残りも設定していきましょう。
次のように記述します。先ほどの続きです。
記述例
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>はい、できましたー。
この中の<html></html>で挟んである場所がHTMLで記述していますよという意味になります。
<head></head>にはこのファイルの情報を記述していきます。
最後に<body></body>の間には実際に表示するテキストなどを記述していきます。
これをそのままメモ帳にコピーしてHTMLファイル作ってブラウザ表示しても真っ白な画面がでるだけです。
でもこれで準備はできました。
おまけ：タイトルをつける
ページのタイトルをつけておきましょうか。
<head></head>の間に「<title>おみくじ</title>」を入れてみましょう。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>おみくじ</title>
</head>
<body>
</body>
</html>これをしておくと、開いたときにウィンドウの枠の上あたりのタイトルが<title></title>で囲んだ「おみくじ」となっています。
ボタンを設置しよう
HTMLでボタンを設置しましょう。
ボタンをつくるためには<form>タグを使います。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>【おみくじ】あなたの今日の運勢</title>
</head>
<body>
<form><input type="button" value="今日のあなたは" onClick="today()">
<span id="Luck">どんな感じかな</span></form>
</body>
</html>まず、<form></form>タグを記述します。
その間に、<input type=”button” value=”今日のあなたは” onClick=”today()”>
という記述があります。
「input type=”button”」では、ボタンを表示しますよーという意味です。
「value=”今日のあなたは”」では、この値をいれますよーという意味です。
「onClick=”today()”」は、クリックしたらtoday()を実行しますよーという意味です。
そして、「<span id=”Luck”>どんな感じかな</span>」では、このspanに「Luck」というID名をつけておきます。これはこの後JavaScriptで使うので今はあるなーぐらいに思っておいてください。
JavaScriptであることを示そう
さて、早速JavaScriptを記述していきましょう！
・・・と、言いたいところですがそのためにはもうひとつの準備があります。
<html></html>でHTMLで記述してますと言っておいて、いきなり別の言語を使うということはできません。
そこで、<script></script>を使い、この間に記述する言語は何なのかを示してあげましょう。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>【おみくじ】あなたの今日の運勢</title>
</head>
<body>
<form><input type="button" value="今日のあなたは" onClick="today()">
<span id="Luck">どんな感じかな</span></form>
<!--ここからがJavascriptでしゅ-->
<script type="text/javascript">
</script>
<!--ここまでがJavaScriptでしゅ-->
</body>
</html>こんな感じで記述します。
<script>の中には、どんなもので記述するかを記入します。
今回はJavaScriptを使用するので、「script type=”text/javascript”」といったように記述してあげましょう。
これでJavaScriptの記述をする準備ができました。
ここからが本番！
さて、ここまでHTMLで記述してきました。
次はJavaScriptで実際にプログラムを記述していきましょう。
プログラムの箱を用意する
まずは記述の例を見てもらいましょう。
記述例
function today() {
}このfunctionというのは「関数」という意味です。
普通に考えていくと頭痛いので、おもちゃ箱を想像してください。
まずは、functionという空っぽのおもちゃ箱を用意してあげましょう。
箱の名前は・・・「today()」にしておきましょう。
先ほどのID名ですね。
このtoday()という箱である{ }の中に記述することで、このtoday()を呼び出せばすぐにそこに入っているプログラムを使用することができるようになります。
ランダムに表示する
次に、おみくじをランダムに表示するための道具をつくりましょう。
先ほどのfunction today()という箱の中に記述していきます。
記述例
function today() {
var ra = Math.floor( Math.random() * 5);
var name = Math.random();
document.write(name);
}verというのはraという文字が変数や引数ですよーという意味です。
わかりにくいので小分けの箱だと思ってください。
そのraの箱にはMath floor(Math random()*5)が入っている箱です。
Math floorは小数点以下を切り捨てるということです。
そして、Math random*5は0~4までの小数を含むランダムな数字ですよという意味です。
わかりにくいので表示されるように最後に設定したので、記述例を見てみてください。
この２つを組み合わせることで、０から４までの５つの数字がこのraの箱に入っていますよという意味になります。
決まり事として、命令の区切りには「;」をつけてあげましょう。
おみくじの内容を書く
先ほどのままだとただ０～４の５つの数字が入っているだけで何もない状態です。
イメージとしては５枚の真っ白な紙があるだけって感じですね。
そこで、この０から４の５つの紙におみくじの内容を書いていきましょう。
記述例
function today() {
var ra = Math.floor( Math.random() * 5) ;
if (ra == 0) msg = "すごくいい！(●´ω｀●)";
if (ra == 1) msg = "まぁまぁいい！(*´ω｀*)";
if (ra == 2) msg = "ちょっといい(*´ω｀)";
if (ra == 3) msg = "普通_(:3」∠)_";
if (ra == 4) msg = "やばたにえん(ノД`)・゜・。";
var name = Math.random();
document.write(name);
}このifというのは、「もしも」という意味です。
if (ra == 0) msg = “すごくいい！(●´ω｀●)”;
という場所では、もしraという箱の「0」の紙を引いたらmsgに「すごくいい！(●´ω｀●)」という言葉が書いてありますよということです。
「””」はこの中身を表示しますよという枠です。この中には表示したい言葉を記入します。
そして、紙は５つあるので、それぞれに言葉を入れた結果が記述の例のものです。
おみくじの表示
さて、おもちゃ箱にあるおみくじの箱と中身を準備しました。
しかし！
そのおみくじ、最後に誰かが見なければ意味がありません。
おみくじも引いただけでその中身を開かなくては見れませんよね。
ということで、見れるようにしてあげましょう。
記述例
function today() {
var ra = Math.floor( Math.random() * 5) ;
if (ra == 0) msg = "すごくいい！(●´ω｀●)";
if (ra == 1) msg = "まぁまぁいい！(*´ω｀*)";
if (ra == 2) msg = "ちょっといい(*´ω｀)";
if (ra == 3) msg = "普通_(:3」∠)_";
if (ra == 4) msg = "やばたにえん(ノД`)・゜・。";
document.getElementById("Luck").innerHTML = msg; //おみくじの目の出力
var name = Math.random();
document.write(name);
}めちゃめちゃ長い記述がありますね。
document.getElementById(“Luck”).innerHTML = msg; //おみくじの目の出力
わけわかりませんね。
日本語訳しますね。
doucument（文書）get（いただきぃ）Element(要素)ById(“Luck”)（LuckというIDによって）innerHTML（HTMLの内側）=msg（msgの中身）
・・・です。
つまり、「msgに入っている言葉はHTMLの中のLuckというIDをもらって表示しますよ。」ということになります。
HTMLの「<span id=”Luck”>どんな感じかな</span>」のところに書いた「どんな感じかな」というテキストがmsgに入った言葉に置き換わります。
これで完成です。
実行してみよう
最後に、今まで解説したことをもう一度振り返って実行してみましょう。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>【おみくじ】あなたの今日の運勢</title>
</head>
<body>
<form><input type="button" value="今日のあなたは" onClick="today()">
<span id="Luck">どんな感じかな</span></form>
<!--ここからがJavascriptでしゅ-->
<script type="text/javascript">
function today() {
var ra = Math.floor( Math.random() * 5) ; //おみくじの目の生成。floorは小数点以下切り捨て、randomは乱数です。*5は０以上５以下までの小数点を含む数を表示しますという意味です。
if (ra == 0) msg = "すごくいい！(●´ω｀●)";
if (ra == 1) msg = "まぁまぁいい！(*´ω｀*)";
if (ra == 2) msg = "ちょっといい(*´ω｀)";
if (ra == 3) msg = "普通_(:3」∠)_";
if (ra == 4) msg = "やばたにえん(ノД`)・゜・。";
document.getElementById("Luck").innerHTML = msg; //おみくじの目の出力
var name = Math.random();
document.write(name);
}
</script>
<!--ここまでがJavaScriptでしゅ-->
</body>
</html>記入例をHTMLファイルにして実行すると、ボタンを押すたびに言葉が変わっていくのがわかります。
まとめ
今回はHTMLとJavaScriptを使ったおみくじの作り方について解説しました。
気を付けることは、HTMLとJavaScriptは半角で記述すること、それぞれの言語のルールを守ること。
一文字でも間違えればうまく実行されません。
でも、うまくいくとめっちゃ嬉しいです。
とても短い記述でできるのでチャレンジしてみてください。