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

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

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

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

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

C90bac78c0fb61105cfd8239767f903d?s=128

hideki kinjyo
PRO

February 27, 2019
Tweet

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. さわってみた

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