【okadash】Electron で Mac / Win 向けの爆捗りダッシュボードツールを作り、アップデートした話

## はじめに
### okadash is ナニ？？
- **複数のサイトをひとつの画面にまとめるためのツール** です！
    - コア・コンセプトとして **使いやすい && カスタマイズ性が高い** ツールを目指しています 💪

### どう便利なの？
まずひとつの例として、自分が実際に普段仕事中に利用している使い方をご紹介します。
（👇 これが `okadash` の画面のスクリーンショットです。画像クリックで拡大していただくと見やすいかも）

---

|![スクリーンショット 2019-09-28 18.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9a165b8c-100b-0ca8-3e1a-dbb0ed85e8d9.png)|
|:-:|

ひとつの画面内に、 Slack, Trello, [Kibela](https://kibe.la/ja), スケジュール, 天気やカレンダーを表示しています。
基本的にはこのダッシュボードを**ひとつのディスプレイで常に全画面表示**にしておきながら、
別のディスプレイでIDEやブラウザを開いて作業をしています。

このダッシュボードのキモは、**Slack 上のコミュニケーションで**なんらかのタスクが生じたときに

- ToDo として Trello にほぼ**ノータイムで起票**できる
- スケジューラでその日の予定を即確認し、タスクに割く**タイムバジェットを瞬時にざっくり見積もれる**

ところです。 Kibela は常時開いておき、**日報や作業ログを書きなぐる**のに使っています。

---

…といった感じのダッシュボードを自由に作れるというツールです。

以下ではより具体的に、このツールを使用してできること、
特に**カスタマイズ性の高さ**にフォーカスして機能の説明をしていきます！


### 用語の定義
と、その前にまず本ツールに固有の用語について、定義を記載しておきます。
いずれも記事投稿時点のもので、**今後変化する可能性**があります（以下すべての説明についても同様）
（将来的には最新情報は Github の README を整備し、そこに集約する予定です）

| 用語 | 定義 |
|:-----------|:------------|
| ボード | 複数のサイトを表示しているウィンドウ全体のこと |
| パネル | 各サイトを表示しているひとつの画面のこと | 


|![panel_term.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/4493541c-c10b-b7bd-cf73-e2eed99bac6d.png)|
|:-:|

👆 これがひとつのボードで、枠で囲まれている各箇所がパネルです。
画像に記載の通り、左側の大きなパネルを`Main`パネル、右上の横長のパネルを`Sub`パネル、
右下部分の**複数のパネル群**を`Option`パネルという名称で定義しています。

### ※ 動作環境
本ツールは Mac, Windows のいずれでも動作しますが、基本的に**Macでのみ**動作確認をしています。
以下に登場するショートカットキーなども、すべて**Mac上での操作を前提**とします。

---

リポジトリは以下。実行体をまとめた`zip`もあります。

- https://github.com/konoyono/okadash
- [okadash-1.6.1-win.zip](https://github.com/konoyono/okadash/releases/download/1.6.1/okadash-1.6.1-win.zip)
- [okadash-1.6.1-mac.zip](https://github.com/konoyono/okadash/releases/download/1.6.1/okadash-1.6.1-mac.zip)

ちなみに名前の由来ですが、岡田がつくったダッシュボードツールだから `okadash`。わかりやすい :tada:

## はじめかた
さあ、**実際につかってみましょうよ**！！`zip`に含まれるツールを起動してください！
初回起動時には以下のようなウェルカムページが表示されます（okadashへようこそ！）

|![スクリーンショット 2019-09-28 13.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/b6ce502c-14df-bbf0-4fc3-611f1938945f.png)|
|:-:|

まずは普段使用している Slack のワークスペース名を入力し、 `Let's okadash!`をクリック！
すると以下のように、初期設定状態のボードが表示されるかと思います。

![initialize_image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/15275be4-817b-4127-e3c3-e7d3448fa7c2.gif)

初回のみログイン処理が必要になるため、Slack と Twitter にそれぞれログインしてご利用ください。
**導入手順は That's All です！** ここから、あなた専用のボードにカスタマイズしていきましょう！！
（ちなみに`Option`パネル内の小さい Slack は、 `Command + K`でチャンネル切替してください）

## ボード表示に関する機能
まずはボードの操作や表示方法に関する、基本的な機能の説明からはじめます。
**表示しているボードのなかで**、こんなことができますよ！というところの説明をしていきますね。

#### 1. 各パネルの幅と高さをドラッグで変更可能
- 画面更新時や次回起動時も、変更したパネルサイズの情報は保持されます。

![resize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/f0ebe2ec-c884-fe77-6e53-948cc057c806.gif)


#### 2. 最大化表示モード
- 各パネルの左上部にある矢印アイコンをクリックすると、そのパネルを最大化表示します。 
    - 最大化表示したパネルは`Esc`キーでCloseします。 
    - いずれかのパネルのうちひとつに集中したいときにご活用ください。

![maximize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9669c497-cd3e-ec1b-382a-a7120398847a.gif)


#### 3. 各パネル内の表示ページを変更可能
- 各パネルの右上部にある切替アイコンをクリックすると、そのパネルで表示しているページを変更できます。

![page_switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/6a5c2ddb-493a-b487-79e4-c2b159d3fdbd.gif)


#### 4. Optionパネルのみ、表示位置の変更およびCloseが可能
- 右下の`Option`パネルのみ、パネル下部のボタンで表示位置のスイッチとCloseが可能です。
    - フォーカスがあたっているパネルについては`Command + W`でもCloseできます。

![option_switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/c1498fa7-12e0-ee36-916f-cd03bd005c05.gif)

- 少し分かりづらいですが、👇の赤枠で囲われたボタンです。

|![buttons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/c3f12109-dd31-52a2-7647-b298274b6963.png)|
|:-:|


#### 5. Optionパネルの追加も可能
- Closeができるので、もちろんOpenもできますよ！
    - 上部メニューの`Open`から開くことも可能ですが、ショートカットキーで開くと楽です 👍
    - ついでに `Command + L`でGoogleも開けちゃいます。ちょっとした検索をしたいときに便利。

|![スクリーンショット 2019-09-28 15.15.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/825bcf1d-c4b1-c274-2633-22711b8c7297.png)|
|:-:|


## ボード設定に関する機能
さてここまではひとつのボードのなかで、こんな使い方ができますよという機能のご紹介をしてきました。
`okadash` では**複数のボードを登録し、メニューやショートカットキーからボードの切替**が可能です！

|![スクリーンショット 2019-09-28 21.11.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/efa526ad-4b62-fe51-9adc-11eb738dad72.png)|
|:-:|


というわけで次は**ボード自体の設定や機能**について、こんなことができますよ！の説明をしていきます。

#### 1. ボードの表示項目を設定する
- 上部メニューの `Board -> Preferences` からボード設定の画面を開きます。
    - 各パネルに表示するページひとつひとつにつき、以下の設定項目があります。

| 項目 | 内容 |
|:-----------|:------------|
| Name | メニューやページ切替時に使用する表示名 |
| URL | 表示するページのURL |
| Custom CSS | ページ表示時のCSSを上書きするための設定値 | 

 - 画像の例では、`Custom CSS`を活用し、Slack のコンテンツ部分のみを表示しています。   
**狭いパネルにも必要な部分のみ抜き出して表示することができ**、うまく活用すると非常に便利です！

|![スクリーンショット 2019-09-28 17.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/cc01f53e-c8dd-6ca3-9673-5a93b51a80bf.png)|
|:-:|


- 設定画面最下部にある `+` ボタンを押すと、項目の追加を行うことができます。
- 設定変更後は、左カラムにある青い `Save Board Setting` ボタンを押してから  
`Close` ボタンを押してボード表示画面に戻ります。
    - 下記の例では`Kibela`を追加し、実際に`Option`パネルが増えていることがご確認いただけるかと。
![save_prefs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/d6ac83f9-cf13-a1ae-8a49-a5df69eff97e.gif)


#### 2. ボードをエクスポートする
- 使用しているボードの設定を `json` ファイル形式でエクスポートし、他の人に配布することが可能です。
    - エクスポートの方式には2種類あります。

|![スクリーンショット 2019-09-28 15.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/ea7cac53-fc8f-8a9e-ceed-2540677f7984.png)|
|:-:|

**A. 定義エクスポート**

- 赤枠部の `Export this board (definition)` ボタンがこちら。
    - ボードの**各項目の設定値ごと**、まるっとエクスポートします。
        - 各項目をどのパネルに表示しているか？や、パネルサイズの情報はエクスポートされません。

**B. みたままエクスポート**

- 赤枠部の `Export this board (as you use)` ボタンがこちら。
    - 該当のボードを**最後に閲覧した状態のまま**、その表示内容をエクスポートします。
        - どのパネルになんのページが表示されていたか、や、パネルサイズの情報が保持されます。
- でも複数ボードを設定していると、最後にどういうふうに表示してたか？なんて覚えてないんですよ…。
    - というわけでメニューの `Board -> Export Using Board` からも`みたままエクスポート`が可能です。

|![スクリーンショット 2019-09-28 16.59.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/3114d3c7-bb5d-781d-3619-5dbb444d6366.png)|
|:-:|


#### 3. ボードをインポートする
- 設定画面左カラムの `+` ボタンを押すと、ボードのインポートができます。
    - エクスポートされた `json` ファイルをファイルマネージャから選択し、インポートを行います。
    - インポート時には識別のため、ボードに名前をつけてあげてください。

|![スクリーンショット 2019-09-28 17.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/ff7371c1-4ae0-443a-2a9f-49ad76c8c47f.png)|
|:-:|


#### Ex. 推しポイント
- というわけで、上記のエクスポート・インポート機能を組み合わせると…
    - 「お！**そのボードいいね！ちょうだい！**」
    - 「いまから〇〇の説明するけど資料がたくさんあるから、**この設定ファイルインポートしといてね**」
    - 「新しくチームに入ってきた人には**このボードの内容に一通り目を通させる**ようにしよう」
- みたいなことができるわけですよ！**便利そうじゃないですか？？**


## 実際の使用パターン
さてここまでで `okadash` の一通りの機能説明はおしまいです。
ここからは実際に自分がこういうふうに使ってるよ、という事例についていくつかご紹介いたします！

### 1. 普段の業務利用 （再掲）

|![スクリーンショット 2019-09-28 18.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9a165b8c-100b-0ca8-3e1a-dbb0ed85e8d9.png)|
|:-:|

再掲です。
改めてこのボードのキモは、**Slack 上のコミュニケーションで**なんらかのタスクが生じたときに

- ToDo として Trello にほぼ**ノータイムで起票**できる
- スケジューラでその日の予定を確認し、タスクに割く**タイムバジェットを瞬時にざっくり見積もれる**

点にあります。
ところで話は逸れますが **[Kibela](https://kibe.la/ja)のエディタの UX はめちゃ最高**だと思っています。
自分の場合は個人利用でしか使用していませんが、ナレッジベースとして**非常にオススメ**です 💮

### 2. あるテーマについてのスタディ

|![スクリーンショット 2019-09-27 20.24.59（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/3254853d-8dc8-ccac-41ea-6dd176de9a17.png)|
|:-:|

このボードは[プロダクションレディマイクロサービス](https://www.oreilly.co.jp/books/9784873118154/)という本を読みながら開いてたやつです。
[Nginx の解説ページ](https://www.nginx.com/learn/microservices/)を見ながら読書しつつ、**知らない単語を Google 翻訳にかける**、みたいな使い方です。
こういう感じで集中したいときに **Slack や Twitter は完全にノイズ**なので、スタディ用のボードを作成します。

### 3. モニタリング用ダッシュボード

|![monitoring_ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/87971850-4da0-606a-cf2c-9f5dbba8d258.png)|
|:-:|

ダッシュボードツールとしてはわりと王道な使い方かと思いますが、業務で使用しているツール群を
一通り俯瞰できるようなボードを作成し、**定期的にチェック**するようにしています。
こういうのも**ひとつひとつ開いて見ていくのは結構手間**で、そうなると**見なくなってしまう**ので
ワンクリックでぱっと出せるのは非常に便利です 💮

### 4. Tech 系ニュースチェック
|![スクリーンショット 2019-09-28 18.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/57a3233f-4fb6-7201-e515-a8e7ca57df60.png)|
|:-:|

Qiita のトレンドと [Menthas](https://menthas.com/)、はてブのテクノロジーあたりを習慣的に見てます。
あと Slack に Google Alert で気になるワードを飛ばすようにして、最新技術動向を追うフリをしてます。
このへんもひとつひとつ巡回していくと地味に時間がかかってしまうし、
**いまどういうワードがHOTなのかを俯瞰して見る**意味でも一箇所に集約できるのはGoodだと思っています。

### 5. おまけ： 趣味全振りボード
|![スクリーンショット 2019-09-28 18.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/81ea2669-5be7-724d-85d4-c00e7008a8b5.png)|
|:-:|

これは息抜き用のボードですね。 **1. 業務利用ボード** や **2. スタディ用ボード** と切り替えて使用することで、
ポモドーロ・テクニックでの**コンテキストスイッチをスムーズに**行うことができちゃったりします 💪

ボードの中身については、とにかくこのふたつだけ知ってもらえればさいわいです。

- [増田ランダム](https://internet.watch.impress.co.jp/docs/yajiuma/1199402.html)
    - 永久に暇をつぶせるWebサービスで、永久に暇をつぶしてます。
- [カバのスイカまるごとタイム Hippo's watermelon ASMR - YouTube](https://www.youtube.com/watch?v=VxP1cp8KS1o)
    - 永久にみてられる動画を[YouTube Repeat](https://listenonrepeat.com/watch/?v=VxP1cp8KS1o#%E3%82%AB%E3%83%90%E3%81%AE%E3%82%B9%E3%82%A4%E3%82%AB%E3%81%BE%E3%82%8B%E3%81%94%E3%81%A8%E3%82%BF%E3%82%A4%E3%83%A0)で、永久にみてます。

## 最後に
- 実際に使っていただいて、感想や機能要望、改善点などあったらコメントいただけると嬉しいです！
    - まだまだ開発途上なので。。。 PRもめちゃくちゃお待ちしております！！！
        - https://github.com/konoyono/okadash/issues
    - ちなみに直近の開発予定の項目
        - 各パネル内での単語検索対応（`Command + F` でひらくやつ）
        - Chrome拡張機能対応

- またもし気に入っていただけたら、記事にいいね・リポジトリにスターをいただけると泣いて喜びます 😭
    - https://github.com/konoyono/okadash
    - 完全に余談ですが、Githubスター数 50 を超えて`brew cask`でインストールできるようにすることが  
直近の夢なので😍 ご協力をいただけますとほんとうにほんとうに幸いです :bow: 
        - 本記事投稿時点（2019/09/29）で `Star 29` ! ようやく折返しだ！！！

## 関連リンク
過去に投稿した記事がコチラです。

- [【okadash】Electronで Mac / Win 向けの爆捗りダッシュボードツールを作った話（追記あり） | Qiita](https://qiita.com/okadato623/items/1c034c5b7f78728d9711)