TIL

Today I Learned. 知ったこと、学んだことを書いていく

Slackのメッセージの見栄えを良くする - Slack

Slack

メッセージの見栄えを良くするには Attachment を使う。

Slackのサイトに乗っていたサンプルを載せる

{
    "attachments": [
        {
            "fallback": "Required plain-text summary of the attachment.",
            "color": "#36a64f",
            "pretext": "Optional text that appears above the attachment block",
            "author_name": "Bobby Tables",
            "author_link": "http://flickr.com/bobby/",
            "author_icon": "http://flickr.com/icons/bobby.jpg",
            "title": "Slack API Documentation",
            "title_link": "https://api.slack.com/",
            "text": "Optional text that appears within the attachment",
            "fields": [
                {
                    "title": "Priority",
                    "value": "High",
                    "short": false
                }
            ],
            "image_url": "http://my-website.com/path/to/image.jpg",
            "thumb_url": "http://example.com/path/to/thumb.png",
            "footer": "Slack API",
            "footer_icon": "https://platform.slack-edge.com/img/default_application_icon.png",
            "ts": 123456789
        }
    ]
}

こんな感じで表示される。

f:id:tmg1998:20171015104831p:plain:w410

各パラメータの説明

fallback

必須項目。要約メッセージを指定する。通知やモバイル端末での表示に使われる。

{"fallback": "Required plain-text summary of the attachment."}

color

(ほぼ)必須項目。左のラインの色を設定する。Slackで用意されているgood、warning、dangerの３つを指定するか、カラーコード(#2E64FE)を指定する。

f:id:tmg1998:20171015110257p:plain:w200

colorを指定しなかった場合の表示

f:id:tmg1998:20171015110536p:plain:w200

pretext

オプション項目。アタッチメントブロック(左に線が引いてある部分)の上に表示する文字。

{"pretext": "アタッチメントブロックの上に表示"}

f:id:tmg1998:20171015111002p:plain:w300

authorパラメータ

authorパラメータを設定すると、著者につい手の情報をアタッチメント内の上部に小さく表示する。

  • author_name

    著者名のテキスト

  • author_link

    author_nameにリンクを付ける。ユーザーが存在する場合のみ有効になる。

  • author_icon

    author_nameの左側に16x16のアイコンを表示するためのURL。ユーザーが存在する場合のみ有効になる。

{
    "author_name": "Bobby Tables",
    "author_link": "http://flickr.com/bobby/",
    "author_icon": "http://flickr.com/icons/bobby.jpg"
}

f:id:tmg1998:20171015112040p:plain:w220

titleとtitle_link

  • title

    アタッチメントボックスの先頭に太字で表示される文字。

  • title_link

    有効なURLを指定すると、titleがハイパーリンクになる。

{
    "title": "Slack API Documentation",
    "title_link": "https://api.slack.com/"
}

f:id:tmg1998:20171015112840p:plain:w250

text

メインテキスト。700字以上か5行以上のテキストの場合には自動的に折りたたまれる。また、標準のマークアップが使える。

{"text": "1\n2\n3\n4\n5\n6\n7"}

f:id:tmg1998:20171015113631p:plain:w200

fields

  • title

    valueの上に太字で見出しとして表示される。マークアップを含むことはできず、エスケープ処理がされる(Macでは表示されたが、iPhoneのアプリでは絵文字が表示されなかった)。

  • value

    テキスト。標準のメッセージマークアップが使える。

  • short

    valueを横に並べられるときには横に並べる。true、falseのどちらか。

"fields":[
    {
        "title": "Title",
        "value": "value",
        "short": "true"
    },
    {
        "title": "Title2",
        "value": "value2",
        "short": "true"
    }
]

f:id:tmg1998:20171015115612p:plain:w330

image_url、thumb_url、footer、footer_icon、tsについてはいつかやる(多分やらない)


参考文献

Attaching content and links to messages | Slack