[三流君] −−＞ [ＡＳＰで遊ぶ、失敗する] −−＞ [バックナンバー一覧]
−−＞ No.025 復習兼ねてHTMLソースを変換するツールの作成

復習兼ねてHTMLソースを変換するツールの作成

本文(発行内容)

＜復習兼ねてHTMLソースを変換するツールの作成＞

こんにちは、Ｋｅｎ３です。

そろそろＤＢやれよ、、、
と要望の声が聞こえてくる今日この頃いかがお過ごしですか？
（そんなこと、ダレもいってないって？）
今回は、今までの復習を兼ねて、
HTMLソースを変換するツールを作成してみます。
なんて言ってるけど、たいしたことないのでご安心を。

/*
 * １．機能、初めは簡単シンプルに
*/

ホームページ上にＨＴＭＬのソース載せるのって、
メモ帳でちまちま作成している私は、
手間かかってます。

＜ＰＲＥ＞のタグで楽してるんだけど、
<html>を&lt;html&gt;と変換したりしなければならなくて、
いつもエディターの変換機能で<と>を２回置換して作成してます。

まず、この作業を無くしたいです。

次にやりたいのが、
ＡＳＰの＜％〜％＞で囲まれた部分をわかりやすく、
青色にしたいです。
＊ソースの表示プログラムでは、青になってるのに、
　バックナンバーでは、黒のままなので。

やりたいことを整理すると、
・＜＞を置換えたい、
・＜％〜％＞で囲まれたＡＳＰのソースを青にしたい
の２点です。

/*
 * ２．データ遷移
*/
やりたいことが決まったので、
次はデータの流れを考えます。

えっと、
入力はメルマガ文章でＨＴＭＬのタグが中に入ってると
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
出力は、＜＞などを置換え、文章中のＡＳＰ＜％〜％＞で囲まれた部分の色を変える
結果のＨＴＭＬソースを画面に出力ですね。
~~~~~~~~~~~~~~~~~~~~~~

いつものパターンで、
test025.html でフォームの入力
test025-1.asp で変換処理と出力にしますか。

/*
 * ３．入力フォームの作成
*/

入力フォーム、いままで、いろいろと作ってきたなぁ。
複数行の入力を行うので、
<TEXTAREA ROWS=XX COLS=XX NAME="XXXXX">
</TEXTAREA>
を使用するか。
入力項目は一つでさびしいけど、下記のように作成しました。

-- test025.html
<html>
<head>
<title>HTMLのソースを作成する</title>
</head>
<body>
<h2>HTMLのソースを作成する</h2>
<br>
HTMLのタグ付き文章を記入して送信ボタンを押してください。<br>
タグを変換した結果が表示されます<br>
<FORM ACTION="test025-1.asp" METHOD="POST">
↓↓↓変換したい文章↓↓↓<br>
<TEXTAREA ROWS=15 COLS=80 NAME="t-moto">
ここに、文章をコピーして下さい
</TEXTAREA><br>
<INPUT TYPE="submit" VALUE="文章を変換する">
<INPUT TYPE="reset"  VALUE="クリア">
</FORM>
</body>
</html>
-------

フォームの作成
^^^^^^^^^^^^^^
<FORM ACTION="test025-1.asp" METHOD="POST">
  ・
　・
</FORM>
で入力フォームが作成されます。
ACTION="test025-1.asp"
とデータの受け取り先を指定します。
METHOD="POST"は送信方法で、標準出力を使った方法です。
="GET"とするとＵＲＬの後ろに付けたクエリ情報で送ります。
( GETの詳細は、http://www.ken3.org/backno/backno_asp02.html#9
  のFORM ACTION="XXX.asp" METHOD="GET" を使用をみてください)

入力エリアの作成
^^^^^^^^^^^^^^^^
入力エリアは、
<TEXTAREA ROWS=15 COLS=80 NAME="t-moto">
ここに、文章をコピーして下さい
</TEXTAREA><br>
で簡単に作成しました。
＜ＴＥＸＴＡＲＥＡ＞のタグを使用して、
行 ROWS=15 １５行と表示を指定しているが、データはスクロールでたくさん入る
列 COLS=80 文章を貼るので大きめに
データの名前 NAME="t-moto"
と指定してます。

ボタンの作成
^^^^^^^^^^^^
フォームの動作をするボタンを２つ作りました。
<INPUT TYPE="submit" VALUE="文章を変換する">
は、押されたらデータを送信します。
<INPUT TYPE="reset"  VALUE="クリア">
は、入力データをクリアします。

入力側は物足りないけどこんな感じです。

/*
 * ４．出力側の処理
*/

フォームから送られた文章を受け取って、変換処理を行います。

データの受け取りは
^^^^^^^^^^^^^^^^^^
POSTで送られてくるので、
Request.Form("項目名")
~~~~~~~~~~~~~~~~~~~~~~
で値を参照だったっけ、
( 詳細は、http://www.ken3.org/backno/backno_asp01.html#4
  の、[No.4 フォームから値を受け取りたい]を参照 )

タグの変換は
^^^^^^^^^^^^
たしか、
Server.HTMLEncode("文字列")
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
で
変換結果を返してくれるんだっけ、
( 詳細は、http://www.ken3.org/backno/backno_asp04.html#17
  の、[No.7 中身を表示、Server.HTMLEncodeでソースの表示]を参照 )

