twitter APIが有料化されることを受けて、 自動投稿系サービスの移転 twitter APIからデータを取得していた部分の改修 を行いました。 自動投稿系サービスの移転 NodeJSとVercel Functions(NodeJS)からtwitter APIを叩いている2つのサービスがあり、 いずれ…

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

久々に自作PCの構成を一から変えました。 光学ドライブと起動以外のHDDはそのまま引越しです。 旧構成 新構成 CPU Intel Core i7-3770S(3.1GHz/4C/8T) AMD Ryzen5 5600X(3.7GHz/6C/12T) RAM DDR3 16GB DDR4 32GB M/B ASUS P8H67-V REV3.0 MSI B450 GAMING PL…

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つのサイト(…

2019年、色々なものを作ったので少しずつ振り返ろうと思います。 経緯 元々、業務系のサーバサイドのプログラムを得意としていたのもあって、WEBサービスのUIは全く無関心というかCSSの中身もよくわからない状態でした。 作ったものを振り返る 画像多めです…

イベントカレンダー機能 Reactで作ったCMSにカレンダー機能を実装しました。 動作イメージ カレンダー機能をリリースしました！ pic.twitter.com/uY5j3YkkCV— キャップ野球情報局 (@cap_bb_info) December 22, 2019 使ったライブラリ react-big-calendar ラ…

キャップ野球向けイベントカレンダー 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にリリースしたアニメランキング作成サービスの派生プロジェクトです。 楽曲の情報も持てないかな、と思ってちょ…

背景 先週はクライアントからGraphQLへのアクセス方法を学習しました。 今週は「サーバサイドはどう実装するのか？」という部分を調査しました。 パッケージインストール 今回は既に実装しているアプリケーションサーバにgraphqlを組み込みます。 $ npm inst…

開発継続中 アニメ視聴遅れ管理サービス リンク アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。視聴状況の遅れなどを可視化したもの。 開発・保守期間： 2016.11～ サーバサイド：Java → NodeJS フロントエンド：AngularJS → …

いつもはソフトウェアエンジニア(プログラマ)として働いたり、 趣味でコーディングしたりしていますが、 今回は断線してしまったイヤホンのプラグ交換。 ネットにいくつか交換方法が載ってたので、結構参考になりました。段ボールに刺して固定するのはナイス…