画像にウォーターマークを付与出来るスクリプト・「watermark.js」 watermark.js watermark.jsは画像にウォーターマーク(透かし)を付与出来るスクリプトです。画像の上にCSS等でレイヤーを重ねるのではなく、指定した画像に直接任意の画像やテキストを透かしとして加え、データURIスキ...2015.05.16 | 10時47分28秒
大量のjQueryプラグインと、その使い方等をコレクションしている・「jQueryScript.Net」 jQueryScript.Net jQueryScript.NetはjQueryのプラグインをコレクションしているWebサイトです。プラグインだけでなく、その使用方法やライセンス、ファイルサイズ等を簡単に紹介しています。今更感が否めな...2015.05.13 | 10時19分17秒
書いたテキストに背景画像を適応させるスクリプト・「TextHoler.js」 TextHoler.js TextHoler.jsは書いたテキストに上記のように背景画像を適応させる為のスクリプトです。jQueryに依存しています。指定された要素にCSSを加えるだけのシンプルなものなので手軽でいいですね。とは言え、...2015.05.09 | 10時30分15秒
SASSのように使えるJavaScript・「Stylus」 Stylus StylusはSASSのように簡易的な記述でCSSを生成してくれるJavaScriptです。シンプルなコードでコンパイルしてくれるので取っ付き易い印象です。とはいえ、これだけLESSやSASSが普及している中で敢えて本ス...2015.05.05 | 11時05分59秒
Canvasベースのグラフを描けるjQueryスクリプト・「Flot」 Flot FlotはCanvasを使ったチャートを実装する為のライブラリです。jQueryに依存しています。上図のようなシンプルなグラフに限らず様々なビジュアルのグラフに対応することが可能です。グラフのリアルタイムアップデートにも対応...2015.05.02 | 10時56分36秒
SASSで構築された軽量なフロントエンド開発フレームワーク・「Penguin」 Penguin PenguinはSASSで構築されたフロントエンド開発の為の軽量スターターキットです。OSSとして公開されています。必要最低限のコンポーネントも揃えられており、RequireJS併用でモジュールの管理も可能との事。個人...2015.04.25 | 10時25分07秒
CSVをパースする為のスクリプト・「Papa Parse」 Papa Parse Papa ParseはCSVをパースするためのJavaScriptです。大きなファイルサイズにも対応可能でCSV⇔JSONでコンバートしてくれます。他、ローカルファイルを開ける、区切り文字の自動検出等が特徴として...2015.04.17 | 10時14分00秒
動画のように表現出来るコンテンツスライダー・「Jquery Image Player」 Jquery Image Player Jquery Image Playerはコンテンツを動画のように再生して連続表示出来るJSスライダーです。jQueryに依存しています。上図のように、HTMLで書かれたテキストや画像等が含まれた...2015.04.15 | 10時57分08秒
marked.jsを使ったシンプルなMarkdownエディタを実装する為のスクリプト・「Markdownify」 Markdownify MarkdownifyはシンプルなMarkdownエディタを実装する為のスクリプトです。jQueryに依存しています。シンタックス等はcodemirror.jsを使用し、Markdownのパースはmarked....2015.04.11 | 11時29分35秒
ブラウザで動くシンセサイザーを実装する為のスクリプト・「beep.js」 beep.js beep.jsはブラウザ上で動く、WebAudio APIを使ったシンセサイザー構築の為のJavaScriptフレームワークです。シンプルなコードで動かせるように作ったそうです。デモページではコンソールを開いてtext...2015.04.09 | 10時14分28秒
jPlayerとBootstrap併用でiTunes検索を実装する為のスクリプト・「iTunes Search」 iTunes Search iTunes SearchはjPlayerとBootstrap併用で、その場で視聴可能なiTunes検索を実装する為のスクリプトです。jQueryに依存しています。検索はSearch APIからjsonでデ...2015.04.05 | 9時58分37秒
スクロールに応じて映画のPV風にコンテンツを表示させるスクリプト・「Space.js」 Space.js Space.jsはスクロールに応じて映画のPVのようにコンテンツを次々と表示させていくスクリプトです。うまく説明出来ないので本サイトでスクロールをお試し下さい。以前流行ったパララックスなWebサイトの応用、みたいな感...2015.04.04 | 9時54分54秒
Webサイトのスタイルをユーザーがデスクトップ向けとモバイル向けに切り替えられるようにするスクリプト・「Responsible.js」 Responsible.js Responsible.jsはWebサイトのスタイルをPC⇔モバイルでスイッチ出来るようにするスクリプトです。他ライブラリに依存せず、単体で動いてくれます。前提条件として、Media Queriesを使用...2015.04.03 | 10時38分58秒
tableに書いたデータをGoogle Chartを使ってグラフ化する為のスクリプト・「Chartinator」 Chartinator Chartinatorはtableに書いたデータをGoogle Chartでグラフ化する為のスクリプトです。jQueryに依存しています。既存のtable要素に書かれたデータを可視化出来るのでユーザビリティの改...2015.04.01 | 10時09分56秒
WebGL用のOSSな3Dゲームエンジン・「PlayCanvas 」 PlayCanvas PlayCanvasはオープンソースとして公開されているWebGL用の3Dゲームエンジンです。Windows、OS X、AndroidやiOSなどに対応したクロスプラットフォームなゲーム制作をサポートするとの事...2015.03.29 | 10時26分51秒
Webサイトを様々なデバイスに対応させる為の軽量なjQueryプラグイン・「Restive.JS」 Restive.JS Restive.JSはWebサイトを様々なデバイスに対応させるためのスクリプトです。デバイスを検出してbody要素にclassを加える、任意のサイズでブレークポイントを作成する、任意のDOM要素のみにclassを...2015.03.28 | 11時03分45秒
YoutubeやImgur、Githubリポジトリ、jsFiddle等のURLをリッチメディアに変換するライブラリ・「Olly.js」 Olly.js Olly.jsは様々なサービスのコンテンツのURLをリッチメディアにコンバートするライブラリです。サポートしているサービスはYoutube、Vimeo、TEDなどの動画サービスやImgurなどのアップローダー、Twit...2015.03.26 | 10時46分12秒
クロスプラットフォームなモバイル向けアプリ構築の為のフレームワーク・「RAD.js」 RAD.js RAD.jsはモバイル向けのアプリケーション構築の為のフレームワークです。iOSやAndorid、Windows Phone 8の他、各主要ブラウザに最適化したクロスプラットフォームなフレームワークを目指しているそうです...2015.03.23 | 10時51分00秒
SVGによるシンプルなパターン背景を作るためのライブラリ・「Textures.js」 Textures.js Textures.jsはSVGで線や点を使ったシンプルなパターン背景を作るためのライブラリです。d3.jsを使ってビジュアライズされたデータの背景を作るために設計された様です。点はtextures.circle...2015.03.19 | 10時39分15秒
現在のURLに任意のパラメーターを付与する為のスクリプト・「url.js」 url.js url.jsは現在閲覧中のページのURLに任意のパラメーターを付与する為のスクリプトです。例えばといったURLをその場でのような任意のパラメーターを付与したり、削除する事も出来ます。汎用的なライブラリでは有りませんが痒い...2015.03.18 | 12時31分06秒
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」 jQuery Trickshots jQuery TrickshotsはjQueryを使った100のテクニックとそのサンプルを配布するプロジェクトです。週1で届くTutorialzineのニュースレターを購読する事でダウンロード出来る...2015.03.13 | 12時00分14秒
WebGLを使って画像にエフェクトを与える為のJavaScriptライブラリ・「glfx.js」 glfx.js glfx.jsはWebGLを使用して画像を編集出来るようにする為のJSライブラリです。セピア加工やチルトシフト、ボケ、ノイズ効果などのエフェクトを与えることが出来ます。WebGLなので対応ブラウザが限られる為、すぐに実...2015.03.12 | 10時41分47秒