OSSで公開されているeBay製のテンプレートエンジン・「Marko」
Marko Markoはオークションサービスを展開するeBayが開発、公開したJavaScript製のテンプレートエンジンです。HTML/CSS/JSの知識があれば少ない学習コストで使用できるようになるシンプルな設計だそうです。主にe...
Resource - JavaScript
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」
Floaty Bubbles See the Pen Floaty Bubbles by Will Boyd (@lonekorean) on CodePen. 物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニ...
Vue.jsベースのオープンソースなUIコンポーネントライブラリ・「Element」
Element ElementはVue.jsをベースとしたOSSのUIコンポーネントライブラリです。フォームやレイアウト、ボタンやタイポグラフィはもちろん、タイムピッカーやスライダー、レーティングなど、より応用の効くフォームのアイテム...
Vue.jsベースのオープンソースUIコンポーネントフレームワーク・「Vuesax」
Vuesax VuesaxはVue.jsベースのUIコンポーネントフレームワークです。Vue.jsを使ったアプリケーション開発をサポートしてくれます。カラースキームやグリッド、フォーム、タブなどの基本UIはもちろん、スライダーやカード...
オープンソースのGoogleマップオートコンプリートライブラリ・「geomapify」
geomapify geomapifyはOSSで公開されているGoogleマップオートコンプリートライブラリです。Ultimateと言うだけあって欲しい機能がしっかり備わった高性能なものとなっています。jQueryに依存しています。i...
Webアプリ開発をサポートするUI作成の為の軽量なDOMラッパースクリプト・「RE:DOM」
RE:DOM RE:DOMはWebアプリ等のUI作成をサポートする軽量なDOMラッパースクリプトです。分かりやすい使い方で学習コストも少なく済みそうです。また2kbと軽量で依存性も無いので軽量化にも貢献してくれそうです。 簡単な...
図形の作成やエフェクト実装をサポートするスクリプト・「Pts.js」
Pts.js Pts.jsは図形作成やエフェクト作成をサポートするスクリプトです。ドットを結ぶことで図形や色、エフェクトやインタラクションなど、さまざまなコンテンツ作成に役立つ、という考えの元で開発された・・・みたいなものだと思います...
任意のテキストを1文字ずつアニメーションさせるエフェクトを付与できるスクリプト・「Splitting」
Splitting Splittingは任意のテキストを１文字ずつ要素で包括し、アニメーションを付与できるスクリプトです。かなり昔に公開されたLETTERING.JSのように自動で包括し、アニメーションを与えてくれる、というもの。CS...
URLに書いたHTMLを解析してPDFにする・「html-to-pdf」
html-to-pdf html-to-pdfはURLに書いたURLを解析してPDFにするスクリプトです。うまく説明できないのでご覧頂いた方が早いかも。上SSは下記のようなURLで表示できます。 の先にHTMLタグを書く...
沢山のコンポーネントを兼ね備えたOSSのBootstrap 4テンプレート・「Argon Design System」
Argon Design System Argon Design Systemはたくさんのコンポーネントを備えたオープンソースのBootstrap 4テンプレートです。開発スピードをサポートするのが目的との事でデザインは概ね完成されて...
Webサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプト・「ihavecookies」
ihavecookies ihavecookiesはWebサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプトです。jQueryに依存しています。動作サンプルでは同意後30日の間はCookie削除しない...
インタラクティブに動作し、様々なタイプのチャートに対応できるOSSのチャートライブラリ・「apexcharts.js」
apexcharts.js See the Pen TimeSeries Demo by kachibito (@kachibito) on CodePen. apexcharts.jsはインタラクティブに動作する、様々なチャートに...
スタッキング出来るモーダルウィンドウ実装スクリプト・「Popbox.js」
Popbox.js Popbox.jsはポップアップをスタッキングできるモーダルウィンドウスクリプトです。表示されたモーダルウィンドウからさらに子ウィンドウを表示できる、というもの。依存性もなく単体で動作、サイズも軽量です。入れ子に出...
SVG製の小規模なチャートを描けるライブラリ・「Dailychart.js」
Dailychart.js Dailychart.jsはSVGにで描ける小規模なチャートライブラリです。主に株価チャートの実装を目的に作られているようです。データは直接カスタムデータ属性に入力して実装する形となります。クセもなく扱...
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」
Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...
ソートや内容の編集等が可能なシンプルなデータテーブル実装ライブラリ・「Frappe DataTable」
Frappe DataTable Frappe DataTableはシンプルながらパワフルなデータテーブル実装ライブラリです。列でのソートやセル内の内容の編集、カラムのリサイズ等が可能となっています。上サンプルでは変更していません...
データをグラフ等に可視化出来るオープンソースのスクリプト・「picasso.js」
picasso.js picasso.jsはデータビジュアライゼーションの為のスクリプトです。OSSとして公開されています。様々なグラフにも対応しており、プラグインによる拡張も可能との事。使い方も割と優しい印象でした。可もなく不可もな...
カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」
fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...
なるべく強固なパスワードを入力して貰う為のフォームのサンプル
Better Password Form See the Pen Better Password Form by kachibito (@kachibito) on CodePen. Codepenでパスワード設定の際のフォーム...
スクロールに応じてCSS keyframesライクな書き方でアニメーションを付与できる・「Motus」
Motus Motusはスクロールに応じて任意の要素にアニメーションを付与する為のライブラリです。非依存なので単体で使えます。アニメーションはCSS keyframesライクな書き方ができますのでCSSの知識がある方なら扱いやすいと思...
非依存で使いやすいカラーピッカー実装スクリプト・「Flat color picker」
Flat color picker Flat color pickerは他スクリプトに依存せず使えるシンプルでフラットなカラーピッカーです。排出されるコードも3種あり、透過にも対応しています。また、タッチデバイスもサポート。ライセンス...
簡易的なDOM操作をjQueryライクに行える超軽量ライブラリ・「nanoJS」
nanoJS nanoJSは簡単なDOM操作をjQueryライクに行える軽量ライブラリです。同じような構文でDOMを操作する事が出来る、というもので完全互換ではありませんが、非圧縮で100行ほど、圧縮すると0.6kbほどになると超軽量...