WooCommerceストア用に高度なレポートアプリケーションを構築する方法

WordPressサイトでWooCommerceプラグインを使用すると、ECプラットフォームを簡単に作成・管理することができます。またWooCommerceには、新規または既存の注文、在庫の低下、支払い完了などを知らせる通知機能も組み込まれています。この機能は非常に便利ですが、WooCommerceで収集可能なデータの分析しかできません。

これはWordPress環境で動作するプラグインならではの性質。外部でホストされているアプリケーションの方が、はるかに拡張性に優れています。

WooCommerce APIと統合し外部リソースを使用すれば、外部アプリケーションで、より高度なレポートを取得したり、通知機能をカスタマイズしたり、トランザクションに関する詳細な洞察を手に入れたりすることができます。

そこで今回は、従来のWordPressプラグインの機能に制限されない、包括的なトランザクションデータを含むメール通知を生成するアプリケーションの構築方法をご紹介していきます。

既存のレポートと通知機能

WooCommerce組み込みのレポートおよび通知機能は、基本的なストア管理に有用ですが、すべてのビジネスの要件を満たすほど高度なものではありません。このため、サードパーティのプラグインを使用して、通知とレポート機能を強化するのが一般的です。

人気の高いプラグインには、以下のようなものがあります。

• WooCommerce Admin─直感的な管理画面に主要な指標とレポートを表示
• WooCommerce PDF Invoices and Packing Slips─請求書と梱包明細書のテンプレートのカスタマイズが可能
• WooCommerce Google Analytics Integration─Google アナリティクスを使って、顧客属性とトラフィックソースに関する詳細なレポートを生成

上記のようなプラグインを使用し、Google アナリティクスのようなサービスと連動することで、注文サマリー、在庫僅少の通知、在庫管理、高度な分析などのレポートや通知機能を実装することができます。

組み込みレポートシステムの限界

WooCommerce組み込みの機能ももちろん役に立ちますが、例えば以下のような制限があります。

• カスタマイズ性：一般的なレポートツールやプラグインでは、データから取得できる洞察の深さと具体性に限りがあります。特定の測定基準、独自の視覚化、分析ツールとの統合、あるいは汎用的なレポートツールやプラグインでは容易にアクセスできない特定のデータフィルターなどが必要になる場合もあります。
• 拡張性：大規模なデータセットを扱う場合、スケーラビリティの問題に直面する恐れがあります。パフォーマンスの低下やデータ処理のボトルネックは、効率的なデータ分析の妨げとなり、意思決定や応答時間の遅れにつながることも。
• WordPressへの依存：WordPressとの統合により、独立性、カスタマイズ性、拡張性に限界があるため、サーバーリソース、プラグインの互換性、セキュリティの脆弱性に関する制約が課題となる場合があります。これにより、高度なテクノロジーやソリューションの導入が妨げられる可能性もあります。

対照的に、独自に構築したレポートアプリケーションなら、詳細なトランザクションデータと注文者情報を取得可能です。また、このデータを元に市場動向を予測し、それに応じてサービスを最適化することができます。

さらに、データ量の増加に応じて迅速に拡張できるため、ビジネスの成長に合わせてシームレスにオンラインストアを運営できます。

高度なレポートアプリケーションとは

「高度なレポートアプリケーション」には、以下のようなことを行うことができます。

• ユーザーが新規注文を行うと、詳細なトランザクションデータをメールで受け取ることができる。また、管理画面にすべての注文一覧とその詳細が表示される。
• 管理画面で在庫状況の詳細を確認でき、そこから各商品の在庫を簡単に追跡できる。
• 総売上レポートで長期的な収益傾向を分析できる。

一般的なプラグインやWooCommerceデフォルトのレポートおよび通知機能とは異なり、独自に構築するレポートアプリケーションでは、在庫や総売上に関する細かな通知（カスタマイズ可能）を受け取ることができます。

またこのアプリケーションをホストすることには、以下のような利点もあります。

• スケーラビリティ：データ処理のボトルネックを最小限に抑え、リソースの制約を受けることなくビジネスを拡張可能。
• カスタマイズ性：サードパーティのサービス（予測分析エンジンなど）を統合したり、独自のデータ可視化技術を実装したり、収集したデータを独自に使用することで、ビジネス要件や目標に柔軟に適合することができる。
• 自律性：WordPress環境からアプリケーションを切り離すことで、サーバーリソースの制限や様々なプラグイン間の競合などを回避できる。

高度なレポートアプリケーションの構築方法

ここからは実践編として、WooCommerce REST APIと店舗データを取得するために、Webhookを用いてNode.jsでレポートアプリケーションを構築する例をご紹介してきます。

必要なもの

• 1点以上の商品が追加されたローカルで動作するWooCommerceストア
• メール送信用の無料Mailgunアカウント
• Node.jsとngrokのインストール
• プロジェクト用スターターテンプレート
• コードエディター

スターターテンプレートの設定

まずは以下の手順に従って、スターターテンプレートを設定します。

