技術日誌

野球関係のサービスを個人開発しています。

キャップ野球情報局

キャップ野球情報局更新[2.39.0 → 2.39.2]

チームページ/エイリアス・連合表示 チームページにどのチームの別名(alias)なのか、連合チームなのかどうかという表示をするように修正 成績内訳に対戦チームを表示 成績の試合ごとの内訳で試合日付と試合番号のみを表示していたが、対戦チームを表示するよ…

React/NodeJS/Passportでtwitterログインを実装してみた

こちらの記事をベースにしてReactJS/NodeJSのシステムにtwitterログインを組み込んでみた。 qiita.com 主に異なるのは型指定が緩めななんちゃってtypescriptを使っているところか。 蓋々交換機能 cap-baseball.com 技術的なこと passport-config.ts export d…

pixela APIを使ってアクセス数を可視化する

作っているサービス cap-baseball.com pixelaという草を生やすAPIをチームページのアクセスカウンタに使ってみます。 pixelaとは pixe.la pixelaのAPIドキュメント docs.pixe.la 開発者(a-knowさん) blog.a-know.me 実装に使う技術 API側 言語など:NodeJS p…

D3.jsで日本地図に地点をプロットしてツールチップを表示してみる

作ったもの キャップ野球チームの全国分布図を作成。 チームカラー (あれば)チーム旗 https://cap-baseball.com/map 動作イメージ 地図データの準備 地図データはshapeファイルで提供されているものをGeoJSON→topojson化する。 topojsonとは npm i topojson …

ReactでRSSを取得する

右側の余白が頭痛の種 キャップ野球情報局ではレスポンシブ対応を行っています。 ただ、2カラムレイアウトにするとどうしても右側に余白ができてしまう問題がありました。 そこで意見を募った結果、新着ブログ記事を表示してほしいなどの意見があったので早…

CRAにSCSSを導入しました

CRA(create-react-app)にSCSSを導入した話。 node-sassをnpmインストールする npm i -D node-sass .cssファイルを.scssにリネーム scssで書いてみる このような3色の四角の囲みを使っているのですが、 div.topic{ position: relative; top: 0px; padding: 5p…