Zenn
📲

FlutterでSlackAPIを使ってメッセージ送信する方法

2023/06/27に公開
Flutter
Slack
API
Dart
アプリ開発
tech

今回は、FlutterでSlack APIを使ってFlutterで入力したテキストを
Slackのチャンネルで自動送信するアプリの作り方を解説します。

今回は、Slackのチャンネル作成から解説をしています。
まだ、Slackを使った事がない人でも分かりやすいように視覚的に表現しておりますので、
サラサラっと取り組む事ができます。
APIの中でも個人的に一番簡単で楽しいSlack APIを使って学習する事で
APIの理解が少し深まると思います。

✅今回の内容

  1. Slackの部屋を作成する
  2. APIを作成する
  3. FlutterでSlackAPIを使う
  4. 実際に動かしてみる

🍎　今回作成するアプリ

✅メイン内容

🛠　Slackの部屋を作成する

1. 【前提】部屋の作成

すでに作成してあるWorkspaceを使われる方はスキップして大丈夫です。

まず、Slack公式サイトからワークスペースを新規作成します。

メールアドレスを入力して、認証コードをメールで受け取ります。
受け取った認証コードを入力して、ワークスペースを作成します。

その後、Slackを開くと

このような画面が表示されています。
案内に従って適当に作成していきましょう。

一通り入力が終わって、ワークスペースの作成が完了すると

このように作成したワークスペースが利用できるようになります。
これで、前提条件は完了です。🍎

🛠　APIを作成する

1. APIを登録する

SlackAPI公式サイトからAPIを作成します。
『Create New App』をクリックしてください。

特に何か指定がなければ『From scratch』をクリック。
JSON形式など指定がある場合は、『From an app manifest』をクリックします。

すると、下記の画面が表示されます。

『App Name』には、今から作成するAPIの名前をつけてください。
『Pick a workspace to develop your app in』には先ほど作成したSlackのワークスペースを選択します。ここは、時々反映されていないことがあるので、その場合は下部にある
『Sign into a different workspace』を押して作成したワークスペースに再度サインインしてからもう一度試してみてください。

名前とワークスペースの選択が終わったら『Create App』を押します。

すると、画面が切り替わって下記画像のように表示されます。

左側のタブに『Incoming Webhooks』とあるのでクリックします。

画面に表示される『Activate Incoming Webhooks』のトグルスイッチをONにします。

すると、画面下部に下記の画面が表示されます。

この時点では、まだワークスペースの特定チャンネルにメッセージを送る事ができません。
なので、APIと繋げたいチャンネルをここで設定する必要があります。

『Add New Webhook to Workspace』を押します。

下記画面に切り替わるので、ここでAPIと繋ぐチャンネルを選択します。

今回は『#general』に繋ぐ事にしました。

選択したら『許可する』を押しましょう。
すると、下記画像のようにWebhook URLに選択したチャンネルのURLが表示されています。

これでこのURLを使用してFlutterから
APIを使ってSlackでメッセージを送信する準備が完了しました🍎

🛠　FlutterでSlackAPIを使う

今回、作成した完成版プログラムはGithubに公開してますので、ぜひご利用ください。

https://github.com/LisRas-code/Zenn_Slack_API

1. Slack APIを使うために必要なモノ

まず、Flutter側でSlack APIを使うために必要なモノを準備しましょう。
用意するのは、以下のパッケージ。

dart Packageで該当のversionを選択して、コピーします。

2. Flutter側のサンプルコード

FlutterでSlack APIを使うためのコードを書きます。

今回は、APIに通信を行うために必要なコードを解説しながら書いていくので
先に大元となるプログラムを下記で配布します。

コピペで使えるサンプルコード
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: const MyHomePage(title: 'Zenn Slack API'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  void _sendSlackApi() {
    setState(() {
      _controller.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 50),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _controller,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendSlackApi,
        child: const Icon(Icons.add),
      ),
    );
  }
}

簡単にサンプルプログラムの説明をします。
画面中央にあるTextFieldでSlackに送るメッセージを書きます。FloatingActionButtonを押したらAPIにリクエストを投げてSlackのチャンネルでメッセージを送信してもらうような内容です。

上記のサンプルプログラムで文字入力の欄は出来ているので、
本題であるAPIにリクエストを投げる処理を書いていきます。

3. APIにリクエストを送る

まず、APIにリクエストを送るためには以下の情報が必要です。

  • url
  • header
  • body