1. Mailgun APIキーとサンドボックスドメインをメモして、.envファイルに対応する変数と一緒にそれらの値を貼り付ける。MAILGUN_SENDER_EMAIL変数には、Mailgunアカウントの作成に使用したメールアドレスを値として指定。
2. WordPressの管理画面で、「WooCommerce」＞「設定」＞「高度な設定」＞「REST API」に移動。

3. 「API キーを作成」（または「キーを追加」）をクリックして、アプリからのリクエストを認証するAPIキーを作成。
4. 「キー詳細」セクションが表示されたら、「説明」と「ユーザー」を入力し、「権限」ドロップダウンから「Read/Write」を選択。「API キーを生成」をクリックする。

5. Consumer KeyおよびConsumer Secretは、この画面でしか表示されないため、必ずコピーして保管する。
6. .envファイルを開き、コピーした値をそれぞれの変数に割り当てる。WOOCOMMERCE_STORE_URL変数には、ストアのURLを指定する（http://localhost/mystore/index.phpなど）。
7. ターミナルで次のコマンドを実行し、プロジェクトの依存関係をすべてインストールする。

npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

これらの依存関係には、それぞれ以下のような役割があります。

• express：APIを作成するNode.jsフレームワーク
• @woocommerce/woocommerce-rest-api：WooCommerce REST APIへのネットワーク呼び出しを行う
• dotenv：.envファイルから環境変数を読み込む
• ejs：JavaScriptテンプレートを作成する
• mailgun.js：Mailgunでメールを送信する
• nodemon：ファイルの変更を検出すると自動的にサーバーを再起動する

アプリケーション機能の実装

スターターテンプレートには、viewsフォルダ内のEJS（JavaScriptで使用されるテンプレートエンジン）テンプレートをレンダリングするためのコードが含まれています。そのため、WooCommerce APIから必要なデータを取得し、ユーザーインターフェース（UI）に表示するためにEJSテンプレートに渡すサーバーロジックだけに集中すればOKです。

以下の手順に従って、アプリケーションの機能を実装します。

1. プロジェクトのルートフォルダに「server.js」というファイルを作成する（Expressサーバーへのエントリポイントとして機能）。
2. 以下のコードをserver.jsファイルに貼り付ける。

const express = require('express')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
require('dotenv').config();

const app = express()
const port = 3000

const WooCommerce = new WooCommerceRestApi({
 url: process.env.WOOCOMMERCE_STORE_URL,
 consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY,
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
 version: "wc/v3"
});

app.set('view engine', 'ejs')

// アプリケーションが稼働しているかどうかを確認するエンドポイント
app.get('/', (req, res) => {
   res.send('The application is up and running!')
})

