Bootstrap使いこなせたら凄い楽かも
&
Java Scriptはよく分からん
今回の目的
モノポリーを遊ぶために
1. サイコロを２つ振る
2. チャンスカードと共同基金カードをそれぞれ引く
という２つの機能を持ったwebアプリを作る。
「なんで？普通にサイコロ振ってカードを引けばいいじゃない」と思うかもしれませんが、
「カードの内容を簡単に書き換えたい」というのと「サイコロの出目の合計を間違える」という要件を満たすために「勉強だし書いてみようかな」となりました。
要素を配置するためにBootstrapを使ってみた
前回のエントリーでマークアップ言語を使う練習をしたわけですが、今回はBootstrapを使ってみることにしました。
「具体的に何をどう置き換えたか」というと、CSSで指示していた「ページ上に要素を配置する位置」をBootstrapのGridに置き換えたという感じです。
完全には理解できていませんが、BootstrapへのリンクをHTMLのhead要素に置いて、「これからBootstrapを使いますよ」と宣言すれば「Bootstrap内に登録されている機能が呼び出せる」という感じみたいです。
Web上のレイアウトを調整するための色々な機能があるようですが、今回は画面を分割して配置を調整できるGridという機能を使ってみました。
使ってみた感想
多分、とっても便利（おバカな感想）。
CSSでは、position; absolute:で設定した要素に対して、position;relative:で「absoluteの要素に対して左上からこのくらい離れた位置に置きたいです」という指示を出していましたが、Gridの考え方では「画面を数分割してその分割した要素のうちどこに配置するか」という指示になります。
absoluteとrelativeでは、要素に対して相対的に配置を決定しますが、Gridでは画面に対してどの位置に配置するかということになるので、メディアクエリへの対応もし易いように感じました。
Gridって何？どう使うの？
ろくすっぽ説明せずにGrid、Gridと言っていますが、英語のgridと同じで格子のことです。
画面を格子状に分割して、配置を決定するのでGridと呼ばれているようです。
詳しい説明はBootstrapのGridの項を読んでください、と丸投げしておいて…
使い方としては、HTML上で配置したい要素群を"container"というclassで囲んで、並べたい要素を"rowほにゃほにゃ"というclassで囲む。並べたい要素は、配置に合わせて"colほにゃほにゃ"というclassで囲ってやるという感じです。
"rowほにゃほにゃ"とか"colほにゃほにゃ"とボカしたのは、rowの場合もcolの場合も配置の指示と分割の方法によってrowとcolの後ろに修辞がくるためです。
修辞によっては「この要素を真ん中にしてね」としたり「画面を12分割してこの３要素を均等に並べてね」という指示が出せるようになります。
ここで出てくる「画面を12分割して…」というのは「BootstrapのGrid Systemが画面を最大12分割して要素を配置する」という性質を持っているためです。
CSSを使ってレイアウトをいじらなくても「HTML上でこいつはここに置きたいな」と書くことができるのはとても便利だと思いました。
ただ、個人的にはHTMLが長くなると「あれこれはどこの要素だっけ」となるので、少し困ったりもします。
使ってみて困ったこと
最初は、Bootstrapのファイルをダウンロードして、ディレクトリ（ワークスペース？）に保存、それを参照して指示をだすようにheadを書いていました。すると、当然ですがGitHubに投げた時にBootstrapに対応した指示が適応されなくなってしまいました。
リポジトリにBootstrapのファイルをアップロードすれば解決するのかもしれませんが、毎度毎度Bootstrapのファイルをアップロードするのも面倒だったので、CDNを書いて参照するように変更しました。
「CDNとはなんぞや」と思いますが、自分はよくわかっていません。
リンクを書いておくとサーバにアクセスして勝手に拾ってくれるような感じらしいです。
冒頭に書き忘れていましたが、BootstrapはどうやらJava ScriptとjQueryも読み込まないと機能しないっぽいので、CSSだけではなくて、これらのCDNもhead要素に追加する必要がありそうです。
BootstrapのCDNはこのページにあるので、headにコピペしておけばOKでした。
すこし疑問なのは、ファイルでアップロードしないことによって、例えばgridの指示が"col"から"dol"とかに変わったとしたらそれでもきちんと機能するのかな？ということです。
その場合は、変更の都度CDNも書き換わるのかもしれませんが、ファイルでアップロードしておけば変更の影響を受けないのでは？と思っています。まぁ、こんな初学者の疑問は杞憂なんでしょうが……
なんだか分からないけどJava Script使ってみた
サイコロ２つの画像、サイコロを振るボタン、チャンスカードと共同基金カードの表示と配置は、HTMLとCSS(Bootstrap)で調整できますが、
1. サイコロを振る
2. チャンスカードと共同基金カードをランダムで表示する
というのは、何か関数を使って指示する必要があるな、と感じたのでJava Scriptで書いてみることになりました。
どちらもMath.randomという関数を使って乱数を発生させて
1. サイコロは、1-6の数字が出るようにする。
2. カードは、枚数分の数字が出るようにする。
という指示を書きました。
もちろん全部自分で用意するだけの技術はないので、
サイコロの出目はこちらのブログを参考に、２つのサイコロと合計値を表示させるようにしました。
カードについては、こちらのwebサイトを参考に、チャンスカード15枚分、共同基金16枚分の文章をポップアップするようにしました。
（参考にというか関数に関してはただのコピペですが…）
自分で頑張った部分としては、サイコロ、チャンスカードと共同基金カードの画像を作るというデザイン部分です（JS頑張れよ）。
Java Script：サイコロの出目
上記に書いた通り、サイコロの出目は、1-6の乱数を発生させる関数が基本です。
ところで、関数関数と言っていますが、正しい言葉使いかは不明です。
Java Scriptでは、0からカウントが始まるので、Math.randomだけだと0-5で発生する（と思う）ので、+1しているようです。
モノポリーでは、サイコロを２回振って進むコマが決まるので、この関数を２つ書いて、それぞれのサイコロに適応させました。
暗算が苦手…というわけではないのですが、サイコロの目を見間違えることが多いので、発生させた乱数を合計して表示させるようにしました。
調べるとボタンを押したら「パッ」とサイコロの画像が表示されるコードを書いている方が多かったのですが、参照させていただいた方は、サイコロの目がランダムに表示されてから、出目が表示されるというアニメーションが盛り込まれていたので「これだ！！」とコピペしました。
（勉強用かつ個人でプレイする時にしか使うつもりがないので知財とかは許して欲しいです）
アニメーションの中身は、
1. 20回乱数を発生させる（この時、振るボタンは機能停止）
2. 1を何ミリ秒で切り替えるかを指示
3. 動きを止めて出目を決定、ボタンを使用可能にする
というものでした。
こういうのを自分で考えて「よっしゃこの関数を使うぜ！」となりたいものです。
出目を決定する時点で上記の乱数を１度発生させているようです。
Java Script：カードの内容を表示させる
チャンスカードと共同基金カードに対応する要素をクリックしたらそれぞれの内容をランダムで表示させる時も、サイコロと同じようにMath.randomで乱数を発生させて、対応する文章を表示するという関数になります。
サイコロでは、対応する画像、カードでは対応する文章となっているだけなので、正直中身はそこまで変わっているようには感じませんでした。
Java Scriptでは、alertという関数を使うとポップアップウィンドウが開くので、これを利用して対応する文章がポップアップするようになっています。
対応する乱数は、各カードの枚数分になりますが、0から乱数が発生するのでalertに対応する要素は0からなので、1枚目は0に適応させて書くことになります。
Java Script：乱数を整数にしたい
発生する乱数は、小数点以下を含む乱数のようで、どちらの関数にしてもMath.floorという限定がかかっています。
これによって、生成される乱数が整数に丸められることになります。
Java Script：改善案
まず１つ目は、サイコロについてで、
モノポリーには「ゾロ目の時は再度サイコロを振り、３回連続してゾロ目が出た時は刑務所へ入る」というにルールがあるため、サイコロ１と２で３回連続して同じ整数が出た時に"GO TO JAIL"という文字をポップアップするようにしたいです。
if サイコロ１==サイコロ２が３回起きる時 = 文字のポップアップ
としたらいいのかな、と考えていますが、まだよく分かっていないので未実装です。
216分の1の確率で起きることなので、かなりレアケースになりそうですが…
改善案の２つ目と３つ目は、カードについてで、
１つは、今は文字が完全にランダムでポップアップするので、重複して同じ文章が出ることがあります。これを重複を許さないように生成させることで、少なくとも山のカードが全部出るまでは重複しないようにしたいです。
これは、Math.randomではなく、カードに対応する数字か文字を入力して全て出きるまでランダムに選ぶような関数を使えば実装できるような気がします。
（15枚のカードなら15P15の順列になるのかな？）
ただ、いつも遊んでいるモノポリーのルールでは「一度引いたカードは山の下に入れる」ということになっているので、さらに「一度目のクリックで並び替えをランダムにするが、ウィンドウを閉じるまでは同じ並び順を守る」という指示が必要になります。
これはどういう関数を使うのか皆目見当も付かないので多分、実装できません。
最後は、モノポリーのルールに即した改善というよりは、プレイ性の向上という点での改善です。
今は、alertを使って文字をポップアップさせていますが、これでは文字のサイズが小さかったり、任意の画像を差し込むようなことができないので「任意の装飾を施した文字をポップアップさせたい」というものです。
調べてみると、「ボタンを押したらランダムに画像を表示する」というものがすぐに出てきますが、自分たちでルールを改定して書き換える時に逐次画像を作成する必要が出てくるので「嫌だなー」という気分になります。
固定の文字についてはポップアップさせるコードが見つかりますが、これを乱数に適応させてランダムに…というものは出てきません（探し方が悪いのか？）
コードを書き直す手間と画像内の文字をちょっと書き直してアップし直すだけなら、数十分の差で変更できるような気もするので、前者の画像をランダムに表示するというコードで対応すればいいのかな、という気分にもなります。
ただ、それだと「どこに表示するのか？」という別な問題も生まれるので、ルールが固まるまでは一旦ペンディングしています。
おまけ：favicon
前回のエントリーで作ったHTMLとCSSの練習ページでは、Github PageのURLを共有すると、文字を書き込むために使った背景画像がアイキャッチのように表示されてしまいました。
これはなんとなく格好が付かなかったので「アイキャッチの設定ができないかなー」と考えて、色々調べてみたらfaviconという言葉にぶち当たりました。
どうやらwebページを表示した時にタブとかに表示されるようなアイコンのことを指すようで、自分が思っていたアイキャッチとは違いましたが、練習がてら作ってみました。
作ったと言ってもこちらのサイトに画像をアップロードして適当にHTMLに貼り付けただけですし、見ている限りでは機能していないので、アイキャッチの登録はまた別でやる必要がありそうです。
今回もGithubに全部投げてみた
今回も前回同様、Githubにリポリトリを作ってPagesを作ってもらいました。
めちゃくちゃ便利だな、と思ってます。
一応、作ったものは、こちらから見れます。
上記の内容は現時点での実装内容なので、随時仕様変更していく予定です。
感想：Java Script難しい
Bootstrapもよくわからなくてgridだけで諦めましたが、CSSでできる色々なレイアウトとか修飾ができそうです。面白いし、とても便利だなと感じました（アホな感想）。
Java Scriptについては、今回は整数をランダムで生成するだけの関数しか作りませんでしたが、それでも「こんなものがあるのかー！なるほど！」となるだけで、言語のルールとか内容が理解できる訳ではありませんでした。
個人的には、言語学習はまず沢山の用例に触れてそこからルールを学んでいくのが、近道だと考えているので（これは自然言語にしか通用しないのかもしれませんが）、まずはこれでいいかな、と考えています。
クリックした時にランダムで何かが起きるのはとても見ていて楽しいです。
自分で合計値を表示できるようになったのは「１つだけ進歩かな？」と感じました。
小さな自信と実感を大切に少しずつ学んでいきたいです。
