LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

誰でも使えるAI:Azure PersonalizerをWordPressに導入してみた


■はじめに

WordPressプラグインで、閲覧ユーザにオススメ記事をレコメンドするプラグインは多数存在しますが、Microsoft 提供の Azure Personalizerプラグイン(公式)がリリースされていますので、早速、Azure PersonalizerをWordPressで構築したWebサイトに導入してみました。

注:WordPress環境は、既に構築済みという前提での記事となります。WordPressとは何ぞや?という方は、下記リンクをご参照ください。

 ・Wikipedia:WordPress
 ・WordPress公式サイト

■Azure Personalizer

Azure Personalizerですが、公式サイトの紹介文では、

Azure を通じてのみ利用できる強化学習ベースの機能で、使いやすさとユーザー満足度を向上させます。使いやすい API を通じて、関連するコンテンツ、レイアウト、会話に優先順位を付けます。Personalizer はスタンドアロンのパーソナライゼーション ソリューションとして使用するか、既存のソリューションを補う形で使用します。機械学習の専門知識は必要ありません。

とあります。さらに、 Azure Personalizerのドキュメント を要約すると、

・最適なコンテンツ項目をアプリケーションが選択してユーザに表示できるよう支援
・買い物客に提示すべき製品を判断
・広告の最適な表示位置を見つけ出したりすることが可能
・該当のコンテンツがユーザに表示されると、リアルタイムでユーザの行動を監視
・Personalizerに報酬スコアをレポートバックして機械学習モデルは継続的に改善
・受け取ったコンテキスト情報に基づいて最適なコンテンツ項目を選択するPersonalizerも継続的に改善

とあります。結構、Azure Personalizer、面白そうな感じですね。

*引用元:
https://azure.microsoft.com/ja-jp/services/cognitive-services/personalizer/
https://docs.microsoft.com/ja-jp/azure/cognitive-services/personalizer/what-is-personalizer


■WordPressプラグイン

Azure Personalizerですが、どういった場面で利用できるかなあ・・・と色々考えていたところ、あるんですねぇ・・・WordPressプラグイン。

Azure Cognitive Service Personalizer

1.Plugin-URL-Screenshot at 2020-11-20 09-56-19.png

WordPressプラグインディレクトリ での紹介文は、

このプラグインは、このWordPressインストールで観察された動作に基づいて単一の投稿を推奨するウィジェットを提供します。Microsoft Azure Cognitive Service Personalizerが提供する強化学習を使用して、機械学習モデルがトレーニングされます。 推奨事項は、投稿と一緒に提供されるデバイスタイプ、地理的位置、およびメタ情報に基づいています。

*引用元(Google翻訳してます):https://ja.wordpress.org/plugins/azure-cognitive-service-personalizer/

気になるのは、

単一の投稿を推奨するウィジェットを提供

ですね(複数が良いなあ)。

Geolocation IP Detection:Personalizerプラグイン稼働時に必須:

WordPressプラグインディレクトリ での紹介文は、

IPアドレスによって検出された地理情報を提供します。これは、テーマや他のプラグインで、ショートコードとして、またはCSSボディクラスを介して使用できます。都市と国の名前は異なる言語(サポートされている言語)に翻訳されています。

です。

*引用元(Google翻訳してます):https://ja.wordpress.org/plugins/geoip-detect/

注:このプラグインをインストールしておかないと、警告が表示されますので、必ずインストールしておきます。


■作業手順

WordPress環境は、既に構築済みという前提の記事なので、環境構築に関しての内容は省略します。

●Cognitive Serviceリソース作成

まずは、Azure Dashboardでリソースを作成します。
2.Azure Dashboard-00.png

リソースが作成されたら[キーとエンドポイント]画面に遷移、キーとエンドポイントをメモしておきます(後ほど使います)。
2.Azure Dashboard-06.png

Personalizerの構成内容について確認をしておきます。

●Personalizerの構成:

・報酬:初期設定のママ
・探索:初期設定のママ
・モデルの更新頻度:初期設定のママ

はデフォルト設定のママとしています。

azure-personalizer-01.png

●Personalizerの動作モード:
<最適なアクションを返してオンライン学習>を選択しています。
azure-personalizer-02.png

●プラグインのインストール01:Azure Cognitive Service Personalizer

WordPressプラグインディレクトリからPersonalizerプラグインをダウンロードして、WordPress管理画面にアップロードしてインストールするか、WordPress管理画面から直接インストールした後、プラグインを[有効化]します。
3.Wordpress-Dashboard-01.png
#赤枠の箇所がインストール=>有効化した箇所です。

●プラグインのインストール02:Geolocation IP Detection

