シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > プログラミング > 思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
注目記事ピックアップ
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/10/31 18:50

思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!

best-javascript-library-01 どうも、まさとらん(@0310lan)です!

今回は、JavaScriptを活用して、何かユニークなWebアプリやサイトを作りたい!と考えている人に最適です!

最近は、開発に便利なJavaScriptライブラリが多く公開されていますが、その中でも特にワクワクしながらWeb開発できそうなモノを厳選してみたので、ご興味ある方はぜひ参考にしてみてください!


ブラウザ上のVR空間で「お絵かき」してみる!

【 A-Painter 】

best-javascript-library-02 ブラウザ上で「VR(バーチャルリアリティ)」を実現するフレームワークとして、Mozillaが公開している「A-Frame」が有名ですが、これに「お絵かき」機能を追加する拡張版のような位置づけにあるのが「A-Painter」です。


VR空間で「お絵かき」とは、つまり以下のGIF画像のような感じです!
best-javascript-library-03
メッチャ楽しそうです!


実は、Googleが以前に「Tilt Brush」と言うVR空間でお絵かきができるアプリケーションを公開していましたが、まさにコレのブラウザ版というイメージが近いと思います。

誰でも簡単なJavaScriptコードを追加するだけで利用できますが、やはり「HTC Vive」のようなモーションコントローラ付きのHMDが欲しいところです…。


<参考>
「A-Painter」GitHubサイト

お絵かきの参考サンプル事例


「OCR」機能を手軽にWebへ組み込む!

【 Tesseract.js 】

best-javascript-library-04 余計なプラグインやツールを一切使うことなく、「tesseract.js」ファイルを一発読み込むだけで、画像内にある文字をスキャンしてテキストに変換できるようになります。


しかも、日本語を含めた62言語に対応しており、わずか数行のJavaScriptコードで完結するため、もはやコレだけで優秀なWebアプリが作れそうです。
best-javascript-library-05 ただし、日本語はやはり難しいのか変換精度はそこそこです…。

「英語」のテキストであれば、ほとんど間違うことのない精度で変換されるので、活用するのであれば英語圏のサービスが良いかもしれません。


<参考>
「Tesseract.js」GitHubサイト


「顔認識」機能を手軽にWebへ組み込む!

【 jQuery Face Detection 】

best-javascript-library-06 「文字認識」が出来るなら「顔認識」もできる!…ということで、ピュアなJavaScriptだけで画像内に写っている人物の「顔」を検出できるのが「jQuery Face Detection」です!


jQueryプラグインとして提供されており、HTML内の「imgタグ」で設定した画像ファイルを指定するだけで、検出した「顔」の座標位置やサイズなどのデータを取得できます。
best-javascript-library-07 画像内の人物は、複数人いても同じように検出可能で配列データとして取得できます。

ただし、「顔」がはっきりしなかったり、「背景」がゴチャゴチャしてると検出されない場合もあります。


ちなみに、静止画像の「顔」ではなく、Webカメラなどでリアルタイムに「顔」を検出してトラッキングできる「clmtrackr.js」というのもあるので、ご興味ある方は参考にしてみてください!


<参考>
「jQuery Face Detection」GitHubサイト


クレジットカード不要の課金決済をWebに組み込む!

【 Paidy 】

best-javascript-library-08 Webアプリやサービスのマネタイズ手段として、有料プランなどを作ることがあると思いますが、そんな時に「クレジットカード」を使わずに「コンビニ決済」や「銀行振込」を利用できるのが「Paidy」です。(ECサイトにも利用可)


「Paidy」での決済方法は簡単で、「メルアド」と「電話番号」だけでOKです!(面倒な会員登録なども一切不要…)
best-javascript-library-09

携帯電話のSMSに送信された「認証コード」を入力するか、SMSが使えない場合は電話着信による音声案内でコードを取得して入力すれば決済完了です!
best-javascript-library-10 これは、非常にお手軽で簡単だと思います。

さらに、1ヶ月分を翌月に支払うシステムなので、毎月送られてくるメールの通りに後からゆっくりと「コンビニ」または「銀行」で支払うことが出来ます。

このような決済機能を、簡単なJavaScriptコードで実現できるのが「Paidy」の大きな特徴でしょう。


