Slackのチャット欄からアップロードされた画像を独自チャットで表示する

Slackのチャット欄でアップロードされた画像をWebsocket利用している状態でどうやって表示するのだろうかと思って調べてみました。

Slackについては、SlackのWEB APIを試してみたを参考にしてください。
※今回は細かい説明は省きます

onmessageで取得したデータから画像を表示する

画像アップロードしたさい、クライアント側で取得擦ることが可能で、メッセージと同じように送られてきます。
onmessageで取得されるデータを見ると、「file」という項目があります。

Slackメッセージのアップロードがあるかの判定

onmessageで取得できた値には、「type」があります。
「type」については、今回はメッセージと同じなので、「message」という値が渡ってきます。

同じように、「upload」という項目があり、trueだとファイルがアップロードされた、falseだと何もありません。
また、「subtype」という項目には、「file_share」という値が設定されています。

アップロードされたデータの内容

本題ではありますが、画像のデータの取得方法です。
「file」の下には、アップロードされたデータの情報が色々あります。

file
 ∟ mimetype ・・・ MIMEタイプ
 ∟ name ・・・ ファイル名
 ∟ thumb_360 ・・・ slack.fileの画像パス
 ∟ size ・・・ ファイルサイズ
 ∟ title ・・・ ファイルのタイトル
 ∟ pretty_type ・・・ 拡張子
 ∟ initial_comment ・・・ コメントの有無

他にもありますが、一部抜粋です

自分は「thumb_360」の値を利用して画像を表示するようにしました。
thumb_360には、https://files.slack.com/files-tmb・・・というように画像ファイルパスが含まれています。
後は、imgタグに取得した値を設定すれば表示が可能です。

コメントについて

Slackで画像をアップロードするとコメントも一緒に送ることが可能です。
コメントについては、initial_commentのプロパティがあればコメントが設定されている状態です。

initial_comment
 ∟comment ・・・ コメントの内容

これらの情報を利用すれば、Slackで画像を送信(コメントも一緒に)することで、色々なアプリに応用ができそうです。

あわせて読みたい

コメントを残す

Translate »
%d人のブロガーが「いいね」をつけました。