初めまして、エンジニアの本舘です?
シムネットはペット関連のWebコンテンツを開発・運営していますが、僕自身はペットを飼育していないので…代わりに、我が家の庭を彩る花を紹介します。
ヒマラヤユキノシタくんです。可憐な花の姿とは裏腹に、我が家でもトップレベルの趨勢を誇る強靭な植物です。
これでも去年の暮れに随分と葉っぱを落としてサッパリさせたんですが…恐るべき勢いで領土の拡大を行っています。左奥に見えるフクジュソウが侵略されてしまうのではないかと、冷や冷やしている昨今です。
…まぁ、時節の挨拶はこれまでにして。
mo.jsってなんぞや？
本題に入りましょう。
今回、僕が紹介する「mo.js」とは、JavaScriptプラグインの一種です。JavaScriptだけで華やかなモーションをヌルヌル動かせるステキなプラグインで、その有様は一昔前に一世を風靡したFlashを思わせます。
「mo」は「motion（モーション）」の略なので「も」って呼んでるんですが、海外のエンジニア（特にネイティブスピーカーの方々）はなんて呼んでるんですかね？ 気になるところですが、幸いにもこの記事は文字媒体なので、読み方とか気にしなくて良いのです！
「mo.js」の公式サイトのデモ集を眺めますと…「え…これ動画じゃないのかΣ(ﾟДﾟ)」ってレベルの動作が出てきます。特に「Sleepy Mole」のデモ（※ロードにすっごい時間がかかります）なんて、「これ、アニメーションGIFじゃないのー❓」と思わず疑ってしまうレベルです。
そんな「mo.js」、華やかなのはよく分かったのですが…業務で利用するとなると、「どこで使うんだろ？」ってシロモノが目立ちます。
Sleepy Moleのデモは確かにすごいんですが、業務のどんな場面で利用可能か？ と訊かれてしまうと、回答に詰まってしまうのが正直なところです。技術ダイスキーな方々には垂涎のネタに違いないんでしょうけれどね?
そんなキワモノ揃いの「mo.js」の中にあって、業務範囲内で使える実用的なデモが１つあります。それが下記で紹介する「Animocon」です。
Animoconってどんなもん？
「Animocon」は、「Animation＋Icon」からできた造語のようです。その名の通り、アイコンに動作を付けるものです。
※このデモ、Google Chromeではなぜか動きません…。FireFoxなどのブラウザでお楽しみください。
一見すると、単なるグッドサインのアイコン。しかしクリックしてみると…。
ピカーン！
おおっ、彩り豊かな花火が咲くじゃありませんかΣ(ﾟДﾟ)
このデモを見て、こんな欲求を満たすエンジニアは多いと思います。
「ボタンを押した時のエフェクトとして使えないかな…？ ユーザーのテンション上がりそうだし…」
特に当社が開発した「ミテミテ」のようなコミュニティサイトにおいては、リアクションボタンのクリック時のエフェクトにピッタリな気がします。
では、早速実装してみよう！ ということになるワケですが…。
公式のデモからAnimoconのサンプルをダウンロードできるのですが…
この実装が難解極まりない！?
ここで「大変ですねー、頑張ってくださいー」では、この記事は初回にして最終回になってしまうのですが。
ご安心ください、次回から少しずつ、Animoconの実装について解説していきます！
それでは、後日お会いしましょう?