LINEで乃木坂46の若月さんと話せる「若様Bot」を開発してみた

私は[乃木坂46](http://www.nogizaka46.com/)が大好きなのですが、特に「**XX推し**」という固定メンバーは決まっていなくて、長らく「**箱推し**」でした。

そんな中、ここ1年くらい、毎週欠かさず「**[エバンジェリストスクール](http://www.tfm.co.jp/podcasts/eva/)（通称エバスク）**」というTokyo FMのラジオを聴いていまして、気付いたらアシスタントの「[若月佑美さん](https://ja.wikipedia.org/wiki/%E8%8B%A5%E6%9C%88%E4%BD%91%E7%BE%8E)」推しになっていました。若ちゃんはもともと真面目キャラで気にはなっていたのですが、声とか反応がかわいすぎて、すっかり虜に。

ということで、そんな若月さんこと若様(ニックネームの1つ)とLINEで話ができる「若様Bot」を作ってみました。

雑談したり
<img width="300px" alt="若様talk" src="https://qiita-image-store.s3.amazonaws.com/0/47737/c6f1d440-35d6-9846-a0b1-2aff46da03d4.png">

「若様」と話しかけると若月さんに関する情報のリンクを返したり
<img width="300px" alt="若様info" src="https://qiita-image-store.s3.amazonaws.com/0/47737/8a4244b1-fa0a-59e3-63ad-0db606500b0d.png">

「ニュース」「news」と話しかけると最近のニュースを返したり
<img width="300px" alt="若様news" src="https://qiita-image-store.s3.amazonaws.com/0/47737/30cf52b5-7913-1010-23ca-c931ba364acf.png">

エバスクで名物コーナーとなってるIT用語の略語をQAしたり
<img width="300px" alt="若様news" src="https://qiita-image-store.s3.amazonaws.com/0/47737/b4528313-8c5d-fe21-2241-17bb68b9995e.png">

さらに「写真」「画像」「顔」などに反応して写真を送ってくれたりします。
<img width="300px" alt="若様news" src="https://qiita-image-store.s3.amazonaws.com/0/47737/c46a1895-c790-41d1-d01f-efaef5a609e9.png">

herokuのhobbyで動いてます。是非お試しをm(_ _)m
![wakasamabotqr.png](https://qiita-image-store.s3.amazonaws.com/0/47737/54008bc3-8ea9-2fd9-b19c-182b4fb023d3.png)

# 利用したもの

## Bot環境

###  Heroku

Freeだとsleepしてしまうので、Hobby使ってます。どこでもいいっちゃいいのですが、最近Herokuをよく使ってたので何となく選びました。

![2017-02-05_22h43_40.png](https://qiita-image-store.s3.amazonaws.com/0/47737/7796ec96-5f7e-f858-33c3-da0fc0d880bf.png)

### line-bot-spring-boot

言語はJava使っているのですが、LINEから出てるSDKにSpring Boot向け（[line-bot-spring-boot](https://github.com/line/line-bot-sdk-java/tree/master/line-bot-spring-boot)）のものがあり、とても便利でした。

IDEはNetBeans使っています。開発周りでハマったことは前にまとめてしまったので、以下を参照ください。

Spring BootとLINE Messaging APIで作ったLINE BOTをHerokuで動かす
http://kikutaro777.hatenablog.com/entry/2017/01/16/230122

### Microsoft Cognitive Services

#### QnA Maker

いくつか定型のやりとりをするために[Microsoft Cognitive Services](https://www.microsoft.com/cognitive-services/en-us/)の[QnA Maker](https://qnamaker.ai/)を利用してみました。

![2017-02-05_22h55_15.png](https://qiita-image-store.s3.amazonaws.com/0/47737/61b7f4d4-4dd4-340f-4451-89ce900527ea.png)

タブ区切りのファイル(tsv)でQA形式のデータをインポートすれば、あとは簡単にAPIでQAができます。

![2017-02-05_22h56_18.png](https://qiita-image-store.s3.amazonaws.com/0/47737/22d85c05-c20c-d808-a39e-29a498179229.png)

サービスの中でQAのテストもできて、ここで学習なんかもできるようです。実際、運用してみてわかったのですが、最初と違うやりとりの結果になっているQAがいくつかありました。うまくやりとりできてた定型が、違うものになってしまったので微妙なのですが…どう対応すればいいのかわからず、ちょっと困ってたりも。

![2017-02-05_22h58_54.png](https://qiita-image-store.s3.amazonaws.com/0/47737/d12c503b-5038-9a38-0ba6-1b01efe3d1f1.png)

QAサイトがあれば、そのURLを参照させることもできるので、サポートBotみたいなものには良さそうですね。

#### Bing Image Search API

画像の検索は[Bing Image Search API](https://www.microsoft.com/cognitive-services/en-us/bing-image-search-api)で行っています。

<img width="300px" alt="若様news" src="https://qiita-image-store.s3.amazonaws.com/0/47737/c46a1895-c790-41d1-d01f-efaef5a609e9.png">

LINEのAPIでは、指定可能な画像URLがhttpsである必要性が多く、通常の画像検索だとhttpも多いので困っていました。Bing Image Search APIで検索すると、サムネイルなど一部の結果URLがBingのhttpsとなっているため、スムーズに画像送信できるようになりました。

![2017-02-05_23h05_17.png](https://qiita-image-store.s3.amazonaws.com/0/47737/f66be354-7dec-ebd0-1ae3-c5955eeb0ac9.png)

#### Bing News Search API

ニュースは[Bing News Search API](https://www.microsoft.com/cognitive-services/en-us/bing-news-search-api)を利用しました。

<img width="300px" alt="若様news" src="https://qiita-image-store.s3.amazonaws.com/0/47737/30cf52b5-7913-1010-23ca-c931ba364acf.png">

APIの形式やSubscription Keyの指定はBing Image Search APIと同じです。結果のJSONモデルに合わせて必要な属性だけ定義した以下のようなクラスを作りました。

```java:News.java
@Getter @Setter
@AllArgsConstructor
@NoArgsConstructor
public class News {
    private List<Value> value;
}
```

```java:Value.java
@Getter @Setter
@AllArgsConstructor
@NoArgsConstructor
public class Value {
    private String name;
    private String url;
    private NewsImage image;
    private String description;
}
```

```java:NewsImage.java
@Getter @Setter
@AllArgsConstructor
@NoArgsConstructor
public class NewsImage {
    private NewsThumbnail thumbnail;
}
```

```java:NewsThumbnail.java
@Getter @Setter
@AllArgsConstructor
@NoArgsConstructor
public class NewsThumbnail {
    private String contentUrl;
}
```

呼び出しはSpringのRestTemplateを利用しました。

terasolunaのガイド「5.17. RESTクライアント（HTTPクライアント）」が詳しいです。
http://terasolunaorg.github.io/guideline/5.1.0.RELEASE/ja/ArchitectureInDetail/RestClient.html

あとは以下記事が良かったです。

Spring Boot 1.4+でRestTemplate(HTTPクライアント)を使う
http://qiita.com/kazuki43zoo/items/7cf3c8ca4f6f2283cefb

こんな感じで呼び出し。

```java:呼び出し
HttpEntity<News> news = restTemplate.exchange("https://api.cognitive.microsoft.com/bing/v5.0/news/search?q="+message+"&count=5&mkt=ja-JP", HttpMethod.GET, entity, News.class, headers);
```

#### Text Analytics(未実装機能)

もう1つやろうとしていたことに、[Text Analytics](https://www.microsoft.com/cognitive-services/en-us/text-analytics-api)を利用して、若月さんのブログデータからトピックとかを抽出して何かやろうと考えました。

ブログデータの取得は[jsoup](https://jsoup.org/)を利用してスクレイピングしました。@opengl-8080 さんの記事が詳しいです。

jsoup使い方メモ
http://qiita.com/opengl-8080/items/d4864bbc335d1e99a2d7

ファイルに一旦出力して

![2017-02-02_19h27_26.png](https://qiita-image-store.s3.amazonaws.com/0/47737/0f36309e-a146-9fa1-4f20-9911b0dd5367.png)

最初、[Text Analytics](https://www.microsoft.com/cognitive-services/en-us/text-analytics-api)の**Key phrase extraction**にいくつかのブログを食わせてみました。すると以下のようにバラバラと解体してキーワードを抽出してくれます。これをどう料理するかは置いといて、良い感じ。

![2017-02-02_23h32_03.png](https://qiita-image-store.s3.amazonaws.com/0/47737/b3b5df38-3ecf-64d6-06b5-9f03a625923c.png)

で、次にTopic detectionを使ってみたのですが、こいつがうまくいかず苦戦。メモ忘れてしまったので、詳細は省きますが、一度APIでデータをPOSTすると、サーバサイドで色々解析してくれる仕組みのようです。その結果を取得するURLがレスポンスで返ってくるのですが、そこにアクセスするとエラー（認証は通ってるけど）と毎回なってしまってどうにもダメでした。

調べると同じキーワードが多いとかだとダメ、とか色々あるようですが、どれもうまくいかず、一旦諦めました。

### Docomo API/ツール

通常会話はDocomoのAPI使ってみました。
https://dev.smt.docomo.ne.jp/?p=docs.api.index&ref=toppage_service_secton

現状は雑談対話のみ利用しています。
https://dev.smt.docomo.ne.jp/?p=docs.api.page&api_name=dialogue&p_name=api_usage_scenario

<img width="300px" alt="若様talk" src="https://qiita-image-store.s3.amazonaws.com/0/47737/c6f1d440-35d6-9846-a0b1-2aff46da03d4.png">

### その他(2017/2/9追記)

LINEのホームの下にみえるメニューってプログラムで何か作るのかと思ったら、普通に管理画面で作れました。（知らなかった…）

<img width="300px" alt="若様talk" src="https://qiita-image-store.s3.amazonaws.com/0/47737/80acbf4a-1084-fa0f-77a6-80107d4ac60b.png">

リッチコンテンツ作成のリッチメニューから作成できます。

![2017-02-09_21h57_41.png](https://qiita-image-store.s3.amazonaws.com/0/47737/cf4e0e7b-9857-707c-59ab-8a349eef89e9.png)

![2017-02-09_21h59_21.png](https://qiita-image-store.s3.amazonaws.com/0/47737/6cb8da86-4400-a235-c2b0-dd9bd3cdf0c5.png)

今回は画像を800x540で作成して「画像タイプ2」を設定してみました。
メニューを選んだ時のアクションとして「キーワード」「URL」「テキスト」の3つが選べます。


## Webサイト

今回、bot用のWebサイトを作ってみました。長らくJava EEでJSFとかばかりだったので、単純に静的なhtmlってゼロから書いたことないな…と思いながら（苦笑

### UIKit

最初はBootstrapで作ろうと思ったのですが、どうしても見たことある感じ（色々テンプレート利用すれば違うのでしょうが）がしてしまうので、何かないかなと探したところ[UIKit](https://getuikit.com/)なるものを知って使ってみました。

![2017-02-05_23h22_51.png](https://qiita-image-store.s3.amazonaws.com/0/47737/6c105e5c-d289-b2b2-42c5-32936df035b3.png)

個人的には良い感じでした。できあがったのはこんなページ。

![2017-02-05_23h24_12.png](https://qiita-image-store.s3.amazonaws.com/0/47737/fa1be942-5f02-e807-fc4b-8ddcac76915c.png)

![2017-02-05_23h24_25.png](https://qiita-image-store.s3.amazonaws.com/0/47737/05dbc898-c48c-74e5-1dd0-ed11e43d7321.png)

![2017-02-05_23h24_34.png](https://qiita-image-store.s3.amazonaws.com/0/47737/9aeb0f1f-d275-a9fe-7adf-9d53b1243a8f.png)

レスポンシブにも対応しています。

![2017-02-05_23h28_14.png](https://qiita-image-store.s3.amazonaws.com/0/47737/8495487a-dc0b-3fc0-eb08-6a0cc26b59df.png)

![2017-02-05_23h28_29.png](https://qiita-image-store.s3.amazonaws.com/0/47737/6ebcbadb-9b8f-ac57-0806-ac7a5fbe2a23.png)

Webサイトは現状Microsoft Azureにのせています。Azureで独自ドメインの設定をしたことがなかったのでトライしたのですが、あっさり簡単すぎて書くことがない。今年はAzure色々試していきたい。

せっかく作ったので、LINE BOT AWARDSに個人として出してみたいなーと思ったり。

![2017-02-05_23h30_50.png](https://qiita-image-store.s3.amazonaws.com/0/47737/6e9b1fff-0549-a461-9bf8-d3a160e34624.png)


こういうので何かあれば若月さんの知名度もさらに上り坂に！！とか余計なお世話ですが(^^;

しかし、アイドルネタとかだと肖像権辺りが難しいですね(^^;最終的にはアイコンを絵に置き換えたりしたいなと思っています。

関連記事
LINE Messaging APIで「若様bot」を作ってみました
http://kikutaro777.hatenablog.com/entry/2017/01/28/224716