Resource - JavaScript

簡易的なDOM操作をjQueryライクに行える超軽量ライブラリ・「nanoJS」

nanoJS nanoJSは簡単なDOM操作をjQueryライクに行える軽量ライブラリです。同じような構文でDOMを操作する事が出来る、というもので完全互換ではありませんが、非圧縮で100行ほど、圧縮すると0.6kbほどになると超軽量...

手書き風のUIコンポーネントを提供するライブラリ・「Wired Elements」

Wired Elements Wired Elementsは手書き風のUIコンポーネントを提供するライブラリです。UIはWeb Componentsとして実装されており、手書きライクな見た目はRough.jsが用いられていますので、よ...

textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト・「short-and-sweet」

short-and-sweet short-and-sweetはフォームの入力エリアで、maxlength属性で文字数が制限された項目に残り文字数を表示するスクリプトです。非依存型で軽量、使い方も簡単です。表示文字列はカスタムデータ属...
Ads

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ライブラリです。ラインやバー、パイ、マップなどよく使われるチャートタイプから、他のタイプの様々なチャートもサポートし...

テキスト入力すると自動でマインドマップを作成できる・「Text2MindMap」

Text2MindMap Text2MindMapはテキスト入力だけでマインドマップを作成してくれるツールです。CSSとJavaScriptで出来ており、インデントすれば子のアイテムを作成します。非常に簡易的なもので、保存はプレーンテ...

Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」

Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...

非依存で軽量の、Webサイト内をハイライトで案内するWebサイトツアー実装スクリプト・「Driver」

Driver DriverはWebページを案内するページツアーを実装するスクリプトです。たまに見かける、任意の場所をハイライトしてユーザーにWebページの使い方等を教える、というもの。単純にハイライトするだけ、ハイライトせずツール...

スクロールに応じて任意のCSSアニメーションを要素に付与するスクリプト・「Delighters.JS」

Delighters.JS Delighters.JSはページスクロールに応じて要素に任意のCSSアニメーションを付与できるスクリプトです。よく見かけるやつです。個人的には多くの場合、嫌でも目にしっかり入ってくるくらいの派手なエフェク...

Bootstrap 4向けのオープンソースなダッシュボード用テンプレート・「Now UI Dashboard」

Now UI Dashboard Now UI DashboardはBootstrap 4向けのOSSなダッシュボード用テンプレートです。目に優しいカラースキーム、見やすいUI等を意識して作られたそうです。OSSですが、有償プランも用...

マルチレベルに対応したドリルダウンのハンバーガーメニューを実装できるスクリプト・「mlStackNav」

mlStackNav mlStackNavはマルチレベルに対応したハンバーガーメニューです。jQueryに依存します。ドリルダウンでマルチレベルナビゲーションに対応していますので省スペースに大量のナビゲーションを詰め込むことができます...

解析機能も付いたオープンソースの短縮URLツール・「Kutt」

Kutt Kuttは解析機能も付いたOSSのURL短縮ツールです。短縮されたURLの管理と解析が可能で、パスワード付きでの発行も出来るようです。p.tlやtr.imのように、いつサービスが終了するか分からない、終了したらデッドリンクと...

CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」

basicScroll See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen. basicScrollはCSS変数を利用して...

項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」

paginathing.js paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリ...

開発者向けのツールやリソースのリストをコレクションしている・「Pretty Awesome Lists」

Pretty Awesome Lists Pretty Awesome Listsは開発者向けのツールやリソースのリストをコレクションしているプロジェクトサイトです。開発者といっても様々ですが、Pretty Awesome Lists...
Ads