Atomize React

Atomize ReactはオープンソースのReact.js向けUIフレームワークです。デザイナーと開発者が同じプロジェクトで作業するにあたって一貫したUIを設計できるよう配慮されているそうです。

アトミックデザインを導入する事でデザイナーの指示に細部まで即座に対応可能になっており、スタイルガイドに沿ったテーマ設計を徹底する事で一貫したUI設計をしやすいように工夫してある他、カスタマイズやコンポーネントの追加も出来るようになっています。

当然ですが、最低条件として開発者はアトミックデザインを理解している必要があります。

サンプル

サンプルのソート機能付き検索ボックスです。

import {
  Button,
  Div,
  Text,
  DefaultTheme,
  StyleReset
} from "atomize";

使いたいコンポーネントをimportしてセッティングします。

const buttons = [
  {
    title: "Search",
    icon: "Search",
    bg: "warning700",
    hoverBg: "warning600",
    color: "white"
  },
  {
    title: "Bookmark",
    icon: "BookmarkSolid",
    bg: "info700",
    hoverBg: "info600",
    color: "white"
  }
];

コンポーネントは他にもいろいろあるので見てみてください。ライセンス名は明記ありませんがライセンスファイルがあるのでご確認の上でご利用を。

Atomize React

Conversational Form

Conversational Formは上サンプルのような対話式コンテンツを作成する為のスクリプトです。formを変換するタイプです。上記はHTML側を日本語に変えてサンプルを用意しましたが、実際はもっと効率的にローカライゼーションが可能な仕様となっています。

質問に対し、回答していく事でformの項目をストレスなく埋めてもらおう、というもの。だと思いますが、質問をうまく作らないと逆に混乱させてしまう可能性があるので製作者のコミュニケーション能力が問われそうですね。

サンプルのようにオートコンプリート機能なども付与できますのである程度応用も効くんじゃないかなと思います。これはこれで一つのフォーム入力における離脱防止の策の一つになるかもしれません。

非依存型で、単体で動作します。ライセンスはMIT。

Conversational Form

Cropme

CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。

従来のクロップツールは画像が固定されていて、切り取る範囲を動かしたり拡大縮小するものが殆どですが、こちらは切り取る範囲を固定して、ドラッグで画像を動かしたり拡大、縮小、回転等を施して切り取るスタイルとなっています。

動作サンプル

適当に作った、動作確認出来るだけのサンプルです。切り取り範囲が固定されており、画像の回転等で切り取り範囲を変更する、みたいな流れで切り取ります。

ライブラリサイトではオプションを作成できるようにもなっているので割と手軽に導入できるんじゃないかなと思います。

var example = $('#container').cropme();//要素指定
  example.cropme('bind', {
    url: 'https://picsum.photos/600/500'//画像指定
  });

example.cropme('reload', {
  "container": {//コンテナのサイズ
    "width": 600,
    "height": 500
  },
  "viewport": {//切り取り範囲設定や形状指定
    "width": 200,
    "height": 200,
    "type": "circle",
    "border": {
      "width": "2",
      "enable": true,
      "color": "#fff"
    }
  },
  "zoom": {//拡大可能にするかどうか等
    "enable": true,
    "mouseWheel": true,
    "slider": false
  },
  "rotation": {//回転可能にするかどうか等
    "slider": true,
    "enable": true,
    "position": "left"
  },
  "transformOrigin": "viewport"

});

ライセンスは記載ないので開発者にお問い合わせください

Cropme

Vuestic Admin

Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。

コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。

細かい部分のサポートの充実

更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。

細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。

ライセンスはMITとの事です。

Vuestic AdminOn Github

GPickr

GPickrは単色だけでなく、CSSグラデーションにも対応できるカラーピッカーです。非依存型で単体で動作します。

複数増やすことができますので単純なグラデーションからかなり複雑なグラデーションも作成する事が出来ます。

カラーピッカーでグラデーションを取得するコンテンツがあるかどうかはさておき、選択肢があるのは良いことですね。

使い方

<script src="gpickr.min.js"></script>

簡単な使い方。スクリプトを読み込んで

const gpickr = new GPickr({
    el: '.hogehoge',
    stops: [
        ['rgb(255,132,109)', 0],
        ['rgb(255,136,230)', 1]
    ]
});

セッティングすれば初期設定はOKです。このままだとピッカーとして機能しないのでもろもろ書く必要ありますが。

細かな仕様はGithubをご参照ください。ライセンスはMIT。

GPickrOn Github

NodeGUI

NodeGUIはJSやCSSを書く感覚でデスクトップアプリを作成できるオープンソースのライブラリです。基本的にクロスプラットフォーム対応だそうです。

chromiumではなくQt5ベースとなっており、メモリとCPUの効率的な消費を期待できそうです。React NodeGuiというReact版もあるみたい。

