Tiny Spec Tokyo @ Slack Japan K.K. (Nov. 12, 2019) https://slackcommunity.com/events/details/slack-tokyo-presents-tiny-spec-tokyo/
jsx-slack のご紹介 &実践 Slack アプリ開発服部 雄輝 | Yuki Hattori | Speee, Inc.Tiny Spec Tokyo @ Slack Japan K.K.Tiny Spec Tokyo @ Slack Japan K.K.
View Slide
服部 雄輝Yuki HattoriSpeee, Inc. | Frontend, OSS | yhatt | @y_hatt⾃⼰紹介⾃⼰紹介#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 22
Agenda社内の Slack アプリ事例紹介jsx-slack の紹介 (背景 / 特徴)Bolt + jsx-slack による実践開発例33#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
社内の Slack アプリ事例Custom Slack app at Speee, Inc.#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 44
Speee Library社内図書管理システム(社員のみ利⽤可能)社内の Slack アプリ事例社内の Slack アプリ事例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 55
Speee Library Slack app貸出・予約・返却期限・レビューなどを通知書籍の URL をプレビュー展開 (App unfurling)Amazon URL を貼ると在庫を探し出してくれる在庫が無ければ、そのまま購⼊依頼を申請できる66社内の Slack アプリ事例社内の Slack アプリ事例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Slack アプリが 社内制度の運⽤を円滑にする77社内の Slack アプリ事例社内の Slack アプリ事例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
jsx-slack の紹介https://github.com/speee/jsx-slack/Introduce jsx-slack#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 88
Block Kit を使う Slack アプリの開発体験 / Developer Experience を⾼めるJavaScript ライブラリ99jsx-slack の紹介jsx-slack の紹介#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
jsx-slack の紹介jsx-slack の紹介 | 背景| 背景#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 1010
{"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",1111#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
リッチな UI/UX 管理・運⽤が⼤変Block Kit の JSON が⼤きくなりやすいメッセージの書式設定が埋もれる ( *foo* _bar_)動的にメッセージを⽣成するとより埋もれる1212jsx-slack の紹介jsx-slack の紹介 | 背景| 背景#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Block Kit のブロックを Component とみなすことでReact-like JSX でメッセージを記述 できるのでは？1313jsx-slack の紹介jsx-slack の紹介 | 背景| 背景#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Book author 1, author 2Book titleLorem, ipsum dolor sit amet consectetur...CategoryX. Book categoryReview{':star:'.repeat(4)} 4.2 (5 reviews)☆ Favorite5 {':star:'.repeat(5)}4 {':star:'.repeat(4)}3 {':star:'.repeat(3)}2 {':star:'.repeat(2)}1 {':star:'.repeat(1)}1414
1515#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Block Kit as componentLayout block, Interactive components, etc...React ⾵の使⽤感Higher-Order Component, Functional component,, Conditional rendering etc...HTML ⾵の書式設定 ( etc...)1616jsx-slack の紹介jsx-slack の紹介 | 特徴| 特徴
App Home & ModalsコンテナコンポーネントJSX でアプリホーム画⾯を構築コンテナコンポーネントJSX でモーダルを構築HTML フォーム⾵の記述が可能1717jsx-slack の紹介jsx-slack の紹介 | 特徴| 特徴#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
App Homeスライムが あらわれた！さくせん？ガンガンいこうぜいのちだいじにたたかう jsx-slack の紹介jsx-slack の紹介 | 特徴| 特徴1818
Modals何かお困りですか？備品発注依頼備品の紛失その他の質問jsx-slack の紹介jsx-slack の紹介 | 特徴| 特徴1919
REPL demo (Yet another Block Kit Builder)2020jsx-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 2121
キーワードに沿った画像をランダム表⽰する Slack アプリ2222Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
開発の流れ1. Bolt の導⼊2. App Home 有効化3. Bolt + jsx-slack でコードを書く2323Bolt + 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 2424
App Home 有効化app_home_openedイベントも同時に Subscribe すると良い2525Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Bolt + jsx-slack でコードを書く// home.jsconst { jsxslack } = require("@speee-js/jsx-slack");//ホームタブの Block Kitビューを⽣成する関数exports.home = ({ userId }) => jsxslack`さん、こんにちは! :cat:src="https://source.unsplash.com/random/256x256/?kitten#${Math.random()}"alt="kitten"/>キーワードから画像を探す...`;2626Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例※jsx-slack は※jsx-slack は npm install @speee-js/jsx-slacknpm install @speee-js/jsx-slackでインストールしてくださいでインストールしてください
// app.jsconst { 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 })});}});2727Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例2828
検索モーダルの表⽰//ボタンを押したらモーダルを開くapp.action("search", ({ ack, body, context }) => {ack();app.client.views.open({token: context.botToken,trigger_id: body.trigger_id,view: jsxslack`placeholder="英単語1語がオススメです" required />Powered by Unsplash`});});2929Bolt + 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`src="https://source.unsplash.com/random/?${keyword}#${Math.random()}"alt="Unsplash image"/>`});});3030Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
実践 jsx-slack: jsx-slack + Bolt でSlack のモーダルを⾃在に操ろうhttps://tech.speee.jp/entry/2019/10/16/100022Bolt + jsx-slack 実践開発例Bolt + jsx-slack 実践開発例#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo 3131
@speee-js/jsx-slackで Block Kit が快適に!App Home & Modals Slack app の UX 向上に貢献アプリで業務効率を上げていきましょう3232おわりにおわりに#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
Thank you!Repository: https://github.com/speee/jsx-slackDemo: https://speee-jsx-slack.netlify.com/3333#TinySpec2019 #spcTokyo#TinySpec2019 #spcTokyo
yhatt
marcustung
philipschwarz
azukiazusa1
kinocoboy2
fadis
atinfinity
yujisoftware
akkyie
clown0082
tanakahisateru
mugi_uno
syukai
skipperchong
orderedlist
sstephenson
lauravandoore
caitiem20
iamctodd
denniskardys
zenorocha
mraible
jcasabona
mclloyd
reverentgeek