この記事は NIFTY Advent Calendar 2017 の4日目の記事です。
3日目は @nyangu さんの Elasticsearch6.0のRolling upgradesを試してみる でした。
以下、箸休めの気分でお読みください。
##はじめに
###語彙力がない
Twitterで「とても良い、尊い」といった表現をするときに「天に召される絵文字」と「合掌している絵文字」と「きらきらした絵文字」とを連打しがちになる。
あまりにも表現がワンパターンなので、少し表現力をつけようと思ってブログを書いてみても、どうしても絵文字を連打したくなってしまう。感情の奔流を書き表す語彙力がない。
言葉による表現を豊かにできることが一番だとは思うが、今回は絵文字を連打しがちな私にもできる方法で表現の幅を増やしてみたいと思う。
##絵文字を導入する
###サイトにTwitterの絵文字を導入する
Twitter以外でも絵文字を連打したいので、まずブログなりサイトなりにツイッターで使う絵文字（Twemoji）を表示できるようにする。
Twemojiはオープンソース化されているため、誰でも使える。
https://blog.twitter.com/developer/en_us/a/2014/open-sourcing-twitter-emoji-for-everyone.html
指定されたjsを読み込むことで、「HTML Entityの文字」を「Twitterの絵文字と同じ画像」に置換してくれる。
headタグ内でjsを読み込む。
<head>
~
<script src="//twemoji.maxcdn.com/2/twemoji.min.js"></script>
~
</head>
閉じbodyの直上で、絵文字を入れたい要素を指定する。
全体に適用しても特に重くはないが、念のためIDで指定した。
</body>
~
~
<script>
twemoji.parse(document.getElementById('emoji'));
</script>
</body>
絵文字がデフォルトで72x72pxなので、imgのheightを1emにすることで（環境にもよるが）ちょうどよくなる。
img.emoji{
height:1em;
}
あとは使いたい絵文字のHTML Entityを連打するだけ。
<p>尊い😇🙏✨✨✨</p>
これで簡単に "ありがたい気持ち" が表現できるようになった。
使いたい絵文字のHTML Entityを探すのがちょっとめんどうなので、下記サイトからコピペするとラクかも。
https://lets-emoji.com/twemoji/
##エモい絵文字を実装する
これだけだとTwitterと変わらない表現力なので、エモさを足していく。
###絵文字の配置をエモくする
扱いやすいようにspanでくくってclass名をつけただけ。
<div id="emoji">
<p class="emo-emoji">尊い<span class="face">😇</span><span class="pray">🙏</span><span class="kirakira">✨</span><span class="kirakira">✨</span><span class="kirakira">✨</span></p>
</div>
手が顔の前に来るようにし、きらきらも大小をつけてみる。
「face」の次要素に「pray」が来たときだけ手が顔アイコンに重なるように、無駄に気を配っている。
.emo-emoji{
font-size:2.5em;
}
img.emoji{
height:1em;
}
.kirakira:nth-child(odd) img{
height:.8em;
}
.face + .pray img{
animation-name:tremble;
animation-duration:.3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
position:relative;
left:-.2em;
width:.6em;
height:.6em;
}
記号に一体感がでてきた……でてきたことにしよう。
###エモいアニメーションをつける
尊い気持ちを絵文字のアニメーションに込める。
.emo-emojiの子要素であるimgに対してアニメーションするように設定。
Twemojiの絵文字は画像なので、filterが使える。
拝んでいる手は移動(translate)と回転(rotate)により震わせてみた。
.emo-emoji{
font-size:2.5em;
}
img.emoji{
height:1em;
}
.kirakira img{
animation-name:twincle;
animation-duration:.5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
.kirakira:nth-child(odd) img{
animation-duration:1s;
height:.8em;
}
.face + .pray img{
animation-name:tremble;
animation-duration:.3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
position:relative;
left:-.2em;
width:.6em;
height:.6em;
}
@keyframes twincle{
0%{opacity:.7; filter: brightness(100%);}
100%{opacity:1; filter: brightness(200%);}
}
@keyframes tremble{
0%{transform:translate(1px,0) rotateX(0deg);}
25%{transform:translate(-1px,0) rotateX(1deg);}
50%{transform:translate(0,0) rotateX(-1deg);}
75%{transform:translate(-1px,0) rotateX(1deg);}
}
動かしたものがこちら
クソパワポ的なアニメーションである感じは否めないが、感情と表現が近づいた……気がする。
##最後に
絵文字を動かしながら
「これ、ガラケーのやつだ……デコメだ！！」
と、時代に逆行していることに気づいてしまい、CSS3に対して申し訳ない気持ちになった。
ほぼデコメなのでGIFで表現すれば良いのかもしれないが、
"顔のかたちをした「
」などの絵文字の次に来る「
」は顔より小さくして一体感を出す"
という組み合わせのルールを決められるなど、CSSだからこそできる表現もある。
ぶっちゃけ「エモい絵文字」と言いたいだけの記事だったが、全絵文字を動かしてみるのも面白いかもしれない。目にうるさそうだけど……。
明日は@yk-mさんの記事です。よろしくおねがいします！