インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」 Lite Editor See the Pen Lite Editor - demo by appleple (@appleple) on CodePen. Lite Editorはインライン要素に特化したオープンソース国産WY...2017.12.30 | 10時38分53秒
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」 jq.Schedule jq.ScheduleはJS製のタイムスケジューラーです。jquery及びjquery UIが必要です。日本の方が作成されています。タスク管理系のアプリや従業員のシフト管理ツールなど、利用幅は多々ありそうですね...2017.12.26 | 10時18分00秒
ウェブアクセシビリティを重視した使いやすいモーダルウィンドウ・「Modaal」 Modaal Modaalはウェブアクセシビリティを重視した使いやすいモーダルウィンドウです。WCAG 2.0の達成基準レベルAAをクリアしているそうで、全ての人にとってアクセスブルであると謳っています。jQuery依存っぽいのでこの...2017.12.25 | 10時27分29秒
CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」 Hexi-Flexi-Grid Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こう...2017.12.24 | 10時12分04秒
LESSベースの軽量でモダンなUIフレームワーク・「Petal」 Petal Petalは軽量でモダンなUIフレームワークです。よく使われるような各種コンポーネントやレイアウト、フォーム回りやユーティリティクラスやアイコン、バッジやカード、アラートなどWebアプリ向けのUIなども用意されており、それ...2017.12.18 | 11時10分31秒
clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」 Angled edges Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーン...2017.12.16 | 10時23分32秒
複数プレイリストもサポートしたOSSな非依存型オーディオプレイヤー実装スクリプト・「AmplitudeJS」 AmplitudeJS AmplitudeJSは複数プレイリスト等もサポートした非依存のHTML5オーディオプレーヤーを実装できるスクリプトです。コントローラーも直感的でわかりやすくタッチデバイスフレンドリーな設計となっているそうです...2017.12.10 | 10時02分21秒
Bootstrapの為のマテリアルデザインUIキット・「MDB」 MDB MDBはBootstrapの為のマテリアルデザインUIキットです。Material Design for Bootstrapの略で、使用ライブラリが、jQueryやAngular.js、Vue.jsやReact.jsを選択でき...2017.12.08 | 10時43分00秒
開発者向けのBootstrap 4のテーマやツールキットを配布する・「HackerThemes」 HackerThemes HackerThemesはBootstrap 4のテーマやツールキットを配布するプロジェクトサイトです。Bootstrapを使った開発ワークフローのスピードアップをサポートするのが目的だそう。公開されているの...2017.12.07 | 12時59分24秒
カーソルを乗せた方向によって変化するマウスホバーエフェクトを実装するライブラリ・「Direction Reveal」 Direction Reveal Direction Revealはカーソルの入った方向を検出してエフェクトを変化させるライブラリです。他ライブラリに依存せず単体で動作します。たまにどこかしらで見かけるやつを手軽に実装できる的なもの。...2017.12.06 | 10時16分37秒
スクロールが生じたtableの左右上下の列や行などを固定出来るスクリプト・「TableHeadFixer」 TableHeadFixer TableHeadFixerはtableのヘッダーやフッター、左や右の列を固定できるスクリプトです。jQueryに依存します。スクロールが生じたtableで重要な個所を固定する事でユーザーのスクロール頻度...2017.12.01 | 11時51分37秒
シンプルなオートコンプリート実装スクリプト・「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秒
ベーシックなスタイルで軽量、コンポーネントも揃えられたCSSフレームワーク・「chota」 chota chotaはベーシックなスタイルの軽量なCSSフレームワークです。軽量ではあるものの、基本的なコンポーネントの他に要素の位置調整やスマフォ/タブレットでの表示ON/OFF等、よく使うユーティリティやカード、なども揃えられて...2017.11.13 | 10時05分32秒
Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...2017.11.09 | 10時53分38秒
手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」 PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...2017.11.06 | 10時39分13秒
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」 jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...2017.11.05 | 10時56分05秒