O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

[日本語] Slack Bot Workshop + Intro Block Kit

Slides deck used at Slack x IBM Watson Developer Event at Slack Tokyo office on March 11, 2019
ワークショップのスライド

  • Entre para ver os comentários

[日本語] Slack Bot Workshop + Intro Block Kit

  1. 1. プラットフォーム
  2. 2. あらゆるデータ、プロセスとアプリケーションを で一元化 ファイル 共有 人事申請 会議予約 営業管理 経費承認 インテ グレーション
  3. 3. 例 ● リクエスト・レスポンス ● メソッド ● chat.postMessage でメッセージを送信
  4. 4. chat.postMessage
  5. 5. 従来までは
  6. 6. { "channel": "CBADA55JP", "attachments": [...] }
  7. 7. { "mrkdwn_in": ["text"], "color": "#36a64f", "pretext": "Optional pre-text that appears above the attachment block", "author_name": "author_name", "author_link": "http://flickr.com/bobby/", "author_icon": "https://placeimg.com/16/16/people", "title": "title", "title_link": "https://api.slack.com/", "text": "Optional `text` that appears within the attachment", "fields": [ { "title": "A field's title", "value": "This field's value", "short": false }...], "thumb_url": "http://placekitten.com/g/200/200", "footer": "footer", "footer_icon": "https://example.com/default_application_icon.png", "ts": 123456789 }
  8. 8. 今後からは新しい方法で
  9. 9. ● 新しい フレームワーク ● レイアウト・ブロックとエレメント ● ビジュアル・ツール
  10. 10. [ { "type": "section", "text": { "type": "mrkdwn", "text": "Hello World!" } }, { "type": "divider" } ]
  11. 11. ボタンを追加 [ { "type": "section", "text": { "type": "mrkdwn", "text": "Hello World!" } }, { "type": "divider" } "accessory": { ... } ]
  12. 12. ボタンを追加 [ ...   "accessory": {  "type": "button",  "text": { "type": "plain_text", "text": "Farmhouse", "emoji": true }, "value": "click_me_123"  } ]
  13. 13. メッセージ・アナトミー
  14. 14. メッセージ・アナトミー
  15. 15. ケース・スタディ
  16. 16. 待ち時間に準備しましょう 開発用の ワークスペースを作成 してください。 すでに自由に使えるワークスペースを 持っている方はログインして待機してく ださい。
  17. 17. ● リクエスト・レスポンス ● メソッド ● chat.postMessage でメッセージを送 信
  18. 18. ● サブスクリプション・モデル ● リアルタイム ● イベントは リクエストで送信 ● スコープ設定 新規メンバーが加入する際にteam_join イベントが 発生
  19. 19. ● ● ● コネクションではないのでファイア ・ウォール上でも使用可能 メンテナンス・モードで、新しい機能を含まない ので注意。
  20. 20. User post a message, “Hi @help_bot” Sends payload to request URL chat.postMessage Post a message Hi here’s some info! Hi @help_bot app_mention event is triggered
  21. 21. ● ● 上で コードがかけ る ● ウェブ上でプログラムを実行も できる ● ビルトイン・コンソール と デバッ ガ ● で元のコードを自 分のプロジェクトとして編集可能
  22. 22. このコード・レポジトリをウェブ上 で「リミックス」してから始めよ う!
  23. 23. つのランダムな 単語からなる プロジェクトネーム (変更可)
  24. 24. サーバ ビューはここク リックして開く
  25. 25. から新規アプリを作成 次の場面から をクリック ダイアログ上で アプリ名をつけ、 ワークスペースを選択 ボタンをクリック 2 3 1 4 5 1 2 3 4 5
  26. 26. を追加 は1ユーザとして 扱われます 1 2
  27. 27. 3
  28. 28. とりあえずコードが 未完成でもインス トールしてみましょ う 1 2
  29. 29. とりあえず一度 インストール3
  30. 30. コピーして へペースト .env トークンが生成 されました 4
  31. 31. で始まる トークン 2 1
  32. 32. “Show” をクリック してからコピーし .env ヘ ペースト .env 1 2
  33. 33. SLACK_SIGNING_SECRET=ca6f92b20e…. SLACK_ACCESS_TOKEN=xoxb-2147483902-441228... で始まっていることを確認
  34. 34. 2 3 みなさんのサーバ サブスクリプション をオンにする を記入 1 https://puzzling-dinner.glitch.me/slack/events
  35. 35. を追加   までスクロー ル 1 2 3 4 をクリック
  36. 36. で指定された通りのパス が の場合はパスは
  37. 37. app_mention // Greeting any user mentions your bot, @greet_bot slackEvents.on('app_mention', (message) => { // When the message is a plain messages and contain 'hi' (case insensitive) if (!message.subtype && /hi/i.test(message.text))) { // Respond to the message back in the same channel slack.chat.postMessage( { channel: message.channel, text: `Hello <@${message.user}>! :tada:` } ) } }); 発火
  38. 38. const messageBlocks = [ { "type": "section", "text": { "text": "Hello, welcome to the *Workspace X*nHere's a list of info you are probably looking for:" } }, { "type": "section", "text": { "type": "mrkdwn", "text": "<https://example.com|*Cafeteria*> n Building 1nSouth-East cornernOpen: 8am - 5pm" }, "accessory": { "type": "image", "image_url": "https://upload.wikimedia.org/wikipedia/commons/3/3b/BHS-Cafeteria.jpg", "alt_text": "cafeteria" } }, // ... ] 改行は n
  39. 39. slack.chat.postMessage( { channel: message.channel, //text: `Hello <@${message.user}>! :wave:` , blocks: messageBlocks } ).catch(console.error);
  40. 40. 1. ボットをチャンネルに招待 /invite @help_bot 2. Hi @help_bot とメッセージを送信
  41. 41. if(/hi/i.test(message.text)) { slack.chat.postMessage(...); } Hi I need help Guide me Show me the floor map
  42. 42. User post a message Sends payload to request URL chat.postMessage Post message Hi here’s some info! Show me office directory! message.im event is triggered Extract user-sent message & pass Process & return
  43. 43. を連携させた を 開発する方法 ( 編)
  44. 44. お知らせ
  45. 45. 日本語の チュートリアル
  46. 46. 2019年4月24日 - 25日 ・ サンフランシスコ

×