プログラミングの問題演習が一段落（paizaのレベルアップ問題集のＣランク以下を一通り済ませる）してきたこともあり、そろそろネット上で動く何らかの「モノ」を作ることを検討してました。
ネット上で動く「モノ」を作るとなれば、ネット上に動作環境を用意する必要があります。使用するプログラミング言語によっては、対応する有料レンタルサーバーを借りて、そこに開発環境をインストールする作業が必要になります。
動作環境を用意する難易度から、まずはJavaScriptで動く「モノ」を作ることにしました。JavaScriptであれば、通常のブラウザで動作が可能であり、さらにHTMLと一緒に記述可能なので、開発環境を用意する必要性がほとんど無い！
手始めに、ブログなどのWebに設置されたボタンをクリックすることで、特定の場所に文字や数値が表示されるモノから試してみました。
サイコロ（通常）
まずは、ボタンをクリックすると、１～６の目がランダムで表示されるサイコロを作りました。
//JavaScriptファイルを呼び出す
<script language="javascript" type="text/javascript" src="http://moefeather.net/wp-content/img/files/js/dice.js"></script>
//数値が表示される場所
<div id="diceOutput1" style="background:#000099;color:#ffffff;width:70px;margin:5px 50px" align="center">1</div>
//クリックするとJavaScript関数に処理を開始するボタン
<form name="dice1" action="#" style="margin:10px 20px">
<input type="button" onclick="diceFunc1()" value="サイコロを振る" style="width:120px">
</form>function diceFunc1() {
//１～６のランダムな数値を発生
var dice = Math.floor(Math.random() * 6) + 1;
//発生させた数値をWebに出力
document.getElementById("diceOutput1").innerHTML = dice;
}HTMLで、サイコロの数値を表示させる場所を指定しておきます。今回は、ボタンの上の■色の部分にid=”diceOutput1″を指定。
ボタンをクリックすると、ボタンのinputタグのonclickで指定しているdiceFunc1()関数の所に処理が飛びます。
diceFunc1()では、１～６のランダムな数値を発生させ、その数値をHTMLの指定した場所に出力させる処理を行います。
HTMLの指定された場所に出力するには、document.getElementById().innerHTMLを使います。
document.getElementById().innerHTMLにデータを渡すと、getElementById()の()内に記述したHTMLタグの場所に、渡されたデータが表示されます。今回はdiceOutput1を指定してあるので、HTMLのdiceOutput1の所に１～６の数値がランダムで表示されます。
サイコロ（複数種類から選択OK）
次は、セレクトボックスでサイコロの種類を選び、選んだサイコロの種類によって表示される数値の範囲が変わるようにしました。セレクトボックスで選べるサイコロの種類は、４面、６面、８面、１０面、１２面、２０面、１００面の７種類です。
//JavaScriptファイルを呼び出す
<script language="javascript" type="text/javascript" src="http://moefeather.net/wp-content/img/files/js/dice.js"></script>
//数値が表示される場所
<div id="diceOutput2" style="background:#000099;color:#ffffff;width:70px;margin:5px 50px" align="center">1</div>
//サイコロの種類を選択するセレクトボックスと処理を開始するボタン。
<form name="dice2" action="#" style="margin:10px 5px">
<select name="diceSelect" style="width:90px;">
<option value="4">４面</option>
<option value="6">６面</option>
<option value="8">８面</option>
<option value="10">１０面</option>
<option value="12">１２面</option>
<option value="20">２０面</option>
<option value="100">１００面</option>
</select>
<input type="button" onclick="diceFunc2()" value="サイコロを振る">
</form>function diceFunc2() {
//セレクトボックスのサイコロの種類についての値を読み込む
var idx = document.dice2.diceSelect.selectedIndex;
var n = parseInt(document.dice2.diceSelect.options[idx].value);
//サイコロの種類に応じて、ランダムな数値を発生させる
var dice = Math.floor(Math.random() * n) + 1;
//発生させた数値をWebに出力
document.getElementById("diceOutput2").innerHTML = dice;
}diceFunc2()の処理が開始されると、セレクトボックスのvalueに設定してある値を読み込んで変数nに入れます。
変数nを読み込んだら、１～nまでの数値をランダムで発生させ、その数値をHTMLの指定した場所に出力させる処理を行います。diceOutput2を指定しているので、HTMLのdiceOutput2の所に、サイコロの種類に応じた範囲の数値がランダムで表示されます。
これで、ネット上で動く何らかの「モノ」を作れるところまでようやくたどり着けました。
ランダムに発生した数値をWebに表示させるサイコロを作れたことから、その応用として、ランダムに発生した数値に応じて表示される文が変化する「おみくじ」のようなモノも作れそうです。あとは、かなり難易度高そうですが、双六ゲームみたいなものも考えられます。
いずれは、アクセスカウンターやゲームなどをJavaScriptで作り、作ったモノをブログなどに上げられるようになりたい。