ez-HTML オンラインマニュアル

HTML

編集ドキュメント内に使われているカラー情報を読み込むには?

編集中のHTMLドキュメントで、カラー情報を調べたりする事ができます。 HTMLドキュメント内で「#FF0000」「#00FF00」「#0000FF」など、そのページに使われているカラー情報が 分かれば一々調べなくて済みます。そのような場合にはスペシャルサイドバーを使う事になります。

メニューの「表示」 » 「スペシャルサイドバー」 » 「カラーボックス」を選んで下さい。 そうすると、カラフルなタブページが出てきます。ここの一番上は基本16色、 次が、「ドキュメント内で使われているカラー情報」になります。その下は、セーフカラーです。 256色環境時でもそのまま色が表示されるカラーとなります。

編集ドキュメント内のhref属性などで参照されているファイルを開いて編集するには?

相対パスでハイパーリンクを貼っている時などに非常に便利な機能です。 「index.html」を現在編集していたとして、そのHTMLドキュメント内に「software.html」というハイパーリンクが 貼ってあったとします。そのような場合、ファイルを編集したくなる時がありますが、一々ファイルオープンボタンを 押してファイルを選ぶのが面倒!という方のための機能です。「FrontPage」にあって自分が便利だと思ったので追加しました。 この場合で言いますと、「Ctrl」キーを押しながら「software.html」のどこでもいいのでマウスを左クリックして下さい。

そして、そのファイルが存在すると、新しく編集する事ができるようになります。「../」というのがあっても大丈夫ですが、 基本的に、ローカルでのフォルダ管理がサーバ上と同じような配置になっているのが前提です。大抵の方はなっているので心配はないと思います。 また、ハイパーリンク先が「#top」とかなっている場合、"<a name="top">"があればそこへ自動的に移動します。

クリッカブルマップの利用方法、または再編集

クリッカブルマップの作成には、出力は通常のソフトにも良くありますが、 作ったクリッカブルマップを再度編集するというのは、WYSIWYGタイプならできますが、タグ専用タイプのものでは、 あまり見かけないので、実装しました。尚、PNG、GIFの読み込みには前回にも言いましたように「Susie PlugIn」が必要です。

多角形(Poly)を作成したい場合には、 上のツールバーにある、多角形のボタンをクリックします。そうすると、画像内でカーソルが変わるので、ステータスバーの左にあるのに従って下さい。 どんどん線を結んでいき、終わりの所で右クリックを押します。そうすると、次にリンク先とALT属性を聞いて来ます。 無視しても構いません。

リストから選ぶと、適応されている図形を見る事ができます。リストは100個までです。 多角形は頂点数が最大100までできます。そして、修正も簡単です。

<img src="sample.gif" border="0" alt="typingatoz2.png(9389 byte)"
width="386" height="157" usemap="#imagemap">

   <map name="imagemap">

   <area shape="rect" coords="146,117,225,146"
   href="index.html" alt="">

   <area shape="poly"
   coords="309,63,367,40,354,104,309,63"
    href="hrei.html" alt="">

   <area shape="circle" coords="198,36,11"
   href="score/score.pl" alt="">

</map>

