ブロックキット:より優れたコラボレーションUIの構築に対するSlackの貢献

公開: 2022-03-10
簡単なまとめ↬Slackは、チームとパートナーをオンラインにするために多くのことを行ってきました。 また、開発者が独自のカスタムアプリを作成できるようにするためにも多くのことが行われています。 ただし、最近まで、開発者はそれらのアプリのデザインをカスタマイズするためにできることによって制限されていました。 それは今日ブロックキットで変わります。

(これは後援された記事です。)ここ数年、企業の働き方に大きな変化がありました。 より多くの企業が場所に依存しないようになるにつれて、コラボレーションツールは、チームが集まり、作業を行うための標準的な方法になりました。

とはいえ、接続されたビジネスプロセスとツールを統合するコラボレーションアプリがあるからといって、そのエクスペリエンスが常に最適な効率や生産性につながるとは限りません。 なんで? まあ、時々不親切なUIが邪魔になります。

そのため、今日は、より優れたコラボレーションUIを構築するためのSlackの貢献であるBlockKitについて説明します。

カスタムSlackアプリ(アプリディレクトリまたは内部目的)を作成した方は、これが新しいデザインツールの紹介になります。 まだお持ちでない方は大丈夫です。 コラボレーションを改善する魅力的なワークスペースを作るために、これから学ぶべきいくつかの貴重な教訓があります。

開発者、Slackが取り組んでいることを知っていますか?

Slackは、2013年の発売以来、大きな進歩を遂げました。当初はメッセージングアプリとして始まったものが、今では強力なコラボレーションプラットフォームに花開いています。

これを書いている時点で:Slackには毎日1,000万人以上のアクティブユーザーがいます—そして彼らは世界中(正確には150か国以上)に住んでいます。

日本語を話す人のためのSlackチャンネルの例
これは、日本語を話す人のためのSlackチャンネルの例です。 (画像ソース:Slack)(大プレビュー)

Slackを使用しているのは個人だけではありません。3人以上の約585,000チームがプラットフォーム内でコラボレーションしています。 Fortune100企業のうち65社もたまたまSlackを利用しています。

Slackユーザー間のリアルタイムコラボレーションを垣間見る
Slackユーザー間のリアルタイムコラボレーションを垣間見る(画像ソース:Slack)(大プレビュー)

これはすべて、開発者がSlackワークスペースの機能を拡張する公開アプリを作成および公開するための扉を開いたSlackAPIのおかげです。

Slackアプリディレクトリのフロントページ
Slack AppDirectoryのフロントページ。 (画像ソース:Slack)(大プレビュー)

このように、Slackユーザーは最も一般的に使用されるビジネスツール間を行き来する必要がありません。 関連するプロセスはすべてSlack内から実行できます。

ただし、Slack App Directoryで利用できるものだけでは、組織が内部で必要としているものでは不十分な場合があります。 ビジネスツールとそこにあるものとの間のいくつかの隔たりを埋めることができるかもしれませんが、独自のカスタムSlackアプリを構築する理由を見つけることもできます。

Slackからブロックキットをご紹介します

Slackは、開発者がプラットフォーム内のコラボレーションを強化するために独自のアプリを作成できるようにすることに成功しましたが、開発者は、Slackを使用して優れたエクスペリエンスを作成する方法をどのように知っているのでしょうか。

最近まで、SlackのAPIとアプリディレクトリは限られた柔軟性と制御しか提供していませんでした。 プラットフォームのゼネラルマネージャーであるブライアンエリオットは次のように説明しました。

「今日、すべてのアプリは、豊富な情報を表示するための限られた方法を余儀なくされています。 Slackのさまざまなアプリをすべて見て、見て、使用した場合、それらの多くは、展開しようとしている機能に関係なく、同じレイアウトになります。 実際に必要なのは、人々が理解し、消化し、行動しやすいリッチなインタラクティブディスプレイを構築できる一連のコンポーネントです。」

そこで、Slackはブロックキットを開発しました。

ブロックキットは、開発者、デザイナー、フロントエンドビルダーがリッチでインタラクティブで直感的なUIを介してメッセージングアプリを表示できるようにするUIフレームワークです。 さらに、スタック可能なUI要素またはブロックのセットを提供することにより、Block Kitは、開発者にアプリのデザインとレイアウトに対するより多くの制御と柔軟性を提供します。

