IRIS-ON-BOOKREST

ログイン購読する

プログラミング

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

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

Ghostのアップデート手順

Wordpressと違ってGUIからの更新ができないため、定期的に自分で更新してあげる必要があります。そういえば最近更新していなかったため、ここに情報を残しつつ更新することにしました。アップデートの手順 1.Ghost CLIを最新化まずはGhostを管理するCLIツール自体を最新にアップデート。 sudo npm install -g ghost-cli@latest うまくいったら↓のログが出る！ 2.Ghostのディレクトリに移動 Ghostがインストールされているディレクトリ（例: /var/www/ghost など）に移動。 cd /var/www/ghost 3.念のためバックアップ　任意万が一途中でコケたときのために、現在のデータや設定のバックアップをエクスポートしておく。別の手段でバックアップしているならやんなくてもOK。 ghost backup 4.アップデートを実行以下のコマンドを実行すると、最新バージョンへのアップデートが始まる。 ghost update こんな感じでバ

縦書き画像をSNSに投稿できるWEBツールを作った

どうも、やまぐろです。ひととおり週次タスク（家事）も終わって時間ができたので、なんか作るかーって感じで「縦書き画像ジェネレーター」が誕生しました。↓ https://iris-on-tools.net/vertical-text-generator/ 外観とか恐らく解説がなくても使えるような感じになっていると思います。SNS投稿ボタンの挙動がちょっとクセありますが、間に説明挟んだので大丈夫なはず。。なぜ縦書きツールを作ったのか入口は季節感なんか季節感あるやつを作りたいなーって思いたち、そういえば七夕が近いなーとなりました。なのでもともとはSNS投稿用の短冊ジェネレータとして構想したものです。5分くらいの構想ですがｗそこから縦書きが合うような短歌や詩なども画像化できたらいいなあと思い、テンプレートが増えていった感じです。なんとなく今後も拡張できそうそもそもツール群として動かしているサイトの一部のコンテンツになるので、一度作ったらあんまりアップデートしない想定ではあるんですが、これについては季節感がスタートなので今後も拡張できる

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

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

Claude Codeプラグイン「frontend-design」は本当にAIっぽいデザインを避けることができるのか？

筆者が運営しているサイトは3つありますが、どれもフロントエンドのスタイルについては基本的にAIにまかせてコーディングを行っています。自分で頑張ってスタイルシートを書かなくて済むのでめっちゃ便利な反面、世間でも言われている通り、どうしても「AIっぽいデザイン」に収束してしまうのが玉に瑕なんですよね。今回はこの「AIっぽいデザイン」を回避できると噂のClaude Codeプラグイン「frontend-design」を利用して、どのようなものが出来上がるのかを確かめてみたいと思います。まずは元の状態からもともとのデザインはこんな感じ。ちなみに、簡易的なWEBツールを配置しているサイトになります。 https://iris-on-tools.net/ 実はこのサイト、AIでデザインを行った際の特徴がふんだんに盛り込まれています。例えば * なんとなく紫が貴重になっている * グラデーションが利用されている * 絵文字が多様されているという要素はAIに良くみられる特徴です。やったことある方には分かるはず！ frontend-des

ObsidianからGhostへ直接投稿するツールを自作した話

筆者は最近Obsidianで記事執筆を行うことが多くなっています。んで、Obsidianで書いた記事をGhostブログに投稿する際、毎回ブラウザを開いてコピペするのが面倒だったので、Pythonで専用の投稿ツールを作ってみました。今回は開発する際のあれこれをここで共有していきたいと思います。開発の動機正直なところ興味本位というのが強いのですが、一応「ブログ投稿の手間をより少なくする、という目的があります。 * 現状: Obsidianで書く -> ブラウザでGhost管理画面を開く -> 新規投稿 -> コピペ -> 設定入力 -> 公開 * 理想: Obsidianで書く -> ツール起動 -> ファイル選択 -> 投稿ボタン一発この「理想」を実現するため、PythonからGhostのAdmin APIを叩くシンプルなツールとして設計することに。なお、Ghostの記事(Posts)APIは画像データのアップロードは行えません。なので、「画像が必要な投稿には対応しない！」と割り切ることにしました。まあこのブログは基本的にテキストオンリーなので、

Antigravityで脱CMSした話

筆者はこのブログのほかに、 * しぇあほん（Webサービス） * アイリス・オン・ツールズ（自作ツール）という2つのWebサイトを運営しています。そして、このたびツールを公開しているWordPressサイトを、Antigravityを利用してイチから書き直しました。もちろんもともとの機能はそのままです！今回は、ここに至るまでの経緯と、どういう手法で移行したかをお話できればと思います！脱CMSしたわけ自作ツールについては、もともとは一つ一つWordPressのプラグインとして実装し、ショートコードで記事ページに埋め込むという手法で公開していました。初めの頃は慣れ親しんだWordPressで作ったものを公開できるは楽でいいなと思っていたのですが、新しいツールを作れば作るほど、WordPressである必要を感じなくなっていきました。それもそのはず、そもそもプラグインという形式以外、WordPressに依存しておらず、利点である通常のブログ記事公開も一切していませんでした。そう、もはやコンテンツマネージメントする必要がない状態だったのです！はなからそのつもり