きちんとすべて解析して復元してくれます。一応、引用符(")などはなくても構いませんが、 書き方の形式としては上記のようなものが理想です。

ブロック要素などを挿入時に自動的に改行+インデントを入れたい!

例えば、「blockquote」などをツールボタンや候補から貼り付けると、

<blockquote>|</blockquote>

このような感じでした。しかし、ver6.43からはオートインデント自動計算により、 より書き方に対して細かく設定できるようになりました。メニューの「カスタム」 » 「HTMLの文法と仕様」 » 「HTMLの文法設定」を選びます。

この「候補設定」のタブを選んで、改行+インデント込みにしたい要素を指定します。尚、左の要素リストは、現在自分が基準としているHTMLの規格(HTML 4.01 Transitional / XHTML 1.1など)の ものになりますので、「FrameSet」なども使う人は独自で「追加」ボタンを押して下さい。そして、インデント幅を指定して下さい。これで設定は完了です。

そして、適応した要素のツールボタンがあるのであれば、それを押して見てください。何も文字列が選択されていなければ、「インデント幅」がスペース4つ分ならば、

<blockquote>
    |
</blockquote>

文字列が選択されているのであれば、

<blockquote>
   abcdefg...
</blockquote>

のようになります。文字列を選択している場合は複数行あった場合にも対応し、 その選択された行全体にインデント幅分のインデントをかけた上で前後をタグで挟みます。

「とほほのWWW入門」とのアプリケーション間の連動を考える

「とほほのWWW入門」のオンラインマニュアルがあれば連動する事ができます。 「タグ解析」では要素パネルクリック時に、またはエディタ上ではF1キーでヘルプへ即座に移行でき、 確認する事ができます。「とほほのWWW入門」のサイトから、マニュアルをダウンロードして下さい。 それを解凍すると「www」フォルダが出来ます。次に、「ヘルプ」 » 「HTMLリファレンスの設定」を選びます。 そこで「とほほのWWW入門」にチェックを入れ、「www」フォルダの位置を入力して下さい。 そうすると使えるようになります。また、中級者以上の人のためには「HTML鳩丸倶楽部」のリファレンスも水無月ばけらさんの許可を得て使えるようにしました。

サイトマップを階層化してHTML化する

ver6.55から可能になった機能で、サイトマップとは複雑なウェブサイトの階層を見やすくするために設けるページの事です。 良く、ウェブサイトの一覧を一目で見渡せるようにしているものです。 このソフトウェアにはサイトマップをツリー構造で一覧できる機能を備えています。 ディレクトリを指定する事で、そのディレクトリ以下にあるHTMLファイルをすべて検索します。 サブディレクトリ以下までも階層化します。スペシャルサイドバーにて一覧を取得できます。

また、HTML化するには、ツールバーにある一番右のボタン(HTMLドキュメントのようなアイコン)をクリックします。 そうすると、HTML化してくれます。尚、このソフトウェアでもできる事に限界があり、 デザイン等はユーザにすべて設計できるような仕組みになっています。ul要素により階層化を実現しています。 また、HTMLドキュメントにあるタイトルを取得して、ハイパーリンクを設定するようになっています。 指定したHTMLモード(HTML 4.01 TransitionalやXHTML 1.0 Strictなど)によって出力HTMLファイルもきちんと 異なるようになっているため、安心です。

出力HTMLファイルは試しに作成して見てみて下さい。 ディレクトリの部分のリストにはスタイルシートで編集できるように"<li class="dir">"のようになっています。 ファイル部分には特に指定はありませんので、 もしディレクトリ部分とファイル部分でリスト画像などを使い分けたい時には次のように記述してみてはいかがでしょうか。 以下ではスタイルシートの「list-style-image」を使ってリストの画像を変更しています。

li
{
    /* ファイル部分に適応させたいスタイルシート */
    font-family: Times New Roman;
    font-weight: normal;
    list-style-image: url('file.gif');
}

li.dir
{
    /* ディレクトリ部分に適応させたいスタイルシート */
    font-family: sans-serif;
    font-weight: bold;
    list-style-image: url('directory.gif');
}

注意したい点としては、ul要素の中にul要素を書く事は文法上許されていません。ul要素の中に記述できる要素はli要素のみです。 従って、これらのリストを使って階層化を実現する時には、li要素の中に更にul要素を書くという形になっています。 ですから、ディレクトリ部分のli要素のdirクラスはファイル部分も包含してしまい、適応されてしまいます。つまり、

li.dir { font-weight: bold; }

という最も簡単な例を考えてみますが、このようにした場合は、ファイルもすべて太字になってしまいます。 なので、li要素にも直接スタイルシートを適応する事で区別を図ってください。 スタイルシートとHTMLをある程度理解していないとかなり難しいとは思いますが、ファイル部分に適応させたいスタイルシートはli要素に直接指定、 ディレクトリ部分に適応させたいスタイルシートはdirクラスに指定、という形を取ってください。

HTML(タグの処理)

タグの適応範囲を確認するには?

例えば、table要素などは、場合によっては複雑にネストする事が出てきます。 この場合のネストと言うのは、table要素の中に更にtable要素などを入れる事を言います。 そのような時に、ここのtable要素はどこまでかかっているのか? そして、tr要素はどこまでかかっているのだろうか?とふと知りたくなる時があります。

そのような時に範囲を選択してくれます。タグ内のどこでも良いのでカーソルをおきます。 その状態で、メニューの「スペシャル」 » 「タグの適応範囲の確認」を選んで下さい。 そうすると、範囲を選択してくれます。尚、タグ内にカーソルが ない時には自動的に一番内側にあるタグ範囲を解釈します。 尚、エンプティータグ(hr,br要素など)はそのままタグが囲まれるだけです。

追記ですが、これをポップアップメニューに登録して右クリックから呼び出せるようにすると 非常に便利だと思います。ちょっとした時に対応タグのみを消してくれます。

タグを無効化してテキストだけの形式にする

タグを無効化というのは、"< *** >" のものをすべて取り去ります。 よって最後にはテキスト文書しか残らないという事になります。 また、同時に実体参照文字も変換してくれますので、プログラムコードをHTML形式で処理する時などに有効です。 メニューの「スペシャル」 » 「選択部分のタグの無効化」を選んで下さい。

外側タグの削除

通常は、開始タグがあり、終了タグがあります。ドキュメントが長くなってきたり、 対応関係が分からなくなった時に有効です。例えば、次のような場合を考えて見る事にします。

<a| href="http://www.w-frontier.com/"><strong>こちら</strong></a>
がウェブサイトになります。

だったとします。"|"はカーソル位置だと思って下さい。この時に、メニューの「スペシャル」 » 「カーソル内にあるタグと対応タグを削除」を選んで下さい。そうすると以下のようになります。

<strong>こちら</strong>|がウェブサイトになります。

このようになります。

タグ解析機能を使ってドロップダウン形式で編集してみる

メニューの「スペシャルサイドバー」から「タグ解析」にチェックを入れてください。 そうすると、タグ解析用サイドバーが出てきます。

  1. エディタ編集時にタグ内にキャレット(カーソル)があり、 かつ「スペシャルサイドバー」の「スペシャル」タブを 開いている場合には、自動的に中身を解析してくれます。
  2. 入力してエンターを押すか、マウスで別の所をクリックするとデータは反映されます。
  3. 元に戻したい時には、エディタの方にフォーカスを当てて「元に戻す」で元に戻して下さい。
  4. ver5.32あたりからスタイルシートをよく利用する方のための入力支援が追加されています。属性の所で、スタイルシートで使われる属性が選べるようになります。
  5. XHTMLモードボタンをオンにすると、簡単な解析しかしてくれませんが、"<hr noshade="noshade" />"などのように出力してくれるようになります。

このような仕組みになってます。詳しい人だけで構いませんが、HTMLのバージョンはHTML 4.01 Trasitionalに併せて製作されております。 詳しい方は、「data」フォルダの中にある「attr」フォルダの中を編集して見て下さい。

FrontPageなどで編集した時に発生する余計な空白を取り除きたい!

何かひとつだけ浮いてますが、「FrontPage」などでは設定をデフォルトのままにしていると、 インデントが自動的についてしまったり、設定でインデントを「0」にしていても、改行の前に意味のない空白が付加 されたりする事が良くあります。無駄な空白は容量を重くし、表示速度にも微妙にかかわってきますので、 両端の空白を綺麗に取り去る機能があります。文字列処理ですが、メニューの「検索・置換」 » 「特殊文字列操作」 » 「両端の空白を取り除く」 を選んで下さい。スペース、タブ文字が行の先頭と最後にあれば刈り取ってくれます。

厳密な文法と構造で記述(W3C準拠な人のため)

文法に従ったきちんとしたHTMLを書きたい人には…

文法に従ったきちんとしたHTMLを書きたい人には制御をかける事が可能です。 例えば、「HTML 4.01 Trasitional」ではfont要素は使えますが、「HTML 4.01 Strict」では使う事ができません。 そういったW3Cなどが勧告している文法に従ってHTML文書を作成したい人には更にデフォルト状態から、 メニューにある「カスタム」 » 「HTMLの仕様と文法」 » 「HTMLの文法」 » 「親要素が…」にチェックを入れて下さい。 これで、完全にそのモードで従ったものしか許可しなくなります。文法的に不正確なものを挿入したり しようとすると、警告ダイアログが出現します。「無視」ボタンで強制的にはできます。

見出しレベルに沿ってアウトラインを生成する

HTMLドキュメントを見出しレベルに沿って正しく記述されている場合、それらをレベルによって階層化し、 ツリービューで表示する事が出来ます。スペシャルサイドバーに埋め込まれて、ウィンドウを取外しもできるので、 便利な人には便利な機能です。 メニューの「表示」 » 「スペシャルサイドバー」 » 「アウトライン解析」 を選んでください。もし、レベルが飛んでいる場合は、うまくツリー化できません。例えば、H1要素の後にH3要素が出て きたりすると、プログラム側が解析ができない状態になってしまいますので、きちんとレベル階層化されている 文書に対して利用してください。

見出しレベルを規則正しく書くための手続き

ver6.30から搭載されている機能になります。見出しレベルをレベルを規則正しく振っている場合には、 現在のカーソル位置までの見出しレベルがいくつだったか?というのをふと知りたくなる時が出てきます。 そのような時にツールボタンで飛んだレベルの見出しを挿入しようとするのを防ぎます。 例えば、現在、h1までしかレベルがないのに、次にh3要素をボタンで入力しようとした時に警告を促すようにします。 また、入力候補時にも「h1」「h2」しかこの場合、候補に出さないようにします。

文書型宣言の挿入

ver6.30から加わった機能になります。 ただ、良く分からない方や高度だと思う方は操作しないでも構いません。 W3Cの規格に準拠したページや、XHTML作成時には必要となる<!DOCTYPE ***>というものを操作します。 一応、この宣言上で「タグの再編集」を行ってもウィンドウは表示されますが、メニューから直接選ぶと、 様々なHTMLの規格を選べます。選んで「OK」を押すと、文書内に文書型宣言があればその部分を自動的に解析して、 書き換えてくれます。

DTDの読み方が分からない!

DTDというものは、規格で定義されているものと言っても、読めるようになるには、 多少「慣れ」が必要です。さほど難しくはありませんので、簡単な説明だけをする事にします。

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

というのは、「実体参照」を意味します。このように定義すると、DTD内部では、「%heading;」と 書かれている部分が「H1|H2|H3|H4|H5|H6」に置き換わります。何かセット単位で扱われている場合には、 このようにすると、手間が省けますので、このように「実体参照」というものを用います。

<!ELEMENT DL - - (DT|DD)+              -- definition list -->

というのは、「要素(ELEMENT)」の定義を意味しています。この場合は、「DL」という要素の中に書ける子要素が「DT」または「DD」である事を意味しています。 「|」は「or」の意味です。つまり、「DL」要素の中には、「DT」か「DD」しか書けないという事になります。また、Perlなどの経験がある方や、正規表現というものを 聞いた事がある方は、「+」は「1つ以上連続している」という事は御存知だと思います。全く同じ意味になります。よって、 「DT」または「DD」が「DL」の中には1つ以上存在する…という事になります。また、"--"〜"--"まではコメントとして扱われます。 また、「DL」の次にある"-"と"-"というのは、省略可能かどうかを意味しています。「O」だと「Omitted」の頭文字という事で省略可能という事になります。 p要素などは、HTML 4.01 Trasitionalなどでは、終了タグが省略可能なので「- O」というようになっています。 "<!ATTLIST *** >"なのですが、これは属性の定義になります。それで、基本的に、実体参照を置き換えた後に、 3つをセットとして考えて行きます。例えば、

src         %URI;          #REQUIRED

というのが、「IMG」の属性の定義の一部です。これは、"src"という属性は、"%URI;"="#PCDATA"に置き換わり、"#PCDATA"というのは、 「一般文字列」を意味すると思って下さい。そして、"#REQUIRED"とありますが、"#IMPLIED"なら、「別に書かなくても良い」というものです。 また"#REQUIRED"は「その属性は書かなければならない」というものです。"#FIXED"はその属性は固定属性値を持つという事になり、 "#FIXED"の場合には、その次に更に「'***'」というものが書かれていますが、滅多にないのでそこまで意識しなくても良いと思われます。

スタイルシート

スタイルシートを編集する

スタイルシートを編集する時には、メニューの「スペシャル」 » 「スタイルシートの編集」で行います。 現在編集中のドキュメント内からもある程度解析をしてくれます。クラス、ID、style属性のものは予めウィンドウ表示時に 表示されているハズです。「出力フォーマット」は出力形式を選びます。また、「編集時フォーマット」は個々のデータの表示形式を決めます。 また、登録しておくと、次回起動時にも記憶される事になります。

スペシャルサイドバーのスタイルシートウィンドウの利用

ver6.32から搭載されている機能で、スタイルシートファイルの編集・解析をビジュアルに分かりやすいように設計する事ができます。 入力の部分でデフォルトでは殆どのスタイルシートを貼り付ける事ができます。また、このツリーの編集方法は次を御覧になって下さい。 「解析」ではスタイルシートファイルがあれば解析を行います。要素、クラス、ID別にアイコンが別表示されるようになっており、 各種項目をダブルクリックで、その箇所へエディタカーソルが移動しますので、位置などが分かりにくくなった時にご利用下さい。

スペシャルサイドバーのスタイルシートを編集するには?

スペシャルサイドバーにある「スタイルシート」の「入力」タブにあるツリーは編集する事ができます。 これは、「data」フォルダにある「css.txt」を編集します。編集の仕方には、いくつか規則がありますので、 それに従って編集してください。また、編集方法を誤ってもエラーにはなりませんが、うまく入力されなかったります。

  1. タブを使ってツリー階層化してください
  2. レベル0の階層(一番上の階層)にはカテゴリを記述します(「フォントなど」)
  3. レベル1の階層にスタイルシートの属性を記述します
  4. レベル2の階層に必要に応じて値を記述します。いくつでも構いません。
  5. IE/NN専用の場合には、レベル1の階層の属性の最後に[NN4]、[IE5.5]のように記述し、 読み込み高速化のために、先頭に「^」を付けてください
  6. 現段階ではサポートされていない属性は最初に「*」を付ける事でアイコンが変わります(音声系など)
  7. 属性に対する値には英語では分かりにくい方のために日本語で注釈を付ける事ができます。 そのような場合には、「ゴシック : sans-serif」のように、「(日本語注釈):(値)」のように記述します

以上の手順で作成します。ただ、デフォルトでは殆どのスタイルシートをサポートしていますが、 その分動作が鈍ってしまう… という方は削るとツリーの読み込みも早くなります。

また、デフォルトでは、「font-family: sans-serif;」のように入力されますが、変更したい場合は、 「css.txt」の先頭1行の「%p」「%v」をうまく変えて下さい。 「%p」が「font-family」(属性)、「%v」が「sans-serif」(値)に例えば該当します。 また制御コードとして、「\t」(タブ)、「\n」(改行)が使えます。この通りに出力します。

XHTML

XHTML形式へ移行(対応)するには?

これは、HTMLにある程度詳しい方か、XHTMLというものを多少なりとも理解している方はお読みになって下さい。

現在のHTMLの最新版は「HTML 4.01」ではなく、「XHTML 1.0」という規格になります。 従って、XHTML 1.0形式で編集したい方も沢山いるのではないか?と思われますので、そういう人のためのモードが存在します。 「カスタム」 » 「HTMLの仕様と文法」でXHTML1.0など自分が記述したい規格を選んで下さい。

XML宣言の編集

XML宣言の編集はXML宣言部分で「タグの再編集」を行うか、 メニューの「スペシャル」で「XML宣言」を選びます。

文字コードなどはファイルを開いた時の文字コードが自動的に適応されます。

ユーザカスタム

デフォルトのショートカットキーではファイル操作などはお馴染みのですが、 HTML関連は操作しづらいと思いますので、メニューの「カスタム」 » 「ショートカットキーの設定」タブで設定を行って下さい。 尚、すでに使われているキーがあれば警告を促してくれます。その場合には、「既存割り当てキーチェック」にチェックを入れて下さい。

ツールバーのカスタマイズ

「HTMLツールバー」と、「補助HTMLツールバー」はツールボタン数が非常に多いですので、 自分が良く使うものとそうでないものとにカスタマイズする事ができます。ツールボタンの一番右にある「▼」を 押して下さい。そうすると、編集画面が出てきますので、後は分かると思います。

エディタ上を右クリックした時に出現するポップアップメニューのカスタマイズ

エディタ編集画面上では、デフォルトでは「コピー」や「貼り付け」などのポップアップメニューが出てきますが、 これも独自にカスタマイズする事ができます。「大文字→小文字」などは良く使うと思います。そういう場合には、 メニューの「カスタム」 » 「ポップアップメニューのカスタマイズ」で設定します。基本的にメニューの移動もマウス操作ですべてできます。 そんなに難しくはないですが、ヘルプなどにも書いてありますように、グループ化されているメニュー項目の登録はしないで下さい(文字コードなど)。

そうなのです。デフォルトではなるべくマシンに負担をかけない+便利な機能を見せようとしているために、 メニューアイテムのアイコンはありません(タグ解析などのポップアップメニューは別です)。 メニュー » 「詳細設定」 » 「エディタ」 » 「オプション」 » 「メニューにアイコンを付けない」のチェックを外して下さい。 そうすると、メニューアイテムにきちんとアイコンが付きます。また、これは起動時間にも殆ど影響はありませんので、 気にせずに外観を気にする人に応じて設定して下さい。HTMLメニューの方はアイコンあった方が一見して分かりやすいと思います。

定型文の登録の仕方、有効な利用の仕方

定型文を登録しておくと、自分で頻繁に使うものとかを作成する事ができます。 ショートカットの設定、ツールバーへの埋め込みなど高度な事もできるので、編集の幅が広がります。 基本的には、メニューの「編集」 » 「定型文登録」を選びます。そうすると編集画面が出てきます。 そこで、「定型文タイトル」というのはメニュー項目にその文字列が反映されます。「定型文」に登録します。 パターンを覚えるとさほど難しくないですので、規則を覚えてしまった方が早いと思います。

|
定型分挿入後のカーソルの位置を設定します。無い場合には最後にカーソルが移動します。
\%
選択された文字列があり、かつその後に、カーソルを指定したい時に使います。
\n
改行したい時に使います。
\t
タブ文字として扱われます。
\d
隠しオプション。現在の行のインデント文字列を代入します。内部で使われているのもので使用は非推奨。
\i
隠しオプション。HTML用。指定したインデント文字列を代入します。内部で使われているのもので使用は非推奨。
\&
&を文字として使う場合の制御文字です。
\|
|を文字として使う場合の制御文字です。
\*
アスタリスクを文字として扱う場合に利用します。
\/
スラッシュを文字として扱う場合に利用します。
\\
\を文字として使う場合の制御文字です。
/* */
メッセージボックスで質問ダイアログが出せます。
[ ]
メッセージボックスで初期値として入力させておく文字列を[ ]で括ります。

このような感じになります。例えば、address要素をツールボタンを押したのと同じような感じにしたいのであれば、

<address>|</address>

のように登録します。それでは少し高度なものも考えて見ましょう。

<a href="%">|</a>

文字列が選択されていない場合は、普通に「%」は無視され、"<a href=""></a>"と貼り付け、 カーソルの位置を「|」に合わせます。文字列が選択されている場合は、"<a href=""></a>"を前後で囲み、かつカーソルの位置を「%」の位置へ持って行きます。 通常は、「|」だけですと、選択された文字列がある場合に、カーソルの位置は最後になりますが、 選択して尚かつ、カーソルを移動させたい場合にはこれを利用します。

<script language="javascript">\n</script>

などとします。Perlなどではお馴染みの改行マークです。と言ってもこの場合は、 CR-LFの改行です。複数行で貼り付けたい方はこれを使います。

<a href="/*URL*/">|</a>

「/* */」で囲まれた部分は質問ボックスが出てきます。実際に試して見て下さい。

<a href="/*URL[http://]*/">|</a>

というのも確認して見て下さい。質問ボックスの初期値が[ ]内で囲まれたものとなります。

携帯電話用ウェブサイトの作成

i-mode用コンテンツの作成

i-mode用サイトを作りたい方にもある程度操作を円滑に進めるための支援があります。 i-modeは一般のウェブサイトで使われているHTMLの規格とは異なります。 携帯用一般規格である「Compact-HTML」(通常CHTML)とは別にNTTDocomoが別途規格したHTMLが存在します。 例えば、入力モードのistyle属性や認証用のutn属性などがそれに当たります。 こういったi-mode用コンテンツを作成するために特別な支援を搭載しています。 メニューの「カスタム」 » 「HTMLの仕様と文法」 » 「i-mode HTML ver5.0」を選ぶと自動的にi-mode用のコンテンツを 作成する際に必要な要素(タグ)しか支援に出てこなくなります。i-mode向けコンテンツを作成している方は利用してみてください。 尚、ver1.0〜5.0まで存在するのですが、すべてを作成すると容量の都合上情報量が大きくなってしまうので、 最新のver5.0のみとしました。

ezweb用コンテンツの作成

i-mode同様、auで使われている「ezweb」のコンテンツを作成する支援も搭載しています。 その場合には「カスタム」 » 「HTMLの仕様と文法」 » 「WML2.0」を選んで下さい。 また、「XHTML Mobile Profile 1.0」も有効ですので詳しい方のみ利用下さい。

その他

簡易FTPによる、ボタンひとつで転送・ウェブページの更新

ウェブページの頻繁な更新が面倒な理由に「FTPツールでのアップロード」があげられます。 自分も慣れてくると、この操作は面倒になってきました。そういう訳で実装されています。

「FFFTP」などの「FTPツール」と呼ばれるもので通常はアップロードしていると思いますが、 「ez-HTML」の内蔵FTP機能を使えば、編集時の下の方にあるボタンひとつで自動アップロード+更新をしてくれますので、 非常に時間の短縮にもなり、アップロードが面倒な方もラクになります。

ただ、何度か「FFFTP」で設定していない方は混乱してしまいますので、「FFFTP」などである程度慣れてから 設定を変更して下さい。操作方法は以下になります。

  1. メニューの「表示」 » 「詳細設定」を選び、「インターネット」 » 「ネットワーク接続」を選んで下さい。
  2. ホスト、ポート(FTPは大抵21番)、ユーザ名、パスワードは必須です。「FFFTP」などと同じような感じで設定して下さい。
  3. ベースホストパス、ベースローカルパスを入力します。ホストはサーバ側、ローカルは自分のPC側です。ホスト側は分かりにくい場合は、 「FFFTP」を起動してサーバへ接続し、右上の方に「/home/」などというのがあると思いますのでこれを記述します。
  4. ベースURLは、ブラウザで表示した時に表示されるベースとなるURLを書きます。間違えても実際見ればすぐに分かります。
  5. これで設定完了です。右にあるチェックは最初は変更しなくても一番理想的に動くようになっています。

これで、試しにインターネットに接続されている状態で、編集画面下の方にある「FTP」ボタンを押してみて下さい。失敗ダイアログが出たら何かが間違っています。 「FFFTP」でできるのであればこちらでもできるはずですので、もう一度設定を良く見て下さい。更に詳しくは「ヘルプ」に書いてありますのでご覧下さい。

PHPファイルなどのプレヴュー

掲示板投稿No.3703/dailangさんが書きました。

///////////////////////////////////////////////////////////////
//
// ウェブページをHTTPデーモン経由で閲覧するためのスクリプト。
//
///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
/* 設定方法

1. このスクリプトを適当な場所(例えば「D:\phttpd.js」)に保存する。

2. このスクリプトの環境変数を書き換える。
$docRoot の変更はおそらく必須。$host, $browser はそのままでも可。

3. ez-HTMLのメニューから次の項目を選ぶ。
「カスタム→外部アプリケーション起動→外部アプリケーションの編集」

3-1. 「アプリケーションパス」 =「C:\WINDOWS\system32\wscript.exe」
3-2. 「コマンドライン」 =「D:\phttpd.js %p」
3-3. 必要なら「割り当てるキー」=「F2」など
3-4. 必要なら「タイトル」 =(タイトルを付ける)

*/
///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
// 環境変数

// ドキュメントルート
var $docRoot = new RegExp( "c:/www" );
// アクセス方法
var $host = "http://127.0.0.1";
// ブラウザのファイルパス
var $browser = '"C:\\Program Files\\Internet Explorer
\\iexplore.exe"';

///////////////////////////////////////////////////////////////

var $path = WScript.Arguments.item(0);
$path = $path.replace(/\\/g, "/");
$path = $path.replace($docRoot, $host);

var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.Run($browser + " " + $path);

どうもありがとうございました。 また、最新版ではPHPもPerlと同様に操作できるようになっています。

文字コード(JIS/SJIS/EUC/Unicode/UTF-8/UTF-8N)を扱っての編集 (高度)

文字コードは、UnixとWindowsとの間で操作を行っている方にとっては大きな問題点と言えると思います。 そんなコードを変換してくれるシステムを搭載してみました。「Windows」では主に「Shift-JIS」というものが、 「Unix」「Linux」では「EUC」というものが、メールなどでやりとりされている形式は「JIS」、 その他に世界中の言語を共通化した「Unicode」というものと、それをネットワークに特化させた「UTF-8」というものが存在します。

「Unicode」の中にも更に「ビッグエンディアン」「リトルエンディアン」というものがあり、「Unicode」はすべて2バイト文字ですが、 バイトの書き方によって分けられています。2バイト以上のデータ量を持つの数値データを記録したり転送するときには 1バイトごとに分割しますが、これを最上位のバイトから順番に記録/送信する方式が「ビッグエンディアン」です。

反対に、最下位のバイトから順番に記録/送信する方式を「リトルエンディアン」です。 モトローラ社のマイクロプロセッサでは、メモリに数値データを格納する際にビッグエンディアンで記録しますが、 インテル社のプロセッサはリトルエンディアンで記録します。 これについては他のサイトをお読みになって下さい。

設定方法なのですが、ファイルメニューの「表示」で文字コード、および改行コードの設定ができます。

  1. メニューの「ファイル」 » 「文字コードの設定(高度)」を選びます(サブメニューが出てきます)。
  2. 「ファイル読み込み時に文字コードの自動認識を行う」にチェックを入れます。
  3. 「EUCで保存する」にチェックを入れます。
  4. 「改行コードLFで保存する」にチェックを入れます。

これで設定は終わりで、自動的に読み込んでくれます。また、ファイルを開く時に文字コードを判別するので、 判断+変換に時間はかかってしまいます。特に「UTF-8」はドキュメントサイズが大きいと時間がかかってしまいます。

また、「Unicode16BE」「Unicode16LE」「UTF-8」は出力時にBOMと呼ばれるヘッダーを同時に出力します。 このヘッダーは「ez-HTML」で扱えるだけの特有の形式ではなく、正式に規格されているものです。 高速に判断するためにBOMを付加しています。現行のバージョンではUTF-8NとはBOMがない規格です。 これを「ez-HTML」で判別するためにはメニューの「表示」 » 「詳細設定」 » 「ファイルシステム」 » 「標準設定」から「UTF-8Nの可能性を考慮する」にチェックを入れて下さい。

言語用に特化したエディタへの変遷を考えてみる

一応、HTML専用ですが、言語用としても扱う事が可能です。特にPerl-CGIなどの編集にも向いています。 Perl編集の時にはそのままHTMLツールバーが使えます(デフォルトでは)。ですから、掲示板のスクリプトなどの編集にも向いています。 勿論、ダウンロードページからは各種言語定義ファイルがダウンロードできますので、ご利用の方は使って見て下さい。 コメント(ブラケット)の登録の仕方だけをここでは紹介します。

C言語などでは「/*」と「*/」で囲まれた領域はコメントとして扱われます。そういった所は色分けしておくと見やすいでしょう。 そのためにはブラケットを定義する必要があります。デフォルトではすでに定義されていますが、このような場合、「/*」を左側ブラケット、 「*/」を右側ブラケットと言います。これで追加していき、自分なりの囲み文字の設定を行って言って下さい。

ただ、同じものを左と右に指定する事はできませんので注意して下さい。また、右側を省略すると、改行までのコメントになります。 Perlなどでは「#」、Visual Basicなどでは「REM」や「’」といったものです。しかし、これは1つしか登録できません。

上記のような仕組みになっております。ver6.30からスタイルシートもプログラミングタブで詳細指定ができるようになっています。(正確には言語ではありませんが。)

起動時に出るダイアログウィンドウを消すには?

起動時にはメニューの「ヘルプ」 » 「バージョン情報」と同じようなダイアログが出ます。 これは処理経過中というので出るダイアログでスプラッシュウィンドウともいいます。 これを消すには、一度起動してから、「ヘルプ」 » 「バージョン情報」でダイアログを開いて、 "Show this window on starting..."のチェックを外せばOKです。

オートインデント時にタブ文字が空白になってしまう!?

デフォルトでは「オートインデント」(自動段落下げ)がオンになっていますが、この時にタブ文字があった場合は 空白になってしまいます。もしタブ文字でインデントを維持したい場合は、メニューの「詳細設定」 » 「エディタ」 » 「環境・仕様」 » 「オートインデント時にタブ文字があれば置き換え」にチェックを入れて下さい。 そうすれば、オートインデント時にタブ文字でインデントが可能になります。

初期状態の各種設定による起動速度の違い

起動速度は初期状態の様々な設定によりかなり上限・下限変化します。ここではその指向性について見て行く事にします。 「ファイルツリー」がありますが、これを使うとどうしても重くなってしまいます。特に初期フォルダを指定した状態で、 そのフォルダにファイルが多かった場合、読み込みにはかなり時間がかかる事も考えられます。速度重視であるならば、「ファイルツリー」は 使用しない方が良いでしょう。機能重視なら使った方が色々便利かと思います。 その他はだいたい同じです。

一応起動時の時間なのですが、起動時に同時並行してある程度処理していますので、体感的には昔に比べたら 随分早くなっていると思います。スペシャルサイドバーをすべて無効化すると、最初の起動は時間はどのソフトウェアもかかってしまいますが、 2回目以降の起動時間が200ms〜300msくらいになり、「秀丸」くらいになります。起動にかかった時間は起動時にステータスバーを良く見ていると 書かれていますので参考にして下さい。また、「ストリーム読み込み」というのがあります。「詳細設定」 » 「エディタ」 » 「オプション」にあります。 デフォルトではチェックは入っていません。これはスペシャルサイドバーを起動前に読み込むのではなく、 起動しながら読み込むというものです。実際にチェックをするのとしないのとで起動して見ればお分かりかと思います。

「ストリーム読み込み」は次の動作まで速く移れるという利点がありますが、起動時に処理がちらついてしまいますので、 人によると思いますが、「スペシャルサイドバー」がすべて解放されている状態の時はチェックを外した方が良いです。 ショートカットキーや、メニューにアイコンを付けると言ったものも設定してもさほどに起動速度には影響はありません。 DTDを全解析するのにも最速を目指してコーディングしていますが、50msくらいです(Pentium III 866MHz,512MB)。 一番早いのが、「スペシャルサイドバー」をすべて解放し、なるべくメニューに定型文などを登録しなければ早いですので、 速度第一な方は参考にして下さい