👋 Hello I’m nove-b

個人開発でのプログラミングこそが至高

Create Service🚀

【2025年3月】4月から変わる環境に備える

3月に読んだ本 どうしても生きてる (幻冬舎文庫) バベル九朔 (角川文庫) 汚れた手をそこで拭かない (文春文庫) 朝井リョウは重かった。正直、デビュー当時は絶対認めないぞって思ったこともあったけど、とんでもない思い違いだった。逆立ちしても勝てない。 万城目学は良くわからなかった。期待していた分、残念だった。 好きな小説家のKindleUnlimitedを簡単に検索できるサービスを作成した Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った Kindle Unlimited 対応作品検索|作家別無料読み放題リスト もうずいぶん長いこと本はKindle Unlimited対象本だけを読んでいる。 世間的に見ても活用しているほうだと思うし、相当感謝しているんだけど、検索のしにくさは辟易していた。 そういうわけで自分のしたい検索ができるサービスを作成した。 技術的には React Router v7 Tailwindcss Express Cloud Platform で特別難しいことはしていない。 個人開発は無料で行うべきっていう思想から反しているので、どこまで続けられるかわからないけど、できる限り開発を続けていきたいと考えている。 ブログのテーマを戻した 2月にブログのテーマを変更したんだけど、すぐに戻した。 Hugoのテーマ「Github Style Plus」のローカル検索をFuse.jsで最適化した。 ブログのテーマにこだわり始めるのは良くない兆候で、ブログの本質はコンテンツということを忘れちゃいけない。 ただ気になるのは仕方ないので、ここいらで自作にテーマに取り組もうかと考えている。 HugoにするかHexoにするかで悩むけど、たぶんHugoにする。 急ぎはしないし時間もないので、ちょっとづつ作っていこうかと考えている。 3月はお出かけする 3月はお出かけするっていう目標を2月に掲げた。 というのも4月から妻の職場復帰、子どもたちの保育園入園がある。 そうすると今までのように平日休んで空いている公園で遊ぶこともできないし、土日は妻、子どもの体力回復に捧げられるかもしれない。 そういうわけで色々行くことにした。 PLAY! PARK ERIC CARLE 河津桜 ボーネルンド 多摩動物公園 やまと公園 雨も降らなかったので土日全部足遊びに出かけたかもしれない。 バス乗りたいとか電車乗りたいっていう要望にも応えられたし良かった。 それにしてもPLAY! PARK ERIC CARLEは微妙だった。 それに比べてやまと公園は常に小田急線が見える公園ということで子どもは大興奮だった。 なんで男の子は電車が好きなのだろうか。 自分の小さい頃は興味なかったらしいので、遺伝とかではなく、人類というもっと大きい遺伝子に組み込まれているのだろうか。 4月に向けて 4月から生活がガラッと変わるのは間違いない。 7時30分には保育園に送る必要がある。 だいたい起きて家を出るのに2時間かかるので、4月からは5時30分に起きて、大人の準備を終わらせ、6時には子どもたちを起こしたい。 そのために睡眠時間を確保するために20時には子どもたちを寝かしつけたい。 という4月からの生活に向け、3月末から実践を始めたけど、全くうまくいかない。 まず20時までにすべての事柄を終わらすは無理だし、もっと遊びたいとぐずるし、朝は起きないしで全く思い通りにいかない。 しかも夜泣きはするし、寝かしつけても泣いて起きて大声で呼ばれて、仕方なく添い寝してたら一緒に寝ちゃうしで、家事も終わらない。 それに加えて保育園の準備が多すぎる。 服にスタンプ押すのも面倒くさいし、買い物も沢山あるし、なるほど保育園を迎えるのも大変だと実感した。...

投稿日 · 2025-03-29 · 更新日 · 2025-03-29 · 1 分 · nove-b

GA4にイベントを送り、レポートで確認する

みんなの好きな作家が気になる ここ最近、ずっとアップデートを続けているKindle Unlimited検索サイトのイベントを収集することにした。 このサイトは好きな作家を登録したうえで使用するんだけど、そのイベント、つまりどの作家が登録されたかを取得できるようにした。 理由としては将来的に作家ランキングとかを実装できればと考えたからと、個人的にみんながどんな作家を好んでいるかを知りたかったから。 イベントを送る 実装方法としては特別難しいことはない。 function 作家登録処理(作家名: string) { ... 作家を登録する処理 if (window.gtag) { window.gtag('event', 'registration_author', { event_value: 作家名, }); } } これだけで実装は完了。 確認方法としてはリアルタイムで、registration_authorというイベントを確認し、そこのevent_valueに値が取れていれば問題ない。 これだけだとレポートで一覧の確認ができないので、見れるようにカスタムディメンションに登録をする。 カスタムディメンションに登録 管理 => カスタム定義 => カスタムディメンションを作成を選択する。 ディメンション名を任意で設定し、範囲をイベント、イベント パラメータをevent_valueにする。 で、数日たてばデータが反映され、レポートでイベントパラメーターの値一覧を見れるようになる。 値一覧を見る ホーム > イベント で該当のイベントを選択する。 そうすると登録したイベントのカスタムディメンション値一覧を取得することができる。 上記はとある日の登録された作家一覧。 まだユーザーが少ない。ここが拡充していくことを祈っている。

