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ってチャットで調べ物くらいしかしたことなくて、それ以上のことはプログラマーとかクリエイターが専門的に使うもの、というイメージをお持ちの方に、実はこんな身近な事務作業の簡略化、自動化にも使えるんだ！って気付きをもっていただくきっかけになればと思っています。ご関心をお持ちくださったらチェンネル登録などお願いできれば幸いです。

WordPress + WooCommerce環境で、注文／発送完了メールに自動的に領収書や納品書PDFを添付する表記プラグインPrint Invoice & Delivery Notes for WooCommerceですが、Edgeでは表示できるものの、AcrobatやiOS/macOSの「プレビュー」では文字化けしてしまいます。

Acrobatではこうしたエラーも。

■Step1. 全化けに対処

どうもフォントの埋込みに失敗しているっぽい。このプラグインには「WooCommerce」→「Print Invoices & Delivery Notes」→「Settings」→「Font Setting」にフォントをアップロードする項目があります。

これをいつどうやって設定したか覚えていませんが、こうなっていました。

NotoSansJP_v5.ttfと同_boldがアップされている状態。これを改めて「Download Noto Sans JP→」リンクからGoogle Fontsにとんでダウンロード。解凍すると以下のファイル群が出てきます。

_v5がついておらず、-Regularがついています。ファイルサイズも1/3くらい。v5をどこから拾ってきたアップしたのか覚えていませんが、とりあえずv5を一度削除（Remove）して、RegularとBoldをアップロード。

これで、大半の文字化けが治りました。

Step2.「領収書」見出しとショップ名の文字化け対策

しかし、まだ完璧とはいかず、先頭部分になにやら「NO GLYPH」のような表示が残ります。

HTMLプレビューでは上が「領収書」、二段目が店名のようです。これがPDF時点ではこうなってしまいます。

生成されたPDFをpdfontsコマンドで覗いてみると、

先程の、2フォントに加え、Interという欧文フォントが内部で使用されていることがわかりました。しかし、プラグインの設定画面にはこの第三のフォントを上書きする欄がありません。

そこでClaudeさんに相談して提案されたのが、HTMLプレビュー時点の「領収書」タイトルと店名のスタイルシートを上書きする方法。開発者モードでそれぞれのクラスを調べると、.wcdn-titleと.wcdn-shop-nameでした。これをちょちょいと上書きしてここのNotoSansJPを使用するように書き換えるPHPコードをfunctions.phpに書いたら、見事最後の文字化けも解消しました。

将来的にはプラグイン自体が修正されて、第三フォントの上書き設定項目が追加されるかも知れませんが、やってることは既存の2フォントへのフォールバックで、きちんと極太ウェイト（600）にもなっているので、フィルターを消し忘れても実害はないかなと思います。

WordPress + WooCommerceプラグインでECショップを構築しました。このブログで紹介したオリジナル3Dプリント品を販売するサイトなので、こちらのブログ記事にもショップの当該アイテムページにリンクを貼りたい、それも画像入りカード形式でカッコ良くしたい、というのがゴール。

通常はWordPress同士ならoEmbedというOGPのようなヘッダー情報があり、WordPressのGutenbergエディタにURLをペーストするだけでカード形式になってくれます。しかしなぜか今回の２サイト間では上手くいかない。

こんな感じで「このコンテンツを埋め込めませんでした。」と出てカードに展開されません。

ChatGPTに言われたとおりにApacheの設定かえたり子テーマにPHPコード書いたり二日くらい格闘しましたが解決せず。JSONのエンドポイントをブラウザで開くとレスポンスコードが200できちんと表示されるのに、curlだと401になったり。

あきらめて前から活用しているPZLinkカードというプラグインを使うことも考えたのですが、こちらでも403になって取得できない。

次にEmbedlyというWebサービスベースのプラグインを入れて無事サムネ、タイトル、概要などは出るようになったんですが、iframeで描画されるのでCSSで詳細がカスタムできない。無料プランだとサービスロゴが表示されたりというのもやや気になります。

Geminiにプラグイン書いてもらう

