JS フォーマット

2021-02-28T04:50:43Z

37.120.210.182: 単体実行時にメソッドチェーンが通るように修正(annonymous)

__toc__
<br>
EmEditor 用マクロ「Format HTMl, Javascript, Css format for Emeditor」（FHTML.jsee）を Mery 用「[[テキスト整形]]」マクロ（2019/06/01版スターターパック）に移植して利用できるようにします。
<br>
* Mery には [https://ja.wikipedia.org/wiki/HTML_Tidy HTML Tidy] ライブラリによる HTML 整形機能が標準搭載されているので、主として JavaScript コードの整形を目的とした使用を想定しています（編者は WEB 開発とは無縁で HTML, CSS などについての知見がないため、Mery の JScript マクロ用のソースコードにたいしてしか動作確認していません）。
* Mery 用のマクロとして実行できるよう改編していますが、基本的に元のマクロの動作内容の根幹部分を改変してはいません（元コードにたいするデバッグもしていません）。実行したさいのエラーの発生などは、オリジナルのコードに由来するものかもしれません。

<div id="コメントブロック">
/**
* ---------------------------------------------------------
* "Macro – Format HTML, Javascript, CSS, XML for EmEditor – EmEditor (Text Editor)"
* https://www.emeditor.com/files/fhtml-jsee/
* September 1, 2008 / in Macros / by Chelsea Kern
* ---------------------------------------------------------
* ◆ Modefied for Mery by sukemaru, 2020/05/03 ◆
* https://www.haijin-boys.com/wiki/JS_%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88
*
* ・js_beautify 関数に渡す引数用の設定項目を追加
* ・js_beautify 関数に引数を変更
* ・ProcessCommentBlock 関数を改変
* 編集モード Mery_Macro_JS 対応の追加と、定数 eePosView を mePosView に書き換え
* ・Mery マクロのプリプロセス保護
*
* ※ 変更箇所は "◆" で検索可。
* ※ 注意：ブックマークは破棄される。
*/
</div>

== FHTML.jsee を Mery に対応させる ==
以下で説明している内容で書き換えることにより FHTML.jsee をMery 用のマクロとして利用できるようになります（「マクロのカスタマイズ」に登録して [ マクロ ] メニューやショートカットから実行可）。
<br><br>
'''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 で開きます。
<br><br>
以下、ソースコード（JScript）内の　下　⇒　上　の順に変更／挿入箇所を説明します。
----

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

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

'''3.''' ソースコード '''147 - 148''' 行目を書き換え
<source 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◆
</source>

'''4.''' ソースコード '''132''' 行目に挿入<br>
　(※ 132 行目のコードに記述ミスがあるようなので、気になるならついでに直す）
<source 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);
</source>

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

'''6.''' ソースコード '''122''' 行目に挿入
<source 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);
</source>

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

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

</source>

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

== 「テキスト整形」マクロに移植する ==
「[[テキスト整形]]」マクロのソースコードへの挿入箇所は「'''拡張コード'''」内の任意の空行部分で問題ありませんが、スターターパックのまま利用している場合には適したサブメニューカテゴリ（親項目）がないので「行頭 // を挿入/削除」コマンドと「このマクロを編集」コマンドのあいだの空行（スターターパックのソースコードで '''152''' 行目）に挿入することをおすすめします。

;【注意事項】
* <span style="color:#0000c0;">「[[テキスト整形]]」マクロは '''2019/06/01 版のスターターパッケージ''' を使用してください。</span> 古いバージョンの場合、ソースコードの書式（引数の変数や動作フラグ）がことなるため、追加コードを利用できません。
* あらかじめ前節のとおり改編した「Format HTML, Javascript, CSS, XML」をマクロとして Mery に登録する必要があります。登録していない状態で「テキスト整形」マクロから呼び出した場合は、自動的に「マクロのカスタマイズ」に登録されます。
<br>
* <span style="color:#c00;">下の追加コードでは改編した「Format HTML, Javascript, CSS, XML」マクロ（FHTML.jsee）のファイル名を「JSフォーマット.js」にリネームして、Mery¥Macros¥ フォルダに配置してある前提になっています。</span><br> 「Format HTML, Javascript, CSS, XML」マクロのファイルパス（ファイル名）や登録名にあわせて <source lang="javascript" inline>f.push(["JS フォーマット (&J)","O",function(_){</source> 部分（メニュー項目としての表示名）や、<source lang="javascript" inline>var macroPath = "Macros\\JSフォーマット.js"</source> でのパス指定を書き換えてください。<br> ※ Mery¥Macros¥ フォルダ配下以外の場所に配置している場合は、フルパスで指定してください。
<br><div class="warningbox">
* <span style="color:#c00;">追加したコマンドは '''未保存の『無題』文書''' （実体ファイルがないタブ）にたいしては使用できません。</span> 『無題』タブを JavaScript（拡張子 '''.js'''）で保存して、編集モードを「JavaScript」（または「[[Mery Macro JS]]」）にした状態で実行してください。<br> ※「テキスト整形」マクロからの呼び出しではなく、「JSフォーマット.js」マクロ（Format HTML, Javascript, CSS, XML）を [ マクロ ] メニューから [[#実行|直接実行]] するなら『無題』のタブにも適用できます。
</div><br>
* 追加コードは、「テキスト整形」マクロ本体の更新（バージョンアップ）により使用できなくなることがあります。
<source lang="javascript">

//「Format HTML, Javascript, CSS, XML」マクロをアクティブタブに対して実行する ◆2020/05/03◆ 追加
f.push(["JS フォーマット","O",function(_){ //◆2020/05/03◆
return (function(_){
//■「JS フォーマット」マクロのパスを指定 ※「\」はふたつ重ね「\\」で記述すること
var macroPath = "Macros\\JSフォーマット.js"
var meryPath = editor.FullName, filePath = editor.ActiveDocument.FullName;
var command = "\""+meryPath+"\" /mf \""+macroPath+"\" \""+filePath+"\"";
if(new ActiveXObject("Scripting.FileSystemObject").FileExists(filePath))
new ActiveXObject("WScript.Shell").Run(command);
else Alert("このコマンドは未保存の『無題』タブでは使用できません。");
}());
}]);
// f.push(["--------"]); // セパレータ

</source>

== memo ==
本ページ内に記載した内容について「Macro – Format HTML, Javascript, CSS, XML for EmEditor」マクロとそのオリジナルコード、「テキスト整形」マクロ、テキストエディタ Mery および EmEditor の作者各位に問い合わせしないようお願いします。

ライセンス違反やコードのエラーなどについてのご連絡は、こちらの「memo」節の　'''[編集]'''　よりお知らせください（おそらくは、このページを削除するかたちでしか対応できませんが...）。
<br><br>

MeryWiki - 利用者の投稿記録 [ja]

JS フォーマット