前回までの記事で、C#からMarkdown形式のテキストをhtmlテキストに変換することが出来ました。
今回は、このhtmlをブラウザで表示した時、どのように見えるかをプレビュー可能にします。
プログラムは、前回作成したものを改造する事とします。
ブラウザでの表示形式でプレビュー可能にする
まず、フォームにWebBrowserコントロールを貼り付けます。WebBrowserコントロールは、コモンコントロールの一番下に有ります。
名前は、今回はwebBrowser1のままにしておきます。
次に、変換ボタンをクリックしたときのハンドラを書き換えます。
private void button1_Click( object sender, EventArgs e ) { //-------------------------------------- // markdown形式の文字列をhtmlに変換する //-------------------------------------- Markdown m = new Markdown(); String tmpBuff = m.Transform( textBox1.Text ); //-------------------------------------- // textBoxに出力するために改行文字を変換 //-------------------------------------- String htmlText = tmpBuff.Replace( "\n", Environment.NewLine ); //-------------------------------------- // 変換結果をテキストで画面に表示 //-------------------------------------- textBox2.Text = htmlText; //-------------------------------------- // 変換結果をブラウザにプレビュー //-------------------------------------- webBrowser1.DocumentText = htmlText; } |
前回と変わったのは最後の1行だけです。
WebBrowserコントロールは、DocumentTextプロパティでHTMLソースを直接指定できます。
※ちなみに… webBrowser1.Document.Write()を使用する技もあります。詳細は@ITの記事を参照。
この状態で、プログラムを実行します。
以下の様にhtmlをブラウザでプレビューしたときのイメージが表示されるようになりました。
htmlのheadタグを付与する
上記の方法で一応htmlのプレビューが可能になりましたが、markdown形式の変換結果に>html<や>head<タグが含まれていません。このため厳密に考えると、DocumentTextメソッドに変換結果をそのまま渡すのは、NGです(正しいHTMLテキストではないので)。
また、プレビューを行う際に自分で定義しているcssを適用したい場合も有ります。
次は、上記の問題点を解消するため、変換した結果に対して事前定義したヘッダ・フッタを付与できるようにします。
事前準備として、exeのあるフォルダにheader.txtとfooter.txtを追加します。
(VisualStudioでデバッグ中は、”bin\Debug”フォルダに配置してください)
各ファイルの中身は、以下のようになっています。
header.txt
footer.txt
ファイルを作ったら、取り込み処理を作ります。
ファイル読み込みの例外処理は、サンプルなので適当です。実際はダイアログを出すとかログを落とすなどしてください。
//*************************************************************************** /// <summary> ヘッダ情報を読み込む /// </summary> /// <returns>ヘッダテキスト</returns> //*************************************************************************** private String GetHeader() { return GetText( "header.txt" ); } //*************************************************************************** /// <summary> フッタ情報を読み込む /// </summary> /// <returns>フッタテキスト</returns> //*************************************************************************** private String GetFooter() { return GetText( "footer.txt" ); } //*************************************************************************** /// <summary> 指定されたファイルを読み込む /// </summary> /// <param name="fileName">ファイル名</param> /// <returns>ファイルの内容</returns> //*************************************************************************** private String GetText( String fileName ) { try { using ( StreamReader reader = new StreamReader( fileName, Encoding.GetEncoding( 932 ) ) ) { return reader.ReadToEnd(); } } catch ( Exception ex ) { Console.WriteLine( ex.Message ); return ""; } } |
markdown形式のテキストを変換した際に、これらのファイル内容を付け足すため、ボタンのクリック処理に対して、以下の変更を行います。
//-------------------------------------- // textBoxに出力するために改行文字を変換 //-------------------------------------- String htmlText = tmpBuff.Replace( "\n", Environment.NewLine ); ↓ String htmlText = GetHeader() + tmpBuff.Replace( "\n", Environment.NewLine ) + GetFooter(); |
実行すると、ファイルに記述したheader.txt,footer.txtの内容が適用されます。
header.txtにcssの定義を記述しているので、デザインが変わっているのが確認できます。
リアルタイムプレビューを可能にする
ここまでの方法で、ボタンを押す事でhtmlのプレビューが可能になりましたが、プレビューをしたいときに毎回ボタンを押す必要がある点がちょっと面倒です。次は、Markdown形式でテキストを入力したらその場でリアルタイムプレビューが出来るようにします。
プレビュー結果を書き換えたいタイミングは、Markdown形式のテキストが書き換えられた時なので、左上の入力欄(textBox1)にTextChangedイベントを追加し、以下の処理を記述しいます。
private void textBox1_TextChanged( object sender, EventArgs e ) { // 変換ボタンが押されたことにする button1_Click( sender, e ); } |
この変更を加えた上で、もういちど実行すると、期待通りにリアルタイムプレビューが出来ています。
(キャプチャ画面だと分からないですが、左上の入力欄に1文字入力するたびにプレビュー結果が変更されます)
リアルタイムプレビュー時の負荷を下げる
ここまでで、画面で入力したMarkdown形式テキストを、その場でプレビュー可能となりました。ただ、この方法だとテキストのサイズが小さいときは問題ないのですが、サイズが大きくなってくるとプレビューに時間が掛かるため、キー入力に対するレスポンス低下が起きてしまいます。
次回は、テキストが大量になっても入力のレスポンスが低下しないように改造してみます。
関連記事
コメントを残す