JavaScriptで簡易文字パレット〔サロゲートペア対応〕

Unicodeコードポイントor文字から検索して、下のようなパレットを出します。動作確認はWindows7とAndroid4.0でしました（ブラウザは下記）。

入力例：

10000（10進コードポイントで検索）
0x263A（16進コードポイントで検索）
0x2500（罫線の先頭）
0x25A0（装飾的な記号の先頭）
0x3000（全角ひらがな・カタカナのあたり）
0x1F427（サロゲートペアの例、絵文字）
𠮟（同じくサロゲートペアの例、文字で検索）

動作確認：

Windows7 32bit＋Chromiun43、Firefox39、IE10
Android4.0（ISW16SH）＋標準ブラウザ、Firefox39、Opera29

備考：

フォントにない字は豆腐（■、□、または空白など）になります（詳細）
0x3300,20　のようにカンマ＋数字を付けると、表示行数を変更（最大50）
16進コードポイントの先頭は「xだけ」または「U+」も可
検索後に出る▲▲、▲、▼、▼▼は「1画面戻る」「1行戻る」「1行進む」「1画面進む」
文字クリックで、下部の拡大表示欄に追加
何も入力せずボタンを押すと、適当な文字をランダムに
このページにクエリ付きでアクセスすると、最初からパレットを表示。例えば
http://kenpg.bitbucket.org/blog/2015/30.html?0x2710

その他：

自分で使う用に作りましたが、誰でも自由に利用して下さい。
ソースコードは明日付の記事にあります。
不具合などはまで連絡いただけると助かります。

参考、動機、感想

JavaScriptでのサロゲートペアの処理は、下記を参考にしました。m(_)m

Windowsの文字コード表（charmap.exe）がパレット用に使いにくいので、昨日はpgAdminのクエリツールで。今日は、JavaScriptで作ってここに置いておけば、ブラウザや自分のスマホでも見れて便利かもと。クエリツールでは無理な1文字の拡大、数値文字参照の表示、パレット移動ができて良かった一方、HTMLテーブルなので文字選択・コピーが不便。基本マウス操作になり、矩形選択もできない…。カーソルキーのイベントを拾って何とかするのは、手間がかかりそうだし。

フォントについて

文字パレットを含め、このブログ全体でのフォント指定は、PCがWindowsかつメイリオが入っている場合メイリオで、それ以外はsans-serifという総称ファミリになってます。で、メイリオにはサロゲートペアの🐧（0x1F427）などの絵文字がありませんが、ブラウザが自動的に、この字を持っている他のフォント（自分の環境ではSegoe UI Symbolとか）を代替的に使い、そういうフォントがないと残念ながら「豆腐」が多くなります。サロゲートペアに限らず他言語の文字なども同様。 ↓ Android4.0では、0x2710あたりの記号はフォントにありました。他の記号や特殊文字は少なめ。

ところで同じWindows機でも、ブラウザによって代替フォント使用の仕方が違う模様。例えばFirefox39とChromiun43で「☺」（0x263A）あたりのパレットを出すと ↓ Firefox（上）の方がChromium（下）より多く字が表示されました。

フォントがあるのにブラウザによって文字が表示されないのは残念なので、何か対応したい。あとマイナーな言語の字はGoogle Fontsを使うとか。少しずつ考えます。