ラバーダッキング

ラバーダッキング という言葉を知っていますか？

ゴム製のアヒルとひたすら会話をすることで、アイデアを整理したりできるテクニックです。

でも会社でラバーダッキングするのは ハードルが高い ので、Web上でやってみるアプリを作ってみました。

できたもの

↑誤字発見

LovelyRubber

Github

画面上部のテキストエリアに文章を入れてSubmitをクリックすると、

COTOHA APIのキーワード抽出を利用した返答が返ってきます。

内容は、送信された文章に含まれているキーワードをランダムに選んだものに、

語尾と相槌が追加されたものです。

開発

使い慣れているのでNuxt.jsを採用しました。

$ npx create-nuxt-app rubber-app

こんな感じで手軽にプロジェクトを作ることができます。

（この時点ではrubber-appという名前でした）

COTOHA API

https://api.ce-cotoha.com/

NTTコミュニケーションズが開発した自然言語処理APIです。

最近プレゼント企画をやっているのでよく見かけます（この記事も企画に参加する予定）。

いろんな種類があるのですが、今回はキーワード抽出を利用します。

Developer登録をするとクライアントID、クライアントSecret、トークンのURLが生成されるので、

.env ファイルに控えました。

envファイルの内容を読み取るのにDotenvのパッケージを使用しました。

export default {
  ...
  env: {
    clientId: process.env.CLIENT_ID  ,
    clientSecret: process.env.CLIENT_SECRET
   },
}

nuxt.config.jsにこんな感じで記載することで環境変数を使用することができます。

原理はわかりませんが（すみません）、Github Pagesでも利用できるようです。

Nuxtに戻る

あとはVueコンポーネントのmethodsの部分に、トークン生成の処理と返ってきたトークンを使ってAPIを利用する処理を書くだけです。

ajaxのためにaxiosを使いました。

APIから返ってきたキーワードの配列をもとに、Vueコンポーネントのdataの中に作った responses 変数を書き換え、

template中でv-forを用いてレスポンスをレンダリングしました。

Github Pagesにデプロイしたかったので、nuxt.config.jsに以下を追記しました。

export default {
  ...
  generate: {dir:"docs"},
  router: {
    base: '/lovely-rubber/'
  },
}

この時点で名前が Lovely Rubber に変わっています。

できたけど倦怠期

Lovely Rubberのレスポンスは以下のような構成になっています。

相槌 + キーワード + 語尾

ただし空白のときは固定メッセージが出ます。

例：

結果としてかなりぶっきらぼうなキャラになってしまいました。

倦怠期の夫婦的な…

キーワード抽出ではなく文章要約を利用してみることも考えたのですが、

長文を要約することが目的のAPIのようで、短文だとほとんどオウム返しになってしまいます。

キーワード抽出でもオウム返しはオウム返しなのですが、

まあラバーダッキングの相手としてはいいかなと思います。

会話例

コツとしては、自分の持っていきたい話題に強引にハンドルを切ることです。

キーワードをランダムに選択しているので、どうでもいい部分に着目されたりします。

そこで、

しょうがない。他にネタもないしね。タイトルだけど

のように話題を転換して、話を前に進めます。

Let’ｓ　倦怠期！