URLは先ほど作成したURLを設定します。。
headerにはAPIを使用するための設定情報を設定します。
bodyにはメッセージ本体を設定します。

まず初めに、URLとheaderを設定します。

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  final Uri url = Uri.parse("<ここにURLを入れる>");
  Map<String, String> headers = {
    'content-type': 'application/json',
  };

urlには先ほど作成した下記画像の場所からURLをコピーして代入しましょう。

headerには、今回jsonでメッセージを送信しようと思うので
'content-type': 'application/json',と入力します。
その他、必要な設定を入れたい方はSlack公式を参考にしてみてください。

今回、TextFieldで入力された値を同じSlackチャンネルに送るので
動的に変化するのはbodyのみです。
URLとheaderは固定で良いのでMyHomePageクラスが呼ばれた時に値を設定するようにします。

これで、APIとやり取りするために必要な3つの情報の内2つは設定が完了しました。

次にボタンタップされた時の処理を書きます。

  void _sendSlackApi() {
    setState(() async {
      Map<String, String> postData = {"text": _controller.text};
      String body = jsonEncode(postData);
      http.Response response =
          await http.post(url, headers: headers, body: body);
      print("response[statusCode]:${response.statusCode}");
      print("response[headers]:${response.headers}");
      print("response[body]:${response.body}");
      _controller.clear();
    });
  }

_sendSlackApiはボタンがタップされた時に呼ばれるメソッドです。
このメソッドが呼ばれる段階でURLとheaderは設定が完了しているので、APIとやり取りするためにはあとはbodyがあれば良いです。
今回は、TextFieldで入力された値をbodyに含めるので"text"に_controller.textを割り当てます。

これで、URL,header,bodyが揃ったのでAPIリクエストを送ります。
上記のコードではこの箇所になります。

http.Response response =
          await http.post(url, headers: headers, body: body);

APIにリクエストを送ると、サーバーで処理等を行った後にレスポンスが返ってきます。
今回は、Slackでメッセージが送信されるのを確認できますが、念のため Flutterでも確認できるようにレスポンス内容をprintで表示しています。

print("response[statusCode]:${response.statusCode}");
print("response[headers]:${response.headers}");
print("response[body]:${response.body}");

これでFlutterからSlackでメッセージを送信するプログラムが作成できました。

🛠　実際に動かしてみる

完成したのがこちら

ボタンタップ後、Slackの#generalチャンネルにメッセージが送信されています。
レスポンスをstatusCode,headers,bodyそれぞれログに表示したので見てみます。

statusCodeには『200』と出ています。これは、リクエストが成功した事を示しています。
ステータスコードには、サーバで処理を行った結果が3桁の数字で返ってきます。
headersには何やらいっぱい書かれてますね。
簡単にまとめると、レスポンス結果の付加情報です。
例えば、サーバーの名前だったりクッキー情報だったりが記載されています。
bodyは、レスポンス結果の本体が入っています。
ファイルが収められている時もあれば、文字データの時もあります。

flutter: response[statusCode]:200
flutter: response[headers]:{x-backend: main_normal main_canary_with_overflow main_control_with_overflow,
date: Tue, 27 Jun 2023 12:38:26 GMT, access-control-allow-origin: *, vary: Accept-Encoding,
strict-transport-security: max-age=31536000; includeSubDomains; preload, referrer-policy: no-referrer,
content-type: text/html, server: Apache, x-slack-edge-shared-secret-outcome: no-match, 
x-edge-backend: envoy-www, x-envoy-upstream-service-time: 182, content-length: 2,
x-slack-backend: r, x-slack-shared-secret-outcome: no-match, x-server: slack-www-hhvm-main-iad-ynxa,
x-frame-options: SAMEORIGIN, via: 1.1 slack-prod.tinyspeck.com, envoy-www-iad-qdotxolo, 
envoy-edge-nrt-lwwsexkz, x-slack-unique-id: ZJrYQrwTLeU8FwsdK67tmgAAADw}
flutter: response[body]:ok

ザッとですが、これでFlutterでSlack APIを使う事ができました。🍎

✅まとめ

今回は、FlutterでのSlackAPIの使い方を解説しました。

アプリやWeb開発ではAPIがよく使われるので、取りかかりやすいSlack APIから学習してみるとAPIの理解が進むかもしれませんね。

Flutterの環境構築がまだな人は以下の記事を参考にしてみてください。

https://zenn.dev/lisras/articles/9f4fe12f920e59

今回はここまで 

Discussion