PHPStorm – Live Editを利用したライブプレビュー

PHPStormには、Live Edit¹という便利なプラグインが提供されています。何が便利かというと、htmlやcssを編集しながらブラウザでデザインをリアルタイムに確認できるところです。似たような機能として保存時に更新するものは多いですが、これは一文字に入力すれば、まさにリアルタイムに反映されます。日本語入力であれば、確定しない状態でも入力中の文字列が反映されます。

PHPStormの設定

Live Editを追加します。

1. メニューのPreferencesを選択し、Settingsダイアログを開く。

2. IDE Settings > Pluginsを選択。

   
3. Install JetBrains plugin...をクリック。

4. 右上の検索バーにliveと入力すると、LiveEditが見つかります。

   
5. 左上のDownload and Installをクリックします。
6. ダウンロードしてインストールしますかと聞かれるので、YESを選択します。

7. Pluginsの画面に戻って、LiveEditがあればインストール成功です。

   
8. SettingダイアログのOKボタンを押すと、プラグインを有効にするための再起動を促すメッセージが表示されるので、再起動します。

9. 再起動後に、再度Settingsを開きます。IDE SettingsにLive Edit表示されます。もし2つの設定にチェックが入っていなければ、チェックを入れます。

   

以上です。次はChromeの設定です。

Chromeの設定

PHPStorm用の機能拡張JetBrains IDE Support²を追加します。

1. Chromeウェブストアを開きます。
2. jetbrains または phpstorm で検索します。

3. JetBrains IDE Supportが見つかるので、追加します。

   

以上です。

動作確認

1. プレビューしたいファイルを選択し、コンテキストメニューを開き、Open in browserを選択します。Chromeがデフォルトブラウザに設定されていればChromeで表示されます。それ以外のブラウザをデフォルトにしている場合は、エディタの右上にあるアイコンからChromeを選択します。利用するブラウザの設定は、PreferencesのWeb Browsersで編集可能です。

   
2. Chromeで開いたあとは、PHPStormで対象ファイルをエディタで編集してください。
3. Chromeに「JetBrains IDE Support」がこのタブをデバッグしています。と表示されれば成功です。

4. エディタと同じ修正箇所がハイライトされ、入力を確定しない状態でも逐次更新されていきます。CSSやSassの修正も同様に更新されます。おそらくプロジェクト内の関連するファイルが更新されれば、プレビューも更新されるようです。

   

おわりに

Firefoxをメインとしているため、Chromeのみ対応なのが少し残念です。これだけのためにChromeをたちあげるのも嫌なので、FirefoxのアドオンAuto Reloadを利用し、リアルタイムとまでは行きませんが、やや近い環境を作っています。