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

16f3ea7644bc4ce1dfc7de932291af58?s=47 Yuki Hattori
November 12, 2019

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

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

16f3ea7644bc4ce1dfc7de932291af58?s=128

Yuki Hattori

November 12, 2019
Tweet

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