Frappe Gantt

Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは直感的でわかりやすい印象でした。設定も分かりやすくて使いやすそうですね。Frappeは他のライブラリも開発しており、以前にもデータテーブルやチャートライブラリをご紹介していました。こちらのガントチャートも良い出来だと思いますので合わせてご利用になってみては如何でしょうか。ライセンスはMIT。

Frappe Gantt

Editor

EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表示確認が可能であったり、エクスポート機能、cdn.jsへの検索と導入、ローカルストレージへの自動保存機能、など、あると嬉しい機能は一通りそろっている印象です。特にシェアしたりembedする予定が無いならクローズドな場所で動かしたほうが良いですね。リアルタイムに即反映されるので開発も捗りそうです。ライセンスはMITとのこと。欲を言えばググラビリティの低いネーミングだけは止めて欲しいかも。
Editor

iro.js

iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッカーを実装できるJSライブラリです。軽量且つ非依存型で単体で動作します。また、拡張機能の追加も可能となっており、機能をカスタマイズしやすい設計ともなっています。動作も軽量、どんなデバイスでも一貫した動作が期待できます。導入も手軽、ブラウザ間の差異による無駄な工数も無く構築可能で、動作もサイズも軽量、依存性も無し、拡張機能も対応と、特にいう事なしのライブラリという印象でした。ライセンスはMPL2.0との事です。

iro.js

Slip.js

Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。

Slip.js

MailtoUI

MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず、使いやすいUIで選択肢をユーザーに提供します。以下動作サンプルです。

動作サンプル　※クリックで動作確認できます

コードは以下のように普通のmailtoリンクとなっています。

<a class="mailtoui" href="mailto:hogehoge@example.com">動作サンプル　※クリックで動作確認できます</a>

特にclassを与える必要もなく、スクリプトを読み込むだけでこのようなUIを提供できるようになります。

勿論、日本向けに諸々変更する必要がありますが、個人的にはいいアイデアだなぁと思いました。メールフォームよりも普段慣れたメーラーの方がいいかも、とは思いつつも問答無用でメーラーが立ち上がるのはストレスな方も少なくないと思うので迷った時期もあったんですが、これなら解決できそうですね。スクリプトも軽量で依存性も無いので使いやすいと思います。ライセンスはMIT。

MailtoUI

Twemoji-Picker

Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に選択、投稿できるようにする、というもの。使い方も簡単で、jQueryと本スクリプトを読み込んでtextareaやinput要素など投稿できるようにしたい要素を指定するだけです。ちょっとした微調整用のオプションも少し用意されているので基本的に導入するにあたりこちらで行う作業はほとんどなさそうです。楽でいいですね。ライセンスはMIT。

Twemoji-Picker

DropCSS

DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。

多くの方はWebサイト全体で全てのページをチェックし、その中で未使用のCSSを削除してくれるものを求めている方が大半だとは思いますが、本ライブラリのようにWebページ単位でのツールは既存サイトのメンテナンスよりも、開発中にお世話になりそうですね。

というわけで試しに使ってみました。

動作サンプル

動作サンプルです。ダミーのHTMLはDummy HTML snippetsで、CSSはNormalize.cssを使ってテストしました。結果はサンプルの通りです。読み込まれたCSSを解析し、未使用のCSSを除去した結果が表示されています。

ChromeユーザーならDevtoolsで出来るようになっていますが、個人的にはDropCSSも割と便利でした。お手軽高速というのがメリットという印象です。ライセンスはMIT。

DropCSS

Britecharts

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

動作サンプルがありましたのでお借りしました。

動作サンプル

マウスホバーするとグラフと下部のデータが連動して動く、みたいなよくあるやつです。

正直、上のような簡単なチャートだけならもっと他にも軽量で簡単に使えるライブラリもありますのでBritechartsを使う必要性はないんですが、それなりのデータ量を扱うコンテンツでしたらあとで困らないように様々なケースに対応できるライブラリを選択しておいた方がよさげですね。

ざっくり手順

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />

CDNを読み込んで

<div class="foobar"></div>

表示させる場所の用意

const container = d3.select('.foobar');

d3-selectionモジュールを使ってd3.jsコンテナを作成

donutChart = britecharts.donut()

上デモならドーナツ型なのでdonut()関数を呼び出してチャートをインスタンス化

let donutData = {
  data:[
    {name: "hoge", id: 1, quantity: 1},
    {name: "huga", id: 2, quantity: 2},
    {name: "piyo", id: 3, quantity: 35}
  ]
};