3.Wordpress-Dashboard-02.png
#赤枠の箇所がインストール=>有効化した箇所です。

●プラグインの設定01:Azure Cognitive Service Personalizer

PersonalizerをWordPressに実装する設定です。このプラグインは、WordPressで構築したWebサイトのウィジェットとしてPersonalizerを埋め込むことが可能ですが、今回はWebサイトのウィジェットの右側サイドバーのウィジェットにPersonalizerを埋め込んでみます。

1.画面中央の赤枠の[Personalized Post]ウィジェットを[Right Sidebar]のエリアにドラッグします。
2.赤枠の箇所に、Azure リソース作成時にメモしておいたPersonalizerのエンドポイントとキーを入力して保存します。
3.タイトルは「オススメ記事」と入力します。

3.Wordpress-Widget-01.png

これで設定はOKです。

注:geoip-detectはインストール済みなのですが、ウィジェット設定の下の方に赤文字でメッセージが出力されてしまっています(仕様かも・・・・・)。

To improve personalization results please install geoip-detect. For best latency switch to a local file and not use the default HostIP.info Web-API.

●プラグインの設定02:Geolocation IP Detection

設定箇所は2箇所です(赤枠の箇所)。色々選択肢があるのですが、HostIP.info APIを選択しました。

3.Wordpress-plugin-conf-02.png

■動作確認01:Webサイト側

●Webサイトでの動作確認(記事一覧ページ)

Webサイトにアクセスして、ページのウィジェットにPersonalizerのレコメンドが表示されていることを確認します。赤枠の箇所に、Webサイト内の記事がオススメとして表示されています。

(記事一覧ページのスクショです)
4.Wordpress-post-page-01.png

●Webサイトでの動作確認(個別記事ページ)

個別記事画面でのウィジェットもPersonalizerのレコメンドが表示されていることを確認します。

(個別記事ページのスクショです)
4.Wordpress-post-page-02.png

■動作確認02:Azure Personalizer管理画面

Azure DashboardでPersonalizerの動作を確認します。ここでは、学習のパフォーマンスがどうなっているかを見てみます。

なお、今回、Personalizerを実装したWebサイトはデモ環境なので、不特定多数のユーザがアクセスする一般公開されたWebサイトでの長期運用を行った場合に、どういったパフォーマンス評価が出るのかは不明です。

●学習のパフォーマンス:
azure-personalizer-04.png

●平均報酬:
azure-personalizer-05.png

■動作確認03:エラー確認

●エラー修正:Azure Cognitive Service Personalizerプラグイン:

Google Chrome DevToolsを使って、エラーが出ていないかを確認していたところ、下記の404エラーが発生していることを確認しました。

error message:
GET https://xxxxx.xxxxx/wp-content/plugins/personalizer-cms/js/frontend.js net::ERR_ABORTED 404 (Not Found)

プラグインのPHPソースファイルをgrepして確認したところ、プラグイン構成ファイルの1つである widget_rank.php の296行目のパス指定の記述が間違っており、それが原因で404エラーが発生していました。

widget_rank.php:296行目:修正前:

wp_enqueue_script( 'microsoft-personalizer-frontend', plugins_url( 'personalizer-cms/js/frontend.js' ),  array( 'jquery' ), null, false );

widget_rank.php:296行目:修正後:

wp_enqueue_script( 'microsoft-personalizer-frontend', plugins_url( 'azure-cognitive-service-personalizer/js/frontend.js' ),  array( 'jquery' ), null, false );

正しいパスに修正したところ、404エラーは解消されました。

■まとめ

今回は、WordPress環境のWebサイトに公式プラグインを使用して、Azure Cognitive Service Personalizeを実装しましたが、ノーコードで、小一時間もかからずにお手軽にレコメンド機能を実装できましたが、本当に[誰でも使えるAI]でした。

ただし、デモ用のWebサイトでの実装なので、本番Webサイトに実装した際に、Personalizerの学習のパフォーマンスの一致率や平均報酬の評価スコアが異なってくると思いますので、チャンスがあれば実装してみたいですね。

■謝辞

プラグイン開発者の方へ:素敵なプラグイン、ありがとうございます。

●プラグイン作者の方へのリクエスト:
レコメンドで表示されるオススメ記事が、1つしか表示されないので、複数のオススメ記事が表示されると良いかもしれません(表示件数も設定で選べると嬉しいですね)。

■リソース

Github:/microsoft/Personalizer-WordPress
WordPressプラグインディレクトリ:Azure Cognitive Service Personalizer
WordPressプラグインディレクトリ:Geolocation IP Detection
Cognitive Service:API Reference:Personalizer API


Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0