ＡＳＰソースの色を変える
^^^^^^^^^^^^^^^^^^^^^^^^
これは、
Replace関数
~~~~~~~~~~~
で、
変換された&lt,&gtの前後に<Font>のタグを付けて処理しました。
strDATA = Replace(strDATA, "&lt;%", "<font color='blue'>&lt;%") '青にする
strDATA = Replace(strDATA, "%&gt;", "%&gt;</font>")     'カラー終了
こんな感じだったよね。
( 詳細は、http://www.ken3.org/backno/backno_asp05.html#21
   の、[No.21 文字列の置き換え、Replace関数を使用]を参照 )

なんだよ、過去のメルマガの紹介かよ。
で作成したのが、下記のtest025-1.aspです。

<%@LANGUAGE=VBScript%>
<html>
<head>
<title>受け取った文章をＨＴＭＬソースに変換</title>
</head>
<body>
<h2>受け取った文章をＨＴＭＬソースに変換</h2>
test025-1.asp<br>
<hr>
<%
  'まず、タグ関係を変換する
  strMOTO = Server.HTMLEncode(Request.Form("t-moto"))  'タグを変換
  '次にＡＳＰソース＜％〜％＞を青にする 
  strMOTO = Replace(strMOTO, "&lt;%", "<font color='blue'>&lt;%") '青にする
  strMOTO = Replace(strMOTO, "%&gt;", "%&gt;</font>")     'カラー終了
%>
<PRE><%=strMOTO%></PRE>
↑＜ＰＲＥ＞で囲うと元のままだ<br>
あっ、当たり前か、＜を変換してもそのまま表示したんじゃ
<hr>
よし、タグをさらに変換して潰してやる<br>
<%
    strMOTO = Server.HTMLEncode(strMOTO)  'タグをさらに変換
%>
<PRE><%=strMOTO%></PRE>
↑なんとかできたのかなぁ（笑）
<hr>
終了です。<br>

</body>
</html>
----

タグ関係の変換とＡＳＰ部分の処理
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<%
  'まず、タグ関係を変換する
  strMOTO = Server.HTMLEncode(Request.Form("t-moto"))  'タグを変換
  '次にＡＳＰソース＜％〜％＞を青にする 
  strMOTO = Replace(strMOTO, "&lt;%", "<font color='blue'>&lt;%") '青にする
  strMOTO = Replace(strMOTO, "%&gt;", "%&gt;</font>")     'カラー終了
%>
もう、関数の力を借りまくりで、ほぼそのままでした。

おいおい、表示が戻ってるよ（笑）
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<PRE><%=strMOTO%></PRE>
でそのまま結果を表示と。
あれ？
＜＞とかそのまま表示された。
あれ？じゃないよ三流君、だって＆ｌｔ；は＜だろ、そのまま表示されるって。
そっか

よし、タグをさらに変換して潰してやる
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<%
    strMOTO = Server.HTMLEncode(strMOTO)  'タグをさらに変換
%>
<PRE><%=strMOTO%></PRE>

で、
さらに、＆を＆ａｍｐに変換して、
これを＜ＰＲＥ＞で表示すると、ＯＫです。
なんか変だよね２回も変換通すなんてね。
違うやり方ありそう。。。。

/*
 * ５．終わりの挨拶
*/

今回は、復習を兼ねて、ＨＴＭＬ付きの文章を変換してみました。
テストは、
http://www.ken3.org/cgi-bin/test/test025.html
からできます。
遊んでみてね。

そろそろＤＢかなぁやはり。
イヤ、まだまだ違うネタで、、、、

素朴な疑問あったら、気軽に、
メール、掲示板に書き込んでくださいね。

ＡＳＰ、ＶＢＳｃｒｉｐｔ勉強中の三流プログラマーのＫｅｎ３でした。

ページフッター

ここまで、読んでいただきどうもです。目的の情報が見つかったか？少々心配しつつ、、、

三流君へ メッセージを送る

感想や質問・要望・苦情など 三流君へメッセージを送る。
返信例 XXXXさんへ
下記のフォームからメッセージを送ることができます。

あなたのお名前（ニックネーム）:さん
返信は？:

アドレス:に返事をもらいたい
感想や質問↓:


(感想や質問・要望・苦情はHPで記事に載せることがあります。)

種類別のリンク や 広告など

[三流君(TOP ken3.org へ戻る)] / [ASPで遊ぶ、失敗する] / [ASP記事 バックナンバー目次]

Blogとリンク:[三流君のMemo別館]/ [ASP 三流君のソースコード置き場]/ [Ken3Video YouTubeで動画解説]
広告:

気になった ジャンル ↓を選択してください。

まぁ、基本はデータの受け取りかなぁ。
・[Form等を使用したデータのやり取り]・・・ASPと言っても、HTMLの入力フォームからデータを受け取ります。POSTやGETでやりとりを押さえますか。

次は、データの入出力 で ADOを使った(ADOで接続) と SQLの解説を少々
・[ADOでMdbファイルを使う]・・・MDBと接続して、簡単な追加・更新・削除を行った。
・[ADOでExcelと接続してみた]・・・.xlsと接続してSQLを使ってみた。
・[ADOでCSVと接続してみた]・・・.CSV テキストを読み出した。※更新・削除はできません

広告:

DBが使えるので、あまり使用しないけど、普通のテキストファイル処理
・[テキストファイル処理]・・・ファイルを開いて、書き込む。１行読み込みなどを軽く

VBScriptでFormat関数が無いなど、微妙にVBAと違うけど
[VBScript関数関係の説明]・・・少し、処理を書いてみた。
[その他処理サンプル]・・・あまり良いサンプル作れなかったけど。。。
何かの参考となれば幸いです。


[三流君(TOP ken3.org へ戻る)] / [ASPで遊ぶ、失敗する] / [ASP記事 バックナンバー目次]

広告: