にほんブログ村 にほんブログ村
にほんブログ村

【初挑戦】HTML、CSS、Javascriptで野球のBSOを作ってみた。

閑話休題
2020.11.20

まずは完成品を【追記】

苦戦の末、Gitで公開したのでリンクを貼っておきます。

baseballindicators.github.io

やっぱりなにか作ってみることが一番勉強になる

前回、前々回のスプレッドシート、エクセルにつづき、Html、CSS、Javascriptを使って野球のBSO作成に挑戦した。

人から見ればどうって事ないプログラムかもしれないが、私にとっては挑戦！

なにより、作ってみないとProgateで学んだHtmlやCSS、Javascriptたちが頭の中が繋がらない。

ここらでひとつ形にしたかった。

そして、私の中ではものすごい前進があった気がする。

BSOとは？

さてこのBSOですが、一応、知らない人のために説明すると、BSOとは野球の試合でボールやストライク、アウトをカウントする為のインジケーターです。

野球中継の画面のすみに出てくるあれです。

数字で表示される事もありますが、今回作ったのはよく見かける緑、黄色、赤の丸印が並ぶスタイル。

因みに昔は順番がSBO

余談ですが、ちょっと前まで順番が上からSBOでした。

メジャーリーグにあわせて、右にならえで今の順番になりました。

出来上がりの外観

動作説明を一応

説明するまでもないけど、一応簡単に。

BSOそれぞれに対し、「＋」ボタンをクリックすると表示がひとつ増え、「−」をクリックすると一つ減ります。

緑色のボールは３つまで。

それ以上クリックしても変わらない。

黄色のストライクと赤のアウトは２つまで。

それ以上クリックしても変わらない。

ストライクの３つ目でアウトにする事も考えたけど、今回はシンプルに徹した。

クリアボタンは、BSOそれぞれを単独にクリアするものと、全クリア、BとSだけクリアするボタンがを作った。

スプレッドシート、エクセルの時となるべく同じやり方で作成

動作をさせる方法は人それぞれいろいろでしょうが、なるべくこれまで作ったエクセルとスプレッドシートの書き方で作るときめた。

今回は以下の2点

  1. Switch caseを使う。
  2. 表示させる丸は「●」（テキストの黒丸）を使う。

HTML、CSS、Javascriptを別ファイルにしてみるという挑戦

今回の自分の課題はこれ。

htmlの中に<script>を書くのではなく、別ファイルにしてそれを読み込む。

お勉強としてやり方を学んでいたけど、実際にやってみたかった。

いざやってみると、いろいろな疑問が湧き上がり、それをクリアするたびに達成感がある。

できた時は思わずニヤニヤ。

仕事から帰ってから寝るまでの1、2時間を使って結局1週間かかってしまった。

 

時間の大半はSwitchのところ。

具体的に言うと、

