ツイッターの絵文字が化けてしまってうまく表示されないとき！

Twitterには絵文字を使える機能があります。

「ニコちゃんマーク」とか「ハートマーク」とか、いろいろカラフルな文字が使えます。女子高生とかがよく使っていますよね。

あの絵文字ツイート、自分のサイトで表示するときになんだか文字化け？してしまって、モノクロのそっけないマークしか表示されないことがあります。

こういうときは、ツイッターの絵文字を表示するjavascritプラグイン「twemoji.js」を入れると上手く表示できます。
↓
Open sourcing Twitter emoji for everyone | Twitter Blogs

使い方は簡単。HTMLのhead部分でtwemojiのjsを読み込みます。

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

そしてつぶやきテキストの要素を追加したあとに「twemoji.parse(要素);」を実行すると、テキスト中の絵文字が変換されます。静的なサイトならば下記のようにbodyの一番後ろあたりでparse()を実行すればよさそうですね。

  <script>
    twemoji.parse(document.body);
  </script>
</body>

絵文字のサイズを指定したいときは以下のようにプロパティをセットします。16px、36px、72pxなどが指定できます。

  twemoji.size = 16;//デフォルト36
  twemoji.parse(document.body);

自動で絵文字サイズをセットしたいときは、CSSに以下を記述すると勝手に良い感じに表示してくれます。

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

しかしあれですね、「emoji」って外国でも通用する言葉なんですね・・。「tsunami」とか「karaoke」みたいに日本発祥の概念なんでしょうかね・・。

やったこと