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

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

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

Background

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

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

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

@BenJamski @technancy We have jumbomoji already、if you post a message with only emoji。Check they’re enabled in your preferences

— Slack (@SlackHQ) 2016年8月5日

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

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

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

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

@SlackHQ we have to go bigger。Can it be a setting? Max emoji size? We want full 128px if possible。:) pic.twitter.com/6q6FIn9iW7

— Alex3 (@Alex3omg) 2016年4月18日

@Alex3omg No plans to go any bigger just yet、but thanks for the feedback!

— Slack (@SlackHQ) 2016年4月18日

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

なぜなんだSlack!

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

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

SlackでLINEみたいなスタンプを使いたいと言われたので - Qiita
(の記事です。 準備が間に合わなくて、ソースコードの公開...

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

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

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

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

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

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

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

実際の動作

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

demo - stamp on slack

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

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

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

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

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

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

google-driveに保存した画像をWebページに表示(暫定処置) | ちょっとした「Webお役立ち情報」とかを主に書いてます。

2. Slack側の準備

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

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

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

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

Add custom emoji
Emoji are fun, but they're functional too! Use them to enhance your messages, react to activity, or with the Reacji channeler app to copy messages. Whatever you...

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

http://labo.i-section.net/shukusen-air/
画像を縮小する!
Webブラウザで簡単に写真やイラストの縮小ができます。回転や反転、白黒変換も可能です。無料でお使いいただけます。

2.2. Outgoing WebHooksの設定

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

SlackのOutgoing Webhooksを使って投稿に反応するbotを作る - Qiita
##概要 Slack apiの(を使って投稿を取得して、それに反応するbotを作る。 ##Outgoing Web...

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

  • 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(直接リンク)

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

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

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

Slack Web API
Learn how to build bot users, send notifications, and interact with workspaces using our APIs.

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

3.2. GASの用意

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

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

Slack BotをGASでいい感じで書くためのライブラリを作った - Qiita
全国のGoogle Apps Scriptファンの皆様こんにちは Apps Scriptガチ勢の大橋です。 今年でGoogle Apps Scriptアドベントカレンダーも3年目になりました。 年々人は減っている気がしますが、Bi...

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

icchi-h/Stamp_on_Slack
SlackにLINEのようなスタンプを表示させるためのGASコード. Contribute to icchi-h/Stamp_on_Slack development by creating an account on GitHub.

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

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

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

Slack上のメッセージをGoogleAppsScriptで受け取ってよしなに使う - Qiita
最近GoogleAppsScript(以下GAS)でスクリプトを作ることが多いのですが、実行結果をSlackに送るだけではなく、Slackからも値を送って処理を行いたいことが多いのでやり方を調べました。 ## TL;DR - GAS...

Let’s try

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

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

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

これの繰り返し。

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

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

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

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

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

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

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

コメント