ChatGPTの助言も堂々巡りで疲れ切っていた時、ふと「もう同じサーバー上にあるので、MariaDB（MySQL）のID/PWを使ってPHPで直接データ取得してカードをレンダリングするプラグインを自前で作ったれ、と閃きました。するとChatGPTもセカンドオピニオンとして聞いたGeminiも技術的に可能だと返答。加えてGeminiが「それもいいけど、WordPress（というかWooCommerce）にはREST APIで記事（商品情報）のメタデータを取得する機能がるから、そっち使うのも手だよ」と提案してきました。なるほど、そんないいものが。それなら（まずないけど）将来的にサーバーを分離しても取得できます。やりたいことを読み取って最適な別解も提示してくれるGeminiさん強い。

ということで、そこからは主にGeminiを使ってショートコードプラグインを作ってみたので、ざっくり手順を記録しておきます。

利用イメージは、Gutenbergエディターのショートコードブロックに「[shop id="123"]」のように入れることでカード展開されるというスタイルです。「[shop id="123,124"]」と複数のIDを入れるとカードが連続で並ぶところまで改良してもらいました。

APIにアクセスする認証キーを発行する

まずは読み出される側（ソース）のWordPressの管理画面を開き、WooCommerceプラグインの設定画面から「高度な設定」→「REST API」を開いて、「キーを追加」で発行します。今回は商品情報を参照するのみなので、権限を「Read」にしておけば万一キーが漏洩しても情報を書き換えられないのでお勧めです。

最終的に、Consumer KeyとConsumer Secretという２つの文字列が生成されるので、どこかにコピペしてメモっておきます（再表示できません）。

curlコマンドで動作チェック

商品IDを調べる

特定の商品を参照するID番号を調べます。WooCommerceの商品一覧で赤丸の箇所に表示されるのが商品IDです。

WindowsやMacの黒画面から以下を叩きます。

123が商品ID、cunsumer_keyとconsumer_secretはさきほど作成したものに置き換えてください。

StatusCode:200とかJSONデータが返ってくれば成功です。黒画面だと途中までしか見られませんが、ちゃんと価格や在庫情報なども含まれています。これを読み込んでカードHTMLをレンダリングするプラグインを作っていきます。

認証キーを安全な場所（wp-config.php）に記述

プラグインのソースコードにREST API認証キーを直書きするのはセキュリティ的に危険なので、通常Web経由でアクセスできない場所にあるwp-config.php内に定義して、それをプラグインから読み出すようにします。具体的には以下の形式で記述。

wp-config.phpはたぶんWordPress上からは読み書きできないので、シェルでサーバーにログインするか、FTP/SFPTで一旦ダウンロードして編集します。書き込み権限も削ってあると思うので、一時的にchmod +wする必要もあるでしょう。編集が終わったら-wも忘れずに。

WC_EXTERNAL_API_HOSTNAMEは便宜上ホスト名としていますが、もしWordPressがサブディレクトリにインストールされていたら、そのパスも書く必要があると思います。

プラグインのフォルダとファイルを作成

/wp-content/plugin/フォルダ下にshop-item-linkというフォルダを作ります。これがプラグイン名になります。さらに同じ名前でphpファイルshop-item-link.phpという名前で以下のコードをコピペして保存します。

HTMLレンダリングブロックは適宜書き換えてください。

編集ポイント

6行目のAuthorは適当に自分の名前に書き換えます。

17行目の第一引数の「shop」が実際に使用するショートコードになります。

46～48行目がwp-config.phpに定義した認証キーとホストネーム情報を読み込むところです。大文字部分を1字たりとも相違なくあちらと揃える必要があります。

66行目でカードよりも前に1回だけ出力したいHTML（この場合は見出し）を定義しています。

151～170行目あたりがカードのHTMLです。面倒くさいのでスタイルシートも直書きしてますが、カードを繰り返したくさん出力するならきちんとCSSファイルで定義するべきでしょう。

また元々Geminiが生成したコードでは取得内容を1時間キャッシュする仕様だったんですが、ウチの場合は必要ないし、むしろ価格や在庫はリアルタイムに反映してほしいので無効化してあります。ところどころにその残骸があるかも。

ともあれ、これで、[shop id="998,999"]などと書くだけで、

こちらで注文できます

TOYOTA車手動光軸調整ダイヤル用空きスロット→タイプDスイッチアダプター

参考価格: ¥1,800（別途消費税、送料がかかります）

在庫: あり

セキュリティカメラAnker Eufy SoloCam S340/4G LTE Cam S340用雨樋／ポールマウント

