Go to Qiita Advent Calendar 2024 Top
LoginSignup
81
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

チャットボットAdvent Calendar 2016

Day 7
@yukihirai0505(Yuki Hirai)in運営者ギルド

GASとSlackではじめるチャットボット〜初心者プログラマ向け〜

Last updated at Posted at 2016-12-06

はじめに

チャットボット Advent Calendar7日目の @yukihirai0505 です!
6日目は同僚の @kashira2339 が実際に僕もお世話になってるbotについて記事にしてます。笑

[GitHub API & Webhook + hubot]社内で実際にいい反響を得ているチャットボットの機能

ちなみに、自分は何気に初めてのAdvent Calendarです。笑

今回の記事の内容はチャットボットというよりは、チャットボットを通してプログラミングを学んでいけるような内容にします。
また、さらに言えばプログミングを学ぶというよりライブラリの使い方を学ぶ、みたいな内容になってますが悪しからず。笑

今回は手軽に実装できるGoogleAppsScriptでSlack向けのbotを作成していきます。
詳しい手順については下記の記事を参考にしてみてください。

=> 初心者がGASでSlack Botをつくってみた

Google Apps Scriptの起動

まずはSlackの設定とプログラムを記述するための準備をしていくためGoogleAppsScriptを起動します。

Moreの中にGoogle Apps Scriptがない場合は Connect more apps で script と検索して追加してあげましょう。

Screen Shot 2016-12-05 at 16.10.28.png

script で検索すると出てくるので Connect ボタンを押して追加できます。

Screen Shot 2016-12-05 at 16.10.39.png

追加すると、次からはちゃんと選択肢に表示されます。

Screen Shot 2016-12-05 at 16.10.58.png

Salckの設定

次にGASが起動できたらResourcesのlibrariesからSlackを追加してあげましょう。

SlackAppのLibrary Key => M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO

Screen Shot 2016-12-05 at 16.15.30.png

今回はライブラリのver 22を使用していきます。

Slackのアクセストークンは下記から取得しておきましょう。

追記: レガシーなトークンはこちらになった模様 => https://api.slack.com/custom-integrations/legacy-tokens

legacy tokens は今後使われなくなるため
Slack Appを作成して
パーミッションを設定し、アプリをインストールするとトークンが発行されるようになります
こちらを使用するようにしましょう

スクリーンショット 2019-03-08 12.21.08.png

いざプログラムの実行

やっと目的のプログラミングまでやってきました。

Slackの任意のチャンネルに投稿するプログラムを書いてみます。

Code.gas
var slackAccessToken = 'ここにアクセストークンを記載';
function test() {
  var slackApp = SlackApp.create(slackAccessToken);
  // 対象チャンネル
  var channelId = "#general";
  // 投稿するメッセージ
  var message = "I'm bot";
  var options = {
    // 投稿するユーザーの名前
    username: "hirai_yuki"
  }
  slackApp.postMessage(channelId, message, options);
}

これで作成した test を指定して実行ボタンを押せばSlackに投稿されます。

Screen Shot 2016-12-05 at 17.53.39.png

作成したプログラムの中身の説明

今回はGASからSlackに投稿するというプログラムでしたが、実際にはSlackのOutGoingを使用してSlackでの会話をキーに反応するようなボットも作成できるので
やってみたい方は試してみてください。

=> 初心者がGASでSlack Botをつくってみた

では、ここからはプログラミング学習の手順について記載していきます。

プログラミング学習の手順

今回は SlackAPP というライブラリを使用していますが、
こういったライブラリを使用する際はまずドキュメントを見るようにします。

=> SlackApp (version 22)

そして今回使用しているプログラムをもう一度みてみます。

Code.gas
var slackAccessToken = 'ここにアクセストークンを記載';
  var slackApp = SlackApp.create(slackAccessToken);
  // 対象チャンネル
  var channelId = "#general";
  // 投稿するメッセージ
  var message = "I'm bot";
  var options = {
    // 投稿するユーザーの名前
    username: "hirai_yuki"
  }
  slackApp.postMessage(channelId, message, options);

みてみると今回は

  • create
  • postMessage

というSlackAppのメソッドを使用しているのがわかります。

なのでこのcreateとpostMessageのドキュメントをそれぞれみてみましょう。

create

中身をみて見ると token を渡せば API Clientが返ってくるというのがわかりますね。

