プログラミングハック

【PhpStorm】ブラウザでリアルタイムプレビューする方法(LiveEdit)

 

とうふ
とうふ
こんにちは、WEBエンジニアのとうふです。

皆さんはプログラムを書くとき、どのエディタを使っていますか?
エディタの使いやすさによってコーディングの作業効率も大きく変わってきますよね。

ちなみにとうふは、PhpStorm(ピーエイチピーストーム)を使っています。
Jetbrains社製のPHP用の統合開発環境(IDE)です。

公式サイトは英語なので、日本の公式代理店サイトをみると分かりやすいと思います。

詳しい説明は今回は省きますが、

とうふ
とうふ
これ使ったら、他には戻られへんでェ・・・

ってくらい超便利で高機能です。作業が捗りまくります。

有料ソフトですが、無料で30日間お試しで使うこともできます。
購入を考えている方はコチラから購入へ進むと、最大1000円の割引が適用されますのでお使いください。

話が少し逸れましたが、今回はそんなPhpStormで「ブラウザでリアルタイムプレビューしながら、コーディングする方法とその設定手順」を解説していきます!

超簡単ですので、未設定の方はぜひ試して見てください♪

 

ライブプレビューで出来ること

まずは、実際にライブプレビューを使っている様子を見てみましょう。

 

まよい羊
まよい羊
リロードしてないのに表示が更新されてるメェ!

 

PhpStormでリアルタイムプレビューしながらコーディング可能な言語は下記です。
見た目を確認しながらコードを書きたいときにはとても便利な機能ですね!

  • HTML
  • CSS
  • JavaScript

 

設定手順

まずは必要なプラグインと拡張機能をインストールします。
とても簡単なので、一瞬で終わります。

公式のヘルプはコチラです。

01. PhpStormにLiveEditをインストール

まずはPhpStormにライブプレビュー用のプラグイン「LiveEdit」をインストールします。

「PhpStorm → Preferences…」で設定を開きます。
(ショートカットキーは「⌘ + ,」)

「Plugins」を選択し、下の方にある「Install JetBrains plugin…」をクリックします。

③ プラグインダウンロード用のウィンドウが開きます。
検索で「LiveEdit」を探して、インストールしましょう。

 

02. ブラウザの拡張機能をインストール

「JetBrains IDE Support」という拡張機能をブラウザにインストールします。

コチラからインストール可能です。(Chrome)

 

03. PhpStormの設定

最後に、PhpStormでライブプレビューするための設定を行います。

まず、プラグインを読み込ませるために、PhpStormを再起動して下さい。

PhpStormの設定を開き、「Build, Execution, Deploymetnt → Debugger → Live Edit」を選択します。
(Live Editが表示されない場合は、プラグインがインストールされていないか、読み込めていません。
正しくインストールできているか、再起動し直したかを確認して下さい。)

画像の通りにチェックと選択を変更します。
設定の意味については、公式ヘルプをご覧ください。

 

04. ライブプレビューを使ってみる

では、実際にライブプレビューしてコードを書いてみましょう!

まずは、プレビューしたいファイルをPhpStormで開きます。

ファイルを右クリックし「Debug “index.html(ファイル名)”」を選択すると、ブラウザでファイルが開きます。
(ショートカットキーは「Ctrl + Shift + D」

開いたブラウザには「このブラウザはJetBrains IDE Supportによりデバッグされています」と表示されます。

 

とうふ
とうふ
ここまでできたら、実際にファイルを編集してみよう…!
まよい羊
まよい羊
編集がリアルタイムで反映されたらOKメェ!

 

さいごに

いかがでしたでしょうか?

公式ヘルプは翻訳がおかしいところもあり、分かりづらいので参考になれば幸いです!

今回はHTMLやCSSが対象でしたが、PhpStormはPHP開発を爆速にしてくれる超優秀なソフトです。
他にもたくさんの便利な機能があるので、またの機会の紹介できたらと思います。

とうふ
とうふ
それではまたね…!