読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開!

f:id:paiza:20160209110935j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、「JavaScriptライブラリ」を活用しているでしょうか?

Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。

そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います!

■多機能な「写真ギャラリー」を組み込めるライブラリ!

◆1.Viewer.js

f:id:paiza:20160209111231j:plain
複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。

類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。

基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指定します。

<!-- index.html -->


<div>
 <ul id="images">
   <li><img src="picture.jpg" alt="Picture"></li>
   <li><img src="picture-2.jpg" alt="Picture 2"></li>
   <li><img src="picture-3.jpg" alt="Picture 3"></li>
    <!-- ここに必要な分だけ追加する  -->
 </ul>
</div>

そして、JavaScriptファイルはこの1行を書くだけでOK!

// app.js


var viewer = new Viewer(document.getElementById('images') );

「ulタグ」に指定したID属性「images」を設定するだけの処理ですが、わずかこれだけでで、素敵な「画像ギャラリー」を表示することが実現できます!
f:id:paiza:20160209111429j:plain


下段にサムネイル付きで表示され、回転・反転機能や拡大・縮小、自動再生、ドラッグ移動などが可能になっています。

ちなみに、画像はリスト要素になっているので、Bootstrapなどでタイル上に並べると使いやすいでしょう。

また、先ほどのコードに「オプション」を追加することで、回転や拡大・縮小などの個別機能をON/OFFするようなカスタマイズも簡単なのが特徴です。

ポートフォリオや画像コンテンツを活用するサービスなどに相性が良いライブラリと言えるでしょう。

■世界中の天気情報を取得できるライブラリ!

◆2.simpleweather.js

f:id:paiza:20160209111626j:plain

世界の「天気データ」を簡単なコードで取得できるようにしてくれるライブラリです。

「温度・湿度」はもちろんのこと、「晴れ・曇り・雨」などの表示から「風速・風向き」や数日分の「フォーキャスト」…など、さまざまなデータを活用できるのが特徴となっています。

基本的な使い方として、最小限のデフォルトコードはこのようになります!

// app.js


$(document).ready(function() {
    $.simpleWeather({
        location: 'Tokyo, JP',
        unit: 'c',
        success: function(weather) {


            // 変数「weather」から、天気データを取得できる


        },
        error: function(error) {
            // エラー処理
        }
    });
});

まず、「location」で天気を取得したい地名を指定するか、「緯度・経度」の数値をそのまま入力してもOK。

あとは、変数「weather」に取得した天気データが入っているので、「weather.temp(温度)」「weather.wind.speed(風速)」のような指定をすれば、目的の情報をゲットすることが簡単にできます。

また、HTML5「navigator.geolocation.getCurrentPosition()」を利用して、GPSから得た位置情報を「location」に当てはめたり、「setInterval()」でループ処理を作って定期的に天気データを取得して自動更新させるのも容易でしょう。

■Webコードエディタを簡単に開発できるライブラリ!

◆3.ace.js

f:id:paiza:20160209111818j:plain

Sublime Text」や「TextMate」のようなコードエディタを、Web上に実現できるライブラリがコチラ!

コードエディタをゼロから作ろうとすれば途方も無い時間が掛かりますが、「ace.js」を活用することで簡単に45種のプログラミング言語に対応したエディタを、自分のWebサイトやアプリに組み込むことが可能になります。

使い方も簡単で、まずHTMLファイルに「editor」という名称の要素を用意します。

<!-- index.html →


<div id=”editor”></div>

そして、JavaScriptファイルから、その「editor」要素を指定すればOK!

//app.js


var editor = ace.edit(“editor”);

たったこれだけで、コードエディタが作れてしまいます!

以下に、サンプルデモを用意してみましたので、実際にコードを入力してみてください。

See the Pen ace.js basic sample by webhacck (@webhacck) on CodePen.

上記サンプルデモは、少しだけカスタマイズをしており、以下のように24種類のテーマから好きなモノを選んで「見た目」を変化させたり…、

editor.setTheme("ace/theme/monokai");

プログラミング言語を指定することで、シンタックスハイライトを自動的に有効化することも簡単にできます。

editor.getSession().setMode("ace/mode/javascript");

他にも、テキストのスタイルやイベントの取得など、細かい調整を自由にカスタマイズできるようになっており、自分で「Cloud9」や「monaca」のようなWebサービスの開発を検討されている方には最適だと思います。

