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
   

   View Slide

2. ࣗݾ঺հ
   • ίωώτגࣜձࣾ
   • αʔόʔαΠυΤϯδχΞ
   • ओʹCakePHPͳͲ
   

   View Slide

3. 今⽇の話！

   Slack！

   新機能が付きました！を
   します！！
   

   View Slide

4. Slack Block Kit.
   

   View Slide

5. 「投稿」のリッチ化

   &

   「インタラクション」の強化
   

   View Slide

6. 2018-05-23
   Publickey

   https://www.publickey1.jp/blog/18/slackbotslackblock_kit_builder.html
   

   View Slide

7. 2019-02-14
   ZDNet Japan

   https://japan.zdnet.com/article/35132700/
   

   View Slide

8. Before / After
   

   View Slide

9. • Interactive Message
   ࠓ·Ͱ
   • Attachments
   

   View Slide

10. ͜Ε͔Β
    • Blocks
    

    View Slide

11. ߴػೳͳUIΛ૊ΊΔʂ
    BEFORE AFTER
    

    View Slide

12. ߴػೳͳUIΛ૊ΊΔʂ
    BEFORE AFTER
    ϒϩοΫΩοτ
    

    View Slide

13. ※蛇⾜
    すでに、今までのAttachmentsやInteractive messageの

    リファレンスを⾒に⾏くと「legacy」「outmoded」と⾔われる始末
    

    View Slide

14. 何なん！

    Block kit！
    

    View Slide

15. ͬ͘͟Γ͍͏ͱ
    • ౤ߘϝοηʔδΛʮϒϩοΫʯͷΑ͏ʹ૊Έ߹
    ΘͤɺίϯϙʔωϯτΛϨΠΞ΢τͰ͖Δ
    • ༻ҙ͞Εͨίϯϙʔωϯτ͕ʮը૾ఴ෇ʯʮ۠
    ੾Γઢʯʮૢ࡞༻UIʯͳͲɺϦονͳײ͡
    • ͔͠΋ʮαϯϓϧϨΠΞ΢τʯ΍ʮUIϏϧ
    μʔʯΛ༻ҙ͍ͯ͠Δͱ͍͏ຊؾ౓߹͍
    

    View Slide

16. Block Kit Builder
    https://api.slack.com/tools/block-kit-builder
    

    View Slide

17. Block Kit Builder利⽤イメージ
    

    View Slide

18. テンプレート
    この辺りの「ありそうな
    ユースケース」をベース
    にして、カスタマイズし
    てみるのも
    

    View Slide

19. どう使うの！
    

    View Slide

20. blocksύϥϝʔλ͕૿͑ͯΔʂ
    • ౤ߘܥAPIʹύϥϝʔλ($block[])Λ͚ͬͭͯ͘౤͛Δ
    • ྫ͑͹ `chat.postMessage`
    • ʮblocksʹͲΜͳσʔλΛಥͬࠐΊ͹͍͍͔ʁʯ͸ɺ
    Block Kit BuilderΛ৮Γͳ͕Β؆୯ʹ೺ѲͰ͖Δ☺
    

    View Slide

21. ड͚औΓํ
    • جຊతʹʮInteractive Messageʯಉ༷
    • ༧ΊSlack AppͷઃఆͰࢦఆͨ͠ΤϯυϙΠϯτ΁POST
    • ҧ͍͸ `block_id` ͕ೖ͍ͬͯΔ఺
    • ʮͲͷϒϩοΫ͔ʯͷࣝผࢠ
    • ϝοηʔδΛލ͍ͰϢχʔΫͳ΋ͷΛࢦఆ

    orࣗಈ෇༩͞Εͨ΋ͷΛར༻͢Δ
    

    View Slide

22. ૹ৴৘ใͷαϯϓϧ
    

    View Slide

23. さわってみた
    

    View Slide

24. View Slide

25. ؚ·Ε͍ͯΔཁૉ
    SectionϒϩοΫ
    ContextϒϩοΫ

    (element2ͭ:image, plain_text )
    Section + AccessoryϒϩοΫ
    

    View Slide

26. やった！

    複雑なレイアウトだ
    

    View Slide

27. イメージ:

    「選択肢を作る」部分
    PHPの話をする場所が
    なかったので・・・！
    

    View Slide

28. ࠷ޙʹ
    • ʮActionsʯ(ӈΫϦοΫϝχϡʔతͳ)ҎདྷͷUI໘Ͱͷେ෯ͳվमͬΆ͍΋
    ͷɻSlackͷ৽ػೳ͸ۀ຿վળʹ௚͕݁ͪ͠ͳͷͰɺ༡ΜͰ͓͘ͱ໾ཱ͔ͭ
    ΋ɻ
    • গͳ͘ͱ΋ʮදࣔΛݟ΍͘͢͢Δʯ·Ͱ͸ͱͯ΋؆୯ɻ

    ΠϯλϥΫγϣϯ΋ɺࠓ·ͰSlackΞϓϦ࡞͍ͬͯͨͳΒ؆୯ͦ͏
    • https://medium.com/slack-developer-blog/doodle-bot-block-kit-slack-
    af35ad043ade ͕Πϝʔδ༙͘ͷͰҰݟͷՁ஋͋Γʂ
    • ࿅श͕ͯΒɺ౤ථΞϓϦΛ࡞ͬͯΈ͍ͯΔͷͰग़དྷͨΒίʔυࡽ͠·
    ͢ɾɾʂ
    

    View Slide

29. ͓෇͖߹͍͍͖ͨͩ

    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide

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ͷ࡞Γํࢀߟ
    

    View Slide