LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-15

ugpwtqyfse.png

1. はじめに

本記事では、JetBrainsIDEとして知られるIntelliJ IDEALiveEditプラグインを使い、HTML/CSSを動的にブラウザに即座に反映できるプラグインを導入する手順を説明したいと思います。

2. Live Editとは

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

2.1 前提条件

IntelliJ IDEAをインストールし、日本語化していることを前提にインストール手順を説明します。日本語化していない場合は、以下のリンクを参考にして日本語化して手順を実行してみてください。

2.2 インストール

IntelliJ IDEAを起動し、「設定」→「プラグイン」を開きます。

uhuwpx5wb6.png

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

rgi8oin23b.png

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

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

hi1qx1mg6a.png

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

jjnx1ulzlb.png

IntelliJが再起動されます。

ugpwtqyfse.png

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

2.3 Live Editの使い方

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

q2yxu90kdz.png

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

1z0wm5v0kj.png

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

ここでは、

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

としました。

ce2vv18gqm.png

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

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

lk3gkhla0g.png

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

d2i95or56s.png

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

9o9ao7bs9d.png

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

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

ovyaiatoef.png

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

x1hwts0pj1.png

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

q957qpfvlo.png

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

9jhn3b3w5m.png

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

ntmgmjd1ng.png

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

x00rs4plvc.png

3. おわりに

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

4. 更新情報

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0