手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」
roughViz.js roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使...
Resource - JavaScript
インタラクティブにアニメーションする背景を作成できるWebアプリ・「Naker.Back」
Naker.Back Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのと...
CSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリ・「Scene.js」
Scene.js Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数...
React.jsによるアプリケーション開発をサポートするコンポーネントのコレクション・「React Rainbow」
React Rainbow React RainbowはReact.jsによるアプリケーション開発用のコンポーネントのコレクションです レイアウトに関するコンポーネントは勿論、チャートやフォーム、アバター、マップやカレン...
CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」
debugCSS.js debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを...
React.jsによるアプリケーション開発の為のモジュール式UIコンポーネントライブラリ・「Chakra UI」
Chakra UI Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。 WAI-ARIAに準拠した...
既存のコンテンツに統合出来るオープンソースのブログシステムフレームワーク・「Shaai」
Shaai Shaaiは既存コンテンツに統合可能なOSSのブログシステムフレームワークです。JS製、管理画面もありました。 プラグイン式に既存のWebサイトやアプリ等と統合し、ブログを構築できるのだそう。静的CMSなんかと相性良...
Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」
pagemap See the Pen KKPqwER by kachibito (@kachibito) on CodePen. pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスク...
BootstrapベースでVueやReact、jQuery、Angularなど様々なライブラリに対応可能の、大量のコンポーネントを含んだダッシュボード/管理画面テンプレート・「Airframe」
Airframe AirframeはBootstrapベースのダッシュボードテンプレートです。BootstrapVueやng-bootstrapなどを使う事でVueやAngularなど様々なライブラリに対応できるとのことです。 ...
xkcdライクな手書き風のチャートライブラリ・「Chart.xkcd」
Chart.xkcd See the Pen chart.xkcd pie by timqian (@timqian) on CodePen. Chart.xkcdは手書き風のチャートを生成できるJavaScriptラ...
JavaScriptやCSSを書く感覚でクロスプラットフォームに対応できるデスクトップアプリを作るためのライブラリ・「NodeGUI」
NodeGUI NodeGUIはJSやCSSを書く感覚でデスクトップアプリを作成できるオープンソースのライブラリです。基本的にクロスプラットフォーム対応だそうです。 chromiumではなくQt5ベースとなっており、メモリとCP...
グラデーションにも対応できるJavaScriptカラーピッカー・「GPickr」
GPickr See the Pen KKPzPjr by kachibito (@kachibito) on CodePen. GPickrは単色だけでなく、CSSグラデーションにも対応できるカラーピッカーです。非依...
円型での切り取りも可能な画像クロップライブラリ・「Cropme」
Cropme CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を...
form要素を対話形式で作成できるスクリプト・「Conversational Form」
Conversational Form See the Pen Conversational Forms - native validation (v1.0.0 feature) by kachibito (@kachibi...
GoogleドキュメントでWebページを作成、公開できるOSS・「ImportDoc」
ImportDoc ImportDocはGoogleドキュメントで書いたコンテンツをそのままWebページとして公開できるようにするライブラリです。OSSとして公開されています。 Googleドキュメントで管理できるので簡易的...
ABC記譜法を自動で楽譜化、音源化したりダウンロード出来るようにするスクリプト・「abc.js」
abc.js abc.jsはABC記譜法を自動で楽譜化、その場で視聴したりMIDIファイルを生成してダウンロードできるようにするスクリプトです。 ABC記譜法は以下のようにプレーンテキストで楽譜を表現できるようにしたもの。 (...
オープンソースのシンプルでモダンなepubビューアスクリプト・「Foliate」
Foliate Foliateはオープンソースのシンプルでモダンなepubビューアスクリプトです。epub.jsがベースとなっているそうです。 ナビゲーションやスクロールバー設置、カスタムテーマ、注釈ツールやハイライトなど、ep...
オープンソースのシンプルなReact.jsコンポーネントライブラリ・「Flawwwless ui」
Flawwwless ui Flawwwless uiはシンプルなReact.jsのコンポーネントライブラリです。シンプルで扱いやすいように設計されている印象でした。 用意されたUIコンポーネントはよく使われるものでモーダルウィ...
コンパクトでノイズの無いミニマルなオープンソースのカンバンボード・「Nullboard」
Nullboard NullboardはOSSのカンバンボードWebアプリです。コンパクトで無駄のないミニマルなスタイルとなっています。特に可読性にフォーカスして設計したそう。 機能は必要最低限ですが、重要なワークスペー...
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」
Pinker.js Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複...
Webサイトマップをビジュアル化して見積もりを計算できる・「Octopus.do」
Octopus.do Octopus.doはWebサイトのサイトマップをビジュアル化して見積もりを計算、シェアできる見積もり計算アプリです。 ページごとに作成する項目を書き、工数を設定すると自動で計算してくれる、というも...
手軽にダークモードを導入できるシンプルなスクリプト・「Darkmode.Js」
Darkmode.Js Darkmode.Jsは手軽にダークモードをWebサイトに導入できるシンプルなスクリプトです。非依存で非常に軽量ですが、要はmix-blend-modeを使うので汎用性は高くはありません。 dev.toの...