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

アプギガトップ > 思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
注目記事ピックアップ
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/07/10 21:10

思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!

webapp-javascript_01 どうも、まさとらん(@0310lan)です!

これからWebアプリの開発を考えている人、もしくは「いつか作ってみたい!」と思っている人に朗報です。

簡単なコードで、とてもユニークな機能を提供してくれる「JavaScriptライブラリ」を厳選してご紹介しようと思います。

週末の空いた時間や、休暇などに楽しみながら作ってみてはいかがでしょうか。


「マジカル・アイ」を利用した3D画像アプリを作ろう!
【 MagicEye.js 】
webapp-javascript_02 みなさんは「マジカル・アイ」をご存知でしょうか?

じっと画像を見つめていると、3Dの立体像が浮かび上がってくるというモノで、視力回復にも効果があるとして過去に話題になってました。

このような「マジカル・アイ」画像を、HTML5のキャンバス上へ簡単に生成できるようになっています。


どんな画像が作れるのかは、サイトのトップ画面から試すことも可能です。
webapp-javascript_03 自分でイラストを描いて、それをマジカル・アイ画像に変換することも簡単にできるようになっています。

この機能を活かして、ユニークな画像編集アプリやSNSアプリなどを作ってみると面白いかもしれませんね。


懐かしの「8ビットサウンド」で遊ぼう!
【 Beep.js 】
webapp-javascript_04 ファミコンと言えば、「スーパーマリオ」や「ドンキーコング」など名作が多数揃っていますが、俗に言う「8ビットサウンド」と呼ばれる名曲も数多くあります。

そんな懐かしいサウンドを、簡単に生成して演奏できるのが「Beep.js」の面白いところ。

サイトのトップ画面から「デモ演奏」が聞けるようになっており、試しにプログラミングも出来るようになっています。
webapp-javascript_05 8ビットサウンドの「音ゲー」や、自作のゲームなどに組み込んでみると楽しそうです。


「チェスゲーム」を作ってみよう!
【 chessboard.js 】
webapp-javascript_06 ゼロから「チェスゲーム」を作ろうと思ったら大変ですが、チェス盤や駒、ルールなどを簡単に生成できるのがコチラ!

駒の動かし方や、ハイライト表示、アニメーション、自動再生…など、あらかじめ必要と思われる機能は全部入りとなっています。
webapp-javascript_07 また、別途「chess.js」ライブラリを導入することで、CPU対戦も簡単にできるようになっているので便利です。

個人的には、このライブラリを使って、Web上に「チェス全国大会」がオンラインで出来るようなサービスを作ってみたくなりました。


高機能な「写真編集アプリ」を作ろう!
【 glfx.js 】
webapp-javascript_08 写真の編集に欠かせない「フィルター効果」を、簡単に利用できるように提供しているのがコチラのライブラリ!

サイト上で、どんなフィルターが使えるのかを実際に試すことができるようになっています。
webapp-javascript_09 「ぼかし」「ズーム」「セピア」「ノイズ」「エッジ」…など、たいていの写真編集アプリには搭載されているような機能が使えるのは便利です。

単純な「ドローイングアプリ」は簡単に実装できますが、フィルター系は難しいので、このライブラリを組み合わせて自作の「写真編集アプリ」を公開してみましょう!


音の「波形」を表示して、音楽アプリを作ろう!
【 wavesurfer.js 】
webapp-javascript_10 音楽ファイルを読み込んで、その周波数に合わせた「波形」を表示できる便利なライブラリです。

また、他にも「途中再生」「早送り」「ミュート」など、一般的な音楽アプリに必要な機能も一通り搭載されています。

このライブラリを使って、SNS機能を搭載したWebアプリを作れば、SoundCloudに近いサービスも作れるかもしれません。
webapp-javascript_11 単純な音楽再生アプリも、このライブラリを組み込むだけで、かなり洗練された画面になるのではないでしょうか。

いろいろ応用範囲の広いライブラリかと思います。


「マッピング機能」を使った地図系アプリを作ろう!
【 mapsense.js 】
webapp-javascript_12 地図を活かしたWebアプリと言えば「Googleマップ」が有名ですが、このライブラリを使うことでオリジナルのWebマップが簡単に作れます!

「地図」は、いろいろ応用が効くコンテンツなので、twitterと連携した「ツイートマップ」や、独自のデータをマッピングすると面白くなります。
webapp-javascript_13

地図の種類やレイアウトなど、非常に細かくカスタマイズ出来るようになっているのも特徴です。
webapp-javascript_14 「白地図」や、「登山マップ」など、開発するアプリの用途に合わせて柔軟に対応可能です。


「バーコードリーダー」を作ってみよう!
【 quagga.js 】
webapp-javascript_15 バーコードリーダーのアプリは数多くありますが、ブラウザだけで実現できるアプリは少ないのではないでしょうか。

このライブラリを使うと、PCのWebカメラやスマホのカメラを利用して、ブラウザからバーコードを認識することが簡単に出来ます。
webapp-javascript_16 精度も非常に良くて、少しくらい斜めであってもしっかりと認識してくれます。

しかも、日本を含めてほとんどの国のバーコードに対応しているのも魅力的です。

別途アプリケーションをインストールすることなく、ブラウザだけでバーコードを認識するWebアプリを作ってみると面白いですね。


おまけ
今回ご紹介したような「JavaScriptライブラリ」以外にも、ユニークな機能を利用できるサービスがあるので、合わせてご紹介しておきます!

【「埋め込みコード」でココまで可能!欲しかったあの機能を搭載できる無料サービス8選!】
webapp-javascript_17 HTML5のアニメーションを作成して埋め込んだり、何気ない写真の中へ「音楽・動画」などのコンテンツを埋め込むなど…、いずれも厳選したサービスをまとめています。

文章と画像だけのコンテンツは、そろそろ飽きてきた…という人には最適なサービスばかりとなっています。

ご興味ある方は、ぜひ参考にしてみてください!


まとめ
今回ご紹介したように、JavaScriptライブラリには非常にユニークな機能を持っているモノが増加傾向にあります。

もし、何らかのWebアプリを作るのであれば、まずはライブラリをチェックしてみることをオススメしておきます。

そのまま利用するのも良いし、参考にしながら自分独自のプログラムを構築するのも良いでしょう。

ぜひ、ユニークな面白いWebアプリを公開してみてください!



wirtten by まさとらん

まさとらん

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

twitter:0310lan

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

ページトップへ戻る