■プログラムの中身をグラフィカルに変更できるライブラリ!

◆4.dat.gui.js

f:id:paiza:20160209112219j:plain
扱いやすいGUIパラメータ」をいじるだけで、誰でも手軽にプログラムをカスタマイズして変更結果を表示できるライブラリとなっています。

カラーボックスやスライダー、選択リストやチェックボックスなどのGUIパーツ」を自由に配置して、目的の値をリアルタイムに変更できるのが特徴です。

例えば、テキストの「スタイル要素」を変更するGUIパーツ」を作るとして、まずは以下のようにパラメータを準備します。

// app.js


var sampleText = function() {
  this.color = "#ff0000";
  this.fontSize = 24;
  this.border = false;
  //必要なだけ要素を追加する
};

この「sampleText」で設定したパラメータが、GUIパーツ」の初期値となります。

あとは、「dat.gui()」から「sampleText」のパラメータを参照し、「onChange()」内で変更したパラメータを反映させればOK!

// app.js


text = new sampleText();
var gui = new dat.GUI();


//カラーボックスの配置
gui.addColor(text, 'color').onChange(ここに変更処理);


//スライダーの配置(6〜48まで)
gui.add(text, 'fontSize', 6, 48).onChange(ここに変更処理);


//チェックボックスの配置
gui.add(text, 'border').onChange(ここに変更処理);

このように、シンプルな実装でGUIパーツ」を配置でき、グラフィカルにカラーを選択できたり、可変式のスライダーを搭載できるのは非常に便利です。

以下に、サンプルデモを用意したので一度チェックしてみてください!

See the Pen dat.gui.js basic sample by webhacck (@webhacck) on CodePen.


上記サンプルのように、「onChange()」内には別で作った関数を参照するようにすれば、さらに効率が良くなるでしょう。

また、設定したGUIパラメータの「保存」や「読み込み」にも対応していたり、自動ループ処理を書けばアニメーションしながらパラメータを動かすことも可能になっています。

自作のJSライブラリやWeb作品などを、会社やチームで実験的にカスタマイズしたり、学校や勉強会などでも利用できるなど、その活用範囲は非常に広いと言えるでしょう。

■難しいCanvas描画処理を驚くほど簡単にするライブラリ!

◆5.p5.js

f:id:paiza:20160209112453j:plain

シンプルな記述で優れた描画処理が可能な「processing」を、JavaScriptに移植してcanvas要素を利用したグラフィック処理を簡単に実現できるの「p5.js」です。

通常、canvasを使った描画は記述が複雑になりがちですが、「p5.js」を使えば以下のシンプルな記述だけですぐにcanvas要素」を利用できる状態にすることが可能です。

//app.js


function setup() {
    createCanvas(380, 240);
}

これだけで、380px×240pxのcanvas要素が準備され、描画処理をできる状態にしてくれます。

また、クリックやタッチ操作による「入力」を受け取る処理も、専用の関数を用意するだけでOK!

//app.js


function touchMoved() {


}

この関数内に書いた処理は、クリックやタッチ操作に反応して実行されるようになります。

例えば、直線を描画できる「line()」を1行追記するだけで、なんと「お絵かきアプリ」が完成してしまいます!


実際に、以下のサンプルデモで「お絵かき」をしてみてください!(スマホの方はコチラから試して下さい)

See the Pen p5.js drawing sample by webhacck (@webhacck) on CodePen.

上記のサンプルでは、「touchX」「touchY」という変数を利用することで、座標を取得していますが、このような便利な命令が豊富に揃っているのも特徴的です。

さらに、jQueryプラグインのようなライブラリも存在しており、これらと組み合わせるだけで、Webゲーム開発、Webアプリ開発、IoT開発、音楽アプリ開発…などが、とても簡単に実現できるのも魅力の1つと言えるでしょう。

■独自の「チュートリアル」を簡単に組み込めるライブラリ!

◆6.intro.js

f:id:paiza:20160209112920j:plain
インタラクティブな「チュートリアルを、自分のWebページへ簡単に組み込めるライブラリがこちら!

HTMLタグ内に、専用の「data要素」を追記すればOKなので、JavaScript初心者でも使いやすい設計になっているのが特徴です。

例えば、チュートリアルを実行して、最初に「h1タグ」をクローズアップさせたい場合は、以下のように「data要素」を記述します。

<!-- index.html -->


