Volt MX IrisでSublime Textを使ってコーディングしてみた

# 目次
1. はじめに
1. 環境設定
1. Irisでの起動方法
1. 実際に使ってみた感想
1. 最後に

# はじめに
Volt MX Iris V9 SP2以降、
Iris内から Sublime Text（※）を呼び出すことができるようになりました。

>※Sublime Textとは、世界で最も人気のあるテキストエディタの1つ。
複数行編集、様々なプログラミング言語用のビルドツール、正規表現による検索と置換、プラグイン開発用のPython APIなど、優れた機能が満載です。
（[参考サイト](https://kinsta.com/jp/blog/how-to-use-sublime-text/)）

IrisからSublime Textを利用できるようになったことで、
開発者はIrisに標準搭載されているControllerでのコーディングに加えて、
代替ツールを使用してコードを記述できるようになりました。

今回はSublime Textの導入方法と使用感などを紹介していきたいと思います！

# 環境設定
公式ドキュメントにインストール方法の記載がありますので、
手順通りにインストールを進めてください。

https://opensource.hcltechsw.com/volt-mx-docs/docs/documentation/Iris/iris_user_guide/Content/Invoke_Sublime_Text_from_Iris.html

基本的には公式ドキュメントの手順をご参考いただき、
途中でわからなくなった場合はこちらのQiitaを参考にしつつ進めてください:relaxed:



## 1. Volt MX Iris V9 SP2 以降をインストール
Sublime Textは、Iris V9 SP2以降で使うことができます。
それ以前のバージョンをお持ちの方は、
以下を参考にしながらv9.2以上をダウンロードしておいてください。

https://qiita.com/Kony_Team/items/f3f90e493a3bd8c70783#%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E6%96%B9%E6%B3%95

## 2. Sublime Textの最新バージョンをインストール
以下のサイトでOSに応じたファイルをインストールしてください。

https://www.sublimetext.com/3

インストール後、アプリケーションフォルダに移動します。
手順はこちらをご覧ください。

https://webkaru.net/dev/mac-sublime-text-3-install/

## 3. Package Controlのインストール
次に、管理ツールのPackage Control（※）を[こちら手順](https://packagecontrol.io/installation)に沿ってインストールします。

>※Package Controlとは、パッケージと呼ばれるプラグイン(=外部の拡張機能)を管理するためのツールになります。
これを入れることによって、パッケージの追加や削除ができるようになります。

コマンドパレットを開く際は、ターミナルではなくSublime Textのアプリ上で記載のコマンドを実行するようにしましょう。
![スクリーンショット 0005-03-29 16.08.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/01bbeeaf-6c4a-9f9a-c539-8ea90f1a57fb.png)

## 4. Sublime Text 用の Tern.jsをインストール
次に、[こちら](https://github.com/ternjs/tern_for_sublime#installation)の「Installation」に記載の手順に沿って、Tern.js（※）インストールを行います。

>※Tern.jsとは、Tern.jsはNode.js上で動作する、JavaScriptのための独立したオープンソース（MIT）のコード解析エンジンです。コードエディタに、プラグインを通じて、JavaScriptの自動補完や、関数の引数のヒントを表示する機能を提供します。（[参考サイト](https://liginc.co.jp/312755)）

![スクリーンショット 0005-03-29 16.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/80583910-500c-29b5-d6d5-8a5b0cf8642e.png)


Sublime TextのPackagesのディレクトリがわからない方は、
Sublime Textを開き、Preferences -> Browse Packages… で場所を確認することができます。
Packagesのディレクトリまでパスをコピーして以下のようにコマンドを実行します。
```sample.command
# 例: cd /Users/ユーザー名/Library/Application\ Support/Sublime\ Text\ 3/Packages
$ cd <プラグインディレクトリ>
$ git clone https://github.com/ternjs/tern_for_sublime.git
```
:::note alert
ディレクトリに移動する際に、「too many arguments」と表示されて移動できない場合は、パス名に空白が含まれていることが原因です。
空白の箇所でTABキーを押すとパスの候補が表示されるので、空白がないよう入力しましょう。
参考：https://discussionsjapan.apple.com/thread/10043453
:::

次に以下のコマンドを実行します。
```sample.command
$ cd tern_for_sublime
$ npm install
```
:::note alert
npmコマンド実行時に、「zsh: command not found: npm」となる場合は、
以下のリンクを参考にしながら進めてみてください。

1. まずは、nodebrewがインストールされているかと
使用するバージョンが指定されているか確認をしてください。
（参考：https://qiita.com/ushi_osushi/items/586fd83728c01dcd04c4）

3. 上記を実行しても解決しない場合、パスが通っていないことが原因です。
以下手順を参考にしながらパスを通してください。
（参考：https://newsite-make.com/node-not-found/）
※`.zshrc`が無い場合は作成する必要があります。
隠しファイルは以下の方法で作成が可能ですので、作成後パスを記載しましょう。
（参考：https://god48.com/zsh-path#）
```sample.command
$ cd ~
$ ls -a
$ touch .zshrc
```

:::


これで環境設定は完了です。
最後に、IrisからSublimeを使えるようにするためにパスを通していきます。

## 5. IrisでSublime Textのパスを通す

Iris（Iris V9 SP2以上）を開きます。

Sublime Textを使えるようにするには、
Irisの設定でSublime Textのパスを指定する必要があります。

VoltMX Iris->Preferences->Code Editorを開きます。
Sublimeのパスを通す箇所があるので、以下の赤枠の箇所をクリックします。
![スクリーンショット 0005-03-29 17.05.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2b557d05-65af-89ef-ae0e-f7c1888f8c4d.png)
フォルダが開いたら、Application内にあるSublime Textを指定します。
![スクリーンショット 0005-03-29 17.05.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a3cf730-4317-5690-fdd0-0860b37051b7.png)
選択すると、以下のようにパスが指定されますので、
最後にDoneをクリックしたら完了です。
パス：`/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl`
![スクリーンショット 0005-03-29 17.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f5373d7-fd0f-76db-8867-d7fd603326d7.png)



これでIrisでSublime Textが使える状態となりました！
それでは、IrisでSublime Textを起動する方法を紹介していきます。

# Irisでの起動方法
Irisの左メニューのProjectタブにあるControllersを右クリックしてみましょう。
新たに「Open with Sublime」のメニューが表示されるようなったかと思います！
![スクリーンショット 0005-03-29 17.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9fc3228a-7f7e-947c-dc68-dcef7ae7296d.png)

クリックするとSublime Textのエディタが開き、
Sublime Text上でコーディングができるようになりました:relaxed:
![ezgif-4-e9c76ac10c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8000e556-4a90-c0d3-35fe-7bdc2f926d49.gif)

起動する方法も簡単ですね！

# 実際に使ってみた感想
実際にSublime Textを使ってコーディングをしてみたところ、
Sublime Text上で編集したコードを保存すると即座にIris側にも反映することができました。
![ezgif-4-4e6bd27604.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0baa22a7-79f0-333f-7489-f788331c66c0.gif)

また、`Tern.js`をインストールしたことにより、
Javascriptの自動補完もしてくれるためスピーディにコーディングを行うことができます！

![ezgif-4-e56ebbd2bb.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ee2184b6-5db7-a97a-3c51-84d4bcfb25b8.gif)

更に、Sublime Textにプラグインを入れることでより快適にコーディングを行うことができます。
例えば、CSSやHTML、Javascriptのソースを整形する「HTML-CSS-JS Prettify」というプラグインを入れると、汚いコードも一発で綺麗に整形してくれるのでおすすめです🤩
![ezgif-4-a19eb6f038.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e05723ce-8544-53c4-f812-2f9cb3db7242.gif)

HTML-CSS-JS Prettifyのインストール方法は、こちらをご参考ください。

https://chusotsu-program.com/html-css-js-prettify/


# 最後に
外部のコードエディタを使ってコーディングを行いたい方や、
今よりもっとスピーディに開発を行いたい方は是非活用してみてくださいね！

# 参考
https://opensource.hcltechsw.com/volt-mx-docs/docs/documentation/Iris/iris_user_guide/Content/Invoke_Sublime_Text_from_Iris.html
https://support.hcltechsw.com/csm?id=kb_article&sysparm_article=KB0083615