Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jsx-slack: React ⾵ Block Kit

jsx-slack: React ⾵ Block Kit

Yuki Hattori

July 25, 2019
Tweet

More Decks by Yuki Hattori

Other Decks in Technology

Transcript

  1. jsx-slack: React ⾵ Block Kit Yuki Hattori | Speee, Inc

    Slack Dev Meetup Tokyo #1 2019-07-25 2019-07-25
  2. 5 5

  3. <Blocks> <Section>*@speee-js/jsx-slack*</Section> <Image src="https://bit.ly/2Y1FeHi" alt="jsx-slack" /> <Context> Maintained by <Image

    src="https://github.com/speee.png" alt="Speee" /> Speee, Inc. </Context> <Divider /> <Actions> <Select actionId="rating" placeholder="Rate it!"> <Option value="5">5 </Option> <Option value="4">4 </Option> <Option value="3">3 </Option> <Option value="2">2 </Option> <Option value="1">1 </Option> </Select> </Actions> </Blocks> 8 8
  4. 9 9

  5. <Blocks> <section> <blockquote> <strong> <a href="https://github.com/speee/jsx-slack">@speee-js/jsx-slack</a> </strong> <br /> <i>Build

    JSON for Slack Block Kit from JSX</i> </blockquote> <ul> <li> <strong>Block Kit as component</strong> <ul> <li>Building your blocks as component.</li> </ul> </li> <li> <strong>HTML-like formatting</strong> <ul> <li>Keep a readability by using well-known elements.</li> </ul> </li> </ul> <img src="https://github.com/speee.png" alt="Speee" /> </section> </Blocks> 13 13
  6. 例: Bolt + jsx-slack const { App } = require('@slack/bolt')

    const { jsxslack } = require('@speee-js/jsx-slack') const app = new App({ /* ...set tokens... */ }) app.message('hi', ({ message, say }) => { say({ blocks: jsxslack` <Blocks> <Section> Hello, <a href=${'@' + message.user} />! </Section> </Blocks> ` }) }) 17 17
  7. JSX transpiler 使⽤時 (Babel, TypeScript など) /** @jsx JSXSlack.h */

    import { App } from '@slack/bolt' import JSXSlack, { Blocks, Section } from '@speee-js/jsx-slack' app.message('hi', ({ message, say }) => { say({ blocks: JSXSlack( <Blocks> <Section> Hello, <a href={'@' + message.user} />! </Section> </Blocks> ) }) }) 18 18
  8. 応⽤編: カスタムブロックを定義する https://codesandbox.io/s/jsx-slack-labs-og7sv /** @jsx JSXSlack.h */ import JSXSlack, {

    Section, Divider, Fragment } from '@speee-js/jsx-slack' const Header: = ({ children }) => ( <Fragment> <Section> <strong>{children}</strong> </Section> <Divider /> </Fragment> ) <Blocks> <Header>jsx-slack labs (Custom blocks)</Header> <Throbber>Loading spinner</Throbber> <Progress max="20" value="5"> Completed 5 of 20 tasks </Progress> </Blocks> 19 19
  9. 参考資料 Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介 (弊社ブログでの解説記事) https://tech.speee.jp/entry/2019/04/23/094015 SlackのBlock

    Kitをjsxの記法で書ける jsx-slackを試してみた - Qiita https://qiita.com/selmertsx/items/f3dbd2e4274e8a7966a8 Anketのメッセージをjsx-slackを使ってBlock Kitベースへ変更しました - hatappi.blog https://blog.hatappi.me/entry/2019/03/10/110759 22 22