あとはデータセットを作成してグラフをどう表現したいか等の設定、レンダリングの流れとなります。

 donutChart.
  isAnimated(true).
  highlightSliceById(2).
  width(300).
  height(300);

詳細はチュートリアルをご参照下さい。d3.jsベースのチャートライブラリは数多く存在しますが、個人的にはBritechartsはかなりとっつきやすい印象でした。ライセンスはApache2.0となっています。

Britecharts

mailgo

mailgoは<a href="mailto:***">のようなmailtoリンクを、メーラw－立ち上げずにモーダルウィンドウを開いて選択式にするスクリプトです。少し前にMailtoUIというスクリプトの記事を書きましたが概ね同じ目的、挙動となっています。

こちらも動作サンプルを作ってみました。

動作サンプル

アニメーションのエフェクトの有無や見た目だけで基本的にはMailtoUIと大差ありませんが違いはオプションとファイルサイズでしょうか。

まぁファイルサイズは極端に大きな差ではありませんが、性能は少し異なっていて、mailgoはスパム対策が施されています。上がmailtoリンクで下がスパム対策版になります。

対してMailtoUIはスパム対策こそされていないものの、モーダルウィンドウ内のボタンテキストの変更等がオプションで行えるようになっています。

需要があればいずれどちらもないものを付与していくかもしれませんが、現状はこんな感じという事で。ライセンスは明記ありませんので利用する際は開発者にお問い合わせください。

mailgo

maturity-radar

maturity-radarはレーダーチャートを作成できるスクリプトです。非依存型で単体で動作します。

RPG等でもおなじみのレーダーチャートを手軽に作成する事が出来ます。諸事情により必要に迫られて方法を考えていたところ、こちらが見つかったので備忘録。2年前から更新はされていないようですが・・

使用例

空要素を作ります

<div id="foo"></div>

スクリプトを読み込みます

<script src="https://rawcdn.githack.com/kolektiv/maturity-radar/master/dist/radar.js"></script>

あとはセッティングするだけ

<script>
      radar.show('#foo', {
        size: 300,
        curve: false,
        metrics: [
          {
            name: "HP",
            range: [
              "50",
              "100",
              "150",
              "200"
            ],
            target: 2,
            actual: 1
          },
　　　　　　・
　　　　　　・
　　　　　　・
          {
            name: "運",
            range: [
              "1",
              "2",
              "3",
              "4"
            ],
            target: 2,
            actual: 1
          }
        ]
      });
    </script>

簡単ですね。もう少し触って使いこなせるようにします。ライセンスはMIT。

maturity-radar

Tornis

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

パララックスの為のスクリプトというわけではなく、ユーザーがどこまでスクロールしたか、マウスの速度や位置、スクロール速度などを監視する事が目的となります。

パララックス効果は作れるけど、基本的にはビューポートの監視を目的としているそうです。

使い方

ソース最後にスクリプトを読み込みます

<script src="tornis.js"></script>

監視内容を設定します

const trackMouse = ({ mouse, size, scroll }) => {
      if (mouse.changed) {//マウスの動きを監視
       //マウス位置を取得
        document.querySelector('.js-cursor-pos').innerText = `${mouse.x}, ${mouse.y}`;
       //マウスのカーソル速度を取得
        document.querySelector('.js-cursor-vel').innerText = `${mouse.velocity.x}, ${mouse.velocity.y}`;
      }

      if (size.changed) {//ビューポートサイズを監視
      //ビューポートサイズを取得
        document.querySelector('.js-size').innerText = `${size.x}, ${size.y}`;
      }

      
      if (scroll.changed) {//スクロールの動きを監視
        //スクロール位置を取得
        document.querySelector('.js-scroll-pos').innerText = `${scroll.left}, ${scroll.top}`;
        //スクロール速度を取得
        document.querySelector('.js-scroll-vel').innerText = `${scroll.velocity.x}, ${scroll.velocity.y}`;

        let scrollOffset = Math.round((scroll.bottom / (size.docY)) * 100);
        if (scrollOffset > maxScroll) {
          maxScroll = scrollOffset > 100 ? 100 : scrollOffset;
         //ページの高さを取得し、何%くらいスクロールしたかを取得
          document.querySelector('.js-scroll-max').innerText = `${maxScroll}%`;
        }

        if (maxScroll >= 95) {
         //95%以上閲覧した場合はサンクスメッセージに変更
          document.querySelector('.js-scroll-msg').innerText = '. Thanks for reading!';
        }
      }
    };

    __TORNIS.watchViewport(animateView);
    __TORNIS.watchViewport(trackMouse);

