野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
以前、7月ごろに技術ブログを作ってみたという記事を書いたのですが、結局保守が面倒ということでボツにしまして。
キーワードによる記事の絞込みが可能です。
新着記事とキーワードで探すメニューを用意しています。
主に試合結果を掲載しています。youtubeの埋め込みはmarkdownにソースを挿入するだけで問題なく動作しました。
あと、1文字目の色を変えるところに凝りました。
h1::first-letter{
color: #468847;
}
今回は記事を簡単に書けること(markdownとか)を目指して、ヘッドレスCMSを調査したのですが、コンポーネントの再利用を考えるとwordpressは除外、strapiやcontentfulも試してみたものの、データの準備に時間がかかり過ぎるので今回は見送りました。今回もDBレスで、マスタデータはjsonです。
急遽クソアプリ2 Advent Calendar 2019の1日目に参加することになりました。
計算を自動化するスプレッドシートを作っていて、やっぱりReactで書いた方が動的にスタイル変更できるしいいじゃない!と思って作りました。
試合数、チームの成績をもとにリーグ戦の優勝ラインをシミュレーションします。勝率と勝ち点方式に対応しています。
2019/12/01~
突貫で最低限の機能だけ作ったので今回はUIに凝っていないです。
https://championship.netlify.com
結果のテーブルヘッダを固定してスクロールできるようにしています。元々<table>
タグで書いていたのですが、固定しようとすると横幅が一致しない問題が出てきたので<div>
タグで初めてテーブル書きました。
div.table_header{
display: table-row;
}
div.table_cell{
display: table-cell;
border: 0.5px solid #696969;
padding: 2px;
min-width: 4rem;
text-align: right;
white-space: nowrap;
}
div.scroll{
overflow-y: scroll;
height: 80vh;
}
3日かかりましたが審査通りました!
リーグ参加者にも少数ではあるがソフトウェア開発に知見がある人がいて、こういうのが欲しいというプロトタイプ(上記)まで見せてもらった。
開発に用いたライブラリ
Xcodeでarchiveはできる
→dg deploy
(deploygateにipaを上げるコマンド)
→iOSアプリ配布用の証明書が必要といわれる
→iOS developer programに入ってないと作れないよ
→iOS版断念...orz
当初は野良APKで配布するつもりだったのですが、iOS developer programほどひどいライセンス体系ではない(登録時に$25)ので登録しました。「提供元不明」だと誰も使ってくれなさそうだったので。
いろいろ記入するところあって予想以上に大変だった....
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に渡す際に日付オブジェクトにするのをやめました。
これまで単一のリーグ(カラーボール野球リーグ)にのみ成績提供をする設計でしたが、DB構成なども変更し、多リーグ対応と、それに伴い入力UIを実装したのがver3になります。
まだシステム的に不具合は残っていますが、動作を見せたり使ってもらったりするのがよいと思ってαリリースをしています。
機能の修正は今後していきます。
以下の大会・リーグに関するデータを掲載したいと思っています。
データを提供していただける方はご連絡ください。
現在はカラーボール野球・キャップ野球を主な対象としていますが、野球型のスポーツであればシステム的には対応可能ですので、
自分のリーグの成績を本システムで閲覧したいという方はお声がけください。将来的にはリーグ管理者にアカウントを発行したいと考えています。
現在、α版としてリリースしていますが、不具合などもありますので、安定したシステムを構築するべく開発を継続します。
不具合や使用上の疑問などありましたらお気軽にお知らせください。
iPadなどのモバイル端末で試合終了後にその場で入力していただいて、データ反映の遅延をなくしたいと考えています。
「桜咲く佐倉蓋ざんまい」非公式特設サイト
https://sakura-cap.netlify.com/
非・公・式です。(大事なことなので2回言いました)
以前はトーナメント表を上に配置していましたが、内訳、トーナメント表の順番に表示するよう変更しました。
「予選」タブのリーグ戦の組み合わせ表の中に動画があるものだけ下線を引いてリンクを張っています。
初期段階のUIと比べていただくと、今回UIに色々力をいれていることがわかっていただけるかと思います。
今回使用しているのは、react-twitter-embedというReactコンポーネントです。
tweetIdにツイートIDが入るよう記述するとスタイルなどもCSSが用意されています。
<TwitterTweetEmbed tweetId={*******} />
今回はDBやアプリケーションサーバを使わずにnetlifyだけで実装することを目標にしています。
データはjsの中にobjectで埋め込んでいます。
jsonはコメント書けないのが面倒なので。
興味がある方はData.js
を読んでみてください...
非公式特設サイト作りました。
先週末に千葉県佐倉市で開催されたキャップ野球の全国大会の結果をまとめたサイトをCRA(CreateReactApp)でサクッと作りました。
結局手直し含めると2.5人日ぐらいです。
テーマカラーは運営の公式twitterのロゴがこんな感じだったので
(実際は改行されているけれども)そこから採用しました。
カラーピッカーでだいたいの色コードを入れてそこから構成します。
今回はグラデーション使えるようになったので楽しくて多用しています。え、昔マーキーとかいっぱい使いませんでした?(インターネット老人会
)
ちなみに、この後さらにUIをいじっています。
どこが変わったかわかるかな?
最初は手書きしかないトーナメントをまとめるだけ...のつもりだったのですが、どうせならリーグ戦も表示させたいなーと思い、
よさそうなツールを探したのですが、あまりピンとくるものがなくて自分で書いてしまった次第。最近UI書くの楽しすぎる問題。
トーナメント結果と表彰状に個人開発のサービスを採用しています。いつもお世話になっております...!
おおにしさんの「THE TOURNAMENT」ですよね。
鉄板のあんどさんの「WEB表彰」ですよね。
体裁的にあった方がいいかなーと思ったのですが、
まあ誰も見ませんよね...!
快適に楽しく使ってもらえるのが制作者冥利に尽きるので。
最近このボードの野球リーグスコア管理システムの進捗があまり出ていません。何だかんだver2で安定しています...w
これまで読んだ本や積んでる本の値段の合計がわかるサービス「積読ハウマッチ」が最近リリースされたのですが、
#積読ハウマッチ ...ホームに追加できるんです(*´ω`*)アイコンも用意したんです(*´ω`*)ステータスバーの色も変わるんです(*´ω`*) pic.twitter.com/EKn8tv45q2
— めもらば@公式 (@MemoryLoverz) July 28, 2019
PWA対応してるよ!という売りだったのでふとフロントがCRAのうちのサービスどうだったっけ...と思って確認。
manifest.json初期状態のままだったので「React App」....ダサい。
項目で設定を選んでアイコンに使う画像ファイルをアップロードするだけ。
項目の解説はこちらが参考になります。
- manifest.jsonでホーム画面へのアプリ追加【これからはじめるPWA】
{
"short_name": "JCBL-SCORE",
"name": "日本カラーボール野球連盟スコア管理システム「JCBL-SCORE」",
"theme_color": "darkcyan",
"background_color": "#ffffff",
"display": "standalone",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "img/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
.....
{
"src": "img/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
日本カラーボール野球連盟スコア閲覧サービス「JCBL-SCORE」、androidの「ホームに追加」に対応しました。#pwa#reactjs pic.twitter.com/uMYmaCZ8CI
— 日本カラーボール野球連盟公式 (@JCBL_Official) July 29, 2019
まだ画面(UI)の実装はまだですが、選手の新規登録APIは実装完了。
打撃成績などはまだマニュアルでDBに入れてます。
現在のSEOの資産を活かすのであればこのままnetlifyドメインでもいいかな...と思い始めました。
分けていた方がデプロイが楽なので。
サンプルデータはいつものように「関東キャップリーグ」さんです。
ブランドロゴに副題をつけました。
おかげでtoFixed()
とかコケます。parseFloat
(文字列を小数にパースするメソッド)とか間に挟みました。
undefの判定に! value
って書いてたらvalue
が0
で躓きましたw
今回からdockerコンテナを使い始めたのですが、小文字のテーブルを大文字でSQL書くと認識しません。やっぱりlinuxですね。
複数リーグ対応のためにUIからAPIに渡すパラメータなどを増やす必要があるので調整。
関東キャップリーグさんの試合データが公開されているので入力していきます。
1カード分探しても見つからなかったのですが。
これまでは単一のリーグ用のシステムだったため、where句で集計する期間の範囲を与えるだけだったが、リーグIDを渡して「どのリーグのどの期間か」を求めるように修正した。
いずれも修正完了。
ようやく重い腰を上げてデータ登録機能の実装に着手。
Excelで集計した成績を写真に撮ってアップされてるので
同じマイナースポーツの誼で、システムを提供させてもらえないかと打診。
確定ではないですが、とりあえず前向きな回答をもらっています。
若干滞り気味だったver3の開発を進めることに。
ただ、リーグの期間終了が今週末とのことなのでver3投入は間に合わないだろうなー。
やっぱりモチベーションがある方が開発が進みます。