HTMLSED

概要

 私個人の使い勝手を良くするためだけに開発したHTMLエディタです。 一番の目的はキーボードからなるべく手を離さず、かつ効率妬に入力できるというものを目指しました。 初心者や初級者用としては作っていませんので、自分でテキストエディタを使ってHTMLを書けるという人でないととっても使いこなせないような出来となっています。


インストールなど

インストール

 ファイルはLHA形式で圧縮されています。 LHA形式の圧縮を解くことができるソフトで圧縮を解いて下さい。

 圧縮ファイルには以下のファイルが入れられています(現時点の構成)。

 実行後に作成されるファイルは以下のものです。

 以上のファイルは同じフォルダに置く必要があります。 そのためこのプログラムのために新しくフォルダを作ることをお勧めします。

 このプログラムはVCL30.DPLが必要です。

 なお、NKF32.DLLがある場合は、自動的にこのDLLを使って漢字コード変換を行います。 もし入手されていない場合は内蔵ルーチンで変換されますが、NKF32.DLLに比べて非常に遅いです。 そのため、NKF32.DLLを入手されることをお勧めします。 入手した場合はWindowsのSystemフォルダに入れておけば、このプログラムだけでなく他にNKF32.DLLを使うプログラムがあった場合は自動的に使うようになるので、便利です。

アンインストール

 上記圧縮ファイルの中身と実行後に作成されるファイルを削除するのみで完了です。 新しくフォルダを作った場合、そのフォルダ自体を削除するだけでアンインストールは完了です。 ちなみにレジストリはいじっていませんので、ゴミが残ることはありません。

 もちろんですが、自分で作成したHTMLファイルやショートカットなどは自分で判断して削除して下さい。

 NKF32.DLLを入れた場合は使わない場合は削除しても良いですが、何かと便利だと思うので、残しておくことをお勧めします。


使い方

 まず、プログラムを起動して、プログラムの設定を行います。 メニューの設定で表示されるダイアログに従って設定します。 特に新規作成ファイルを設定しておくと、決まり切ったヘッダなどは新規作成で自動的に入力できるので、新規作成ファイルを作成して指定しておくことをお勧めします。

 後は、表示されているところに入力していくだけです。 エレメント指定は<やCtrl-Eを押すとメニュー下のElementの部分にジャンプしますので、使いたいエレメントを指定して下さい(インクリメンタルで指定できますから、他と区別が出来る部分まで入力すれば、自動的に補完します)。 スタイル指定も補完しますので(ただピリオドだけの時は補間が効きません)、入力が効率的になり、間違いが無くなります。

 定型文短縮入力はメニューの編集-短縮入力を選択するか、Ctrl-Iを入力することで、現在メニュー下のRegular formで表示されたものが入力されます。 入力されるものを変更する場合はCtrl-Rを入力するとRegular form の所に行きますから、そこで変更して下さい。 変更をしてリターンキーを入力すると、定型文が変更され、かつその変更されたものが入力されます。

 あとはどんどん入力して行くだけです。^^;

 終了する前に保存することを忘れないで下さい(保存が必要な場合)。 保存しないで終了した場合は、読み込んでから編集したものは全て破棄されます。

 既存のファイルを読み込む場合は漢字コード指定とDOCTYPE宣言が正しいことを前提としています。 もしこれがない場合は読み込みませんし、間違っている場合は読み込み結果が意図しないもの(漢字コードの場合は文字化け、DOCTYPEの場合は使えるエレメントのミスマッチ)となります。


画面表示とメニュー

画面表示

 Element(エレメント)のコンボボックス(ドロップダウンリスト付きのエデットボックス)とRegular form(定型文)のドロップダウンリストボックスがメニューしたにあり、その他にテキスト入力のエディタ部があり、最下部にステータス行があります。