ElectronとかNW.jsの後継みたいなものでしょうか。もっと小規模アプリ向けという印象です。

const {
  StyleSheet
} = require("@nodegui/nodegui");

win.setStyleSheet(
  StyleSheet.create(
    `#myroot {
      background-color: #009688;
    }
    #mylabel {
      font-size: 16px;
      font-weight: bold;
    }`
  )
);

スタイルの記述例です

ライセンスはMITとの事なのですが、ちょっと注意点というか、Qt5がGPLなので継承するかしないかという問題について、開発者も注意書きをしています。一応理由があってMITで公開していますが、問題ある可能性もあるかもしれないのでもしあったら連絡して欲しいそうです。

NodeGUI

Chart.xkcd

Chart.xkcdは手書き風のチャートを生成できるJavaScriptライブラリです。上デモのような手書きっぽいチャートを作る事が出来ます。

xkcdはご存知の方も多いと思いますが、海外のWeb漫画です。元NASAのプログラマーだったランドール氏によるもの。棒人間で書かかれる特徴的なイラストはどこかで見たことがある方も多いかもしれませんね。

チャートは棒グラフや円グラフなどそれなりに対応可能です。そのままだと日本語は手書き風にはならないので統一したスタイルにするなら手書き風のWebフォントを別途読み込んで使う形になりそうです。

使い方もシンプルです。非依存なので本ライブラリだけ読み込んでSVGを用意して数値をセッティングするだけ。

<svg class="bar-chart" width="600" height="400" ></svg>
<script src="chart.xkcd.js"></script><!--スクリプト読み込み-->
<script>
  const svg = document.querySelector('.bar-chart')//classを指定

  new chartXkcd.Bar(svg, {
    data: {
      labels:['foo', 'bar'],//表示するラベル
      datasets: [{
        data: [10, 28],//数値
      }]
    },
  });
</script>

簡単ですね。

使わせていただく機会はあまりなさそうですけど面白かったので備忘録として。ライセンスはMITとの事です。

Chart.xkcd

pagemap

pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスクリプトです。非依存型
単体で動作します。

上デモ右端にあるやつです。Atomなど、テキストエディタにもよくあるミニマップをWebぺージで自動生成してくれます。

ミニマップはマウスドラッグでページ内をスクロール可能で、ぱっと見でもどんなコンテンツがあるかもある程度分かるようになっています。

<canvas id='map'></canvas>

canvasを用意します

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

生成されるマップを固定します

<script src="pagemap.js"></script>
<script>
pagemap(document.querySelector('#map'));
</script>

スクリプトを読み込んで生成先に先ほど用意したcanvasを指定します。

下記のように要素を指定して設定する事も出来るみたいです。

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

動作テストしたんですが、ちょっとうまく動かなかったので後で再度検証します。ライセンスはMIT。

pagemapOn Github

Shaai

Shaaiは既存コンテンツに統合可能なOSSのブログシステムフレームワークです。JS製、管理画面もありました。

プラグイン式に既存のWebサイトやアプリ等と統合し、ブログを構築できるのだそう。静的CMSなんかと相性良いかもしれませんね。

ドキュメントも見たかったんですが、一昨日に見れたのが本記事を執筆してる現在は動いてない様です。

ひとまずメモだけ。ライセンスはMITとの事です。

Shaai

Chakra UI

Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。

WAI-ARIAに準拠した設計となっており、アクセシビリティにも配慮されています。

コンポーネントはかなり大量にそろえられており、どんなアプリケーションでも概ね必要になるものは揃えられている印象でした。命名規則も分かりやすくて個人的に好みでした。

覚えておくと重宝しそうです。ライセンスはMIT。（Githubに明記ありませんがドキュメント下部に記載されていました）

Chakra UI

debugCSS.js

debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。

何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。

オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。

コード

var selector = document.querySelectorAll("*");

セレクタはデフォルトでは全部指定されています

else if (typeof options.selector === "undefined") {
        var selector = document.querySelectorAll(`*:not(${options.not}) > *`);
    }

オプション設定されたときは:notを付けて対象外にする

   function randomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = "#";
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

カラーコードをランダムで生成する

   selector.forEach(function (el) {
        el.style.outline = `1px solid ${randomColor()}`;
    });

アウトラインを加える

<script src="https://cdn.jsdelivr.net/gh/tunguskha/debugCSS@latest/src/debugcss.min.js"></script>

CDNもあります。

debugCSS({});

除外する要素が無いなら初期化すればいいだけです

と、簡単なものなので動かない環境もあると思います。そもそもDevtools等を普段から使用しているならあまり必要はないかもしれません。不要な方には不要でしょうが必要なケースも個人的には無くはないので備忘録として。