<h1 data-step=”1” data-intro=”チュートリアルの開始です!”>サンプルテキスト</h1>

「data-step」チュートリアルの順序を決め、「data-intro」に表示する文字列を記載します。

あとは、わずか1行のJavaScriptコードを実行するだけで完成です!

// app.js


introJs().start();

実際に、以下のサンプルデモにある「開始ボタン」をクリックして、チュートリアルを確認してみてください!

See the Pen intro.js basic sample by webhacck (@webhacck) on CodePen.

豊富なオプションやメソッドも用意されており、チュートリアルの挙動を変更したり、UIの見た目をカスタマイズするようなことも簡単にできます。

独自のWebアプリやサービスなどを公開する時に、この「intro.js」を組み込めば初期ユーザーにも分かりやすくなるので重宝するかと思います。

■Webページを簡単に多彩なタッチ操作対応にできるライブラリ!

◆7.hammer.js

f:id:paiza:20160209113138j:plain
こちらは、任意のHTML要素に、スマホのタッチ操作を簡単に実現できるライブラリです。

「タップ」「フリック」「ピンチイン・ピンチアウト」…など、スマホならではの操作感をブラウザやデバイスの違いを気にせずに実装できるのが特徴と言えるでしょう。

基本的な使い方として、例えば「divタグ」にID属性「stage」を設定しているとします。

<!-- index.html →


<div id=”stage”></div>

あとは、JavaScript側からこの「stage要素」を取得し、hammer.jsに紐付ければOKです!

//app.js


var stage = document.getElementById(“stage”);
var mc = new Hammer(stage);


mc.on("panleft panright panup pandown tap press", function(ev) {


        // 変数「ev」からタッチ入力の情報を取得可能


}

イベント処理の「mc.on()」から、変数「ev」を使って「フリック」や「タップ」などのタッチ情報を取得することができるわけです。

以下のサンプルデモで、実際に「フリック」「タップ」「ロングタップ」をスマホから試してみてください!(マウスによるクリックやドラッグも可能です)

See the Pen hammer.js basic sample by webhacck (@webhacck) on CodePen.

上記サンプルのように、「direction」を設定することで、スマホのブラウザ固有のスクロールなどの動きを制御可能なので便利です。

PC・スマホ両対応のWebサイトやアプリなどを開発する予定のある方は、ぜひ一度チェックしておくことをオススメしておきます。

■高度な画像認識を駆使して自動トリミングするライブラリ!

◆8.smartcrop.js

f:id:paiza:20160209113432j:plain
こちらは、少しクセのあるライブラリですが、使いこなすとかなり強力なツールになる可能性を秘めています。

と言うのも、画像の中に映っているモノを自動で認識し、被写体が最適な位置になるように指定のサイズへ自動トリミングしてくれるスグレモノなんです!

使い方としては、対象の画像を読み込んで「トリミングサイズ」を指定し、「smartcrop.js」と紐付ければOKです。

注意点として、トリミングした画像はcanvas要素」に出力するという点です!

//app.js


var canvas = document.getElementById('stage');
var ctx = canvas.getContext('2d');
var img = new Image();


//対象の画像を読み込む
img.src = "sample.jpg";
//トリミングしたいサイズを指定
var options = {width: 150, height: 250};


//画像を読み込んでから処理を実行
img.onload = function() {
    SmartCrop.crop(img, options, function(result) {


         //変数「result」に自動トリミングの結果が入っている


    });
};

最後の「result」変数にある「topCrop」オブジェクトに、自動抽出されたトリミングの座標情報が入っているので、これを「drawImage」で書き出せば最適化された画像が表示できるようになっています。

//app.js


SmartCrop.crop(img, options, function(result) {


      // 自動抽出されたトリミング情報を取得
       var crop = result.topCrop;
      canvas.width = options.width;
      canvas.height = options.height;
     
      //取得した座標を使って、画像を書き出し
       ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height);
});

f:id:paiza:20160209113542j:plain

ある程度、対象物がはっきり映っているのが好ましいのですが、ほとんどの画像において最適なトリミングが行えることは公式サイトを見てもよく分かります。
(その他、サンプルデモはコチラから確認できます)

自分のブログや、ネットショップなど、たくさんの画像をトリミングする必要のあるケースでは重宝するライブラリと言えるでしょう。

■高度なアニメーション効果を簡単に組み込めるライブラリ!

◆9.mo.js

