【はじめてのmo.js】(1)「mo.js」ってなんぞや?

この記事は約3分で読めます。

初めまして、エンジニアの本舘です?

シムネットはペット関連のWebコンテンツを開発・運営していますが、僕自身はペットを飼育していないので…代わりに、我が家の庭を彩る花を紹介します。

ヒマラヤユキノシタくんです。可憐な花の姿とは裏腹に、我が家でもトップレベルの趨勢を誇る強靭な植物です。

これでも去年の暮れに随分と葉っぱを落としてサッパリさせたんですが…恐るべき勢いで領土の拡大を行っています。左奥に見えるフクジュソウが侵略されてしまうのではないかと、冷や冷やしている昨今です。

 

…まぁ、時節の挨拶はこれまでにして。

 

mo.jsってなんぞや?

本題に入りましょう。

今回、僕が紹介する「mo.js」とは、JavaScriptプラグインの一種です。JavaScriptだけで華やかなモーションをヌルヌル動かせるステキなプラグインで、その有様は一昔前に一世を風靡したFlashを思わせます。

 

「mo」は「motion(モーション)」の略なので「も」って呼んでるんですが、海外のエンジニア(特にネイティブスピーカーの方々)はなんて呼んでるんですかね? 気になるところですが、幸いにもこの記事は文字媒体なので、読み方とか気にしなくて良いのです!

「mo.js」の公式サイトのデモ集を眺めますと…「え…これ動画じゃないのかΣ(゚Д゚)」ってレベルの動作が出てきます。特に「Sleepy Mole」のデモ(※ロードにすっごい時間がかかります)なんて、「これ、アニメーションGIFじゃないのー❓」と思わず疑ってしまうレベルです。

 

そんな「mo.js」、華やかなのはよく分かったのですが…業務で利用するとなると、「どこで使うんだろ?」ってシロモノが目立ちます。

Sleepy Moleのデモは確かにすごいんですが、業務のどんな場面で利用可能か? と訊かれてしまうと、回答に詰まってしまうのが正直なところです。技術ダイスキーな方々には垂涎のネタに違いないんでしょうけれどね?

 

そんなキワモノ揃いの「mo.js」の中にあって、業務範囲内で使える実用的なデモが1つあります。それが下記で紹介する「Animocon」です。

 

Animoconってどんなもん?

Animocon」は、「Animation+Icon」からできた造語のようです。その名の通り、アイコンに動作を付けるものです。

※このデモ、Google Chromeではなぜか動きません…。FireFoxなどのブラウザでお楽しみください。

一見すると、単なるグッドサインのアイコン。しかしクリックしてみると…。

おおっ、彩り豊かな花火が咲くじゃありませんかΣ(゚Д゚)

 

このデモを見て、こんな欲求を満たすエンジニアは多いと思います。

「ボタンを押した時のエフェクトとして使えないかな…? ユーザーのテンション上がりそうだし…」

特に当社が開発したミテミテのようなコミュニティサイトにおいては、リアクションボタンのクリック時のエフェクトにピッタリな気がします。

 

では、早速実装してみよう! ということになるワケですが…。

公式のデモからAnimoconのサンプルをダウンロードできるのですが…

 

この実装が難解極まりない!?

 

ここで「大変ですねー、頑張ってくださいー」では、この記事は初回にして最終回になってしまうのですが。

ご安心ください、次回から少しずつ、Animoconの実装について解説していきます!

 

それでは、後日お会いしましょう?

シムネットで私たちと一緒に働きませんか?

多様なスキルや個性を持った社員それぞれが、自分の持ち味を活かし、切磋琢磨しながら、ユーザーファーストの良質なサービスを提供している会社、それがシムネットです。

お客さまに喜んでもらえる「ものづくり」を大切にし、「つくるよろこび」を味わうことができる環境。

そして、社員全員が“主役”として輝ける場所、これからもそんな企業であり続けます。

技術
この記事をシェアする
SIMLOG
タイトルとURLをコピーしました