どうも、まさとらん（@0310lan）です！

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

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

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

【 A-Painter 】

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


VR空間で「お絵かき」とは、つまり以下のGIF画像のような感じです！

メッチャ楽しそうです！


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

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


＜参考＞
・「A-Painter」GitHubサイト

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

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

【 Tesseract.js 】

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


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

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


＜参考＞
・「Tesseract.js」GitHubサイト

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

【 jQuery Face Detection 】

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


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

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


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


＜参考＞
・「jQuery Face Detection」GitHubサイト

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

【 Paidy 】

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


「Paidy」での決済方法は簡単で、「メルアド」と「電話番号」だけでOKです！（面倒な会員登録なども一切不要…）


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

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

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


＜参考＞
・「Paidy.js」公式デベロッパーサイト

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

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

【 Nativefier 】

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」を利用すると便利です！
iOS / Android / windowsなどのアプリに一発変換し、ストアへ公開するための必要なファイルを自動で書き出してくれるので、ご興味ある方はぜひ参考にしてみてください。


＜参考＞
・「Nativefier」GitHubサイト

・「Nativefier」APIドキュメント

・「Manifold JS」公式サイト

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

【 what3words 】

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

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


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


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

「voices.falls.exhaled」

となります。

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

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


＜参考＞
・「what3words」公式サイト

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

・「what3words」APIドキュメント

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

【 e-Stat API機能 】

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


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

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


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

「GitHubサンプルプログラム」

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


＜参考＞
・「e-Stat」API機能サイト

・「e-Stat」Githubサイト

まとめ

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

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

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



written by まさとらん（@0310lan）