🥳

Slack 新プラットフォームでアプリを開発してみよう

2022/09/27に公開

Slack

Deno

tech

はじめに

Slack 新プラットフォームの開発者用オープンベータ版が利用可能になりました。

https://deno.com/blog/slack-open-beta

開発者体験が格段に向上しているようで、個人的に有料プランで Slack を契約していることもあり、せっかくなので、以前作成していた Slack アプリを書き直してみることにしました。

Slack 新プラットフォームの特徴

機能をカプセル化するための関数とワークフローのコーディング
Slack CLI を使用して、関数とワークフローを簡単に開発、テスト、デプロイする
ユーザーがワークフロービルダーで機能をリミックスおよび再結合できるようにする

Slack CLI のアップデート

アプリの開始点として機能する、オープンソーステンプレートのライブラリ
ソケットモードによるローカル開発
Slack のあらゆる関数のデータを簡単に保存・管理できる機能

Slack プラットフォームのクイックスタートガイド

このセクションでは、個人的な作業メモを残しています。

みなさんは公式ドキュメントをご覧ください。

https://api.slack.com/future/quickstart

0. 前提条件

sw_vers
# ProductName:    macOS
# ProductVersion: 13.2
# BuildVersion:   22D49

1. Slack CLI をインストールする

これにより、Slack CLI と、Deno を含むすべての必要な依存関係がインストールされます。

curl -fsSL https://downloads.slack-edge.com/slack-cli/install.sh | bash

slack --version
# Using slack v1.18.0

deno --version
# deno 1.30.2 (release, aarch64-apple-darwin)
# v8 10.9.194.5
# typescript 4.9.4

2. CLI を承認する

slack login

ターミナルウィンドウに、次のような文字列が出力されます。
これを開発するワークスペースの Slack チャンネル or DM に貼り付けて送信します。

/slackauthticket xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

すると、次のようなダイアログに Challenge Code が表示されるので、それをターミナルに貼り付けて Enter を押します。

? Enter challenge code xxxxxxxx

# ✅ You've successfully authenticated! 🎉 
#    Authorization data was saved to /Users/blendthink/.slack/credentials.json

CLI が承認されたか確認します。

slack auth list
# [ACTIVE] blendthink (Team ID: xxxxxxxxx)
# User ID: Xxxxxxxx
# Last update: 2023-02-18 22:42:53 +09:00
#
# To change your active workspace authorization run slack login

3. Slack アプリを作成する

cd {Slack アプリを作成する場所のパス}

slack create anniversary-slack-app
# ? Select a template to build from:
# 
# > Hello World
#   A simple workflow that sends a greeting
# 
#   Scaffolded project
#   A solid foundation to start building upon
# 
#   Blank project
#   A, well.. blank project
# 
#   To see all available samples, visit github.com/slack-samples.

今回は Hello World を選択しました。

# ? Select a template to build from: Hello World
# 
# Creating new Slack app at {Slack アプリを作成する場所のパス}/anniversary-slack-app
# 
# 📦 Installed project dependencies
# 
# ✨ anniversary-slack-app successfully created
# 
# 🧭 Explore your project's README.md for documentation and code samples, and at any time run slack help to display a list of available commands
# 
# 🧑‍🚀 Follow the steps below to try out your new project
# 
# 1️⃣  Change into your project directory with: cd anniversary-slack-app
# 
# 2️⃣  Develop locally and see changes in real-time with: slack run
# 
# 3️⃣  When you're ready to deploy for production use: slack deploy
# 
# 🔔 If you leave the workspace, you won’t be able to manage any apps you’ve deployed to it. Apps you deploy will belong to the workspace even if you leave the workspace

作成されたアプリのディレクトリに移動して、中身を確認します。

cd {Slack アプリを作成する場所のパス}/anniversary-slack-app

brew install tree
tree --version
# tree v2.0.4 (c) 1996 - 2022 by ...

