ウェブ制作 - テキストエディタによるマークアップ作業支援
タグとエレメントの違いくらいわかってるYO
タグ入力支援辞書
テキストエディタでシコシコとタグ打ちするのが好き≒オーサリングソフトがどうにも馴染めなかったオレ様の必殺ツール、それがHTML辞書。日本語入力オンの状態で“あ（a）”と入力すると“<a href=""></a>”、“えｍ（em）”と入力すると“<em></em>”と変換される。マークアップしたい部分の文字列を基本キーボードショートカットの“Ctrl＋X（切り取り）”で切り取り、タグ入力後“Ctrl＋V（貼り付け）”って感じで使うのがグー。
それぞれSJISエンコーディング、右クリックで保存推奨。制作状況に応じて、足りないエレメントや欲しいアトリビュートがあったら自分で適当に追加してくれ。ちなみにIME用なのでATOKとか他のFEP使ってる人は一旦IMEで登録してから変換するといいんジャマイカ。自分で作る場合、わざわざエディタで直打ちするのに今さらiframeだのfontだの使う人もいないだろうが、登録するのはStrictの要素に限定すること。HTML4.01/XHTML1.0のStrictな要素はHTML5でも有効だけど、Transitionalで対応する要素の大部分はHTML5で廃止されている。
当然、CSS用辞書なんかもできるわけだが、セレクタの命名規則を自分なりに決めてる人のほうがより効率は上がるだろう。こんなところでも論理思考は役に立つ。ちなみに競馬辞書も作ってある。それと女優名を入れると主な出演作に変換される、あるいはその逆に映画名を入れると出演女優が出てくる濡れ場辞書も作ろうかと思ったのだけれども、大変面倒なのでやめた。
この辞書登録作戦には、要素名を知らないと使えないという重大な弱点がある。しかし反復利用することで忘れないでいられるというメリットも生み出す。最近のエディタであればHTML入力支援機能がついてるのがほとんどかもしれないが、おかげで大事なことを忘れてしまいそうで。
続いて実戦に入る。
テキストエディタのマクロ機能
古くからフリーウェアやシェアウェアが多数公開されているが、Windowsの定番テキストエディタといえば次の3つだろう。
- 秀丸エディタ
- TeraPad
- EmEditor
すべて使ってみたけど、エンジニア御用達ともいえる秀丸のインターフェイスがどうも馴染めなかったオレはEmEditorに落ち着いた。以下、解説はEmEditorベースということで。
EmEditorは標準プラグインにタグ補完できるHTMLツールバーが用意されているのだけれども、これがまた実に前時代的なマークアップでかなり使い勝手が悪い（いちおうカスタマイズ可能だけど幅が狭いというか）。せめてDTD準拠のエレメントに限定してくれないものか。
そんなわけで、エレメントは辞書登録に任せるとして、よく使う処理はマクロに登録してる。たとえば
トラブルシューティング SEO対策とブログ キーワード選定作業 タグ入力支援情報
といった文字列をリスト要素でマークアップしたい場合、上記の辞書を使って各行を“ぃ（li）”でマークアップしていくわけだが、流れを整理すると
- マークアップする行の先頭にカーソルを移動
- [Shift＋End]で行末までを選択
- [Ctrl＋X]で該当行を切り取り
- “ぃ（li）”を変換して、“<li></li>”で確定
- [←]を5回押して行末のカーソルを>と<の間に移動
- [Ctrl＋V]で切り取った該当行を貼り付け
- [Home]で該当行の先頭に移動
- [↓]で次の行に移動
というのがひとつの手順になる。これは画面右端などで折り返し表示していない限り、1行の文字数や内容には依存しない共通手順。慣れるとものの1、2秒なのだが、それでも行数がたくさんあると面倒だしタイプミスも起こしやすくなる。そこで上記手順をマクロで登録してしまうのだ。
EmEditorの場合、[Shift＋F4]でマクロの開始と終了になるので、上記手順（1）の前にマクロを開始し、次の行の先頭に移動したところで終了する。あとは[F4]を押すだけでリストマークアップのマクロが実行される。
2009-08-21追記：マクロ記録/実行のショートカットキーはバージョンによって異なるので注意、上記はVer.6の場合。Ver.9ではマクロの記録が[Ctrl+Shift+R]、実行が[Ctrl+Shift+P]となっている。まあツールバーのマクロボタンを使ったほうが間違いはないか。
<li>トラブルシューティング </li> <li>SEO対策とブログ </li> <li>キーワード選定作業 </li> <li>エディタによるマークアップ作業支援情報</li>
もし各行にアンカー（リンク）をマークアップするならこうだ。
- マークアップする行の先頭にカーソルを移動
- [Shift＋End]で行末までを選択
- [Ctrl＋X]で該当行を切り取り
- “ぃ（li）”を変換して、“<li></li>”で確定
- [←]を5回押して行末のカーソルを>と<の間へ移動
- “あ（a）”を変換して<a href=""></a>”で確定
- [←]を4回押して</a>の後ろのカーソルを>と<の間へ移動
- [Ctrl＋V]で切り取った該当行を貼り付け
- [Home]で該当行の先頭に移動
- [↓]で次の行に移動
<li><a href="">トラブルシューティング</a></li> <li><a href="">SEO対策とブログ</a></li> <li><a href="">キーワード選定作業</a></li> <li><a href="">エディタによるマークアップ作業支援情報</a></li>
あとはこのマクロに適当に名前をつけて保存し、いつでも呼び出せるようにしておく。手順を定型化できるものはすべてこの方法でマクロ化できるはずだ。もちろんマクロの登録ができるエディタなら何でもいい。最近の気の利いたエディタなら最初からHTML用の組み込みマクロがあったりするが、良く使う属性だとかスタイルシートのセレクタなんかも登録できることを考えると、自分でマクロ組んだほうが効率がよかったりする。
なおEmEditorの場合、登録済みマクロ実行の際は日本語入力のオン/オフは影響しないのもよい。
マクロに記述する前提なら、上記とは異なる処置手順ももちろんあり。というかそのほうがソースはスッキリすると思う。
これをさらに発展させると、よく使うHTMLのテンプレートもテキスト保存したものをリネームするんじゃなく、マクロで一発呼び出しできるようにしとくとすげー楽。そんなわけで、辞書とマクロでおおむね日常のコーディングは事足りるはずだ。
Ver.10からはスニペット～補完機能～が強化され、要素名を入力→Tabで候補を入力できるようになっている。半角モードでないと機能しないので、全角主体の日本語文章のコーディングでは微妙だが、半角主体のプログラミングなんかでは重宝するはず。
EmEditorについて
オレは1997の公開以来EmEditorを15年以上愛用してるヘビーユーザーなんだけど、ライセンス絡みでトラブルというか作者江村豊氏の発言が二転三転し過去何度も物議を醸しているので敬遠してる人も多い。2014年のVer.14現在、15000円の永久ライセンス（2011年10月31日までにPro版を製品登録した人は自動的に永久ラインセンスの扱い）と新規4000円年次2000円の限定ライセンスが選べるものの、正直エディタの投資額としてはどちらも割高である。かといって無償のEmEditor Freeはプラグインやマクロなど使用制限が多すぎてあまりおすすめできない。
EmEditor Freeは単体でも配布されてるけど、有料のProfessionalからのダウングレードもできる。Proを試用してる人はこっちのほうが手っ取り早いだろう。
そもそもテキストエディタは商売にするにはリスクの高いシロモノと思う。 初心者がいきなり高機能なものを使っても良さなんてわからんだろうし、中級者以上はもう手に馴染んだものを使って今さら変えることはないだろうし。
まあ高機能かつ軽量でソフト自体のデキはよく、定番エディタ「秀丸」の対抗馬として期待してた頃もあった。今となってはもし永久ライセンス持ちじゃなかったら新たに購入して使おうとは思わないし、他人に薦める気もない。
文字コードの変換
日本語なら黙ってKanjiTranslatorを使うべし。他の2バイトコードのツールは知らない。バイナリファイル単体で機能するからレジストリも汚さない。
UTF-8 における BOM 付きと BOM 無しの違い
B地区の各種メニューは PHP の include / virtual で埋め込んでるんだけど、たまにサイドメニューで謎の段差が出るんだよ。
段差のないページと厳密にソースチェックしても差がなくてなんだろなー、と悩んでたんだけどやっと原因わかった。段差のないページで include されたファイルは UTF-8 BOM 無し、段差のあるページのそれは UTF-8 BOM 付きで保存されていたのだッ！
さらに検証を続けているうちに興味深い事実が判明。
埋め込むファイルと埋め込まれるページのファイルそれぞれをいろいろ組み合わた結果、埋め込まれるページのエンコーディングに関係なく埋め込むファイルのエンコーディングによってのみ段差の有無が生じたのだッ！
そんなわけで、サイト内でエンコーディングを統一するのが基本ではあるけど、少なくとも include / virtual で用いるファイルは要チェック、というお話。
複数行の一括変換
たいていのエディタには文字列の置換機能が備わってる。ただ改行を挟んだりするとちゃんとエスケープシーケンスで“\n”を指示しなきゃいけないし、文字列が長くなりすぎてミスる可能性が出てくる。特にリニューアルなんかでサイト全体のソースを大きく変更しなきゃいけないケースではヘッダやフッタなどの複数行が置換候補となることが多いはず。EmEditorはVer.6から「ファイルから置換機能」がついたので複数ファイルの同一文字列を一発置換できるようになったが、複数行の置換となると結局改行指示を手動でしてやらないといけない。
そんなとき活躍するのがTextSSというツール。詳細は実際に使ってみてくれ。もうこれなしじゃ生きていけない。
なお一括置換のポイントは、置換したい部分の文字列・・・同一構文がほかに存在しないことだ。<div class="*****">といった、何度も繰り返し使われてそうな文字列の場合、その前後行も含めて置換候補にしてやるといった工夫が必要になる（正規表現を扱えるならさらに精度は高まるはず）。
補記
こうした一括置換で対応できるためには、元のソースが一貫性のある論理構造に基づいて記述されていることが条件となる。ページごとにエレメントの使い方がバラバラだったりヘッダやフッタが適当だったり、スタイルのインライン指定とかやってると目も当てられない。もちろんfontやcenterのような物理要素を使うなんてとんでもない。
オレ様にとってアクセシビリティとかはどうでもいいんだけど、論理構造とスタイルの切り分けを徹底したほうが結局のところ後で自分が楽なんだよ。各種パーサかまして処理するにしたって、元の記述がvalidでstrictなほうがエラーになりにくいし。このページも何だかんだ5年近く前に書いたけど、加筆修正したところ以外はほぼそのまま移行してきてる。
何にしても、この手の一括処理する際には必ず事前にバックアップを作成しておくこと。ぐちゃぐちゃになってしまったソースを前に涙で画面がみえない俺、なんてことはよくある。