CMS(ブログ)風サイトを作りました

以前、7月ごろに技術ブログを作ってみたという記事を書いたのですが、結局保守が面倒ということでボツにしまして。

URL

https://cap-baseball.com/

機能

トップページ

キーワードによる記事の絞込みが可能です。
新着記事とキーワードで探すメニューを用意しています。

記事ページ

主に試合結果を掲載しています。youtubeの埋め込みはmarkdownにソースを挿入するだけで問題なく動作しました。
あと、1文字目の色を変えるところに凝りました。

h1::first-letter{
  color: #468847;
}

技術

今回は記事を簡単に書けること(markdownとか)を目指して、ヘッドレスCMSを調査したのですが、コンポーネントの再利用を考えるとwordpressは除外、strapiやcontentfulも試してみたものの、データの準備に時間がかかり過ぎるので今回は見送りました。今回もDBレスで、マスタデータはjsonです。

ヘッドレスCMS

• strapi
• contentful
• ヘッドレスwordpress

Kosugi Maruフォントへの移行

• Google Fonts+日本語「Rounded M+ 1c」がにじむので「Kosugi Maru」にフォント変更

急遽クソアプリ2 Advent Calendar 2019の1日目に参加することになりました。

計算を自動化するスプレッドシートを作っていて、やっぱりReactで書いた方が動的にスタイル変更できるしいいじゃない！と思って作りました。

どんなアプリ？

試合数、チームの成績をもとにリーグ戦の優勝ラインをシミュレーションします。勝率と勝ち点方式に対応しています。

制作期間

2019/12/01～
突貫で最低限の機能だけ作ったので今回はUIに凝っていないです。

URL

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;
}

把握している課題

• UI
• 試合数全てのパターンを計算・表示しているため、試合数に大きな数字を入れるとブラウザがメモリ不足で落ちる。
  • いずれかのチームに該当する結果があるまで表示しないようにする
• チームの列入れ替え機能欲しい