debugCSS.js

React Rainbow

React RainbowはReact.jsによるアプリケーション開発用のコンポーネントのコレクションです

レイアウトに関するコンポーネントは勿論、チャートやフォーム、アバター、マップやカレンダーなどなど、アプリでよく使われるようなコンポーネントが60種以上と大量に用意されています。

他にも他言語化対応、アクセシビリティへの配慮なども勿論考えて設計されています。

React Rainbowを使ったサンプルアプリケーションも沢山公開されていますが、ダッシュボードやチャットなどアプリでよく見かけるコンテンツを概ねカバーできる程度には揃えられている印象でした。

他言語化も対応されているのでグローバル対応なアプリ開発を検討されている方は導入を検討されてみては。ライセンスはMITです。

React Rainbow

QuickJots

QuickJotsはオート保存機能が付いたシンプルなメモアプリです。Markdownとプレーンテキストの両ペインにそれぞれメモを残せます

左ペインはMarkdown、右ペインはプレーンテキストエリアで、記述と同時に内容が保存されます。

全て削除したい場合は下部のDeleteボタンを押せばいいだけ。ダークモードも付いています。

OSSとしてソースコードも公開されているし、この手のメモアプリの基本機能が揃っているので勉強用に良いかもしれません。ライセンスはMITです。

QuickJotsOn Github

Scene.js

Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです

CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数要素を同時に制御、アニメーションエフェクトを手軽に付与できるプリセットなどを特徴としています

アイデアと応用次第で高度なアニメーションコンテンツを実装する事が可能です

サンプル

このような高度なアニメーション（だと僕は思いましたが感覚は個人差あると思います）の実装をサポートしてくれます

<script src="http://daybrush.com/scenejs/release/latest/dist/scene.js"></script>

CDNも用意されています。ちょっと学習コストは高いですが、覚えればいろいろなアニメーションコンテンツが作れそうです

開発者は本家NAVERのフロントエンドエンジニアさんのようですね。ライセンスはMITとの事。

Scene.js

roughViz.js

roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです

他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです

実装方法も手軽で簡単、CSVにも対応しています

動作テスト

動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう

<script src="https://unpkg.com/rough-viz@1.0.4"></script>

↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね

 new roughViz.BarH(
  {
    element: '#vis0',
    title: "SNS foo bar",
    titleFontSize: '1.5rem',
    legend: false,
    margin: {top: 50, bottom: 100, left: 160, right: 0},
    data: {
      labels: ['Twitter', 'hatena', 'facebook', 'Instagram'],
      values: [8, 4, 6, 2]
    },
    xLabel: 'Time Owned (Years)',
    strokeWidth: 2,
    fillStyle: 'zigzag-line',
    highlight: 'red',
  }
);

↑ チャートの種類を決めて初期化、タイトルやフォントサイズ、ラベルや数値などのデータを入力します

  new roughViz.BarH(
    {
      element: '#vis1',
      titleFontSize: '1.5rem',
      data: 'foo.csv',
      color: 'tan',
      labels: 'name',
      values: 'health',
      title: "CSV example",
      roughness: 4,
    }
  );

↑ CSVにも対応しています

 <div id="vis0"></div>

↑ 空要素を用意すれば完成です。楽でいいですね

ライセンスはMITとの事（ライセンスファイルはありませんがGithubのReadmeの最下部に記載ありました）。日本語にすると手書き風フォントではなくなりますのでその辺は、必要に応じて便宜変更してください

roughViz.js

vue-interactive-paycard

vue-interactive-paycardはVue.jsを使ったクレジットカード情報入力フォームです。上は動作サンプルです

クレカのカード会社自動認識も可能で、スムーズでインタラクティブに動作します。カード情報は一部伏せられる親切設計です

よく見るUIですが、動きが好みでユーザーにも分かりやすい印象だったので備忘録。MITライセンスの元、ソースコードが公開されています

vue-interactive-paycard

Lite YouTube Embed

Lite YouTube EmbedはYoutubeのembed表示を通常よりも高速にレンダリングするためのスクリプトです。上は動作サンプルです。待機時間なく動画サムネイルが表示されているのが確認できると思います

計測したところ、224倍速かったらしいです。とまぁ、聞こえはいいですが先にAPIでサムネを表示、ユーザーがクリックしたらiframeを呼び出す、というものみたいですね。それ以外にも負荷を減らすための工夫が施されているみたいです

結局同じじゃないかと感じる方もいるかもしれませんが、体感として表示されずグルグルが続いている状態より、サムネだけでも先に表示されている方が心理ストレスは圧倒的に軽いと思います。コード自体はシンプルなアイデアですが、施しておけば離脱率に良い影響を与えるかもしれませんね。

Lite YouTube Embed

