「JS フォーマット」を編集中 (節単位)

== FHTML.jsee を Mery に対応させる ==
以下で説明している内容で書き換えることにより FHTML.jsee をMery 用のマクロとして利用できるようになります （「マクロのカスタマイズ」に登録して [ マクロ ] メニューやショートカットから実行可）。

'''1.''' 『[https://www.emeditor.com/files/fhtml-jsee/ Macro – Format HTML, Javascript, CSS, XML for EmEditor – EmEditor (Text Editor)]』[https://www.emeditor.com/files/fhtml-jsee/] の実体ファイル FHTML.jsee をダウンロードして、Mery¥Macros¥ フォルダ配下にコピー。<br>
ファイル拡張子を「.jsee」 ⇒ 「'''.js'''」に変更（お好みでベース名も変更）して Mery で開きます。

以下、ソースコード（JScript）内の　下　⇒　上　の順に変更／挿入箇所を説明します。
----

'''2.''' ソースコード '''171''' 行目を書き換え
<syntaxhighlight lang="javascript">
	// return js_beautify(code, 1, '\t');

	// ◆変更：追加設定項目で指定した値を渡す◆
	return js_beautify(code, (indent_size || 1), (indent_character || '\t'));
</syntaxhighlight>

'''3.''' ソースコード '''147 - 148''' 行目を書き換え
<syntaxhighlight lang="javascript">
	// document.selection.Text = result;
	// document.selection.SetActivePoint(eePosView, 1, currentLine);
	document.selection.Text = preProcess + result; // ◆プリプロセス対応 for Mery◆
	document.selection.SetActivePoint(mePosView, 1, currentLine); // ◆定数名を変更 for Mery◆
</syntaxhighlight>

'''4.''' ソースコード '''132''' 行目に挿入<br>
　(※ 132 行目のコードに記述ミスがあるようなので、気になるならついでに直す）
<syntaxhighlight lang="javascript">
	} else if (type.indexOf('script') > -1) {
		result = formatJS(word);

// ▼ ---------- 追加コード ここから ---------- ▼

	// ◆追加 for Mery◆	// 編集モード名「Mery Macro JS」に対応させる
	} else if (type.indexOf('macro_js') > -1 || type.indexOf('macrojs') > -1) {
		result = formatJS(word);

// ▲ ---------- 追加コード ここまで ---------- ▲

	} else if (type.indexOf('xml') > -1) { // ◆変更 'htm' => 'xml'
		result = formatXML(word);
</syntaxhighlight>

'''5.''' ソースコード '''127''' 行目を書き換え
<syntaxhighlight lang="javascript">
	var type = (document.ConfigName || document.Mode).toLowerCase().replace(/ /g, ''); // ◆変更 編集モードでの判定に対応
	if (type.indexOf('htm') > -1) {
		result = FormatHTML(word);
</syntaxhighlight>

'''6.''' ソースコード '''122''' 行目に挿入
<syntaxhighlight lang="javascript">
	if (word == '') {
		document.selection.selectAll();
		word = document.selection.Text;
	}

// ▼ ---------- 追加コード ここから ---------- ▼

	// ◆追加 for Mery (プリプロセスを保護)◆
	var preProcess = "", p = word.match(/^([\t ]*#\w+[^\n]*[\n]+)*/g);
	if (p && /script|macro[ _-]?js/i.test(document.Mode)) {
		preProcess = p.toString();
		word = word.slice(preProcess.length);
		// Alert("プリプロセスを保護\n\n" + preProcess);
	}

// ▲ ---------- 追加コード ここまで ---------- ▲

	word = word.replace(style_tag, ProcessStyleBlock);
	word = word.replace(script_tag, ProcessScriptBlock);
	word = word.replace(comment_tag, ProcessCommentBlock);
</syntaxhighlight>

'''7.''' ソースコード '''116''' 行目を書き換え
<syntaxhighlight lang="javascript">
	// var currentLine = document.selection.GetActivePointY(eePosView);
	var currentLine = document.selection.GetActivePointY(mePosView); // ◆定数名を変更 for Mery◆
</syntaxhighlight>

'''8.''' ソースコードの '''先頭行''' に以下のコードを挿入する
: ※ さいしょの <syntaxhighlight lang="javascript" inline>#title = "JS フォーマット"</syntaxhighlight> の部分で指定した文字列が Mery の [ マクロ ] メニュー内や [ マクロのカスタマイズ ] ダイアログ内で使用される「マクロの表示名」になります。
: ※ このページの先頭の [[#コメントブロック|コメントブロック]] もあわせて追加することをおすすめします。
: ※ 設定項目でインデント（字下げ）設定の初期値を「半角空白×２」にしてありますが、字下げに使用する空白文字を TAB コードにする場合は <syntaxhighlight lang="javascript" inline>var indent_character = "\t";</syntaxhighlight> に変更、空白文字の数を変更する場合は <syntaxhighlight lang="javascript" inline>var indent_size = 2;</syntaxhighlight> の数値を書き換えてください。
<syntaxhighlight lang="javascript">
#title = "JS フォーマット"
#tooltip = "Format HTML, Javascript, CSS, XML"
#language = "JScript"
// #icon = "Mery用 マテリアルデザインっぽいアイコン.icl",203

/**
 * ---------- （コメントブロックをコピペ） ----------
 * ※ 変更箇所は "◆" で検索可。
 */

if(!/(?:htm|xml|css|script|macro[ _]?js)/i.test(editor.ActiveDocument.Mode)) Quit(); // ◆追加

// ◆ BeginUndoGroup は Mery Ver 2.7.0 以上、AddUndo は Ver 3.0.1 以上で使用可
try {BeginUndoGroup(); AddUndo();} catch(e) {;}

// ---------- ▼ 追加設定項目 for Mery ▼ ---------- //

// ◆ js_beautify 関数に渡す引数を指定
var indent_character = " ";
var indent_size = 2;

// ---------- ▲ 追加設定項目 for Mery ▲ ---------- //

</syntaxhighlight>

----
<div id="実行">
9. 上書き保存（拡張子 '''.js'''）して、「マクロのカスタマイズ」に登録します。<br>
　※ または [ マクロ ] メニューの [ これを選択(T) ] でも登録可。
</div>

編集モードが「JavaScript」や「[[Mery Macro JS]]」（または Mery_Macro_JS や MeryMacroJS でも可）であれば、マクロのソースコードを で美しく（？）整形することができるようになります。
* 選択範囲があれば選択範囲内のコードを整形、選択範囲なしでマクロを実行するとアクティブな文書全体を選択範囲にして整形します。
* HTML や XML、CSS 文書の整形もできるとおもいますが、動作確認は JScript（JavaScript）マクロでしかしていません。
<div class="warningbox">
* FHTML.jsee の元からの仕様により、「htm／xml／css／**script」をふくむ編集モード名でしか使用できません （追加コードにより [[Mery Macro JS]] にも対応させています）。 適合しない文書にたいして実行すると、マクロがエラーを吐いたり編集中の文書が壊れたりすることがありますが、UNDO 操作（Ctrl＋Z）で復旧できるとおもいます。
*「Format HTML, Javascript, CSS, XML」（FHTML.jsee）マクロ自体の最終更新年次が 2008 年なので、最新のコード規格に対応していない可能性があります。
</div>