Resource - 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併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を...
Ads

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の...

任意の画像にフィルターを掛けたりリサイズ、切り抜き等の加工を施してダウンロードできるOSSの画像編集ライブラリ・「Filerobot Image Editor」

Filerobot Image Editor Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです...

Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」

Storefront UI Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デス...

マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」

Tornis Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけで...

レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」

maturity-radar See the Pen MdLMKo by kachibito (@kachibito) on CodePen. maturity-radarはレーダーチャートを作成できるスクリプトで...

href=”mailto:”のリンクをクリックした際に選択式にするスクリプト・「mailgo」

mailgo mailgoは<a href="mailto:***">のようなmailtoリンクを、メーラw-立ち上げずにモーダルウィンドウを開いて選択式にするスクリプトです。少し前にMailtoUIというスクリプトの記事...

コンテキストメニューからドラッグ中のテキストのフォント情報を調査出来るオープンソースのChrome拡張・「Fontanello」

Fontanello Fontanelloは右クリックで表示されるコンテキストメニューからドラッグしているテキストのフォントの情報を調べられるChromeエクステンションです。従来のエクステンションのようにわざわざ起動したりブックマー...

d3.js v5をベースにしたチャートライブラリ・「Britecharts」

Britecharts Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだ...

Gmailの元リードデザイナーが作った、GmailをミニマルなデザインにするChrome拡張・「Simplify」

Simplify Simplifyは元Gmailのリードデザイナーが作った、GmailをミニマルなUIに替えるChrome拡張です。Google InboxのシンプルさをGmailにもたらす、というのが目的のよう。2008年~2012...

mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」

MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...

URLを指定すると自動でアクセシビリティチェックを行い、レポートを生成するオープンソースのデスクトップアプリ・「Koa11y」

Koa11y Koa11yはURLを指定すると、そのWebページのアクセシビリティチェックを行い、HTMLやCSV、MarkdownやJSON、XMLなどの形式でレポートを吐き出すオープンソースのデスクトップアプリです。基本的にはチェ...
Ads