Slackで絵文字トリガーの翻訳Botを作ったら社内で普及した話

#概要
メッセージに絵文字を付けると翻訳してくれるボットを作ったところ、社内で普及しました。このbotは簡単に導入でき、「誰でも」「多様な言語で」「気軽な」slackのやりとりができるようにしてくれます。

✔ 自動翻訳ではなく手動翻訳なので目障りにならない(受け入れられやすい)
✔ 連携ツールを使った簡単な実装(ノープログラミング)
✔ 絵文字を付けるだけなので非エンジニアにも気軽に使ってもらえる

▽最初の投稿(2019-10-28)
![slack-translator-bot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/ee121720-a6dd-89d9-2170-4de48ccfb1ef.png)

#背景
いま勤めている会社の１～２割が外国籍の人で英語が流暢な人たちです。
彼ら彼女らは普段日本語での会話もできます。

でも、あるとき英語スピーカーの1人と話をしたとき、彼女はこう言いました。
「いつも日本語で喋ってるときはおとなしいと思われている。だけど、英語で喋っているときは全然性格違うねってビックリされる。日本語で理解して、考えて喋らなくちゃいけないからストレスがたまっている」

確かに、彼ら彼女らは日本語で意思疎通ができます。
その彼女も一見日本語ペラペラです。
でも、込み入った話をすると難しい顔になります。
だから僕たち日本人は、日本語をゆっくり喋ったり、喋れるときは英語を使います。

もっと他に何かできることはないでしょうか？

全社通知、チームメンバー間の連絡、雑談、・・・会社では、これら大部分をSlackでしています。
しかし、日本語でやりとりが多数を占めているため、英語スピーカーにとってはそれを翻訳・理解する負荷がかかります。また、「英語を使って良い感」というものが多かれ少なかれ損なわれている気がします。

僕はエンジニア的な観点から、こうしたSlackでのコミュニケーションの敷居を下げること、そして効率性を改善することを目指しました。

#要件
##コンセプト
「任意のコメントを誰でも気軽に簡単に翻訳する」
##条件
 - ユーザーはどのメッセージを翻訳するか選べる
 - ユーザーはどの言語で翻訳するか選べる

##要件
メッセージに対して、

 - 「English」という名前の絵文字を付ければ英語訳されたメッセージが
 - 「Japanese」という名前の絵文字を付ければ日本語訳されたメッセージが

そのスレッドでリプライされる

## 特徴
 - その翻訳メッセージが目障りに感じられにくい
**かつて、すべてのやりとりを自動的に翻訳するbotが導入されたらしいですが、ちょっとしたものも翻訳されてしまうので廃止になった**らしいです。
<img width="269" alt="translate-bot-in-the-way.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/5515758f-e423-fbf0-d7dd-dd32e37c0b63.png">

 - 導入のハードルが低い
ほぼ趣味でやったことなので、**軽い気持ちで「作ってみたので試してください！」って言いたい**ものですが、全自動のbotだとそれが難しくなります。ちなみに、その利用をユーザーに選んでもらう、というのはベンダーがよくちょっとした新機能リリース(旧機能を廃止)したいときに使う手法でもあります。

 - 翻訳の敷居が低い
絵文字をクリックだけでラクに翻訳できます。日本語コミュニティにおける外国人の心理的負荷を下げるために実装するので、完全な自動化にはしないもののラクさは必要です。したがってコマンドはNG。**絵文字なら非エンジニアでも楽しく使えます**。

 - 翻訳されているメッセージが分かりやすい
翻訳されたメッセージは親のメッセージのスレッドにリプライされる形を取りますが、この親メッセージにはフラグ＝絵文字がつくので、見てもらいやすくなります。

#反応

- リリース直後は、みんな面白がって色々な翻訳を試していました。
- その後、特に全社的な連絡や、英語スピーカーとよくやりとりをするプロジェクトのチャンネルで頻繁に使われるようになりました。
- また、役員陣やプロジェクトマネージャーなどの方からよく使っているとの声もいただきました。

---

###① 最初の告知
まず、ボットを実装後、雑談用チャンネルに告知しました。
すると、そのコメントにリアクションしてみる人たちが現れました。

```
[masato]　slackの投稿を翻訳するボットを作ってみました。アイコン一覧から「english」「japanese」を選択してみてください。 
　　↓　（絵文字[English]でリアクション）
[TranslatorBot] I made a bot that translates slack posts.　Please select "english" from the icon

```

###② 最初の反応
次に好奇心で色々なコメントの翻訳を試してみる人たちが出てきました。

```
[masaki]　kleine kinder können keine kirschkerne knacken.
　　↓　（絵文字[English]でリアクション）
[TranslatorBot] small children can not crack cherry pits.

[michiko] 謝謝
　　↓　（絵文字[English]でリアクション）
[TranslatorBot] Thank you

```

---

追記：以下、Twitterを漁ってたらたまたま見かけてしまった同僚のつぶやきより。
文脈によってはこうした誤訳があるかもですね。営業の小田さんがお亡くなりに...笑
<img width="269" alt="slack-bot-joke" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/b46ea056-fa3d-de83-d507-f303ed4fd5d3.jpeg">

