ナノでの数値文字参照の利用

2021-12-02 2021-12-02

文章内容調整
記事公開

再編集時に数値文字参照の記述を保持させる
ガラケー絵文字用記述への置き変えを防ぐ

ナノで上記２項を満たせる数値文字参照の記述方法です。　実質ナノで使用不能な文字を表示させる方法でもあります。

使用方法

基本形

&#X16進数文字番号;

上記で利用可能です。　そのままの数値文字参照記述だと一部文字がナノ側から勝手に置き換えられて表示できないので、Xは必ず大文字で記述してください。

メール(プレビュー有り除く),拍手,掲示板など、閲覧者の投稿時にも数値文字参照を記述することでナノでの利用不可能な文字を使用することができます。

例

♡: &#X2661;
ᐛ: &#X141b;
鴞: &#X9d1e;
髙: &#X9ad9;

管理者の編集ページへの記述

&&sharp;X16進数文字番号;

再編集時数値文字参照記述を保持してくれないので、編集ページのテキストエリアへ記述する際は#を&sharp;に変更しておくことをお薦めします。 (閲覧者投稿では使えません)

例

♡: &&sharp;X2661;
ᐛ: &&sharp;X141b;
鴞: &&sharp;X9d1e;
髙: &&sharp;X9ad9;

何をやっているのか

数値文字参照とは

文字参照

10進数記述：&#10進数文字番号;

16進数記述：&#x16進数文字番号;

上記記述で文字番号がISO 10646の文字番号に合致した文字を(ページの指定文字コード等関係なしに文字化けなく)表示できるよ！　というHTMLの機能みたいなものと思ってください。

記述において、アルファベットの大文字小文字は区別されません。

ナノの置き換え回避

ナノで利用不可能な文字について

上記記事で詳細を書いていますが、ナノだと特定の文字が使えません。　数値文字参照記述にすることで回避できますが、特定パターンに合致した数値文字参照記述もナノ提供のガラケー絵文字用記述に置き換えられるので実質使えません。

逆に言えば特定パターンから外れれば良い訳です。　前述の&#X16進数文字番号;もその一例で、特に注意事項もなく一律「Xを大文字に」だけで説明が済むので解説に採用しましたが、他の方法でも回避は可能です。

特定の数値文字参照

パターン１

&#10進数文字番号;
文字番号部分が4桁もしくは5桁

パターン２

&#x16進数文字番号;
xが小文字
文字番号部分が4桁
文字番号部分が数字もしくは大文字アルファベット

正規表現で書くなら&#\d{4,5};&#x[\dA-F]{4};とかですかね。

他の回避例

♡: ゼロパディングで桁変え
多分問題なし、通常だとやる意味が全くない為0前置き記述による問題の有無について情報が得られず
&#9825: ;省略
HTML5上だと問題なし、後続文字に気を使う必要有り
ᐛ: 文字番号部分に小文字アルファベット
一切問題なし、文字番号部分にアルファベットを含む必要があるので使える文字自体に制限有り

再編集時に数値文字参照記述を保持させる

何故かナノはテキストエリア内の数値文字参照記述を再編集時にエスケープしてくれません。　つまり数値文字参照記述に対応した文字として扱われるので編集の都度数値文字参照記述に書き換える必要があります。

この点は言ってしまえば#を&sharp;に変更するだけで解決します。

『&sharp;』について

#(U+0023)を出力してくれる、ナノ特有の独自タグです。

#を表示ではなく出力してくれるのがポイントで、ソース表示した際に該当箇所は&sharp;ではなく#の記述になっており、HTML解釈としてもソースの通り#を記述している扱いになります。

記述と出力と表示例

記述	出力ソース	表示
`#/&sharp;/#`	`#/#/#`	#/#/#
`<span style="color:&sharp;f90">あいうえお</span>`	`<span style="color:#f90">あいうえお</span>`	あいうえお
`&&sharp;X2661;`	`&#X2661;`	♡

HTML上(ナノ以外)での扱いについて

&sharp;は実際、HTMLにおいては♯(U+266f)を示す名前文字参照記述です。

HTMLとして解釈させる閲覧者(ブラウザ)側に届ける前に、ナノ(サーバー)側で#に置き換えられるので、♯をナノで名前文字参照として出力させる方法は現状ちょっと思いつきません。

エスケープについて

ログイン後の編集ページを含めた、HTMLで構成されたページの、テキストコンテンツ扱いされる範囲に文字参照の記述があると、記述そのままではなく対応する文字(ただし意味は持たない)として解釈されます。

これを避けて「数値文字参照の記述として表示する」となると&#x141b;の様にどこか一字以上に文字参照を使って意味を持たない文字にする必要があるんですね。　こういった文書上意味を持つ記述をただの文字列として扱う為に行う処理が所謂エスケープ処理です。（ちなみにこのページで多数表示させている数値文字参照記述の例もこの方法を使っています）

ナノの編集ページは名前文字参照記述に対してはエスケープを行ってくれていますが、数値文字参照記述はそのままです。　なのでソースを見ると、テキストエリア内に自身が記述した数値文字参照があるのが確認できると思います。

なぜこの記述で避けられるのか

結局重要なのは２点です。

実ページでは数値文字参照として解釈させる
編集ページでは数値文字参照として解釈させない

この方法を使えば、実ページでは&#X141b;を出力するので数値文字参照として解釈され、編集ページでは&&sharp;X141b;(名前文字参照記述はエスケープしてくれるのでソース上は&&sharp;X141b;)となる為、数値文字参照として解釈されません。