生成AIストリーム

バイブコーディングで永遠に動き続ける郵便番号&デジタルアドレス検索サイトを構築してみた

バイブコーディングで永遠に動き続ける郵便番号&デジタルアドレス検索サイトを構築してみた

年賀状のシーズンは終わってしまいましたが、昨年は「年賀状じまいハガキ」なる商品も売られ、好評だったようです。終活にも年賀状が必要ですね!

「年賀状の裏側」は画像生成AIやLLMの進化が止まらない昨今、さほど困る事はないと思います。でも表側の「住所」はいかがでしょうか?今回は少し趣向を変えて、私たちの生活の「足回り」を支える重要なインフラ技術、日本郵便の「郵便番号」や「デジタルアドレス」について、AI時代のエンジニア兼経営者の視点から掘り下げてみたいと思います。『住所入力、面倒くさいな』と思ったこと、ありませんか? あの長い住所がたった7文字の英数字になる未来が、すぐそこまで来ています。今回は実際に自社のデジタルアドレスの取得方法と、郵便番号検索を自社のWebサービスに実装するまでの開発ログをお届けします。

デジタルアドレスとは?

皆さんは「デジタルアドレス」をご存知でしょうか? これは日本郵便が提供を開始した新しい住所の仕組みです。これまで『東京都千代田区……』と長く記述していた住所を、7桁の英数字(例:LB7-F448)で表現できるようになるそうです。ただし、デジタルアドレスの記載のみで郵便物・荷物を送ることはできません。公式APIを利用し、デジタルアドレスを住所に変換のうえ、郵便番号・住所・氏名を送り状に明記する必要があります。

https://svc.da.pf.japanpost.jp/about

デジタルアドレスは「ゆうID」を会社で取得すれば比較的簡単に申請できる

技術者向け実装ログ:Next.js + Vercelで挑む

さて、ここからは「窓の杜」読者のみなさんに向けた実装レポートです。 今回は、筆者自身が自社のWebサービスにおいて、『郵便番号またはデジタルアドレスを入力すると、住所候補を自動提案する』という機能を実装してみました。

開発環境はモダンなWeb開発で標準的な「Next.js」と「Vercel」です。
あとは「Visual Studio Code」と「GitHub」(ghコマンド)、「Vercel CLI」とCloudFlareのCLIである「Cloudflare Wrangler」を、AIに操作させて環境を構築します。AI DevOpsとでも呼びましょうか。コーディングエージェントは今回は最近のお気に入り「Claude Code v2.0.69 (Opus 4.5)」を使ってみます。

「Claude Code」v2.0.69にコーディングを依頼

Claude(アプリ版)に設計を書かせて、Claude CLIに引き継ぐ

最近のベストプラクティスですが、いきなり「Claude Code」や「Gemini CLI」、「OpenAI Codex」を「Visual Studio Code」のターミナルから起動するよりも、「ChatGPT」のや「Claude」のアプリ版を使って、作りたいアプリやサービスの設計、仕様を詰めに詰めてからAGENTS.md やZIPファイルにしてプロジェクトを始めたほうが開発スピードが早いです。というのも、最近はCLIも画像やクリップボードを受け入れるようになったのですが、アプリ版の方がファイルへのアクセスなどが使いやすいので、先にアプリ版で設計を進めてからAGENTS.mdを作り上げます。進行段階などもチェックボックスで管理できます。

# AGENTS.md - Postal Search Project

## プロジェクト概要

**postal.aicu.jp** - 郵便番号・デジタルアドレス検索サービス
「窓の杜」向け技術記事の実装デモとして開発中

## 現在の状態

- [x] MVP実装完了(静的HTML版)
- [x] GitHubリポジトリ作成
- [ ] Vercelデプロイ
- [ ] カスタムドメイン設定(postal.aicu.jp)
- [ ] Cloudflare経由でAPIプロキシ構築

こんな感じで初期のフロントエンドが出来上がりました。

開発した「Postal Search」のユーザーインターフェイス

実はオープンソース化されている郵便番号のWebAPI

次は郵便番号から住所を検索する機能を実装してみます。
この機能は日本郵便が整備した郵便番号をデータベース……ではなく、有志によってオープンソース化されているのでそちらを使います。「オープンソース」というとLinuxのようなプログラムコードに聞こえるかもしれませんが、公開されている郵便番号のCSVデータファイルをもとに、ファイルベースのAPIを作り、GitHubを使った永久無料のWebAPIとして整備されています。

日本中のWeb開発者がこの「郵便番号API」を利用すると、GitHubのトラフィック制限に引っかかってしまうかもしれないので、このWebAPIも自社で収容することにします。

自社のサービス、といっても郵便番号のAPIに大規模なサーバーリソースを提供し続けるわけにはいきませんので、CDNであるCloudFlareを使います。

CLOUDFLARE_API_TOKEN は「@@link|https://dash.cloudflare.com/profile/api-tokens|https://dash.cloudflare.com/profile/api-tokens」より
[マイ プロフィールMy Profile]→[API トークン]→[トークンを作成する]→[Cloudflare Workers を編集すCloudflare Dashboardる]の[テンプレートを使用する]から取得できます。

Cloudflare APIのトークン作成画面
必要な項目を設定

「CLOUDFLARE_ACCOUNT_ID」は Claude code経由で「Cloudflare Wrangler」にお願いすれば、アカウントIDを取得してGitHub Secretsに設定してくれます。@@

※この手法が AI DevOps時代のセキュリティ的に正しいかどうかは今後の判断が微妙なところではありますが、読者の皆様は最低でも「.env」などに書いたAPIキーをGitHubにデプロイしてしまったりしないようにはしてくださいね(わりとよくある事故)。

