ez-HTML ver 7.47

市販の「ウェブサイト制作ツール」（以下WYSIWYGと省略）は画像なども簡単に挿入でき、レイアウトなども簡単にできますが、その反面font要素を乱用したり何度も編集している間ゴミのようにタグが残ってしまうという問題点があります。 当ソフトウェアは主に手打ちでHTMLソースを記述する人向けのために開発されています。 また、WYSIWYGで制作したHTML文書のちょっとした編集などにも使う事ができます。

また、このHTMLエディタはほとんどすべての規格のHTML文法データを包括しているため、 適切な場所に適切な要素、属性、属性値を自動的に候補として出してくれるため、 文法にも正確で美しいソースをコーディングする事ができるのが特徴です。

また、CGIなどの作成にも最新版から本格的に対応し始めました。 私がCGIのソースを書くときに非常に不便に感じたため、出来る限り手早くラクに操作できるか？という事を考慮して搭載しました。 基本的には私がCGIを書く時にHTMLもひとつでできたら便利かな？という事から搭載したものです。 ので、軽く編集するというよりもWeb制作ならこれひとつで事足りる…という事を今度は重視したいと思っています。

当ソフトウェアでできる特徴的な機能をご紹介します。

• エディタ編集メイン
  • ショートカットキーや、エディタ上のポップアップメニューなどのカスタマイズもできます。
  • 豊富なパターンを表現できる、ショートカット（定型文）が作れます。
  • ファイル検索、Grep検索、正規表現やあいまい表現にも対応した強力な置換
  • SJIS、JIS、EUC、Unicode16LE、Unicode16BE、UTF-8、UTF-8Nの文字コードに対応
  • CR、LF、CR-LFの改行コードにも対応、上記文字コードと連動したエクスポートもできます。
• HTML編集
  • インラインフレームなどの高度なものも簡単に作成する事ができます。逆解析可能
  • 内部ブラウザ（要 I.E.4.0以上）とHTMLとのタブで即座にプレビュー切り替え
  • Internet Explprer、NetScape Navigator4.73、Opera6.0のプレビューが可能
  • Body、Headタグも作ったら一方通行で再編集できないのではなく、逆のタグからの解析も可能
  • スタイルシートをほぼ完備、IE5.5から導入されたスクロールバーなどもプレビュー＋完全に設計
  • 属性値がファイルパスの場合は、「Ctrl+Click」でオープン
  • ドキュメント内にあるカラーコードを自動的に抽出してくれます。
  • 外部スタイルシートの編集にも対応しました。
  • 正確な要素、属性、属性値の候補選択。外部CSSも候補に取り込み可能。
  • 自由度の高い柔軟な設計が可能なフレームページ作成機能
  • 携帯のサイトも製作可能。入力支援によりi-modeなどのCompactHTML, XHTML Mobile Profile1.0, EZweb用のWML2.0に対応。
• アクセシビリティ・ユーザビリティ
  • アクセシビリティを考慮した設計が可能で、見出しレベルのアウトライン化、レベル順序ミスの警告機能
  • スタイルシートの豊富なデータ量と入力支援、データ解析なども搭載。
  • 音声用スタイルシートにも対応
  • 候補支援時に必須属性は★マークで分かりやすく表示。
  • HTML-lintとの連携による正確な文法チェック。
  • Internet Explorer による即時プレビューだけではなくMozilla系でのプレビューも可能に。
  • 背景色と文字色とのコントラストを解析して最適なパレットを表示する事が可能です。
• 画像・マルチメディア
  • クリッカブルマップの作成、または自動的にタグから復元して、また再編集
  • 属性値が、カラーコード、またはイメージタグの場合にはマウスを押し続ける事で画像を表示
  • イメージエディタを登録しておくと、即座にビューワからの起動やFTPも可能になります。
  • MIMEタイプなども細かい分析してオート追記してくれます。
• ネットワーク
  • 起動時にバージョンアップチェックを行う機能が搭載されています。
  • 設定さえできれば、プロキシと通した状態でもFTPアップロードがボタンひとつでらくらくに！
  • FTPはパーミッションを変更してアップロードする事もラクラク。CGIなどで威力を発揮します。
• Perl/CGI
  • Perl文書の細かい色分け（変数・ヒアドキュメント・パターンマッチなど）
  • 「ActivePerl」をインストールする事で、リアルタイムでPerl構文チェックが可能に。
  • 「AnHTTPd」「ActivePerl」との連携での即座な内蔵プレビューが可能です。
  • print文内、ヒアドキュメント内でのHTML候補支援アルゴリズムも充実。
  • スペシャルサイドバー「Perl/CGI」による強力なワークスペース機能
  • Perl文書内で利用されている各種変数、サブルーチンなども候補支援が可能。
  • 「=~」と打った地点で指定した正規表現を候補として支援する事ができます。
