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系を載せていく予定ですので宜しくお願いします<(_　_)>

■

どうも皆さん始めまして。かかお豆と言います。

今回は初めてのブログ投稿ということでとりあえずブログを始めた経緯と理由を話していきたいと思います。

と、まあその前に簡単な自己紹介を

 簡単な自己紹介　

　・名前 : かかお豆

　・好きなの : 緑、FPS、プログラミング

　・なう : JK

こんなものですかね。

。。。あ、JKは「情報系高専生」[JyouhoukeiKousensei]ということです。

。。。。。。男子高専生です。はい。

うん。本題に入りましょう。

少し長くなりますができるだけ面白く書いたつもりですので許してください。

 1.ブログを開設した経緯

第一章 ブログを作った（早い）

・まずブログをしようと思ったのは中学2年生の時です。

はい。中2病だったんですね。お疲れ様です。

内容は別に載せれる内容なんですがブログ名がぁ。。。

　ブログ名↓

なんだよ「official」って。お前は有名人ですか。イキらないでください。

まあ、探したら有ると思いますが。恥ずかしいのはタイトルだけなので(多分)

そんなわけでこれが僕の最初のブログです。

飽きたので３週間で辞めました。

第二章 お金がﾎｽｨ...

・突然ですが僕はお金が欲しいです。自作pcを組みたいのです。

そこで思いついたのがアフィリエイト。ブログをやればええやん！

これ思いついたのが中3の冬。受験期ですね。バカですね。

勉強もあるし面倒だったのでこのときはアフィの本だけ買いました。

第三章 高専合格

・自己紹介でも触れましたが僕は高専生です。そして実は1年生です。

普通高校への一般入試組より早く高専に合格し暇な時間が増えました。

かかお豆.。oO(ブログやろうかなぁ。。。)

思っただけです、次。

第四章 異世界転生と異世界生活

・「は？」ってなった貴方。あなたの感性はとてつもなく正しいです。

異世界≒高専　の図式です。

僕が入学した高専は　

制服なし・髪型自由・寮生活・14:30までの学校

と、中学とは大きく様子が異なり、若かりしかかお豆少年にとっては最早異世界でした。

「あ、ここなら家と比べて自由時間も多いしブログできるかも。。。」

その予想はこうしてブログ書いてることからも当たってたことがわかります。

さて、そんな異世界生活3ヶ月目。すっかり高専に馴染んできたかかお豆少年は

あることに気が付きました。

「部活の先輩たちにブロガーが多い。。。だとｯ！！」

そう、所属している部活の先輩にブログをしてる方が何名か居たんです。

しかも同じ部活の同級生達も影響されてブログを始めようとしている。。。

これがなかなかブログ開設に踏み切れないでいる僕の背中を押しました。

こうしてブログ開設に至ったわけです。めでたしめでたし。

2.ブログを始めた本音

上でいろいろ経緯を説明したわけですが、チラッと触れたように、

" 私ﾊ、ｵ金ｶﾞ、欲ｼｲ "

自作pcを組みたいんです。そのためにはお金が必要。そこで、僕が求めた事は3つ。

 ・室内

・パソコン使う

・楽しい 

仕事を舐めてますね。

しかし僕は見つけました。これら全てに当てはまる物を。

そう、ブログです。これなら室内、パソコンと2つ揃ってます。

そして僕はブログを構成するプログラムである「HTML」と「CSS」の勉強をしようと思ってました。

いきなりページを全部プログラミングするのは難しいので、はてなブログのようなところで本文を書いて後で弄りたいところにだけHTMLやCSSを入力したら良いわけです。

なんて簡単なんだ！！と僕は思いました。

そして僕はプログラミングも文を書くことも好きなのでこれで

”楽しんで”ブログを書けます。

。。。。飽きない限りは

そんなわけで僕はブログを始めてしまったのでした。

・〆

最後に。今回ほぼ稼ぎ目的と言ってしまったようなものですが、

純粋にプログラムコードを書けるようになりたいという気持ちも同じくらい大きいです。

また、お金にするのはそんなに簡単では無いことは理解しているつもりです。

なので地道に頑張ろうと思っているのですが、

「ブログを書くのが大変、苦痛になってきた」

となるのが一番怖いです。

なので最初は慣れるまで「1ヶ月で2件」を目標にやっていきたいと思います。

慣れてきたら段階的に増やしていくつもりです。

また、最初はアフィの申請の問題もあるのでアフィリエイト広告はつけません。

ついてる広告は、はてなブログが勝手につけてるものです。

投稿間隔を短くする時やアフィを始める時は連絡します。

拙い文章でしたがここまで読んでくださってありがとうございました。

おしまい。