Zennに「GeminiでレシートOCRしてセルフメディケーション税制を自動集計する」記事を投稿する

セルフメディケーション税制の対象金額を、Gemini、Python、SQLiteで自動集計するツールを作成しました。

今回は、その内容をZennの記事として投稿する作業を行いました。

この記事では、Zenn CLIで新規記事を作成し、Markdownを編集し、プレビューで確認し、GitHubへpushするまでの流れをまとめます。

今回やること

今回の作業内容は以下です。

Zenn用リポジトリへ移動する
最新状態を取得する
Zenn CLIで新規記事を作成する
Markdown記事を編集する
npx zenn preview でローカル確認する
問題なければcommitしてpushする
Zenn CLIのバージョン問題を確認する
Node.jsのバージョン切り替えが必要なことを確認する

Zenn用リポジトリへ移動する

まず、Zenn記事を管理しているリポジトリへ移動します。

cd ~/aw10s/zenn_article

念のため、GitHub上の最新状態を取得します。

git pull origin main

Zenn CLIで新規記事を作成する

Zenn CLIで新しい記事ファイルを作成します。

npx zenn new:article

実行すると、以下のようなメッセージが表示されました。

╭─────────────────────────────────────────────────────────────╮
│                                                             │
│   新しいバージョンがリリースされています: 0.1.158 → 0.4.6   │
│   npm install zenn-cli@latest で更新してください            │
│                                                             │
╰─────────────────────────────────────────────────────────────╯

created: articles/cdd8db0ade01ce.md

Zenn CLIのバージョン更新案内は出ていますが、記事ファイル自体は正常に作成されています。

今回は以下のファイルが作成されました。

articles/cdd8db0ade01ce.md

記事ファイルを編集する

作成されたMarkdownファイルを編集します。

vim articles/cdd8db0ade01ce.md

最初に作成した記事のフロントマターは以下です。

---
title: "GeminiでレシートOCRしてセルフメディケーション税制を自動集計する"
emoji: ":pill:"
type: "tech"
topics: ["python","sqlite","gemini","automation","tax"]
published: true
publication_name: "singularity"
---

ただし、Zennのプレビューで確認したところ、emoji は :pill: ではなく、実際の絵文字を入れる方がよさそうでした。

最終的には以下のように修正しました。

---
title: "GeminiでレシートOCRしてセルフメディケーション税制を自動集計する"
emoji: "💊"
type: "tech"
topics: ["python","sqlite","gemini","automation","tax"]
published: true
publication_name: "singularity"
---

記事のタイトル

記事タイトルは以下にしました。

GeminiでレシートOCRしてセルフメディケーション税制を自動集計する

Gemini、レシートOCR、セルフメディケーション税制、自動集計という要素が分かるタイトルにしています。

記事の概要

記事では、セルフメディケーション税制を使うときに必要になる、対象商品の購入額集計、店舗ごとの整理、レシート管理を自動化する流れを書きました。

構成としては以下です。

レシート撮影
      ↓
Gemini OCR
      ↓
CSV生成
      ↓
SQLiteへインポート
      ↓
商品別 / 店舗別 集計

手作業でExcel管理する代わりに、Gemini、Python、SQLiteで処理する構成です。

記事本文の構成

Zenn記事の本文は、以下の構成にしました。

セルフメディケーション税制の集計が面倒な理由
作ったツールの概要
システム構成
GeminiでレシートをCSV化する方法
CSVをSQLiteへインポートする方法
商品別ランキング
確定申告用の店舗別集計
ツールのメリット
今後の改善
GitHubリンク

GitHubリンクは公開用URLに差し替える

記事内にはGitHubリンクを入れました。

メモ段階では以下のように仮URLにしています。


Build software better, together
GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...
github.com

公開時には、実際に作成したGitHubリポジトリのURLへ差し替えます。

また、リポジトリ名の末尾に意図せずハイフンが入っていないか確認します。

例えば以下は別のリポジトリ名として扱われます。

self-medication-tax-deduction
self-medication-tax-deduction-

