EmEditor Free版のインストールと利用事例

このドキュメントは2016年の初期Webサイトで作成したドキュメントです。

サイトリニューアルに伴い内容を再チェックしましたが私のEmEditorはかなりカスタマイズしてあり、総てのチェックはできません。

すいません。

WordPressのCSSファイルやPHPファイルを編集する為には、WPの約束事である『UTF-8のBOMなし』のテキストエディタが必要になります。

私も幾つかのテキストエディタを試しましたが、現在は株式会社エムソフト様が個人向けに無償提供してくれている『EmEditor Free版』を使用させてもらっています。

特徴は

・コメントと本文を色分け表示してくれるために非常に見やすい。

・検索機能が充実しているので、何処に何が記述されているのかを探しやすい。

・インストールプログラムなのでファイル識別子と紐づけられる。

等のメリットを感じています。説明は下記の流れで説明します。

1.EmEditor Free版のインストール

2.WordPressで利用する為の設定変更

3.ファイル識別子との関連づけ

4.使い方の一例

1.EmEditor Free版のインストール

1-1.EmEditorのサイトから、プログラムをダウンロードする。

EmEditor Free版のサイト（左記URL）をアクセスし、表示された画面の下の方にある赤字のEmEditorのダウンロードの文字をクリックします。（下図参照）

ダウンロードのページが開いて、自動的にPCを判断して、ダウンロードが開始されます。

※私のPCは64ビット版なので『emed64_15.1.6.exe』がダウンロードされました。

1-2.ダウンロードしたEXEファイルを実行して、インストールする。

①OKで先に進む

②『次へ』で先に進む

③『次へ』で先に進む

④使用許諾に同意して『次へ』で先に進む

⑤インストールタイプ『標準』を挿入して、先に進む

⑥『インストール』ボタンを挿入する

⑦『完了』を挿入して、インストールを終了する。

⑧EmEditorが起動して、更新画面が出るので『OK』で終了する。

⑨購入方法の画面が出るが『閉じる』で終了する。

1-3.EmEditorをダウングレードして、無償版の設定にする

①コマンドの『ツール→すべてのコマンド』を選択する。

②表示されたコマンドから『ヘルプ→ダウングレード』を選択して、ダウングレードする。

③下記画面で出るので、『はい』で終了します。

2.WordPressで利用する為の設定変更

WordPressで修正するファイルの種類には下記の物があります。

①PHPファイル（.php）

PHPの正式名称はPHP：Hypertext Preprocessorになります。
またPHPはPersonal Home Pageの略称で、WEBページを記述するサーバーで動くスクリプト言語です。
WordPressはこのPHPで記述されており、機能のカスタマイズはこのファイルを修正する必要があります。 

②CSSファイル（.css）

CSS（Cascading Style Sheets）はWEBページのスタイルを定義するための言語です。
画面の構成やサイズ及び出力変数の表示フォーマット等が定義されており、画面のカスタマイズはこのファイルを修正する必要があります。 

③JavaScript

PHPはサーバ側で動くスクリプト言語ですが、JavaScriptはデバイス(PCやスマホ)側で動くスクリプト言語です。
スマホでスワイプしたり、タップ等はこのJavaScriptが検知して、デバイス側だけで色々処理をします。

④htaccessファイル（.htaccess）

.htaccess（ドットエイチティーアクセス）はWEB管理者がサーバ管理者に頼まなくてもディレクトリ単位でWordpresが動いているAppachの設定の一部変更するファイルです。
アクセスされるURLとプログラムが実行されるディレクトリの橋渡し等の設定等に使われます。

2-1.EmEditorの設定変更

①EmEditorを起動しツール→設定の選択→設定の定義を選択する。

②表示された画面で『CSS』を選択しプロパティボタンを挿入する。

③表示された画面から『ファイル』タブを選択し『utf-8を優先する』にチェックを付け、『OK』で終了する。

④次に設定の定義画面で『TEXT』を選択し、、プロパティボタンを挿入する。

※.htaccessファイルは、TEXTになります。

⑤CSSと同様に『utf-8を優先する』にチェックを付け、『OK』で終了する。

⑥閉じるで、設定変更を終了します。

以上でPHPファイル、JavaScriptファイル、CSSファイル、.htaccessファイルがUTF-8のBOMなしで呼び出せるようになりました。

2-2.その他の設定

①行番号の表示

Editorの左側に行番号を表示させたい場合は、メニュのツール→設定の選択→設定の定義で修正する形式(css等)のプロパティを選択し、基本タブの『行番号を表示』にチェックを入れると行番号が表示されるようになります。

②タブの桁数

タブキーを挿入した時に4文字シフトするのがデフォルトです。

これを変更する場合は、上図の下の方にある『タブインデント』ボタンを挿入します。

表示された画面でタブの桁数を変更して下さい。 

③複数ファイルの表示方法の切り替え

複数のファイルをタブ形式で表示する場合は『ウィンドウ→タブを有効にする』を選択すると複数ファイルがタブ形式で表示されます。

チェックを外すと複数のファイルが別ウィンドウで表示されます。

3.ファイル識別子との関連づけの変更

Windowsの基本設定はPHPファイル等をダブルクリックてもメモ帳が開く設定になっています。
これをEmEditorに変更する必要があります。

(このやり方はWindows8及びVistaの場合で、Windows7の場合は環境がないので未検証です)

①phpファイルを右クリックして、『プロパティ』を選択します。

②表示された画面から、『変更』を選択します。

③表示された画面から、『EmEditor』を選択します。

④OKで終了します。

⑤同様に、CSSファイルも、.htaccessファイルもメモ帳からEmEditorに変更してください。

以上でファイルをダブルクリックするとEmEditorが開かれます。

4.使い方の一例

EmEditorを開く方法は、下記の2つの方法があります。

①EmEditorのプログラムから起動する。

②PHPファイル等をダブルクリックして開く

①の場合でも②の場合でも、既存ファイルの編集の場合は読み込んだファイルの種類が特定できるため、EmEditorはそのファイルの種類でコメントやコマンドを自動判定してくれます。

例えば下記phpプログラムがあるとします。

<!-- 本文の出力-->
<div id='primary' class='site-content-w'>
　　<?php /* 固定ページのdisp-wordpressを読み込んで表示する */
　　　$data = get_page_by_path('disp-wordpress');
　　　echo '<div class="entry-content">'.apply_filters('the_content', $data->post_content).'</div>';
　　?>
</div>

これをEmEditorに読み込むと表示は下記になります。

コメントの所がグリーンで表示されて一目でコメントとわかる表示になります。

以上でEmEditor Free版が、自由に使えるようになります。

 

尚、ローカル環境では上記の設定でEmEditorが自由に利用でき様になりましたがリモートからでもこれが行えると便利です。
Synology社のNASを利用している場合はWEBDAV接続を設定する事により、外出先からでもローカル環境と同様にEmEditorを利用する事が可能になります。

これを利用する場合は『Synologyカテゴリ』の当該ドキュメントを参照してください。