こちらの記事をベースにして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/ どんなサービスか 下記のようなフォームを埋めると、 野球における自分の能力をパワプロ風に表現できるというサービスです。 キャップ野球に対応 一般的な野球と、キャップ野球にも対応しています。 例：「…

作ったもの キャップ野球チームの全国分布図を作成。 チームカラー (あれば)チーム旗 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…

キャップ野球向けイベントカレンダー https://cap-calendar.netlify.com/ 最近キャップ野球関係のサービスをいくつか作っているのですが、 キャップ野球・全国大会非公式特設サイト 野球リーグスコア管理システム ver3α 優勝ラインシミュレーター まだ普及途…

MQTT(MQ Telemetry Transport)とは？ wikipedia 通信プロトコルの一種でPub/Sub型のデータ配信モデル。 軽量プロトコルのため、主にIoTの分野で使われていることが多いです。 Pub/Sub型 Pub/Sub型に関わるのは次の3者。 Publisher メッセージを出す人 Subscr…

https://music-ranking-maker.netlify.com/ - URLシェアの例 開発のきっかけ UIが似ているのでお気づきの方もいらっしゃると思いますが、10/27にリリースしたアニメランキング作成サービスの派生プロジェクトです。 楽曲の情報も持てないかな、と思ってちょ…