報告：ブログを書いていない間にやったこと

統計ってなんだっけ…？

・統計学の復習

なんとなく「正規性」「等分散性」の確認と「p値」と「有意差」で統計処理している気になっているけれど、なんだっけそれ？というのをもう一度確認する時間を取りました。
「確率変数」から「重回帰分析」まで一気に駆け抜けて『統計学基礎』を確認した形になります。報告でしかないので、内容までは突っ込みませんが…

1) 確率変数ってなんだっけ

とは書いたものの少しだけ。確率変数のうち「あ〜」となったのは、離散型と連続型です。
「あ〜」ってなるなよ、という突っ込みはさておき。
離散型は、サイコロの目が１、２、３、４、５、６と独立しているようにバラバラな数。
連続型は、ある人の体重みたいに58.3 〜 60.2 kgみたいに無限に値を取りうるやつ。
離散型は、確率分布を表にまとめることができるけれど、連続型はグラフになっちゃう。
みたいな感じです。まぁ、あんまり細かく考えなくてもデータはデータです（暴論）。

2) 母集団と標本

母集団と標本はそこまで難しくないですよね。例えば、日本の人口を母集団と捉えて東京の人口を見るみたいな（ちょっと違う気もするけど…）。この場合は、だいたい数字が分かるけれど、自分が職場で扱っているデータは母集団の数は無数にあって、そのうち幾らか取り出してきた標本から母集団の傾向を知ろう、というような感じでした。
なので、仮説検定がメインでした。これは後で書きましょう。

3) 母数ってなんだっけ

母数は、母集団の平均や分散などの傾向のことですね。標本からはそれ自体を知ることができないので「このくらいかなー」と推測することになります。

4) 対応のある・ないと共分散

共分散とは！ちょっと調べりゃ分かるんですが、学生の体重と身長のように対応のあるデータの間の関係を示す数値のことです。対応のあるとは「集団Aに薬を飲ませた時と飲ませる前の血糖値」のような被験者が同じだけど条件が違うパターンみたいなやつです。
「対応のない」でいうと、AさんとBさんの血糖値みたいな全く違う人の同じ条件で得たデータみたいな感じです。

5) 等分散ってなんだよ

等分散ってなんでしょうね。バラツキ具合が一緒って感じですか？正直、よくわかっていないままルビーンだとかバートレットだとか検定にかけて「ほらp値を見てよ。これは対立仮説を採択するんだよ」とか偉そうに言っています。ちなみにRではF検定できたと思いますが、pythonはパッケージにF検定がないのでバートレット一本で戦うことになりそうです（Rからpythonに頑張って乗り換えてみた）。基本的にサンプルサイズの大きい多重比較しかしてこなかったので、だいたいバートレットでした。
ということで、等分散ってのはよくわからないままです（ダメだ！）。
*説明できないだけで本当は少しだけ理解しています。

6) 正規性ってなんだよ

「あ、このヒストグラムを見る限りベルカーブに近いから、正規分布しているね」とか「qqプロットしてみたら直線上に並ぶからこれは正規性があるね」とか偉そうに言ってみますし、「このサンプルサイズならシャピロウィルクだね」とか言います。サンプルサイズがすごく大きいことなんてほとんどないので、コロモグロフスミルノフなんてほとんど使わないくせに威張り散らしています（威張ることではないのでこれは嘘です）。
検定だとかヒストグラムだとかプロットだとかで「正規性正規性」と有難がっていますが、だからなんなの？というところは、正直パラメトリックな検定になるのか、ノンパラメトリックな検定になるのかを分けるリトマス紙でしかないような気がしています。
これもよく分かってないままです（ダメダメだ！）。
*これも説明できないだけで本当は少しだけ分かってます。

それで何ができるようになったの？

正直、何が出来るようになったというわけではなくて、どうやって何をしたらどうなるのか、今まで「ほえー」と思いながら、てれーっと検定していたことにぼんやりとした輪郭が見えるようになったという感じです。
当たり前なことだけどすごく大切なことだな、と感じることとしては

• 標本は分かって母集団は推測
• 標本数は群の数、標本サイズはn=50とかのやつ
• 帰無仮説と対立仮説の確認と採択できたからと言って「確実にそうだ」とは言えない