• ゲーム要素
  • 入力支援・タグ挿入から独自のアルゴリズムによって経験値を算出します。
  • アクセシビリティ、文法、入力要素・属性すべてを考慮するため、 レベルが高い人はそれなりの知識を持っている…という評価につながります。
  • HTMLの意味を理解している人ほどレベルの上がり方が早くなり、非推奨要素や物理要素を多用している人はなかなかレベルが上がりません。

最新版では「Susie」がインストールされており、 かつプラグインが予めインストールされているのであれば、ダウンロードする必要はありません。 そのままお使い下さい。以下のようなファイル構成にして下さい。

分かりにくい方は、丁寧な解説をユーザ様が作って下さいました。 併せてご参考頂ければと思います（提供：初心者ひろこさん）。

「とほほのＷＷＷ入門」のサイトにあるオフライン版マニュアルがありますが、 このマニュアルと「ez-HTML」は連携できるように杜甫々さんに許可を得ています。強力なヘルプとなるので是非やっておく事をお勧めします。方法は簡単です。 以下のサイトからまずオフラインマニュアルをダウンロードして下さい。

ダウンロードできましたら、 「www」フォルダが解凍されます。また、好きな場所にフォルダを置いてください。 そして、メニューの「ヘルプ」→「HTMLリファレンスの設定」を選んでリファレンスを置いた場所を指定します。 昔は、「data」フォルダ以下に「www」フォルダを置いていましたが、カスタム性に富んだ設定ができるようにしました。 別に操作を間違っても壊れたりする事はありませんので、気楽にやって下さい。

また、「HTML鳩丸倶楽部」との連携も可能です。 「HTML鳩丸倶楽部」は文法に対しての記事が非常に細かく記述されています。

「とほほのＷＷＷ入門」より少しHTMLの知識がある中級者向けに作られた リファレンスですが、文法的な構造が詳しく書かれています。また、その他にも色々雑記があり参考になります。 ここにあるリファレンスをダウンロードすると、「hatomaru-****」というフォルダ内に「html」というフォルダがありますので、 そのフォルダの位置を同様に設定して下さい。標準で使用するヘルプを指定する事ができます。

ver6.72からはPerl/CGI編集機能が強化されています。CGIの編集・制作の際にはぜひお試し下さい。

Perl/CGIモード編集時。構文検証、変数解析なども対応（左図）。「AnHTTPd」との連携でローカル上でもCGIの動作確認もラクラク（右図）。両者ともクリックで拡大図を見る事ができます。

最大限にPerl/CGIの編集を活用するには「ActivePerl」と「AnHTTPd」がインストールされている事が望ましいと言えます。 「ActivePerl」のインストール方法に尽きましては下記の「Another HTML-lint」を使って文法チェックを御覧下さい。

「AnHTTPd」とはローカル上でサーバを擬似的に動かすソフトウェアです。これにより、ローカルでCGIの動作確認を行えるようになります。 ダウンロードからインストール方法は次を参照してください。

1. ここから「AnHTTPd」をダウンロードします。
2. ダウンロード先は取りあえずどこでも構いません。
3. 続いて起動するとタスクトレイに常駐しますので、 アイコンを右クリック→「オプション一般」で「一般」タブに「ドキュメントルート」というのがあるので「c:\Document and Setting\(username)\デスクトップ\www」（最後の\は不要です。）のように管理しているHTMLフォルダのパスを記載して下さい。
4. これで設定は完了です。このソフトウェアは常駐するタイプなのでローカル上でCGI動作確認しておく場合には起動しておく必要があります。
5. 続いて「ez-HTML」（ver6.72以降のもの）を起動します。メニューの「表示」→「詳細設定」→「Perl/CGI」タブ→「プラグイン」ボタンを押すと画面が切り替わります。
6. まずここで「AnHTTPd」と「ActivePerl」のインストール先を指定して下さい。
7. 続いて「AnHTTPdでの設定」を行います。
8. 先程と同じドキュメントルートを指定して下さい（今回の場合は「c:\Document and Setting\(username)\デスクトップ\www」です。）。 アクセス方法は、「http://127.0.0.1/」か「http://localhost/」にして下さい（初期値は後者）。
9. 以上で設定は完了です。このドキュメントルートなどはは使って行くうちに慣れると思います。
10. 正常にファイルが指定されていれば、CGIファイルを開くと、編集画面に「プレビュー」と「構文検証」が追加されているはずです。 （「構文検証」は「ActivePerl」がインストール、「プレビュー」は「AnHTTPd」がインストールされていれば自動的に表示されます。）
11. 後は試しにCGIをプレビューして見て下さい。構文検証で「syntax OK」と出ていれば正常にプレビューされます。 「ページが見つかりません」と言うエラーが出た場合には、「詳細設定」の『ドキュメントルート』と『アクセス方法』の設定の仕方が間違っています。 「取り消されたアクション」というエラーが出た場合には、プログラムに誤りがありますので「構文検証」で確認して下さい。