参考価格: ¥2,273（別途消費税、送料がかかります）

在庫: なし

が出るようになりました。

WordPress + WooCommerceで自家ECサイトを立ち上げた際、どうしても一部の文言が英語表記のまま日本語化できない問題でハマりました。

WordPressのプラグインは多言語化の仕組みをもっており、多くのプラグインはそれを通して表示する文言を言語ごとに切り替えています。しかしそれがどうも上手く機能しない。WooCommerceの決済や配送設定を日本にあわせてカスタマイズするJapanized for WooCommerceも入れており、どの文言はどちらのリソースで設定されてるかともわからず、ChatGPTにも聞きつつ、色々なところをいじりまくした。

先に結論

うちのWordPressは高速化プラットフォームのKUSANAGI9が導入されています。結論をいうと、その一部である「翻訳アクセラレーター」という機能が原因でした。これをオフにしたら英語だったところがあっさり日本語になりましたとさ。

途中したこと→結果色々カスタマイズできてよかった

以下は結果として原因の根本解決にはなりませんでしたが、結果的に自分で文言を修正したいところがあり（お買い物カゴ→カートなど）、そのための仕組みの理解が深まったので結果オーライかなと思っています。

文言修正方法その１ Loco Translate

まず前述のローカライズファイルで定義されている文言をいじる方法があります。多くのソフトでは.po/.moという拡張子の言語ファイルを使っています。.poファイルに原語（厳密にはどこで使われるか定義するID）と翻訳後のテキストの対応データが入っており、それをコンパイルしたのが.moです。例えばWooCommerceの場合、/wp-content/lanmguage/pluginsにwoocommerce-ja.po/.moがあります。これを直接編集してもいいですが、プラグインの更新などで上書きされてしまうので、Loco Translateというプラグインをインストールして、WordPress上から編集した方がよいです。GUIでプラグインやテーマがもつ言語リソースをリストしてくれて、検索して書き換えることができます。POEditというPC向け編集ツールがありますが、それに近い感覚のUIがWordPress上で使えます。

で、これでみると翻訳率は100%とかになってるのに、公開される画面では日本語にならない。試しに編集してみても反映されない。最新の翻訳定義ファイルを同期すると未翻訳の文言も出てきて、一部はそれで反映もされますが、とにかく英語箇所がめちゃくちゃ残る!

ChatGPTにはKUSANAGIやPHP-fpmのキャッシュの可能性を散々指摘されるのでフラッシュしてみるけどダメ。また最近のWordPressは上記フォルダにある.jsonファイル（たくさんありすぎてどこになにがあるかは追跡不能）を使ってるから.poファイルいじってもダメ、みたいなことも言われたい。

結果として先に書いたKUSANAGIの翻訳アクセラレーターを無効にしたらOKだったわけですが、結果としてこのLOCO Translateはめちゃ重宝してます。翻訳後で気に入らない箇所の修正が手軽に行え、プラグインの更新でリセットされないよう管理もできます。先の「お買い物かご」を「カート」に言い換えたり、文章もなんとなくしっくりこない箇所を直したりといったことに使えます。翻訳のためのプラグインではあるんですが、表記カスタマイズツールとして必須プラグインでしょう。

文言修正方法その１ gettext

それでもそもそも.poファイル（の元の.potファイル）に定義されておらず、PHPコードにハードコーディングされた文字列などがあったりします。そいう時は自分のテーマ（子テーマ）の中のfunctions.phpにgettextというフィルターを使ったコードを書くことで強制的に表示文言を置換することができます。詳しい書き方はこちらなどが参考になると思います。

翻訳アクセラレーターが原因と判明するまで、あらゆるところをせっせとこれで書き換えていましたｗ。でも最終的にはきちんと標準の日本語翻訳が当たって、一部の不満箇所をLoco Translateで修正、で済んだのでgettextを使った置き換えはすべて削除しました。盛大に遠回りしましたが、パフォーマンス的には無駄も多いと思うので排除できて良かったです。まぁ非常手段としてメモしておきます。

まとめ

ということで、もしKUSANAGI環境でWooCommerce（や他のプラグイン）の英語表記が残る問題に直面したら翻訳アクセラレーターを切ってみることをお勧めします。

またLoco Translateは日本語化された箇所のカスタマイズにも超絶便利なので是非活用してみてください。