LoginSignup
6

More than 3 years have passed since last update.

posted at

updated at

Organization

Slackの背景に画像を設定する

Slack、便利ですよね。いつも使っているからこそ自分好みにしたいですよね。
私はいつも、サイドバーの色を変な色に変えたりしています。
ですが、どうしても真っ白な背景だけは変えられず、すこし寂しい感じがします。

調べてみたところ背景に(むりやり)画像が設定できるようなので自己責任で設定していきたいと思います。

1.画像を用意する


切り抜きが雑ですが、画像を切り抜きました。ちなみにデフォルトで入っているプレビューのスマート投げ縄でサクッと切り抜けます。
スクリーンショット 2018-12-16 5.23.02.png

2.画像をBase64へ変換する

ターミナルで$ Base64 〇〇.pngとかで変換します。
画像サイズは1MB以下に抑えないとだめっぽいです。1の画像の用意で画像サイズを変える等してください。どうしても高画質がいいのであれば諦めてください。

3.いざSlackへ

とりあえずSlack.appのパッケージを表示しましょう。(こういう裏側みるとわくわくしますよね。)
その中に
Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
があるはずですのでお好みのエディタで開きます。
一番下へ下記のようにheadへstyleを入れてあげます。
(いろいろいじれそうなので、web版slackでidとかタグなどを見ながらやるといいかもしれない)

document.addEventListener('DOMContentLoaded', function() {
   var background = `
      #messages_container{
         background-image: url('data:image/png;base64,(先程Base64変換した画像)
     ~ 省略 ~
   `;
   $("<style></style>").appendTo('head').html(background);
}

書き込んだら保存をして、Slackを再起動しましょう。
すると、画像が反映されているはずです。

スクリーンショット 2018-12-16 5.08.30.png

まとめ

普段使っているアプリの中を覗いてみるのは結構面白かったです。
slackはまだまだいろいろいじれそうなので、なにかアイデアが浮かんだらなにかしてみようと思います。

おまけ

SlackにTwitterのタイムラインを表示させてみたが、当たり前だけど実用性がなさすぎて、ボツになった図
スクリーンショット 2018-12-16 5.46.50.png

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
What you can do with signing up
6