Webサイトの訪問者の簡易的なデータを取得するスクリプト・「Purser」
Purser PurserはWebサイトの訪問者の簡易的なデータを取得する軽量スクリプトです。最初に訪れた日時やリファラ、タイムゾーン、ブラウザに設定してある言語、ランディングページやモニターサイズ、コンバージョンに設定したボタン等を...
Resource - JavaScript
accessibleなカラーパレットの作成をサポートしてくれる・「Accessible color palette builder」
Accessible color palette builder Accessible color palette builderはaccessibleなカラーパレットの作成をサポートしてくれるWebツールです。任意のカラーを5色設定...
データやイベントを簡易的に可視化するタイムシート作成ライブラリ・「timesheet.js」
timesheet.js timesheet.jsはデータやイベントを簡易的に可視化するタイムシート作成ライブラリです。ライブラリを読み込んでデータを書くだけで上デモのような簡易的なタイムシートを作成出来ます。データ入力も簡単なので扱...
手軽で簡単、使いやすい国産の動画用モーダルウィンドウスクリプト・「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が開発、公開しています。マークアップは簡単なリストにカスタムデータ...
Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」
CoreUI CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でし...
公開されている便利そうな大量のWeb APIをまとめている・「Public-APIs」
Public-APIs Public-APIsは企業やWebサービス等が公開しているWeb APIで便利そうなのをGithubでまとめたもの。アナリティクスやビッグデータ分析、バーコード、キャプチャ、辞書、顔認識、Google、地図、...
ブラウザでJSONをフィルタリング、操作出来るOSS・「json.browse」
json.browse json.browseはブラウザでJSONを操作出来るオープンソースのソフトウェアです。指定したりコピペでコードを貼り付け、フィルタリングした後に、JSON或いはJavaScriptで出力してくれます。目的も使...
フルスクリーン動画からスムーズにスマフォのモックアップに移行するイントロテンプレート・「Immersive Video Template」
Immersive Video Template Immersive Video Templateはcodyhouseで紹介された、動画を使ったWebサイトのイントロのサンプルです。フルスクリーン動画で始まり、スムーズにスマフォのモッ...
Webページとして公開もできるjsfiddleライクなコードテストツール・「PLAYCODE」
PLAYCODE PLAYCODEはWebページとして公開もできるjsfiddleライクなコードテストツールです。jsfiddleのようにHTML、CSS、JavaScriptをブラウザで動作テストできる、というツールですが、本ツール...
markdownでデータも視覚化出来るようにする・「Visdown」
Visdown Visdownはmarkdownでデータも視覚化出来るようにするツールです。markdownのみでcsv等を読み込んでデータ内容をグラフにして表示しよう、というもの。グラフはSVGで描かれます。markdown自体、も...
ブラウザでアニメーションや簡単なゲーム等を作成出来るOSS・「Wick」
Wick Wickはブラウザでアニメーションや簡単なゲーム等を作成出来るエディタです。マルチメディアエディタというものだそう。デモがあるので詳細は本プロジェクトページにて。今日は大晦日ゆえ、簡単ですがこれで本年の更新は終わらせて頂きま...
軽量で非依存のパララックス実装スクリプト・「Rellax.js」
Rellax.js Rellax.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イベントを介して実行、...
覚えておくと便利な正規表現のパターンをまとめた・「Regex Hub」
Regex Hub Regex Hubは覚えておくと便利な正規表現のパターンをまとめているプロジェクトサイトです。メールやHTMLタグ、日付、カラーコードや電話番号などに対応出来る正規表現が用意されており、その場でマッチするかをテスト...
Googleリッチスニペット対応の、WebページにオリジナルのLikeボタンを付けるスクリプト・「LikeBtn」
LikeBtn LikeBtnは任意のWebページにLike/Dislikeボタンを付けられるスクリプト。jQueryに依存します。上デモのように日本語にも対応しています。少し微妙ではありますが・・ｗ 念の為、Facebook...
使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」
Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...