SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

翔泳社 新刊紹介(AD)

Slackアプリ開発の第一歩、スラッシュコマンド「/echo」を利用した簡単なアプリの作り方

 Slackには高機能なAPIが用意されているため、様々な機能を追加したアプリを開発できます。ですが、初めはまず簡単なSlackアプリを作ってみるのが理解の近道。今回は『動かして学ぶ!Slackアプリ開発入門』(翔泳社)からスラッシュコマンド(/echo)を利用したSlackアプリの作り方を紹介します。

本記事は『動かして学ぶ!Slackアプリ開発入門』の「Chapter4 Slackアプリのサーバサイドを実装しよう」から「05 スラッシュコマンドを利用したSlackアプリを作る」を抜粋したものです。掲載にあたり編集しています。

なお、記事本文にて言及のある「第2章05節」の内容は割愛しています。ぜひ書籍でご確認ください。

利用するSlackアプリと特徴

 スラッシュコマンド(/echo)を利用した簡単なSlackアプリを作ります。ここで利用するSlackアプリは第2章05節で作成した「test-app」です。

 /echoは入力した内容をそのまま返すスラッシュコマンドです。

Slackアプリを設定する

 Slackアプリにスラッシュコマンドを追加する場合はSlackアプリ管理画面に移動し、左メニューから「Slash Commands」をクリックして(図4.7①)「Create New Command」をクリックします②。

 Commandに「/echo」③、Request URLにngrokのURLを入力します(Boltの利用を前提とするので「https://xxxxxxxxxxxx.ngrok.io/slack/events」となります)④。Short Descriptionに「echo message」を入力し⑤、「Save」をクリックします⑥。はじめて追加した時は警告画面が出るので「reinstall your app」をクリックして⑦、Slackアプリの投稿先を指定し⑧、「許可する」をクリックします⑨。するとスラッシュコマンドが登録されます⑩。

図4.7:スラッシュコマンドの登録 図4.7:スラッシュコマンドの登録

図4.7:スラッシュコマンドの登録

サンプルコードを設置する

 リスト4.7のapp_command.jsを作成して、図4.6と同じ「test-sample」ディレクトリに保存します。

リスト4.7:test-sample/app_command.js
const { App } = require('@slack/bolt');

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
});

(async () => {
  // Webアプリの起動
  await app.start(3000);
  console.log('Bolt app is running!');
})();

app.command('/echo', async ({ command, ack, say }) => {
  await ack();
  await say(`echo: ${command.text}`);
});

Webアプリを起動する

 新規でターミナルを起動し、cdコマンドでWebアプリのあるディレクトリに移動し、本章04節の「Webアプリを起動する」で説明した通りSLACK_BOT_TOKENとSLACK_SIGNING_SECRETを指定したWebアプリの起動コマンドを実行します。

 
% SLACK_BOT_TOKEN=xoxb-xxxxxxxxxxxx-xxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxx SLACK_SIGNING_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx node app_command.js
Bolt app is running!

動作を確認する

 Slack上で/echoのコマンドに続けてテキストを入力すると、入力されたテキストがそのまま出力されます(図4.8)。動作を確認したらターミナルに戻り、[Ctrl]+[C]キーでWebアプリを終了してください。以降、動作確認後は同じようにしてください。

図4.8:スラッシュコマンド(/echo)の例
図4.8:スラッシュコマンド(/echo)の例

サンプルコードについて

 app.commandはスラッシュコマンドを管理する関数です。

 またackという関数は必須です。Slackはエラーやタイムアウトなどが起きるとRequest URLにデータを再送します。ackを呼び出すことでSlackへ「そのコマンドを受け取った」という情報を返し、再送をキャンセルします。

 ackへの応答は3秒以内に返さなければならないことに注意してください。3秒を超えるとSlackはタイムアウトと判断してしまいます。そのためできる限り同期的にハンドラの上部でackを呼び出すことをおすすめします。

動かして学ぶ!Slackアプリ開発入門

Amazon SEshop その他


動かして学ぶ!Slackアプリ開発入門

著者:伊藤康太、道内尊正、吉谷優介
発売日:2020年12月14日(月)
定価:2,800円+税

本書について

本書はSlack APIやBoltフレームワークを利用してオリジナル機能を追加したSlackアプリを開発する手法を丁寧に解説した書籍です。オリジナル機能を加えてより便利なコミュニケーションツールを開発できます。

 

この記事は参考になりましたか?

翔泳社 新刊紹介連載記事一覧

もっと読む

この記事の著者

伊藤 康太(イトウ コウタ)

ヤフー株式会社。チャットシステムなど内製基盤の開発・運用・マネジメン ト、Slackへの移行を担当。並行して組織横断的なNode.jsやフロントエンド のサポート・チューニングなどの支援を行う。第9代/10代黒帯(Webフロ ントエンド)。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

道内 尊正(ミチウチ タカマサ)

ヤフー株式会社。岡山大学大学院卒業後、フリーター、藤森工業株式会社を 経て、現職に至る。主に情報システム関連の企画に携わり、2020年よりIT戦 略関連に従事。兼務でSlackを担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

吉谷 優介(ヨシタニ ユウスケ)

ヤフー株式会社。大学卒業後、ベンチャー企業を経て、2016年にヤフーへ中 途入社。社内システムの企画、開発、運用やプロジェクトマネジメントを行 う。Slackでは各種運用フローの整備を実施。 現在は企画・開発チームリーダーを担当。Slackを含めたIT技術やデータの 利活用を行い、生産性向上を目指す...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

渡部 拓也(ワタナベ タクヤ)

翔泳社所属。翔泳社から刊行した本の紹介記事などを執筆しています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/13297 2020/12/21 07:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング