野球リーグスコア管理システムの開発

2019-01-13に作成

image
野球リーグスコア管理システムに関する進捗です。

使っている技術など

  • NodeJS
  • ReactJS
  • netlify
  • MySQL
  • materializecss
  • react-bootstrap
  • react-bootstrap-table-next

旧システムについてはこちらの記事をご覧ください。

残りタスクリスト

trello

所有者限定モードのためこのボードには投稿できません ボードとは?

10/12-14進捗

image

ランディングページの実装

カルーセルのtouch対応

先日の記事でreact-slideshowを推しましたが、スワイプに対応していないという問題があったのでいくつかtouchイベントに対応しているカルーセルコンポーネントを調査しました。

react-slick、君に決めた!

LINE風CSSの適用

会社の同僚にアイデアをもらったので自力で実装してみました。

 <div style={{
        padding:5
       }}
     >
            <div className="question">掲載料金はかかりますか?</div>             
            <div className="answer">いいえ。料金はかかりません.</div>
            <div className="question">データはどうやって登録するのですか?</div>
            <div className="answer">現在、運営がデータを入力する形となっていますのでデータをお送りください。</div>
        </div>
.question{
  width: 70%;
  position: relative;
  padding: 10px;
  background-color: #f2f3f7;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}
.answer{
  width: 70%;
  position: relative;
  left:50px;
  padding: 10px;
  background-color: #fde5e5;
  padding: 10px;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}

webフォントの軽量化

https://gist.github.com/manabuyasuda/b5c867a7cbd17d1eb905b3a8cfd621a6

flexboxを実装する


今回はグリッドレイアウトを使わずにflex-boxを使いました。
幅500pxを境界に、flex-directionを切り替えるメディアクエリを書きます。flex-directionを切り替えるのと同時に画像をウインドウの50%か100%に切り替えます。
サイズの異なる画像を並べるのにobject-fit : coverが便利でした。

JSX

const imageLink = (toLink,image_url,text) => {
    return(
          <div 
            style={{
              position:'relative'
            }}
          >
            <div
              style={{
                fontSize: 20,
                cursor:'pointer',
                position:'relative'
              }}
              onClick={()=>{
                window.location.href= toLink
              }}
            >
              <img 
                style={{
                  height:'20vh',
                  objectFit:'cover'
                }}
                src={image_url}/>
              <span
                  style={{
                    fontSize: 20,
                    color:'aliceblue',
                    textShadow:'2px 2px 2px black',
                    position:'absolute',
                    top:0,
                    left:0
                  }}
                >{text}
              </span>
            </div>
          </div>
    )
  }

CSS

@media(max-width:500px){
  .flex-parent{
    display: flex;
    flex-direction: column;
  }
  .flex-parent img{
    width: 100vw;
  }
}
@media(min-width:501px){
  .flex-parent{
    display: flex;
    flex-direction: row;
  }
  .flex-parent img{
    width: 50vw;
  }
}

参考
- Flexbox【第1回】並べる方向 〜flex-direction編〜
- 縦横比の違う画像を均等に横並びにする方法
- 画像の上におしゃれに文字やボタンをのせる方法

2/10進捗

概要

  • 試合結果一覧をアコーディオン化
  • 個人タイトルのカード化

試合結果一覧をアコーディオン化

image

シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。

コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法

個人タイトルのカード化

image
昨日の時点でheightが0になってしまってどうしようもなかった問題ですが、
1. BootstrapTableにidを設定する
BootstrapTableにはidというプロパティがないので外側のdivに設定しました。

return (
                <div className='col s12'
                    id={this.props.id}>
                    <BootstrapTable 
                        keyField={this.props.keyField}
                        data={this.props.data}
                        columns={this.props.columns}  />
                </div>
            )

  1. idを元にclientHeightを計算する
    trophyというidを要素につけてclientHeightを計算します。
    22はカードのタイトル分の高さです。
document.getElementById('trophy').clientHeight + 22
  1. stateにセットしてstyleに記述する
this.setState({
   height:document.getElementById('trophy').clientHeight
  })
style={
{ height: this.state.height}}