SHOEISHA iD

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

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

翔泳社 新刊紹介(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

本記事は『動かして学ぶ!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アプリを開発する手法を丁寧に解説した書籍です。オリジナル機能を加えてより便利なコミュニケーションツールを開発できます。

 

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
翔泳社 新刊紹介連載記事一覧

もっと読む

この記事の著者

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

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

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

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

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

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

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

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

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

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

 翔泳社マーケティング課。MarkeZine、CodeZine、EnterpriseZine、Biz/Zine、ほかにて翔泳社の本の紹介記事や著者インタビュー、たまにそれ以外も執筆しています。

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/13297 2020/12/21 07:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング