Slack CLI と 無料サンドボックス環境で構築するワークフローアプリ入門

Slack CLI と 無料サンドボックス環境で構築するワークフローアプリ入門

Clock Icon2024.12.09

この記事は アノテーション株式会社 AWS Technical Support Advent Calendar 2024 | Advent Calendar 2024 - Qiita 9日目の記事です。

アノテーション テクニカルサポートチームの 川崎 です。

現在私は、クラスメソッド グループ、アノテーション株式会社で AWS のテクニカルサポートと、新規入社メンバー向けの育成に携わっています。

テクニカルサポートチームでは、お客様からの問い合わせに対する返信案のレビュー対応の業務を担当しております。

チームメンバーからのレビュー依頼を、Slack ワークフローと Google AppSheet を組み合わせて開発した、「レビュー依頼管理」アプリを使用して管理を行い、業務の効率化に取り組んでいます。

本記事では、Slack ワークフローアプリを作成する際に調査した内容を共有したいと思います。

はじめに

  • 2024年3月に、Slack の新しい開発者向けサポート機能として、サンドボックス環境が使えるようになりました。
  • 2024年9月に、ワークフローの従量課金が廃止されました。

Slack の「開発者サンドボックス」についての情報をまとめます。無料で登録でき、開発者にとって非常にメリットが多い印象です。

まだ未登録の方は、ぜひこのブログの手順を参考にしていただき、登録していただければと思います。

このブログでは、開発者プログラムにサインアップする手順をお伝えし、 ローカルの開発環境(PC)に Slack CLI をインストールして、サンプルアプリを実行するまでの手順をお伝えしていこうと思います。

  • 開発者サンドボックス
    • 「Slack 開発者プログラム」の特典として提供されている。
    • 無料で利用可能、有料プランのない開発者でも利用可能。
    • 本人確認のため、支払い方法の登録が必要。(支払い方法は本人確認のために使用され、料金は請求されません。)
    • 開発およびアプリケーションのテストの目的で利用可能。
    • Slack の有料プラン以上で利用可能な機能を利用可能。(Enterprise Grid 環境を利用可能。)
    • Run-On Slack Infrastructure (ROSI) が追加の制限なしで利用可能。
    • 同時に最大2個のサンドボックスをアクティブにできる。
    • デフォルトの有効期限は6か月、6か月ごとに6か月延長可能。(延長すれば継続利用可能です。)
    • メッセージとファイルは、無料プランと同様の制限が適用されます。(90日間の制限)
    • 開発者サンドボックスは、所属企業のワークスペースとは接続されておらず、ワークスペース内の情報やデータ、設定にはアクセスできません。

また、Slack アプリは次の2種類があります。本記事では、ワークフローアプリを取り上げます。

A) Slack の開発者プログラムでサンドボックスを作成

1 開発者プログラムでサインアップ (1-1〜1-6)

1-1 開発者プログラムのページで「プログラムに参加する」をクリックして登録を開始します。
サインアップ済みの場合は「サインイン」をクリックします。ドキュメントはこちらにあります。(英語版)

image16

1-2 「Slack 開発者プログラムに参加する」フォームに下記の項目を入力し「送信」ボタンをクリックします。

  • 氏名
  • メールアドレス
  • 国/地域
  • 郵便番号
  • サブスクリプション
image29

1-3 アカウント有効化メールが、先ほど入力したメールアドレス宛に送信されました。

image8

1-4 メールボックスに届いたメールを開いて「開発者アカウントをアクティベート」ボタンをクリックします。

image26

1-5 Welcome 画面が表示されます。「Get started」ボタンをクリックします。

image15

1-6 開発者プログラムのダッシュボード画面が表示されます。
サンドボックスを利用するためには、本人確認のため「支払い方法の登録」が必要です。
「サンドボックスの管理」をクリックして手順を進めます。

image5

2 支払い方法登録 (2-1〜2-5)

2-1 サンドボックス画面が表示されます。
「お支払い方法を提供する」をクリックします。
サンドボックスは2つまで作成可能です。

image11

2-2 [Billing]-[Payment Methods] 画面が表示されます。
支払い方法を追加するには、最初に「Settings(設定)」タブにアクセスしてチームの請求先住所を追加する必要があります。
「Settings(設定)」タブをクリックします。

image7