Screen Shot 2016-12-05 at 16.41.55.png

postMessage

こちらをみて見ると
チャンネルと投稿内容とオプションを指定すればSlackに投稿してくれるということがわかります。

Screen Shot 2016-12-05 at 16.42.54.png

さらにオプションに関しては

を参照してねとあります。

リンクをみて見ると
それぞれのArgumentに関してRequiredとOptionalの2種類に分かれています。

Required

Screen Shot 2016-12-05 at 16.45.15.png

Optional

Screen Shot 2016-12-05 at 16.45.06.png

postMessageの第三引数はここでいうOptionalの部分を渡してあげることができるということがわかりますね。

では実際に第三引数のオブジェクトに as_user というプロパティがあるので true で設定してみましょう。

Screen Shot 2016-12-05 at 16.53.48.png

Code.gas
var slackAccessToken = 'ここにアクセストークンを記載';
function test() {
  var slackApp = SlackApp.create(slackAccessToken);
  // 対象チャンネル
  var channelId = "#dev_company_system";
  // 投稿するメッセージ
  var message = "I'm bot";
  var options = {
    as_user: true
  };
  slackApp.postMessage(channelId, message, options);
}

そうすると今度はbotとしてではなくSlackのAPIトークンを作成したユーザーとして投稿されます。

Screen Shot 2016-12-05 at 16.49.55.png

このようにライブラリを見ればその中身が理解できてさらに応用もできるようになります。

もう少し深くみていくとこちらのコードも勉強になります。

このライブラリで使用されているコードの中身ですね。
こちらはCoffeeScriptで記述されてます。

Jsのコードはこちらですね。

今回はCoffeeの方を見てみましょう。

Code.coffee
/**
 * Create an Slack API Client 
 * @param {String} token API Token via https://api.slack.com/tokens
 * @return {SlackApp} return an Slack API Client 
 */
function create(token){
  return new SlackApp(null, null, null, null, {token : token});
}

となってます。
SlackApp というインスタンスを返してますね。

さらに postMessage をみてみます。

Code.coffee
        chatPostMessage : (channelId, text , option={})=>
            @fetch_("chat.postMessage", _.extend({channel : channelId, text : text}, option))

        postMessage : (channelId, text , option={})=>
            @chatPostMessage(channelId, text , option)

これをみて見ると postMessage ではなく chatPostMessage メソッドでも投稿できることがわかります。
というか本来は chatPostMessage があってエイリアスで postMessage が設定されてるのがわかります。

実際に試してみましょう。

Code.gas
var slackAccessToken = 'hogehoge';
function test() {
  var slackApp = SlackApp.create(slackAccessToken);
  // 対象チャンネル
  var channelId = "#dev_company_system";
  // 投稿するメッセージ
  var message = "I'm bot";
  var options = {
    icon_url: "https://avatars0.githubusercontent.com/u/7392701?v=3&s=400",
    username: 'sasaki_taka'
  };
  slackApp.chatPostMessage(channelId, message, options);
}

最後に

まずはドキュメントを読む、
そして余裕があればコードも読んで見るとプログラミングの理解にもつながっていきます。
こうしてドキュメントを読み進めてコードを理解することで、
例えば、Slackに参加している他のユーザーになりすますなんていうこともできます。
BOT という表示がつくので完全になりすますことはできませんが。笑

Code.gas
var slackAccessToken = 'hogehoge';
function test() {
  var slackApp = SlackApp.create(slackAccessToken);
  // 対象チャンネル
  var channelId = "#dev_company_system";
  // 投稿するメッセージ
  var message = "@sasaki_taka え。。。";
  var options = {
    // botのアイコン画像リンク
    icon_url: "https://avatars0.githubusercontent.com/u/7392701?v=3&s=400",
    // メンションしたとき @sasaki_taka が文字列ではなくリンクになるように設定
    link_names: 1,
    // botのユーザー名
    username: 'sasaki_taka'
  };
  slackApp.chatPostMessage(channelId, message, options);
}

Screen Shot 2016-12-05 at 17.25.32.png

こういう遊び心もボットの醍醐味ですよね。
プログラミングを通じて楽しい体験をつむことは、
プログラミングの上達にもつながっていくと思います。
ぜひ初心者の方もチャットボットを通じてプログラミングに触れてみてください^^

81
106
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
81
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?