このページの本文へ

ブラウザーだけでWatsonが使える!人工知能アプリの作り方

2016年04月14日 11時00分更新

油谷実紀/TIS

  • この記事をはてなブックマークに追加
本文印刷

性格分析アプリのしくみ

アプリがどのようなしくみで動作しているか、説明します。

各ノードの説明

文章から筆者の性格を分析するアプリは、11個のノードを使っています。

それぞれのノードで何をしているのかを表にしました。

#表示名ノードの種類説明主な設定内容
1[get] /http inHttpリクエストを受信(GET /)メソッド: GET、URL: /
2入力フォームの作成template入力フォームのためのHTMLを生成HTMLテンプレート
3httphttp responseHttpレスポンスを送信なし
4[post] /qhttp inHttpリクエストを受信(POST /q)メソッド: POST、URL: /q
5入力内容をpayloadへfunctionフォーム全体の中から対象文(textarea)のみを取得し、その長さを新しいプロパティpayload_lengthに格納プログラム(JavaScript)
6100語以上?Switchプロパティpayload_lengthが100以上か否かにより分岐<※Personality Insightsノードが100語以上の文章でなければ受け付けないため、事前にチェックをしている>対象: payload_length、比較演算子: >=、比較値: 100
7Personality Insights呼び出しPersonality InsightsWatsonのPersonality Insights APIを呼び出し、結果をプロパティinsightsに格納なし
8回答の整形fuctionプロパティinsightsを解析し、HTML断片の形式でpersonality、needs、valuesに格納プログラム(JavaScript)
9回答HTML生成templateプロパティpseronality、needs、valuesを利用してHTMLを生成HTMLテンプレート
10100文字未満エラーtemplateエラーHTMLを生成HTMLテンプレート
11httphttp responseHttpレスポンスを送信なし

プログラムを格納している部分についていくつか説明をしましょう。

#5[入力内容をpayloadへ]

#5の[入力内容をpayloadへ]では、入力フォームのsubmitによって送られてくるhttpリクエストの中から、textarea(nameプロパティが“f”)の内容のみを切り出してpayloadに、またその長さをpayload_lengthに格納しています。


msg.payload = msg.payload.f;
msg.payload_length = msg.payload.split(' ').length;
return msg;

msgオブジェクトのプロパティでノード間のやりとりをします。Node.jsですので、それぞれのノードで任意のプロパティを追加できます。ここでは、payloadは既存のプロパティですが、payload_lengthは新しく追加したプロパティです。

なお、Payload_lengthを生成している理由は、後続のswitchノードの比較対象がプロパティに限定されており、式を対象とできないためです。

#8[回答の整形]

#8の[回答の整形]では、Personality Insightsが返してきたデータを解析しています。Personality Insightsノードは、その結果をinsightsプロパティに格納しますので、その中からそれぞれの値を取り出します。InsightsプロパティはJSON形式になっており、その先頭部分は以下のようになっています。


{ 
"id": "r", 
"name": "root", 
"children": [ 
{ 
"id": "personality", 
"name": "Big 5", 
"children": [ 
{ 
"id": "Openness_parent", 
"name": "Openness", 
"category": "personality", 
"percentage": 0.9572922288140139, 
"children": [ 
{ 
"id": "Openness", 
"name": "Openness", 
"category": "personality", 
"percentage": 0.9572922288140139, 
"sampling_error": 0.0571373652, 
"children": [
 { 

"id": "Adventurousness", 
"name": "Adventurousness", 
"category": "personality", 
"percentage": 0.9115427516447026, 
"sampling_error": 0.0487956648 
}, 
{ 
"id": "Artistic interests", 
"name": "Artistic interests", 
"category": "personality", 
"percentage": 0.7574436082449065, 
"sampling_error": 0.0996349356 
}
... (以下、続く)

したがって、たとえば、上のJSONで、パーソナリティ(Big5)の中の開放性(openness)の中の狭義の開放性(openness)の値(percentage)は、以下の式になります。


msg.insights.children[0].children[0].children[0].percentage

[回答の整形]では、このようにinsightsプロパティから取り出したデータを、新しいプロパティpersonality、needs、valuesにそれぞれ格納しています。今回は、最終的に画面に出力するHTMLテンプレートでの処理を簡素化するため、JSONではなくHTMLの断片(“<ul><li>…</li><…></ul>”)にしています。

#9[回答HTML生成]

Templateノードは、いわゆるテンプレートエンジンです。いくつかの選択肢がありますが、HTMLに値を埋め込むには通常「Mustache」というエンジンを使用します。[回答HTML生成]のテンプレートは以下のとおりです。


<html>
<head>
    <title>Personality Insights</title>
    <style>
        li.high { color: magenta; }
        li.mid { color: black; }
        li.low { color: darkgreen; }
    </style>
</head>
<body>
    <h1>Personality Insights</h1>
    <h2>ビッグファイブ(Personality)</h2>
    {{{personality}}}
    <hr>
    <h2>欲求(needs)</h2>
    {{{needs}}}
    <hr>
    <h2>価値(values)</h2>
    {{{values}}}
</body>
</html>

Mustacheでは、通常プロパティ値を、


{{some_property}}

のように、中括弧2つで指定します。今回は入力テキスト中にHTMLタグがあるので、このタグをそのまま出力するため、


{{{some_property}}}

と、中括弧3つで記述する必要があります。Mustacheについての詳しい説明は、Mustache Manualなどをご覧ください。

※ ※ ※

以上のようにフローを指定し、画面を用意することで簡単にアプリを作成できました。次回は、いよいよIoTアプリの実践です。テーマは『ラズベリーパイとBluemix Node-REDを連携した「声で家電機器を制御システム」』の予定です。

著者:油谷実紀(ゆたに・みき)

著者写真

TIS株式会社戦略技術センター長兼AI技術推進室長。株式会社エルブズ取締役副社長。Bluemixユーザグループ(BMXUG)コアメンバー。大手システムインテグレータにて技術オリエンテッドなサービスビジネスを立ち上げるべく日々活動していたが、30年来の関心領域であった AIの時代を迎えて、社会性を持ったエージェントを実現するための会社(エルブズ)を設立し、日々奮闘中。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く