Help us understand the problem. What is going on with this article?

TweetDeck 風 Slack Viewer を作ってみた

More than 1 year has passed since last update.

Slack を使っていると「少しチャンネルの一覧性が低いかな」と感じていました。
なので TweetDeck 的に複数のチャンネルを同時に見られるツールをプロトタイピングしてみました!
Screen Shot 2019-10-31 at 21.49.35.png
本体は GitHub/slackdeck-proto に置いてあります。

  • 2019/08/14追記: Windows版アプリ配布
  • 2019/08/10編集: 設定ファイルについての記載を変更
  • 2019/07/15追記: Mac版アプリ配布
  • 2019/06/26追記: 複数ワークスペース対応

どんなツール?

Slack の TweetDeck 的なビューワです。
MacOS, Windows版は こちら から入手できます。
Image from Gyazo

特徴

  • マルチカラム対応
  • ボタン操作でカラムを増減可能
  • 初回起動時のカラム数、チャンネル等を設定ファイルでカスタムできる
  • 複数ワークスペース対応
  • アプリ版の配布

前準備

以下を用意します。Electron については公式インストール手順を参考にしてください。

  • Slack アカウント
  • Electron(version 5.x 以上)

とりあえず実行

1. npm install

必要な諸々をインストールする

$ cd slackdeck-proto
$ npm install

2. 設定ファイルの準備

settings.json.samplesettings.json にリネームします。

3. 設定ファイルの書き換え

settings.json"url" 部分を自分の Slack workspace の URL に変更します。

settings.json
{
  "url": "https://your-slack.slack.com/", <= ここね
  "contents": [
    {
      "channel_id": "YOUR_CHANNEL_ID",
      "style": "channel-only",
      "width": "small-tab"
    },
    ..... 中略 ....
  ]
}

Slack アプリを使ってる人は、画面のここに出ているやつですね。
画像の場合は https://blue-private.slack.com になります。

Screen Shot 2019-06-23 at 20.17.40.png

4. 実行

ターミナルに移動して以下を実行すれば Electron アプリが立ち上がります!

$ cd slackdeck-proto
$ npm start

ファイル選択画面が開いたら、先ほど設定した settings.json を選んでください。これで設定が反映されます。

カスタマイズ

初回起動時に settings.json を読み込んでカラム数やCSS、チャンネルを規定しています。

  • url: 今回対象とする Slack workspace の URL です
  • contents: 以下の要素を含みます。この数を増減させると、初回起動時に開くカラム数が変化します

以下が contents 内の細かいパラメータです。

  • channel_id: カラムで開くチャンネルの ID です。以下の手法で取得できます。
    • Web 版 Slack を開き、該当チャンネルに移動。その際の URL の末尾が ID です
    • アプリ版 Slack を開き、チャンネルリストのチャンネル名を右クリック。 Copy Link で取得できる URL の末尾です
  • style: カラムに適用するCSSを規定します。取れる値は以下です
    • channel-only: 左側のチャンネルリストだけが表示されます
    • body-only: 真ん中のメイン画面だけが表示されます
    • sidebar-only: 右側の画面(Activity, Files など)だけが表示されます
  • width: カラムの幅を規定します。取れる値は以下です
    • small-tab: 細いです。channel-onlysidebar-only と合わせて使うのがオススメです
    • large-tab: 太いです。body-only と合わせて使うのがオススメです

よくある質問

  • Q: カラムを足したり消したりしたいよ
    • A: 各カラム上部の Add や Remove ボタンを押してください
  • Q: チャンネル移動ができないよ
    • A: ショートカット移動を推奨してます。Cmd + k がオススメです
  • Q: 文字がはみ出して読めないよ
    • A: フォントを小さくするのがオススメです。Cmd + - で大丈夫だと思います

最後に

Proto とあるようにまだプロトタイプです。なのでバグレポート、質問、ご意見、Pull Request 等じゃんじゃんいただけると励みになります。GitHub の issues や Qiita のコメントなど、どこでも嬉しいです!

blue0513
Emacs / Software Engineer at M3, Inc
https://blue0513.github.io/show_room/
m3dev
インターネット、最新IT技術を活用し日本・世界の医療を改善することを目指します
https://m3.recruitment.jp/engineer/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away