Resource - JavaScript

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

オープンソースのシンプルな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などの形式でレポートを吐き出すオープンソースのデスクトップアプリです。基本的にはチェ...

タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」

Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...

SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」

iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...

jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」

Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...

無料且つ登録も不要でJavaScriptをコードを書きながら学べる・「CodeGuppy」

CodeGuppy CodeGuppyは無料でユーザー登録も不要のJavaScript学習サービスです。コードを実際に書きながら学ぶことができます。子供から大人まで学べる、をモットーに作られているそうなので頭に入りやすいかもしれません...
Ads