Posts

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

運用こそ正義 ありがたいことに運用中のサービスを使ってくれる人が、本当にぼちぼちだが増えたきた……、気がする。 https://kindle-unlimited-search.nove-b.dev/ ただまだいくつか問題点があり、今回はその１つ「ステータスコードがしっかり定義されていない」という問題を解決した。 現状のサービスだと 該当する作家が見つからない クエリで送ったページが範囲外 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....

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....

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

最近、英語入力、日本語入力でよく間違える。 なんでだろうと原因を考えてみたけど、現在どっちの入力モードかわからないことがいけない気がする。 そこで明示的に切り替えられるようにした。 「あ」（「A」の可能性もある）を右クリックでIMEオプションを開く 設定 キーとタッチレスのカスタマイズ キーの割り当てをオンに 無変換キー IME-on 変換キー IME-off という風に設定すれば、 無変換キー押下で日本語入力に。 変換キー押下で英語入力という風に明示的に変更することができるようになった。 Macは標準でこの設定だった気がする、さすがMac。