HTMLエディタ ez-HTML

見たままが得られる WYSIWYG（ウィズウィグ）ソフトでWebページを作成し、出来上がった HTML ソースをいじりながら何となく HTML を少し覚えたら、HTML エディタ、ez-HTML を使用することをお勧めします。このソフトは手打ちで HTML を記述しますが、正確な タグ入力支援機能、市販ソフトより整ったヘルプ機能により HTML/CSS に慣れていない初心者でも使える次世代対応の高機能 Web 制作ソフトウェアです。

主な機能の紹介

このエディタは、逐次改良更新され、これ一つで Web 制作は事足りるほど高機能です。 このサイトは、このソフトでほとんど作成しましたが、すべての機能を使いきって評価している訳ではないので、詳細についてはインストールして、ご自分で体験して下さい。 気に入っている主な機能は以下のとおりです。

  • エディタ機能
    • Undo、Redo がほぼ無制限
    • ショートカット、ポップアップメニューのカスタマイズ
    • ファイル検索、Grep検索、置換
    • SJIS、JIS、EUC、Unicode16LE、Unicode16BE、UTF-8、UTF-8Nの文字コードに対応
  • HTML 編集
    • 内部ブラウザと HTML のプレビュー即時切替え
    • Internet Explorer、Gecko系（Mozilla、Firefox）、Safari、Opera、
      Google Chrome でのプレビュー
    • 正確な要素、属性、属性値の候補入力支援
    • タグの開始位置、終了位置からのどちらからもタグ解析
    • ドキュメント内のカラーコードにマウスを押しあてると、その色を表示
    • ドキュメント内のイメージタグにマウスを押しあてると、その画像を表示
    • 外部スタイルシートの編集、入力支援
    • 外部イメージエディタを登録し、ビューワからの起動
    • 内蔵 FTP でアップロードが容易
    • クリッカブルマップの作成、編集が容易
    • 携帯サイトも製作可能、i-mode などの CompactHTML、XHTML Mobile Profile1.0、EZweb用WML2.0の入力支援対応
  • アクセシビリティ
    • スタイルシートの豊富なデータ量と入力支援
    • 候補支援時の必須属性は★マークで分かりやすく表示
    • 「Another HTML lint」による文法チェック
    • CSS Validator をローカルで動作
    • IE による即時プレビューだけでなくGecko系（Mozilla）でも可能、
      また、同時に２画面で比較プレビュー
  • CGI/Perl/PHP
    • 「ActivePerl」のインストールにより、Perl 構文チェック
    • 「AnHTTPd」の連携で Perl/PHP オフライン内蔵プレビュー
    • print文内、ヒアドキュメント内でのHTML候補支援
    • Perl/PHP 編集モードのとき、色分け、変数解析、関数解析なども対応

Top↑

準備するもの

ソフト自体をダウンロードしただけでは、前項のさまざまな機能は得られません。市販ソフトにないことをするためには、他にもいろいろ準備しなければなりません。フリーソフトの楽しいところ ♪・・でしょうか？ 　自分のWebページ作成環境を整備することも大事なことです。 嫌がらずにやってみましょう。

本体のダウンロード

ez-HTML 製作元 Web Frontier サイト次世代高機能HTML/XHTMLエディタez-HTML（Web Frontier) から、適当なところにダウンロードします。ezhtml***フォルダが作られます。（***はバージョン No.）

Susie-PlugIn のインストール

画像閲覧用フリーソフト Susie-PlugIn は、ver 7.60 （2008/08 ）から、新設されたフォルダ plugin に内蔵されましたのでインストール不要になりました。 これで GIF、PNG 形式の画像を読み込めるようになり、ドキュメント内のイメージタグにマウスを押しあてると、その画像を簡易表示します。

【ez-HTMLファイル構成】
  • ezhtml747
    • data
    • ezhtml.exe
    • readme.txt
    • help.chm
    • update.exe
    • ifPNG.spi
    • ifGIF2.spi

ver 7.60 以前の場合は、「渡辺裕朗さんのページ」から 「ifGIF012.lzh」、「ifPNG061.lzh」をダウンロードします。
解凍したら、下記のプラグインファイルを右のように実行ファイル ezhtml.exe があるフォルダに保存します。

  • ifPNG.spi
  • ifGIF2.spi

他でも使用するなどインストール先を別にする場合は、「表示」→「詳細設定」→「拡張設定」→「マルチメディア」のダイアログで、 「Susie プラグインのインストール先を指定」の欄にパスを指定します。

【プラグインインストール情報】

「ヘルプ」→「プラグインインストール情報」で、下記のダイヤログが開きプラグインのインストール状況が表示されます。例では、Susie Plug-In がインストール済みです。 プラグインのインストール状況まだインストールされていないプラグインのアイコンをクリックすれば、 プラグイン配布先にリンクするかどうか確認して接続できますので、ここでインストール作業と確認ができます。

Top↑

Mozilla ActiveX Control のインストール