さて、上流データをダウンロード……と思ったのですが、さすがに14万件もある郵便番号データをCloudFlare Pagesに置くのは失敗、上限(2万ファイル)にひっかかってしまいました。

14万件の郵便番号データをCloudFlare Pagesに置くのは失敗

Claudeから「Cloudflare Wrangler」を使って調査を進めてもらい、CloudFlare Workers+上流プロキシという方針で進めていくことにしました。URLの設定も様々あり、Claudeと検証した末に、最終的にAPIエンドポイントを決めました。SSLの取得なども自動で行っています。

このURLをブラウザーでアクセスすると、以下のようなJSONデータが帰ってくるはずです。

> {"postalCode":"1000001","addresses":[{"prefectureCode":"13","ja":{"prefecture":"東京都","address1":"千代田区","address2":"千代田","address3":"","address4":""},"kana":{"prefecture":"トウキョウト","address1":"チヨダク","address2":"チヨダ","address3":"","address4":""},"en":{"prefecture":"Tokyo","address1":"Chiyoda-ku","address2":"Chiyoda","address3":"","address4":""}}]}

アーキテクチャ
  postal.aicu.jp (Vercel)
      │
      ├── 郵便番号検索 → (APIエンドポイント).aicu.jp (Cloudflare Workers)
      │                      ↓
      │                  jp-postal-code-api.ttskch.com
      │
      └── デジタルアドレス → https://(APIエンドポイント).aicu.jp/

日本郵便のAPIキー取得

開発者向けの資料はこちらに整備されています。APIキー自体は無料で発行できますが、さまざまな規約があります。まずは、クライアントIDの申請と、シークレットキーを取得しましょう。こちらもClaudeと「Cloudflare Wrangler」から設定できます。

CloudFlareのダッシュボードから設定する場合は、[コンピューティング と AI]→[Workers & Pages]→[postal-api]→[Settings]→[Variables and Secrets]から行います。

APIキーの取得とフロントエンドの実装について、もうちょっと噛み砕いたブログはこちらです。

APIキーを入手したら設定してテストしてみてください。

筆者が作ったサイトはhttps://postal.aicu.jpから利用できます。

『LB7-F448』と入力して、以下のようなデータが表示されたら成功です。

📮デジタルアドレス LB7-F448 〒108-0023

東京都港区芝浦3丁目3番6号

東京科学大学 田町キャンパス INDEST 306

AICU Japan 株式会社

郵便番号とデジタルアドレスが検索できるようになりました

デジタルアドレスを応援したい

今回、デジタルアドレスAPIを触ってみて感じたのは、「住所」という物理的な制約が、公共のAPIを通じて「データ」として抽象化される面白さです。

英国やカナダではすでに似たようなコード体系が普及しています。日本はまだ現在はデジタルアドレスだけでの郵便物を発送することはできないようですが、これが広まれば、ECサイトでの入力ミスによる配送トラブルは激減するでしょうし、手書きの送り状を書く手間もなくなります。書き間違いやサイトでの入力の手間などは随分と減るのではないでしょうか。このAPIを使ってチャットボット「全力肯定彼氏くん」でも郵便番号やデジタルアドレスを検索できる機能を追加できました。

LINEチャットボット「全力肯定彼氏くん」で、郵便番号とデジタルアドレス検索機能が追加できた

でも 一方で、セキュリティ研究者の視点から見ると、リスクもゼロではないかもしれません。

  • 取得が簡単すぎる!
    申請は誰でもできます。会社の責任者である必要はありませんので気軽にできますが、一方では悪意の第三者が勝手に取得したりすることも可能かも?車のナンバーみたいに「良番」を売るような事もできるのでは。
  • プライバシーと逆引き
    現状の仕様では、デジタルアドレスから個人名を特定することはできませんが、逆にデジタルアドレスをChatGPT等のチャットボットに記載することで、個人情報を逆引きすることができてしまいます。会社の住所であれば公的なデジタルアドレスとして「個人情報」ではありませんが、一般個人が使用するには課題は多そうです。日本郵便のAPIでの規約を遵守して利用しましょう。

それでも、デジタルアドレスの可能性はたくさんあります。これからも応援していきたいですね!

◾️ バイブコーディングでのAI DevOps
さて、今回はClaude Codeを使ってCloudFlareやVercelといったクラウドのインフラを再現性高く実装してみました。「バイブコーディング」と表現してしまいましたが、実際にコーディングは1行もしないまま、必要なサービスを可用性高く、保守の面倒も少ない方法で実装できたことは特筆に値します。「AI DevOpsこれに極まれり!」という感じです。しかもローカルの実験ではなく、本番として稼働するレベルのサービスです。もちろん、誰もがこんな感じで新しいサービスを作れるわけではなく、様々な知識がない人が、ノリだけで作ると新しい問題も出てくるとは思うのですが……。今回は郵便番号検索、という特に著作権も関係ない公共に貢献するサービスですので、練習問題として適しているかな?と思います。できるだけコストをかけずに、安定したサービスが分散して提供できることが良いと思いました。

延々と続いてきた年賀状関連サービスの「終活」ついでに、デジタルアドレスで永遠に動き続けるサービスをつくるのも前向きですよね!

みなさんの会社のお仕事でもこんな感じのストリーム感のあるAI実装、試してみませんか?

しらいはかせ(白井暁彦)X@o_ob

AICU Japan株式会社 X@AICUai 代表/作家/生成AIクリエイター/博士(工学)。

「つくる人をつくる」をビジョンに、世界各地のCG/AI/XR/メディア芸術の開発現場を取材・研究・実践・発信している。