ABC記譜法を自動で楽譜化、音源化したりダウンロード出来るようにするスクリプト・「abc.js」 abc.js abc.jsはABC記譜法を自動で楽譜化、その場で視聴したりMIDIファイルを生成してダウンロードできるようにするスクリプトです。 ABC記譜法は以下のようにプレーンテキストで楽譜を表現できるようにしたもの。 (...2019.07.19 | 10時08分54秒
オープンソースのシンプルでモダンなepubビューアスクリプト・「Foliate」 Foliate Foliateはオープンソースのシンプルでモダンなepubビューアスクリプトです。epub.jsがベースとなっているそうです。 ナビゲーションやスクロールバー設置、カスタムテーマ、注釈ツールやハイライトなど、ep...2019.07.18 | 9時49分26秒
オープンソースのシンプルなReact.jsコンポーネントライブラリ・「Flawwwless ui」 Flawwwless ui Flawwwless uiはシンプルなReact.jsのコンポーネントライブラリです。シンプルで扱いやすいように設計されている印象でした。 用意されたUIコンポーネントはよく使われるものでモーダルウィ...2019.07.17 | 10時03分13秒
コンパクトでノイズの無いミニマルなオープンソースのカンバンボード・「Nullboard」 Nullboard NullboardはOSSのカンバンボードWebアプリです。コンパクトで無駄のないミニマルなスタイルとなっています。特に可読性にフォーカスして設計したそう。 機能は必要最低限ですが、重要なワークスペー...2019.07.08 | 9時58分56秒
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」 Pinker.js Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複...2019.06.28 | 10時00分26秒
手軽にダークモードを導入できるシンプルなスクリプト・「Darkmode.Js」 Darkmode.Js Darkmode.Jsは手軽にダークモードをWebサイトに導入できるシンプルなスクリプトです。非依存で非常に軽量ですが、要はmix-blend-modeを使うので汎用性は高くはありません。 dev.toの...2019.06.26 | 10時05分48秒
任意の画像にフィルターを掛けたりリサイズ、切り抜き等の加工を施してダウンロードできるOSSの画像編集ライブラリ・「Filerobot Image Editor」 Filerobot Image Editor Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです...2019.06.25 | 10時14分32秒
Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」 Storefront UI Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デス...2019.06.07 | 10時10分05秒
マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」 Tornis Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけで...2019.06.06 | 10時08分37秒
レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」 maturity-radar See the Pen MdLMKo by kachibito (@kachibito) on CodePen. maturity-radarはレーダーチャートを作成できるスクリプトで...2019.06.04 | 10時06分27秒
href=”mailto:”のリンクをクリックした際に選択式にするスクリプト・「mailgo」 mailgo mailgoは<a href="mailto:***">のようなmailtoリンクを、メーラw-立ち上げずにモーダルウィンドウを開いて選択式にするスクリプトです。少し前にMailtoUIというスクリプトの記事...2019.05.15 | 10時00分43秒
d3.js v5をベースにしたチャートライブラリ・「Britecharts」 Britecharts Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだ...2019.05.13 | 10時07分39秒
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」 DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 ...2019.05.11 | 10時02分16秒
textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」 Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に...2019.05.03 | 10時08分04秒
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」 MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...2019.04.27 | 10時05分54秒
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」 Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...2019.04.22 | 10時01分13秒
SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」 iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...2019.04.20 | 10時03分53秒
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」 Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...2019.04.17 | 10時29分08秒
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」 Frappe Gantt Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは...2019.04.14 | 9時59分02秒
CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」 Hyper Editor Hyper EditorはCMSや各フレームワークとの統合を目的としたブロックベースのコンテンツエディタです。JS製で、バックエンドに依存しないのが特徴だそうです。JS製のエディタである事で、一方のCMSでは...2019.04.11 | 10時01分30秒
ブロックレベルで編集できるオープンソースのリッチテキストエディタ・「Editor.js」 Editor.js Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキス...2019.04.03 | 9時04分47秒
スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」 lax.js lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけの...2019.03.18 | 9時09分55秒