javascriptsTweetJavascriptsどころかJqueryも、適当にパラメーターを変えてそれっぽくする脳しかなかった私が、この「クトゥルフWEBダイス」を作るために勉強してきたことを、ちょっとずつまとめてみようと思います。お役に立てましたら幸いです!まずは、ランダムに数字を表示してみるまず始めに、ボタンを押したら、ランダムに数字が出るプログラムを作ります。私は「おみくじ」を作るプログラムを参考にしました。About様(http://allabout.co.jp/gm/gc/23960/)(1)まずはHTMLで、ボタンと、結果を表示する場所を作りましょう。ダイスといえば基本中の基本、6面ダイスを1回まわしてみます(TRPGでいえば1D6ですね)。HTMLファイルを作成し、<body>内の、ダイスを設置したい場所に下記のコードを記述します。/>5行目の↓の部分が、サイコロを回して出た数字を表示する場所になります。id="condice1"></span>サイコロの画像の真横にサイコロの出目を出したかったので、5行目は<span>でマークアップしてみました。サイコロの画像はあとで付け足しますので、今は一旦おいておきます。ダイスを回すボタンの名前を変更したい時は、3行目のvalue=”ダイスロール”の部分を、value=”回す”などに変更します。(2)ボタンにトリガーを仕掛けましょう!次に、ボタンをクリックした時に、ランダムに数字を表示させたいので、クリックした時にアクションを起こすトリガーとなるonclickを、3行目のボタンの中に書き足します。id="condice1"></span></p></div>3行目のinputタグの中に、onclick=”getDice1();”を足しました。「getDice1();」は、このボタンをクリックした時に動くプログラムの名前ですので、自分で好きな名前にすることが出来ます。今回は、「ダイスの出目を取得するプログラム」の名前なので、わかりやすく「getDice1」にしてみました!ナンバーを振ってあるのは、あとで同じページ内にダイスを増やす時に、プログラムも同じ数増えるので、その時に区別できるようにするためです。これで、「ダイスロール」ボタンをクリックした時にプログラムを動かすためのトリガーができました。(3)javascriptsファイルを用意しましょう!それでは、いざ、javascriptsを書いてみましょう。javascriptは同じHTMLの中に書いてもいいですが、今回はSEO的な観点から、別にjavascriptファイルを作成して、そちらに記述していこうと思います。先ほどのHTMLファイルと同じ階層に、「js」という名前のフォルダを作成します。この「js」フォルダの中に、作成したjavascriptファイルを入れていきます。テキストエディタなどを開いて、「dice.js」という名前のファイルを作成し、「js」フォルダの中に保存します。この時、文字コードは「UTF-8」を選択して保存してください。「dice.js」が出来たら、HTMLに、「dice.js」を呼び出すためのリンクを記載します。HTMLファイルの<head>内に、下記のHTMLコードを追記します。type="text/javascript"></script>これで、HTML内の「ダイスロール」ボタンを押したときに、「dice.js」のプログラムが呼び出されるようになりました。(4)実際にプログラムを書いてみましょう!それでは、実際に「dice.js」ファイルの中に、プログラムを書いていきましょう!「dice.js」ファイルに、下記のコードを記述します。1);}3行目↓は、「getDice1」のプログラムを{}の中に書きますよ~、HTMLのどこかで「getDice1」を発動するためのトリガーが引かれたら、この中に書いてあるプログラムを動かしてくださいね~、という宣言です。getDice1()先ほどHTMLで、「ダイスロールボタン」をクリックしたら「getDice1」が呼び出されるように、onclick=”getDice1();”を書きましたよね。wahaha()」と書きます!4行目↓では、Math.random()を使って、数字をランダムに呼び出しています。6)と書くことで、6つの数字の中からランダムに1つ、数字を選び出すことができます。Math.floor()は小数点以下を切り捨てて整数にしてくれる命令文です。数字を選び出しただけではHTMLに書き込むことが出来ないので、いったん、この数字を「dice1」という変数に代入します。変数の名前は自分で決めてOKです!javascriptsの「=」は、「代入する」という意味です。「var」は「宣言する」という意味です。1);getElementById(‘condice1’).innerHTMLでHTML内のcondice1というidがふられたタグを探しだして、condice1というidがふられた要素の中に、変数「dice1」に1を足した数字を出力してね!という意味です。1を足すかと言うと、javascriptsでは、数字が常に0から始まるからです。ダイスの数値は、1から始まりますよね!なので、dice1に1を足してから、その数字を出力するようにします。HTMLを見ると、5行目の<span>に、condice1というidがありました。これで、HTMLに、ボタンを押したときに1~6までのダイスの出目が表示されるようになりました!これだけでも充分にダイスとしては機能しますが、なんだか味気ないですよね。»コメントコメントをキャンセルメールアドレスが公開されることはありません。「ほんとに、フォント。(7)CONTENTSHOMEダイスロールキャラシート作成BLOGプライバシーポリシーCONTACT管理人:いのり何かあればこちらよりお問い合わせください。Reserved.ページTOPへ。