Slackの絵文字をLINEのスタンプみたいに大きく使えるようにしてみた

この記事は『Slack Advent Calendar 2016』21日目の記事です。

この記事はAdvent Calendar用に、以前実装したSlack上でスタンプを表示するシステムを改良したものです。変更点についてはこちら

Background

少し前から面白い記事に触発されてプライベートでもSlackを使い始めました。

確かに外部サービスとの連携が便利ですが、1ヶ月ほど使っているとやはりLINEのようなスタンプが使えればと思ってしまいます。

一応Slackにも絵文字機能があり自分で作れたりも出来るのですが、何せ小さい。

公式曰くJumbomojiという機能によって絵文字単体で投稿すると通常よりも大きくなるそうですが…

ジャンボにしては小さい…

例えばこのような元画像が400px程度のスタンプ用画像をカスタム絵文字にしようもんなら、ほぼほぼ見えません。
     SS 2016-09-03 11.16.33

やはりLINEで慣れてしまうともう少し大きいサイズがしっくりきます。皆同じことを思うようでTwitter上では「もっとサイズを大きく出来ないの?」との質問が多数。

それに対して公式の回答は「絵文字サイズを大きくする予定はない」

なぜなんだSlack!

公式がこう言っている以上自分たちで解決するしか無い。

調べてみるといくつか方法があるようでした。こちらの記事ではブラウザ拡張機能を使ったりSlackのデスクトップアプリを拡張して絵文字を拡大表示させています。

しかし、これらのやり方だと設定した以外の端末からは大きくなりません. やはりSlackが使える全ての端末から、PCやスマホ関係なく同じようにスタンプを送信・表示できることが望ましい。

SlackでLINEみたいにスタンプを表示させるために

Slackでは画像のリンクが投稿されると、その画像を展開して表示してくれます。今回はその機能を利用してスタンプを表示できるようにします。

そこで、こんなシステムを考えてみました。

SoS_structure

具体的には, Outgoing WegHooksでカスタム絵文字の投稿を検出し、それに対応するスタンプの画像URLがあるならそれを投稿する処理をGASで実装しました。

GASを使って外部から処理しているため、プラットフォームに関係なくSlackが利用できる全ての端末でシステムを利用することが出来ます。

またカスタム絵文字とそれに対応する画像URL(直接リンク)の管理はGoogleスプレッドシートで行います。そのためスプレッドシートを共有すればチームみんなでスタンプを増やすことが可能。

実際の動作

このシステムを使ってスタンプを表示するとこんな感じになります。

stamp_on_slack_demo

スタンプシステムの構築方法

これからシステムの作り方を説明します。

1. スタンプの準備と画像URLの取得

まずスタンプとして使いたい画像を用意する。

サイズが大きすぎるとSlackの容量を圧迫したりスタンプが大きく表示されすぎてしまうため、240~320px程度にリサイズすることをオススメします.

無料のオンラインストレージを利用すると手軽に画像の直接リンクを取得できます。Dropboxだとファイルの右クリックから. Google Driveを利用する場合は以下のサイトが参考になります.

2. Slack側の準備

Slack側ではカスタム絵文字の登録とGASにスタンプの通知を知らせるWebHookの設定を行う.

2.1. カスタム絵文字の登録

カスタム絵文字の登録せずともシステムは動作しますが、スタンプ投稿時に小さいながら確認できるので便利です。

SS 2016-09-03 6.24.26_small

1.1で用意した画像をカスタム絵文字として登録する場合は手順が本家のサイトに載っています.

絵文字として登録するには画像を128px以下にする必要あるので(2016/12/21時点) 以下のようなサービスを利用して画像を縮小します。

2.2. Outgoing WebHooksの設定

カスタム絵文字を投稿した際のトリガーとなるOutgoing WebHooksとあなたのSlackチームを統合。まだ統合していない方は以下のサイトがわかりやすいです。

統合したら以下のように設定。

SS 2016-09-03 6.50.52_small

  • Channel: あなたがこのシステムを利用したいチャンネル(基本はAnyでOK)
  • Trigger Words: `:`
  • URL: 3.2で作成するGASの公開アドレスを貼り付ける
  • Token: デフォルトで値が入っているがこれは使わない

正確に言うと:コロンが含まれている投稿全てに対してPOSTを投げている。その文字列が絵文字がどうかの判定はGAS側のプログラムで行ってます。

3. GAS側の準備

Google Drive上の好きな場所に適当なディレクトリを作成.

3.1. Googleスプレッドシートの用意

先ほどのディレクトリ内にスプレッドシートを作成。ファイル名は何でもOK。

シート1に対して以下のように入力。

  • A列: 2.1で登録したEmoji名
  • B列: カスタム絵文字に対応する1.2で取得したスタンプ画像のURL(直接リンク)

SS 2016-09-03 7.10.27_small

次に、シート2を作成し以下のように入力.

  • A列: システムを利用するスラックユーザー名
  • B列: ユーザのtoken

tokenはslackにログインした状態で以下のURLにアクセスすると生成可能。

次にこのスプレッドシートを公開する。公開したURLはGASのプログラム内で使うためコピーしておく。

SS 2016-09-03 7.24.22_small

3.2. GASの用意

先ほどのディレクトリ内にGASファイルを作成。これもファイル名は何でもOK。

以下のサイトに従って、GASへのSlackライブラリの導入。

以下のリポジトリのコードをGASファイルに貼り付け。

コード内のtokenとsheet_urlに先ほど取得して値をいれる. こんな感じになっているはず。

SS 2016-09-03 7.53.04_small

最後に、GASでPOSTを受け取るためのリンクを取得して、2.2で設定したOutgoing WebHoolsのURLにセット。

その流れは以下のサイトで詳しく解説されています。

Let’s try

あとはSlackでスタンプを楽しむ!

システム構築後にスタンプを追加していくには

  • 1。(カスタム絵文字の登録と画像の直接リンクの取得)
  • 3.1で作成したスプレッドシートの追記

これの繰り返し。

付録. 同じ画像リンクは連続で使えない問題への対処

Slackの仕様上、1時間以内に同じ画像URLを連続で投稿しても1回目以降は展開して表示されない。

連続失敗例_small

スタンプの使い方を考えるとこれはまずい。

そこで、画像URLにUnixTimeをGETのパラメータとして追記して対処しました。こうすることで一応は異なるURLとして認識している。

連続成功例_small

追記. スタンプがBOTととして投稿される問題を改善
(反映済み)

以前のものではtokenを1つしか利用していなかったため、スタンプがBOTとして投稿されていました。そのため本システムによってスタンプが投稿されると、新規メッセージとして扱われ通知が煩わしい問題がありました。

そこで、ユーザ毎のtokenもスプレッドシートで管理・利用することで、ユーザーの投稿になるようにしました。

スポンサーリンク
スポンサーリンク