LineとTeamsをSlackに集約

# 新社会人１年目で周りにある問題を解決してみてたい
これはグループ取り組んだものです。会社では報連相をSlackとTeamsで行っていました。しかし、自分たち社会人１年目の同期はLineでやりとりしていました。そこで私たちはLine、Slack、Teamsのメッセージをまとめることができないかと考え実装してみました。

## 使用するツール
+ Line
    + Line Developers
        + Messaging API
+ Slack
    + Incoming Webhook
+ Teams
+ Power Automate

## 目的
LineからSlackへ、TeamsからSlackへメッセージを集約する。

## まずLineからSlackを実装する
SlackでLineからの通知を受け取るためにSlackのAppを使用します。
SlackのApp検索でincoming Webhookを検索します。
![incoming_webhook_serach.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/af2384f4-e54e-91cd-30c4-6f6a8d646d3a.png)
![incoming_webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/745d5f30-ad98-d190-ef72-9346dec4a41a.png)

Slackに追加しチャンネルへの投稿でLineと連携したいチャンネルを選択します。
incoming Webhook インテグレーションの追加をクリック

![incoming_chanel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/bbd0fe6e-f137-9d36-6816-5299763674fc.png)

インテグレーションの設定のWebhook URLにある自分のURLをメモしておいてください。
また、名前やアイコンはお好きなようにカスタマイズ可能です。
最後に設定を保存するボタンを押せば完了です。

![incoming_URL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/d7a7affe-9516-636b-3a24-77b8b7c886e3.png)
![incoming_conf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/667f087e-9361-699e-9907-446796adeead.png)

