Open sourcing Twitter emoji for everyone | Twitter Blogs
うん、なかなか悪くない。
というわけで、せっかくなのでブログやホームページも絵文字対応させてしまおうか、というお話です。
Headタグ内とBodyタグ内、そしてCSSをいじるだけです。
今回はこのブログのサービスでもあるbloggerを使っていくことにしますが、他のサービスやHTMLでも基本は同じです。
絵文字変換のJavaScriptを組み込む
絵文字をJavaScriptで画像ファイルに置き換えてしまうことで、環境を選ばずに絵文字対応することができるようになります。
というわけで、Twitterが提供している絵文字置換のJavaScriptを読み込ませるべく、<head>タグ内にTwitter側が公開してくれているスクリプトを組み込みます。
まずはBloggerの管理画面を開き、テンプレートメニューを開いたら「HTMLの編集」をクリック。
テンプレート編集画面が開いたら、Twitterが提供している絵文字変換のJavaScriptを読み込ませるように次のソースを<head>タグ内に組み込みます。
<script src='//twemoji.maxcdn.com/twemoji.min.js'/>
これだけでは、絵文字を変換してくれるライブラリを読み込んだにすぎませんので、適宜このスクリプトを呼び出さなければいけません。
というわけで、呼び出したいページなりなんなりで次のスクリプトを実行するように記述します。
<script> twemoji.parse(document.body); </script>
ちなみに、スクリプトを書いた位置より前の絵文字しか置換されないので注意が必要です。
どこで絵文字を使うかはユーザーごとに違うでしょうけれども、ここではとりあえず乱暴にBodyタグ内の絵文字をすべて置き換えてしまうことにします。
というわけで、今回はかなり下のほう、Bodyタグの終了直前に組み込むことにします。
こうすれば置き換え漏れはでないはず…←
作業が終わったら「テンプレートを保存」を押し、保存が完了したら保存ボタンの左横にある「戻る」を押します。
ちなみに、デフォルトのサイズは32px×32pxなので大きいフォントサイズを使うなど個別の事情で読み込む画像サイズを変えたい場合は、次のように指定します。
例えば、読み込ませる絵文字画像を72px四方のものにしたい場合は、
<script>
twemoji.parse(document.body, {size: 72});
</script>
とします。72pxくらいの大きめのサイズにしておけば、文字サイズをブラウザ側で大きくしたときでもジャギー（ギザギザ）が発生しにくくなってよさそうですね。
逆に、読み込みを高速化させたいなどで画像を小さくしたい場合は、16を指定するのもアリでしょう。
もっとも、日本に限って言えばほとんどが常時接続ブロードバンドですから大した差はないとは思いますけれど。
指定するサイズは16, 32, 72, 128くらいが一般的じゃないかな、と思います。
なお、ここで指定しているパラメータは、次に詳しく記載されています。
https://github.com/twitter/twemoji#object-as-parameter
他にも置換されたあとの画像のクラス名や表示する画像の拡張子なども指定できますが…通常は変更する必要などないでしょう。
使い道としては、絵文字をPNGではなくSVGで表示させるときとかですかね。
そうなると、
<script>
twemoji.parse(document.body, {
folder: 'svg',
ext: '.svg'
});
</script>
とでもしてやればよさそう。SVGのほうが拡大とかその辺を気にしなくて済みますし。
欠点はレガシーなブラウザだと表示されない可能性があることですけども。
普通はPNGのほうを使うようにしておいたほうがよさそうです。。。
大きさを調整する
絵文字をJavaScriptで画像ファイルに置き換えてしまうことで、環境を選ばずに絵文字対応することができました。
今まで次のように表示されていたものが…
絵文字対応化でこんな具合に。絵文字が可愛くなりました。
Windows8.1環境だからか、一応絵文字はデフォルトでも表示されてましたけどね…(´・ω・｀)
しかし、今度は文字の大きさと置換された絵文字のサイズが合っていません。
そこで、CSSを使って調整することにします。
今度はテンプレートメニューを開いた後の画面から「カスタマイズ」を選びます。
編集画面が開いたら、上級者向け＞CSSを追加とクリックして、CSSの編集ボックスを表示させます。
編集ボックスには、次のCSSコードを追加します。
img.emoji {
height: 1em;
width: 1em;
margin: 0 -0.25em 0 -0.25em;
vertical-align: -0.45em;
}
※記事の最後のほうにこのコードの修正版が載っていますので併せてお読みくださいこんな具合です。
参考にしたサイトでは"margin"は"0 0.05em 0 0.1em"、"vertical-align"は"-0.1em"を指定していたのですが、Bloggerだといい感じにならなかったので先のように調整をしました。
この辺は環境やブログサービスによる部分が大きいので、適宜調整してください。
追加したら、左上の「ブログに適用」ボタンを押しましょう。
押さないと変更が保存されません。
さて。CSSも適用したら、こんな具合です。
ちゃんと行に合わせて表示されるようになりましたね。
しかし、PNGがちゃんと透過されていない。というよりは、画像に下地がついているっぽい…？
インスペクタ使ったら、案の定背景と枠線が指定されていることが判明。また、BoxShadowもついています。なので、インスペクタから背景と枠線を取り消してみても、絵文字の周りになんか影がついてますね。
これは間違いなくテンプレート設定が原因だ…
backgroundとborder、そしてbox-shadowを取り消せばいいので、先ほどのCSSコードに
background: none; border: none; box-shadow: none;を追加します。
よって、「CSSを追加」に追加すべきCSSコードは次のようになります。
img.emoji {
height: 1em;
width: 1em;
margin: 0 -0.25em 0 -0.25em;
vertical-align: -0.45em;
background: none;
border: none;
box-shadow: none;
}
これで、ちゃんと修正されました。
「上級者向け」＞「画像」から画像に対しての背景色や枠線の色を透明に指定するという手もあるのですが、そうなると絵文字だけでなく他の画像にも設定が適用されるので、既存のレイアウトや過去の投稿に影響が出ることになります。
従って、imgタグのemojiクラスのみに背景色を透明にし枠線をなしにする設定を適用する方が無難でしょう。
それでは、最後にサンプルでも。
やんやんっ😖🐤遅れそうです😫🌀 たいへんっ⚡駅🚉までだっしゅ！🏃💨 初めて💕のデート💑ごめん🙇で登場？💦 やんやんっ🐦😥そんなのだめよ🙅 たいへんっ😰電車🚃よいそげ！🙏♥ 不安な気持ち😞がすっぱい⚡😖😖 ぶる〜べりぃ💜とれいん💖🐣💚
素晴らしい記事、共有するためのありがとう！
返信削除そうなると絵文字だけでなく他の画像にも設定が適
返信削除この記事では、共有のためのおかげで、私は本当に好き素敵で面白いです！
返信削除素晴らしい記事、共有するためのありがとう！
返信削除この記事では、共有のためのおかげで、私は本当に好き素敵で面白いです！
返信削除