どうも、まさとらん（@0310lan）です。
みなさんは、JavaScriptライブラリを活用されているでしょうか？
Web開発を効率化してくれたり、便利な機能を手軽に組み込んだりできるわけですが、今回はちょっと趣向を変えて「Webの楽しさ」を味わうことができるインタラクティブなライブラリを厳選してみました。
開発者もユーザーも双方に楽しめると思いますので、ぜひ参考にしてみてください！
目次
- ■音楽に合わせて「HTML要素」がダンスするライブラリ！
- ■Canvas図形を超ラフな「スケッチ画」にするライブラリ！
- ■「立体視」による3D画像を生成できるライブラリ！
- ■PC・スマホに「パターンロック認証」を導入できるライブラリ！
- ■テキストを「タイプライター風」に表示するライブラリ！
- ■ブラウザ上でスマホの「タッチ操作」を実現するライブラリ！
- ■人工知能を使わないで「顔認識」を実現するライブラリ！
- ■【おまけ】動くアスキーアートをHTMLに埋め込む異色のライブラリ！
- ■まとめ
- ■JavaScript・HTML/CSS講座も好評公開中「paizaラーニング」
■音楽に合わせて「HTML要素」がダンスするライブラリ！
【 Rythm.js 】
音楽を再生し、そのリズムに合わせて指定したHTML要素がアニメーションしてダンスするというかなり異色のライブラリが「Rythm.js」です。
音楽系のWebアプリやサービスに組み込むと、良いアクセントになって面白いと思います。
公式サイトでは、音楽に合わせてこんな感じにダンスしてます！
基本的な使い方として、まずはダンスさせたいHTML要素を「指定のクラス名」で囲みます。
今回は、サンプルとして「スピーカー」の画像をダンスさせてみましょう！
<body> <!-- 標準スタイルの「rythm-bass」を設定 --> <div class="rythm-bass"> <!-- スピーカーの画像を設置 --> <img src="speaker.png" /> </div> </body>
あとは、3行のJavaScriptコードだけで準備完了です！
var rythm = new Rythm(); // 再生したい音楽ファイルを選択 rythm.setMusic( 'sample.mp3' ); // rythm.jsを起動して音楽再生 rythm.start();
たったこれだけで、ごく普通の「静止画像」が音楽に合わせて踊り出します！
また、音楽の波形に合わせて「rythm-bass」「rythm-medium」「rythm-high」の3つのクラス名が用意されており、それぞれ違った動きになります。
他にも、「Jump」「Shake」「Twist」「Color」…など、ユニークな動きでアニメーションするクラスも用意されており、自分でカスタマイズすることも可能です！
＜参考＞
■Canvas図形を超ラフな「スケッチ画」にするライブラリ！
【 Rough.js 】
Canvasを使うと、さまざまな図形をJavaScriptで描くことができますが、このライブラリを利用すると「手描き」でスケッチしたようなユニークな図形を描くことが出来るようになります！
実際の使用例はこんな感じ！
基本的な使い方は次の通りです。
まず、HTMLにCanvas要素を配置します。
<body> <canvas id="canvas"></canvas> </body>
そして、JavaScriptからCanvasを使った「描画処理」とほとんど同じコードを書くだけで実現してしまいます！
// Canvas要素を取得 var canvas = document.getElementById( 'canvas' ); // Canvasの要素とサイズを指定して初期化 var rough = new RoughCanvas( canvas, 600, 400 ); // 塗りつぶしのカラー設定 rough.fill = "#f33"; // 線のカラー設定 rough.stroke = "#33f"; // 四角形を描画 rough.rectangle( 150, 50, 200, 200 );
このように書くだけで、手描きっぽくなっているのが分かります。
さらに、詳細なオプションを設定することで、もっとリアルな「手描き」を再現することが可能です！
rough.fillWeight = 5; // 塗りつぶし線の太さ rough.hachureGap = 12; // 塗りつぶし線の細かさ rough.hachureAngle = 60; // 塗りつぶし線の角度 rough.strokeWidth = 3; // 枠線の幅 rough.bowing = 5; // 枠線の湾曲する大きさ rough.roughness = 5; // どのくらいラフにスケッチするか
オプションを設定するとこんな感じになります！
円や四角形、楕円・円弧・曲線…などが扱えるだけでなく、SVGのパスによる描画もサポートしているのが特徴です。
＜参考＞
■「立体視」による3D画像を生成できるライブラリ！
【 MagicEye.js 】
画像をじっと見つめながら、「立体視」によって3Dオブジェクトが浮かび上がってくる画像をJavaScriptで生成できるのが「MagicEye.js」です！
これは、過去に「マジカル・アイ」という名称でも人気でしたね。
実際に「MagicEye.js」の公式サイトで、サンプルデモが公開されているので試してみると面白いですよ！
（入力した文字が3Dで表示されるようになっています）
使い方は非常に簡単で、まずはHTMLに「src属性」を省略した「imgタグ」を配置します。
<body> <img id="magiceye" width="600" height="400" /> </body>
このように、任意の「ID名」と「画像サイズ」を設定するだけでOK！
あとは、JavaScriptで「imgタグ」のID名を指定し、3Dで表示させたい文字を設定するだけで完了です！
MagicEye.render({ // 「imgタグ」のID名を設定 el: 'magiceye', // 3D表示させたい文字列を設定。この場合は「Hello!」が立体視で見れる depthMapper: new MagicEye.TextDepthMapper('Hello!') });
すると、こんな感じの画像が生成されます！
よーく見ていると、「Hello!」という文字が3Dで浮かび上がってくるのが分かります。
ちなみに「文字」だけでなく、自分が用意した「画像」を3Dにしたり、キャンバスに描いた「絵」を3Dにすることも可能ですよ！
＜参考＞
■PC・スマホに「パターンロック認証」を導入できるライブラリ！
【 patternLock.js 】
画面を指でなぞって認証を解除する「パターンロック」を、PCやスマホのブラウザ上で再現できるライブラリがこの「patternLock.js」です！
実際に使ってみた感じをGIFにするとこうなります！
Webアプリやサービスで「パスワード」や「キャプチャ認証」の代わりにするなど、活用次第ではユニークな開発が行えるでしょう。
最も単純な例として、基本的な使い方を以下に掲載しておきます！
まずは、HTML内に適当な「div要素」を配置しましょう。
<body> <!-- ID名に「pattern」をつけた「div要素」を配置 --> <div id="pattern"></div> </body>
そして、JavaScriptから「patternLock.js」の初期化と、認証時の条件分岐を書いておけばOKです！
<script>
// 「div要素」を指定して初期化する
var lock = new PatternLock( "#pattern" );
// ロックパターンが「123」の場合
lock.checkForPattern( '123', function(){
// ロック解除が成功した時の処理
},function(){
// ロック解除に失敗した時の処理
});
</script>
上記はサンプル例なので「ロックパターン」をそのまま記述していますが、実際に使う時はこの処理をサーバーサイドで行うようにしておきましょう！
「ロックパターン」の数値は、次のような組み合わせになっています。
指でなぞっていく順番を、この数字で表すことができるというわけです。
「patternLock.js」はカスタマイズ性にも優れており、指でなぞっている間はパターンを非表示にしたり、ドットの数を増やしたり、デザインの変更をしたり…など、自分好みにレイアウトできるのも大きな魅力です！
＜参考＞
■テキストを「タイプライター風」に表示するライブラリ！
【 iTyped.js 】
HTML内で指定した文字列を、タイプライターのように1文字ずつ消したり表示したりするアニメーションを手軽に作れるのが「iTyped.js」です！
実際の使用例は次のとおり！
基本的な使い方として、まずは文字を表示させたい箇所に任意のID名を付けた「HTMLタグ」を配置します。
<div> <span id="ityped"></span> </div>
そして、JavaScriptで先ほどのHTML要素を取得し、表示させたい文字列を設定します。
複数の文字列を表示したい場合は、配列でいくつでも追加できるようになっています。
ityped.init( `#ityped`, { // 表示させたい文字を配列で用意する strings: [ '文字列１', '文字列２', '文字列３' ], // アニメーションをループさせる loop: true });
上の例だと、まず最初に「文字列１」がタイプライター風のアニメーションで表示されて、次に「文字列２」「文字列３」という風に順番に表示されていきます。
最後の文字列が表示されるとアニメーションは停止しますが、「loop: true」に設定していれば再度「文字列１」からアニメーションがスタートするので便利です。
さらに、細かいオプションを設定することで、アニメーションを自在にカスタマイズすることも可能です。
（CSSを設定することでカーソルを点滅表示することも可能）
typeSpeed: 55, //文字の表示速度 backSpeed: 30, // 文字が削除される速度 startDelay: 500, // 文字が表示されるタイミング backDelay: 500, // 文字が削除されるタイミング loop: false, // アニメーションのループ処理 showCursor: true, // カーソルの表示・非表示 cursorChar: "|", // カーソルの形状
テキスト文字をアニメーション化することで、見た目にも楽しいWebサイトを作れるようになるでしょう！
＜参考＞
■ブラウザ上でスマホの「タッチ操作」を実現するライブラリ！
【 ZingTouch.js 】
PCやスマホのブラウザ上で、スマホ特有の「スワイプ」や「ピンチイン・アウト」などの操作を実現するライブラリが「ZingTouch.js」です！
タッチイベントなどを独自に実装しようとすると大変ですが、このライブラリでは非常に簡単なコードでタッチ操作によるUIを作れますよ！
次のサンプルデモは、「ZingTouch.js」を使って「ポケモンGO」風の動きを再現したものになります！
See the Pen Pokemon Go - ZingTouch x Anime.js by CodeSample (@webhacck) on CodePen.
基本となる簡単な使い方としては、まずHTML内にタッチ操作を行う場所（要素）を配置します。
<body> <div id="area"></div> </body>
次に、JavaScriptでそのHTML要素を取得して初期化し、「タップ」や「スワイプ」などによって条件分岐を書けばOKです！
var div = document.getElementById( 'area' ); var myRegion = new ZingTouch.Region( div ); myRegion.bind( div ) .tap(function( e ) { // タップしたら alert( 'tap' ); }) .swipe(function( e ) { // スワイプしたら alert( 'swipe' ); }) .pinch(function( e ) { // ピンチインしたら alert( 'pinch' ); });
他にも、「マルチタップ」「回転」「ジェスチャー」など、さまざまな操作にも対応しています！
さらに、それぞれの操作には細かい調整オプションも用意されており、タッチの反応などを好みにカスタマイズすることもできます。
＜参考＞
■人工知能を使わないで「顔認識」を実現するライブラリ！
【 facedetection.js 】
最近は「AI（人工知能）」を使った「顔認識」が人気ですが、このライブラリはあくまでもJavaScriptだけで写真に写っている「顔」を認識することができるのが特徴です。
そのため、ブラウザだけで完結できるうえ、実装もわずかなコードで利用できるので手軽に使えて便利です！
公式サイトでは、実際に写真の「顔認識」を試すことができるので、ぜひトライしてみてください！
使い方ですが、まず「顔認識」させたい写真を「imgタグ」で用意します。
<body> <img id="picture" src="sample.jpg"> </body>
この写真要素を「jQuery」を使って指定することで、関数内の引数「faces」に認識結果を取得することができます！
$( '#picture' ).faceDetection({ complete: function( faces ) { // 認識結果を処理する } });
認識結果はオブジェクト形式になっており、その中に検出した「顔」の「X / Y座標」と「width / height（幅・高さ）」が格納されています。
あとはCanvasなどを使って、これらのデータを元に枠線を描いたり、エフェクト効果などを付与すれば楽しいWebアプリが作れることでしょう。
ちなみに、「顔」が複数検出された場合は、配列ですべて格納されています。また、誤検出を防ぐために「confidence（信頼性）」という値が格納されているので、これを条件分岐するとさらにクオリティが上がるでしょう。
＜参考＞
■【おまけ】動くアスキーアートをHTMLに埋め込む異色のライブラリ！
【 Dom-Animator.js 】
最後に、ちょっとマニアックなライブラリをご紹介しようと思います。
このライブラリを使うと、アニメーションする「アスキーアート」を作成できるのですが、表示するのはブラウザの画面ではなく…、なんと、ブラウザのデベロッパーツールを開いて表示されるHTMLコードの中になります。
実際に、公式サイトのHTMLコードを見ると、確かにアニメーションされているのが分かりますね。
はっきり言って…エンジニアしか楽しめないライブラリなのですが、こんな実装がされているWebページを発見したらきっと驚くのではないでしょうか。
そんな遊び心が分かる人は、基本的な使い方だけでも覚えおておきましょう！
方法は非常に簡単で、アニメーション表示させたい「アスキーアート」を「addFrame()」にどんどん追加していくだけです！
var da = new DomAnimator(); // アニメーションさせたい「アスキーアート」を設定する。 // 複数登録すると順番に表示されていく。 da.addFrame('ヽ(^o^)丿'); da.addFrame('ヽ(｀▽´)/'); da.addFrame('＼(^o^)／'); // アニメーションを再生 da.animate();
さらに、配列データとして登録することも可能なので、活用次第で大きいサイズの「アスキーアート」作品も作れるようになります。
また、アニメーションを再生する「animate()」は、コマとコマの間隔を調整することが可能で、例えば「animate(2000)」と書けば2秒毎にアニメーションが切り替わるようになります。
＜参考＞
■まとめ
今回ご紹介したJavaScriptライブラリは、どれも非常に簡単な記述で楽しめるものばかりなうえ、ドキュメントなども充実しているので迷うことも少ないと思います。
Webに何かアクセントを加えたい…とか、これらのライブラリから何かヒントを得てユニークなアプリを開発するのも面白いと思います。
どれか気になったものがあれば、ぜひみなさんも一度トライしてみてください！
■JavaScript・HTML/CSS講座も好評公開中「paizaラーニング」
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
