iTerm2自作コンポーネント作り方！！

[iTerm2ステータスバーの自作コンポーネントを作成してみた](https://qiita.com/takezyou/items/83a64dbaf58b842dfac1)を前回投稿しました。

今回は色々試しながら新しいコンポーネントを開発してみたので，それをまとめたいと思います。コンポーネントの有効化は **Preferences > Profiles > Session > Status bar enabled > Configure Status Bar** から設定することができます。
![Screen Shot 2019-05-17 at 5.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/739fcd69-a539-343e-f50e-9d27419c0bd7.png)

先に実際に作成したものを軽く紹介したいと思います。

**今回作成したもの**
天気をiTerm2のステータスバーに表示するものです。
github: [iterm-weather-component](https://github.com/takezyou/iterm-weather-component)

<img alt="iterm-weather-component.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/633eb200-b7b5-534d-ab12-ddb56acc7f46.png">

[OpenWeatherMap](https://openweathermap.org/)のAPIを用いてその場所の天気の情報を表示するものです。**Configure Component**から湿度や気圧を表示できるよう設定することも可能になっています。
<img width="492" alt="configuration.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/306b4a96-f94a-9678-3a7f-0f0b0b481469.png">

# 作成する方法
### 準備
では，本題に入ります。まずはPython Runtimeをメニューからインストールします。**Scripts > Manage > Install Python Runtime** の順にクリックするとインストールされます。既にインストールされている方は **Check for Updated Runtime** と表示されます。

次に開発環境を作成します。**Scripts > Manage > New Python Script** を押します。下記のような画像が出てきます。
![Screen Shot 2019-05-17 at 4.24.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/71aa4885-5d23-71e0-4b91-19677565980e.png)

ここで **Basic** か **Full Environment** を選択することができます。この2つを簡単に説明するとこんな感じです。

**Basic**: iterm2のライブラリや標準ライブラリしか使用できない
**Full Environment**: 使いたいライブラリをインストールすることができる

その次にテンプレートを選択することができます。
![Screen Shot 2019-05-17 at 4.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/03abfc3e-d638-8888-7f98-ba7288985284.png)

**Status Bar Components** を作成する時は **Long-Running Daemon** を使用します。
基本的に開発する時は `~/Library/Application Support/iTerm2/Scripts` のパス以下にファイルorフォルダを置いて作業を行います。

今回は，**Full Environment**と**Long-Running Daemon**を選択して開発をしました。実際に2つを選択してtestという名前で保存しておきます。(PyPi Dependenciesに入れておきたいライブラリを先にインストールしておくこともできます)

作成後にtestというフォルダができるのですがlsで確認してみると

```
$ cd ~/Library/Application\ Support/iTerm2/Scripts/test
$ ls
iterm2env setup.cfg test
```

iterm2envとtestフォルダができsetup.cfgファイルが作成してあります。testフォルダ内にはtest.pyというファイルが既にできています。

- iterm2envは，test.pyを動かすための仮想環境です。インストールしたライブラリなどもiterm2envの中にあります。

あとは，test.pyにコードを記述していくのですが，ライブラリを後から追加したい場合があります。その時は， **Scripts > Manage > Manage Dpendencies** をクリックすると **Script Dependency Editor** が開かれます。
![Screen Shot 2019-05-17 at 5.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/8e08f679-1d7d-30be-8b5e-940970054794.png)

先ほど作成したtestに`requests`を追加します。
**Add** ボタンを押すと下記のようなものがでるのでそこに`requests`と入力します。
![Screen Shot 2019-05-17 at 5.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/c8759d4d-b509-7dff-b550-cc81e19f4343.png)

すると別ウィンドが開いてインストールが開始されます。インストールが完了すると下記のようになって`requests`が利用可能になります。

![Screen Shot 2019-05-17 at 5.17.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/533d86fa-a3ae-2c1a-8ddc-be4cfd46c0c3.png)

これで大体の準備が整いました。

### 開発進め方
好きなように開発していくのですが，その時に参考にしたものは，下記のDocumentの **Status Bar Components** 部分です。

- [Python API](https://iterm2.com/python-api/)
- [Example Scripts](https://iterm2.com/python-api/examples/index.html#examples-index)

**Scripts** をクリックするtestがあるのでそれをクリックすると有効化できるのでこの時点でGUIで選択することができるようになります。
![Screen Shot 2019-05-17 at 5.51.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/cd4615d8-5066-cd65-7a67-ed8809701067.png)

コンポーネントのデバックは **Scripts > Manage > Console** からすることができます。
![Screen Shot 2019-05-17 at 5.34.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152495/e4b4edff-f6c7-6e0d-7abb-d20b95824ea1.png)

### 作成したものを常に利用する設定
> This script is a long-running daemon since the registered function gets called whenever the size of a session changes. As such, it should go in the AutoLaunch folder.

[Status Bar Component](https://iterm2.com/python-api/examples/statusbar.html)のDocumentに書かれているのですがAutoLaunchフォルダに入れることで常に有効化することができます。完成したものは`~/Library/Application\ Support/iTerm2/Scripts/Autolaunch`に移動させましょう！！

# 最後に
今回まとめてみたのですが，至らないところもあると思います。間違いがあればコメントしていただけると嬉しいです。

### 参考文献
- [iTerm2 にステータスバーが付いた](https://qiita.com/delphinus/items/1748937aefeb241bdcee)