Mozilla（Gecko）による内蔵プレビュー

内蔵ブラウザによるプレビューは、Internet Explorer エンジンを用いたものの他に、Netscape Navigator、Mozilla、Firefox に代表される Gecko エンジンを使ったブラウザで内蔵プレビューが可能になります。また、IE と同時に２画面で表示できるので、表示崩れなどを比較しながら確認できます。

Mozilla ActiveX Control は、Firefox 3.5 （2009年）以降サポート終了しました。

Mozilla ActiveX Control（海外サイト）のインストール

  1. Mozilla Org. サイトにリンクして Mozilla ActiveX Controlをダウンロードします。
  2. リンク先の「 Get the binaries ! 」という見出しのところに、次のようなダウンロードファイルがいくつか存在します。Gecko エンジンのレンダリングを利用しているので、 どのバージョンでもいいようです。
    「Mozilla ActiveX Control 1.7.12」、「Mozilla ActiveX Control 1.7.7」、「・・・1.7.1」
  3. ダウンロードしたら、ez-HTML を起動して、メニューの「表示」→「詳細設定」→「インターネット」→「内蔵プレビュー」を選び、「Mozilla ActiveX Control のインストール先」 にインストールフォルダ（mozctl.dll があるフォルダ）を指定します。（下図 ）

Mozilla ActiveX Control設定ダイアログ

ActivePerl のインストール

ローカルで CGI/Perl を動かすためのエンジン、「ActivePerl」をインストールします。CGI/Perl を使用したスクリプトのローカルテストを行なう場合や、 文法チェック「Another HTML-lint」を使用する場合などに必要になります。

  1. 「ActiveState社」の Free Download （ActivePerl Community Edition ページ）でダウンロードします。（2012年 6月）
  2. ダウンロードしたらダブルクリックで起動し、セットアップウィザードが開きます。
  3. インストールフォルダを任意の場所にしたい場合は、「Browse」ボタンをクリック、他は「Finish」まで、「Ｎext」ボタンをクリックします。
  4. 「Choose Setup Options」のところの下記の２箇所は必ずチェックします。
    • Add Perl to the PATH environment variable
      パソコンの環境変数にPerlのパスを自動で追加するかの指定です。
    • Create Perl file extension association
      Perlの拡張子 .pl を Perlに関連付けを行うかの指定です。
  5. 「Finish」で終了したら最後に、環境変数にPerl のパスが書き加えられていることを有効にするため、Windows を再起動 します。
  6. ActivePerl のインストール確認
    Windows を再起動したら、「スタート」→「コマンドプロンプト」で、perl -v と打ち込みます。バージョンメッセージがでればＯＫです。
C:¥Documents and Settings¥Owner>perl -v

Top↑

An HTTPD のインストール

An HTTPD は、Win32用 Web サーバです。ここでは CGI プログラムが動作する WWWサーバ環境を作りローカル上で動作させます。 これにより Perl 実行用の ActivePerl とで、ローカルで Perl/CGI の動作確認が行えるようになり、PHP をインストールすることで PHP/CGI も動作確認ができるようになります。CGI のローカルテストをしない場合はインストール不要です。

An HTTPD のダウンロード

配布サイト（http://www.st.rim.or.jp/~nakata/index.html 中田昭雄氏サイト）でダウンロードできたのですが、 2015年 2月に閉鎖されています。セキュリティ対策などのサポート継続が難しいのかもしれません。 Windows Vista 以降は保証されていませんが、Webアーカイブでダウンロードすることはできます。このエディタのようにローカルで利用するか、 学習用としての用途ならば問題ないので自己責任で利用して下さい。下記のように圧縮ファイル形式と、自己解凍ファイル形式があります。（2015年 11月）

  1. 圧縮ファイル httpd142p.zip（1.02MB）をダウンロードし、Windows の「右クリック」→「すべて展開」→「展開ウィザード」でどこかに解凍保存します。
  2. または、自己解凍ファイル httpd142p.exe（1.04MB）をダウンロードし、ダブルクリックすると下図のように解凍先指定のダイアログが開きます。 ここで、例えばインストール先を、C:¥www¥httpd と入力し、「Unzip」ボタンをクリックします。ダイアログでは「 ¥ 」はバックスラッシュで表示されます。インストール先はどこでもかまいません。起動するとタスクトレイに常駐します。 An HTTPd 解凍ダイアログ

ドキュメントルートの設定

管理しているホームページ 領域を C:¥www¥home とすると、このフォルダ以下が公開領域とされ、テストCGI ファイルや HTML ファイルを置くことになります。このドキュメントルートを、An HTTPD と、ez-HTML に設定します。

【An HTTPD】

Windows Vista 以降の場合、右クリック、「管理者として実行」で、An HTTPD を起動します。でないと正常終了できなかったり、書き込み内容が反映されない場合があります。

