3Dプリントアイテムのショップ道具眼ショップはWordPress上で動くWooCommerceというECサイト開設プラグインで構築しています。とてもよくできたプラグインですが、個人レベルでは微妙に痒い所に手が届かない場所があったりして、有料のプラグインを導入するほどでもないところはAIにカスタムしてもらったりオリジナルのプラグインを作って貰ったりしまくっています。
本記事ではそんな一例を紹介してみたいと思います。
最近こちらで、「最近AIで日々の作業を簡略化、自動化したよ」みたいな事例を語るビデオPodcast的な雑談チャンネルをやってるのですが、そこで触れた発送管理ツール、プロンプトや画面例が出て来ない（編集を最低限にする主旨でやっている）ので、少し補足的にここに載せておこうと。
どうしてもお客さんの宛先情報とかが映ってしまう関係上、画面シェアで動画に載せるのは躊躇われたので、静止画でボカシを入れてここに載せます。
■やりたかったこと
私のショップでは3Dプリントで作った小物を販売しており、その大半は日本郵便のクリックポストで発送します。クリックポストはWeb上で宛名情報を入れて決済するとバーコード入りの宛名ラベルが出力されるので、それを荷物に貼り付けてポストに投函する仕組みです。発送時にWooCommerceが顧客に送信するメールに追跡リンクを挿入するため、クリックポストで発番された追跡番号をWooCmmerceの注文レコードに追加しています。つまり追跡番号が注文情報と宛名ラベルを紐付けるキー情報になっている前提です。
またWooCommerceには注文後とのステータスフラグがあり、「入金待ち」「処理中」「完了」「キャンセル」などがプルダウンメニューで指定します。「完了」にすると自動的に発送通知が顧客にメールされるようにもなっています。
動画でも触れていますが、私はパッケージを作ったからといって即「完了」ステータスにはしたくない。うっかりその荷物をポストに入れ忘れるリスクがあるので、確実にポストに投函完了した段階で「完了」フラグを立てたい。最初は投函して帰宅した後にまとめてフラグをつけたんですが、これも結構忘れがちで、相手に届いた頃に思い出してステータスを変更して発送完了メールが送られたりする（他の通販でもそういうことがままあり、「あぁ、同じミスしてんだなぁ」と思ったりもしています）。
つまり事前でも事後でもなく、ポスト投函した瞬間に完了フラグをつけたい。もちろんWordPressなのでスマホのブラウザからでも操作できますが、荷物がたくさんあると取り違えの可能性があったり、ポスト前で時間をかけて作業したくない。そんなニッチはニーズを満たす機能をつけたい（作りたい）と思い立ったのが経緯です。
■やったこと
もともとChatGPTやGeminiでコードを書くことが多かったんですが、動画の主旨がClaudeだったこともありちょうどProプランをサブスクしたばかりだったClaudeを使いました。初期プロンプトはこちら。いきなりの具体的な作業指示ではなく、「こんなことをしたいけど、そもそもどんな実装方法がいいか？」というところを相談するところからスタートしました。
WooCommerceの出荷管理（ステータスを”完了”にする）を簡便化するツールを作りたいです。 現在出荷物の大半をクリックポストで行っており、Advanced Shipment Tracking for WooCommerceプラグインで注文レコードに追跡用バーコードの値を追加しています。 運用としては、投函漏れがないように、ポストで投函する瞬間にスマホのWooCommerceアプリで注文を探しステータスを変更していますが、数が多いとポスト前でもたつきます。
これを改善するソリューションとして、
・iPhoneのカメラで投函物のクリックポストラベル上のバーコードを読む
・Advanced Shipment Tracking for WooCommerceのフィールドからマッチする追跡番号を含む注文を見つけてステータスを「完了」に変更する
という処理を行うツールを作りたいです。実装の方向性としては、
1) WordPressのAPIを叩くWebアプリやiOSアプリを作る
2) WordPressのプラグインとして実装し、モバイルブラウザでアクセスする
などがあるかなと思っています。UIとしては、
・バーコードを読み取る
・照合して注文者名を表示
・目視確認して、「完了」ボタンを押すとステータス更新
みたいなのを基本として、数個のパッケージを連続で効率よく処理できるとベストです。実現可能性を検討してください。
結果としてClaudeの推奨はWordPress上にプラグインを実装するというものでした。Advanced Shipment Trackingが追加するカスタムフィールドをWordPress API経由で操作することができないので、そこの窓口を開けるくらいなら、最初からWordPress内部に入って制御する方が簡単だというわけです。アクセス制御などセキュリティ面もWordPressの既存機能を活用できる分、簡略化できるという点も。
課題として、iPhoneのSafariにバーコードを認識するAPIがない点で、オープンソースのバーコードライブラリを探してプロトタイプを作ってくれて、クリックポストのバーコードが使っているCodabar（NW-7）という形式が正常に読み取れるかテスト。これが成功すると本格的にコーディング作業に移行。いくつか細かいUIの注文を指示して、以下の物が完成しました。
■できたもの
できた画面がこちら。
バーコードスキャナー周りについては、ズームやライトなど頼んでないことも勝手に実装してくれています（おそらくバーコードリーダーライブラリーのサンプルや仕様にあったんじゃないかと）。横長の1次元バーコードを読む想定なので、カメラスルー画にグリーンの目安枠が出ていたり小綺麗かつ必要充分なユーザビリティを備えています。
クリックポストのラベルには一次元コード2つ、二次元（QR）コード1つがレイアウトされていますが、余計なコードを読んでしまわないよう内部的にスルーするようにもなっています。正しいバーコードを読み取ると「ピッ」と音がして、その数字をWordPress DBに照会して、「発送待ち」ステータスの注文レコードから該当するものの注文番号、注文者名、商品名のカードを画面下部に並べていってくれます。最後に「まとめて発送」ボタンを押すとステータスの書き換えを実行してくれます（その時点で購入者に発送完了メールが送信される）。
Safariのブックマークをホーム画面に表示する機能（PWA）を使って、ホーム画面からアイコンをタップするだけで呼びだせるようにもしていいるので、アドレスバーなどは消えていて画面一杯に見え、まさに専用アプリの出で立ちです。
追加で指示したこと
ほぼほぼ初回で満足のいくものができたのですが、使ってみてちょっと不便だなと思うことを追加で改善してもらいました。
・「スキャン開始」ボタンが押しづらい位置にあったので、カメラスルー画の枠タップでも起動できるようにしてもらった（しなみにブラウザのセキュリティルールでカメラの起動は必ずユーザ操作をトリガーにする必要があり、自動で最初からカメラが起動、ということはできません）。
・スキャンした後で画面を閉じるとメモリ状況によってはリストがクリアされてしまうので、ブラウザのローカルストレージにリストをキャッシュするようにしてもらった
・そうすると今度は発送し終わったリストが永続的に画面に残ってしまうようになったので、半日程度で消えるようキャッシュ寿命を定めてもらった
たぶん後出しでチューニングしてもらったのはそれくらいだったと思います。
なお、ここまで基本的に自分では一切コードをいじっていません。いわゆるバイブコーディングです。
■まとめ
WooCommerceでの発送作業で日々不便だなと思いつつ、なかなか自分でゼロからコードを書く時間もとれずにいたところを、Claudeを使ってみたところサクっとできてしまいました。技術的には時間をかければ自分でも作れたとは思いますが、自分のスキルでは1日仕事かそれ以上かかると思われ、腰を上げることはなかった気がします。Claudeも一瞬で作ってくれるわけではないですが、基本的には指示をして放置しておけば出来上がってくるので、他の作業の合間に進捗をみて追加指示をして、出てきた物をサーバーに設定して動作テストして、くらいのサイクルを何度かまわしたくらいです。本当にとんでもないツールが使えるようになったものです。
Thnking Aloudチャンネルでは、今後もノンプログラマ向けのAIを使ったリアルで身近な業務改善事例をダラダラを実演したり紹介していきたいと思います（他のコンテンツも混在しています）。生成AIってチャットで調べ物くらいしかしたことなくて、それ以上のことはプログラマーとかクリエイターが専門的に使うもの、というイメージをお持ちの方に、実はこんな身近な事務作業の簡略化、自動化にも使えるんだ！って気付きをもっていただくきっかけになればと思っています。ご関心をお持ちくださったらチェンネル登録などお願いできれば幸いです。