というようなことでしょうか。この辺は正直、検定しながら毎日感じていたことなのでそこまで重要じゃないような気がします。
だけどちょっと気を抜くと「お！p値が小さい数だ！これはすごいデータに違いない」と舞い上がったりしてしまいそうです。「有意差があるかないか」というか「帰無仮説が棄却しないか、対立仮説を採択するか」の違いでしかないということを忘れてしまってはいけないだろうな、と思います。

Java Scriptとか触らず備忘録も書かないでこれしかやってないの？

いや、そんなことはないです。気持ちの悪い自問自答ですが…統計学の基礎を振り返るのに時間を使ったのは事実ですが、それ以上にやりがいを感じたのは、Rからpythonへの切り替えとして、ATOM（テキストエディタ）を使って多重比較検定が出来るところまで詰めたことです。ATOMは残念ながら2022年12月に開発終了してしまうので、今は不本意ながらVScodeを使っています…R studioじゃないと満足に仮説検定が出来なかったところから、環境構築から頑張ったのはちょっとだけ誇らしく思います。出来て当たり前なことかもしれませんが…
そのあたり、近いうちに備忘録としてまとめていきたいと思います。

課題:ダイスの数値に対して任意の画像を表示させたい

麻雀が大好きなのでどこからツモるか表示してくれるwebアプリが作りたかった

サイコロを振った時にどこからツモるかいつも分からなくなる

「何を言ってるかわからねぇぜ」という人は、きっと麻雀をしたことない人だと思います。
あとは、ちゃんと自5とか対7とか一瞬で判断できる人には無縁なwebアプリです。
今回は、麻雀で振る２つのサイコロとサイコロの目に合わせて、どの家から積もるかを表示してくれるwebアプリの開発（というのはちと烏滸がましいですが…）です。

２つサイコロを回す

これは、すでにこちらのエントリーで書いてる通りにサイコロを振るスクリプトを適応させます。
簡単に説明すると、math.randomで数字をランダムで発生させて対応する画像を表示させるスクリプトです。
これを応用して「対応する数字に対して東家・南家・西家・北家を赤く表示させたい」という要件を満たします。

ダイスの合計に対して家を表示させる

ダイスロールでは、1-6に対応する画像を作り表示させる方法で、ダイスロールを実現しました。
また、その右隣に２つのダイスの合計値を表示するようにしています。
これをそのまま使って、合計値に対応するように、各家を赤くした画像を用意します。
言葉では伝わりにくいですが、最後の成果物を見れば多分一目瞭然です。
合計値に対応させるために、5,9で東、2,6,10で南、3,7,11の時に西、4,8,12の時に北が赤く表示された画像を表示させるスクリプトを組みます。
この記事を参考にして、if orで各数字の時に画像を表示させるスクリプトを組みました。
例えば、東ならif (合計値 == 5 || 合計値 == 9) {$idに対して画像のパス}という風に書きます。ここは、合計値 == 5 || 9でもいいのかもしれません（確かめてない）。
あとは、if elseで同じことを南、西に。最後の北はelseで「それ以外の時は北にしてね」という分枝を作ってあげます。
すると、voila！できました。

if文での困りごと

「orが"||"」だとか「andは"&&"」とか「notは"!"ですよ」というのは「なんで！？」と思いました。「and, or, notでいいじゃん？」と感じます。まぁこれは言っても仕方ないことですが…
実際、最初にif orを書いた時、"||"という記号があることに気付かず、"or"で書いて「はぁ…なぜ動かん？」と思いました。
まぁ、英語の感覚的には、or or orとorが続くのは気持ち悪いのかな？という気はします… 
英語が苦手な人は「この数字"と"この数字の時」と考えてしまって「&&で書いちゃうかもなー」というのも感じました。
試してないですが、多分これをやると「この数字"かつ"この数字の時に」という指示になってしまいます。
if elseで感じたのは、if、if else、elseというのはよく考えられてるな、ということです。
ifで「もしもこの時は」、if elseで「(ifの時とは違うけど)この時は」と追加することができて、elseで「ifでもif elseでもない時は」という指示がかけるのは単純明快でよかったです。

最初に失敗したこと

「ダイスロールと家の表示は、HTML上では別のidかつ表示場所も違うから、Java Scriptでも異なる場所に書くことになるのかなー」と感じて、別のletとfunctionの中に入れようとしてしまいました。
言葉では説明しづらいですが、let ダイスロール; function {ダイスロールのためのスクリプト}とlet 家の表示; function {ダイスロールの合計値と家の表示のためのスクリプト}と書いてしまったという感じです。
いい加減ブログの記事上にスクリプトを書けるようにしたい。
ということで、まぁなんとか「ダイスロールのfunctionの中に家の表示を入れるんだ！」

