日別アーカイブ: 2017-11-17

絵文字の薦め

絵文字とユニコード

ナスカの地上絵のように絵で感情を表現する習慣は古くからありますがemojiは日本から世界中に広まりました。絵文字をテキストエディタで扱うときには注意が必要です。全角特殊文字なかでもサロゲート文字を入力できないエディタが多いからです。

絵文字をJavascriptプログラミングする場合、機能の小さなエディタでも扱えるようにするには16進数コードで記述することが多く、文字に対応する16進数ユニコードを取り出すツールを作ってみました。体験を記録に残します。

絵文字表示の一方法

主な絵文字1126種を画面に表示し、絵文字の上をクリックし選択した文字と16進数ユニコードを大きく表示します。

文字を等間隔に描画しクリックしたときのカーソル位置(x, y)から選択された文字を特定します。

均等割り付けならばクリック位置から選ばれた文字に変換するのはきわめて容易です。

均等割り付けの難しさ

文字や画像を表示しクリックした位置を検出してそれを反映させるとき、均等割り付けで描画します。均等割り付けの方法は以下のようにjustifyを使うのが定番ですが、しっくり思ったようにいきません。

text-align:justify; text-justify:inter-ideograph; white-space:nowrap;

試行錯誤を繰り返し、次のようなtable要素を使うことにしました。


<div id="emoji" style="clear:both; width:600px; height:1900px; border:1px green solid;">
<table id="tbl" style="border-collapse:collapse; table-layout:fixed; width:600px; height:1900px; text-align:center; font-size:14px;" border="1"></table>
</div>

上に示したようにポイントはtable要素において、border-collapse:collapsetable-layout:fixedwidth:600pxtext-align:centerを用いることです。中でもwidthで長さを固定にすることが大切です。borderに””とヌルを指定すると枠線は表示されません。

均等割り付けの他に問題になった点は文字の高さがブラウザごとにまちまちなことです。

この問題を解消するには、絵文字描画エリアのdiv要素のheight属性に、height:1900pxなどと固定値を設定します。この値を表示行数で除して一文字の高さを算出します。そしてカーソル位置から指定文字を割り出す算出式に採用します。

ブラウザ対策と使い方

🎅

ブラウザの動作が微妙に異なることは知られています。ここでは、IE11, Chrome, FireFox, Opera, edgeで動作するように努力しました。通常の利用方法ではブラウザOperaでclientHeightが他のブラウザと異なる値になり、誤動作しました。そこで最も大きな値を定義し、その値をdocument.getElementById(‘tbl’).style.heightで求めてDivエリアの高さとみなして各ブラウザに対応させます。

 

16進ユニコードを得るには実行例の絵文字上をクリックします。絵文字は少ない情報量で意思疎通を図るのに適し、ユニコードとして統一されたことは大きな進歩ですが、残念な点は表現する意は同じでも絵柄が開発元ごとに少しずつ異なることです。

将来への布石

今回、使われている主要なブラウザで動作するように腐心しました。そのため、動作中のブラウザ名を右上に表示していますがその特定法は完全ではありません。簡便法により振り分けています。

ブラウザ名に’opera’という文字列が入っていれば、operaブラウザと判定する方法です。この文字列が恒久的に変わらないという保証はありません。

他にもoperaHouseという別のブラウザが出現したときも不安定になります。これが他力本願的であり簡便法と言われる所以です。

検出したブラウザコードを条件式で参照することはしておらず、各ブラウザに共通する処理で切り抜けていますが安定した解析法とは言えません。

将来、Javascriptプログラミングコードを電子書籍化して公開したいと考えています。

実行例