欲しい情報は取得できるみたい。使いこなせれば便利そうですね。ただ、使い方次第ではユーザーにネガティブな印象を与える可能性もあるので注意して使いたいところです。ライセンスはMIT。

Tornis

Storefront UI

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

アトミックデザインが適応されており、必要な時に必要な要素を組み合わせて設計する流れを想定しています。

ECサイト向けのUIコンポーネントが沢山

ECサイト用に構築されたのだから当たり前かもしれませんけど、ECサイトでよく使われるUIコンポーネントが沢山用意されており、これだけでも珍しい気がします。

例えばS、M、Lなどのサイズの選択や色の選択、購入数を増やすためのカウンター、レーティング、アラートやプライス表示に割引表示の工夫なども見られ、細かく配慮されている印象です。

Vue.jsを使ったECサイトの構築を考えられている方は一見の価値はあると思います。Storefront UIはMITライセンスの元、オープンソースとして公開されています。
Storefront UI

Filerobot Image Editor

Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです。UIまで全て概ね完成されたもので、フレームワークの類ではありませんが、OSSとして公開されているのでカスタマイズできるようになっています。

フィルターやエフェクトを施してスマフォアプリでよくある画像加工アプリを実装できる、というもの。実機では試していませんが、スマフォでも問題なく動作するようです。

というわけで、試しに使ってみました。以下動作サンプルを用意しています。

動作サンプル

こんな感じのUIで画像を編集し、ダウンロードできるようになります。エフェクトやフィルターも付いてます。

単純に実装するだけならCDNの読み込みだけで済みます。

<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/2.1.0/filerobot-image-editor.min.js"></script>

初期化して編集したい画像を読み込みます。

const ImageEditor = new FilerobotImageEditor();
ImageEditor.open('https://picsum.photos/500/300');

無論、アップロードした画像を編集する、といった事も可能です。また、開発ロードマップも公開されており、今後は更なるエフェクト等の追加や画像の明るさ、コントラストや露出、彩度など、画像編集アプリの基本ともいえる機能の追加、サイズ圧縮やプレビュー機能などの追加も予定しているそうです。

本ライブラリはMITライセンスとしてソースコードが公開されています。基本形は完成されているので拘りが無ければある程度カスタマイズするだけですぐに実装できそうですね。

Filerobot Image Editor

Darkmode.Js

Darkmode.Jsは手軽にダークモードをWebサイトに導入できるシンプルなスクリプトです。非依存で非常に軽量ですが、要はmix-blend-modeを使うので汎用性は高くはありません。

dev.toの投稿を元に作成したそうです。ブレンドモードを使う事で、汎用性は低いものの、手軽に簡単にダークモードを導入できます。

以下にサンプルを用意しました。

動作サンプル

右下にトグルボタンが確認できます。CDNを使えば数行で済みます。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
 new Darkmode({ label: '🌓' }).showWidget();
</script>

スクリプトを読み込んで初期化、セッティングするだけ。以下のようなオプションが利用できます。