Block Kitの動作を確認したい場合は、次回のSlackセッション「Buildingwith Block Kit」に参加して、製品のライブデモを行い、アプリのデザインを簡単にカスタマイズできることを確認してください。

ブロックキットには、次の2つの主要コンポーネントが付属しています。

1.ブロックキットビルダー

このビルダーツールと、クライアント用のWebサイトやアプリを作成するために使用する他の多くのツールとの類似点に注意してください。

ブロックキットビルダーのデモ
ブロックキットビルダーのデモ(画像ソース:ブロックキット)(大プレビュー)

建物のコンポーネントは左側にあります。 含めるものをクリックするだけで、中央のアプリのプレビューに追加されるのを見ることができます。

さらにカスタマイズしたいですか? 右側のテキストエディタを確認してください。 Block Kitは、メッセージングアプリを設計するためのベストプラクティスに従う既成の要素を提供しますが、必要に応じてそれらを独自のものにすることができます。

2.ブロックキットテンプレート

Builderから独自にメッセージングインターフェイスを作成することはできますが、提供されているテンプレートも検討することをお勧めします。

ブロックキットがユーザーに提供するテンプレートの一部
これらは、BlockKitがユーザーに提供するテンプレートのほんの一部です。 (画像ソース:ブロックキット)(大プレビュー)

Slackチームは、Slackアプリの実際に役立つ事例をすでに見てきました。 言うまでもなく、彼らは、コラボレーションを改善するために組織がどのようなことを活用したいかを知っています。

そのため、次のような一般的なアクションがすでに作成されています。

  • 承認のリクエストを確認します。
  • 新しい通知に対してアクションを実行します。
  • ポーリングの実行と結果の監視。
  • 検索を行う。

Guruは、BlockKitを活用してSlackアプリを改善するツールの1つです。

GuruはSlack内にデータベース検索機能を提供します。 結果がすばやく取得され、Slackのフロントエンドでより明確に表示されるようになりました。

より優れたコラボレーションUIを構築するための鍵

Block Kitの今後の予定を確認したので、より生産的なコラボレーションにつながるアプリの作成にどのように役立つかについて説明する必要があります。

ブロック

私は最近、グーテンベルクの主題と、デザイナーがそれをどのように活用できるかについて話しました。 新しいWordPressエディターには明らかに欠陥がありますが、WordPressのチームが変更を加えた理由は疑問の余地がありません。

ブロックビルダーはウェブデザインの未来です。

「「

ブロックビルダーは、WebデザイナーやDIYユーザーに好まれるツールになる傾向があると思います。 ビルダーは視覚的なフロントエンドデザインを可能にし、多くの場合、豊富なカスタマイズオプションが含まれています。

ブロックキットに含まれている既製のブロックのいくつか
ブロックキットに含まれる既製のブロックの一部(画像ソース:ブロックキット)(大プレビュー)

しかし、Block Kitはそれ以上のことを行います。つまり、デザイナー開発者の両方がカスタムアプリを簡単に作成できます。

コード

ウェブサイトビルダーとブロックキットビルダーのようなものの主な違いは、コーディングの側面です。

ほとんどの場合、デザイナーはページビルダーを使用するため、コードを気にする必要はありません。 カスタムCSSクラスを追加したり、テキストにHTMLを追加したりする場合もありますが、通常はそれだけです。 ただし、開発者はそのようには機能しません。

Block Kitには、開発者が準備ができたら自分のSlackアプリにコピーアンドペーストできるJSONが事前に作成されたパネルが含まれています。 Slackは、開発者に独自のコードを作成させるのではなく、速度と設計のベストプラクティスを利用するコードを提供します。

Builderでリッチメッセージングエクスペリエンスを構築するときに取得するJSONのサンプル
Builderでリッチメッセージングエクスペリエンスを構築するときに取得するJSONのサンプル。 (画像ソース:ブロックキット)(大プレビュー)

これにより、開発者はアプリをゼロから構築するのではなく、カスタマイズに集中できます。

一貫性

Slackユーザーがプラットフォームに足を踏み入れると、何を期待できるかがわかります。 すべてのインターフェースは、ワークスペース間で同じです。

