32
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PhpStormAdvent Calendar 2013

Day 20

LiveEditを使ってみよう

Posted at

LiveEditは「ブラウザをリロードせずにファイルを動的に書き換えて表示する」という機能です。
が、対象がHTMLやCSS、JSということもありどちらかいうとコーダ、デザイナ、フロントエンドエンジニア向けの機能です。

事前準備

まずはPhpStorm用のプラグインとブラウザ用のExtentionをインストールします。

最新のPhpStorm7.1にはLiveEditのプラグインがデフォルトで含まれていないので、そちらをインストールします。

[Preferences] - [Plugins] - [Browse repositories...]から[Live Edit]プラグインを選択してインストールします。

また、ブラウザはここではGoogle Chromeを使用します。
Chrome上で以下のプラグインをインストールしておきます。

JetBrains IDE Support

事前準備はこれで完了です。

動かしてみる

任意のHTMLファイルを右クリックし、Debugを選択します。

index.html_-liveedit_sample-___Dropbox_100_Programming_php_liveedit_sample.png

ブラウザが立ち上がって、「JetBrains IDE Supportがこのタブをデバッグしています」と表示されていればOKです。
HTMLやCSSなどを書き換えると動的に表示が反映されます。

※反映が遅い、もしくはAuto Deploymentを設定していてアップロードまでに数秒かかっている場合は、Synchronize(Ctrl+Cmd+Y)を押すと即座に反映されます。

実際に動いている動画はこちらを御覧ください。

ちなみに…。PHPも一応動作はしますが使えるのは基本的な静的ページのみです。
例えばSNSなどのログインが必須な画面だったりしたらLiveEdit実行時にリロードしちゃうので使えません。なので、ボクは普段の開発では使ってません。
今後の拡張に期待しています。

32
36
0

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
32
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?