野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
ikenにフィードバックいただきました。ありがとうございます。
スタッツ画面で、チーム順位タブでは同率の場合に順位表示が消えますが、例えば3位が2チームある場合は「同率3」などの表現だと、試合数や勝率で並び替えた場合にも順位がわかり、わかりやすくなるかもと思いました。安打数とかもですかね?(並び替えはできないですが)
そもそもソートを想定していなかったのですが、投手部門だけ項目を増やした結果、ソート時に順位が非表示になっていると順位でソートし直せなかったり、どの順位タイなのかがわからなくなっていたのでありがたいご指摘でした。
引き続きご意見募集してます。
ikenにフィードバックいただきました。ありがとうございます。
トップページの、現在提供中のデータ欄からデータに飛べますが、飛べることがちょっとわかりづらいかもです。例えば、[データを見る]と書かれたボタンの画像が、今あるそれぞれの画像の上に合成されると、押しやすくなるかも?と思いました。あと、最新3試合の結果欄で、何対何以外の部分をクリックした場合も、詳細画面に移ると楽かもと思いました。
チーム順位はみんな特に気にするかなと思うので、TOP3よりもうちょっと表示されてると嬉しいかもと思いました。
・「最近の試合結果」カード自体をクリックできるように修正
・チーム順位などの項目を5件まで表示
・「提供中のデータ」の選択状態がわかるように修正、画像右下に文言追加
運営してくれているというのは競技者にとって、とても嬉しいところだと思います。応援してます!
ありがとうございます!
先日の記事でreact-slideshowを推しましたが、スワイプに対応していないという問題があったのでいくつかtouchイベントに対応しているカルーセルコンポーネントを調査しました。
react-slick、君に決めた!
会社の同僚にアイデアをもらったので自力で実装してみました。
<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;
}
https://gist.github.com/manabuyasuda/b5c867a7cbd17d1eb905b3a8cfd621a6
今回はグリッドレイアウトを使わずに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編〜
- 縦横比の違う画像を均等に横並びにする方法
- 画像の上におしゃれに文字やボタンをのせる方法
主にキャップ野球用の対応ですが、皆さんyoutubeとかtwitterにばらばらに動画を上げているので、蓋ざんまい非公式サイトではその集約の役割も果たしていました。
ただ、蓋ざんまいサイトでは
- 縦列に配置してコンテンツが長くなってしまう
という欠点があり、試合結果を一律JCBL-SCORE側で表示する対応をするため、どんなUIがいいか考えた結果、カルーセルみたいに横にスライドするのがよいという考えに。
蓋ざんまいで独自に実装していた試合結果ページを廃止(アクセスはできますがリンクは張っていません)して、一律JCBL-SCORE側で試合結果を表示するようにしました。
だいぶ短縮できました。
設定自体は大して難しくなく、ちょっと古いですが以下のサイトなどを参考に進めました。
手順としては、
1. ネームサーバの設定をnetlifyのものにする
2. DNSが浸透するまで待つ
3. Let's encryptでSSL証明書を発行する(netlifyがやってくれる)
3でちょっとはまりました。
ERR_CERT_COMMON_NAME_INVALID(プライバシーエラー)が出てしまうのです。
作られた証明書を見ると、subjectが「*.netlify.com」になっています。証明する対象が間違っているわけです。
よくよく考えると、新しいドメインにリダイレクトしていないままLet's encryptの処理をしていたので、redirects
に
[https://jcblscore-react.netlify.com/*](https://jcblscore-react.netlify.com/*) https://jcbl-score.com/:splat 301!
1行追記します。これで証明書を発行し直すとプライバシーエラーが解消されました。
APIコンテナとDBコンテナのタイムゾーンがGMTで、DBに入っている値がJSTだったので、日付で比較しようとすると、SQLで>や
composeファイルで書くと有効な対応策がないので、SQLに渡す際に日付オブジェクトにするのをやめました。