起動すると、タスクトレーにアイコンhttpdアイコン が表示されるので、カーソルをあて「右クリック」→「オプション一般」を選択します。 下図のダイアログが開いたら、「一般」タブの「ドキュメントルート」に例えば、 C:¥www¥home と入力します。

An HTTPd設定ダイアログ

《 その他のデフォルト設定 》

  1. 「ポート」 → サーバーの使用するポートです。Webサーバーは通常、80 番です。
  2. 「デフォルトインデックス」
    ファイル名を付けずにアクセスしてきた場合に表示する標準のファイルです。通常は、index.htmlですが、必要に応じて index.cgi や index.php などを指定します。
  3. 「/~→¥ 」 → /~（ユーザー名）というアクセスができるようにする設定です。
  4. 「リモートホストを取得」
    アクセスしてきた人のIPアドレスからホスト名を取得するかどうかの指定です。
    「取得しない」で OKです。

とりあえず、「ドキュメントルート」と、「ポート」だけ設定すれば大丈夫です。むやみに設定変更すると混乱するので他の変更は各項目の意味を十分に理解して行ってください。

【ez-HTML】

メニューの「表示」→「詳細設定」→「CGI 〔高度〕」→「共通設定」で下図のダイヤログが開き、先程と 同じドキュメントルートを設定します。

CGI〔高度〕共通設定ダイアログ

ブラウザにアクセスする方法は、「http://127.0.0.1/」か、「http://localhost/」にします。どちらでもかまいません。デフォルトは後者です。

An HTTPd と ActivePerl／PHP のインストール先を設定

上図のダイアログの「Perl/PHP構文検証／逐次動作確認（内蔵ブラウザ使用）」欄で、ActivePerl と、PHP のインストール先を設定します。 また、「An HTTPd の設定」欄で、An HTTPd のインストール先を設定します。

右端の検索ボタンをクリックすると、 ファイルを開くガイドダイアログが開きます。ここで「perl.exe」、「php.exe」、「httpd.exe」の実行ファイルまで設定して下さい。 フォルダでは正常に設定されません。正常にファイルが設定されていれば、CGI ファイルを開くと、編集画面の下部のツールバーに 「プレビュー」と、「構文検証」ボタンが表示されます。

An HTTPd がインストールされていれば、「プレビュー」がボタンが表示され、ActivePerl や、PHP がインストールされていれば「構文検証」ボタンが表示されます。

Top↑

Windows Vista 以降 An HTTPd の設定

Windows Vista 以降セキュリティが強化されたことによる An HTTPd インストール設定の関連する追加手順です。

Windows ファイアウォールの設定

Windows10 では「コントロールパネル」→「システムとセキュリティ」→「Windows ファイアウォールの許可」で、下図のダイアログを開いて「httpd.exe」を選択し、「設定の変更」をクリック、「名前」、「プライベート」、「パブリック」の３箇所をチェックします。

An HTTPd ファイアウォールの設定ダイアログ

Windows Defender 除外設定

An HTTPd が実行されていると、常時監視しているセキュリティソフトの Windows Defender から、サンプルの送信をオフに設定の状態で、警告ポップアップが表示され改善のための通知を促されます。煩わしい場合は除外設定します。Defender を開いて、「設定」→「除外の追加」→「フォルダーを除外する」で、 An HTTPd のインストール先フォルダを設定します。他のセキュリティソフトを使用している場合も同様の設定をします。

An HTTPd のポート設定

Windows Vista 以降、IIS（Internet Information Services）がアドオンソフトとして、Windows の標準 Webサーバー（アプリケーションサーバー）サービスが実装されています。これらのアプリを使用していると、ポート番号 80 が使われる場合があります。 前記「一般」タブのポート設定の 80 と重なってしまうので、「二重起動のエラー」になり起動しません。そのようなときはポート番号を 80 以外に設定します。例えば 8080 としたときは、URLを「http://localhost:8080/」のようにポート番号付きでアクセスします。 ポート番号が 80 のときだけ「:80」を省略できます。

【 IIS（インターネットインフォメーションサービス）の確認 】

IIS が有効か無効かの確認は、Winsows10 では「コントロールパネル」→「プログラム」→「Windowsの機能の有効化または無効化」で下図のダイヤログを開き、IIS のチェックボックスの「塗りつぶし」を確認します。塗りつぶされている場合は、 フォルダを展開すると使われている機能が分かります。「World Wide Web サービス」 にチェックが入っているとポート 80 が使われます。Skype アプリは、変更可能ですがデフォルトでポート 80 が使われています。

Windowsの機能の有効化または無効化の設定ダイアログ

An HTTPd の起動

An HTTPd の設定のための起動は、前記のように右クリック、「管理者として実行」で起動して設定しますが、通常作業上の起動は、前記の詳細設定ダイアログ「An HTTPd 起動の確認」欄で、 「起動していなければ起動する」にチェックしておくと CGI スクリプトの内臓プレビューやブラウザでプレビュー（IE と Chrome）時に自動的に起動します。


Next >>PHPのインストールと An HTTPDの設定 >>Top↑