手書き風のUIコンポーネントを提供するライブラリ・「Wired Elements」
Wired Elements Wired Elementsは手書き風のUIコンポーネントを提供するライブラリです。UIはWeb Componentsとして実装されており、手書きライクな見た目はRough.jsが用いられていますので、よ...
Resource - JavaScript
textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト・「short-and-sweet」
short-and-sweet short-and-sweetはフォームの入力エリアで、maxlength属性で文字数が制限された項目に残り文字数を表示するスクリプトです。非依存型で軽量、使い方も簡単です。表示文字列はカスタムデータ属...
Vue.jsを使用したデスクトップアプリを作成できる・「Vuido」
Vuido VuidoはVue.jsを使用したデスクトップアプリを作成できるフレームワークです。libuiライブラリが使用されていますのでProton Nativeと似たような感じかもしれません。各OSで動作するよう設計されており、E...
ログインフォームでアバターが入力内容を目で追うUI・「Animated SVG Avatar」
Animated SVG Avatar See the Pen Animated SVG Avatar by Darin (@dsenneff) on CodePen.0 Animated SVG AvatarはSVGで...
画像の見た目に合わせたドロップシャドウを作り出すスクリプト・「Image-shadow」
Image-shadow Image-shadowは画像の見た目に合わせて陰影を作成するスクリプトです。非依存型で単体で動作します。コードよく見てないけど画像のクローンを作成してblurさせて下に配置、を自動でやってくれる、みたいなも...
スマフォで横スクロールがある場合はその旨をアイコンで明示してくれるスクリプト・「ScrollHint」
ScrollHint ScrollHintはスマフォでWebページを見た際に横スクロール可能なtable等があった場合に、その旨をアイコン等で明示してくれるスクリプトです。国産CMSのa-blogを提供するappleple社さんが開発...
DOM要素をドラッグで複数選択するスクリプト・「selection.js」
selection.js selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能...
多様なタイプに対応できるオープンソースの高性能チャートライブラリ・「ECharts」
ECharts EChartsは多種多様なタイプのビジュアルデータに対応可能な高性能チャートライブラリです。中国の大手検索エンジンサービス、百度(Baidu)が提供するライブラリのようです。非常に高性能で、線グラフだけでも20種以上の...
URLフレンドリーなIDをジェネレートするライブラリ・「Nano ID」
Nano ID Nano IDはランダムにURLフレンドリーなIDを生成するライブラリです。かなり高確率で重複を防げるよう設計しているそうです。生成に使用するのは数字と大小文字の英数字のみなのでURLフレンドリーでもあるとの事。動作サ...
軽量で非依存なカルーセル実装スクリプト・「Glide.js」
Glide.js Glide.jsは軽量で柔軟な非依存型のカルーセル実装スクリプトです。ES6(ECMAScirpt2015)で書かれています。ファイルサイズは圧縮版で6kbほどで、依存性もないバニラなコードで書かれているのでかなり軽...
シンプルで見やすいチャートを生成できるライブラリ・「TOAST UI Chart」
TOAST UI Chart TOAST UI Chartはシンプルで見やすいチャートを生成できるJavaScriptライブラリです。ラインやバー、パイ、マップなどよく使われるチャートタイプから、他のタイプの様々なチャートもサポートし...
非依存で軽量の、Webサイト内をハイライトで案内するWebサイトツアー実装スクリプト・「Driver」
Driver DriverはWebページを案内するページツアーを実装するスクリプトです。たまに見かける、任意の場所をハイライトしてユーザーにWebページの使い方等を教える、というもの。単純にハイライトするだけ、ハイライトせずツール...
スクロールに応じて任意のCSSアニメーションを要素に付与するスクリプト・「Delighters.JS」
Delighters.JS Delighters.JSはページスクロールに応じて要素に任意のCSSアニメーションを付与できるスクリプトです。よく見かけるやつです。個人的には多くの場合、嫌でも目にしっかり入ってくるくらいの派手なエフェク...
マルチレベルに対応したドリルダウンのハンバーガーメニューを実装できるスクリプト・「mlStackNav」
mlStackNav mlStackNavはマルチレベルに対応したハンバーガーメニューです。jQueryに依存します。ドリルダウンでマルチレベルナビゲーションに対応していますので省スペースに大量のナビゲーションを詰め込むことができます...
項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」
paginathing.js paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリ...
カンバンツールを作成する為のスクリプト・「jKanban」
jKanban See the Pen jKanban - Javascript plugin for Kanban boards by kachibito (@kachibito) on CodePen. ※ドラッグ&ドロップが動...
沢山のコンポーネントを持ったVue.js向けのUIツールキット・「Fish-UI」
Fish-UI Fish-UIはVue.js向けのUIコンポーネント集です。グリッドやボタン、メニュ－、ポップアップ、フォームなどの基本的なUIやカレンダー、日付ピッカー、時間ピッカー、タイムラインなどのコンポーネントも備えられていま...
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClass scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で...
WYSIWYGモードも備わったOSSのライブプレビュー機能付きMarkdownエディタ・「TOAST UI Editor」
TOAST UI Editor TOAST UI EditorはWYSIWYGモードも備わったライブプレビュー機能付きMarkdownエディタです。MarkdownモードとWYSIWYGモードとのスイッチが可能、リアルタイムでプレビュ...
30秒で理解できるものだけを集めたJavaScriptコードスニペット集・「30 seconds of code」
30 seconds of code 30 seconds of codeは「30秒で理解できるJavaScriptコード」をまとめたスニペット集です。理解力に欠ける自分の脳では30秒は難しかったですが、シンプルながら便利そうなコード...
インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」
Lite Editor See the Pen Lite Editor - demo by appleple (@appleple) on CodePen. Lite Editorはインライン要素に特化したオープンソース国産WY...
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」
jq.Schedule jq.ScheduleはJS製のタイムスケジューラーです。jquery及びjquery UIが必要です。日本の方が作成されています。タスク管理系のアプリや従業員のシフト管理ツールなど、利用幅は多々ありそうですね...