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


---
#■はじめに
WordPressプラグインで、**閲覧ユーザにオススメ記事をレコメンドするプラグイン**は多数存在しますが、**[Microsoft 提供の Azure Personalizerプラグイン（公式）](https://github.com/microsoft/Personalizer-WordPress)**がリリースされていますので、早速、Azure PersonalizerをWordPressで構築したWebサイトに導入してみました。

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

　・[Wikipedia：WordPress](https://ja.wikipedia.org/wiki/WordPress)
　・[<strong>WordPress公式サイト</strong>](https://ja.wordpress.org/)


#■Azure Personalizer

Azure Personalizerですが、[公式サイト](https://azure.microsoft.com/ja-jp/services/cognitive-services/personalizer)の紹介文では、

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

とあります。さらに、[ Azure Personalizerのドキュメント ](https://docs.microsoft.com/ja-jp/azure/cognitive-services/personalizer/what-is-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](https://ja.wordpress.org/plugins/azure-cognitive-service-personalizer/)

![1.Plugin-URL-Screenshot at 2020-11-20 09-56-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/37137d99-df8d-9c7e-40dd-823c197b892d.png)

[**WordPressプラグインディレクトリ**](https://ja.wordpress.org/plugins/azure-cognitive-service-personalizer/) での紹介文は、
>このプラグインは、このWordPressインストールで観察された動作に基づいて単一の投稿を推奨するウィジェットを提供します。Microsoft Azure Cognitive Service Personalizerが提供する強化学習を使用して、機械学習モデルがトレーニングされます。 推奨事項は、投稿と一緒に提供されるデバイスタイプ、地理的位置、およびメタ情報に基づいています。

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

気になるのは、

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

ですね（複数が良いなあ）。


####●[Geolocation IP Detection](https://ja.wordpress.org/plugins/geoip-detect/)：Personalizerプラグイン稼働時に必須：
[**WordPressプラグインディレクトリ**](https://ja.wordpress.org/plugins/geoip-detect/) での紹介文は、
>IPアドレスによって検出された地理情報を提供します。これは、テーマや他のプラグインで、ショートコードとして、またはCSSボディクラスを介して使用できます。都市と国の名前は異なる言語（サポートされている言語）に翻訳されています。

です。

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


<strong><font color=red>注：このプラグインをインストールしておかないと、警告が表示されますので、必ずインストールしておきます。</font></strong>

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

#####●Cognitive Serviceリソース作成
まずは、Azure Dashboardでリソースを作成します。
![2.Azure Dashboard-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/dc4cfbec-8e05-cc6f-d84d-3eb3b99c19f0.png)


リソースが作成されたら[キーとエンドポイント]画面に遷移、キーとエンドポイントをメモしておきます（後ほど使います）。
![2.Azure Dashboard-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/c3d49395-d24e-aa11-ce75-28198ce785e1.png)

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

<strong>●Personalizerの構成：</strong>

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

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

![azure-personalizer-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/18ac101f-7194-cb57-c42c-1bf415e0d260.png)


<strong>●Personalizerの動作モード：</strong>
＜最適なアクションを返してオンライン学習＞を選択しています。
![azure-personalizer-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/55f4b44f-9966-8693-8f89-252c1ea1d56d.png)




#####●プラグインのインストール01：Azure Cognitive Service Personalizer
WordPressプラグインディレクトリからPersonalizerプラグインをダウンロードして、WordPress管理画面にアップロードしてインストールするか、WordPress管理画面から直接インストールした後、プラグインを[有効化]します。
![3.Wordpress-Dashboard-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/4d41c797-3caa-c954-39c3-c11a6b90e505.png)
＃赤枠の箇所がインストール＝＞有効化した箇所です。



#####●プラグインのインストール02：Geolocation IP Detection
![3.Wordpress-Dashboard-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/e2df4343-664b-27d6-4f55-e044015f6071.png)
＃赤枠の箇所がインストール＝＞有効化した箇所です。


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

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

![3.Wordpress-Widget-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/bd788a70-7112-01be-010b-42e09f564a2a.png)

これで設定はOKです。

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


><font color="Red">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.</font>


#####●プラグインの設定02：Geolocation IP Detection
設定箇所は２箇所です（赤枠の箇所）。色々選択肢があるのですが、HostIP.info APIを選択しました。

![3.Wordpress-plugin-conf-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/7e5efc23-2be6-c24e-852d-80eff1a19cbe.png)


#■動作確認01:Webサイト側
####●Webサイトでの動作確認（記事一覧ページ）
Webサイトにアクセスして、ページのウィジェットにPersonalizerのレコメンドが表示されていることを確認します。赤枠の箇所に、Webサイト内の記事がオススメとして表示されています。

（記事一覧ページのスクショです）
![4.Wordpress-post-page-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/0e9306fc-58c5-b5bb-8183-d2546bd5778d.png)


####●Webサイトでの動作確認（個別記事ページ）
個別記事画面でのウィジェットもPersonalizerのレコメンドが表示されていることを確認します。

（個別記事ページのスクショです）
![4.Wordpress-post-page-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/c90dda00-aebc-016b-6197-49ddb80ac072.png)


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

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

<strong>●学習のパフォーマンス：</strong>
![azure-personalizer-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/da35587d-c05e-e9da-4557-a8e22db2391c.png)


<strong>●平均報酬：</strong>
![azure-personalizer-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706770/d06efab9-bead-0710-f103-9f97dc98b149.png)



#■動作確認03：エラー確認
####<font color=red>●エラー修正：Azure Cognitive Service Personalizerプラグイン：</font>

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して確認したところ、プラグイン構成ファイルの１つである 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を実装しましたが、ノーコードで、小一時間もかからずにお手軽にレコメンド機能を実装できましたが、本当に<strong><font color=red>[誰でも使えるAI]</font></strong>でした。

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


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

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

#■リソース
・[Github:/microsoft/Personalizer-WordPress](https://github.com/microsoft/Personalizer-WordPress)
・[WordPressプラグインディレクトリ:Azure Cognitive Service Personalizer](https://ja.wordpress.org/plugins/azure-cognitive-service-personalizer/)
・[WordPressプラグインディレクトリ:Geolocation IP Detection](https://ja.wordpress.org/plugins/geoip-detect/)
・[Cognitive Service:API Reference:Personalizer API](https://westus2.dev.cognitive.microsoft.com/docs/services/personalizer-api/operations/Rank)
<hr>