BitBarでMacのメニューバーにオリジナリティを

この記事は[ラクス Advent Calendar 2016](http://qiita.com/advent-calendar/2016/rakus)の21日目の記事です。
昨日は@fnzzzさんの [デザイン作成マップ](http://qiita.com/fnzzz/items/22f82e716097d241ac98) でした。

---

# BitBarとは
BitBarとは、Macのメニューバーにオリジナルのメニューを追加することができるツールです。
cronのように任意のスクリプトを一定時間間隔で自動起動したり、その結果を確認したりすることができます。
何やらとても楽しげではないでしょうか...。ということでBitBarの紹介をしたいと思います！

# 準備
1. 下記コマンドでbitbarをインストールします。

    ```
    $ brew cask install bitbar
    ```
もしくは、https://getbitbar.com/ の**Get BitBar**のリンクからzipをダウンロードして展開し、`BitBar.app`を`/Applications`配下へ配置しておきます。
1. `BitBar.app`を起動するとMacのメニューバーに**BitBar**の文字が表示されるはずです。
  <img width="483" alt="スクリーンショット 2016-12-19 1.13.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/88200/0b604cf8-50dd-f42c-7b75-a875ad8feda5.png">
1. メニューバーに表示された**BitBar**の文字 → **Change Plugin Folder** をクリックし、任意のディレクトリを選択しておきます。
後述しますが、ここで指定したディレクトリに配置したスクリプトがBitBarプラグインとなり、BitBarを起動している間、Macのメニューバーに反映されます。

# プラグインを追加する

## 追加手順
1. 試しにこんなファイルを作成

    ```bash:plugin.sh
    #!/bin/bash
    echo ':muscle:'
    echo '---'
    date
    ```
1. `plugin.sh` の実行権限を付与

    ```
    $ chmod +x plugin.sh
    ```
1. **Change Plugin Folder** で指定したディレクトリに `plugin.sh` のシンボリックリンクを配置します（そのまま実体置いても問題なしです）。
後述しますが、ファイル名によってスクリプトを起動する間隔を決めることができます。

    ```
    $ cd /path/to/pluginFloder
    $ ln -s /path/to/plugin.sh ./
    ```
1. BitBarのメニューから **Preferences** → **Refresh all** をクリック

以上でMacのメニューバーにたくましい上腕が表示されるはずです。
![image](https://qiita-image-store.s3.amazonaws.com/0/88200/cede2c20-46f7-b4e6-7a10-5914d94848d9.png)
なお、BitBar自体を止めたい場合には**Preferences** → **Quit**でどうぞ。

## 起動間隔の設定
BitBarは任意のスクリプトを一定時間間隔で起動することができます。
その間隔の設定は下記のようにスクリプトのファイル名で設定するようになっています。

```
plugin.10s.rb
```

`<任意の名前>.<間隔>.<拡張子>` となっており、 `10s`の部分が起動する間隔を表しています。
このファイル名の例だと10秒ごとに起動されるファイルになります。
詳しくは https://github.com/matryer/bitbar#configure-the-refresh-time

# プラグインを作成する
プラグインをいろいろな言語で作成することができる点もBitBarの良いところではないかと思います。
また、プラグインの作成は先ほどの上腕の例と同じように、標準出力へ文字列を出力するスクリプトを作成すればOKです！
出力する文字列によって表示させる内容に変化を加えることができますので、いくつか紹介します。

## メニューバーへの表示・ドロップダウンメニュー
```bash:plugin.sh
#!/bin/bash
echo ':muscle:'  # 最初に出力した文字列がメニューバーに反映される
echo '---'       # --- を出力するとそれ以下がドロップダウンメニューになる
echo 'foo'
echo 'bar'
date
```

![image](https://qiita-image-store.s3.amazonaws.com/0/88200/66212640-81a6-afbf-2204-6e1b1a9424fe.png)

## サブメニュー
出力する文字列のprefixに `--` を付与してやると、階層構造のあるメニューが作成できます

```bash:plugin.sh
#!/bin/bash
echo ':muscle:'
echo '---'
echo 'foo'
echo '--foo1'    # fooのサブメニュー
echo '---'       # 区切り線
echo 'bar'
echo '--bar1'    # barのサブメニュー
echo '----bar11' # bar1のサブメニュー
echo '--bar2'    # barのサブメニュー
```

![image](https://qiita-image-store.s3.amazonaws.com/0/88200/6d2902d9-c78f-c910-d863-40f102adbf1b.png)

## `|` (パイプライン)で豊かな表現
`|` で区切ってやれば文字色やフォントやフォントサイズの変更、リンクの埋め込みも可能です。
複数のオプションを組み合わせることも可能です。

```bash:plugin.sh
#!/bin/bash
echo ':muscle:'                           # Slackのようにemojiを扱うことも可能
echo '---'
echo 'foo | color=red'                    # 文字色をredに
echo 'bar | color=blue size=28'           # 組み合わせも可
echo 'baz | color=#00FF00 size=45'        # カラーコードでの指定も可
```

![image](https://qiita-image-store.s3.amazonaws.com/0/88200/14bd648b-8be6-36a6-6318-1a564b785d26.png)

## クリック時の挙動などの設定
文字をリンクにしたり、シェルスクリプトを実行したりすることなども可能です。

```bash:plugin.sh
#!/bin/bash
echo ':muscle:'
echo '---'

# クリックするとブラウザでリンク先を表示
echo 'google | href=https://google.co.jp/'

# クリックするとターミナルが起動してコマンドを実行
echo 'git status | bash="cd $HOME/workspace/rails/sample_app;\n git st;"'

# optionキーを押下している状態で表示されるメニューを作成
# 通常のメニュー
echo '?????'
# optionキー押下時のメニュー
echo '！！！ | color=red alternate=true'
```

optionキー押してる間だけ `?????` が `！！！` になります！
![capture.gif](https://qiita-image-store.s3.amazonaws.com/0/88200/f11f61e5-1857-84df-022f-33bc4002b94c.gif)

# プラグインを公開する
作成したプラグインは[プラグイン用のリポジトリ](https://github.com/matryer/bitbar-plugins)にcontributeして公開することもできます。

もちろん公開したプラグインは誰かに使ってもらうことができますし、公開されているプラグインを自分で使うこともできます。
公開するには作成したスクリプトにメタデータを含める必要があるようです。
詳しくは https://github.com/matryer/bitbar#metadata

# 作ってみました
せっかくの機会なのでRubyでひとつプラグインを作ってみました。
https://github.com/ta-chibana/hatena-feed
![image](https://qiita-image-store.s3.amazonaws.com/0/88200/0b2d6237-4e0b-d10c-c39f-970d54ba64e2.png)

[はてなブックマーク](http://b.hatena.ne.jp/)のRSSフィードから人気記事情報を取得して表示するようにしています。
シンボリックリンクの名前を `hatena.8h.rb` として、8時間ごとに起動するようにしていますが、`reload`をクリックすることで手動でスクリプトを起動し、新鮮な情報を取り入れることができるようにしています。

```rb 
puts 'reload | color=red refresh=true'
```

[車輪の再発明](https://ja.wikipedia.org/wiki/%E8%BB%8A%E8%BC%AA%E3%81%AE%E5%86%8D%E7%99%BA%E6%98%8E)感は否めませんが、自分の作ったものが使えるというのはとてもとても楽しいことではないでしょうか。

余談ですが、作成中にリンクが有効になってくれずに困ってしまいましたが、 原因はString型の`title`に `|` が混入していることがあり、それによって以降の `| href=xxx`が効いていないことによるものだったようです。。

```rb
puts "--#{title} | href=#{item.link}"
```

あとは今の所例外処理を入れていないので、例外発生時には**Preferences** → **Refresh all**しなければならない点も修正せねばですね。

# まとめ
- Macのメニューバーにオリジナルのスクリプトや他の人が作ったプラグインを追加できる！
- いろいろな言語でプラグインの開発が行える！
- 基本は標準出力への出力だけでそれっぽいものが作れる！  
なのでスクリプトの作成中にBitBarのことで悩むことは少ないはず...！

# 参考
https://getbitbar.com/
https://github.com/matryer/bitbar
http://sprint-life.hatenablog.com/entry/2014/01/15/203535
https://syncer.jp/hatebu-api-matome

---

最後まで読んでいただきありがとうございました！！
明日は@yusuke-nakanoさん、よろしくお願いします！