IRIS-ON-BOOKREST

ログイン購読する

ブログ運用

いいねボタンをアップデートしてみた

以前ブログにいいねボタンを実装してみたで導入したいいねボタンを最新化してみました。なぜ最新化したのか比較的雑なスタートもともと、いいねボタンは個別の記事ページのみに配置する想定で実装していました。んで、いいね数を取得するのも、更新するのも個別のpost IDをパラメータする形となっており、まあパラメータ同じだったら、参照&更新を同一APIにしちゃっていいか！という組み方にしました。一覧にも表示したくなるしかし、結局あれこれやっているうちにTOPページなどにも記事ごとのいいね数を表示したくなってしまいました。この際、もともとのエンドポイントを利用しようとすると、記事数分のリクエストを投げなければいけなくなってしまい、結果無駄な通信が多く発生してしまうことになります。パフォーマンス面の悪影響もそうですが、コスト的にもworkersの無料枠はリクエスト数に基づいて決まっているため、なるべく不要なリクエストが発生しないようにするべきです。なので、今回この辺りをメンテナンスすることにしました。修正方針についてまずは修正方針を検討していきま

Amazon QにAWSの使用料を分析してもらった

このブログはAmazon LightsailというAWSのVPSを利用して動かしています。LightsailはAWSのサービスとしてはコスト管理がしやすく、比較的月額使用料が安定するものの、他のレンタルサーバーみたいに分かりやすく固定料金ではないですし、場合によっては不自然に高額になる可能性も秘めているため、これを運用する人間はそこそこ気をつかってコストと向き合っているはずです。今日はそんなAWS運用者に役に立つであろう、Amazon Qによる分析を試していきたいと思います。コスト管理開いたら、なんかいるやつ実はいままで全然使ったことなかったんですが、↓の左側ペインにいるやつがAmazon Qですね。右側に開かれているのがいつものやつです。さっそく使ってみる試しに、「2026年の月別コストを確認し、大幅な変動があったタイミングと原因を分析してください」と投げてみます。分析対象のデータが多いのでちょっと時間はかかりますが、それでも数十秒くらいで結果が出力されました。右側には分析結果をグラフにしたもの、左にはよく見るAIチャットのような解

ブログにダークモードとライトモードを切り替えるボタンを付けました【UI向上】

どうも、本業エンジニアです。ブログに付きがちなボタンと言えば「スクロールトップ」「ライト/ダーク切り替え」とかですよね、このブログにはもともとスクロールトップボタンが付いているので、今回はライト/ダークモードの切り替えボタンを実装してみました。そういえばもともとダーク基調だったこのブログは背景画像に図書館、色合いは黒に白文字なので、ベースがダークモードになっています。なので、ライトモードを実装すればオッケーということになります。ライトモードの配色について鉄板ではありますが、背景が白基調、文字を黒基調でいこうと思います。あとは左下あたりに切り替えボタンを実装すればOKですね。切り替えボタンを押すと、ダークモード用のスタイルクラスとライトモード用のスタイルクラスを切り替えるイメージとしました。ちなみに今回は一切自分でコーディングはしません。Claude Codeにお願いするかアンチグラビティにお願いするかですが、今回はアンチグラビティにしました。コードを自分でいじる気がないなら別にこっちでいいはずや、エディタすら開くつもりはないんや。ボタンのイメ

ブログにいいねボタンを実装してみた

どうも、本業エンジニアです。今回はこのブログに「いいねボタン」を実装してみました。細かいコードはAIに聞けばすぐ出てくると思うので、主に構成とか仕組みについて紹介していこうと思います。なお、外部のいいねボタンサービス（LikeBtn、Lyket）を利用しない方針でやっています。また、無料で実装&運用できる方法を選択しています。完成イメージ以下のようないいね機能が出来上がります。押すといいね数が繰り上がるボタン↓ 記事上にいいね数を表示↓ ざっくり処理フロー以下のフローで実装しています。恐らく登場人物はなんとなくこれで分かるかと思います。構成について今回は以下の構成でやっていきます。 * Cloudflare Workers（いいね数の管理に利用、無料で使えます） * Ghostの独自テーマ（いいねボタンの表示、いいね数の更新連携）コードが必要な部分も上記のみになるので、比較的少ないコード量で実装が可能です。ざっくり手順以下のステップでやっていくといいと思います。 * Cloudfl

エンジニアのブログ投稿フローを公開してみる

どうも、本業エンジニアです。本日は本業と全く関係がない、当ブログの投稿フローについて話していきたいと思います。ざっくりイメージとりあえず全体像が分かったほうがいいかなあと思って、Geminiにイメージを作成してもらいました。基本的にはローカル環境内で作業が完結するような構成にしている感じですね。投稿フローの解説では要素をひとつずつ解説していこうと思います。文章執筆・編集執筆は主にObsidianで行っています。Markdownベースのノート作成アプリですね。ローカルファイルを扱うのでとても軽いのが良いところです。また、md形式はAIとの嚙み合わせが非常によく、誤字チェックや構成なんかも簡単に実施することができます。また、エクスプローラーでのファイル操作が容易なので、整理整頓はかなりしやすい印象です。筆者もちょっと前にカテゴリ毎にディレクトリ作成して振り分けするツールを作成して整理したりしました。ローカルにファイルがある、というのはこういうところでもメリットになりますね。なお、このブログの記事にはアフィリエイトリンクが貼っ

やったことを振り返る：2026年2月

3月になったので、先月の振り返りをしようと思います。 2026年2月にやったことブログ投稿本数 2月の投稿は8本でした。だいたい週2のページだったということですね。あんまり更新ペースを気にしておらず、書きたい時に書くみたいなスタイルでやっているので、まあこんなもんなのかなと思います。それと、久しぶりにnoteの投稿をしたりもしました。ブログとの使い分けがとても難しいのですが、コラム的なものはnoteにしようかなあと考えていたり。底辺エンジニア、AIにビビる：https://note.com/yamaguro/n/nc091807ff6a4 このブログをWordPressからGhostにもともとWordPressでずっと運用していましたが、気分転換にGhostにしてみました。WordPressと比べると導入時の手間が多い側面があるものの、使用感はWordPressより軽快で良い感じです。一応個人的に欲しい機能だったりはテーマ側のコードをいじって導入し終えてはいるので、ここから先は安定運用できるかなって所感。このブログをWordPressからGho

Ghostのログイン画面にCloudflare Zero Trustを導入した話

はじめにブログを運営していると、避けて通れないのが「ログイン画面のセキュリティ」問題。例えばWordPressであれば、「/wp-login.php」または「/wp-admin」を末尾につけるとログイン画面に入れます。そしてこれは、なにも設定しなければ、誰でもログイン画面にアクセスできる状態になるということです。筆者ももともとWordPressを使っていたので、ログインURLを変更したり二段階認証を入れたり、ファイアウォールを設定したりという策を講じてきました。そして最近、筆者はWordPressからGhostというブログCMSに乗り換えました。 GhostはWordPressよりだいぶブログ執筆に特化しており、触ってて楽しいCMSではあるんですが、実はGhostもWordPressと同じように、ログインURLが指定のルール（/ghost）と決まっています。URLさえ知っていれば誰でもログインの試行ができてしまうんですよね。そこで今回導入したのが「Cloudflare Zero Trust」です。これを置くと指定のURLにアクセスした際に、通常ログインとは別