「Twitter Emoji(Twemoji) 」の使い方

   

米TwitterがTwitterサービス内で使用されている絵文字アイコンをオープンソース化した「Twitter Emoji(Twemoji) 」。
872個の絵文字がGitHub(https://github.com/twitter/twemoji)で無償公開されている。


ソースコードのライセンスはMITライセンス(「LICENSE」ファイル)、グラフィックのライセンスはAttribution 4.0 International(CC BY 4.0。「LICENSE-GRAPHICS」ファイル)

Twitter内で絵文字を使いたい場合には、AndroidやiPhone、Macからは絵文字を入力すれば反映されるようになっている。
Windowsからはtwemojiのウェブサイト(http://twemoji.maxcdn.com/)の「everywere」から飛べるプレビューページの絵文字をクリックするとコピー用のダイアログが出るので、コピーして貼り付ければOK。

以下、サイトへの導入方法。
headタグ内
  1. <!--文字コードはUTF-8に設定-->
  2. <meta charset=="utf-8=">
  3. <!--JSファイル読み込み-->
  4. <script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
  5. <!--絵文字と文字のサイズを合わせる-->
  6. <style>
  7. img.emoji {
  8. height:1em;
  9. width:1em;
  10. margin:0 .05em 0 .1em;
  11. vertical-align:-0.1em;
  12. }
  13. </style>

bodyタグ内
bodyタグの最後の辺りに追加。
  1. <script>
  2. twemoji.parse(document.body);
  3. </script>
以上のタグだとbody全体を変換。デフォルトだと36×36のPNGファイルに変換される。


72×72のPNGファイルに変換する場合
  1. <script>
  2. twemoji.parse(document.body, {
  3. size: 72
  4. });
  5. </script>

SVGファイルに変換する場合
  1. <script>
  2. twemoji.parse(document.body, {
  3. folder: 'svg',
  4. ext: '.svg'
  5. });
  6. </script>

指定ID内を変換
  1. <script>
  2. twemoji.parse(document.getElementById('foo'));
  3. </script>

参照するURLを変更(デフォルトは//twemoji.maxcdn.com/)
  1. <script>
  2. twemoji.parse(document.body, {
  3. base: './'
  4. });
  5. </script>


参考：
Open sourcing Twitter emoji for everyone | Twitter Developer Blog
https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone

twemoji/README.md | GitHub
https://github.com/twitter/twemoji/blob/gh-pages/README.md

〈