と気付いて実装したわけです。

成果物:サイコロに対して家の表示をするwebアプリ

サイコロは、実際に降って牌山にカツンと当たるのが気持ちいいのもありますが「1, 2, 3, 4…12」と数えて家を確認するのも時間がかかって嫌ですし「右回りだっけ？左回りだっけ？」と考えるのもなんだか嫌だったので、webアプリをササっと作りました。
今回は、ダイスロールのスクリプトをモノポリーツールで作っていたこと、合計値に対して画像を表示させるのもダイスロールと同じ作りなことから、比較的簡単に作ることができました。

さて、いつも通りgithubに突っ込んで、pagesを作り終わりです。

Off the Track:自然言語の学習と人工言語

自然言語（英語・西語）と人工言語

英語と西語の学習経験

英語は割と得意な方だ。
中学・高校とサマーコースに参加させてもらえたり、大学はサマーコースと１年間の交換留学を経験した。小学五年生の頃から英会話教室に通わせてもらい英語の学習には長い時間を割いてきた。
分かりやすい指標で言えば、TOEICのベストスコアは955点で、TOEFLは81点とかだった気がする。
TOEICは就活前(2019年頃)に、TOEFLは留学前(2015年頃)に受験した結果なので、今はまた変わっているかもしれない。
こういったテストの結果は、分かりやすい指標なので他人に伝える分には使いやすいが、英語の力を示すには物足りないようにも感じる。
逆に考えると、ここまでやってもこの程度のレベルなのか、と思う方もいるかもしれない。
まぁ、とにかくこれが自分の英語学習のフレームとレベルだ。

西語の学習については、アメリカ留学の１年の間に初級レベルのコースを１年間かけて受講した。
第二言語で第三言語を学んだ経験は、言語学習の本質を捉える上で重要な経験となっている。
特に、母国語を英語とする生徒が第二言語として西語を学習している環境と対比して西語を学ぶスピードは少しだけ早かったように感じる。
西語はそれ以降学習していないので、ほとんど覚えていないが、聞いてある程度理解できるレベルには留まっている。

自然言語の学習のコツ

自分は言語学を専攻していたわけでも、英米文や西語を専攻した訳ではないので"学術的に正しい学習方法"というのは全く検討もつかない。
ただ、これまで英語を勉強して、西語を学んだ時に感じたことを書いていく。
こうした言語（表音文字を使う言語）を学ぶためには

1. 音の成り立ちを理解する
2. 長文、例文の中からフレーズ・単語を集積する
3. 語順の理解
4. 文法（特定ルール）による変化の理解

を上から順に行う必要があると感じている。
表音文字（アルファベットなどそれ自体では意味を持たず音を示す文字）では"音"が重要になる。
表意文字（漢字など１文字がそれ自体で意味を持つ文字）を使用する日本語では、単語を１文字と捉えて集積しようとする癖があるように感じているが、表音文字の学習ではまず音の成り立ちを確認していくことが重要だ。
次に、フレーズ（特定の言い回し）や単語を集積していく。
この作業は、短文や長文を読み下す中で学習していくのが一番効率が良いように感じられる。
どういった文意やシチュエーションで使われる語句なのかを知ることができるためである。
語句を集積する中で、一定のルールに気付くことができるはずだ。
これが、語順であり文法による制限（過去や未来など文意による変化）である。

もちろん、人によっては、単語を単語帳などで集積していって長文に当たるのがうまい人もいるはずだし、文法を深く理解していくなかでその言語の真髄に触れることができるタイプの人間も居るだろう。
自分の場合は、表意文字話者として、表音文字言語を学んでいくためには、上の４ステップで学んでいくのが最も効率が良かった。

自然言語学習のステップを人工言語の学習に応用したい

自然言語の学習の段階を捉えることができたので、これをプログラミング言語などの人工言語の学習にも応用できないか考えてみることにする。

1. 音の成り立ちの理解について

音の成り立ちについては、言わずもがなプログラミング言語は発話することがないため、不要なように感じる。ただし、スクリプトライター（？）同士の会話上、齟齬があってはいけないため必要最低限の発音は身につけておくべきだろう。
i.e.) GIFがジフなのかギフなのか、widthはウィドスではなくてウィズだろうとか

