jsx-slack のご紹介&実践 Slack アプリ開発

Tiny Spec Tokyo @ Slack Japan K.K. (Nov. 12, 2019)
https://slackcommunity.com/events/details/slack-tokyo-presents-tiny-spec-tokyo/

Transcript

1. jsx-slack のご紹介 & 実践 Slack アプリ開発 服部 雄輝 | Yuki Hattori | Speee, Inc. Tiny Spec Tokyo @ Slack Japan K.K. Tiny Spec Tokyo @ Slack Japan K.K.
2. 服部 雄輝 Yuki Hattori Speee, Inc.  | Frontend, OSS  | yhatt  | @y_hatt ⾃⼰紹介 ⾃⼰紹介 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 2 2
3. Agenda 社内の Slack アプリ事例紹介 jsx-slack の紹介 (背景 / 特徴) Bolt + jsx-slack による実践開発例 3 3 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
4. 社内の Slack アプリ事例 Custom Slack app at Speee, Inc. #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 4 4
5. Speee Library 社内図書管理システム (社員のみ利⽤可能) 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 5 5
6. Speee Library Slack app 貸出・予約・返却期限・レビューなどを通知 書籍の URL をプレビュー展開 (App unfurling) Amazon URL を貼ると在庫を探し出してくれる 在庫が無ければ、そのまま購⼊依頼を申請できる 6 6 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
7. Slack アプリが 社内制度の運⽤を円滑にする 7 7 社内の Slack アプリ事例 社内の Slack アプリ事例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
8. jsx-slack の紹介 https://github.com/speee/jsx-slack/ Introduce jsx-slack #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 8 8
9. Block Kit を使う Slack アプリの 開発体験 / Developer Experience を⾼める JavaScript ライブラリ 9 9 jsx-slack の紹介 jsx-slack の紹介 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
10. jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 10 10
11. { "blocks": [ { "type": "context", "elements": [ { "type": "mrkdwn", "text": "Book author 1, author 2", "verbatim": true } ] }, { "type": "section", "text": { "text": "*<https://example.com/|Book title>*\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
12. リッチな UI/UX 管理・運⽤が⼤変 Block Kit の JSON が⼤きくなりやすい メッセージの書式設定が埋もれる ( *foo* _bar_ ) 動的にメッセージを⽣成するとより埋もれる 12 12 jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
13. Block Kit のブロックを Component とみなすことで React-like JSX でメッセージを記述 できるのでは？ 13 13 jsx-slack の紹介 jsx-slack の紹介 | 背景 | 背景 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
14. <Blocks> <Context>Book author 1, author 2</Context> <Section> <p> <strong> <a href="https://example.com/">Book title</a> </strong> </p> <p>Lorem, ipsum dolor sit amet consectetur...</p> <img alt="book cover" src="https://bit.ly/2Q8xdv4" /> </Section> <Section> <Field> <b>Category</b><br /> X. Book category </Field> <Field> <b>Review</b><br /> <a href="https://example.com/">{':star:'.repeat(4)} 4.2</a> (5 reviews) </Field> </Section> <Actions> <Button>☆ Favorite</Button> <Select placeholder="Quick rating..."> <Option value="5">5 {':star:'.repeat(5)}</Option> <Option value="4">4 {':star:'.repeat(4)}</Option> <Option value="3">3 {':star:'.repeat(3)}</Option> <Option value="2">2 {':star:'.repeat(2)}</Option> <Option value="1">1 {':star:'.repeat(1)}</Option> </Select> </Actions> </Blocks> 14 14
15.       15 15 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
16. Block Kit as component Layout block, Interactive components, etc... React ⾵の使⽤感 Higher-Order Component, Functional component, <Fragment> , Conditional rendering etc... HTML ⾵の書式設定 ( <b> <i> <s> etc...) 16 16 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴
17. App Home & Modals <Home> コンテナコンポーネント JSX でアプリホーム画⾯を構築 <Modal> コンテナコンポーネント JSX でモーダルを構築 HTML フォーム⾵の記述が可能 17 17 jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
18. App Home <Home> <img src="https://bit.ly/2NFgNZr" alt=" " /> <section><b> スライムが あらわれた！</b></section> <hr /> <section> さくせん？</section> <Actions> <RadioButtonGroup value="attack"> <RadioButton value="attack"> ガンガンいこうぜ </RadioButton> <RadioButton value="heal"> いのちだいじに </RadioButton> </RadioButtonGroup> <Button> たたかう </Button> </Actions> </Home> jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 18 18
19. Modals <Modal title=" リクエストを送信"> <section> <p> 何かお困りですか？</p> <img src="https://bit.ly/2Q6be7I" alt=" " /> </section> <hr /> <Select name="kind" label=" リクエスト種別" required> <Option value="order"> 備品発注依頼</Option> <Option value="lost"> 備品の紛失</Option> <Option value="question"> その他の質問</Option> </Select> <Input name="title" label=" 概要" required /> <Textarea name="comment" label=" 説明" /> <Input type="hidden" name="userId" value={user.id} /> <Input type="submit" value=" 送信" /> </Modal> jsx-slack の紹介 jsx-slack の紹介 | 特徴 | 特徴 19 19
20. 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/
21. Bolt + jsx-slack による 実践開発例 (App Home & Modals) #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 21 21
22. キーワードに沿った画像をランダム表⽰する Slack アプリ 22 22 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
23. 開発の流れ 1. Bolt の導⼊ 2. App Home 有効化 3. Bolt + jsx-slack でコードを書く 23 23 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
24. Bolt の導⼊ https://slack.dev/bolt/ja-jp/tutorial/getting-started ⼊⾨ガイドに沿って Bolt の設定を実施 ("イベントの設定" までで OK) Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo 24 24
25. App Home 有効化 app_home_opened イベントも同時に Subscribe すると良い 25 25 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
26. Bolt + jsx-slack でコードを書く // home.js const { jsxslack } = require("@speee-js/jsx-slack"); // ホームタブの Block Kit ビューを⽣成する関数 exports.home = ({ userId }) => jsxslack` <Home> <Section> <a href="@${userId}" /> さん、こんにちは! :cat: </Section> <Image src="https://source.unsplash.com/random/256x256/?kitten#${Math.random()}" alt="kitten" /> <Actions> <Button name="search"> キーワードから画像を探す...</Button> </Actions> </Home> `; 26 26 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 ※ jsx-slack は ※ jsx-slack は npm install @speee-js/jsx-slack npm install @speee-js/jsx-slack でインストールしてください でインストールしてください
27. // 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
28. Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 28 28
29. 検索モーダルの表⽰ // ボタンを押したらモーダルを開く app.action("search", ({ ack, body, context }) => { ack(); app.client.views.open({ token: context.botToken, trigger_id: body.trigger_id, view: jsxslack` <Modal callbackId="search-modal" title=" キーワードから画像を探す..."> <Input id="keyword" name="keyword" label=" キーワード" placeholder=" 英単語1 語がオススメです" required /> <Input type="submit" value=" 表⽰" /> <Context> Powered by <b><a href="https://unsplash.com/">Unsplash</a></b> </Context> </Modal> ` }); }); 29 29 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
30. 画像表⽰⽤モーダルの追加 (マルチステップモーダル) // 指定されたキーワードの画像をランダムに表⽰ app.view("search-modal", ({ ack, view }) => { const keyword = view.state.values.keyword.keyword.value; ack({ response_action: "push", view: jsxslack` <Modal title="Unsplash image" close=" 戻る"> <Image src="https://source.unsplash.com/random/?${keyword}#${Math.random()}" alt="Unsplash image" /> </Modal> ` }); }); 30 30 Bolt + jsx-slack 実践開発例 Bolt + jsx-slack 実践開発例 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
31. 実践 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
32. @speee-js/jsx-slack で Block Kit が快適に! App Home & Modals Slack app の UX 向上に貢献 アプリで業務効率を上げていきましょう 32 32 おわりに おわりに #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo
33. Thank you! Repository: https://github.com/speee/jsx-slack Demo: https://speee-jsx-slack.netlify.com/ 33 33 #TinySpec2019 #spcTokyo #TinySpec2019 #spcTokyo