emoji探寻之路

Posted 2020-07-08 LightSong@计海拾贝

emoji是什么？

http://www.baike.com/wiki/emoji

emoji表情符号，是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建的，词义来自日语（えもじ，e-moji，moji在日语中的含义是字符）。

emoji可以使数字通信做到让人如同面对面交流，避免错误传达信息。

自苹果公司发布的ios 5输入法中加入了emoji后，这种表情符号开始席卷全球，目前emoji已被大多数现代计算机系统所兼容的Unicode编码采纳。

手机操作系统iOS，android，WindowsPhone；

电脑：Windows，Mac OS X均内设Emoji表情

QQ等聊天工具中也添加了emoji表情供用户使用

 

Windows（仅支持Windows 8、Windows 8.1、Windows 10、Windows RT）

任务栏右键-工具栏-屏幕键盘，然后任务栏上会出现一个白色键盘，单击打开后，在屏幕键盘的左下角按一个笑脸的标志就出现大量Emoji表情，里面也包含颜表情。

 

各种emoji 的表情符号:

http://coocy.github.io/emoji/

 

字符集之乱战

http://wpceo.com/supporting-emoji-on-php-mysql/

说起 Emoji 的历史说开去那可谓是源远流长了，这里简要介绍 Emoji 在 iOS 系统中的变迁史。

不知道何时起，日本人喜欢发 Emoji 表情图标，于是日本的运营商 DoCoMo、KDDI、SoftBank 推出了自己的 Emoji 字符集。

在这些字符集中，一个 Emoji 表情的实际上是一个 UTF8 字符，这点不同于 QQ 或者微信的表情，

用户发短信的时候一个 Emoji “图像”只占用了一个字符，那是相当的方便。

 

苹果的 iOS 和 Mac OS X 系统内置了 Apple Color Emoji（Apple 彩色表情符号）的字体用来显示 Emoji 表情，

iOS 里有一个 Emoji 输入键盘，可以输入各种 Emoji 表情图标，

在 Mac OS X 里使用 Option + Command + T 调出输入键盘里选择“表情符号”输入，

Mac OS X 里的字体文件位于 /System/Library/Fonts/Apple Color Emoji.ttf。

 

从技术上说，单个 Emoji 表情实际上是使用 UTF8 编码的一个字符，苹果在 iOS4 开始支持了 Emoji 的显示，

当时用的是 SoftBank 的方案。在日本的三家运营商之间，用来表示同一个表情的 UTF8 码并不相同（见对比列表），

们之间要做一个转换才能正确显示。以相同一个表情笑脸为例，SoftBank 表示为 U+E04A，KDDI 则表示为 U+E488。

 

https://en.wikipedia.org/wiki/Emoji

From 2010 onwards, some emoji character sets have been incorporated into Unicode,

a standard system for indexing characters,

which has allowed them to be used outside Japan and to be standardized across different operating systems.

幸而 2010 年， emoji表情字符编码 unicode组织统一。

 

从 iOS5 开始，苹果开始支持标准的 Unified 编码的 Emoji 表情。

苹果在 iOS6 和 Mac OS X 10.8 中又增加了 300 多个 Emoji 表情，而 SoftBank 编码因为渐渐被历史淘汰，已经没有了相应的升级。

 

现在（2016-5-17）IOS已经发展到IS09，旧的设备可以升级到新系统。

 

三种字符集与unicode之间的对应表：

http://www.unicode.org/Public/UNIDATA/EmojiSources.txt

 

三种字符集与unicode之间转换的PHP工具：

https://github.com/iamcal/php-emoji

 

emoji的unicode编码和UTF8存储码之间的关系：

http://punchdrunker.github.io/iOSEmoji/table_html/index.html

 

WEB应用考虑

因为PC的输入法中不支持emoji，或者系统不支持。 如果在WEB上应用，需要有一些考虑：

分析：

