ウェブアクセシビリティを重視した使いやすいモーダルウィンドウ・「Modaal」
Modaal Modaalはウェブアクセシビリティを重視した使いやすいモーダルウィンドウです。WCAG 2.0の達成基準レベルAAをクリアしているそうで、全ての人にとってアクセスブルであると謳っています。jQuery依存っぽいのでこの...
Resource - JavaScript
複数プレイリストもサポートしたOSSな非依存型オーディオプレイヤー実装スクリプト・「AmplitudeJS」
AmplitudeJS AmplitudeJSは複数プレイリスト等もサポートした非依存のHTML5オーディオプレーヤーを実装できるスクリプトです。コントローラーも直感的でわかりやすくタッチデバイスフレンドリーな設計となっているそうです...
カーソルを乗せた方向によって変化するマウスホバーエフェクトを実装するライブラリ・「Direction Reveal」
Direction Reveal Direction Revealはカーソルの入った方向を検出してエフェクトを変化させるライブラリです。他ライブラリに依存せず単体で動作します。たまにどこかしらで見かけるやつを手軽に実装できる的なもの。...
スクロールが生じたtableの左右上下の列や行などを固定出来るスクリプト・「TableHeadFixer」
TableHeadFixer TableHeadFixerはtableのヘッダーやフッター、左や右の列を固定できるスクリプトです。jQueryに依存します。スクロールが生じたtableで重要な個所を固定する事でユーザーのスクロール頻度...
シンプルなオートコンプリート実装スクリプト・「LightAutocomplete.js」
LightAutocomplete.js LightAutocomplete.jsはシンプルな自動補完機能実装スクリプトです。jQueryに依存します。非常にシンプルで、名前にもあるように軽量さを特徴としています。使い方も簡単で、スク...
inputで指定したパターン以外の入力を不可にするバニラなJavaScriptライブラリ・「imaskjs」
imaskjs imaskjsはinput入力の際、指定したパターン以外の入力を不可にするライブラリです。非依存型のバニラなスクリプトで他ライブラリを必要としません。また、必要な機能を追加するモジュール式となっているっぽいです。typ...
手軽に画像にパララックス効果を与えられるスクリプト・「simpleParallax」
simpleParallax simpleParallaxは手軽に画像にパララックス効果を与えられるスクリプトです。jQueryに依存します。本体を読み込んで画像をセレクタに指定すれば即反映されます。仕組みは、画像をtransfo...
任意のWebページにGoogle sheetやTrello等の簡易的な管理ツールを導入できる・「Integrations.js」
Integrations.js Integrations.jsは任意のWebページにGoogle sheetやTrelloなどの管理ツールを導入できるOSSです。上の動作サンプル（未設定なので表示のみのデモです）ではGoogle sh...
任意の画像からカラーパレットを作成するスクリプト・「Color Thief」
Color Thief Color Thiefは任意の画像からカラーパレットを作成するオープンソースのスクリプトです。画像を解析して主要となっているカラーをいくつか抽出、カラーコードを提供してくれます。WordPressのプラグイン等...
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」
Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...
2D / 3Dの地図を作るためのライブラリ・「maptalks.js」
maptalks.js maptalks.jsはOSMをベースとした地図ライブラリです。2D / 3D地図の作成が可能との事ですが、3Dといっても大それたものではなく、地図を平面ではなく、奥行きを付け、上図のように地図上にドローできる...
コメントシステムを実装できるオープンソースのDisqusクローン・「schnack.js」
schnack.js schnack.jsはコメントシステムを静的なWebサイトにも導入できるOSSのDisqusクローンです。サーバー要件はNode6以上とSQLiteとのこと。同じようにGithubやTwitter等のアカウントで...
編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」
jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」
file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...
anime.jsでテキストにアニメーションエフェクトを付与するコードをまとめたサンプル集・「MOVING LETTERS」
MOVING LETTERS MOVING LETTERSはanime.jsでテキストにアニメーションエフェクトを付与するスクリプトをまとめたコードサンプル集です。各エフェクトはクリックすればコードが表示されるようになっています。いい...
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」
bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...
軽量でモダンなモジュール式のドラッグ&ドロップライブラリ・「Draggable」
Draggable Draggableは軽量でモダンなモジュール式のD&Dスクリプトです。ベーシックな要素間のD&Dや、移動後のソート、要素同士のコンフリクトが起きた場合のイベントや移動時のエフェクトなどが主な特徴として挙げられていま...
一定の幅にテキストをフィットさせてくれるスクリプト・「Fitty」
Fitty Fittyは一定の幅にテキストをフィットさせてくれるスクリプトです。先行スクリプトとしてFitText.jsがありますが、Fittyは軽量で非依存型というメリットがあります。それぞれ特徴は多少異なるので用途次第で使い分ける...
Vue.jsのコンポーネントフレームワーク・「Vuetify」
Vuetify VuetifyはVue.jsのコンポーネントフレームワークです。リユーサブル且つクリーンな設計で使いやすさを重視した印象です。スタイルはマテリアルデザインパターンを導入。沢山のコンポーネントが用意されているので不便はし...
現在の時刻に応じて、時刻に見合ったさまざまなメッセージを表示出来るスクリプト・「tidyTime.js」
tidyTime.js tidyTime.jsは現在の時刻に応じて、その時刻に見合ったメッセージを表示できるスクリプトです。例えば11時まであと15分です、とか朝の9時丁度になりました、とか22時を7分過ぎました、とか。また、前後にメ...
縦に長いtableのヘッダーをstickyにするスクリプト・「jquery.stickyTableHeader 」
jquery.stickyTableHeader jquery.stickyTableHeaderは縦に長くなったtableのヘッダをfixedにするスクリプトです。下にスクロールしてもヘッダだけ固定される、というよくあるやつ。...