からじめよう、さるでき生活

はい、そういうわけでございまして。
みなさま新年度はいかがお過ごしですか?
ワタシはもう全然まったくサッパリ変わらない日々を過ごしております。

新卒の若者が会社に入ってきて、その初々しさに思わず目を細めるー

そんなこと、この10年経験したことがねえッス。
※ワタシは個人事業にチョロ毛が生えたくらいの極小会社を営んでおります。
※いいなー、そういうの。なんだかドキドキするよねー。うふふーあははー(妄想中)

コホン。

さて、そんなこんなで年度が変わっても内容は据え置き、
今回もWatsonの『Personality Insights』を使って、性格分析を行っていきますよ。

新入社員のみんなも〜、レッツAIっ!

WordPressからワトソン君を呼び出したい

前回までは何をやっていたかと言うと、
ワタシのパソコン(Mac)から、WatsonのあるIBMのサーバーにアクセスして、性格分析を行っていましたね。
本計画の足がかりとして、まずはパソコンからのアクセスを試みていたのでした。

【ワトソン君による性格分析システム開発計画】
STEP1 さるでき.comで記事を公開する
STEP2 その記事を、IBM Cloud内のPersonality Insightsに投げる
STEP3 Personality Insightsで分析、その結果をさるでき.comで受け取る
STEP3.5 受け取った数値データを、アレコレ加工する
STEP4 さるでき.comで結果を表示

でもね、CSVファイルがダウンロードできたときの嬉しさって言ったら……
つーか、コレでこのトピック終わりでいいじゃない……

と、思ったとか思ってないとか。
まあそれはさておき。

最終的には『さるでき.com(WordPress)』からのアクセスをしたいわけですので、
次はそのルートを作っていかないといけません。

では、今回は特別に少し先の姿をご覧いただきましょう、現在舞台裏ではここまで進行しております。
はい、ドン!

おおー!グラフになってるー!

アレコレ壁にぶつかって、寝て起きてメシ食ってまた壁にぶつかって、
どうにかこうにか元々の計画の80%くらいを実現することができました。

人生八割気合DEATH。
(新入社員のみなさま、この言葉は覚えなくて大丈夫DEATH。…あれ?デス。…おや?です!)

ただ、そのためには色々準備が必要なことが判明しまして。
今回はコードを書き始める前にやっておく「WordPressの準備」についてお話しします。

事前準備①:WordPressプラグイン『Code Snippets』

まずは、プラグインを2つほど導入します。

1つ目は『Code Snippets』と言って、
WordPressの構成ファイルである「functions.php」というファイルをカスタマイズするためのプラグインです。

……ほほう、初見の言葉がワラワラと。

前回までのアクセス方法を思い出してください。
「パソコン(Mac)→カールおじさん(cURL)→ワトソン君(Watson)」という流れでしたね。

WordPressからWatsonにアクセスするためにも、基本的にはこのcURLを使います。
……というか、使いたい。他のことはよくわからないし。

で、このcURLのコマンド集は、「PHP」という言語で使うことができるんですね。
そして都合が良いことに、WordPressを構成する言語も「PHP」

つまり、ごく自然にWordPressからcURLを使うことができるのです。
「Webサイト(WordPress)→カールおじさん(PHPのcURL関数)→ワトソン君(Watson)」という流れ。

ただ、WordPressでは、
「PHPのコードをイジる場合は『functions.php』というファイルの上でやってね」
というお作法がありまして。

その「functions.php」をイジった結果、大事な部分を壊してしまってWordPressが動かなくなる……
ということが起こらないよう「functions.php」を安全にカスタマイズできるプラグインがあるのです。

……ぜえぜえ(説明疲れ)。

それがこちらの『Code Snippets』というプラグインです。
プラグインページで検索すれば見つかりますので、インストール&有効化をポチッとしておいてくださいませ。

事前準備②:WordPressプラグイン『Simple Custom CSS and JS』

2つ目は『Simple Custom CSS and JS』と言って、
「CSS」「JavaScript」のファイルを自由に追加し、カスタマイズするためのプラグインです。

……こちらも、聞いたことがあるような無いような言葉が並びますねえ。

こちらはワトソン君から返ってきたデータを、グラフにするためのプログラム(JavaScriptコード)を追加するためのプラグインです。
「ワトソン君(Watson)→データ編集&グラフ作成プログラム(JavaScript)→Webサイト(WordPress)」という流れですね。

上の「functions.php」でもお話ししましたが、
WordPressは結構カッチリとお作法に則って作られていますので、
我々が勝手にコードを追加・編集すると、ガラガラと整合性が崩れてしまうことがあります。

そこで、本体にはなるべく手を入れずに、
安全に(脇でコッソリと)コードを追加、カスタマイズするためのプラグインが作られているわけです。

もちろん、これらのプラグインを入れずに、
直接対象のファイルに必要なコードを書き込んでも動くことは動くのですが、
せっかくこんな便利なプラグインがありますので、こちらの2本はありがたく使わせてもらいましょう。

事前準備③:JavaScriptライブラリ『Chart.js』

最後はこちら。
『Chart.js』と言う、グラフ作成用のオープンソースJavaScriptライブラリです。

Chart.js(日本語)
https://misc.0o0o.org/chartjs-doc-ja/

今回はじめて使わせていただきましたが、超便利。
タイトルと値を入れて、見栄えのプロパティをちょちょいとイジるだけで、素敵なグラフができあがります。

サーバーにインストールして使うことともできるようですが、
CDN(Contents Delivery Network)という共有サービスで利用可能ですので、次回以降こちらでお話をしますね。

今回はここまで!

今回はWordPress準備編をお届けしました。

いやー、それにしてもワトソン君をカジュアルにイジってみるために必要なハードルって、高いですねえー……。
(iPhoneアプリからのルートの方が、ワトソン君にアクセスするまではシンプルそうなのですが。あっちは事前のハードルが高いので……)

もう少しカンタンに触ることができて、気持ち楽に組み込みむことができれば、
iPhoneアプリ作りのように、日曜大工AI工作も楽しいものになる気がするのですが……。

おっと!事前準備で心が折れるところでした。

いえいえ、大丈夫です。何と言っても、もうゴールは見えていますのでね。
ではでは、次回からモリモリコーディングをしていきましょう!おつかれさまでした〜!