Webプレビュー前にフィルタリング

こんにちは。
ご存知の方がいらっしゃいましたら教えてください。

１．Webプレビュープラグインを利用する際に、フィルターを挟むことは可能でしょうか。
具体的には、Markdown-jsやMarkedを挟んで、Markdown Editorとして使えないかなと夢想しております。

２．Webプレビュープラグインで使っているIEコンポーネントのバージョンを変更したり、他の描画エンジンに変更することは可能なのでしょうか。

よろしくお願いします。

2014年12月6日 10:45 | 手石 | 返信
こんばんは。

1 に関しては Markdown-js の知識がないためわかりかねますが、2 はたぶん簡単にはできません。開発環境の Delphi XE に付属している IE コンポーネントを使用していますが、IE のバージョンを変更したりすることは標準機能では用意されてなさそうでした。

他の描画エンジンを使用するのであればプラグインをゼロから作る必要があります。Delphi 使いの方であれば Web プレビュープラグインのソースをもとに作り出すことは可能かと思いますが、ちょっと大変かもしれません。

Delphi で Chromium エンジンを実装する方法はありましたが…
http://mrxray.on.coocan.jp/Delphi/plSamples/932_GoogleChromeControl.htm

まず Delphi 使ってる人がいないっていう…

2014年12月6日 20:58 | Kuro | 返信
私も以前より興味があったのでこの機会に javascript製の Markdownパーサーを調べてみました。
結果、Mery から javascript製の Markdownパーサーを使用するには Markdown-js や Marked より Showdown の方がお手軽かもしれません。

最終的には Pandoc みたいな物に投げた方がいいという結論になるのだろうけど、インストールが必要ですし基本はプロンプト叩く使い方なので万人向けじゃなくなるんですよね。
簡易な記述方式なのに敷居が高くなるという……なんて矛盾な！

手石さんがお望みのフィルタリング的な形では無いですが、Mery を使って Markdown記法で記述を希望される方がここを検索されるかもしれませんので、表変換部分が不完全ですが Showdown を使用した変換スクリプトをたたき台として残しておきます。
気が向いたどなたかが表変換を実装した完全版にして Mery のサイトに登録していただければ幸いです。

```javascript
#include "./sample/showdown.js"
#include "./sample/extensions/table.js"
// -----------------------------------------------------------------------------
// Markdown to HTML Using Showdown (β版) 作成日 2014-12-09
//
// ● 概要・使い方
// Markdown記法で記述したファイルを HTMLファイルに変換します。
// 通常の Mery用マクロスクリプトと同様に変換したいファイルに実行して下さい。
//
//
// ● フォルダ構成
// showdown.js と拡張ファイルを開発サイトから取得して以下の様に配置して下さい。
// 圧縮版・通常版どちらでもかまいません。
// 開発サイト https://github.com/showdownjs/showdown
//
// sample.js このスクリプト
// sample/ スクリプトと同名のフォルダ
// ├showdown.js 取得したパーサー
// ├extensions/ フォルダ
// │ └table.js 拡張ファイル
// ├sample.css お好みのCSSファイルを用意する。
// └sample.html この場所に自動生成されます。
//
//
// ● 特徴・問題点・その他
// * 特徴
// - パーサーを直接インクルードして使用する(加工不要)。
// - エディタ単独で変換出来る。
//
// * 問題点
// - 表の変換が出来ない。
// (使えるらしいけど Mery からだと少し加工が必要になりそうかも。)
//
// * その他
// - スクリプト名,ファイル名,ヘッダー部などは、適宜ソースを書き換えること。
//
// -----------------------------------------------------------------------------

// 出力用ファイルパス生成
var scriptpath = window.ScriptFullName;
var outpath = scriptpath.replace(/\.js$/, "\\") + "sample.html";

// 入力ファイルパスを取得
var mdtextpath = document.FullName;

// 変換(＋表示？)
if (mdtextpath) {
md2html(mdtextpath);

// 変換した HTMLファイルを開く
editor.OpenFile(outpath, 0, meOpenAllowNewWindow);

// Webプレビュープラグインで確認 (注意：公式では非推奨のコードです)
// 使用するなら環境に合わせて数字を変更しアンコメントして下さい。
// ID = 7167 + プラグイン横の番号
// 下の例はWebプレビューがプラグインの９番目に登録されている場合です。
//Editor.ExecuteCommandByID(7176);

// 結局重いけどブラウザに投げる
// ～以下にコードを追加～
}

/*** Markdownファイル読み込み ***/
function ReadMDFile(filepath){
var stream = new ActiveXObject("ADODB.Stream")
stream.Type = 2;
stream.Charset = "utf-8";
stream.Open();
stream.LoadFromFile(filepath);
var text = stream.ReadText(-1)
stream.Close();
return text;
};

/*** HTMLファイル書き込み ***/
function SaveHTMLFile(filepath, text){
var stream = new ActiveXObject("ADODB.Stream");
stream.Type = 2;
stream.Charset = "utf-8";
stream.Open();
stream.WriteText(text);
stream.SaveToFile(filepath, 2);
stream.Close();
}

/*** HTML変換 (showdown.js) ***/
function md2html(mdtext_path){
var tophtml = '<!DOCTYPE html>\n<html>\n\t<head>\n'+
'\t\t<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\n'+
'\t\t<title>sample</title>\n'+
'\t\t<link rel="stylesheet" href="./sample.css">\n'+
'\t</head>\n\t<body>\n\n\n\n'
var bottomhtml = '\n\n\n\n\t<\/body>\n<\/html>\n'

var md_text = ReadMDFile(mdtext_path);
//var tableplugin = '{extensions: ["table"]}'; // serverside
var tableplugin = '{extensions: "table"}'; // clientside
var converter = new Showdown.converter(tableplugin);
var md_html = tophtml + converter.makeHtml(md_text) + bottomhtml;

SaveHTMLFile(outpath, md_html);
}
```

