うやくひとつできました!

はい、そういうわけでございまして。
性格分析AIワトソン君、快調に動き出しました。

雨にも負け、風にも負け、こんなモンできるかぁ!と思いながらの幾年月、なんとかなるものですねー。
システム開発なんて最後はやっぱり気合と根性ですわ。はっはっは。(←末期症状)

ではでは、今回はお楽しみの「サンプルコード」をご紹介しようと思います。

キャッシュシステムやらなんやらが加わると、基本部分がガクッと読みにくくなりますので、
「Personality Insightsへの接続」と、「Chart.jsを利用したグラフ化」の部分のみを抜粋しています。

コレさえあれば、アナタのサイトでも今日から性格分析ができちゃう!
『さるでき式性格分析AIサンプルコード』ではでは、行ってみましょう!

【いつものご注意】
こちらのコード何らかの不具合が生じたとしても、私は一切の責任を負いかねます。
ご利用はくれぐれも自己判断でお願いいたします。

まずは、PHPのコード(Watsonへの接続)

こちらは、『WordPressからWatsonに接続するためのコード』です。

事前準備のときにお話した「Code Snippets」というWordPressのプラグインに対して記述します。
(つまり、function.phpファイルをカスタマイズする形で記述するわけですね)

色々な要素が入っていますので、だーいぶ難解です。
大きな流れはコメントに書いている通りなのですが、特に複雑な部分を少しだけ解説しますね。

STEP2の中に出てくる「get_the_content関数」
こちらは、「記事の本文を持ってくる」というWordPressの特別な関数です。

「$text変数」に対してそのまま文字列を渡せば、記事本文と関係なく分析してもらうことができますよ。

STEP3の中に出てくる「各種cURL関数」
今度はcURLを使うための特別な関数が出てきました。

よーく見ると、ターミナルからcURLを使って接続したときに出てきたコードがチラホラ。
(「header」の指定で「Content-Type: text/plain」を設定していたり)

ターミナルで動くのであれば、きっとこの部分にねじ込めば同じように動くハズ、
ということを信じてグリグリやるのがさるでき流です。動いて良かった……ホントに。

ちなみに、「IAM方式でのアクセス」については、
ユーザー名を「apikey」、パスワードを「APIキーの中身」にしてみたら、つながりました。

絶対正しいやり方じゃない気がします。
まあ……つながったから良いけど。(←良いの!?)

STEP4では、「showGraphSample」という関数で「Chart.js」を呼び出しています。

Chart.jsは、あらかじめ設置しておいたキャンバスタグに対してグラフを出力するのですが、
それが、1行前に書いてある「myChart」というIDを付けたキャンバスです。

では、showGraphSampleの中身を見ていきましょう。

次に、JavaScriptのコード(グラフの出力)

こちらは、『Chart.jsを使ってグラフを描くためのコード』です。

「Simple Custom CSS and JS」というWordPressのプラグインに対して記述します。
先程の「Code Snippets」と同じで、事前準備のときに出てきましたね。

Watsonからの結果は、「JSON型(連想配列型)」で受け取っていますので、
配列の中から必要な項目の中身を抜き出して、グラフのタイトルや値として使っています。

STEP3の後半は、「グラフの見た目」の設定ですね。
カラーコードを設定したり、枠線の太さを設定したり、項目の最小値と最大値を設定したり。
Excelでグラフを作るときのプロパティの設定に似ています。

ここで作られたグラフが、先程のキャンバスの場所に表示される、という流れです。

さらに、WordPressのウィジェット設定

今回は、グラフをWordPressの「サイドバー」に書きたかったので、
「ウィジェット」にキャンバスのコードを記述しました。

ここで「watson_personality_insights_sample」のコードの「最後の行」がポイントになってきます。

add_shortcode(‘wpi-sample’,’watson_personality_insights_sample’);

コレは一体何かと言うと「ショートコードの設定」というもので。

WordPressの中で、[ショートコード(→wpi-sample)]と書くと、
それに対応した「watson_personality_insights_sample」が呼び出される、という便利機能なのです。

ショートコードがあることで、実際のウィジェットの中身は、こんな感じになります。

超スッキリ!

最後に、Chart.jsを読み込む

事前準備のときに、Chart.jsは、サーバーにインストールしてもいいけど、
CDN(Contents Delivery Network)という共有サービスが利用可能ですよ、というお話をしましたね。

そのための設定は、こんな感じに行います。

専用のスクリプトタグで、共有サービス上の「Chart.jsファイル」を読み込むだけ。

スクリプトタグを書く場所は、WordPressのテーマごとに異なるのですが、
「Insert Headers and Footers」なんてプラグインもありますので、探してみてくださいね。

今回はここまで!

さてさてみなさま。
性格分析AIワトソン君、いかがでしたか!?

……って、おや?

「説明が不親切すぎる」
「さるできの風上にも置けない」

ぐはっ。

連載を想定して、ある程度サクサクとコードの説明をしてみようかしらと、トライしてみたのですが。
コレじゃ「最初からわかっている人/コードが読める人」じゃないとキツイですねえ……。
でも1行ずつバラすととんでもなく説明が長くなってしまうのです。……うーむ。ちょっと考えます。

それはともかく!

環境をお持ちの方は、ぜひ試してみてくださいね!
ワタシが何かを忘れていなければ、きっと動いてくれると思いますので。

ではではワトソン君、みなさまのところへ行ってらっしゃ〜い!