Zenn previewで確認する

記事を保存したら、ローカルでプレビューします。

npx zenn preview

ブラウザで以下へアクセスします。


http://localhost:8000
localhost

プレビューで確認したところ、絵文字の指定を修正する必要があったため、フロントマターを以下のように変更しました。

emoji: "💊"

修正後、再度プレビューして問題ないことを確認しました。

記事をcommitしてpushする

プレビューで問題なければ、Gitへ追加します。

git add .

コミットします。

git commit -m "記事追加: GeminiでレシートOCRしてセルフメディケーション税制を自動集計する"

GitHubへpushします。

git push origin main

Zenn CLIのバージョン問題

作業中、Zenn CLIのバージョンが古いという案内が出ました。

新しいバージョンがリリースされています: 0.1.158 → 0.4.6
npm install zenn-cli@latest で更新してください

そこで、Zenn CLIを更新しようとしました。

npm install zenn-cli@latest

その後、バージョン確認を行います。

npx zenn --version

しかし、ここでエラーになりました。

原因：Node.jsのバージョンが古い

Zenn CLIの最新版を使うには、現在のNode.jsバージョンが古い可能性があります。

一方で、Firebase Gen1ではNode.js 18を使いたい事情があります。

そのため、単純に全体のNode.jsを新しくするのではなく、用途ごとにNode.jsのバージョンを切り分ける必要があります。

Node.jsバージョン切り分けの方針

今後の方針は以下です。

Zenn CLIやGemini CLIなど新しいツールはNode.js 20以上または24系で動かす
Firebase Gen1のプロジェクトではNode.js 18を使う
プロジェクトごとにNode.jsバージョンを切り替える
nodebrew や direnv を使って管理する

これにより、Zenn CLIの更新とFirebase Gen1の互換性を両立できます。

今回の到達点

今回の作業で、以下までできました。

Zenn用リポジトリへ移動した
git pull origin main で最新化した
npx zenn new:article で新規記事を作成した
セルフメディケーション税制の自動集計記事を書いた
emoji を 💊 に修正した
npx zenn preview でローカル確認した
git add、git commit、git push の流れを確認した
Zenn CLI更新時にNode.jsバージョン問題が出ることを確認した

ハマりどころ

emojiは実際の絵文字にする

最初は以下のように書いていました。

emoji: ":pill:"

しかし、Zennのプレビューでは意図通りにならなかったため、以下のように修正しました。

emoji: "💊"

Zenn CLIが古くても記事ファイルは作成できる

Zenn CLIの更新案内は出ましたが、new:article 自体は成功していました。

そのため、まず記事を書いてプレビューし、必要に応じてCLI更新を考える方針で進めました。

Node.jsをむやみに上げるとFirebase Gen1と衝突する

Zenn CLIやGemini CLIでは新しいNode.jsが必要になる一方で、Firebase Gen1ではNode.js 18を使う必要があります。

そのため、全体のNode.jsを一律で上げるのではなく、プロジェクトごとに切り替える仕組みが必要です。

次にやること

次は、Node.jsのバージョン切り替えを整理します。

nodebrew でNode.js 18と24を共存させる
Zenn記事用リポジトリでは新しいNode.jsを使う
Firebase Gen1プロジェクトではNode.js 18を使う
direnv でディレクトリごとに自動切り替えする
Zenn CLIを最新版へ更新する

まとめ

今回は、GeminiでレシートOCRしてセルフメディケーション税制を自動集計する記事を、Zennへ投稿する流れを整理しました。

Zenn CLIで新規記事を作成し、Markdownを編集し、npx zenn preview で確認してからGitHubへpushしました。

記事自体は作成できましたが、Zenn CLIを最新版へ更新しようとしたところ、Node.jsのバージョン問題が出ました。

今後は、Zenn CLIやGemini CLIでは新しいNode.jsを使い、Firebase Gen1ではNode.js 18を使うように、nodebrew と direnv で環境を分けて管理していきます。

Zennにセルフメディケーション税制の自動集計記事を投稿する