おさらい
前回は、サクラエディタを導入し、設定を整え、サクラエディタからなでしこのプログラムを実行出来るようにしました。
今回は、シンタックスハイライトを実装しようと思います。
なでしこのシンタックスハイライト
v1のnakopadで、実際にどのように着色されるか見てみると、
- 助詞 ＞ 緑色／濃赤色
- 記号 ＞ 水色／水色
- 予約語 ＞ 水色／濃青色
- 数値 ＞ 紫色／濃青色
- 関数 ＞ 紫色（太字）／紫色（太字）
- 文字列 ＞ 黄色／濃青色
- コメント ＞ 灰色／濃緑色
こんな感じ？（黒背景／白背景）
まずは、これを実現すべくがんばろう。
なでしこ用のタイプ別設定を作る
さくらエディタには「タイプ別設定」というのがあって、有名どころのプログラミング言語とかHTMLなどが登録されており、それぞれが編集しやすいよう設定され、シンタックスハイライト表示も出来るようになってます。
しかし、なでしこは当然というか何というか登録されていないので、まずはなでしこ用のタイプ別設定を作って、ここに設定を追加して行くことになります。
- タイプ別設定一覧 ＞ 追加 ＞ 設定変更 ＞ スクリーン
- 「設定の名前」を「なでしこv3」などにする。（自分が分ればOK）
- 「ファイル拡張子」を「nako,nako3,html」にする。
※ 拡張子に「html」を入れるのは、HTMLへの埋め込みで、Webアプリを作っていくのが、わたしの主な目的だからです。
一般のHTMLファイルをサクラエディタで編集する度合いが高いという場合は、ここにHTML入れず、必要に応じて「一時適用」するのが良いのでしょう。
※ 前回、ものすごくスルーしてしまいましたが、行間やフォント、折り返しなどの設定もすべてこの画面です。
先にコメント
コメント行は、普通にタイプ別設定の画面で設定出来るので、先に設定してしまいます。
- タイプ別設定一覧 ＞ なでしこv3 ＞ 設定変更 ＞ カラー ＞ コメントスタイル
- 行型に「#」（半角）
- 行型に「//」
- 行型に「※」
- ブロック型に「/」～「/」
- ブロック型に「」
※ 「」は、なでしこのコメントではなくHTMLのコメントですが、HTML埋め込みの場合、同じファイル内でHTMLを扱うので、一応登録しておきます。
ブロック型は２つまでしか登録出来ませんが、CSSのコメントと、なでしこのブロック型のコメントが同一で助かりましたね。
行型も３つまでしか登録出来ません。なでしこでは全角の「＃」も半角「#」同様コメント行として扱われるのですが、これは後に正規表現キーワードで対応させる予定です。
強調キーワード
「.kwd」という拡張子のファイルが、強調キーワード用のファイルのようです。
ヘルプを見ると、「パッケージ同梱のキーワードサンプルも参考にして下さい」と書かれているんだけど、単体でインストールしたばっかりにkeywordフォルダが同梱されてないという事実orz
捜索の結果、ここにありました！
CSSやHTML5などは使うかも知れないので拾ってくる。
中を眺めてみると、単純に強調したい語句の羅列のようです。
助詞
なでしこの助詞は、関数に日本語らしく引数を付けたり、単語の区切りとなる大事なものです。
v3の助詞は、GitHubのnako_josi_list.jsの中に助詞の一覧があったので、そこからコピーしてきました。
v3.2.12から、「助詞一覧取得」という、文字通り助詞の一覧を配列で返してくれる、超便利な命令が追加されました。（ただし、予約語の方に入れている条件分岐用の、「でなければ」や「たら」「れば」などは省いています）
//サクラエディタ用 なでしこv3 強調キーワード（助詞）
//---助詞-----------
について
くらい
なのか
までを
までの
とは
から
まで
だけ
より
ほど
など
いて
えて
きて
けて
して
って
にて
みて
めて
ねて
では
には
は~
は～
は
を
に
へ
で
と
が
の
記号
どこかに一覧があるか分りませんでしたが、普通に演算子やカッコなどなので、このあたり。
個人的には、「かつ」「または」も加えて良いのでは無いかと思ったりする（記号じゃないけど）。
あと、実際nakopadで着色されるもの。（めっちゃ手作業；）
//サクラエディタ用 なでしこv3 強調キーワード（記号）
//---記号-----------
//四則演算
+
＋
-
－
*
＊
×
/
／
÷
%
％
^
＾
//比較演算
=
＝
>
＞
<
＜
≧
≦
≠
!
！
//論理演算
|
｜
または
&
＆
かつ
//括弧
(
（
)
）
[
［
]
］
//配列・オブジェクトへの簡易アクセス
@
＠
//句読点
.
。
,
、
//他、v1のnakopadで着色されるもの
:
：
;
；
\
￥
?
？
予約語
条件分岐や繰り返しの制御構文や、定数であるオン(1)やオフ(0)などの類、特殊変数である「それ」などですが、定数の類がすべて着色する訳じゃ無いようだし、v1にはあるけどv3には採用されてないもの（必要、不要、キャンセルなど）も結構有り、一方v3にしかないもので、これは着色した方が良いのじゃないかと思う（undefined、未定義など）もありで、悩ましい。
めんどーだし、システム定数は全部含めても良いのじゃ無いかとも思う。（深く考えずに命令一覧から取れるから楽である）
もしか、色が付きすぎでうるさかったら削るかもだけど、取りあえずこんな感じ。
//サクラエディタ用 なでしこv3 強調キーワード（予約語）
//予約語
//---条件分岐-------
もし
違えば
でなければ
なければ
ならば
なら
たら
れば
//---制御構文--------
回
反復
繰返
繰り返
繰り返す
繰り返し
ここまで
戻
戻る
続ける
//---特殊変数-------
それ
対象
//---システム定数---
ナデシコバージョン
ナデシコエンジン
ナデシコ種類
はい
いいえ
オン
オフ
改行
タブ
カッコ
カッコ閉
波カッコ
波カッコ閉
OK
ＯＫ
NG
ＮＧ
PI
ＰＩ
空
NULL
undefined
未定義
エラーメッセージ
対象
対象キー
回数
CR
LF
空配列
//---特殊命令？-----
ナデシコ
表示
代入
##設定します
強調キーワードを使うには、まず、共通設定でセット追加をする必要があります。
- 共通設定 ＞ 強調キーワード ＞ セット追加
- セット名を入力（「なでしこv3助詞」とか。分ればＯＫ）
- インポート ＞ kwdファイルを選択 ＞ 開く
- 「英大文字小文字を区別」にチェック。
これを繰り返します。
色を別々にしたいので、ファイルごとに新しいセットを作ります。
-
タイプ別設定 ＞ カラー
- 強調キーワード2～10 ＞ 先ほど追加したセットを追加していきます。
- 色指定 ＞ セットを追加した強調キーワードの項目を良き色に変更。
正規表現キーワード
- タイプ別設定 ＞ 正規表現キーワード
- 「正規表現キーワードを使用する」に、チェックを入れる。
- 「/」と「/k」の間に正規表現を入れる。
- 「色指定」を選択。
- 「追加」（または「挿入」）
※ 追加したものは、クリックすると編集が出来ます。「更新」を押し忘れないよう注意（重要ｗ）
※ 色指定は、カラーで設定出来るすべての項目が選べるので、強調キーワードより幅広く使えそうですね。
普通の項目は、チェックが外れていても強調キーワードには色が反映されるようなので、使わない項目を強調キーワードように使うことも可能そう。
逆に強調キーワードの項目は、カラーのとこでチェックを入れないと反映されないのでご注意（重要）
このあたりを参考に、設定していきます。
数値
半角だけなら、タイプ別設定 ＞ カラーの中に、半角数値というのがあるので、それチェック入れてよき色に設定するだけなんですが、なでしこの場合、全角数値も含まれるんですよね～。
ふつーに０～９を強調キーワードに登録するなども考えられますが、ここは正規表現キーワードでしょ！
\dで、全角半角の数値のことになるとか知らなかった。
/[0０][xｘ][\da-fA-Fａ-ｆＡ-Ｆ]+|\d/k
てゆうか16進数もあったからどっちみち正規表現だったｗ
\dを前の方に書いて、なんで通らないんだ～！ と騒いでいたのは内緒；；；
関数
関数は、「●」で始まる行です。
/^●.+?\n/k
文字列
文字列が、曲者でした（ＴｏＴ）
単に、「」や『』に囲まれた部分です。簡単だと思ったんです。
が、複数行にわたる文字列の場合、２行目から色が戻ってしまう！
「.?」じゃダメなのは、分ってんです。
最初自分で思いついたのは「(\n|\r|.)?」でしたがダメで、検索した結果、[\s\S]とかもあったんだけどダメで、さらに調べるとどうやらサクラエディタは改行を挟んだ正規表現が出来ないんですって。
複数行の正規表現検索出来るようにするマクロなどは存在するらしいんですが、検索じゃないですからね・・・しくしくしくしく。
//文字列(展開あり)
/「[\s\S]*?」|“[\s\S]*?”|\{{3,}[\s\S]*?\}{3,}|S\{{3,}[\s\S]*?\}{3,}/k
//文字列(展開なし)
/『[\s\S]*?』|R\{{3,}[\s\S]*?\}{3,}/k
無駄に寂しく、複数行対応しようとした感・・・
しかしまあ、アレですよ。
黒背景で、ちょっと長文の文字列とか、目に優しくないですからね。
v3だとHTMLやCSSを文字列としてまるっとHTML設定するなども多いので、HTMLとCSSのシンタックスハイライトも設定して、括弧内も色変わって見えるとかも良いかも知れない。
そうゆうことにしよう。そうしよう。
コメント
文字列と同じ理由で、ブロック型のコメントを追加するのは難しそうだけど、行型なら大丈夫～。
/＃[^\\n]*/k
正規表現キーワードファイル
えくすぽーとすると、こんなの出来ました。
// 正規表現キーワード Ver1
RxKey[000]=NUM,/[0０][xｘ][\da-fA-Fａ-ｆＡ-Ｆ]+|\d/k
RxKey[001]=RK1,/^●.+?\n/k
RxKey[002]=WQT,/「[\s\S]*?」|“[\s\S]*?”|\{{3,}[\s\S]*?\}{3,}|S\{{3,}[\s\S]*?\}{3,}/k
RxKey[003]=SQT,/『[\s\S]*?』|R\{{3,}[\s\S]*?\}{3,}/k
RxKey[004]=CMT,/＃[^\\n]*/k
「.rkw」という拡張子のファイルが、正規表現キーワード用のファイルのようです。
次からはこれをインポートすればＯＫというわけですね。
インポート後は「更新」を押さなければダメです（重要）
正規表現キーワードの一覧に表示されて、安心してOKすると、反映されてません；
書式は、
RxKey[(No.)]=(色指定),/(正規表現)/k
こんな感じラシイ。
色指定のトコの呪文の対応を、以下に掲載します。
色設定
大体こんな感じかと思われる、nakopadの黒背景に寄せた色設定を作りました。
色設定にしろ、正規表現キーワードにしろ、サクラエディタ上で設定して、エクスポートというのが前提のファイルのようで、中身の書式について説明されているところは無いもよう。
だけど、ファイルで作ってインポートの方が楽ってコトもさ、あるよねー。
というわけで、なんとなく分るような気もするけどイミフな色指定のコードの対応を記載しました。
カーソルとかのように、全部の項目が指定出来ないものもあるので、それも記載しました。
; テキストエディタ色設定 Ver3
; なでしこ用 黒背景
; ---------------------------------------------------------------------
; C[XXX]=D(色分け/表示),B(太字),C(文字色),K(背景色),U(下線)
; D(色分け/表示)、B(太字)、U(下線) の価はオフ(0)/オン(1)
; C(文字色)、K(背景色)のカラーは、RGBではなくBGRなので気を付ける。
; ---------------------------------------------------------------------
[SakuraColor]
C[BRC]=1,1,0000ff,000000,0 // 対括弧の強調表示 (D,B,C,K,U)
C[CAR]=1,0,ffffff,000000,0 // カーソル (C)
C[CBK]=0,0,000000,80ffff,0 // カーソル行の背景色 (D,K)
C[CMT]=1,0,c0c0c0,000000,0 // コメント (D,B,C,K,U)
C[CTL]=1,0,00ffff,000000,0 // コントロールコード (D,B,C,K,U)
C[CVL]=0,0,ff8080,000000,0 // カーソル位置縦線 (D,B,C)
C[DFA]=1,0,d20000,ffd0a2,0 // DIFF差分表示(追加) (D,B,C,K,U)
C[DFC]=1,0,006f00,c0fdbd,0 // DIFF差分表示(変更) (D,B,C,K,U)
C[DFD]=1,0,006ad5,ace9ff,0 // DIFF差分表示(削除) (D,B,C,K,U)
C[EBK]=0,0,000000,c0c0c0,0 // 偶数行の背景色 (D,K)
C[EOF]=1,0,808080,000000,0 // EOF記号 (D,B,C,K,U)
C[EOL]=0,0,c0c0c0,000000,0 // 改行記号 (D,B,C,K,U)
C[FN2]=1,0,000000,ffffa0,0 // 検索文字列2 (D,B,C,K,U)
C[FN3]=1,0,000000,99ff99,0 // 検索文字列3 (D,B,C,K,U)
C[FN4]=1,0,000000,9999ff,0 // 検索文字列4 (D,B,C,K,U)
C[FN5]=1,0,000000,ff66ff,0 // 検索文字列5 (D,B,C,K,U)
C[FND]=1,0,000000,80ffff,0 // 検索文字列 (D,B,C,K,U)
C[HDC]=0,0,400080,000000,0 // ヒアドキュメント (D,B,C,K,U)
C[IME]=1,0,ffc0c0,000000,0 // カーソル(IME ON) (C)
C[KW1]=1,0,00ff00,000000,0 // 強調キーワード1 (D,B,C,K,U)
C[KW2]=1,0,ffff00,000000,0 // 強調キーワード2 (D,B,C,K,U)
C[KW3]=1,0,ffff80,000000,0 // 強調キーワード3 (D,B,C,K,U)
C[KW4]=1,0,c0c0ff,000000,0 // 強調キーワード4 (D,B,C,K,U)
C[KW5]=1,0,0080ff,000000,0 // 強調キーワード5 (D,B,C,K,U)
C[KW6]=1,0,0080ff,000000,0 // 強調キーワード6 (D,B,C,K,U)
C[KW7]=1,0,0080ff,000000,0 // 強調キーワード7 (D,B,C,K,U)
C[KW8]=1,0,0080ff,000000,0 // 強調キーワード8 (D,B,C,K,U)
C[KW9]=1,0,0080ff,000000,0 // 強調キーワード9 (D,B,C,K,U)
C[KWA]=1,0,0080ff,000000,0 // 強調キーワード10 (D,B,C,K,U)
C[LNO]=1,0,333333,c0c0c0,0 // 行番号 (D,B,C,K,U)
C[MOD]=1,1,333333,c0c0c0,0 // 行番号(変更行) (D,B,C,K,U)
C[MRK]=1,0,f0fbff,c08000,0 // ブックマーク (D,B,C,K,U)
C[NOT]=0,0,ffc0c0,000000,0 // ノート線 (D,C)
C[NUM]=1,0,ff00ff,000000,0 // 半角数値 (D,B,C,K,U)
C[PGV]=1,0,f0fbff,ffe6be,0 // 表示範囲(ミニマップ) (D,K)
C[RAP]=1,0,808080,000000,0 // 折り返し記号 (D,B,C,K,U)
C[RK1]=1,1,ff00ff,000000,0 // 正規表現キーワード1 (D,B,C,K,U)
C[RK2]=1,0,ff0000,000000,0 // 正規表現キーワード2 (D,B,C,K,U)
C[RK3]=1,0,ff0000,000000,0 // 正規表現キーワード3 (D,B,C,K,U)
C[RK4]=1,0,ff0000,000000,0 // 正規表現キーワード4 (D,B,C,K,U)
C[RK5]=1,0,ff0000,000000,0 // 正規表現キーワード5 (D,B,C,K,U)
C[RK6]=1,0,ff0000,000000,0 // 正規表現キーワード6 (D,B,C,K,U)
C[RK7]=1,0,ff0000,000000,0 // 正規表現キーワード7 (D,B,C,K,U)
C[RK8]=1,0,ff0000,000000,0 // 正規表現キーワード8 (D,B,C,K,U)
C[RK9]=1,0,ff0000,000000,0 // 正規表現キーワード9 (D,B,C,K,U)
C[RKA]=1,0,ff0000,000000,0 // 正規表現キーワード10 (D,B,C,K,U)
C[RUL]=1,0,333333,c0c0c0,0 // ルーラー (D,C,K)
C[SEL]=1,0,ffffff,800000,0 // 選択範囲 (D,B,C,K,U)
C[SPC]=1,0,c0c0c0,000000,0 // 半角空白 (D,B,C,K,U)
C[SQT]=1,0,00ffff,000000,0 // シングルクォーテーション文字列(D,B,C,K,U)
C[TAB]=1,0,808080,000000,0 // TAB記号 (D,B,C,K,U)
C[TXT]=1,0,ffffff,000000,0 // テキスト (C,K)
C[UND]=1,0,808080,000000,0 // カーソル行アンダーライン (D,C)
C[URL]=1,0,ff0000,000000,1 // URL (D,B,C,K,U)
C[VER]=0,0,c0c0c0,000000,0 // 指定行縦線 (D,B,C,K,U)
C[WQT]=1,0,80ffff,000000,0 // ダブルクォーテーション文字列 (D,B,C,K,U)
C[ZEN]=1,0,c0c0c0,000000,0 // 日本語空白 (D,B,C,K,U)
文字列は、「（展開有り）」の時の色を少し薄くして、目に優しくしていますｗ
『（展開無し）』は、差違を出したいこともあって変えていません。
記号と予約語の色も、若干変えています。
つづきます
サクラエディタには、キーワードヘルプや入力補完の機能もあるそうなので、そのための定義ファイルを作成します。
命令に説明が出たりするの、めっちゃ良くないですか？！
あと、アウトライン解析用のルールファイルも作ります。
前の記事：『さくらエディタでなでしこさんを使いたい！ その１、さくらエディタの導入と設定』
次の記事：『さくらエディタでなでしこさんを使いたい！ その３、キーワードヘルプと入力補完』