react-planet 手軽に円形メニュー(Circular Menu)を提供できるライブラリ。 ResizeObserver is not defined react-planetではリサイズイベントをResizeObseverによって検知しています。 ただし、ResizeObserverはsafari 13.1以降に対応しています。 手元にあ…

「キャップ野球情報局」というサイトを作っています。 アップデート履歴 2019年12月 初版(v1.0)リリース 2020年1月 マイナーアップデート(ver1.1) ちまちまとマイナーアップデートを重ねていましたが、 5/17からNextJSへ移植するのと同時に、次のメジャーア…

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

FacebookのメッセンジャーlikeなUIの実装をしていて、 以下のライブラリを使っているのですが、 github.com このうちChatListというコンポーネントで、どの相手を選択しているかという状態をコンポーネントが持っていなかったため、 このコンポーネントだけ…

何気なくよく使っているGoogleMap、 googleの公式サイト以外で使おうとすると料金がかかるのを知っていますか？ ということで、Google MapsAPIを使わずに地図表示する方法を調べてみました。 Leaflet.jsというオープンソースの地図表示ライブラリがありまし…

サービスのURL https://pawapro-gen.netlify.com/ どんなサービスか 下記のようなフォームを埋めると、 野球における自分の能力をパワプロ風に表現できるというサービスです。 キャップ野球に対応 一般的な野球と、キャップ野球にも対応しています。 例：「…

crieitの作ったサービスのレビュー依頼掲示板に投稿して、競技を知っている人、知らない人から見て今のサービスはどう映っているのか率直な意見を募ってみた。 スポーツのサイトとしては動きが足りない 全体的に説明が足りない(初見〇し) ユーザに導線を明示…

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

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

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

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…

経緯 現在、私が運営しているサービスのうち、 野球スコア掲載プラットフォーム みんなのSCORE キャップ野球総合サイト キャップ野球情報局 この2サービス、共通のアプリケーションサーバを持っていてUIが異なるだけなのです。 画像や設定など、2つのサイト(…