jsx-slack のご紹介 & 実践 Slack アプリ開発 服部 雄輝 | Yuki Hattori | Speee, Inc. Tiny Spec Tokyo @ Slack Japan K.K. Tiny Spec Tokyo @ Slack Japan K.K.

服部 雄輝 Yuki Hattori Speee, Inc.  | Frontend, OSS  | yhatt  | @y_hatt ⾃⼰紹介 ⾃⼰紹介 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 2 2

Agenda 社内の Slack アプリ事例紹介 jsx-slack の紹介 (背景 / 特徴) Bolt + jsx-slack による実践開発例 3 3 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

社内の Slack アプリ事例 Custom Slack app at Speee, Inc. #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 4 4

Speee Library 社内図書管理システム (社員のみ利⽤可能) 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 5 5

Speee Library Slack app 貸出・予約・返却期限・レビューなどを通知 書籍の URL をプレビュー展開 (App unfurling) Amazon URL を貼ると在庫を探し出してくれる 在庫が無ければ、そのまま購⼊依頼を申請できる 6 6 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Slack アプリが 社内制度の運⽤を円滑にする 7 7 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

jsx-slack の紹介 https://github.com/speee/jsx-slack/ Introduce jsx-slack #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 8 8

Block Kit を使う Slack アプリの 開発体験 / Developer Experience を⾼める JavaScript ライブラリ 9 9 jsx-slack の紹介 jsx-slack の紹介 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 10 10

{ "blocks": [ { "type": "context", "elements": [ { "type": "mrkdwn", "text": "Book author 1, author 2", "verbatim": true } ] }, { "type": "section", "text": { "text": "**\n\nLorem, ipsum dolor sit amet consectetur...", "type": "mrkdwn", "verbatim": true }, "accessory": { "type": "image", "alt_text": "book cover", "image_url": "https://bit.ly/2Q8xdv4" } }, { "type": "section", "fields": [ { "type": "mrkdwn", "text": "*Category*\nX. Book category", 11 11 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

リッチな UI/UX 管理・運⽤が⼤変 Block Kit の JSON が⼤きくなりやすい メッセージの書式設定が埋もれる ( *foo* _bar_ ) 動的にメッセージを⽣成するとより埋もれる 12 12 jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Block Kit のブロックを Component とみなすことで React-like JSX でメッセージを記述 できるのでは？ 13 13 jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Book author 1, author 2

Book title

Lorem, ipsum dolor sit amet consectetur...

Category
X. Book category Review
{':star:'.repeat(4)} 4.2 (5 reviews) ☆ Favorite 5 {':star:'.repeat(5)} 4 {':star:'.repeat(4)} 3 {':star:'.repeat(3)} 2 {':star:'.repeat(2)} 1 {':star:'.repeat(1)} 14 14

      15 15 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Block Kit as component Layout block, Interactive components, etc... React ⾵の使⽤感 Higher-Order Component, Functional component, , Conditional rendering etc... HTML ⾵の書式設定 ( etc...) 16 16 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴

App Home & Modals コンテナコンポーネント JSX でアプリホーム画⾯を構築 コンテナコンポーネント JSX でモーダルを構築 HTML フォーム⾵の記述が可能 17 17 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

App Home スライムが あらわれた！

---

さくせん？ ガンガンいこうぜ いのちだいじに たたかう jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 18 18

Modals

何かお困りですか？

---

備品発注依頼 備品の紛失 その他の質問 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 19 19

REPL demo (Yet another Block Kit Builder) 20 20 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 https://speee-jsx-slack.netlify.com/ https://speee-jsx-slack.netlify.com/

Bolt + jsx-slack による 実践開発例 (App Home & Modals) #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 21 21

キーワードに沿った画像をランダム表⽰する Slack アプリ 22 22 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

開発の流れ 1. Bolt の導⼊ 2. App Home 有効化 3. Bolt + jsx-slack でコードを書く 23 23 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Bolt の導⼊ https://slack.dev/bolt/ja-jp/tutorial/getting-started ⼊⾨ガイドに沿って Bolt の設定を実施 ("イベントの設定" までで OK) Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 24 24

App Home 有効化 app_home_opened イベントも同時に Subscribe すると良い 25 25 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Bolt + jsx-slack でコードを書く // home.js const { jsxslack } = require("@speee-js/jsx-slack"); // ホームタブの Block Kit ビューを⽣成する関数 exports.home = ({ userId }) => jsxslack` さん、こんにちは! :cat: キーワードから画像を探す... `; 26 26 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 ※ jsx-slack は ※ jsx-slack は npm install @speee-js/jsx-slack npm install @speee-js/jsx-slack でインストールしてください でインストールしてください

// app.js const { home } = require("./home"); // ホームタブが開かれたらビューを更新 app.event("app_home_opened", async ({ context, event }) => { if (event.tab === "home") { app.client.views.publish({ token: context.botToken, hash: event.view && event.view.hash, user_id: event.user, // ⽣成したビューを渡す view: home({ userId: event.user }) }); } }); 27 27 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 28 28

検索モーダルの表⽰ // ボタンを押したらモーダルを開く app.action("search", ({ ack, body, context }) => { ack(); app.client.views.open({ token: context.botToken, trigger_id: body.trigger_id, view: jsxslack` Powered by Unsplash ` }); }); 29 29 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

画像表⽰⽤モーダルの追加 (マルチステップモーダル) // 指定されたキーワードの画像をランダムに表⽰ app.view("search-modal", ({ ack, view }) => { const keyword = view.state.values.keyword.keyword.value; ack({ response_action: "push", view: jsxslack` ` }); }); 30 30 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

実践 jsx-slack: jsx-slack + Bolt で Slack のモーダルを⾃在に操ろう https://tech.speee.jp/entry/2019/10/16/100022 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 31 31

@speee-js/jsx-slack で Block Kit が快適に! App Home & Modals Slack app の UX 向上に貢献 アプリで業務効率を上げていきましょう 32 32 おわりに おわりに #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo

Thank you! Repository: https://github.com/speee/jsx-slack Demo: https://speee-jsx-slack.netlify.com/ 33 33 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo