Webサイトの訪問者の簡易的なデータを取得するスクリプト・「Purser」
Purser PurserはWebサイトの訪問者の簡易的なデータを取得する軽量スクリプトです。最初に訪れた日時やリファラ、タイムゾーン、ブラウザに設定してある言語、ランディングページやモニターサイズ、コンバージョンに設定したボタン等を...
Resource - JavaScript
データやイベントを簡易的に可視化するタイムシート作成ライブラリ・「timesheet.js」
timesheet.js timesheet.jsはデータやイベントを簡易的に可視化するタイムシート作成ライブラリです。ライブラリを読み込んでデータを書くだけで上デモのような簡易的なタイムシートを作成出来ます。データ入力も簡単なので扱...
SVGを背景に使ったポップアップを実装するスクリプト・「jQuery-svg-popup」
jQuery-svg-popup jQuery-svg-popupはSVGを背景に使ったユニークなポップアップ実装スクリプトです。jQueryに依存します。画像のようにボタンを押すとSVGで作った背景がアニメーションで表示、コンテンツ...
手軽で簡単、使いやすい国産の動画用モーダルウィンドウスクリプト・「modal-video.js」
modal-video.js modal-video.jsは手軽で簡単に動画をモーダルウィンドウです。jQueryに依存しています。開発元は国産CMSを開発するa-blog cmsの方。スクリプトとCSSを読み込み、任意の要素に用意さ...
任意の要素にマウスの動きに合わせてパララックス効果を表現出来るスクリプト・「Tilt」
Tilt Tiltは任意の要素にパララックス効果を与えられるスクリプトです。jQueryに依存しますので軽量なスクリプトとは言えないかもですが、本スクリプト自体は圧縮版で1.45kbほどのようです。オプションもいろいろ揃えられていまし...
Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」
MUURI MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer...
地図と連動して任意のテキストや画像をスライド表示するスクリプト・「StoryMapJS」
StoryMapJS StoryMapJSは地図と連動して任意のテキストや画像をスライド式に表示できるスクリプトです。地図はOpenStreetMapが使われ、ストーリー形式でスライドを作成する事ができる、というもの。地図にはアイコン...
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」
Progress Nav Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの...
レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」
Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ...
高度なイベントカレンダーアプリの為のjQueryプラグイン・「FullCalendar」
FullCalendar FullCalendarは高度なイベントカレンダーアプリを実装出来るjQueryプラグインです。jQueryUIも使用可能、Googleカレンダーにも対応しています。多言語化も済んでおり、日本語ファイルも用意...
軽量で非依存のパララックス実装スクリプト・「Rellax.js」
Rellax.js Rellax.jsは軽量で他ライブラリに依存しないパララックス実装スクリプトです。少し前に流行って今は割と普通に見かけるようになった視差効果のあるWebページの制作をサポートしてくれる、というもの。ファイルサイズは...
スマフォで画面下へスワイプしてWebページを更新させられるスクリプト・「PulltoRefresh.js」
PulltoRefresh.js PulltoRefresh.jsはスマフォで画面下にスワイプしてWebページをリフレッシュ出来るスクリプトです。ページ一番上の状態で下にスワイプするとページを更新する事ができる、というもの。マークアッ...
シンプルで非依存、軽量なカルーセルスクリプト・「Siema」
Siema See the Pen Siema - nested carousels by kachibito (@kachibito) on CodePen. Siemaはシンプルで軽量、非依存型のカルーセルを実装するスクリプトで...
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」
Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...
JSONから高性能なtableを作成してくれるスクリプト・「Tabulator」
Tabulator TabulatorはJSONデータからインタラクティブに高性能なtableを生成してくれるスクリプトです。jQueryに依存しています。ソート、ページネーション、データのグラフィカル表示、セル内の内容編集などなど高...
設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」
FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...
Googleリッチスニペット対応の、WebページにオリジナルのLikeボタンを付けるスクリプト・「LikeBtn」
LikeBtn LikeBtnは任意のWebページにLike/Dislikeボタンを付けられるスクリプト。jQueryに依存します。上デモのように日本語にも対応しています。少し微妙ではありますが・・ｗ 念の為、Facebook...
使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」
Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...
画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImg See the Pen QGENKq by kachibito (@kachibito) on CodePen. LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デ...
jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」
pit-scheduler pit-schedulerはjQueryとBootstrapで作るスケジューラーです。横長のカレンダーに蛍光ペンで引くようにスケジュールを設定、管理出来る、というもの。現状の仕様ではタスクの設定はちょっぴり...
レスポンシブなtableの為のスクリプト・「resTables」
resTables resTablesはレスポンシブなtableを作るためのスクリプトです。jqueryに依存しています。同等の先発のスクリプトであるstacktable.jsの形式に基づき、更に進化させたものとして提供しているそう。...
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」
PrognRoll PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jqu...