Elementコンボボックス

 エディタ部で<やCtrl-Eを入力したとき、マウスでクリックしたときにフォーカスが来ます。 ここで入力するエレメントが(スタイルシートがある場合はスタイル付きのエレメントも)表示され、ここでエレメントを選ぶことでエディタ部に入力することが出来ます。

 ここは他と区別できる部分まで入力すれば、自動的にそのものが選択されます(例えばaddressならadだけを入力するだけでaddressを選択したことと同じ)。 複数該当するものがあった場合は、一番上のものが選択されます。 リターンキーを押すことでそのエレメントが選択されたこととなります。

 なお、<文字の入力でもElementコンボボックスへの移動として使えますから、エディタ部でじかに<を入力することは出来ません。 そのため、<を入力したい場合はElementコンボボックスで<を入力(つまりエディタ部とElementコンボボックスの2回連続で<<のような入力)することでエディタ部に&lt;と入力されます。

Regular form(定型文)

 Regular formドロップダウンリストは現在選択されている定型文(短縮入力タイトル)が表示されています。 メニューから編集-短縮入力を入力するかCtrl-Iを選択することで登録されている定型文を入力することが出来ます。

 定型文を変更する場合、Ctrl-Rを入力することで、定型文を切り替えることが出来ます。 選択を切り替えて、リターンキーを入力することで新しく選択された定型文が表示され、その定型文が入力されます。

 ただ単に切り替えることは考えていませんが(別の定型文を入力する時点での切り替え)、マウスで操作してリターンキーを押さなければ(ESCキーで抜けて、エディタ部へ移る)その変更された定型文は入力されません。

カーソル位置表示

 現在のカーソル位置を行:桁で表示します。 この表示はキー入力がないと行われません(マウスでキャレットを移動しても変化しません)ので、正しい位置を表示したい場合はキャレットをカーソルキーで一度移動した後に表示されるものを参照してください。

エディタ部

 ここで文書を入力します。 エレメントを入力したくなった場合は<もしくはCtrl-E、(表示されている)定型文を入力したい場合はCtrl-I、定型文を変更する場合はCtrl-Rを入力することで、文書を作り上げます。 IMEを起動している場合は<が入力できてしまいます(キー入力をIMEが分捕る)ので、Ctrl-Eを使って下さい。

ステータス行

 ステータス行は情報表示やエラー表示を行います。 左側には現在読み込まれた文書のファイル名、HTMLのバージョン、漢字コードが表示されます。 右側にはエラーがあるときのエラー表示が行われます。 もし動作指示したのに動作しなかった場合などは、ここを見てエラーがないか確認して下さい。 プログラムの設定ダイアログやファイルオープンなどのダイアログはありますが、エラー表示のダイアログはありません。 全てこのステータス行に表示するようにしています。

メニュー

ファイルメニュー

ファイル-新規作成

 現在登録されている、新規作成ファイルで新しくHTMLファイルを作成します。 新規作成したばかりではスタイルシート情報は読み込みません(保存場所が決まらない限り、スタイルシートは読み込めない)。 そのため、スタイルシートを読み込みたい場合は名前を付けて保存して下さい。

ファイル-開く

 既存ファイルを開きます。 HTMLファイルにこのプログラムの拡張子を関連付けている場合は、HTMLファイルをダブルクリックするだけでプログラムが起動し、ファイルを読み込みます。 現在オープンされているファイルがある場合は、そのファイルがダイアログのファイル名に指定されます。

ファイル-参照文書を開く

 HTML文書を参照文書として開きます。 別ウィンドウが開き、既存のHTMLファイルを参考にして、新しい文書を作るときに便利です。 参照文書を開くと自動的に整列します。

ファイル-保存

 現在編集しているファイルを保存します。 新規作成で作られたものはまだファイル名が付けられていないので、一度名前を付けて保存しないとこの機能は有効になりません。

ファイル-名前を付けて保存

 現在編集しているファイルに別の名前を付けて保存します。 元のファイルは変更されません。

ファイル-終了

 プログラムを終了します。 保存しない場合でもそのまま終了しますので、保存が必要な場合は注意して下さい(確認ダイアログも出ません)。