2.フレーズ・単語の集積について

ここが最も重要だと感じられるステップだ。
言語を理解していこうとする過程で強く感じるのは「この時はこう」という形式がある程度固まっているということだ。
自然言語であれば、一つの事象を説明する場合、複数通りの言い方をすることができる。
i.e.) 行く、向かう、訪れる、参る…… / go, visit, trip, come ……

プログラミング言語でも数通りの書き方があり、それぞれの流儀に合わせて使い訳が存在するような気がしないでもないが、Java Scriptならループ文はこう、R言語ならこう、という形式が存在するだろう。
同じ結果を想定していたとしても言語や環境が異なれば、別の「言い方」になることもあるため注意が必要だ。
ただし、これは西語では同じ単語がチリとペルーでは別の意味を持つことがあったり、英語であっても米国と英国では言い回しが異なることに準じるので、学習上大きな違いであるようには感じない。
もちろん、この場合は、同じ単語であっても結果が違う点で、因果関係が逆転しているとも言えるし、ヒトの適応力によって文化背景を推察し「こう言いたいんだな」という推論が可能な点で異なる事象とも捉えることもできる。

ここで一貫して主張したいのは、QiitaやCodePenを見て実際に得られる効果を確認しながらスクリプトの例文や単語（指示文？）の使い方を肌で学んでいく必要があるということだ。
努力主義（？）の人によっては、まずは言語の特性や環境を深く理解して、何が出来るのかを学習した上でフルスクラッチでコードを書く必要性を説いている場合もあるだろうが、自分の場合はまずはコピペで「ここにこういうコードを仕込むんだな」という体験を集積して行くほうが学習上しっくりくる。

3.語順の理解および4.文法による変化の理解について

ステップ２で集積していったフレーズ、単語について、いつまでも検索→コピペで対応するのでは、その言語が身についていくとは考えられない。
時間をかければいずれ血となり肉となるのかもしれないが、自分の場合はそうではないだろう。
知識や言語は、そのルールや本質を理解してやっと身につくものだ。
集積した情報を分類分けしていき、よく使うものから「どういう時に使っているのか」「使う上で必要な指示は何か」という情報を抽出してく。
i.e.) Java Scriptでは、Math.randomで乱数を生成できるが、Math.floorで整数に丸めてやるということや、もっと簡単なことで言えば:や;の使い方()と{}の使い分けなどもこういったルールに含まれるだろう。
そして抽出した情報（傾向）を体系的にまとめてルールブックのようなものを作成する。
これは実際に記述してもいいし、習慣付けてもいいだろう。

所感:誰しもに当てはまるのかは不明

自然言語と人工言語では、学習のスキームは共通していると感じている。
感じてはいるのだが、これで本当に自分の英語レベル（一般に高いとされる水準）までプログラミングのスキルが伸びて行くのかはわからない。
実際、自分の英語力が伸びた要因としては、10代からの課外学習と短期・一年を含む留学経験、および大学・大学院で積極的に日常会話をした経験から身についたものであることから考えると、スキルアップには非常に時間がかかることが伺える。
一方で、西語を英語で学んだ経験から言語学習のフレームを自分なりに理解できたし、西語の学習スピードは他に比べて早かったことから、このステップは自分に合っていることもある程度確認されている。
また、プログラミング言語が無秩序に構成されているわけではなく、英語ベースで開発されていることや（日本語に比べて）多くの情報が英語で集積されていることから「英語がある程度理解できる」という状態は、プログラミングの学習にポジティブな影響を与えるだろうと予想できる（ただし、この下駄を履いて速く走れるかはまた別の問題だ）。

もちろん「英語ができる」ことが「プログラミング言語の学習に圧倒的有利だ」と言える場合、多言語話者に比べ英語話者に高いプログラミングの適正があることになってしまうし、一概にそうとは言えないだろうという直感から言えば、プログラミング言語学習の適正に「英語力」は強い影響を及ぼすとは一概には言えない。
ただし、「第二言語を学習し自分なりにそのステップを噛み砕いた」という経験はポジティブには働くだろう、という希望的観測をしている。

非常に雑文、乱文、大阪人のいうところ「知らんけど」という一言で締めくくられるような文章になってしまったが、プログラミングの学習の初期ステップで感じていることについてまとめてみた。
これから自分の考えがどう変化して行くのか、自然言語の学習経験がプログラミングの学習に実際に与えた影響について、今後まとめることができたら自分にとって糧になるだろう。

