FlaskとSlackを使ってQRコードスキャンによる自動通知システムを構築する方法

# 1. 初めに
[MYJLab Advent Calendar 2023](https://qiita.com/advent-calendar/2023/myjlab)　の2日目の担当する4年の浦です。

昨日[@Tyanri_](https://qiita.com/Tyanri_)先輩の[Blenderで宝石を作る](https://qiita.com/Tyanri_/items/002a48de92f8dccd597e)でした。Blenderを作った宝石がとても綺麗で自分でも作ってみたくなりました！

最近は卒論に追われており、記事を絶望しながら書いております、、、

インターンしている会社がフリーデスクになり、誰がどこに座っているかわからなくなってしまいました。
そこで、QRコードでslackにどこに座っているかわかるようにしたいと思い、今回はQRコードを用いたアプリを作成しようと思います！

また、卒論と推し活が忙しいのでこの記事はChatGPTを使用して作成してみました！

## 2. 開発環境
言語：Python 3.8
フレームワークとライブラリ：Flask、requests
その他ツール： SlackのIncoming Webhooks、QRコード生成ツール

## 3. 実装手順
1. Flaskアプリのセットアップ
2. Slack通知関数の作成
3. QRコードスキャンのためのエンドポイントの設定
4. SlackのIncoming Webhookの設定
5. QRコードの生成と使用

## 4. コードの説明
このセクションでは、Flaskを使ってQRコードをスキャンし、Slackに通知を送るシステムの主要なコード部分を詳しく説明します。

### Flaskアプリのセットアップ
まず、Flaskアプリケーションをセットアップします。以下のコードは、Flaskアプリケーションを初期化し、簡単なルートを設定しています。

~~~Python:app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'
~~~

このコードは、/ パスにGETリクエストが来た際に、"Hello, World!" というテキストをレスポンスとして返します。これはFlaskアプリケーションの基本的な動作を確認するためのテストルートです。

### Slack通知関数の作成
Slackへの通知を送信するための関数 send_slack_notification を定義します。この関数は、SlackのIncoming Webhook URLと送信したいメッセージを引数として受け取ります。

~~~Python:app.py
import requests

def send_slack_notification(webhook_url, message):
    payload = {"text": message}
    response = requests.post(webhook_url, json=payload)
    return response
~~~

requests ライブラリを使用して、SlackのWebhook URLに対してPOSTリクエストを送信しています。このリクエストのボディには、text キーに通知メッセージが含まれます。

### QRコードスキャンのためのエンドポイントの設定
QRコードをスキャンした際に、Flaskアプリケーションが処理を行うためには、特定のエンドポイントを設定する必要があります。以下のコードスニペットは、QRコードがスキャンされた際に呼び出されるエンドポイントの設定例です。

QRコードがスキャンされた際に呼び出されるエンドポイントを作成します。このエンドポイントは、Slackに通知を送るために上記で作成した関数を使用します。

~~~Python:app.py
@app.route('/qr-scanned', methods=['GET', 'POST'])
def qr_scanned():
    webhook_url = "あなたのSlackのWebhook URL"
    send_slack_notification(webhook_url, "ゼミ室に到着しました！")
    return "Slack通知が送信されました。", 200
~~~

このエンドポイント（/qr-scanned）は、QRコードがスキャンされるとアクセスされます。send_slack_notification 関数を呼び出して、指定したSlackチャンネルに「ゼミ室に到着しました！」というメッセージを送信します。

注意点
このコードは、開発者がローカルでテストすることを目的としています。実際の運用環境で使用する場合は、セキュリティ対策を考慮する必要があります。
SlackのWebhook URLはセキュアに保管し、公開しないようにしてください。
requests ライブラリは、あらかじめインストールする必要があります（pip install requests）。

### SlackのIncoming Webhookの設定
1. Slack Appの作成
* [Slack API](https://api.slack.com/apps)の公式サイトにアクセスし、新しいAppを作成します。
* 作成したAppを所望のSlackワークスペースにインストールします。
2. Incoming Webhooksの有効化
* Appの設定ページで「Incoming Webhooks」を有効にします。
3. Webhook URLの生成
* 新しいWebhook URLを生成し、それをコピーします。
* このURLは、Slackにメッセージを送信するために使用されます。

https://api.slack.com/apps

※<font color="Red">Incoming Webhooksの参考サイト</font>

https://zenn.dev/hotaka_noda/articles/4a6f0ccee73a18

### QRコードの生成と使用
QRコードは、指定したURLに簡単にアクセスできるようにするために使用されます。この例では、QRコードはFlaskアプリケーションの/qr-scannedエンドポイントにリンクします。

1. QRコードの生成
* オンラインのQRコードジェネレータを使用するか、qrcode Pythonライブラリを使用してQRコードを生成できます。
* 今回は、[QR Code Generator](https://ja.qr-code-generator.com/)を使用してQRコードを作成します。
QRコードには、FlaskアプリケーションがホストされているURLを埋め込みます。
ローカルIPアドレス
~~~:URL
http://ローカルIPアドレス:5000/qr-scanned
~~~

Flaskアプリケーションを起動するときに、ホストを 0.0.0.0 に設定することで、ローカルネットワーク内の全てのデバイスからアクセスできるようにします。これは、app.run コマンドに host='0.0.0.0' を追加することで行えます。
~~~Python:app.py
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)
~~~

https://ja.qr-code-generator.com/

2 . QRコードの使用:
* 生成されたQRコードを印刷するか、画面上に表示します。
* ユーザーがこのQRコードをスキャンすると、自動的に設定したURLにアクセスし、その結果としてSlackに通知が送信されます。

![スクリーンショット 2023-12-01 111617.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983787/6d29b15c-523a-5302-2606-6a4723e48716.png)

## まとめ
FlaskとSlackを使ってQRコードスキャンによる自動通知システムを構築してみました
無事通知を送ることができたので次は、QRコードスキャンでslackの名前にデスクの番号を追加されるアプリを作ってみようと思います！

2日目終了しました！
今回は卒論がギリギリなのでChatGPTに書かせてみました！
いい感じに書くことができて満足です！！
最後まで頑張りましょう！