ニュースパス
ニュースパス
JavaScriptが誕生して2017年で22年を迎えます。
JavaScriptはそれ自体でも非常に便利ではありますが、JavaScriptを使って組み立てられた便利なプラグインが豊富にリリースされています。
2017年現在でも、日々新しいプラグインがリリースされ続けています。
そこで今回は、最近リリースされたプラグインの中でも、次のプロジェクトに取り入れたい、ユニークですぐに使えるJavaScriptライブラリをご紹介させていただきます。
少しのコードを挿入するだけで使うことのできるシンプルなものから、カスタマイズ性が高く汎用的なライブラリまで、幅広い顔ぶれが揃っています。
使えそうなライブラリがあれば、ぜひブックマークして保存をしておきましょう。
スクリーンショット：2017年10月
humane.jsはシンプルで他のフレームワークに依存しない、軽量な通知(ノーティフィケーション)用のプラグインです。
インタラクションにはCSSトランジションを使用していますが、もし(モバイル環境などで)ブラウザの状況によって使えない場合でも、JavaScriptのアニメーションで代用します。
通知の表示テーマは6種類用意されており、オプションを指定することで通知の大きさやタイミングなども細かく指定することができます。
スクリーンショット：2017年10月
AniXは軽量で簡単に使うことができる、ハイパフォーマンスなアニメーションプラグインです。
たった10KBという軽量さながら、さまざまなモダンブラウザにも対応しています。
AniXは、CSSトランジションの属性を使えるので、操作がしやすいのが特徴です。
onCompleteイベントにも対応しているので、複数のシナリオを作ってアニメーションを動かすことも可能です。
スクリーンショット：2017年10月
Mousetrapはホームページ上にキーボードショートカットを設定できるJavaScriptライブラリです。
複数のキーによるコンビネーションのほか、シングルキーによる反応、あるいはGmailスタイルで順番に押すコマンド、コナミの隠れコマンド(上・上・下・下・右・左・右・左・B・A・エンターキー)まで設定することができます。
使えるキーは、アルファベットに加え、シフト(shift)・コントロール(ctrl)・オルト(alt)・メタ(meta)や、バックスペース(backspace)やタブ(tab)キーなども使うことができます。
例えば、「Ctrl＋S」キーで内容を保存したい場合には、以下のように設定すればいいのです。
Mousetrap.bind('ctrl+s', function(e) {
_saveDraft();
});
軽量版はわずか4.5KBなので、ホームページに取り入れてみてはいかがでしょうか。
スクリーンショット：2017年10月
AmplitudeはJavaScriptとHTML5によるモダンでクリーンなオーディオプレイヤープラグインです。
まるでスマートフォンで再生しているかのような、アートワーク画像と再生ボタンのUIが特徴的です。
もちろん複数の曲をアルバムのようにして連続再生させたり、再生したい曲までスキップさせたりすることができます。
プレイリストを複数再生することもできます。
さらに、何と言ってもうれしいのが、タッチディスプレイ対応なので、スマートフォンでも表示可能です。
さらに、ライブストリーミングにも対応しているので、インターネットラジオをホームページ経由で開設することもできます。
スクリーンショット：2017年10月
t-scrollはスクロールエフェクトを簡単に実装することができます。
GulpとSass、BabelやES6を使っており、jQueryには依存していません。
45のオプションが用意されているので、幅広くアニメーションを設定することができます。
Npmにも対応しているので、インストールも簡単です。
最新のブラウザのほとんどに対応しています。
スクリーンショット：2017年10月
DOMtasticはDOM操作やイベント操作をシンプルで直感的に行うことができるJavaScriptライブラリです。
たった12KBと軽量で、ES6・Rollup・Babelを同梱しており、特別なライブラリをダウンロードする必要もありません。
APIが用意されており、jQueryの記法で記述することができます。
JavaScriptでCSSや他のライブラリを操作したい時などに重宝しそうです。
スクリーンショット：2017年10月
Britechartsは、クライアントサイドでシンプルなチャートを描画することのできるJavaScriptライブラリです。
描画にはD3.jsのバージョン4を利用しているので、利用方法次第では驚くほど美しいデータビジュアライゼーションを描画することもできるでしょう。
APIも用意されているので、グラフの数値はリアルタイムで変更することもできます。
また、オンマウスイベントで数値をチールチップで表示することもできるなど、かゆいところに手の届くおすすめのプラグインです。
スクリーンショット：2017年10月
Zuck.jsはInstagramのストーリーズやFacebookメッセンジャーのDay機能のように、フリックしながら動画を再生することのできるプラグインです。
本来はモバイルページ用に開発されたプラグインですが、パソコンのマウスを使って操作を行うこともできます。
スクリーンショット：2017年10月
Tippy.jsは13KBと超軽量のツールチップ表示用のJavaScriptライブラリです。
アニメーションやディレイ、矢印の表示・表示やトリガーによる表示など、シンプルながらも汎用性が高いのが特徴です。
jQueryに依存していませんが、代わりにPopper.jsを利用しています。
使い方は簡単で、HTMLのタグのtitleにツールチップ表示用のテキストを設定します。
<button class="btn" title="I'm a tooltip!">Text</button>
そして以下のようにJavaScript側で設定するだけです。
tippy('.btn')
もちろん、オプションを加えることでカスタマイズすることも可能です。
スクリーンショット：2017年10月
Blurifyは、2KBの非常に軽量なJavaScriptプラグインです。
さまざまな画像に「ぼかし」を加えることができます。
用途が限られている分、設定はシンプルで、JavaScriptに数行加えるだけでぼかし効果を得られます。
Photoshopいらずなのでデザイナーにとっても重宝されるのではないでしょうか。
スクリーンショット：2017年10月
CamanJSは画像にさまざまな編集効果を加えることができるJavaScriptライブラリです。
Blurifyと同じく、Photoshopいらずで画像の見た目を変えることができます。
CamanJSが得意なのは、画像の明度・コントラスト・セピア比・彩度などのパラメーターです。
他の画像プラグインと組み合わせることも可能で、Npmによるインストールも可能です。
自分でゼロから機能を実装するよりも、JavaScriptのライブラリを利用することで、圧倒的に早く期待している機能を実装することができます。
昔と違って、こうしたプラグインのほとんどが1MB未満と非常に軽量なので、ページスピードを左右することもほとんどありません。
また、プラグインの使い方は非常に簡単なので、JavaScriptの初歩を勉強するだけで利用することができます。
今まで使ったことがない人も、気に入ったプラグインやライブラリがあれば利用してみてはいかがでしょうか。