2-3 [Billing]-[Settings]画面が表示されます。フォームに下記の項目を入力します。

  • Company name & address
    • Organization name
    • Country or region
    • ZIP code
    • Prefecture
    • Address line 1
    • Address line 2 (optional)
  • Purchasing & free trials
    • Who can purchase Slack:
    • Free trial enrollment

[Save Settings]をクリックして設定を保存します。
[Payment Methods]タブに戻ります。

image25

2-4 [Billing]-[Payment Methods] 画面が表示されます。クレジットカード情報を登録します。

  • Card number
  • Expiration date
  • Security code

を入力し、[Add Payment Method]ボタンをクリックします。

image3

2-5 支払い方法が登録できました。
この画面では、画面遷移のためのボタンやリンクが見当たらないので、
ブラウザの当該タブをクリックして、サンドボックス の画面に戻り、サンドボックスのプロビジョニングの手順を進めます。

image12

3 サンドボックスをプロビジョニング (3-1〜3-11)

3-1 サンドボックス の画面が表示されます。
[+ Provision Sandbox] がクリックできない状態の場合は、必要に応じて画面をリロードして更新します。
[+ Provision Sandbox] をクリックします。(2個ありますが、どちらでもOKです。)

image19

3-2 [Provision sandbox] のポップアップ画面で

  • Sandbox name
  • Sandbox domain
  • Password

を入力します。「Sandbox domain」はユニークな値が必要です。
「Password」はメールアドレスでサインインする際のパスワードとして利用します。
[サンドボックスを用意する] をクリックします。

image2

3-3 「Provision Sandbox Success」画面が表示されます。
「サンドボックスの管理」をクリックします。

image10

3-4 「サンドボックス」の一覧画面が表示されます。
先ほど作成したサンドボックスをクリックして、サンドボックス環境に移動します。

image23

3-5 サンドボックスのサインイン画面が表示されます。
メールアドレスとパスワードを入力します。
メールアドレスは、開発者プログラムの画面で入力したメールアドレス、
パスワードは、サンドボックスのプロビジョニングの画面で入力したパスワードです。
[サインイン]をクリックします。

image13

3-6 アカウント保護のため、認証コード入力の画面が表示されます。

image1

3-7 メールアドレス宛に認証コードが記載されたメールが送信されています。

image18

3-8 認証コードをコピペして入力します。

image1

3-9 サンドボックス環境へのサインインが完了します。
[Review the terms of service] (利用規約を確認する)画面が表示されます。
内容を確認して、[I Agree] (同意する)をクリックします。

image27

3-10 サンドボックス環境のワークスペースが表示されます。
[Launch in Slack]をクリックしてワークスペースに移動します。

image24

3-11 Slack のワークスペースが表示されます。
以上でSlackの開発者プログラムでの「サンドボックスをプロビジョニング」の手順が完了しました。
サンドボックス内の Slack ワークスペースが利用できるようになりました。
次の手順に進みます。

image28

B) ワークフローオートメーション開発のクイックスタートガイド

Quickstart guide for developing automations
こちらの「クイックスタート」のステップ1〜ステップ5の手順を進めていきます。
先ほどまでに、サンドボックスのプロビジョニングが完了しましたので、
上記のステップ1〜ステップ5の手順を完了することで、ローカルの開発環境(PC)に

  • Slack CLI
  • Deno Slack SDK
  • VSCode Deno 拡張機能

がインストールされ、Slack ワークフローオートメーションのアプリ開発環境の準備が整い、サンプルのアプリをローカル開発モードで実行することができるようになります。

ステップ1: Slack CLIをインストールする

以降の手順を進めるために、サンドボックス上に開発用のワークスペースが用意されている必要があります。
ワークスペースが無い場合は、手順Aを実行してください。
準備ができたら、次は Slack CLI を開発環境となるPCにインストールします。各プラットフォームのインストールの手順は「クイックスタート」のページ(英語版)を参考にしてください。

ここではmacOSの環境でインストールを行います。

1-1 ターミナル ウィンドウから自動インストーラーを実行します。

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

上記のコマンドを実行することで、

  • Slack CLI
  • ワークフローアプリのランタイム環境である Deno
  • VSCode Deno 拡張機能 (VSCode がインストールされている場合)

がインストールされます。

ステップ2: Slack CLIを承認する

2-1 slack コマンドがインストールできたら、ターミナル上で slack login を実行します。

