LoginSignup
215
204

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-12

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

215
204
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
215
204