var options = {
  bottom: '64px', // ボタンの位置
  right: 'unset', // ボタンの位置
  left: '32px', // ボタンの位置
  time: '0.5s', // エフェクト時間
  mixColor: '#fff', // ダークテーマのベースカラー？
  backgroundColor: '#fff',  // ライトテーマの背景色
  buttonColorDark: '#100f2c',  // ボタンの色、ダークモード時
  buttonColorLight: '#fff', // ボタンの色、ライトモード時
  saveInCookies: false, // cookie保存の有無
  label: '🌓' // ボタンのラベル
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

WebサイトのCSSによってはうまく動作しませんがこの手軽さは良いですね。ライセンスはMITです。

Darkmode.Js

Pinker.js

Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。

特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。

以下動作サンプルです。

動作サンプル

左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。

使い方

Pinker.jsを読み込みます

<script src='Pinker.js'></script>

preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。

<pre id="Source01">Layout:
	[A]
	[B][D][E]
	[C]...[F]
Relate:
	[B]-&gt;[A],[C]
	[D]-&gt;[B],[E],[F]
</pre>

canvasを用意します。

<canvas id='Canvas01'></canvas>

drawメソッドで紐付けて完成です

<script>
	var canvas = document.getElementById("Canvas01");
	var source = document.getElementById("Source01").innerHTML;
	pinker.draw(canvas, source);
</script>

ダイアグラムだけ表示したいならpreをdisplay:none;しておけばいいと思います。

記法はドキュメントに詳しく書かれていますのでご参照ください。ライセンスはMIT。

Pinker.js

Nullboard

NullboardはOSSのカンバンボードWebアプリです。コンパクトで無駄のないミニマルなスタイルとなっています。特に可読性にフォーカスして設計したそう。

機能は必要最低限ですが、重要なワークスペースの1つとなるアプリ故、出来る限り学習コストが少なく済み、直感的に操作できるのが魅力です。

JavaScriptで出来ており、データの保存はlocalStorageが使われるます。勿論、オフラインでも動作します。

主な特徴

主な特徴、というほど特別な特徴は無いんですが、リストの移動、ボードの移動、リストを見出し化してボード内を整理、データのインポート/エクスポート(nbxという拡張子で渡されますが内容はJSON形式で書かれてます)などなど。勿論、リストアイテムは別ボードへの移動可能です。

動作サンプルページではページ右上にハンバーガーメニューがあるのでそこからエクスポートできるようになっています。これはちょっと分かりにくかったです。

一応主な機能としてはこんなところです。Trello等がどうしても苦手だ、覚えるのが面倒だ、という方は触ってみては如何でしょうか。ライセンスは2-clause BSDとなっています。

Nullboard

Flawwwless ui

Flawwwless uiはシンプルなReact.jsのコンポーネントライブラリです。シンプルで扱いやすいように設計されている印象でした。

用意されたUIコンポーネントはよく使われるものでモーダルウィンドウやテーブル、ボタン、メニューやレイアウトなどです。開発者の方が開発スピードを上げるために自作したものだそうでこのたびOSSとして公開した、という事みたいです。

覚えておいて損はないかなぁと思います。ライセンスはMIT。

Flawwwless ui

Foliate

Foliateはオープンソースのシンプルでモダンなepubビューアスクリプトです。epub.jsがベースとなっているそうです。

ナビゲーションやスクロールバー設置、カスタムテーマ、注釈ツールやハイライトなど、epub.jsよりも見やすく使いやすくデザインされている印象です。

poファイルも含まれているので他言語化も可能っぽいです。ライセンスはGPL。

Foliate

abc.js

abc.jsはABC記譜法を自動で楽譜化、その場で視聴したりMIDIファイルを生成してダウンロードできるようにするスクリプトです。

ABC記譜法は以下のようにプレーンテキストで楽譜を表現できるようにしたもの。
(参照：Wikipedia / abcnotation.com本家)

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
  GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
  g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

この記法をレンダリングして実際に楽譜化したりMIDIファイルを生成する、というスクリプトです。記法の説明はWikipediaにも書かれていますのでそちらをご参照ください。

対応ブラウザ

実際の動作確認は下記動作サンプルページで確認する事が出来ます。楽譜化は基本的に問題なさそうですが、MIDIファイル化はそこそこ制限されるみたいです。IE、Edgeでは概ね動作しないそうです。

また、ブラウザが問題なくても再生するには端末のリソースが必要らしく、ある程度のマシンスペックが要求されるそうです。

業務上必要になるケースはそう多くはないでしょうが、あまり見かけないので備忘録的に。ライセンスはMITとの事です。

abc.js動作サンプル

ImportDoc

ImportDocはGoogleドキュメントで書いたコンテンツをそのままWebページとして公開できるようにするライブラリです。OSSとして公開されています。

Googleドキュメントで管理できるので簡易的なCMSとして使う事が出来そうです。実装も非常に簡単です。秒でセットアップが終わる、がキャッチコピーみたいです。

というわけで使ってみました。

動作サンプル

このように画像やリンクも作成可能です。テキストのカラーや背景変更は現状では出来ないみたいでした。簡単なテキストコンテンツなら問題なさそうです。

<script src="https://unpkg.com/import-doc@0.0.3/dist/import-doc/import-doc.js"></script>

使い方も非常に単純、2行で済みます。まずスクリプトを読み込みます。

<import-doc src="https://api.importdoc.com/document?id=foobar"></import-doc>

指定されたWeb componentを書けばOKです。確かにセットアップだけなら2行のコードを貼りつけるだけなので秒で終わります。

コンテンツはGoogleドキュメントで管理、編集します。編集後は即反映されます。簡単なページ作成ならこういう手もありかもしれませんね。

ImportDocはMITライセンスとしてソースコードが公開されています。

ImportDocOn Github