次にLineからメッセージを送信するためにLinebotsを使用します。
[https://developers.line.biz/en/](https://developers.line.biz/en/　"ラインデベロッパー")
上記URLにアクセスしアカウントを登録します。
登録できたらCreateボタンで新しいボットを作成し、名前は任意で大丈夫です。
![Line_Developers_login2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/10b74d65-2ded-2d22-cdea-c9da448e1cd2.jpeg)

Createa Messaging API channelをクリック

![Line_API_messege_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/670a3b1b-040e-701e-7e16-184c2c356344.png)

Channel typeとProviderは触らなくても大丈夫。Channelアイコンは任意で変更します。

![Line_create_channel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/ba28aea5-d8ea-f6cd-f958-212e6f00aada.png)

Channel nameとChannle descriptionは適当なものを入れておいてください。
CategoryとSubcategoryは任意でいいです。
![Line_channel_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/af941386-46d3-565f-e7b8-80a6e2b5fff6.png)

その他は触らなくても大丈夫です。最後にチェックボックスに
![Line_not_checkbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/1f619b14-2774-52d1-eb82-0c7ccafc55b1.png)

チェックを入れるとCreateボタンがクリックできるようになります。
ポップアップで何か聞かれたらOKで大丈夫です。
情報利用に関する同意についても同意してください。
![Line_ok_checkbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/dbc3f7ad-1825-d19e-dbc5-517bb41051ab.png)
作成されるとこの画面になります。
![Line_API_home2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/0a1653ed-af0e-1689-577c-b211e0be59a5.jpeg)

Channel secretは後で必要になるためメモしておいてください。

![Line_API_channel_secret2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/8a8e7078-4c15-3908-7600-34072ca7e869.jpeg)

Messaging APIのタブをクリックしてください。

![Line_API_Messegi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/aa556968-c400-6e7b-23af-2684b718fcaf.png)

下にスクロールするとAllow bot to join group chatsがあるのでそこのEditをクリックしてください。


![Line_API_conf_group.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/6fec4b61-3ff9-4199-9056-931a337e8794.png)

アカウント設定に行けますので下にスクロールして、機能の利用からチャットへの参加のボタンをグループ・複数人チャットへの参加を許可するに変更してださい。

![group_conf_acount.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/1a43feaf-7f89-307b-774d-a248167c930a.png)

次に元のページに戻りAuto-reply messagesのEditをクリックしてください。

![Line_API_conf_messages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/763c1c2a-5f61-896d-ff6a-606a6834fdb3.png)


詳細設定のWebhookをオンに変更してください。次に、Messaging API設定をクリックしてください。

![messages_webhook_on.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/94d22634-7011-b0e2-0baa-860f6ac11b9a.png)

Messaging APIのWebhook部分にherokuのアプリケーションのURLをコピペしてください。
herokuのURLは後ほど取得できますので今は新しいタブで開いてこのページを残しておいてください。
![Messeges_API2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/e3b23792-d9ea-5cc4-82f0-c8b44f7278e6.jpeg)

元のページに戻りChannel access tokenをIssueボタンで発行しメモしといてください。
![Line_API_conf_access_token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/f9c50d2d-55b4-c0e4-10c0-b60e593c90fa.png)

## ディレクトリ（環境構築）
Lineからメッセージを受け取るスクリプトを記述していきます
実装はherokuで行います。

```
┣━Line_to_Slack
  ┣━Procfile
  ┣━main.py
  ┣━requirements.txt
  ┗━runtime.txt
```

Prockfileの中身です。Procfileはherokuを構築するときに必要になります。

```heroku:Procfile
web: bundle exec thin start -p $PORT
web: python main.py
```
herokuに導入するPythonのライブラリ。（バージョン指定なくてもいけるはず？）

```heroku:requirements.txt
Flask==2.0.1
line-bot-sdk==1.19.0
slackweb
slackbot
```
herokuで動かすpythonのバージョンを指定する。

```heroku:runtime.txt
python-3.9.5
```
pytyonの実行ファイルの記述。

```python:main.py
from flask import Flask, request, abort

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)
import os
import slackweb
app = Flask(__name__)

# トークンはheroku実行時にherokuの環境変数に追加するのでmain.pyに記述しなくても良い
# (トークンがherokuのgitに上がっても問題ない人は置き換えてもいい)
YOUR_CHANNEL_ACCESS_TOKEN = os.environ["YOUR_CHANNEL_ACCESS_TOKEN"]
YOUR_CHANNEL_SECRET = os.environ["YOUR_CHANNEL_SECRET"]


line_bot_api = LineBotApi(YOUR_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(YOUR_CHANNEL_SECRET)


@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']
    print(signature)
    # get request body as text
    body = request.get_data(as_text=True)
    print(body)
    app.logger.info("Request body: " + body)

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)

    return 'OK'


@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    webhooklink = os.environ["YOUR_SLACK_WEBHOOK"]
    slackinfo = slackweb.Slack(webhooklink)
    profile = line_bot_api.get_profile(event.source.user_id)
    MESSAGE = "[ " + profile.display_name + " ]\n" + event.message.text
    print(MESSAGE)  #ログに出力
    slackinfo.notify(text=MESSAGE)

if __name__ == "__main__":
    port = int(os.getenv("PORT", 5000))
    print(port)
    app.run(host="0.0.0.0", port=port)
```
上記ディレクトリ構成にしていただいてファイルの中身はコピーするだけです。
main.pyのMESSAGE部分は自分で好きなように変更可能です。

ここまでできましたらherokuにアカウントを作成して、gitをpushしデプロイしてLINE DeveloperのMessaging APIのWebhook URLにherokuのアプリケーションのURL+callback/を挿入すれば一通り完了です。


herokuのアカウント作成は下記URLを参考にして作成をお願いします。
[超初心者がherokuにPHPアプリを公開してみた！～アカウント作成編～](https://qiita.com/youth_case/items/f053e6542a8b65ad21aa)

作成できましたらheroku CLIのインストールを行なっていきます。
下記URIが本家のドキュメントになります。
[Heroku CLI をインストール - Heroku Dev Center](https://devcenter.heroku.com/ja/articles/heroku-cli)

私はMacOSでbrewを使用してインストールを行いました。

```sh
$ brew tap heroku/brew && brew install heroku
$ heroku login
```
Gitを使用してherokuにデプロイするためのコードをあげます。
`cd`で`Line_to_Slack`ディレクトリの場所まで移動します。
gitの操作を行ない、`heroku create`コマンドで任意の名前のアプリを作ります。
このときアプリの名前がURLの一部になるため、重複しない名前にしないといけません。
`git push heroku master`でherokuにgitを上げてデプロイします。

```sh
$ cd Line_to_Slackディレクトリのパス
$ git init
$ git add .
$ git commit -m "first commit"
$ heroku create 作成するアプリの名前
$ git push heroku master
```

コードを書き換えたときには以下のコマンドを実行してください。(自分なりにコードを追加したなど)
変更がherokuに反映されるようにgitをherokuにプッシュします。

```shell_session
$ git add .
$ git commit -m "first commit"
$ git push heroku master
```

デプロイしたときにデプロイ状況などを確かめるコマンドを記しておきます。
上から順に説明しておくと
`heroku ps`はherokuでデプロイされているアプリの状態や個数を確認することができます。そのため、`git push heroku master`をした後はこれで確認してみてください。
次に　`heroku ps:scale web=1`はherokuのアプリをスタートさせるコマンドです。１番目のコマンドで起動していない場合はこのコマンドで起動してみてください。
３番目に`heroku ps:scale web=0`は起動しているアプリを終了させるコマンドです。使用しなくなったアプリはこれで終了させてください。
４番目に`heroku logs --tail`はデプロイしたアプリのログを確認することができます。なぜかアプリが動いていないなどの確認はこのコマンドで行ってください。
最後に`heroku config`はherokuの環境変数を確認するためのコマンドです。

```sh
$ heroku ps
$ heroku ps:scale web=1
$ heroku ps:scale web=0
$ heroku logs --tail
$ heroku config
```
`YOUR_CHANNEL_ACCESS_TOKEN=`ではissueボタンで発行したLineのChannel access tokenを代入してください。（メモってあるはずです）
`YOUR_CHANNEL_SECRET`ではLineのCreate a channelで作成したChannel secretを代入してください。（メモってあるはずです）
`YOUR_SLACK_WEBHOOK=`ではSlack appのIncoming webhookのURLを代入してください。（メモってあるはずです）

```shell-session
$ heroku config:set YOUR_CHANNEL_ACCESS_TOKEN=Lineのチャンネルアクセストークン
$ heroku config:set YOUR_CHANNEL_SECRET=Lineのチャンネルシークレット
$ heroku config:set YOUR_SLACK_WEBHOOK=SlackのIncoming WebhookのURL
```
最後にしっかり環境変数を反映できたかheroku configを使用して確認してみてください。

忘れないうちにLineのMessaging APIのWebhook部分に

```
http://[your app name].herokuapp.com/callback/
```
をいれて保存ボタンを押しておいてください。[your bot name]この部分は自分がデプロイするときに作成したherokuのアプリの名前にしてください。角かっこは入れないでください。

![add2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/85cde66c-a52c-9917-22b0-d5ea57f9c393.jpeg)

ここまでできたらLineからSlackへは連携が完了しているはずです。Line Botを任意のグループに入れてみてください。

## TeamsからSlackを実装する
下記リンクにアクセスしてください。
https://japan.flow.microsoft.com/ja-jp/galleries/public/templates/8c3d00ee98624ffa96e9a9daf256c6f5/post-message-on-slack-and-teams-when-new-channel-message-is-added-on-teams/

ついでに[Power Automate](https://japan.flow.microsoft.com/ja-jp/)のリンクです。

このページに飛ぶと思います。すでにTeamsとSlackを連携しているテンプレートを作成しているものがあったのでそれを使用します。
![PA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/9ad9df0b-2b19-a5eb-86f9-456f11f697b8.png)

下にページをスクロールすると画像のようなページがあります。
赤い矢印の部分が初めは＋のボタンになっています。クリックしてアカウントを紐付けてください。
次に青い続行のボタンをクリックしてください。

![PA_first.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/2264ac01-7b15-f694-c669-d6b480e43aae.jpeg)

このページに遷移します。3つある中の最後のステップが必要ないので赤矢印の部分をクリックし削除を選択してください。

![PA_second.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/93e13ccb-f342-cba9-96b7-5f305d63066d.png)

ステップが2つだけになります。赤矢印の部分をクリックして連携したいチームとチャンネルを選択してください。

![PA_seardのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/333d802f-3c12-2dbc-e457-5f647b3c5e29.png)

次にメッセージテキストの部分をクリックすると動的なコンテンツを追加できるのでメッセージ from ユーザー displayNameを選択し追加してください。
これを追加するだけだとメッセージ本文の後に名前が来てしまうので順番を入れ替えることをお勧めします。
最後に保存ボタンを押すことで保存され完了です。

![PA_4のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/45f8a423-b09e-afea-747c-7640d713608e.png)

これでTeams、LineのメッセージをSlackへと集約することができるようになりました。

![compreat2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1715921/6b6287b4-2c59-3536-73fa-c94dfd1d7351.jpeg)

ここまで作成することができました。これを業務に活用できたら便利になるかもしれません。
発展としてOutlookなどのメールアプリからもメッセージをSlackに集めることができたらいいなと思いました。また、この集めたメッセージデータを使用してチャットボットやタグ付けアプリなども作れると面白いかもしれません。
初めて投稿するqiitaだったので拙い部分も多くあると思います。
何卒よろしくお願いします。










## 参考文献
SlackユーザとLINEユーザを繋げたい。
https://github.com/Iovesophy/LINE-Slack-Connector

PythonとLINE Messaging APIでLINE BOTを作ってみた
https://kubogen.com/web-programing-245/

SlackのIncoming Webhooksを使い倒す
https://qiita.com/ik-fib/items/b4a502d173a22b3947a0

Herokuのアプリケーションの停止 / 再開
https://qiita.com/akiko-pusu/items/dec93cca4855e811ba6c