emoticonからemojiに変えてみました


これまでこのサイトではemoticonを使用していましたが、過去の投稿を含め、emojiに変更することにしました。

emoticonとemoji、なんじゃそりゃなアルファベットですが、一言でいえばどちらも絵文字です。
emoticonはsmileyともいい、要はコレ→ :笑:
emojiは日本のケータイでのみ使われていた絵文字😀が国際基準で使われるようになったものです。

※コレ→ (´・ω・`) は「顔文字」です。「絵文字」は「絵」です。混乱しますけど。

海外の音楽系フォーラムに参加していた自分はemoticonに非常に愛着がありサイトでも使用しているんですが、どうにも現在のニーズには合わなくなってきたのでemojiへシフトしていくことにしました。

WordPressをはじめ主だったCMSでは、標準機能としてemoticonを表示することができます。

「emoticon」や「smiley」でググると大量の画像が表示されますが、それだけ海外のコミュニティでは頻繁に利用されています。
中でも人気のキャラクターが :banana: 。自分も使いもしないのに入れているくらい。

でもモバイル機器でのサイト閲覧が普及してからは、バナナに出会うことはなくなってしまいました。
なぜなら、動くバナナはgifアニメーションでできているのですが、gif画像はモバイル機器で閲覧するには画質が悪すぎるのです。

そのため、どのデバイスでもキレイに表示できるemojiに変更しようと思った次第です。
ただ、emoticonもある理由で使い続けますが。

以下にemojiとemoticonそれぞれの管理で使用しているプラグインを紹介します。

emojiの入力

そもそもemojiを入力する方法ですが、モバイルの場合は、そのまま絵文字を入力すればOKです。
なかにはキャリア限定の絵文字もありますが、基本的にデザインの違いこそあれ、同じ意味のアイコンが表示されます。
またパソコンでも古いOSじゃなければ入力できます。

Windows8.1の場合は、タッチキーボードを表示してマウスクリックで入力できます。
Microsoft/タッチ キーボードを使用する方法

ただし、タッチキーボードはモバイル機器用の機能なので、ウチの23インチワイドのディスプレイで表示するとおそろしくデカくなります。
emoji5
しかもデカいうえに使いづらいので、WordPressで入力しやすくするプラグインを入れることにしました。

Native-Emoji  WordPress.org プラグインディレクトリ/Native Emoji

操作性のカスタマイズができないのは残念ですが、有効化するだけでTinyMCEのビジュアルエディタにemojiボタンとリストが表示されます。

emoji4

で、上の画像の右下にチラッと表示されているのが、emoticonを管理しているプラグインのものです。

emoticonのカスタマイズ

emojiは世界共通の規格でunicodeに組み込まれています。
そのためどの文化の人でも理解しやすい反面、既存のリストからしかイメージを選ぶことができません。

自分オリジナルのイメージアイコンを使用する場合、webフォントを使用する方法もありますが、それだと単色になってしまうため、カラー画像を使う場合はemoticonとして登録しておくと使い勝手がいい場合もあります。

このサイトの場合、 :電子レンジ::減塩: といった画像をオリジナルイメージとして登録しています。
その管理で使用しているプラグインがこれです。

wp-Monalisa WordPress.org プラグインディレクトリ/wp-Monalisa

指定したディレクトリにアップロードした画像に、表示するためのテキストを設定して使用します。

emoji3

料理アイコンはPNG形式で作成しているので、いまのところgif画像よりはモバイルでも耐えうる画質になっていると思います。

いつまで使えるかはわかりませんけど。
WEB技術は常に進化しているので、今まで当たり前と思っていた技術が通用しなくなるのもあっという間です。

ちょっと勉強をサボるとすぐ時代遅れなサイトになってしまうので、時代に沿ったサイトを作り続けるって、結構大変なことなんですよね😣