MotionBoardでTwitter連携をしてみる

#最初に
MotionBoardが便利でいろいろと触ってみています。
いろいろなサービスとデータ連携できてとても便利なので、今回はTwitterと連携をしてみました。

その手順内容をお伝えします。

#全体の流れ
今回の流れは大きくわけて、４つとなります。

０.Twitter Developerへの登録、APIの作成
１.MotionBoardとTwitterの接続設定
２.MotionBoardのボード作成（機能編）
３.MotionBoardのボード作成（お化粧編）

※6/25　お化粧は作成中でございます。
※7/31　お化粧完成しました！！

さっそく見ていきましょう。

<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>


##０.Twitter Developerへの登録、APIの作成
もしかして最大の難所はここなんじゃないか・・・。
みなさんが持っているTwitterアカウントはそのままではMotionBoardと直接連携できません。
他のアプリでも同じですが、TwitterのAPIを使うので、Twitter Developerに登録して、新しくAPIを作成する必要があります。

こちらはTwitterでデータ連携をする場合に必須の機能となりますので、ぜひ登録を済ませてください。
そのときに参考にさせていただいた別ユーザー様の記事リンクはこちらです。
[Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ　※2019年8月時点の情報](https://qiita.com/kngsym2018/items/2524d21455aac111cdee)

英語での申請となるところも心が折れるポイントですが、私はGoogle翻訳先生の力をお借りして突破しました。

Twitter Devの申請はそこそこ時間がかかります。
2019年に申請したときは何かしらの理由でTwitter社から否決されました。
2020年に再度試したときはすんなりといきました。

なので**時間に余裕を持ってお試しください。**


##１.MotionBoardとTwitterの接続設定
Twitter Developerの設定が済みましたら、APIの作成に入ります。

設定方法は公式マニュアルに載っています。
[Twitterと接続する](https://manual.wingarc-support.com/ja/manual/mb/mb60/#125113793.html)


トップ画面からAppsを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/57be36b5-8e75-80c5-d4ed-a9107140dd8b.png)

画面右上の「Create an app」を選択します。

Appsの登録の中で、MotionBoard的に必要なところは「Callback URLs」です。
接続したいMotionBoardのIPアドレスなどを確認しながら、Callback URLsを登録します。
例）http://**localhost:8787**/motionboard/oauth2/cdata/oauth2callback
※太字のところは環境によって変わります

あとApplication descriptionやTell us how this app will be usedでアプリの説明をしなければならないのですが、
**もはや開き直って日本語で書きましたが、問題ありませんでした。**
ここはもう恐れるところではございません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e6cf073b-c0b8-a353-11d9-5596caa426ca.png)


設定が終わりましたら、作成したAppsの詳細情報を確認します。
「Keys and tokens」のところから、Consumer API keysのAPI KeyとAPI secret keyをメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/71d9d9d1-a27d-3764-31aa-521f387980d7.png)

またApp detailsからはCallback URLをメモしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/160ead99-b76c-3f0b-c852-f20b55fb5578.png)


MotionBoardの外部接続を作成します。

MotionBoardにログイン（管理者ロールが必要)して、
「管理」→「システム設定」→「接続/認証」→「外部接続」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/aa5eced3-6947-ee1f-31ea-2d3208a88a12.png)

画面左下の新規作成で、「Twitter」を選択。
さきほどメモしたものを貼り付けます。

|MotionBoard用語|Twitter Developer用語|
|:---|:---|
|コンシューマID|API key|
|コンシューマーシークレット|API secret key|
|コールバックURL|Callback URL|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/0e75917d-1dc4-377c-0f6f-9498ef823b41.png)

セットが済みましたら、「オンライン認証」をします。
ブラウザから認証処理をして、OKならば戻ってきますので、そのまま「接続確認」をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/77c37578-71ff-d913-3bc9-1258a8f5f2ff.png)


最後に、画面下の「保存」をクリックすればセット終了、MotionBoardとTwitterが連携されました。

データソースでTwitterを選択してみるとこのような感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/0272af1e-9276-f4b8-851d-733186cbdc44.png)

データが見えるとわくわくしてきますね。


##２.MotionBoardのボード作成（機能編）
さて、データソースが見えました。
いよいよボード開発に入ります。

まずはここでボードで表現したいことのチェック。
本来はやりたいことがあって、ボードイメージを作ってからボードを作りだしますが、Twitterの何が取れるかがわからなかったので、今回はとれるデータの中からボードイメージをセットしていきます。

JDBCエラーになってしまいますね。
Ad系は広告関連なのでTwitterのビジネスアカウントならば見れるかもしれないですね。
とりあえず放置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/3ee87863-a510-fb40-8c04-edb420376e6b.png)

いろいろデータはありますが、今使えそうなのは
　・Tweets
　・Followers
の２つ。

Tweetsは自分の投稿やフォローしている人のツイートなど、Twitter見るときに表示されている投稿が出てきます。
その投稿ひとつひとつのいいね数やリツイート数が取得できます。

Followersは単純にフォロワーの情報が見れます。

そんなわけで今回はTweets情報を使ってこのような画面を作りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/872f0f34-828c-3101-86bd-76a89723f283.png)


自分がフォローしているユーザであればアカウントを切り替えることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4ba691f9-1822-78a6-f947-5c56da953b07.png)





##３.MotionBoardのボード作成（お化粧編）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/af2aa52f-ea6d-79a2-4c71-17b458f1ce9f.png)

お化粧につきましては、そのやりかたをYouTubeに公開していますのでぜひごらんください。
[MotionBoardで可視化した画面がいい感じになっていくまでの工程をお届け！！第2弾！【MotionBoard】](https://www.youtube.com/watch?v=ZbrVLxnGaoM&t=55s)
![EeOT-lJU0AEK7Kr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/bfafceeb-220a-5d4e-06c6-09dd0bdb885a.png)



##終わりに

今回はMotionBoardとTwitter連携についての内容を投稿しました。
せっかくのTwitterのつぶやき情報なので、形態素解析を交えたポジネガ判定とかやりたいですね。
まだまだボード改良の余地があります。

あとMotionBoardの特長としては、いろんなデータソースを仮想統合できるところにありますので、
Twitter以外の情報もボードに載せて、新しい気付きを得たいですね。
YouTubeのチャンネル状況をあわせてみたりとか。


いいですねMotionBoard、夢が広がります。

****