絵文字のためのライブラリ EmojiOne

EmojiOne とは

EmojiOne はオープンソースな絵文字ライブラリ. このように絵文字を表示させることができる (右). :smiley: （CMS 変更に際し、絵文字は表示されなくなりました。）

使い方

使い方は emojione/emojione が詳しい.

用意されている JSDeliver の CDN を使うと楽だ. 他にも NPM を使ったインストールもできる (ref: INSTALLATION.md).

<script src="https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css"/>

同レポジトリのディレクトリ /examples/ には, EmojiOne の使用例が記載されている. JavaScript であれば,

• .shortnameToImage(str)
• .toImage(str) :point_left:
• .toShort(str)
• .unicodeToImage(str)
• .shortnameToUnicode(str)

の 5 つのメソッドが用意されている (ref: JAVASCRIPT.md).

メソッド .toImage(str)

5 つのメソッドのうち, ひとつだけ例を挙げる. メソッド .toImage(str) は, ショートコード (コロンで囲まれた文字列で EmojiOne の絵文字と対応するもの) や unicode 絵文字の含まれる文字列を受け取り, それらを EmojiOne の絵文字に変換する.

emojione.toImage('ピザ :pizza:');

上の例では文字列「ピザ :pizza:」が得られる.

例

#entry-content 内を対象に, 絵文字の変換を行いたい. ただし, code タグ内のショートコードは変換しない. これは, 次のように実装できる.

try {

    // #entry-content があるか.
    const entry_content = document.getElementById("entry-content");
    if (! entry_content)
        throw new Error("No DOM elements of #entry-content.");

    // #entry-content 内の code タグ内の ":" をエスケープする.
    const code_tags = entry_content.getElementsByTagName('code');
    for (let code of code_tags)
        code.innerHTML = code.innerHTML.replace(/:/g, '\\:');

    // #entry-content 全体を変換.
    entry_content.innerHTML = emojione.toImage(entry_content.innerHTML);

    // エスケープした code タグ内 ":" を元に戻す.
    for (let code of code_tags)
        code.innerHTML = code.innerHTML.replace(/\\:/g, ':');

} catch (e) {

    console.log(e.message);

}