addEventListener(‘click’ ～でswitch caseを動かそうとしているのに、そのswitch caseをfunction()のなかに入れていたこと。
 
document.getElementByIdで取得した要素がそのまま中身のテキストだと思っていたこと。（代入した変数を使うときに「変数名.textContent」としていなかった）
 
この2点で数日費やした。
 

出来てしまえば些細な間違いだが、動かなくて途中何度も心が折れそうになったな〜

 

 

Javascript

‘use strict’;
//ボールを増やす
const BallPlusBtn = document.getElementById(‘BallPlusBtn’); 
var BI = document.getElementById(‘BallIndicator’);
BallPlusBtn.addEventListener(‘click’ , () => {

switch(BI.textContent){

   case ‘●’:
    BI.textContent = ‘●●’;
    break;
   case ‘●●’ :
    BI.textContent = ‘●●●’;
    break;
   case ‘●●●’ :
    BI.textContent = ‘●●●’;
    break;
   default:
    BI.textContent = ‘●’;
  } 
});
//ボールを減らす
const BallMinusBtn = document.getElementById(‘BallMinusBtn’); 
//var BI = document.getElementById(‘BallIndicator’);
BallMinusBtn.addEventListener(‘click’ , () => {

 switch(BI.textContent){
   case “●●●”:
    BI.textContent =”●●”;
     break;
   case  “●●”:
    BI.textContent = “●”;
     break;
   default:
    BI.textContent =””;
  }
});
//ストライクを増やす
const StrikePlusBtn = document.getElementById(‘StrikePlusBtn’); 
var SI = document.getElementById(‘StrikeIndicator’);
StrikePlusBtn.addEventListener(‘click’ , () => {
   switch(SI.textContent){
   case “●”:
     SI.textContent=”●●”;
     break;
   case “●●”:
     SI.textContent= “●●”;
     break;
   default:
     SI.textContent=”●”;
  }
});
//ストライクを減らす
const StrikeMinusBtn = document.getElementById(‘StrikeMinusBtn’); 
StrikeMinusBtn.addEventListener(‘click’ , () => {
 switch(SI.textContent){
   case “●●”:
     SI.textContent = “●”;
     break;
   default:
     SI.textContent = “”;
  }
});
//アウトを増やす
const OutPlusBtn = document.getElementById(‘OutPlusBtn’);
var OI = document.getElementById(‘OutIndicator’);
OutPlusBtn.addEventListener(‘click’ , () =>{
  switch(OI.textContent){
   case “●”:
     OI.textContent = “●●”;
     break;
   case “●●”:
     OI.textContent = “●●”;
     break;
   default:
     OI.textContent = “●”;
  }
});
//アウトを減らす
const OutMinusBtn = document.getElementById(‘OutMinusBtn’);
var OI = document.getElementById(‘OutIndicator’);
OutMinusBtn.addEventListener(‘click’ , ()=>{
 switch(OI.textContent){
   case “●●”:
     OI.textContent = “●”;
     break;
   default:
     OI.textContent = “”;
}
});
//ボールをクリア
const BallClear = document.getElementById(‘BallClearBtn’);
BallClear.addEventListener(‘click’,()=>{
  BI.textContent = “”;
});
//ストライクをクリア
const StrikeClearBtn = document.getElementById(‘StrikeClearBtn’) ;
StrikeClearBtn.addEventListener(‘click’,()=>{
   SI.textContent = “”;
 });

//アウトをクリア
const OutClearBtn = document.getElementById(‘OutClearBtn’);
OutClearBtn.addEventListener(‘click’,()=>{
  OI.textContent = “”;
});
//ボールとストライクをクリア
const BSClearBtn = document.getElementById(‘BSClearBtn’) ;
BSClearBtn.addEventListener(‘click’,()=>{
  BI.textContent = “”;
  SI.textContent = “”;
}); 
//すべてをクリア
const AllClearBtn = document.getElementById(‘AllClearBtn’);
AllClearBtn.addEventListener(‘click’,()=>{
  BI.textContent = “”;
  SI.textContent = “”;
  OI.textContent = “”;
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Baseball_Indicator</title>
    <link rel=”stylesheet” href=”./style.css”>

  </head>
  <body>
  
  <div class=”IndicatorButtonWrap”>
    
    <div class=”ClearSingleButtonsBox”>
      <button id=”BallClearBtn”>X</button>
      <button id=”StrikeClearBtn”>X</button>
      <button id=”OutClearBtn”>X</button>
    </div>
  <div class=”bsoContainer”>
    <div class=”BSOBox”>
      <p class=”Title_BSO”>&nbspB&nbsp; </p>
      <div id=”BallIndicator”></div>
    </div>
    <div class=”BSOBox”><p class=”Title_BSO”>&nbspS&nbsp; </p>
    <div id=”StrikeIndicator”></div>
    </div>
    <div class=”BSOBox”><p class=”Title_BSO”>&nbspO&nbsp; </p>
    <div id=”OutIndicator”></div>
    </div>
    </div>

    <div class=”BsoButtonsBox”>
        <div class=”BallButtonsBox”>
        <button id=”BallPlusBtn”>+</button>
        <button id=”BallMinusBtn”>-</button>
    </div>
    <div class=”StrikeButtonsBox”>
        <button id=”StrikePlusBtn”>+</button>
        <button id=”StrikeMinusBtn”>-</button>
    </div>
    <div class=”OutButtonsBox”>
        <button id=”OutPlusBtn”>+</button>
        <button id=”OutMinusBtn”>-</button>
    </div>
    </div>
    </div>
    </div>
      <div class = “ClearMultiButtonsBox”>  
      <button id=”BSClearBtn”>Clear B+S</button>
      <button id=”AllClearBtn”>Clear All</button>
  </div>
  <script type=”text/javascript” src=”./BSO.js”></script>
  </body>
</html>

CSS

.IndicatorButtonWrap{
    display: flex;
    align-items: center;
}
.bsoContainer{
    background-color: black;
    width:200px;
    font-family:’Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
}
.BSOBox{
    display: flex;
    align-items: center;
}
.Title_BSO{
    color: white;
    font-size: 48px;
    margin:0px;
}
#BallIndicator{
    height:80px;
    color:green;
    font-size: 72px;
    margin-top:5px;
    margin-bottom: 5px;
}
#StrikeIndicator{
    height:80px;
    color:yellow;
    font-size: 72px;
    margin-top:5px;
    margin-bottom: 5px;
 }
#OutIndicator{
    height:80px;
    color:red;
    font-size: 72px;
    margin-top:5px;
    margin-bottom: 5px;
}
.BsoButtonsBox{
    width:45px;
    margin-left:3px;
    color:black;
    font-size: 20px;
    text-align:center
}
.BallButtonsBox{
    width: 45px;
    background: gray;
    margin:5px;
    padding-top:12px;
    padding-bottom:12px;
}
.StrikeButtonsBox{
    width: 45px;
    background-color: gray;
    margin:5px;
    padding-top:12px;
    padding-bottom:12px;
}
.OutButtonsBox{
    width: 45px;
    background-color: gray;
    margin:5px;
    padding-top:12px;
    padding-bottom:12px;
}
#BallClearBtn,#StrikeClearBtn,#OutClearBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    flex-direction: column;
    font-size:20px;
    width: 30px;
}
.ClearMultiButtonBox{
    width:100%;
}
#BSClearBtn,#AllClearBtn{
    height:35px;
    width: 138px;
}

 

人類にとっては小さな一歩だが、私にとっては大きな一歩だ(笑)

コメント

タイトルとURLをコピーしました