する2014-05-29WordPressのテーマを作成していて、「ブラウザがリアルタイムで更新してくれたらいいのに」と思ったことはありませんか?LiveReloadは、何らかのファイルを保存するとブラウザが自動で更新されるツールです。このLiveReloadを利用するとリアルタイムでブラウザが更新されるようになるため、WordPressのテーマ作成などに役立ちます。LiveReloadWordPressをLiveReloadすると、修正を保存した瞬間にブラウザが更新されます。画面を並べれば、エディタとブラウザを行き来することなく、テーマの作成が楽になります。WordPressのテーマを作成する場合、大きく2つのケースが考えられます。ローカルサーバーで、WordPressを作成リモートサーバーに、ファイルをアップロードして作成どちらのケースでも、LiveReloadが可能です。リモートサーバーに関しては、ファイルのアップロードもタスクランナーを利用して、自動化します。タスクランナータスクランナーは、様々な機械的な処理を実行できます。具体的には、以下の例が挙げられます。タスクを1つずつ実行したり、コマンド1つで全てのタスクを自動化することもできます。過去にGruntの導入記事を書いていますので、今回もGruntを中心に紹介します。最近話題になることの多いgulpでも、Gruntと同じようなことが可能です。具体的なGruntの導入方法やターミナル、コマンドプロンプトの簡単な操作方法は、過去の記事に書いているため、割愛します。この記事ではLiveReloadを中心に紹介しますが、さらにGruntfileを拡張して、自分の好きな環境に整えることができます。LiveReloadの下準備LiveReloadを行う方法はいくつかありますが、ブラウザの拡張機能を利用します。Firefoxエクステンションを導入すると、ブラウザにLiveReloadのアイコンが表示されます。利用する場合は、LiveReloadを行いたいタブで、このアイコンをクリックして使用します。LiveReloadGruntの基礎知識とgrunt-cliのインストール、WordPressがインストールされていることを前提として進めます。ローカル環境で利用するサーバーは、MAMPやXAMPPでも何でも構いません。基本的にGruntfileとpackage.jsonの設置場所はどこでも構いません。今回はWordPressをインストールしているディレクトリの上に、Gruntfileとpackage.jsonを設置します。└...├Gruntfile.coffee└package.jsonGruntfileとpackage.jsonの内容は、下記のようになっています。「files」のディレクトリを指定。}}これらをコピペして、ディレクトリなどを指定したファイルを作成し、ターミナルをGruntfileを設置したディレクトリまで移動させます。必要なプラグインをインストールされます。無事プラグインがインストールされると「node_modules」というディレクトリが作成されます。このディレクトリは、Gruntを利用する時に必要なファイルです。コマンドを入力して、「Waiting」の状態にします。ブラウザで、ローカルのWordPressページを表示し、LiveReloadのエクステンションを起動します。これで、任意のテーマファイルを変更すると、自動でブラウザが更新されます。LiveReloadリモートサーバーのLiveReloadも、ローカルサーバーで行った方法とほぼ同じですが、テーマファイルをサーバーにアップするという作業が必要になります。このサーバーのファイルアップロードもGruntを利用して自動化します。grunt-sftp-deployローカルサーバーで利用したGruntfileまで、ターミナルで移動し、下記のコマンドを実行します。--save-devインストールが終わったら、Gruntfileと同じ場所に、「.ftppass」というファイルを作成します。ファイルを作成.ftppassの中に、リモートサーバーのユーザー名とパスワードを記述します。}}Gruntfileも下記の記述のように修正します。ローカルにWPを置かない時は、テーマのディレクトリだけおいて、そこを指定する方法もあります。['watch:remote']これで設定は終わりです。あとはGruntfileのある場所までターミナルを移動。下記のコマンドを入力し、実行します。remoteターミナルが「Waiting」の状態になったら、リモートサーバーのURLを開き、LiveReloadのエクステンションを起動。ローカルにあるWordPressのテーマを保存するだけで、テーマをリモートサーバーにアップロードし、ブラウザが自動的に更新されます。上記の画像でもわかりますが、ファイルがアップロードされてから、LiveReloadが走ります。そのためアップロードするファイル数が多いと、LiveReloadの時間がかかってきます。LiveReloadの時間を短縮させるためには、Gruntfileのexclusionsに、アップロードしないファイルを設定するなどの工夫が必要になります。アップロードの機能は一度設定してしまえば、アップロードが自動化されるため、他の場所に間違ってアップロードすることはなくなります。FTP(SFTP)のプラグインを初めて利用する前には、設定を間違うと、違うディレクトリに、ファイルをアップロードしてしまう可能性があるため、ファイルを上書きしても問題ないサーバーで、必ずテストを行ってください。gulpなどのタスクランナーの紹介で「Sassをコンパイル」「JSをまとめる」などよく見かけるため、別の視点から使い方を提示してみました。タイトルや内容でもWordPressに限定した紹介になっていますが、この方法はWordPressに限らず、他のCMSや静的のページを作成する時にも応用がきく方法です。Gruntやgulpなどのタスクランナーや、黒い画面など、何かを学ぶきっかけになれば幸いです。