<参考>
「Paidy.js」公式デベロッパーサイト

「Paidy.js」APIドキュメント


Webアプリやサイトを一発でPCアプリに変換!

【 Nativefier 】

best-javascript-library-11 GitHubが、「HTML/CSS/JavaScript」を使ってPCアプリ(Mac, Windows, Linux)を開発できる「Electron」は有名ですが、コレをベースに既存のWebアプリやサイトを一発でPCアプリに変換できるのが「Nativefier」です。


使い方は恐ろしく簡単で、例えばブログサービスの「Medium」をPCアプリに変換したかったら以下のコマンド一発でOK!

$ nativefier “http://medium.com”

これだけで、自分のPC環境に合わせた起動用ファイルが生成されます。(オプションでOSを指定することも可能…)

他にも、OSの細かい仕様に対応させたり、認証が必要なサイトの設定やアイコン画像の変更など、細かいオプションも多数用意されているので便利です!


ちなみに、WebアプリやサイトをPCアプリではなく「スマホアプリ」に変換したい場合は「Manifold JS」を利用すると便利です!
best-javascript-library-12 iOS / Android / windowsなどのアプリに一発変換し、ストアへ公開するための必要なファイルを自動で書き出してくれるので、ご興味ある方はぜひ参考にしてみてください。


<参考>
「Nativefier」GitHubサイト

「Nativefier」APIドキュメント

「Manifold JS」公式サイト


世界のあらゆる場所を3つの英単語で特定する!

【 what3words 】

best-javascript-library-13 世界各国にはそれぞれ独自の住所表記があるわけですが、そもそも「住所」すら存在しない場所もあったりします。

特定の場所を伝えるのに、もっと簡単な住所があっても良いのでは?ということで誕生したのが「what3words」です。


「what3words」は、地球上を「3m × 3m」のマス目におよそ57兆個のグリッドで区分けしており、それぞれのマス目に3つの英単語が登録されています。
best-javascript-library-14

つまり、この3つの単語を知っていればあらゆる場所を特定できるようになっており、例えば「東京駅」だと、

voices.falls.exhaled

となります。

サイトにある「マップエクスプローラ」を使えば、好きな場所を指定してどんな単語が登録されているのかをチェックすることも可能です。

このような新しい住所サービスを簡単に利用できるAPIが提供されており、JavaScriptから「JSON / JSONP」形式で取得できるため、自分のWebアプリやサイトなどへ組み込みやすくなっているのが特徴です。


<参考>
「what3words」公式サイト

「what3words」マップエクスプローラ

「what3words」APIドキュメント


日本の多彩な統計情報を活用する!

【 e-Stat API機能 】

best-javascript-library-15 総務省がまとめた日本のあらゆる統計情報を、JavaScriptを使って手軽にデータを取得できるAPIを提供しているのが「e-Stat」のAPI機能です。


使い方も簡単で、無料のアカウント登録後に発行できる「アプリケーションID」を取得するだけで、すぐに統計データを活用することができます。

データも多岐に渡っており、「国税調査」「人口推計」「企業経済調査」「家計調査」「物価統計」などや、産業・医療・商業…など膨大なデータを参照できるのが大きな特徴でしょう。


また、サイトには「チュートリアル」や「サンプルデモ」も多く掲載されており、最近ではGitHubにもサンプルプログラムがアップされているので便利です。

GitHubサンプルプログラム

さまざまなデータを組み合わせて、ユニークなWebアプリを開発したい方はぜひチェックしてみてください!


<参考>
「e-Stat」API機能サイト

「e-Stat」Githubサイト


まとめ

今回ご紹介したライブラリは、基本的に無料で試せるものばかりなので、もし気になったモノがあれば気軽に挑戦してみるのが良いと思います。
GitHubには、まだまだ紹介できないくらいユニークなライブラリが存在するので、慣れてきたら好きな分野を探求するのも楽しいですよ。

例えば、最近人気の「AI(人工知能)」を活用するシーンでも「synaptic.js」などを使えば、JavaScriptだけで本格的な機械学習が実現できるようになっています。

みなさんもこれらのライブラリを活用して、ぜひ創作意欲を高めてみてはいかがでしょうか。



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る