編集メニュー

編集-切り取り

 選択されている部分を切り取ります。 切り取られたものはクリップボードヘ送られます。

編集-コピー

 選択されている部分をクリップボードヘコピーします。

編集-貼り付け

 クリップボードに入れられた文字列を現在のキャレット位置に挿入します。 貼り付けの際に選択された文書がある場合は、選択された文字列をクリップボードに入れられた文字列で置き換えます。

編集-変換貼り付け

 クリップボードに入れられた文字列をHTMLとして表示されるように変換して貼り付けます。 例えば<なども&lt;に変換されます。

 もしタグ内でかつクリップボードに入れられた文字列がURLだった場合(http://やftp://など)、URLで使える文字に変換して貼り付けます。

編集-取り消し

 直前に編集された内容を取り消します。

編集-短縮入力

 現在(Regular formで)表示されている短縮入力文字列をキャレット位置に挿入します。

編集-クリップボード消去

 クリップボードの内容を消去します。 クリップボードに何か入れられていると外部プログラムが誤動作するような場合、ここでクリップボードをクリアしてから起動するようにしてください。

編集-検索

 検索ダイアログを表示し検索文字列などを指定して、現在編集中のテキストから文字列を検索します。 検索範囲は、現在カーソルがある場所からテキストの最期までです。 次を検索ボタンを押すと検索を開始します。

編集-次を検索

 以前検索ダイアログを表示した時の内容で、再度検索を行います。 検索範囲は、現在のカーソル位置+1の場所から、テキストの最期までです。 ダイアログは表示しません。

設定メニュー

設定-プログラム設定

 プログラムの動作に関連する設定を行います。 新規作成のファイル、そのカーソル位置、タグ表記(大文字/小文字)、参照文書と編集文書の画面の割合、ブラウザが設定できます。 詳しくはプログラム設定ダイアログを参照して下さい。

設定-URLフォルダ設定

 URL(サイト)と関連するフォルダを設定します。 ローカルフォルダとサイトURLが登録できます。 詳しくはURLフォルダ設定ダイアログを参照して下さい。

設定-短縮入力設定

 短縮入力(定型文)を設定します。 タイトルと内容、カーソル位置が設定できます。 詳しくは短縮入力設定ダイアログを参照して下さい。

外部プログラム登録

 外部プログラムの登録を行います。 外部プログラムとして登録されたプログラムは、HTMLSEDから直接起動することが出来ます。 詳しくは外部プログラム登録ダイアログを参照してください。

設定-フォント設定

 編集及び参照文書のフォントの設定を行います。 フォント名、サイズ、スタイル(スタイルは保存できません)が設定できます。 詳しくはフォント設定ダイアログを参照して下さい。

プログラム起動

 外部プログラム登録で登録されているプログラムを起動します。 自分で外部プログラムを作る場合はHTMLSED外部プログラム作成情報を参照してください。

ウィンドウメニュー

ウィンドウ-最大化

 編集ウィンドウを最大化します。

ウィンドウ-元に戻す

 最大化した編集ウィンドウを元に戻します。

ウィンドウ-整列

 編集ウィンドウと参照ウィンドウを整列させます。 参照ウィンドウがない場合も編集ウィンドウだけ(参照ウィンドウがあったときと同じサイズに)整列します。

ウィンドウ-参照文書を閉じる

 参照文書を閉じます。

ウィンドウ-ブラウザで開く

 編集文書を保存してブラウザで開きます。

ウィンドウ-ページ情報

 スタイルシート、リンク先、画像ファイルの一覧と、現在編集中のファイルとスタイルシートと画像ファイルの容量の合計を表示します。 リンク先やスタイルシート、画像ファイルの指定ミスがないか、ページを構成する要素が大きすぎないかをチェックできます。

ウィンドウ-サイト容量

 設定-URLフォルダ設定で設定されているサイトの容量と、ローカルファイルの容量(と使用パーセント)、空き容量を表示します。 あとどれくらい使えるかとか、そろそろ内容を整理しなくてはなどの目安にしてもらえればと思います。 このメニューは編集ページとは関係なく全てのサイト容量を計算します。 なお、ローカルフォルダに入れられている全てのファイルが容量計算の対象になりますから、バックアップファイルなどがある場合は削除してから表示してください。

ヘルプメニュー

ヘルプ-目次

 この文書を表示します。

ヘルプ-バージョン情報

 バージョン情報の表示です。

ショートカットキーと特殊入力

ショートカットキー

このソフトは以下のショートカットキーがあります。

 一行削除と一行挿入はクリップボードとは別処理しています(お互いに混じって処理されることはありません)。

特殊入力

 特殊入力とはタグ内以外の(普通の地の文書)入力時に、自動的にキー入力を変換する機能です。 これは地の文に入ってはいけない文字(代替文字を使用しなければいけない)が入力されたときは、自動的に代替文字に変換する機能です。 文字は次のようなものがあります。

 この中で<はエレメント入力のトリガーとなっておりますので、通常にこれを入力したときは(Ctrl+Eと同じく)エレメント入力ドロップダウンリストにフォーカスが移されますが、ここでもう一度<を入力すると&lt;とエディタ部に挿入されます。

 タグ内部(<と>に囲まれた場所)ではこれらの特殊入力は効かないようになっています(つまりそのまま入力できます)。 もし、代替文字が必要なら自分で入力して下さい。 ただし、タグ内部で<>は入力できないようになっています。

 コメントの入力はエレメント入力ドロップダウンリストにフォーカスが来ているときに!文字を入力することで行えます。

ファイルのドラッグアンドドロップ

 リンク付けの際のドラッグアンドドロップは<a>や<img>などのタグ内にキャレットがあるときに行って下さい。 その場合はカーソルがある場所のエレメントを取得して必要な属性や属性値を設定します(aエレメントならhref="filename"、imgエレメントならsrc="filename"などが挿入される)。 また、地の文でドラッグアンドドロップを行うとファイル名が入れられます。 キャレットがある場所に挿入しますので、エレメントを表す文字の中や他の属性や属性値の場所にキャレットがあるときにはドロップしないで下さい。 キャレット位置に空白がない場合は自動的に空白を補いますので、特に空白を開けておく必要はありません。

 ファイル指定は基本的に相対位置で行っていますが、絶対位置(公開用のバナー等)が必要な場合はシフトキーを押しながらドロップして下さい。 そうすることでサイト名を含めた絶対位置を挿入します。

 HTML文書があるサイトとドロップされたファイルがある場所のサイトが違う場合は絶対位置が指定されます。 このことで複数のサイトで公開している場合のリンクが簡単に出来ます。

 登録されていないローカルフォルダからドロップされたときはファイル名のみを設定します。 シフトを押しながらの場合は何も入力されません。


設定ダイアログ

 ダイアログは全てOKボタンを押すことで変更を登録し、キャンセルボタンはダイアログを開いてからの変更を全て破棄してダイアログを閉じます。

プログラム設定ダイアログ

 プログラム全体の動作を設定するダイアログです。 以下の設定項目があります。

新規作成ファイル

 新規作成の場合、このファイルが読み込まれ編集を開始できます。 決まり切ったヘッダや著作権表示、メールアドレスなどを入れておけば、入力の手間が省けます。

カーソル位置

 新規作成ファイルを読み込んだとき、このカーソル位置にカーソルを移動します。 すぐに入力できますから、非常に便利です。

現在のファイルと位置ボタン

 このボタンを押すことで、現在文書として読み込まれているHTMLファイルを新規作成ファイルにし、カーソル位置も設定します。 このプログラムで新規作成ファイルを作ったときなどはこのボタンで一発設定できます。

タグとクラスは小文字表示チェックボックス

 チェックするとタグとクラスを挿入するときに小文字表示にします。 チェックを外すと大文字表示にします。 もちろんURLやファイル名などはそのまま入力されるので、ファイル名等に合わせる必要はありません。

全体の中で編集ウィンドウの占める割合

 編集ウィンドウと参照文書ウィンドウを表示しているときに、メニューからウィンドウ-整列を選んだときに画面全体で編集ウィンドウの占める割合(%表記)を入力します。 自分の好きな大きさで参照文書を見ながら編集することが出来ます。

ブラウザ

 メニューのウィンドウ-ブラウザで開くを選択したときに起動するブラウザを設定します。

URLフォルダ設定ダイアログ

 URLサイトとローカルフォルダを関連づけるための設定です。

追加タグ

 ローカルフォルダとサイトURL、サイト容量を入力して追加ボタンを押すことで登録を追加できます。

削除タグ

 ローカルフォルダをドロップダウンリストで選択するとサイトURLと容量が表示され、削除する物だったら削除ボタンを押すことで登録を削除することが出来ます。

短縮入力設定ダイアログ

 短縮入力のタイトル(Regular formで表示されるタイトル)と短縮入力(定型文)を登録します。

短縮入力タイトル

 ドロップダウンで現在登録されているものを選択/表示することが出来ます。 また、新しいタイトルを入力することで新しく登録することもできます。

短縮入力内容

 ここに登録されたものが短縮入力で挿入される文です。 カーソル位置も反映されますので、入力しやすいカーソル位置で登録することをお勧めします。

登録、削除ボタン

 選択したもの(もしくは入力したもの)を登録もしくは削除します。 ボタンを押さない限り登録や削除されません。 カーソル位置などが違っていた場合はカーソル位置を直して登録ボタンを押して下さい(二重登録にはなりません)。

外部プログラム登録ダイアログ

 メニューのプログラム起動で起動されるプログラムを登録します。

メニュー名

 プログラム起動メニューを選択したときに表示されるテキストを入力します。 削除タブ時はドロップダウンリストから選択します。

メニューキー

 メニューを選択するキーを入力します。 1文字のみ入力可能です。 alt-P押した後にこのキーを押すことでプログラムを起動することが出来るようになります。 削除タブ時は情報表示のみです。

起動プログラム

 起動プログラムを指定します。 右側の選択ボタンを押してファイル選択ダイアログで実行ファイルを指定してください(直接キーボード入力は出来ません)。 削除タブ時は情報表示のみです。

編集中のファイル名を起動プログラムに渡す

 編集中のファイル名を起動プログラムのパラメータとして渡すかを設定します。 パラメータとして渡す場合は、編集中のファイルは保存されますので、起動プログラムが起動したときにそのファイルを読み込むと現在編集中のファイルと同じものを読み込むことが出来ます。

追加(追加タブ選択時)

 現在の設定で追加します。

削除(削除タブ選択時)

 現在表示されているメニューを削除します。 メニューから削除するだけで、実際のプログラムを削除するわけではありません。

OK

 編集を保存します。 ただし、プログラム実行中は変更が行われませんので、変更した状態にしたい場合はプログラムを起動し直ししてください。

キャンセル

 ダイアログを表示してからの一切の変更をキャンセルします。

フォント設定ダイアログ

 編集文書や参照文書のフォントを設定します。 スタイルは表示には反映されますが、保存はされません(次にプログラムを起動したときはRegularで表示されます)。


その他

DOCTYPE宣言について

 DOCTYPE宣言はこの文書はHTMLのどのバージョンで作られたものかを表しています。 これがないとその文書のHTMLのバージョンが分かりませんし(本当言うと、これがないとHTML文書かどうかも判断が付かない)、どのエレメントが使えるかもバージョンによって違いがありますので、文書を書き進めることが出来ません。 しかし、多くのHTMLエディタはこの指定を付けてくれないか、間違って付けるものが多いです。 テキストエディタで書く場合も注意をしていないと宣言と内容が食い違う(使ってはいけないエレメントを使うとか)可能性もあります。 作ったファイルを公開する前に一度チェックをしてみてはどうでしょうか。

 文書のトップの行に以下の宣言を書きます。

 なお、HTML3.0というのは存在しませんので、間違えないようにして下さい。

漢字コードについて

 WWWや電子メールではJISコードが基本ですが、何らかの理由でEUC、Shift-JISを使わなければならない場合があると思います(Shift-JISを使わざるをえない場合ってのはあんまり思いつかないけど、ローカルでは使いやすいのかな)。 その時に漢字指定をしていないと、ページを読みに行った人が文字化けによって内容が読めなかったりします。 そのため、公式に公開する場合は漢字コード指定をしておく方がよいと思います(イントラネットなどではどうでも良いけど)。

 漢字コード指定はheadエレメントとされた場所(<head></head>で囲まれた部分)にmetaエレメントの属性として設定します。

 特別に意図がある場合を除いて、この3つのうち漢字コードに合うものを入れておくことをお勧めします。

拡張子がTAGのファイルについて

 NOCLOSE.TAGのファイルは変更しないで下さい。 このファイルは閉じタグのないエレメント一覧を表していますので、これを変更すると閉じタグを入れてはいけないところで閉じタグが入ったり、閉じタグが必要なところで入らなかったりします。

 この閉じタグは絶対使わないとか決まっている場合は削除することも可能です。 ただし、オリジナルは保存しておくことをお勧めします。

 HTML*.TAGは自分の好みによってエレメントを減らすことが可能です。 既に新規作成ファイルを作っている場合はheadで必要なエレメントは不要でしょうし、絶対使わないエレメントもあると思います。 ただし編集する場合は、オリジナルを持っていた方が良いと思いますので、圧縮ファイルを残しておくか、オリジナルを別フォルダに入れて置くかすることをお勧めします。

開発経緯と設計思想

開発経緯

 私はテキストエディタを使ってHTMLファイルを作成していましたが、テキストエディタだと漢字コードの指定(charset=iso-2022-jp)と実際に保存された漢字コードが違っても何の警告も出ないために、間違って保存して公開してしまったことが何度かあります。 またテキストエディタではタグやスタイル指定をいちいち全て間違えずに入れなければなりません。 いちいち確認するのは面倒くさいし、キー入力を何とか効率化できないかと思いHTMLエディタを作ることにしました。

 作り始めると欲が出て、画像ファイルのドラッグアンドドロップによる自動サイズ指定とか、リンク先指定をドロップして指定する、定型文の入力などの機能を付け加えていき、現在の形になりました。

設計思想

 自分で一番使いやすいように作ったというのが一番の設計思想ですが、そのほかにも次の点が他のHTMLエディタと違うところだと思います。

  1. キー操作メインで、効率的にHTML文書を作ることが出来るようにする
  2. HTML文書の指定に従って、読み込み/保存漢字コード指定を行う
  3. HTML文書の指定に従って、使えるタグを制限することによって、正しいHTML文書作りの支援をする
  4. HTML文書で指定されたスタイルシート指定を読み込み、タグと共に入力することを出来るようにする
  5. 自動で指定できるところ(画像のサイズやリンク先のURL構成など)はプログラム側で自動に入力する
  6. 画面を広く使えるようにする
  7. なるべくダイアログを出さないようにする

著作権表示とソフトの取り扱い

 最新の著作権表示やソフトの取り扱いはWebで公開しています(http://hp.vector.co.jp/authors/VA003880/prog/index.html)。 転載や雑誌掲載の場合は事前にこれらを良く読んでからにして頂ければと思います。  htmlエディタを使う人でWebにアクセスできない人はいないと思い、ここに掲載することは止めました。

HTMLSEDサポートプログラム

 HTMLSED のプログラム起動メニューに登録して使用できるプログラムを公開しています。 私のWebページにて公開しています。 また、何か分からないことがあったら、遠慮なくメールしてください。 メールアドレスはphotohalo@gmail.comです。


copyright (c) 2000 and