tree -a
# .
# ├── .github
# │   └── workflows
# │       └── deno.yml
# ├── .gitignore
# ├── .vscode
# │   └── settings.json
# ├── LICENSE
# ├── README.md
# ├── assets
# │   └── icon.png
# ├── deno.jsonc
# ├── functions
# │   ├── greeting_function.ts
# │   └── greeting_function_test.ts
# ├── import_map.json
# ├── manifest.ts
# ├── slack.json
# ├── triggers
# │   └── greeting_trigger.ts
# └── workflows
#     └── greeting_workflow.ts
# 
# 7 directories, 14 files

必要な .gitignore の設定はされているため、この状態でいったん GitHub Repository を作成して PUSH しておきます。

git init
git add .
git commit -m "initial commit"
git branch -M main

brew install gh
gh --version
# gh version 2.16.1 (2022-09-26)
# https://github.com/cli/cli/releases/tag/v2.16.1

gh auth login
# ? What account do you want to log into? GitHub.com
# ? What is your preferred protocol for Git operations? HTTPS
# ? Authenticate Git with your GitHub credentials? Yes
# ? How would you like to authenticate GitHub CLI? Login with a web browser
# 
# ! First copy your one-time code: xxxx-xxxx
# Press Enter to open github.com in your browser... 
# ✓ Authentication complete.
# - gh config set -h github.com git_protocol https
# ✓ Configured git protocol
# ✓ Logged in as blendthink

gh repo create anniversary-slack-app --public --source=. --remote=origin --push
# ✓ Created repository blendthink/anniversary-slack-app on GitHub
# ✓ Added remote https://github.com/blendthink/anniversary-slack-app.git
# ✓ Pushed commits to https://github.com/blendthink/anniversary-slack-app.git

4. アプリのトリガーを作成する

slack trigger create --trigger-def "triggers/greeting_trigger.ts"
# ? Choose an app  [Use arrows to move, type to filter]
#   anniversary-slack-app
#    App ID: N/A  Status: Not installed
#    Workspace: blendthink  Team ID: xxxxxxxxxxx
# 
# > anniversary-slack-app  (dev) 
#    App ID: N/A  Status: Not installed
#    Workspace: blendthink  Team ID: xxxxxxxxxxx

(dev) と表示されている方が開発中のワークスペースなので、それを選択します。

# ? Choose an app anniversary-slack-app  (dev) 
#    App ID: N/A  Status: Not installed
#    Workspace: blendthink  Team ID: xxxxxxxxxxx
# 
# 
# 📚 App Manifest
#    Created app manifest for "anniversary-slack-app (dev)" in "blendthink" workspace
# 
# 🏠 Workspace Install
#    Installed "anniversary-slack-app (dev)" app to "blendthink" workspace
#    Finished in 1.7s
# 
# ⚡ Trigger created
#    Trigger ID:   xxxxxxxxxxxx
#    Trigger Type: shortcut
#    Trigger Name: Send a greeting
#    URL: https://slack.com/shortcuts/xxxxxxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

URL は次のステップで必要になるので、メモしておきます。

また、.slack/apps.json というファイルが作成されているので、コミットしておきます。

git add .slack/apps.json
git commit -m "Add .slack/apps.json"
git push

5. アプリをローカル開発モードで実行する

slack run
# ? Choose a workspace  [Use arrows to move, type to filter]
# > blendthink  Team ID: xxxxxxxxxxx 
#    App ID: xxxxxxxxxxx  Status: Installed

アプリがインストールされているワークスペースを選択します。

# ? Choose a workspace blendthink  Team ID: xxxxxxxxxxx 
#    App ID: xxxxxxxxxxx  Status: Installed
# 
# Updating dev app install for workspace "blendthink"
# ✨  blendthink
# Connected, awaiting events

前のステップの URL を、Slack ワークスペースのパブリックチャンネルに投稿します。