SlackでLINEみたいなスタンプを使いたいと言われたので

  • 202
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Slack Advent Calendar 2014 - Qiita の 14 日目の記事です。

準備が間に合わなくて、ソースコードの公開もなくただの紹介するだけの記事となってしまいました。すいません m(_ _)m

LINEからSlackへの移行

社内チャットツールをSlackに移行する前はLINEを使っていました。
移行は楽に済んだのですがLINEの「スタンプ使いたい症候群」に陥る人が多く発生してしまいました。

Slackの絵文字

Slackでは絵文字を追加することが出来ます。ですがこの絵文字の大きさは(当たり前ですが)22pxなので単体でメッセージを伝えるには小さくて見難いんです。

ss 2014-12-12 16.33.01.png

絵文字を大きくしてみる

ss 2014-12-12 16.42.04.png

絵文字の大きさはemoji-sizerにて定義されています

span.emoji-sizer {
  line-height: 18px;
  font-size: 22px;
}

このfont-sizeを124pxにしてあげれば...

span.emoji-sizer {
  line-height: 18px;
  font-size: 124px;
}

こうなります。

ss 2014-12-12 16.41.48.png

スタンプメニューの追加

ss 2014-12-12 16.54.31.png

メッセージ欄の絵文字メニューの隣にスタンプメニューを追加しました。

メニューを開くとこんな感じになります。

ss 2014-12-12 17.55.48.png

スタンプ選ぶと画像のURLがPOSTされます。

ss_2014-12-12_17_57_46.png

ss_2014-12-12_18_33_32.png

Web版Slackに埋め込む

Web版では、このようにお気に入りに埋め込むためのJavascriptを登録しています。これでいつでも絵文字の大きさ変更・スタンプボタンの埋め込みが出来るようになります。

こんな感じ

javascript:$("body").before($("<script/>").attr({src:"https://*****/*****.js"}));

ss 2014-12-12 18.07.00.png

Mac版Slackに埋め込む

Web版と同じようにJSを埋め込みます。

Slack.appのバージョン0.43までは、右クリックをすることで「Inspect Element」が表示され、インスペクターのコンソールで埋め込みが可能でした。

ss 2014-12-12 18.10.13.png

ですが最新のSlack.appは「Inspect Element」が表示されなくなっているので出来ません。

何か方法ないかなー...

iOSでスタンプ

iOS 8からのカスタムキーボードを使用します。

2014-12-12_18_06_21.png