編集機能に関してはHTMLの要素・属性・属性値の候補支援がそのまま利用可能です。 print文・ヒアドキュメント内で候補支援ができます。HTMLの候補支援をオフにしていると出ません。 Perlの場合はprint文で孤立しているため親要素の判定が場合分けによって判断されます。

print "|<a>トップページ</a>"　　（または、 print qq/|<a>トップページ</a>"/ など）

ここにカーソル位置（|）があった場合には、親要素はなしという事になりますので、文法で設定している要素をすべて列挙します。

print "<a>|トップページ</a>"

ここにカーソルがあった場合には、親要素は「a」として認識され、文法に則した要素のチェックを入れているのであれば（初期値はオン）その要素だけを表示します。

ver5.75から言語定義が大幅に変更になっています（起動速度、メモリ負担軽量のための処置）。 ver5.75より前のバージョンの方を利用している方で言語定義を利用したい場合はお手数ですが、 最新版をダウンロードして下さい。

「data」フォルダの中の更に「language」フォルダにそのまま入れて下さい。

※「11年ぶりのプログラマ」さんがSQL言語パックを作成して下さいました。ダウンロードはこちらから。 これは別オプションで上記のファイルの中には付属されていませんので、各個人でお好きにどうぞ。

※HSP/D/b2e用の言語定義ファイルも作成して頂けました。

その他、作業がはかどるようにユーザの方々から頂いたファイルを公開して、共有したいと思います。

最短アクション・タブツールバー定義ファイル

ver 7.00から搭載された新機能です。今までは内蔵ブラウザによるプレビューはInternet Explorerのエンジンを用いたものですが、 Netscape Navigator, Mozilla, FireFoxに代表されるブラウザ（Geckoエンジン）を使った内蔵プレビューも可能となりました。 内蔵プレビューは状況に応じて3パターン選べます。

• Internet Explorer
• Mozilla(Gecko)
• Internet Explorer + Mozilla(Gecko)

両者同時表示を行った場合は半分づつの領域によるプレビューが可能となります。 Internet ExplorerとMozilla(Gecko)による比較などがしやすくなるでしょう。 ちなみに「Gecko」とは英語で「ヤモリ」の意味です。

Geckoエンジンによるブラウザプレビューには予め、「Mozilla ActiveX Control」（海外サイト）のインストールが必要となります。 まず、リンク先のページの「Get the binaries!」という見出しの所にダウンロードファイルがいくつか存在します。 ダウンロードファイル名は「Mozilla ActiveX Control 1.7.12」「Mozilla ActiveX Control 1.7.7」「Mozilla ActiveX Control 1.7.1」などなどありますが、どれでも良いです。 私は、「Mozilla ActiveX Control 1.7.1」をダウンロードしてインストールしております。

インストールが完了したら、ez-HTMLを起動して、メニューの「詳細設定」→「内蔵プレビュー」を選びます。 ここの「Mozilla ActiveX Controlのインストール先」にインストールフォルダを選んで下さい。 プログラム側が必要なdllがそのフォルダにあると認識すると、「初回プレビュー時の利用するブラウザエンジン」の残り2つが選べるようになります。 また、実際の内蔵プレビューにてブラウザプレビューの切り替えが可能となります。

Geckoエンジンを搭載した「Mozilla ActiveX Control」はまだ開発途上段階にあります。予期しないエラーが発生する事も考えられます。あくまでもプレビューのみの目的として下さい。 Mozilla(Gecko)のブラウザエンジンは非常に重くなりますので、Windows9x系ではやや厳しいかも知れません。 また、初回プレビュー時には時間が数秒かかりますのでスプラッシュウィンドウが表示されます。スプラッシュウィンドウが不要な方は「詳細設定」で設定する事が可能です。

ver6.50から「HTML-lint」を使う事によって即座に現在編集している文書の文法をチェックする事ができるようになりました。 暫定版なので、今後もより発展させて行く予定ですが、「HTML-lint」を使うには以下の3つが必要です。

• Active Perl
• jcode.pm
• Another HTML-lint

すでにインストールしている方はそのまま利用できます。初めて利用される方のために詳細な手順を記載しておく事にします。