課題:Java Scriptを使って音声データを流したい

くだらない音声を流すためにボタンを押したら音が流れるようにしたかった

クリックしたら音声が流れるJava Scriptを書く

今回は、目次も必要ないくらい簡潔な内容です。
ただただ、HTMLでボタンを用意してボタンをクリックしたら音声が流れるだけのwebアプリを書きました。
まずは、ランダムに音声データが流れるための機構。
Java Scriptのコードは、相変わらずコピペで対応。
今回も知恵袋が役に立ちました。ありがとう、知恵袋。いつも助かってます。
こいつを仕込んで、ランダムの音声は終わり。
今回も要素を並べて、math.randomで作った乱数をmath.floorで丸めて発生させるところまでは同じで、.playで音声が再生される仕組みのようです。

次に、ランダムで流れる音声を個別に流すための仕組みを組み込むことにしました。
組み込むというか、それができそうなコードをコピペするだけですが……
こちらの記事を参照して、スクリプトを用意しました。
今回流したかった音声ファイルは、４つだったのでHTMLのbuttonを４つ用意して、それぞれに音声ファイルを対応させます。
Java Scriptでは、対応するHTMLをidで取得してwindow.onloadで指示したfunctionが機能するようにするスクリプトのようでした。
コピペを４回して、ボタンを作り、最後に音声ボタンが機能することを確認しました。

音声が流れない

