[JavaScript] はじめてのJavaScript その2

tomo

2021年4月15日 10:53

こんにちは。tomoです。

前回までのあらすじ

HTML / CSS / JavaScript で完結する(サーバーとやりとりしない)クイズアプリをつくることにした。
まだ俺たちのたたかいは始まってすらいない。

アプリケーションの構想

前回のつづきと言うことでクイズアプリにすると言ってもまずはどんなアプリにするのかをざっくり考えます。

普通の知識を問う問題だとクイズをたくさん考えるのが大変なので、今回は小学生向けのクイズ(というかもはや勉強)をネタにしていこうと思います。

ということで小学生と言えば dL (デシリットル) ですよね。

dL って小学校で習う中でも最上級に役に立たない単位だと思いますし。役に立つのは decade (10年) とか decimal (10進数) とかを知ったときに「あれ？もしかして "dec" ってなんか10に関係するんじゃね？」というひらめきを得るときぐらいですよね。(脱線しました。)

そんなこんなでクイズのネタは単位変換にすることにしました。
そのくらい考えたら今度はアプリケーションの大枠を考えていきます。頭の中で↓みたいな感じにしようというイメージを持ちます。

タイトル画面
クイズのタイトルとスタートボタンがある。スタートボタンを押したらスタート。
あと絵がないと寂しいのでタイトルっぽい絵を入れる。

クイズ画面
選択肢を表示する。
あと絵がないと寂しいのでクイズっぽい絵を入れる。

結果画面
正誤情報を伝える。
しつこいようだが絵がないと寂しいので絵を入れる。正解したときは正解っぽい絵を、間違ったときは残念そうな絵を入れる。

画面構成とHTML

という感じでアプリケーションの全体像が見えてきたので設計に入ります。
基本的に同じような画面なのでHTMLは以下のように単純な作りにすることが出来そうです。

ただし、スタートボタンを配置するところはクイズ画面では選択肢を表示するところになるので、<div>タグで領域を確保しておいてdisplay属性をgridにすることで綺麗に配置できるようにしようと思います。

gridを選んだ理由はXAMLのGridと似ているので個人的に使いやすそうという理由です。

とりあえず実装

前の章までで概ねどのような画面を作っていくかのイメージが湧いたのでHTML / CSS を実装していきます。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クイズ</title>
<link rel ="stylesheet" type="text/css" href="css/style.css">
</head>
<body bgcolor="aliceblue">
<label id="message">単位のクイズ！</label>
<div id="image-area">
   <img id='image' src='images/title/003.png' alt='character image'>
</div>
<div id='button-area'>
   <div id='options' style='display: none;'>
       <button id='option1' style='grid-row: 1; grid-column: 1'>0.001 dL</button>
       <button id='option2' style='grid-row: 1; grid-column: 2'>0.01 dL</button>
       <button id='option3' style='grid-row: 1; grid-column: 3'>0.1 dL</button>
       <button id='option4' style='grid-row: 2; grid-column: 1'>10 dL</button>
       <button id='option5' style='grid-row: 2; grid-column: 2'>100 dL</button>
       <button id='option6' style='grid-row: 2; grid-column: 3'>1000 dL</button>
   </div>
   <button id='to-next' style='display: inline;'>スタート</button>
</div>
<div id='to-title-area'>
   <button id="to-title">タイトルにもどる</button>
</div>
</body>
</html>

style.css

body {
   margin-right: auto;
   margin-left : auto;
   text-align: center;
   height: 98vh;
   width: min(98vw, 1000px);
   padding: 0%;
}

div {
   margin: 0px;
}

label {
   font-family: ap;
   font-size: min(10vw, 5vh);
   color: #644;
   display: block;
   text-align: center;
}

#message {
   margin-top:3%;
   height: 10%;
}
#image-area {
   text-align: center;
   height: 30%;
}
#button-area {
   margin-top: 3%;
   text-align: center;
   height: 30%;
   width: 100%;
}
#to-title-area {
   margin-top: 3%;
   height: 20%;
   text-align: center;
}

#image-area > Img {
   width: auto;
   height: 100%;
}

#options {
   height: 100%;
   display: grid;
   grid-template-rows: 50% 50%;
   grid-template-columns: 33% 34% 33%;
}

#to-next {
   width: 50%;
   height: 30%;
}

#to-title {
   width: 50%;
   height: 50%;
}

可変部分(スタートボタンと選択肢ボタン)の切り替えは上記HTMLファイルの div要素 (id : options)とbutton要素 (id : to-next) のdisplayをnoneにすることで非表示にしながら切り替えていく算段です。

作成した index.html をブラウザで表示させてみると・・・

うん。概ね予定通りですね。予定通りダサい感じになっています。
長くなってきたので今回はここまで。

まとめ

今後はクイズをしていくためのJavaScriptを実装していくことになるのですが、現時点での問題点と解決方針を書き留めておきます。

1. ボタンが可愛くないのでかわいい感じのボタンに変更する。
2. フォントが可愛くないので可愛いフォントにする。
出来上がったあかつきにはサンエックスあたりに買い取ってもらうことを考えて、すみっコぐらしと親和性の高いフォントをあんずもじにする。

ということでまた次回もよろしくお願いします。

次回

この記事が気に入ったらサポートをしてみませんか？