1. はじめに
本記事では、JetBrains製IDEとして知られるIntelliJ IDEAのLiveEditプラグインを使い、HTML/CSSを動的にブラウザに即座に反映できるプラグインを導入する手順を説明したいと思います。
2. Live Editとは
Live Editプラグインを使用すると、HTML、CSS、またはJavaScriptコードに加えた変更は、ページを再ロードせずにブラウザにすぐに表示されます。HTMLやCSSをいじっていて頻繁にブラウザをリロードしなければならないときってありますよね。Live Editプラグインを使うと、IDEとブラウザを行ったり来たりしなくて済みます。
2.1 前提条件
IntelliJ IDEAをインストールし、日本語化していることを前提にインストール手順を説明します。日本語化していない場合は、以下のリンクを参考にして日本語化して手順を実行してみてください。
2.2 インストール
IntelliJ IDEAを起動し、「設定」→「プラグイン」を開きます。
「マーケットプレースでプラグインを検索する」の検索ボックスで「LiveEdit」を入力します。
LiveEditプラグインが表示されますので、「Install]をクリックします。
ダウンロードが始まります。ダウンロードが終わると「Restart IDE」とIntelliJの再起動を求められますので、「Restart IDE」をクリックします。
IntelliJ IDEAを再開しますかと聞かれますので、「再開」をクリックします。
IntelliJが再起動されます。
無事インストールされていますのでつかってみましょう。
2.3 Live Editの使い方
IntelliJ起動し、「ファイル」→「新規」→「プロジェクト」を選択します。
新規プロジェクトが立ち上がりますので、「静的Web」→[HTML5ボイラープレート」を選択します。
「プロジェクト名」と「プロジェクトのロケーション」を聞かれますので、それぞれ任意の場所を入力します。
ここでは、
- プロジェクト名:LiveEditTest
- プロジェクトロケーション:C:\Develop\workspace\LiveEditTest
としました。
「完了」をクリックします。
プロジェクトが作成されました。
「LiveEditTest」の直下に、「liveEditTest.html」を作成します。LiveEditTestプロジェクトを右クリックし、「新規」→「HTMLファイル」を選択します。ファイル名は「liveEditTest」とします。
以下のようなHTMLが作成されたかと思います。
早速LiveEditを使って編集してみましょう。
「liveEditTest.html」を右クリックし、「デバッグ」を選択します。
するとブラウザが立ち上がったかと思います。
まだHTMLにはタイトルしか入力されていませんので、bodyにお馴染みの「Hello World!!」を入力しましょう。
するとどうでしょうか。ファイルを書き換えて保存したタイミングで、変更がブラウザに反映されるようになります。ブラウザをリロードせずともその変更内容が反映されたのが分かりますでしょうか。
動作しない場合は、「設定」→「プラグイン」→「インストール済」で「LiveEdit」が正しくインストールされていて有効になっているか確認してください。
それでも動作しない場合は「設定」→「ビルド、実行、デプロイ」→「デバッガー」→「ライブ編集」の「Chromeのアプリケーションを更新する変更間隔」にチェックが入っているか確認してください。
3. おわりに
如何でしょうか。Live Editを使用すると、HTMLファイルとCSSファイルに加えた変更をブラウザですぐに確認できます。 さらに、変更時にNode.jsアプリケーションを自動的に再起動することもできます。作業が捗りますので、是非インストールしてみてください。
4. 更新情報
-
Kotlin
- Kotlin入門
-
Java
- Java 10
-
IDE