Creepyface

Creepyfaceはマウスポインタに合わせて画像を変更できるスクリプトです
※ダミー画像サービスを利用しており、複数読み込んでいる為、動作するまで時間かかります

不気味な顔、というスクリプトの名前通り、顔写真を使う事を想定して作られており、マウスを画像内の人物が追いかけるようなコンテンツを作る事が出来ます

さまざまな場所を見ている顔写真を用意できませんでしたので画像が変わるだけの動作サンプルを用意しました。実際に想定された動きを見たい場合は本スクリプトのWebサイトでご確認下さい

使い方

僕はWebカメラを使わないのでこんな表示ですが、スクリプトサイトでは各方向の写真を撮る事が出来ます

使い方は非常に簡単、スクリプトを読み込んで画像タグに指定のカスタムデータ属性と該当の画像を設定するだけです

<script src="https://creepyface.io/creepyface.js"></script>

スクリプト読み込み。依存ライブラリはありませんので単体で動作します

<img src="def.jpg"
data-creepyface
data-src-hover="hover.jpg"
data-src-look-0="01.jpg"
data-src-look-45="02.jpg"
data-src-look-90="03.jpg"
data-src-look-135="04.jpg"
data-src-look-180="05.jpg"
data-src-look-225="06.jpg"
data-src-look-270="07.jpg"
data-src-look-315="08.jpg"
/>

説明は不要な気がしますが、ご想像通り各方向の角度がカスタムデータ属性の名前になっています

MITライセンスのもと、OSSとして公開されています

Creepyface

Flowy

Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します

上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます

基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです

example

var spacing_x = 40;
var spacing_y = 100;
// 初期化
flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y);

初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています

function snapping(drag) {
//例：ドラッグするブロックを設定
}

機能やブロックの内容を設定します

   $("#remove").on("click", function() {
        flowy.deleteBlocks();
    });

ブロック消去も忘れずに設定してくださいね

flowy.output();
JSON.stringify(flowy.output());

フローチャートのデータはJSONで出力できるみたいです

複雑さもなく使いやすそうな印象でした。ライセンスはMITとの事です

FlowyOn Github

Peekobot

Peekobotはシンプルで扱いやすい選択式チャットボットフレームワークです。上サンプルのようなチャットボットライクなコンテンツを手軽に実装する事ができます
※サンプルはCodepenで作ったのでURLに遷移しません

非依存型のバニラなスクリプトで、サイズも非圧縮で2kbほど、行数にして100行ほどと非常に軽量です

Webアプリ等なら簡単なチュートリアル代わりにもなるかもしれませんね。あるいは階層の深いWebサイト等でユーザーの求めるゴールの場所を伝えるのに役立ちそうです

使用例

使用例です。まず先にチャットの内容を設定しておきます

const chat = {
	1: {
		text: "こんにちは！お困りですか？",
		options: [
			{
				text: "なにこれ？",
				next: 2
			}
		]
	},
	2: {
		text: "Peekobotというスクリプトを紹介する記事です。Peekobotはシンプルな選択式チャットボットフレームワークです",
		next: 3
	},
	3: {
		text:
			"ユーザーに選択してもらう形で成り立つ対話コンテンツで、目的の場所への誘導を促します",
		options: [
			{
				text: "よくわかった！",
				next: 4
			},
			{
				text: "ちょっと何言ってるか分からない",
				next: 5
			}
		]
	},
	4: {
		text:
			"簡単なものなので質問も簡単なものくらいしか出来ません。詳しくはGithubをご覧ください",
		next: 7
	},
	5: {
		text: "サンドイッチマン好きですか？",
		next: 6
	},
	6: {
		text: "サンドイッチマンの動画を紹介しますね",
		options: [
			{
				text: "サンドの公式Youtubeへどうぞ！",
				url:
					"https://www.youtube.com/playlist?list=PLe8FGQbLGisnnab5M-2o88p4SAKPVb1RV"
			}
		]
	},
	7: {
		text: "ライセンスはMIT。非依存で単体で動作しますよ",
		options: [
			{
				text: "GitHubへ",
				url: "https://github.com/peekobot/peekobot"
			}
		]
	}
};

なんとなくわかると思いますが、数字でチャットを管理、optionsで選択肢を作って行きます

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

そのあとでpeekobotを読み込めば準備完了です

<div id="peekobot-container">
        <div id="peekobot"></div>
    </div>

後は空要素を用意すれば完成します

    <style>
        :root {
            --peekobot-height: 80vh;
            --peekobot-avatar: url();
        }
    </style>
    <link rel="stylesheet" href="peekobot.css">

チャットの高さやアバターはCSS変数で定義されていますので必要に応じて画像のパスなどを設定してください

ライセンスはMITとの事です

Peekobot