ただし、APIを使用して開発者がこれらのスペースと統合するアプリを構築できる場合、うまく機能しない要素を導入するリスクがあります。 その場合、インターフェイスの予測不可能性により、エンドユーザーに混乱と躊躇が生じる可能性があります。 レイアウトの選択が不適切な場合も、エクスペリエンスが損なわれる可能性があります。

Block Kitを使用すると、開発者は、試行およびテストされたスタック可能なUIコンポーネントを使用してアプリを構築できます。 すでに確立されているプラ​​ットフォーム内でエクスペリエンスをカスタマイズする場合、それをどこまで実行できるか、またはそれが機能するかどうかを知るのは難しい場合があります。 Slackは、これらの質問を方程式から外しました。

間隔

これは、従来のSlack交換がどのように見えるかです。

Slackユーザーが互いにメッセージをやり取りする例
Slackユーザーが互いにメッセージをやり取りする例(画像ソース:Slack)(大きなプレビュー)

それは、単一列の前後の交換である傾向があります。 そして、これはコラボレーションが単純なSlackチャネルに最適です。 タスクのステータスに関する従業員のメッセージ。 クライアントが不足しているアセットをアップロードします。 CEOは、会社について言及しているプレスリリースへのリンクを共有しています。 しかし、すべてのワークスペースがそれほど単純なわけではありません。

ブロックキットは、アプリの機能が占めるスペースを最大化および強化するのに役立ちます。 たとえば、Block Kitを使用すると、Optimizelyなどの企業は、読みやすくするために関連情報を2列形式で表示できます。

OptimizelyはBlockKitを使用して2列のフォーマットを作成します
OptimizelyはBlockKitを使用して2列のフォーマットを作成します。 (画像ソース:Optimizely)(大プレビュー)

これは確かに、チームのSlackアプリで関連する詳細を共有するためのより良い方法です。

豊富な相互作用

アプリを向上させるもう1つの方法は、統合をインタラクションが豊富なものに変えることです。

ブロックは、Slackコラボレーションで最も一般的に使用される要素を強化するために特別に開発されました。 例えば:

  • より良い編成のためにSectionalブロックを使用してください。
  • Textブロックを使用して、メッセージの表示方法をカスタマイズします。
  • 適切なサイズの画像ブロックを使用して、正しく表示されるかどうかの心配をなくすことができます。
  • コンテキストブロックを使用して、メッセージに関する署名記事または追加のコンテキスト(作成者、コメント、変更など)を表示します
  • Dividerブロックを使用して、アプリの外観を改善します。
  • メニュー選択、ボタン選択、カレンダーの日付などのアクションブロックを使用して、アプリに優れた機能を導入し、より直感的に表示できるようにします。
  • レイアウトをすっきりさせるには、 2セクションのブロックを使用します。

Doodleには、BlockKitを使用して豊富なインタラクションで実行できることの美しい例があります。

ご覧のとおり、ユーザーは、サードパーティのカレンダーを使用しているかのように、ユーザーが協力して会議を効果的にスケジュールできます。 唯一の違いは、Slackワークスペース内ですべてを実行できるようになったことです。

まとめ

コラボレーションは組織の成功に欠かせない要素であり、3人のチームであるか300人のチームであるかは関係ありません。しかし、共同作業と生産的なコラボレーションには大きな違いがあります。

SlackのAPIのおかげで、開発者は関連するプロセスとツールをプラットフォームに統合するための素晴らしい方法をいくつか作成しました。 また、Block Kitのおかげで、要素の設計が不十分な場合でも、これらの外部からの貢献によってエクスペリエンスが中断されることはありません。

直感的なブロック構築機能、開発者向けのコーディングオプションなどを備えたブロックキットは、開発者がSlackプラットフォームにより豊かなエクスペリエンスとより良いコラボレーションをもたらすのに役立ちます。

最後に言及すること:

Slackのフロンティアカンファレンスが間もなく開催されます。 4月24日と25日にサンフランシスコで開催されます。参加する予定の場合、デベロッパートラックには、ワークショップ、新機能のデモ、チュートリアル、および1日を含むブロックキットに関する1日のトレーニングが含まれることに注意してください。オンワンメンタリング。 ブロックキットを考えているなら、これは見逃せないチャンスです。