【開発環境】【IntelliJ IDEA】LiveEditを使ってHTML/CSSを動的に反映させる。

![ugpwtqyfse.png](https://img.esteem.ws/ugpwtqyfse.png)

## 1. はじめに

本記事では、[JetBrains](https://en.wikipedia.org/wiki/JetBrains)製[IDE](https://ja.wikipedia.org/wiki/%E7%B5%B1%E5%90%88%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83)として知られる[IntelliJ IDEA](https://ja.wikipedia.org/wiki/IntelliJ_IDEA)の[LiveEdit](https://plugins.jetbrains.com/plugin/7007-liveedit)プラグインを使い、HTML/CSSを動的にブラウザに即座に反映できるプラグインを導入する手順を説明したいと思います。

## 2. Live Editとは

Live Editプラグインを使用すると、HTML、CSS、またはJavaScriptコードに加えた変更は、ページを再ロードせずにブラウザにすぐに表示されます。HTMLやCSSをいじっていて頻繁にブラウザをリロードしなければならないときってありますよね。Live Editプラグインを使うと、IDEとブラウザを行ったり来たりしなくて済みます。

### 2.1 前提条件

[IntelliJ IDEA](https://ja.wikipedia.org/wiki/IntelliJ_IDEA)をインストールし、日本語化していることを前提にインストール手順を説明します。日本語化していない場合は、以下のリンクを参考にして日本語化して手順を実行してみてください。

- [【開発】ローカル環境への統合開発環境(IDE): IntelliJ IDEAのインストール手順](https://qiita.com/promari/items/fee4599ec3a02a77aeac)
- [【開発】統合開発環境(IDE) IntelliJ IDEAの日本語化とカスタマイズ](https://qiita.com/promari/items/b6df8db4fb24c5e0b586)

### 2.2 インストール

[IntelliJ IDEA](https://ja.wikipedia.org/wiki/IntelliJ_IDEA)を起動し、「設定」→「プラグイン」を開きます。

![uhuwpx5wb6.png](https://img.esteem.ws/uhuwpx5wb6.png)

「マーケットプレースでプラグインを検索する」の検索ボックスで「LiveEdit」を入力します。

![rgi8oin23b.png](https://img.esteem.ws/rgi8oin23b.png)

LiveEditプラグインが表示されますので、「Install］をクリックします。

ダウンロードが始まります。ダウンロードが終わると「Restart IDE」とIntelliJの再起動を求められますので、「Restart IDE」をクリックします。

![hi1qx1mg6a.png](https://img.esteem.ws/hi1qx1mg6a.png)

IntelliJ IDEAを再開しますかと聞かれますので、「再開」をクリックします。

![jjnx1ulzlb.png](https://img.esteem.ws/jjnx1ulzlb.png)

IntelliJが再起動されます。

![ugpwtqyfse.png](https://img.esteem.ws/ugpwtqyfse.png)

無事インストールされていますのでつかってみましょう。

### 2.3 Live Editの使い方

IntelliJ起動し、「ファイル」→「新規」→「プロジェクト」を選択します。

![q2yxu90kdz.png](https://img.esteem.ws/q2yxu90kdz.png)

新規プロジェクトが立ち上がりますので、「静的Web」→[HTML5ボイラープレート」を選択します。

![1z0wm5v0kj.png](https://img.esteem.ws/1z0wm5v0kj.png)

「プロジェクト名」と「プロジェクトのロケーション」を聞かれますので、それぞれ任意の場所を入力します。

ここでは、

- プロジェクト名：LiveEditTest
- プロジェクトロケーション：C:\Develop\workspace\LiveEditTest

としました。

![ce2vv18gqm.png](https://img.esteem.ws/ce2vv18gqm.png)

「完了」をクリックします。

プロジェクトが作成されました。

![lk3gkhla0g.png](https://img.esteem.ws/lk3gkhla0g.png)

「LiveEditTest」の直下に、「liveEditTest.html」を作成します。LiveEditTestプロジェクトを右クリックし、「新規」→「HTMLファイル」を選択します。ファイル名は「liveEditTest」とします。

![d2i95or56s.png](https://img.esteem.ws/d2i95or56s.png)

以下のようなHTMLが作成されたかと思います。

![9o9ao7bs9d.png](https://img.esteem.ws/9o9ao7bs9d.png)

早速LiveEditを使って編集してみましょう。

「liveEditTest.html」を右クリックし、「デバッグ」を選択します。

![ovyaiatoef.png](https://img.esteem.ws/ovyaiatoef.png)

するとブラウザが立ち上がったかと思います。

![x1hwts0pj1.png](https://img.esteem.ws/x1hwts0pj1.png)

まだHTMLにはタイトルしか入力されていませんので、bodyにお馴染みの「Hello World!!」を入力しましょう。

![q957qpfvlo.png](https://img.esteem.ws/q957qpfvlo.png)

するとどうでしょうか。ファイルを書き換えて保存したタイミングで、変更がブラウザに反映されるようになります。ブラウザをリロードせずともその変更内容が反映されたのが分かりますでしょうか。

![9jhn3b3w5m.png](https://img.esteem.ws/9jhn3b3w5m.png)

動作しない場合は、「設定」→「プラグイン」→「インストール済」で「LiveEdit」が正しくインストールされていて有効になっているか確認してください。

![ntmgmjd1ng.png](https://img.esteem.ws/ntmgmjd1ng.png)

それでも動作しない場合は「設定」→「ビルド、実行、デプロイ」→「デバッガー」→「ライブ編集」の「Chromeのアプリケーションを更新する変更間隔」にチェックが入っているか確認してください。

![x00rs4plvc.png](https://img.esteem.ws/x00rs4plvc.png)

## 3. おわりに

如何でしょうか。Live Editを使用すると、HTMLファイルとCSSファイルに加えた変更をブラウザですぐに確認できます。 さらに、変更時にNode.jsアプリケーションを自動的に再起動することもできます。作業が捗りますので、是非インストールしてみてください。

## 4. 更新情報

- Kotlin
  - Kotlin入門
     - [第1章 はじめてのKotlinアプリケーション](https://qiita.com/promari/items/4d802f3419bdeb46ab61)
     - [第2章 Kotlinの文法](https://qiita.com/promari/items/e1c88aa8c02b82358a9d) 【New】

- Java
  - Java 10
      - [【Java】Java 10で拡張された型推論について注意すべきこと](https://qiita.com/promari/items/a5bb8d1174b3ca8c9426) 【New】

- IDE
  - IntelliJ IDEA
      - [【開発環境】ローカル環境への統合開発環境(IDE): IntelliJ IDEAのインストール手順](https://qiita.com/promari/items/fee4599ec3a02a77aeac)
      - [【開発環境】統合開発環境(IDE) IntelliJ IDEAの日本語化とカスタマイズ](https://qiita.com/promari/items/b6df8db4fb24c5e0b586)
      - [【開発環境】【IntelliJ IDEA】LiveEditを使ってHTML/CSSを動的に反映させる。](https://qiita.com/drafts/ea1c127cca85cc62f4d0) 【New】