プログラム学習室 http://studyhallweb.com/

Dart言語: プログラムソースの表示

HTML内にプログラムソースを直接書き込むときpreタグを使っていました。 preタグはソースコードを直接HTMLに貼り付けて使用するには良いのですが、貼り付けた後、インデントが他のタグとずれるため、 HTMLが見づらいものになってしまっていました。
そこで、ソースコードを別ファイルにして、HTMLに読み込ませて表示するようにした。
今後、これを使っていこうと思いますが、後で分からなくならないように、ここに記録しておきます。

HTML内の記述とDart内での指定

基本形

outputタグでファイル名を指定し、プログラムで処理するためにidを付けます。
例: <output id="dart-src1">src_code.dart</output>

この例では、outputタグの位置に src_code.dart というファイルの中身を表示します。

そして、idをdartで表示用のクラス(importFileTag)に渡します。
例: importFileTag pre = new importFileTag('#dart-src1');

HTMLでのスタイル指定

読み込んだソースファイル全体のスタイルは class属性を使って css で指定します。
しかし、outputタグは class が使えないらしく、次のように指定してもスタイルが指定できませんでした。
<output id="dart-src1" class="src1">src_code.dart</output>

そこで、独自データ属性(data-*)を使って Dartプログラム内で処理しています。
例: <output id="dart-src1" data-class="[src1]">src_code.dart</output>
data-class の値を [] でくくっているのは、そうしないと getAttribute() で取得できなかったからです。(Dart ver.1.5.8)

行単位でのスタイルの指定も独自データ属性(data-deco)を使ってJSON形式で指定します。
例: <output id="dart-src1" data-class="[src1]"
data-deco='[{"type":"line-style", "line":17, "style":"color:blue;"}]'>src_code.dart</output>

この例では、line で指定した 17行目(正確には 0 からカウントのため 18行目)を青文字(color:blue;)にしています。
type は line-style と line-tag があります。
line-style は行全体のスタイル指定。line-tag は、その行の前後にタグを追加します。
line-style を選択した場合は、style でスタイル指定、line-tag の場合は headtag と endtag で前後のタグを指定します。
例: [{"type":"line-style", "line":17, "style":"color:blue;"},
{"type":"line-tag", "line":22, "headtag":"b", "endtag":"/b""}]

Dartでの処理

クラスは3つ作りました。importFileTagクラス、readFileクラス、srcCodeクラスです。
それぞれ順番にimoportFileTagはradFileを自身の中で使い、readFileはsrcCodeを使っています。

importFileTagは、HTMLから読み込むべきファイル名と表示するタグのIDを取得します。
readFileは、HTML内に表示するファイルを読み込みます。ファイルはHttpRequest.getString()で読み込んでいます。
srcCodeは、読み込んだファイルHTMLで表示するために整形しています。
キーワードは強調表示しますが、そのキーワードはkeyword.jsonというファイルから取得しています。

importFileTag クラス

page030_1.txt

タグID(tagId)を指定してインスタンス化します。
タグの値より、読み込むべきファイル名を取得します。
Element code = querySelector(tagId);
fileUri = code.text.trim();

readFile クラス

page030_2.txt

importFileTagで取得したタグID(tagId)とファイル名(fileUri)を指定してインスタンス化します。
タグIDはそのまま次のsrcCodeクラスに引き継ぐだけです。
readFileでは、ファイルをHttpRequest.getString()で読み込んで、1行ずつ(改行コードまで)のStringのList(codes)にしています。 そして、表示するためsrcCodeクラスに引き継いでいます。

srcCode クラス

プロパティ
page030_3.txt

メソッド
page030_4.txt

ファイルから読み込んだソースコードを表示用に加工します。
次の処理をしているため、ややボリュームのあるクラスとなってしまいました。
1.Dartキーワードの強調表示
2.タブコードをスペース(&nbsp;)2文字に変換
3.スペースを&nbsp; に変換
4.< と > を &lt; と &gt; に置換
5.//以降をコメントとして表示色変更
6.属性で指定したオプションへの対応

1 のDartキーワードはkeyword.jsonというファイルに記憶しています。
_readFile()でjsonファイルを読み込み、_mkKeyword()で置換用の文字列を作成しています。
最終的にHTMLとして扱うため、スペースは&nbsp;として扱っています。

上記1 のキーワードの処理は 2~5の処理と一緒に _convStr()で行っています。
2~4 は単純に replaceAllで置き換えです。(005~008)
1 のキーワードと 5 のコメントは正規表現を用いた置換をしています。(010,012)
page030_5.txt

正規表現の置換は _replace() で処理しています。
置換する文字に、正規表現の検索で合致したものを使用するには match m として、m[0] でバターンマッチした全てのもの。 m[n] で n番目にバターンマッチしたものを指定できます。
page030_6.txt

これらの処理を conv() にて行っていますが、jsonファイルの読み込みは future になりますので、then をつなげて順次処理されるようにしています。(007~010)
この future を順次処理させる方法がなかなか分からなくて時間がかかりましたので、これについては別途ページを設けたいと思います。
page030_7.txt