割と思い付きで機能を作ってしまう方なのですが、
(旧バージョンの情報局でムダとなった機能をリニューアル時に捨てた)
今回はブラウザで作れる野球選手カードについて。

CSSで画像を装飾する

フレームを作る

画像を見てやり方に気づいた方はご名答。
角のフレームは四角形を傾けて重ねてるだけなのです。
transform 15degで15度傾けて表示しています。
親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              position: "absolute",
              transform: "rotate(15deg)",
              bottom: -40,
              right: 5,
              width: 350,
              height: 100,
              backgroundColor: "色を指定",
            }}
          />

はみ出した部分をカットする

親要素の大きさを指定して、overflow:hidden
とすると、はみ出した要素を非表示にできます。

<div
        style={{
          width: 340,
          height:450,
          backgroundColor:'#e6e6e6',
          overflow: "hidden",
          position: "relative",
        }}
      />

写真に丸アイコンを載せる

div要素のbackgroundImageに画像を指定して、
border-radius 50%で丸にします。
div要素の高さはwidth,heightで指定し、
画像の大きさはbackground-sizeで調整します。

親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              width: 80,
              height: 80,
              border:'2px solid white',
              backgroundSize: "80px 80px",
              backgroundImage: `url('画像のURL')`,
              backgroundRepeat: "no-repeat",
              backgroundPosition: "center center",
              position: "absolute",
              display: "inline-block",
              borderRadius: "50%",
              top: 3,
              left: 3,
            }}
          />

CSSで遊ぶって楽しい!

これまでも色々CSSで遊んできたので比較的サクッと実装できました。(ただし不評)

• WEB技術で複雑なUIの再現に挑戦しました
• CSSアニメーションでトランザム！

「キャップ野球情報局」というサイトを作っています。

アップデート履歴

• 2019年12月
  • 初版(v1.0)リリース
• 2020年1月
  • マイナーアップデート(ver1.1)

ちまちまとマイナーアップデートを重ねていましたが、
5/17からNextJSへ移植するのと同時に、次のメジャーアップデート(v2.0)を7月リリースを目標に作っています。

次バージョン新機能

twitterアカウントを持っていれば誰でもログインできます。

マイページ

ユーザページ編集

別サービス「みんなのSCORE」のデータに対応する形で選手ページを持っています。

選手へのコメント機能

選手間で「この選手はどういう選手です」という他己紹介をする機能です。

チームページ編集

別サービス「みんなのSCORE」のデータに対応する形でチームページを持っています。
チームの紹介のほか、チームのテーマカラーが設定できます。

イベント登録・編集

キャップ野球には、主なイベントとして

• 大会
• リーグ
• 練習会

がありますが、それらの情報を登録・編集することができます。

次バージョンに採用している技術

• フロント
  • NextJS
  • ReactJS
  • Netlify
  • TypeScript
• サーバサイド
  • NodeJS
  • MySQL
  • Docker(-compose)
  • TypeScript
• ミドルウェアなど
  • slack
  • firebase
  • cloudinary

imgurではなくcloudinaryを採用した理由

運営者ギルドでは画像ストレージとしてimgurを薦められていたのですが、imgurとcloudinary両方を実装して、使いやすさの観点からcloudinaryを採用することにしました。

ログイン

imgurはOAuth認証すればログイン状態でアップロードできるのですが、ブラウザでPINが必要など使い勝手と実装に難がある印象です。

匿名アップロード

比較的実装が簡単ですが、imgurでは匿名アップロードした画像をGUIでは管理できません。

工数的にはcloudinaryのログイン状態アップロード≒imgurの匿名アップロードという印象だったので、GUIで全体管理ができるcloudinaryを選びました。用途としては無料枠で足りると思います。

「桜咲く佐倉蓋ざんまい」非公式特設サイト
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で安定しています...ｗ