slack login

2-2 スラッシュコマンド形式の「認証チケット」と、チャレンジコードを入力するプロンプトが表示されます。

$ slack login

📋 Run the following slash command in any Slack channel or DM
   This will open a modal with user permissions for you to approve
   Once approved, a challenge code will be generated in Slack

/slackauthticket ABC123defABC123defABC123defABC123defXYZ

? Enter challenge code

2-3 /slackauthticket XXXX
の認証チケットの行をコピーして、サンドボックス環境のSlack ワークスペース内の任意のテキスト入力エリアにペーストし、Enterキーを押下します。

image21

2-4 モーダルがポップアップ表示されます。
Slack CLI に標記の権限を付与するように求められます。
モーダルの [Confirm] ボタンをクリックします。

image14

2-5 チャレンジ コードを含む新しいモーダルが表示されます。
チャレンジ コードをコピーします。

image17

2-6 コピーしたチャレンジ コードをターミナルに貼り付けてEnterキーを押下します。
認証完了のメッセージが表示されます。

? Enter challenge code xETwCnl1

🔑 You've successfully authenticated!
   Authorization data was saved to ~/.slack/credentials.json

💡 Get started by creating a new app with slack create my-app
   Explore the details of available commands with slack help

2-7 slack auth listターミナル ウィンドウで次のコマンドを実行して、Slack CLI が設定されていることを確認します。
承認したワークスペースのエントリが表示されます。表示されない場合は、新しい承認チケットを取得してslack login再試行してください。

% slack auth list

hello-world-sandbox2 (Team ID: E082Q29KUTZ)
User ID: U0831NHV2DB
Last Updated: 2024-12-03 19:02:46 +09:00
Authorization Level: Organization

これで、ワークフロー アプリの構築を開始する準備が整いました。次の手順では、サンプル アプリを開始します。

ステップ3: テンプレートからアプリを作成する

3-1 ターミナルで slack create コマンドを実行します。
このcreateコマンドはワークフロー アプリを作成する方法です。

slack create my-app --template https://github.com/slack-samples/deno-starter-template

📂 Created a new Slack project
   Cloning template https://github.com/slack-samples/deno-starter-template
   To path ~/slack/my-app

📺 Installed Slack CLI dependencies
   Detected a project using Deno
   Added the directory my-app/.slack

📦 Installed project dependencies
   Cached the latest with deno cache import_map.json

🧭 Explore the documentation to learn more
   Read the README.md or peruse the docs over at api.slack.com/automation
   Find available commands and usage info with slack help

📋 Follow the steps below to begin development
   Change into your project directory with cd my-app/
   Develop locally and see changes in real-time with slack run
   When you're ready to deploy for production use slack deploy

その後、次のステップに進みます。

ステップ4: ローカル開発モードでアプリを実行する

4-1 プロジェクトディレクトリに移動します。

% cd my-app

4-2 ターミナルで slack run コマンドを実行します。
「? Choose a local environment」と、ローカル環境を選択するよう求められます。
まだどのワークスペースにもインストールしていないので、
「Install to a new team」(新しいワークスペースにインストール)を選択し Enter キーを押下します。

% slack run
? Choose a local environment
❱ Install to a new team

4-3 「test-sandbox-20241204 E083HG1BK7C」と表示されます。
Enter キーを押下します。

% slack run
? Choose a local environment Install to a new team
? Install to a new team
❱ hello-world-sandbox2 E082Q29KUTZ

4-4 カーソルキーの上下で、

  • Hello World Sandbox T083TBXFEC8
  • All of them

を選択可能です。「Hello World Sandbox T083TBXFEC8」を選択し、Enter キーを押下します。

% slack run
? Choose a local environment Install to a new team
? Install to a new team hello-world-sandbox2 E082Q29KUTZ
🔔 If you leave this team, you can no longer manage the installed apps
   Installed apps will belong to the team if you leave the workspace
💡 Your app will be installed to the "hello-world-sandbox2" organization
   If you'd like, you can restrict access to only users in a particular workspace
? Choose a workspace to grant access:
❱ Hello World Sandbox T083TBXFEC8
  All of them

4-5 「Choose a trigger definition file:」と表示されます。

  • triggers/greeting_trigger.ts
  • Do not create a trigger

を選択可能です。「triggers/greeting_trigger.ts」を選択し、Enter キーを押下します。