f:id:paiza:20160209113632j:plain
Webページに、リッチなアニメーション効果を追加したい時に便利なライブラリがコチラ!

ボタンやアイコンなどに、ちょっとしたアクセントで動きをつけたり、本格的なアニメーションを構築することも可能なところが魅力となっています。

そこで、まずは公式のサンプルデモを確認してみてください!

See the Pen mo.js basic sample by webhacck (@webhacck) on CodePen.

これが動画ではなく、プログラムによる制御で行われているのはちょっと驚きますね。

「mo.js」の基本的なデフォルトテンプレートはこのようになります。

//app.js


//HTMLの「square」要素を取得
var square = document.getElementById('square');


//mo.jsのメイン処理
new mojs.Tween({
  repeat:   10,     //アニメーションの繰り返し回数
  delay:    2000, //1パターンのアニメーション間隔


 //ループ処理
  onUpdate: function (progress) {


            //変数「progress」を使って、アニメーションを構築する


  }
}).run();

実際のアニメーション処理は、「onUpdate」内に書いていくのですが、特徴的なのは変数「progress」を使ったフレーム処理が可能なところ。

パラパラ漫画で言う「ページ数」のようなデータが事前に入っており、これと動きをつける「イージング処理」を組み合わせることで、滑らかなアニメーションを簡単に実現できます。

//app.js


  onUpdate: function (progress) {
      // バウンス用のアニメーションを追加
       var bounceProgress = mojs.easing.bounce.out(progress);
      
       // Y軸方向に、バウンスするようにアニメーションさせる
       square.style.transform = 'translateY(' + 250*bounceProgress + 'px)';
  }

複数のアニメーションを同時に組み合わせることも可能なので、かなり細かく挙動を制御できるようになります。

Webページに「動きが足りない!」と感じている方は、ぜひトライしてみてください!

■クリックした位置にエフェクト効果を付与するライブラリ!

◆10.touchpoint.js

f:id:paiza:20160209113819j:plain

クリックやタッチをした位置が分かるように、波紋のようなエフェクトを追加することができるライブラリです!

特に、最近は動画などを使ってWebアプリやサービスなどを宣伝する機会も増えているので、このライブラリを活用することでプレゼンなどに有効活用することが出来るようになるでしょう。

「touchpoint.js」は、使い方が非常にシンプルなのも特徴となっており、画面全体に対してエフェクトを付けるのであれば、コードはこれだけで完成です!

//app.js


TouchPoint.init(window);

ブラウザの「window」オブジェクトに対して、touchpoint.jsを有効化しているわけです。

PCブラウザで閲覧している方は、以下のサンプルデモを実際にクリックしてみてください。(スマホの方は、コチラから試してみてください)

See the Pen touchpoint.js basic sample by webhacck (@webhacck) on CodePen.

オプション設定も豊富に用意されており、波紋エフェクトの「カラー」を変更したり、任意の「HTML要素内」に限定してエフェクトを追加したりなども実現できます。

オンラインでのサービス紹介や、動画PR、プレゼン、チュートリアルへの組み込み…など、活用次第でさまざまなケースに対応できる便利なライブラリとなっています。

■もっと便利なJavaScriptライブラリを探す!

JavaScripting.com

f:id:paiza:20160209114005j:plain
最後に「おまけ」として、今回ご紹介した便利なJavaScriptライブラリを、他にも多数公開しているキュレーションサービスをご紹介しておきます!

さまざまな検索が可能になっているのが特徴で、現在の人気ライブラリから最新のモノまで、15種類以上のジャンルから横断検索することが出来ます。

開発系、フォーム・UI系、画像・動画、タイポグラフィ、ゲーム、アニメーション…など、JavaScriptに興味ある方であれば毎日チェックしておきたいサービスとなっているので、ご興味ある方はぜひ参考にしてみてください!

■paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろんJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介したようなJavaScriptライブラリを活用できるようになれば、今まで諦めていたようなプロダクトも可能性が見えてくると思います。

海外では、このようなライブラリをいくつも組み合わせて、短期間で目的のプロトタイプを作り上げて素早く成果物を世界中に公開するような動きも一般的になっています。

作りたいモノを実現するためにライブラリを探したり、逆にライブラリを閲覧しながら新しいヒントを得るような使い方も有効ではないでしょうか。

ぜひ、みなさんもオリジナルのWebアプリやサービスを世界に向けて公開してみましょう!




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
paiza.jp
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編