Slackの新しいやつ / Slack Block kit first impression

Block Kitと呼ばれる機能がリリースされていたので、チラ見してみました。

【追記】block_idについて「投稿をまたがって一意」としていましたが、「同じ投稿の中で一意」であれば問題なさそうです
【追記】具体的な話を会社のブログに投稿しました http://tech.connehito.com/entry/slack-block-kit-first-impression

Transcript

1. Slackが、
 より”リッチに”
 なりましたとさ。 ୈ135ճ PHPษڧձˏ౦ژ Hideki Kinjyo twitter: @o0h_ / github: o0h
2. ࣗݾ঺հ • ίωώτגࣜձࣾ • αʔόʔαΠυΤϯδχΞ • ओʹCakePHPͳͲ
3. 今⽇の話！
 Slack！
 新機能が付きました！を します！！
4. Slack Block Kit.
5. 「投稿」のリッチ化
 &
 「インタラクション」の強化
6. 2018-05-23 Publickey
 https://www.publickey1.jp/blog/18/slackbotslackblock_kit_builder.html
7. 2019-02-14 ZDNet Japan
 https://japan.zdnet.com/article/35132700/
8. Before / After
9. • Interactive Message ࠓ·Ͱ • Attachments
10. ͜Ε͔Β • Blocks
11. ߴػೳͳUIΛ૊ΊΔʂ BEFORE AFTER
12. ߴػೳͳUIΛ૊ΊΔʂ BEFORE AFTER ϒϩοΫΩοτ
13. ※蛇⾜ すでに、今までのAttachmentsやInteractive messageの
 リファレンスを⾒に⾏くと「legacy」「outmoded」と⾔われる始末
14. 何なん！
 Block kit！
15. ͬ͘͟Γ͍͏ͱ • ౤ߘϝοηʔδΛʮϒϩοΫʯͷΑ͏ʹ૊Έ߹ ΘͤɺίϯϙʔωϯτΛϨΠΞ΢τͰ͖Δ • ༻ҙ͞Εͨίϯϙʔωϯτ͕ʮը૾ఴ෇ʯʮ۠ ੾Γઢʯʮૢ࡞༻UIʯͳͲɺϦονͳײ͡ • ͔͠΋ʮαϯϓϧϨΠΞ΢τʯ΍ʮUIϏϧ μʔʯΛ༻ҙ͍ͯ͠Δͱ͍͏ຊؾ౓߹͍
16. Block Kit Builder https://api.slack.com/tools/block-kit-builder
17. Block Kit Builder利⽤イメージ
18. テンプレート この辺りの「ありそうな ユースケース」をベース にして、カスタマイズし てみるのも
19. どう使うの！
20. blocksύϥϝʔλ͕૿͑ͯΔʂ • ౤ߘܥAPIʹύϥϝʔλ($block[])Λ͚ͬͭͯ͘౤͛Δ • ྫ͑͹ `chat.postMessage` • ʮblocksʹͲΜͳσʔλΛಥͬࠐΊ͹͍͍͔ʁʯ͸ɺ Block Kit BuilderΛ৮Γͳ͕Β؆୯ʹ೺ѲͰ͖Δ☺
21. ड͚औΓํ • جຊతʹʮInteractive Messageʯಉ༷ • ༧ΊSlack AppͷઃఆͰࢦఆͨ͠ΤϯυϙΠϯτ΁POST • ҧ͍͸ `block_id` ͕ೖ͍ͬͯΔ఺ • ʮͲͷϒϩοΫ͔ʯͷࣝผࢠ • ϝοηʔδΛލ͍ͰϢχʔΫͳ΋ͷΛࢦఆ
 orࣗಈ෇༩͞Εͨ΋ͷΛར༻͢Δ
22. ૹ৴৘ใͷαϯϓϧ
23. さわってみた
25. ؚ·Ε͍ͯΔཁૉ SectionϒϩοΫ ContextϒϩοΫ
 (element2ͭ:image, plain_text ) Section + AccessoryϒϩοΫ
26. やった！
 複雑なレイアウトだ
27. イメージ:
 「選択肢を作る」部分 PHPの話をする場所が なかったので・・・！
28. ࠷ޙʹ • ʮActionsʯ(ӈΫϦοΫϝχϡʔతͳ)ҎདྷͷUI໘Ͱͷେ෯ͳվमͬΆ͍΋ ͷɻSlackͷ৽ػೳ͸ۀ຿վળʹ௚͕݁ͪ͠ͳͷͰɺ༡ΜͰ͓͘ͱ໾ཱ͔ͭ ΋ɻ • গͳ͘ͱ΋ʮදࣔΛݟ΍͘͢͢Δʯ·Ͱ͸ͱͯ΋؆୯ɻ
 ΠϯλϥΫγϣϯ΋ɺࠓ·ͰSlackΞϓϦ࡞͍ͬͯͨͳΒ؆୯ͦ͏ • https://medium.com/slack-developer-blog/doodle-bot-block-kit-slack- af35ad043ade ͕Πϝʔδ༙͘ͷͰҰݟͷՁ஋͋Γʂ • ࿅श͕ͯΒɺ౤ථΞϓϦΛ࡞ͬͯΈ͍ͯΔͷͰग़དྷͨΒίʔυࡽ͠· ͢ɾɾʂ
29. ͓෇͖߹͍͍͖ͨͩ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
30. ؔ࿈ࢿྉ • Introducing Block Kit | Slack
 https://api.slack.com/block-kit • Block Kit Builder | Slack
 https://api.slack.com/tools/block-kit-builder • Common ways to build Slack apps | Slack https:// api.slack.com/best-practices/blueprints • Block Kitؔ࿈Ͱ͸ͳ͍͚ͲɺSlack Appͷ࡞Γํࢀߟ