% slack run
? Choose a local environment Install to a new team
? Install to a new team hello-world-sandbox2 E082Q29KUTZ
🔔 If you leave this team, you can no longer manage the installed apps
   Installed apps will belong to the team if you leave the workspace
💡 Your app will be installed to the "hello-world-sandbox2" organization
   If you'd like, you can restrict access to only users in a particular workspace
? Choose a workspace to grant access: Hello World Sandbox T083TBXFEC8
Updating local app install for "Hello World Sandbox"
⚡ Listing triggers installed to the app...
   There are no triggers installed for the app
⚡ Create a trigger
   Searching for trigger definition files under 'triggers/*'...
   Found 1 trigger definition file
? Choose a trigger definition file:
❱ triggers/greeting_trigger.ts
  Do not create a trigger

4-6 トリガーが作成され、画面にトリガーの URL が表示されます。
トリガーの URL をコピーします。
「Connected, awaiting events」と表示されたら、ローカル開発サーバーが起動して実行中です。

% slack run
? Choose a local environment Install to a new team
? Install to a new team hello-world-sandbox2 E082Q29KUTZ
🔔 If you leave this team, you can no longer manage the installed apps
   Installed apps will belong to the team if you leave the workspace
💡 Your app will be installed to the "hello-world-sandbox2" organization
   If you'd like, you can restrict access to only users in a particular workspace
? Choose a workspace to grant access: Hello World Sandbox T083TBXFEC8
Updating local app install for "Hello World Sandbox"
⚡ Listing triggers installed to the app...
   There are no triggers installed for the app
⚡ Create a trigger
   Searching for trigger definition files under 'triggers/*'...
   Found 1 trigger definition file
? Choose a trigger definition file: triggers/greeting_trigger.ts
⚡ Trigger successfully created!
   Send a greeting (local) Ft083PS8S5U1 (shortcut)
   Created: 2024-12-03 05:58:47 +09:00 (0 seconds ago)
   Collaborators:
     sd083ta50qe4_user @ U0831NHV2DB
   Can be found and used by:
     everyone in all workspaces in this org granted to this app
   https://slack.com/shortcuts/Ft083PS8S5U1/3c0c214b74c24b4e93aecd7b2a516f3d
✨ sd083ta50qe4_user of Hello World Sandbox
Connected, awaiting events

ステップ5: アプリを使用する

5-1 リンクトリガーを実行します。
先ほどコピーしたトリガーの URL を、ワークスペースの内のパブリックチャンネルにペーストし、Enterキーを押下します。

image6

5-2 「Start Workflow」ボタンが表示されます。ボタンをクリックしてワークフローを実行します。

image9

5-3 「Send message to channel」モーダルが表示されます。

image4

5-4 送信チャンネルを選択し、メッセージを入力します。
「Send message」ボタンをクリックします。

image22

5-5 指定したチャンネルにメッセージが表示されます。

image20

5-6 ローカル開発サーバーを停止する場合は、ターミナルで Ctrl+C を入力します。

Connected, awaiting events
^C

💌 We would love to know how things are going
   Survey your development experience with slack feedback --name platform-improvements

Cleaned up local app install for "Test Sandbox 20241204".

おわりに

本記事では、Slackの開発者サンドボックス環境の構築から、Slack CLIのインストール、そしてサンプルアプリの実行まで、一連の流れをご紹介しました。2024年3月に導入されたこの新機能は、Slack開発者にとって画期的な環境を提供しています。

特筆すべきは、無料で利用できる点と、Enterprise Grid環境を含む高度な機能へのアクセスが可能な点です。これにより、個人開発者からエンタープライズレベルの開発者まで、幅広いニーズに対応できるようになりました。

また、2024年9月にワークフローの従量課金が廃止されたことで、より自由度の高い開発が可能になりました。この変更により、開発者はコストを気にすることなく、アプリケーションの開発に専念できるようになりました。

サンドボックス環境は、アイデアの検証から本格的な開発まで、さまざまな用途に活用できます。特に、本番環境に影響を与えることなくテストができる点は、多くの開発者にとって大きなメリットとなるでしょう。

開発者の皆様には、ぜひこのサンドボックス環境を活用し、革新的なSlackアプリケーションの開発に挑戦していただきたいと思います。本記事が皆様のSlackアプリ開発の一助となれば幸いです。

参考資料

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.