Slackの背景を好きな画像にしてみる

1ヶ月2つ投稿とはなんだったのか。

こんにちは。かかお豆です。

いきなり有言実行しないスタイル。

テスト期間で更新できませんでした。ごめんなさい。

どうせ勉強しないのにね(´･ω･`)

はい。今回はSlackの背景を好きな画像に変更してみたのでその備忘録という事で。

まずは完成図をどうぞ

画像の切り抜きが下手くそですがこんな感じにできます。

では方法を見ていきましょう～

 \AppData\Local\slack\app3.2.0\resources\app.asar.unpacked\src\static/ssb-interop.js

を適当なエディターで開きます。appの後の数字はSlackのバージョンによって変わります。

開いたら

document.addEventListener('DOMContentLoaded', function() {
  var css = `\
    #messages_container {\
        background-image: url(data:image/png;base64,base64に変換したpngの文字列);\
        background-repeat: no-repeat;\
        background-position: bottom right;\
    }\
    .c-scrollbar__hider {\
        background-color: rgba(255,255,255,0) !important;\
    }\
    .c-message--hover {\
        background-color: rgba(240, 240, 240, 0.3) !important;\
    }\
    .c-message--focus {\
        background-color: rgba(240, 240, 240, 0.3) !important;\
    }\
    ts-message:hover {\
        background-color: rgba(240, 240, 240, 0.3) !important;\
    }`
  $("<style></style>").appendTo('head').html(css);
});

を追記します。もともと書かれてるコードを消さないように注意。

画像指定ですが、

 background-image: url(data:image/png;base64,base64に変換したpngの文字列);

に設定します。

①まず、Href Toolsにアクセスします。ここはpngをbase64に変換してくれるサイトです。
②中央付近の[Click to Upload]をクリックし、保存フォルダ内の好きな画像を選択してください。
③しばらくすると右の[Base 64 String]と[Base64 in HTML]に文字がワーって出てきます。
④[Base64 String]に表示されてる文字を適当にクリックしCtrll+Aで全選択、Ctrl+Cでコピーしましょう。あとは"base64に変換したpngの文字列"という文を消してそこに先程コピーしたBase64コードを貼り付けるだけです。
⑤Slackを起動し、反映されてるか確かめてください。既に起動してたらCtrl+Qで終了した後再起動を。

ちなみにbase64とは64進数を意味する言葉で全てのデータを64文字で表すってものです。16進数の進化版的な。詳しくはQiitaに載ってました。

qiita.com

今回はこれくらいで。これからもこんな感じでプログラミングやハードなどのIT系を載せていく予定ですので宜しくお願いします<(_　_)>