投稿日 · 2025-03-22 · 更新日 · 2025-03-23 · 1 分 · nove-b

レスポンス429の時に成功するまでリクエストをし続ける

運用こそ正義 ありがたいことに運用中のサービスを使ってくれる人が、本当にぼちぼちだが増えたきた……、気がする。 https://kindle-unlimited-search.nove-b.dev/ ただまだいくつか問題点があり、今回はその1つ「ステータスコードがしっかり定義されていない」という問題を解決した。 現状のサービスだと 該当する作家が見つからない クエリで送ったページが範囲外 amazon側のリクエスト不可で応答できない という起こりえるエラーをすべて400のサーバーエラーでフロント側に返していた。 これだと、フロント側でユーザーに対して異なるメッセージを提供することができず、全く親切じゃない。 しかもフロントは400が返ってくる前でリクエストをし続けるという、こちらも全く親切じゃない実装をしていた。 ステータスコードを定義した そこで、該当する作家が見つからない時は404を、ページが範囲害外の時は416を、そしてリクエスト制限の時は429を返すようにした。 そしてフロントではその値で処理を分けることにした。 404の時は「検索した作家の作品が見つかりませんでした。」というスナックバーを出し、416の時はつまり、すべてのページを確認したということなので「作品(最大100件)の取得が完了しました。」というスナックバーを出し、429の時は再度リクエスト制する(5回まで挑戦する)という仕様に書き換えた。 リクエストを再試行する 429のように再度リクエストするコードをプラグインなしで初めて書いてみたので備忘録してまとめておく。 初めて知ったんだけど、指数バックオフという手法を取ることにした。 指数バックオフとは リトライ(再試行)する間隔を指数関数的に増加させる手法 とのことらしい。 つまり初回のリトライに失敗したら1秒後に再試行、2回目失敗したら2秒後に再試行、3回目失敗したら4秒後…といった具合に増加していく。 これに加えて今回は5回までリトライして接続できなかった時は処理を中断させることにした。 const fetchAPI = async () => { setState("wait"); let page = 1; let retryCount = 0; const maxRetryCount = 5; // 最大リトライ回数 while (true) { // page が 10 を超えた場合はループを終了 if (page > 10) { setState("end"); console.log("成功"); break; } try { const response = await fetch(`${endpoint}$`); if (response....

投稿日 · 2025-03-19 · 更新日 · 2025-03-22 · 1 分 · nove-b

React Router v7で作成したウェブアプリをPWAにする

React Router v7でウェブアプリを作成した。 Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った これを少しずつ改良しているんだけど、サイトに訪問するのが面倒なのでPWAにすることにした。 環境 PWAにしたアプリの環境は下記の通り。 { "react-router": "^7.1.5", "react": "^19.0.0", "vite": "^5.4.11", } "volta": { "node": "23.8.0", "npm": "10.9.2" } PWAにする vite-plugin-pwaをインストールする。 npm install -D vite-plugin-pwa vite.config.tsのpluginsにvite-plugin-pwaを追加する。 plugins: [ ... VitePWA({ registerType: "autoUpdate", // サービスワーカーを自動的に更新する設定 manifest: { name: "アプリ名", short_name: "短縮名", description: "アプリの説明", theme_color: "#ffffff", background_color: "#ffffff", display: "standalone", orientation: "portrait", start_url: "/", icons: [ { src: "/icons/icon-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/icons/icon-512x512.png", sizes: "512x512", type: "image/png", }, ], screenshots: [ { src: "screenshots/screenshot1....

投稿日 · 2025-03-09 · 更新日 · 2025-03-09 · 1 分 · nove-b

VS Codeをコマンドから開くときに既存ウィンドウで開くようにする

bashで特定のディレクトに行き、 code . 上記コマンドでVS Codeを開くことができる。 いつもこの方法で開いていたのだが、毎回毎回新しいウィンドウで開くのが鬱陶しかったので、既存ウィンドウで開くコマンドを調べてみた。 code . -r 上記で既存ウィンドウで開けるらしい。 ちなみに既存、新しいウィンドウで開くかは設定によるらしい。 もし新しいウィンドウで開きたいときは、 code . -n 上記コマンドを実行する。

投稿日 · 2025-03-09 · 更新日 · 2025-03-09 · 1 分 · nove-b