My Note生成のHtmlコードを覗いてみる

My Note生成のHtmlコードを覗いてみる

「My Noteはウィズウィグ（WYSIWYG＝What You See Is What You Get 見たままのものが得られる）な編集エディターです。」とは各所で述べてきたことですが、同時にノーコード化が実現している訳でありHtml（文）やSvg（図）のコードを記述することなしにWeb文書が出来上がります。My Noteのウィズウィグ化、ノーコード化の手法はテンプレート型（ユーザが希望する出来上がりの基本枠を提供する方式）ではなく、コード置き換え型とも言うようなコードの内部操作をテーブル化したり、マウス操作に置き換えたりした、単純な方式ですので画面操作と結果（表示内容＝生成コード）が結び付きやすく、画面操作からの生成コードとの対応関係を見比べることでHtmlコードやSvgコードの体験的な習得に役立てるものと思いますし、不得意な部分や未習熟な部分はMy Noteの生成コードをコピー＆ペーストで自分コードの一部として採用することなども可能となります。今まではMy Noteの編集操作によって内部的にはHtmlコードが生成されていて、その生成されたコードについて隠していたわけではないのですが、表立って公開していませんでした。今日は生成されたHtmlコードを階層的に整頓した形式で表すことが出来ましたのでそのことも含めてお話しすることと致しました。特に今からHtmlやSvgなどWeb言語を勉強中であったり、勉強しようとしている人には強力なスケットになるのではないでしょうか。

１．生成コードの覗き方

生成コードの説明は簡単です。右の図２．の例題をもとに話を進めます。図２．の編集ページの下部メニューの左端を拡大したものが図１．ですが、今までのメニューに対してview_Htmlを追加しました。

今まで説明に使っていたのは文書の編集とSvg図の編集の２つだけでした。３番目のHtml言語は以前からありましたが、説明はしてませんでした。３番目のHtml言語と4番目のメニューview_Htmlの２つがMy Noteによって生成されたHtmlコードを表示するものですが、４番目のview_Htmlが生成コードを階層的に成形し直して別画面として表示します。但し、生成コードを直接に編集することは出来ません。　　　　　　　　　　　　　　　　図１．編集メニュー

３番目のHtml言語は生成されたHtmlコードを成形し直すことなく表示したものですので見て解読したりするのは困難ですし面倒です。但し、３番目のHtml言語で表示されているHtmlコードはそのものを修正することが出来るのですが、間違って修正してしまうと修復困難になる場合もありますのでご注意下さい。

　　　　　　

　　　　　　　　　 図２．生成コードの例題

　２．生成Htmlコードの出力例（view_Htmlの場合）

２．生成Htmlコードの出力（Html言語の場合）