// ストア内の全商品を検索
app.get('/products', (req, res) => {
   WooCommerce.get("products")
       .then((response) => {
           res.render('pages/inventory', {
               products: response.data,
               currentPage: req.originalUrl
           });
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

app.listen(port, () => {
 console.log(`App listening on port ${port}`)
})

上記コードで、Express.jsを使ったウェブサーバーを作成します。まずは必要なパッケージをインポートし、WooCommerce REST APIとやりとりするためにWooCommerceクライアントを設定して、EJSテンプレートを使うようにアプリを設定することから始めます。

はじめに、アプリケーションが稼働しているかどうかを確認する/エンドポイントを定義。次に、WooCommerceストアからすべての商品を取得する/productsルートを定義します。適切に設定できれば、このルートが取得したデータでinventoryテンプレートをレンダリングします。

なお、このコードはすべてのルートに対してcurrentPageもテンプレートに渡すため、管理画面上で稼働中のページが特定されます。

3. npm run devコマンドを実行し、ブラウザでhttp://localhost:3000/productsを開くと、結果が表示される。

商品在庫ページには、オンラインストアで購入可能な全商品とその詳細が表示されます。在庫のある商品を追跡し、管理するのに便利です。

4. server.jsファイルに以下のルートを貼り付け、売上レポートを処理。

// 月次売上レポートを検索
app.get('/sales', (req, res) => {
   WooCommerce.get("reports/sales", {
       		period: "month"
   })
       .then((response) => {
           res.render('pages/sales', {
               sales: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

このコードによって、WooCommerceの販売レポートAPIから毎月の売上レポートを取得する/salesエンドポイントが定義されます。API呼び出しには、当月の売上レポートを指定する値（month）を持つperiodパラメータが含まれます。リクエストが承認されると、取得したデータで売上EJSテンプレートがレンダリングされます。

5. ブラウザでhttp://localhost:3000/salesを開いて結果を表示する。

このページでは総売上レポートが表示され、毎月の売上動向を分析するのに利用できます。

受注管理の導入

1. server.jsファイルに以下のルートを追加する。

// すべての注文を取得
app.get('/orders', (req, res) => {
   WooCommerce.get("orders")
       .then((response) => {
           res.render('pages/orders', {
               orders: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

これによって、WooCommerceストアからすべての注文が取得され、Ordersテンプレートがレンダリングされます。

2. ブラウザでhttp://localhost:3000/ordersにアクセスして、結果を確認する。このページには、以下のように注文管理に必要な情報が表示されます。

総合的なトランザクションの詳細を報告する通知の設定

ユーザーが商品を購入した際にメールで通知を受け取る機能を実装するには、以下の手順に従います。

1. ターミナルウィンドウを開いて、ngrok http 3000を実行し、ウェブサーバーの接続をトンネル化（トンネリング）する。これにより、WooCommerceがWebhookデータの送信に使用するHTTPSリンクを生成。生成された転送リンクをコピーする。
2. 以下のルートをserver.jsファイルに追加する。

app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // WooCommerceウェブフックからの受信データ
   console.log('New order:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
           to: [process.env.MAILGUN_SENDER_EMAIL],
           subject: "New Order Created",
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data.status, data.payment_method_title, data.line_items)
       })
       .then(msg => console.log(msg)) // ログ応答データ
       .catch(err => console.log(err)); // エラーログ
   }

   res.status(200).send('Webhook received successfully'); // WooCommerceにレスポンスを送信
});

このコードは、新規注文が成立するとトリガーされる、WooCommerceのWebhookからの受信データを処理するルートを定義します。受信したデータにidプロパティ（有効な注文であることを示すもの）が含まれていれば、Mailgun APIを使って指定したメールアドレスに通知が送信されます。

このメール通知には、注文者の氏名、メールアドレス、合計金額、ステータス、支払い方法、購入商品などの詳細情報が含まれます。

またこのコードは、utils/new-order-email.jsファイルで定義されたnewOrderEMail()関数を使用してメールを作成し、独自のメールテンプレートを返します。データを処理してメールを送信すると、サーバーがWebhookの受信成功を示すステータスコード200とメッセージ（「Webhook received successfully」）で応答します。

3. 以下を追加して、newOrderEmail()関数をインポートする。

const { newOrderEmail } = require('./utils/new-order-email');

4. npm run startコマンドを実行してサーバーを起動する。

5. WordPressの管理画面で、「WooCommerce」＞「設定」＞「高度な設定」＞「Webhook」に移動する。

6. 「新規 WebHook を作成」（または「Webhook を追加」）をクリックし「Webhook データ」ページで以下の情報を入力する。

• • 名前：新規注文通知
  • ステータス：「有効」を選択
  • トピック：オーダー作成
  • 配信 URL：ステップ1でコピーしたngrok転送URLを貼り付ける（Webhookペイロードを受信するために新たに定義されたエンドポイント、/woocommerce-webhook/new-orderをURLに追加）
  • 秘密鍵：空白のまま（デフォルトは現在のAPIユーザーのConsumer Secret。これは、リクエストヘッダー内の配信されたWebhookのハッシュを生成するもので、受信者はこれを使って受信データの真正性を確認。署名が期待される値と一致する場合、データが WooCommerceによって送信されたことを確認し、信頼とセキュリティが確保されます）
  • API バージョン：「WP REST API Integration v3」を選択

7. 「Webhook を保存」をクリックする。

8. オンラインストアにアクセスし、商品を購入すると、以下のようなメールが送信されます。

Kinstaにデプロイする方法

Kinstaでは、WordPressおよびWooCommerceストアの運営に理想的なWordPress専用マネージドホスティングに加えて、アプリケーションホスティングも提供しており、構築したレポートアプリケーションをデプロイすることができます。

Kinstaのプレミアムホスティングサービスには、以下のような強みがあります。

• 優れたパフォーマンスと圧倒的なスピード：超高速で堅牢なGoogle Cloud PlatformのC2マシン、およびプレミアムティアネットワークでサイトとアプリケーションを稼働。さらに、260+のPoPを誇るCloudflareのCDNを通じてエッジキャッシュを提供しています。
• デプロイは迅速かつ簡単：より良いホスティング体験を実現するため、アプリケーションを自動的に構築し、手動の設定なしでWordPressサイトをデプロイ。さらにDevKinstaで簡単にサイトを取得してローカル環境で開発し、ボタンをクリックするだけで本番サイトに反映可能。サーバーまわりの複雑な設定はKinstaのエンジニアにお任せ。
• 安全性：アプリケーションとサイトをDDoS対策、HTTP/3およびTLS 1.3対応の2つのファイアウォールで保護。隔離されたコンテナにデプロイされるため、他のアプリケーションのトラフィック急増による本番環境への干渉や、他のサイトが受けたサイバー攻撃の被害を回避できます。

まとめ

外部ホスティングの柔軟性を活かし、在庫状況の詳細をメール通知で受け取り、包括的な総売上レポートを取得できる高度なレポートアプリケーションの構築方法をご紹介しました。

詳細なトランザクションデータの通知を設定し、商品情報、数量、注文者情報など、特定の注文に関するリアルタイムの洞察を手にすることで、在庫を効率的に管理し、販売傾向と収益パターンを把握することができます。

高度にカスタマイズしたWooCommerceレポート機能を実装し、WooCommerce体験を改善するなら、Kinstaのホスティングソリューションをお試しください。

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.

• LinkedIn