複数ワークスペース持ちが感涙したslackdeck！～うちの上司が喜んでます～

@blue0513 さんが作成した、slackをtweetdeckっぽい縦長の画面(カラム)で表示し、カラムを自由に追加できるWebアプリ、めちゃめちゃ便利で弊社内、slackを使っていそうな友達に紹介しまくっている

目次

0.動作環境

1.npmのインストール

2.Electronのインストール

3.Gitリポジトリをローカルにクローン

4.npm install

5.settings.jsonで設定

6.npm start

0.動作環境

npm バージョンは不問
Electron version 5.x 以上

あと僕はWindows端末で使ってます

1.npmのインストール

以下のURLからNode.jsをインストールすると、npmが一緒にインストールされる

https://nodejs.org/ja/download/

インストールができたか確認

npm -v

これでPowerShellでnpmが使えるようになる。ただ社内proxy経由しないとnpm installができないので、proxy設定する

npm -g config set proxy http://プロキシURL:ポート番号
npm -g config set https-proxy http://プロキシURL:ポート番号
npm -g config set registry http://registry.npmjs.org/

2.Electronのインストール

PowerShellで以下のコマンドを実行

npm install electron -g

3.Gitリポジトリをローカルにクローン

PowerShellで以下のコマンドを実行

cd .\Desktop\
git clone https://github.com/blue0513/slackdeck-proto.git

4.npm install

PowerShellで以下のコマンドを実行

cd .\slackdeck-proto\
npm install

5.settings.jsonで設定

使用するワークスペースなどをここで指定する。設定の意味は製作者の記事を参照ください。

以下はおススメ設定。

{
     "url": "メインのワークスペース",
     "other_urls": [

         "https://メインのワークスペース/",

         "https://サブのワークスペース1",

         "https://サブのワークスペース2"

     ],

    "contents": [

         {

             "channel": "general",

             "style": "full-view",

             "width": "large-tab"

         }

     ]

}

意味としては、初期起動時は複数ワークスペースを開けないため、

url　でデフォルトで開くワークスペースを指定

other_urls　に使用するすべてのワークスペースのURLを入れておく

style　製作者の解説にはないけどcssみると full-view というidがあってそれがちょうどいい。

cssでlarge-tabのwidthを30%→40％にしておくとより見やすい

.large-tab{
     display: inline-block;

     height: 100%;

     width: 40%; 

     min-width: 600px;

     border: solid;

     border-width: thin;

}

6.npm start

Webアプリを起動する。

npm start

デフォルト指定以外のワークスペースは、メニューバーの「WorkSpace」から選択すると開ける。

各カラム上部の「Add Column」を押すと、url に指定したワークスペースの#generalが、body-onlyモードで開きました

画面が変な風に固まったら「Reloadね。」

このアプリホンマに便利で弊社社員のQOL上げると思う。ありがとうありがとうございます。アプリ化も首を長くして待ってます。

ちなみに、純正Slackアプリに対してメモリ消費が3倍以上あるけど、メモリ積めば解決なのだ。問題は金で殴れなのだ。

。