1、 emoji作为unicode字符集一部分，应该是操作系统支持的范围（系统支持，输入法支持，例如现有手机android系统，win8之后系统也支持），

    但是考虑到web页面的平台兼容性， 把 Emoji 输入和显示最好需要通过图片化方式。

    所以，需要选择前端emoji插件库。

2、 由于历史原因，日本的运营商 DoCoMo、KDDI、SoftBank 推出了自己的 Emoji 字符集，老的iphone手机（IOS6之前）使用SoftBank编码，

    导致可能出现设备之间配置的emoji出现乱码现象，但是考虑unicode编码格式已经成为规范有时（6年），

    现有系统均已此为实现依据，所以规定应用仅仅 emoji 字符 为 unicode 码足矣。

    不兼容旧系统的无线设备的 emoji显示。

3、 页面输入，规定 只使用WEB界面上的前端插件提供标准的 emoji 输入方式。

    类似手机之类自带的 emoji 输入法，不允许输入。以免2中描述的 设备兼容性问题。

 

前端emoji库调查

emojify.js

http://hassankhan.me/emojify.js/

A javascript module to convert Emoji keywords to images

只能将 emoji关键字(例如 :smile:) 转换成笑脸图标，不提供输入。 基于图片方案，图片大小3.8M。

 

js-emoji

https://github.com/iamcal/js-emoji

A JS Emoji conversion library

js-emoji - Display emoji in the browser, everywhere

同上, 不提供输入。 不直接维护图片，引用的图片在另外一个项目。 图片大小为 3.4M.

https://github.com/github/gemoji/tree/master/images/emoji/unicode

 

one-signal/emoji-picker

https://github.com/one-signal/emoji-picker

Add a slick emoji selector to input fields and textareas on your website.

提供输入，不提供图片显示。依赖图片， 图片大小为 3.2M.

IE8不支持。

 

jquery-emoji-picker-master

https://github.com/wedgies/jquery-emoji-picker

A jQuery picker for emojis

提供输入，输入的工具实现不使用图片，显示以系统支持为准。 优点体积小。

我测试： IE8不支持。

 

方案推荐

方案1：如果完美支持图片输入和显示 emoji，

    需要引用两个 emoji js库图片大小翻倍。

    优点： 更加形象化。

    缺点： 图片大小8M， 且两个库（显示和配置库）图片风格不一致。

            且配置页面 对于配置项不提供回显。（one-signal/emoji-picker）

 

方案2： 只提供输入功能， 选择不依赖图片实现的jquery-emoji-picker-master。

        emoji显示依赖系统支持情况。

    优点： 整个库比较小。

    缺点： 输入框中的显示， 和 状态页面中的显示， 需要依赖系统字符显示。

 

考虑到 emoji属于新生事物，需要新系统支持，

类似android， win7上效果部分支持，win8已经全面支持，IOS6以上。

考虑到flash占用， 以及两套库的融合和维护成本，不推荐1， 并且考虑 emoji向前兼容性（新系统） ， 推荐 方案2.

 

关于校验的考虑:

emoji unicode字符，占用的byte不定， 页面可以放开长度校验，让后台实现。 或者研究是否能够实现js的byte校验。

 

 

jquery-emoji-picker效果

win8 + firefox

 

win8+IE

 

data-URI

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs

已经支持data:协议的浏览器有Opera 7.20及其以上版本,Safari 和 Konqueror. Internet Explorer 7 及以下版本不支持, Internet Explorer 8 及以上版本只支持在css文件中使用data URIs格式的图片.

 

http://www.cnblogs.com/hustskyking/p/data-uri.html

由于出现时间较早，目前主流的浏览器基本都支持 data URI：

• Firefox 2+
• Opera 7.2+
• Chrome (所有版本)
• Safari (所有版本)
• Internet Explorer 8+

但是部分浏览器对 data URI 的使用存在限制：

 

http://caniuse.mojijs.com/Home/Html/item/key/datauri/index.html