---


###③ 公の告知
そして、管理部からアナウンスもしてもらい、認知や正当性が高まりました。

###④ 普及
その後は社長からのお知らせや管理部からの通知、チームメンバー向けの情報共有、社内サークルのコメント、プロジェクトでのコミュニケーションに利用されるようになりました。

現在はコメントした本人が英語訳用の絵文字を付けたり、他の日本人が英語スピーカーのために気を利かせて絵文字をつけてあげたり、英語スピーカー自身が(英語訳用の)絵文字を付けてコメントを読んだりしています。

文章量の傾向としては長めのものが多いようですが、以下のように短い文章でも英語スピーカー(一見日本語ぺらぺらな人)自らが翻訳の絵文字を付けたりしているので、やはり心理的負荷がかかっていたんだなーと思います。

```
[tatsushi] screaming frogをver11からver12にアップデートしました。基本的には今まで同様ですが、設定画面など若干変化しているようですね。
　　↓　（絵文字[English]でリアクション by emily）
[TranslatorBot] Updated screaming frog from ver11 to ver12. Basically it is the same as before, but it seems that the setting screen has changed slightly.
```



#実装方法
##1.フラグに使いたい絵文字を作る
①絵文字に使う画像を適当なサイトでダウンロードしてきます。
   [[アイコンの取得に使ったサイト](https://www.sccpre.cat/show/ibwixhm_english-language-learning-research-guide-english-learning-icon/)]

② Slackの絵文字に[1]で取得しておいた画像をアップロードします。
![add-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/84a0109d-e2b0-26f2-5756-c0992e2cceb0.png)
↓
![221-2216593_english-language-learning-research-guide-english-learning-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/9766e465-3abd-ecae-f375-28962f35d12b.png)
絵文字にはできるだけ直感的な名前を付ける

##2.「Zappier」でSlackのAPIを利用する
（文章ベースでざっくりと記載しますので、実際の設定画面を見ながら進めてください。）

###Zappierとは
「[Zappier](https://zapier.com/app/dashboard)」はコードを書かなくても各種サービスのAPIを直感的に利用することができる無料サービスです。ここではZappierを設定し、以下の処理が行われるようにします。

- 処理のトリガー：Slackのコメントが指定の絵文字でリアクションされること
- メインの処理：上記コメントの翻訳
- 出力：該当のSlackのコメントに対して翻訳したコメントをリプライ

###①基本連携設定
以下のように
- [1]連携するツール("Slack"→"Translate by Zapier")
- [2]トリガーとメインの処理("New Reaction Added"→"Translate Text")
 を選択
![zappier-dashboard-translate-english-japanese.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/cef2407f-b5b6-982d-567a-c53dc93b2560.png)
→"Use Zap"をクリックして次に進む

###②詳細連携設定
より細かい設定を行う画面が表示されます。
![zappier-advanced-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/19b46429-c918-d352-3b0e-39406cb93835.png)
各項目には以下のように設定していきます（これだけ読んでも分かりにくいと思うので、実際の設定画面と照らし合わせながら進めてください。）

```
When this happens ...
1. New Reaction Added in Slack
    ▽Choose App & Event
        Choose App (required):Slack
        Choose Trigger Event (required):New Reaction Event
        
    ▽Choose Account
        Slack account(required):masato.emata@XXX.com
    ▽Customize Reaction
        Reaction(optional):english
        Channel(optional):
        User(optional):
    ▽Find Data: Reaction A
    
Do this ...
2. Translate Text
    ▽Choose App & Event
        Choose App(required):Translate by Zapier
        Choose Action Event(required):Translate Text
    ▽Customize Text
        Source Language(optional):
        Text(required):1.Message Text:XXX
        Target Language
    ▽Send Data
        (テスト)
        
Do this ...
3. Send Channel Message in Slack
    ▽Choose App & Event
        Choose App (required):Slack
        Choose Trigger Event (required):Send Channel Message
        
    ▽Choose Account
        Slack account(required):masato.emata@XXX.com
    ▽Customize Channel Message
        Channel(required):Use a Custiom Value(advanced)
        Custom Value for Channel ID(required):1.Message Channel ID:XXX
        Message Text(required):
            2.Translation:XXX
            <1.Message Permalink:https://XXX>
        Send as a bot?(optional):yes
        Bot Name(optional):TranslatorBot
        Bot Icon(optional)::english:
        Include a link to this Zap? (optional):yes
        Auto-Expand Links?:yes
        Link Usernames and Channel Names? (optional):yes
        Thread (optional):Use a Custom Value (advanced)
        Custom Value for Thread Timestamp (optional):1.Message Ts:XXX
        Broadcast To Channel? (optional):no


    ▽Find Data: Reaction A
```
→この連携設定をONにすれば有効になります。


---
参考ドキュメント：
どこかにこの構築の参考にした記事があったのですが、見失いました。
見つけたら追記します。

---
何かあればお手数ですが、本記事か以下アカウントでお知らせください！

**\ *Follow Me!* /**
**[*Qiitaアカウント*](https://qiita.com/MasatoEmata)**
**[*Twitterアカウント*](https://twitter.com/masatoemata)**