このスクリプトで変換後、Webプレビュープラグインで表示する場合の問題点が見えてきたので纏めておきます。

> × HTMLに組み込むシンタックスハイライトのスクリプトによっては毎回警告がでる。
> × 非推奨のコードを使用してプラグインを呼び出す事になる。
> × Webプレビューの動作状態を取得出来ないので、開いていたら閉じてしまう。
> × 現在編集しているファイルを表示しながら、変換後のファイルをプレビューする
> ことは出来無いので、プレビュー確認後は元のファイルへタブ移動が必須。
>
> ◎ Webプレビューの軽さは魅力的！

ブラウザに投げて表示する場合、

> ○ 変換したファイルは Mery で表示する必要がないので、タブ移動問題無し。
> ○ スクリプト警告なし。
> ○ 好きな描画エンジンを使用する事が出来る。
>
> × 近年のブラウザの肥大化で Markdown Editor の確認用としては重すぎ……ですね。

結局いろいろな Markdown Editor がユーザーから求められている主原因って、ちょっと確認したいけどブラウザが重いからって事に尽きますよね。
さて問題点も分かったし、ks氏作製の Meryプラグイン作成用 .NETラッパーを使えば C# のブラウザコンポーネントを使ってプラグイン作成できる気が……しないでもないでも……ない!?
……。

作ってみたい気はあるのですが、なかなかハードルは高そうです。
なので今のところ手石さんのお力にはなれそうに無くて残念です。
では、このへんで。

2014年12月13日 1:49 | 玄米茶 | 返信
玄米茶さんの投稿 (2014年12月13日) への返信

こんにちは。
Kuroさん、玄米茶さん、ありがとうございます。

現在は、
1. 編集中のMarkdown形式をhtml形式に加工するマクロを実行。
2. Webプレビューで確認したら、Ctrl-zで元のMarkdown形式に戻す。
という方法を取っています。
うっかり、htmlのまま終了してしまった場合は、http://domchristie.github.io/to-markdown/ でMarkedown形式に戻すということで……。

Markdown parser（プロセッサ）には、Marked（https://github.com/chjj/marked）の lib\Marked.js を利用しました。
なお、ダウンロードしたままではこのマクロには使えません。7行目と1249行目以降をコメントアウトしてください。
また、文字コードやパスは、各自の環境に合わせてください。

―― 2html.js ――
#include "E:\\path\\to\\Marked.js";
var css_file = '<link rel="stylesheet" type="text/css" href="example.css">';

var html = '';
html += '<!Doctype html>' + "\n" + '<html lang="ja">' + "\n" + '<head>' + "\n";
html += '<meta charset="utf-8"/>' + "\n" + '<title>HTML Document</title>' + "\n";
html += css_file + "\n";
html += '</head>' + "\n" + '<body>' + "\n";
html += marked( document.Text );
html += '</body>' + "\n" + '</html>' + "\n"
document.Text = html;
document.save();

/*
ブラウザを起動したい場合は、以下を有効にします。

var this_file = document.FullName;
var windowStyle = { HIDE: 0, NORMALFOCUS: 1 };
var command =[];
command.push( '"E:\\path\\to\\CyberfoxPortable.exe " "' + this_file + '"' );
command.push( '"E:\\path\\to\\X-Iron.exe " "' + this_file + '"' );

var WshShell = new ActiveXObject( 'WScript.Shell' );
for( var i = 0; i < command.length; i++ ){
WshShell.Run( command[i], windowStyle.NORMALFOCUS, false ); // false → ブロックしない。
};
WshShell = null;
*/

2014年12月15日 13:19 | 手石 | 返信