カーソルを乗せた方向によって変化するマウスホバーエフェクトを実装するライブラリ・「Direction Reveal」 Direction Reveal Direction Revealはカーソルの入った方向を検出してエフェクトを変化させるライブラリです。他ライブラリに依存せず単体で動作します。たまにどこかしらで見かけるやつを手軽に実装できる的なもの。...2017.12.06 | 10時16分37秒
Web用リッチテキストエディタを作成する為のツールキット・「ProseMirror」 ProseMirror ProseMirrorはWeb用リッチテキストエディタを構築するためのツールキットです。以前はMarkdown⇔HTMLなWYSIWYGエディタだったようですが、現在は様々な形のリッチテキストエディタを作るため...2017.12.05 | 10時03分27秒
シンプルなオートコンプリート実装スクリプト・「LightAutocomplete.js」 LightAutocomplete.js LightAutocomplete.jsはシンプルな自動補完機能実装スクリプトです。jQueryに依存します。非常にシンプルで、名前にもあるように軽量さを特徴としています。使い方も簡単で、スク...2017.11.28 | 10時09分33秒
inputで指定したパターン以外の入力を不可にするバニラなJavaScriptライブラリ・「imaskjs」 imaskjs imaskjsはinput入力の際、指定したパターン以外の入力を不可にするライブラリです。非依存型のバニラなスクリプトで他ライブラリを必要としません。また、必要な機能を追加するモジュール式となっているっぽいです。typ...2017.11.26 | 11時07分16秒
手軽に画像にパララックス効果を与えられるスクリプト・「simpleParallax」 simpleParallax simpleParallaxは手軽に画像にパララックス効果を与えられるスクリプトです。jQueryに依存します。本体を読み込んで画像をセレクタに指定すれば即反映されます。仕組みは、画像をtransfo...2017.11.22 | 10時31分39秒
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」 Microtip MicrotipはCSSのみで実装できる超軽量(圧縮版で1kbだそう)なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-...2017.11.18 | 11時14分24秒
任意のWebページにGoogle sheetやTrello等の簡易的な管理ツールを導入できる・「Integrations.js」 Integrations.js Integrations.jsは任意のWebページにGoogle sheetやTrelloなどの管理ツールを導入できるOSSです。上の動作サンプル(未設定なので表示のみのデモです)ではGoogle sh...2017.11.16 | 9時59分27秒
フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」 Biomatic UI Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが...2017.11.15 | 10時33分33秒
任意の画像からカラーパレットを作成するスクリプト・「Color Thief」 Color Thief Color Thiefは任意の画像からカラーパレットを作成するオープンソースのスクリプトです。画像を解析して主要となっているカラーをいくつか抽出、カラーコードを提供してくれます。WordPressのプラグイン等...2017.11.14 | 10時56分36秒
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」 jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...2017.11.05 | 10時56分05秒
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」 Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...2017.11.04 | 10時37分13秒
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」 Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...2017.11.03 | 10時51分30秒
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」 pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...2017.10.31 | 11時14分53秒
アイコンフォントとCSSをセットにしたツールキット・「Fontisto」 Fontisto Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSS...2017.10.27 | 10時08分24秒
CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」 Light Modal Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニ...2017.10.26 | 10時49分01秒
MarkdownやLaTeXをサポートしている超シンプルなWebテキストエディタ・「Writing」 Writing Writingは超シンプルなブラウザ上で動くWebテキストエディタです。MarkdownやLaTeXをサポートしています。上図はTeX Wikiさんで書かれていたコードです。左ペインに書くと右ペインに出力されます。多く...2017.10.24 | 11時24分42秒
編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」 jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...2017.10.14 | 10時10分41秒
ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」 mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...2017.10.13 | 11時05分59秒
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」 file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...2017.10.12 | 10時30分56秒
CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」 Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...2017.10.11 | 10時58分43秒
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」 KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...2017.10.10 | 10時17分32秒
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」 zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...2017.09.29 | 10時52分20秒