1. まず、「Another HTML-lint」のダウンロードページがありますので、ジャンプします。
2. 表の一番上にある「フルパッケージ」の「htmllint.lzh」をダウンロードします。「*.lzh」がWindows用になります。
3. これを解凍して、適当に保存してください。（例 : 「c:\htmllint\」）
4. フォルダ内にある「htmllintenv」というのを「htmllint.env」というファイル名に変更しておいて下さい。
5. 続いて、「Active Perl」（ローカルでCGIを動かすためのエンジン）をインストールします。詳細なインストール方法はこちらを御覧下さい。
   ※「Active Perl」を入れると、ローカルでCGIのテストができたりするので、サイトを制作している人はインストールしておく事をお奨めします。
   ※ 私は「c:\perl\」に作成しております。
6. 「Active Perl」が正常にインストールされているかどうかを確かめます。「DOSプロンプト」を起動して「perl -v」と打ってください。バージョンが出れば成功です。
7. 最後に「jcode.pm」をダウンロードします（「jcode.pl」でもできるみたいです。）。詳しい解説は「jcode.pmのダウンロードと組み込み」を御覧下さい。
8. 以上で完成です。確認するためには、コマンドで「perl c:\htmllint\htmllint c:\index.html」という風に打ってみてください。採点してくれれば成功です。「c:\index.html」は試しに適当なHTMLを作っておいて下さい。
9. もし、htmllintがインストールされていると、HTML編集時にツールバーに「HTML 文法検証」が出てきます。

すべてが終了したら次に「ez-HTML」での利用の仕方です。すでにインストール済みの方はこちらからお読みになって下さい。

1. まず、「ez-HTML」を起動し、メニューの「ヘルプ」→「HTML-lintの設定」を選びます。
2. そして、「htmllint」があるフォルダを指定してください。今回の説明の例だと「c:\htmllint\」になります。
3. 以上で終了です。すでに起動中の方は一度終了して再起動してください。

↓以下のように「HTML 文法検証」ボタンが追加されています。

殆どの規格を記述できる仕様になっています。HTML3.2/4.01、XHTML1.0/1.1/Basic、Compact HTML、ISO/IEC 15445が 組み込まれています。「ver 6.40」をご利用の方で、良く分からない方は、「HTML 4.01 Trasitional」に設定しておいてください。 「<」を押すと自動的に候補を出して絞ってくれます（ダウンロード時からすでにできます）。 それに続いてスペースキーで属性、属性値も候補を出してくれます。

尚、ツールバーからの挿入は基本的に、HTML4.01 Transitionalになります。

「<」を入力した地点で候補を出してくれます。 スペースキーで属性、属性値も連続で支援、エンターキーで入力すると、<p>|</p> のようになります。 XHTML1.0を指定している時には、<br /> のようになります 尚、詳しい設定の仕方は「ヘルプ」をご覧になって下さい。 取りあえず、読み方が分からない人や勉強したい人には、 「ez-HTMLの使い方」の簡単な解説か、検索エンジンなどで調べて見てください。

ちなみに現在のHTMLの最新版は、HTML 4.01 ではなく、XHTML 1.0 です。 また、このDTDに関しては、k16氏が作成されたものなどございますので、勝手に引用する事はお控え下さい。

DTDとは簡単に何かと言いますと、 「Docment Type Definition」の略で「これこれこういう文法に従ってHTMLを書きなさい。」 というような設計書みたいなものです。 DTDの中身を見てもコンピュータが処理しやすいようになっているので、初めてみても理解はできないと思いますので、 詳しくは検索エンジンなどで調べて見て下さい。

尚、Internet ExplorerのDTDは「Another HTML-lint gateway」の制作者である「k16」氏の許可を得て掲載しております。 MSが対外的に公表している(していた)資料と観察だけから作成したものであり、必ずしも実装と一致してないとの事ですので、その辺りのこともご考慮下さい。

XHTML Basic / XHTML 1.1は通常見た感じではモジュール化されていますが、 croさんが情報提供して下さいました。完全記述DTDがダウンロードできます。

From DFJ（閉鎖？）

DFJさんのサイト。スタイルシートやJavaScriptのサンプル集などもありすぐに使えます。

初心者の館 ホームページを持とう！

初心者向けに構成されたサイトです。サイト作成を一から始めたい人はこちらがオススメです！

ホームページ作成 Note

サイト構築からez-HTMLを使ったウェブサイトの作り方など、初心者の方でもわかりやすく記載されております。 情報量も非常に多く参考になります。

• 鈴鹿医療科学大学
• 横浜商科大学 柳田研究室
• 札幌市 市民まちづくり局 情報化推進部
• 研修講師blog〜研修裏話
• 生活便利情報
• 有限会社 SPHINX
• 株式会社 読売情報開発大阪
• (株)損保ジャパン・システムソリューション
• (株)システムリサーチ