みずぴー日記

人間の再起動ボタンはハワイのビーチにある

複数列Slack

Slack のデスクトップアプリは、1つのチャンネルしか表示できないため一覧性が悪い。 そこで、複数のチャンネルを一度に表示できるアプリを作った。

f:id:mzp:20170430175855p:plain

📦ダウンロード

https://github.com/mzp/SlackStack

😫チャンネル切り替え作業の増加

Slack のデスクトップアプリは、チャンネルを1つしか表示できない。

そのため、参加するチャンネルに比例し、切り替え作業が増えていく。 さらに切り替え作業中に未読が増え、延々とチャンネルを切り替え続けることになる。

また同様の理由でメッセージを見落すことも増え、チャットのレスポンスも悪化していく。

📑Slack☆Stack

そこで一画面で複数チャンネルの内容を確認するためのアプリを作成した。 オフィスでは縦置きのモニタを使っているので、横方向にも縦方向にも重ねれるようになっている。

f:id:mzp:20170430181429p:plain

🔧開発の様子

ブラウザを並べる

f:id:mzp:20170430182842p:plain

Slackを開いたブラウザを複数並べて、複数のチャンネルを見れるようにした。 Magnet – Window manager for Macでウインドウを整列した上で、Slack: Hide sidebar when window is narrow | Userstyles.orgでチャンネルリストを非表示にした。

Slackアプリ

WebViewを貼りつけただけのアプリを作ったら、それなりに動くようになった。 Slackはすごい。

複数行化

そのまま横に並べて複数行化した。 また、読み込み時にカスタムCSSを読み込ませ、チャンネルリストを非表示にしている。

チャンネルの追加、削除に対応

f:id:mzp:20170430185017p:plain

メニューを実装し、チャンネルの追加・削除をできるようにした。

NSStackView

NSStackViewを使い、何個でも横に並べれるようにした。

行の追加

NSStackView自体をNSStackViewで重ねるようにし、縦方向にも重ねれるようにした。

fastlane

fastlane/gym at master · fastlane/fastlane · GitHubを使って、ビルド・署名するようにした。 LoveLiverのGymfileを参考にしている。

アイコン

StackのアイコンとYosemite風のアイコンが簡単に作れるツール作った - Qiitaを組合せて、アイコンを作った。

f:id:mzp:20170430190045p:plain

配布用zip

Github releases にアップロードするためにzipファイルを作成したら、なぜか署名が破損した。 Finderから圧縮するようにしたら破損しなくなった。