さてさて、できたボタンを上から押していくと、最後のボタン以外は全く効かないことに気づきました。
すると、どうやらwindow.onloadは重複しないことが判明しました。
「だいたい、いつもaddEvenListenerという指示だったのに今回は違うんだな…」と思っていたところだったので、onloadの部分をaddEvenListener{'load', function(){に書き換えて、voila!うまくいきました。
と思ったら、今度は、作ったボタンのうち最初の２つが効きません。
「うーんなんでだろう？」と思い、とりあえずChromeで検証すると、どうやらJSが効いてないみたいです。
「そんなはずは…下の２つは効いてるのに！」と思いながらググってみると、どうやらHTMLが上から流れて処理されてくる間に順序の問題でJSが効かなくなることがあるようです。
idよりも先にclassをつけてCSSで形式を整えていたので、classとidを入れ替えてみることにしました。
するとどうでしょうまるで何事もなかったように音声が流れるではありませんか！
ということでランダムに流れるボタン、それぞれ流れるボタンが実装されました。

改善案

今回のスクリプトでは、音声を連続再生できません。
ボタンを押すと音声が１度流れ、１−２秒待たないとボタンを押した時に最初の数ミリ秒が欠けた状態で再生されます。
これではあまり面白くないので、「ボタンを押したよ〜！」という音声がDJのスクラッチみたいに「ボボボ、ボボボ、ボタ、ボタ、ボタンを、ボボボ」とできるようにしたいですね。
（どうやるのかはさっぱり分かりませんが……）

まとめ:今回はランダムだけじゃなくて1対1対応

これまでモノポリーツールを作っていると、ゲームの都合上、整数に丸めた乱数を発生させて対応する文章や画像を表示させる必要がありました。
今回は、別に制約があるわけでもないので、ランダムに再生する機能と１対１で対応する機能を載せてみました。
音声ファイルは自分の肉声であること、あまりにもくだらない内容のため、いつものGithubアカウントにさえ投げず、新しいアカウントを取得してPagesを立ち上げました。
なので「今回はこんな奴です！」というアピールは避けることにしましょう。

課題:モーダルウィンドウって何？

モーダルウィンドウをJSで実装したかった

モーダルウィンドウを実装したい

前回のエントリーで、モノポリー支援ツールのチャンスカード、共同基金カードの内容をalertで設定すると、ポップアップする文字が小さい上に編集できないということを書きましたが、それを改善するためにモーダルウィンドウというものを実装してみました。
大正義wikipedia先生に聞いてみると「モーダルウィンドウとは、子ウィンドウとして開かれるもののうち、ユーザがそれに対して適切に応答しない限り親ウィンドウに戻さないもの」ということらしいです。
そういう意味では、『閉じる』を押さない限り消えてくれないalertによるポップアップウィンドウもモーダルウィンドウのような気がします。
…ということはこの表題は間違っているんでしょうか？
まぁ、とにかくやりたかったことは、モノポリーで使用するカードの内容について
1. 任意の書式で表示させる機能を実装したい
2. 同じ画面上ではなくポップアップさせたい
という２点です。
Java ScriptとCSSを使って、このモーダルウィンドウを実装することができました。

今回もどこかの誰かのスクリプトを盗んだ

何か新しいことに向き合うときや勉強するときは、常に「ないなら作れ、出来ないなら盗め」という言葉を胸に何かを模倣して、自分の求める形になるまでいじり倒すということをしてきました。
今回も、まずは盗むところから始めました。
"Java Script モーダルウィンドウ ランダム"という非常にアホっぽい検索をかけた結果、
「jQueryでモーダルウィンドウの中身をランダムに表示したい」という知恵袋の投稿が目に飛び込んできました。
ベストアンサーの方は、とても優しい方のようでサンプルコードまで挙げてくださってます。
これに飛びつかない手はない、そう思ってコピペして貼り付けます。
すると今までとは違うことに気がつきます。

<script></script>って何

どういうことでしょう、先に挙げた知恵袋の回答では、HTML内に<script></script>で囲ったJava ScriptとCSSが！
こんなものは初めて見ました…すみません、初学者なもので…
ということで、こいつをJSのファイルとCSSのファイルに分解することから始めました。
というか、至って単純で、<script></script>で囲われた部分をそれぞれ別のファイルにして、srcとして設定するだけです。
でもうまくいきませんでした。
うーんどうしてだ？と悩みながら、いじくり回していると、どうやらCSSのsrcがstylesではなく、styleとなっていてリンクされていないだけでした。
ここで学んだことは、CSSとJS(jQuery)が相互に働くということです。
勝手に点でバラバラの支持をHTMLに対して、こっちからあっちからしているだけだと思い込んでいたので、JSのファイルだけでモーダルが動かないことに焦りました。

Java ScriptとCSSに分解したのでモノポリーツールに適応させる

ここからは割と簡単でモノポリーツールのHTML、Java ScriptとCSSに分解した要素をコピペしていくだけでした。
一つ工夫した点としては、input要素で作っていたカードのボタンをbutton要素に書き換えて、type=imageから<button></button>の間に<img>で画像を指示し直したくらいです。
あとは、サンプルコードの通り、15個くらいある要素をHTMLに記述して、終わりのはずでした。
でも、どうやってもモーダルウィンドウがウィンドウとして機能せず、HTMLに記述した内容がそのまま表示されてしまいます。
どうやら、jQueryが適応される範囲の中に、自分で書いた.jsファイルとCDNで記述したbootstrapのJava Scriptの部分が競合していたようで、書いた方のjQuery要素が効いていないようでした。
「Bootstrapを使うときはjQuery、popper、JavaScriptを必ず記述しましょう！」とあったので、非常に不安ですが「欲しいのは、gridだけでCSSっぽいし、いいや！えいや！」と消してしまいました。
その結果、gridで指示した書式は保ったまま、自分で書いたコードが動きました。
やったね！これで小さな文字からは解放されました。

またGithubに丸投げ

いつも通りGithubに放り投げてsafariでpagesを確認すると、
「えーーー！モーダルウィンドウになるはずの部分が全部表示されてるー！！」という状況に。
検証するためにchromeで開きなおすとうまく表示されています。
"Safari Chrome モーダル"で検索すると「chromeではうまくいくのにSafariでは…」というような文言が散見されていたので「あーこれは仕方ないな諦めよう」と諦めました。
諦めて「まぁダメ元で」とipadのsafariで開いてみるとうまく表示されています。
「これは自分のmac book airがおじいさんすぎてsafariのアップデートが出来てないのかぁ？」と思いつつ再度pagesを開くとうまく表示されていました。
なんだったんでしょうね、よく分かりませんがうまく表示されたのでOKです。

これからの課題

jQueryを使ってモーダルウィンドウを実装することはできましたが、内容はよくわかっていません。この辺りの学習が最優先事項なのは確実として、まだ問題は山積みです（自分で積んでいるだけですが…）。

サイコロ問題

Pagesを表示して、最初にサイコロを振ると、書式が一瞬だけ崩れる問題が発生するようになりました。
これを解決したいな、というのがまず第一です。
次は、前回のエントリーでも書いた「３回ゾロ目でGO TO JAIL」の実装です。
あとは、ウィンドウサイズが小さくなっても小さくならないサイコロの画像問題です。
iPhoneの画面上でみると、サイコロがおばけのように大きく表示されます。
(まぁ、正直小さい画面で使うのを想定していないのでいいですが…)

カード問題

カードの内容をモーダルウィンドウにすることはできました。
これで、HTMLに書いた内容をCSSで修飾することが可能になったと思います。
また、画像を挿入することもできそうなので、凝った表示をすることも可能になりました。
HTMLがどんどん長くなっていくことは仕方ないとして、デザイン面では趣向を凝らしたいところですね。
ロジック面では、カードの内容が重複して何度も表示される問題は解決していないので、関数をイジって重複のないランダムの関数に変更する作業が必要になります。

まとめ:HTML内にscriptで書かれるとやっかいだった

表題は非常に勝手な感想ですが、JSとCSSに分ける方法がよく分からず苦戦しました。
単純にリンクが変だっただけですが、それでもすごく悩みました。
こんな表記もあるんだな、ということが知れてお得だったのでありがたい限りです。
モーダルウィンドウで表示されるようになったので「閉じる」を毎回押す必要もなく、ウィンドウの外をタップして復帰できるようになりましたし、文字の大きさや任意の修飾ができるようになったのでゲーム性も向上すると思います。
一つ気になったのは、今回の方法だとHTMLが長くなっていくことです。
マークアップ言語に書いて、それを後から修辞していく方法なので理にかなっているような気もしますが、書方次第では「もう少し短くできないかな？」と感じています。

課題:Bootstrap & Java Scriptにアタック

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については、今回は整数をランダムで生成するだけの関数しか作りませんでしたが、それでも「こんなものがあるのかー！なるほど！」となるだけで、言語のルールとか内容が理解できる訳ではありませんでした。
個人的には、言語学習はまず沢山の用例に触れてそこからルールを学んでいくのが、近道だと考えているので（これは自然言語にしか通用しないのかもしれませんが）、まずはこれでいいかな、と考えています。
クリックした時にランダムで何かが起きるのはとても見ていて楽しいです。
自分で合計値を表示できるようになったのは「１つだけ進歩かな？」と感じました。
小さな自信と実感を大切に少しずつ学んでいきたいです。

課題:マークアップ言語って何？

HTMLとCSSとプログラミング言語

HTMLとCSSはマークアップ言語らしい

前回のエントリーから１ヶ月と少し。
Atomというテキストエディタを仲間に迎え入れて、HTMLとCSSでなんちゃってwebページを作ってみた。
HTMLは、head要素、 body要素、HTML要素で構成されるマークアップ言語。
/とか<>とかを多用する割には、どうやらプログラミング言語ではないらしい。
head要素とHTML要素は、webページ上には表示されず、見せたい部分は、body要素に書く。
はてなブログのHTML編集を覗くと、なんだか自分でも書けそうだが面倒なので見たまま編集で書いてしまう。
「かける必要のない労力は省いて勉強しよう」というのは良いことかもしれない。

それから、このHTMLのbody要素に色をつけたり、形を変えたり、並び順を指示したりして、
webページ上で表示される情報の形を整えるのが、CSSというマークアップ言語らしい。
こいつも、;とか:とか、.なんちゃら{}とか使うくせにマークアップ言語であってプログラミング言語ではない。
別にプログラミング言語が偉いと思っているわけでもないが、マークアップとプログラミングは違います、と言われると「えーどこがどう違うの？なんか囲ってるじゃん」と思ってしまう。
この辺りは、変数とか計算とかそういう類のものが入ってきて初めてプログラミング言語なんだろうか？

HTMLを書いてみた

Atomを開き、index.htmlというファイルを作る。
嘘だ。HTML5★Boilerplateなるサイトからテンプレートを拝借した。
そこから、自分なりに「え、ここ要らないでしょ」という部分を消していった。
すると、<!DOCTYPE html>という宣言（「こいつはHTMLだ」という意味だろうか）と、
<html lang="ja" dir="ltr">のみが残った。
そこに<head></head>で囲んだhead要素と<body></body>で囲んだbody要素を書いた。
仕上げに</html>で閉じて最低限の準備は整った。
head要素には、<meta charset="utf-8">なるものを書いた。これは、本当に全く意味がわからない。
DOCTYPEは、多分document typeで「この文章はHTMLです」と言いたいんだろうな、と分かるし、
langはlanguageで、jaはjapanese、dirはdirectoryでltrはlitretureだろうか？と勝手に思い込んでいる。多分、「日本語で書きます」と言いたいんだろう。
でも、meta charsetは意味がわからない。metaは何か超越みを感じるし、charsetは、character setとかそういう意味だろうか？
だとしても、uft-8は全く意味がわからない。
ただ、調べると「HTMLはこう書いて準備完了です」とあったので、疑問を持たずに真似をした。

まぁ、この辺はどうせ見えない部分なので、body要素を頑張って作ることにした。
初めてのwebページ作成となったが、そもそも書きたいことがない。
いや、一つだけある"Hello World"だ。このセンテンスだけは、誰もが書いている。
これを書かない手はない。
その他は味気ないが、勉強したいことの羅列にすることにした。

CSSで修飾していく

HTMLで書いたbody要素は、CSSで修飾していくことなる。
CSSはHTMLとは別のファイルで作成し、HTML上のhead要素に「このCSSファイルを読み込んでね」という指示を書き込んでおく。
CSSで出来ることはかなりたくさんある。
改行やら文字のある程度の大きさは、HTMLでも指示できるが、ウィンドウサイズに合わせて文字を変えたり、色を変えたり、カーソルが近づくと光るボタンみたいにしてみたり、要素を並べたり、ある要素を基準に別の要素を配置したり、そういうことがCSSには出来る。
正直、こんなことができますよ、と言われても、意味が分からない。
「これをするためにはどうしたらいいの？」とググりながらの作業になる。
この辺りは、言語学習っぽいので、楽しかった。

ウィンドウサイズに合わせて変化する仕組みを組み込む

CSSで色々書いているうちに、文字を全てvwで指示する癖に気づいた。
なんとなく、ウィンドウを小さくした時には、文字も小さくなってほしいし、大きくした時には、大きくなってほしいという心理が働いたのだ。
ということで、vwで全部の文字の大きさを指示してみたが、それだけでは何か面白くないし、
CSSの使い方を調べていくうちに「PC、スマホ、タブレットはそれぞれウィンドウサイズが異なるので、その大きさに合わせて配置を変えてみましょう」というような説明にたどり着いた。
なんだそれは。どうやってやるんだ。
CSSには、メディアクエリといって「このウィンドウサイズの時は、こっちの指示で動いてね」という書き方が出来る機能があるらしい。
自分には難しすぎたので「このpxサイズ以上の時は、こっちのCSSファイルを開いてね。こっからここまでは、このCSS。それ以下は、これでお願いします」と3種類のCSSファイルを作って対応することにした。
これで良いとは思えないが、仕方ない。

（Webデザインを生業にしている知り合いから、Bootstrapを勧めてもらったので、次に勉強するのは、これになる)

全部まとめてGitHubに放り込む

HTMLとCSSでなんとなくwebページっぽいものが出来たので、GitHubというなんだかよく分からないけど素晴らしいっぽいサイトに放り込んでみた。
こいつは、優秀でindex.htmlのファイルを探してwebページを作ってくれる。
今までは、safariやらChromeでindex.htmlを開いてオフラインで確認していたが、webページを作ってくれるとオンラインから確認できるようになる。
Practice_webPageが成果物だ。

感想

非常に味気ないwebページを作ってみた感想として、

1. HTMLもCSSも最初は意味が分からないがルールが分かれば書くことはできる。
2. Webページを作るのには、言語以上にデザインセンスが問われる。
3. 「これどうやるんだろう」と閃けば大体やり方はネット上に落ちてる。
4. とりあえず作ってみればHTMLとCSS、GitHubが機能する。
5. 調べながら作業すると疲れる。
6. モニターの光は目に悪いし、PCの前に座ってキーボードを叩くと肩が凝る。
7. これからプログラミング言語を学んでいくと思うと恐ろしい。

ぱっと挙げると以上の７つくらいの感想になる。
HTMLとCSSは入門レベルなら、多分そこまで難しい言語じゃない。
指示が英語そのままなので、英語ができればほとんど困ることがないんじゃないかな。
というか、英語ができないと、CodePenとかBoilarPlateとか参考になりそうな面白いサイトが読めないかも。
でも、Qiitaを使ったりうまく検索できれば、日本語で役立つヒントに出会えるのでなんとかなる（多分）。
CSSはできることがすごく多そうなので、沼にハマると楽しくて抜け出せなくなるだろうな、と感じた。

次回は、Bootstrapを使ったwebページの作り方を勉強していく（つもり）。