「桜咲く佐倉蓋ざんまい」非公式特設サイト
https://sakura-cap.netlify.com/

非・公・式です。(大事なことなので2回言いました)

決勝トーナメントの内訳を前に配置しました

以前はトーナメント表を上に配置していましたが、内訳、トーナメント表の順番に表示するよう変更しました。

試合詳細ページへのリンク

「予選」タブのリーグ戦の組み合わせ表の中に動画があるものだけ下線を引いてリンクを張っています。

初期段階のUIと比べていただくと、今回UIに色々力をいれていることがわかっていただけるかと思います。

試合詳細ページ

スコアと試合動画ツイートを引用しています。

技術的なこと

今回使用しているのは、react-twitter-embedというReactコンポーネントです。

tweetIdにツイートIDが入るよう記述するとスタイルなどもCSSが用意されています。

<TwitterTweetEmbed tweetId={*******} />

サイトのソース

GitHub

技術的なこと

今回はDBやアプリケーションサーバを使わずにnetlifyだけで実装することを目標にしています。
データはjsの中にobjectで埋め込んでいます。
jsonはコメント書けないのが面倒なので。
興味がある方はData.jsを読んでみてください...

桜咲く佐倉蓋ざんまい

非公式特設サイト作りました。

先週末に千葉県佐倉市で開催されたキャップ野球の全国大会の結果をまとめたサイトをCRA(CreateReactApp)でサクッと作りました。
結局手直し含めると2.5人日ぐらいです。

テーマカラーは運営の公式twitterのロゴがこんな感じだったので
(実際は改行されているけれども)そこから採用しました。
カラーピッカーでだいたいの色コードを入れてそこから構成します。
今回はグラデーション使えるようになったので楽しくて多用しています。え、昔マーキーとかいっぱい使いませんでした？(インターネット老人会)

ちなみに、この後さらにUIをいじっています。
どこが変わったかわかるかな？

なぜ作ろうと思ったか

最初は手書きしかないトーナメントをまとめるだけ...のつもりだったのですが、どうせならリーグ戦も表示させたいなーと思い、
よさそうなツールを探したのですが、あまりピンとくるものがなくて自分で書いてしまった次第。最近UI書くの楽しすぎる問題。

大会といえば

トーナメント結果と表彰状に個人開発のサービスを採用しています。いつもお世話になっております...!

トーナメント

おおにしさんの「THE TOURNAMENT」ですよね。

表彰状

鉄板のあんどさんの「WEB表彰」ですよね。

大会概要とか

体裁的にあった方がいいかなーと思ったのですが、
まあ誰も見ませんよね...!

ご意見・ご要望お待ちしています！

快適に楽しく使ってもらえるのが制作者冥利に尽きるので。

終わりに

最近このボードの野球リーグスコア管理システムの進捗があまり出ていません。何だかんだver2で安定しています...ｗ