GUIも備わったモーショングラフィックスの為のアニメーションJavaScriptライブラリ・「Theatre.js」
Theatre.js Theatre.jsはモーショングラフィックスの為のアニメーションJavaScriptライブラリです。GUIのエディターも備わってるそうです。 実際にビジュアルで動きを見ながら直感的な操作でアニメーションを...
Resource - フレームワーク
画像内に注釈を挿入するJavaScriptライブラリ・「marker.js」
marker.js marker.jsは画像内に任意の注釈を挿入するJSライブラリです。画像の中に任意のテキストやエリアの塗りつぶし、線引きなどを挿入できて装飾も可能となっています。 また、marker.js Liveという拡張...
アニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーター・「whatamesh」
whatamesh whatameshはアニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーターです。 2021年9月現在、Stripeのヘッダに使われているようなやつを作れる、みたいなアプリです。 ...
WebサイトやWebアプリ構築の為の次世代TypeScriptフレームワーク・「Factor.js」
Factor.js Factor.jsはWebサイトやWebアプリ構築の為の次世代TSフレームワークです。ブログやLP、JamStackアプリの作成等を容易に行えるよう設計されています。開発者はDarwinです。 プラグイン等に...
CSSファイルを読み込むだけで見た目を整えられるclass-lessなCSSフレームワーク・「AttriCSS」
AttriCSS See the Pen by kachibito (@kachibito) on CodePen. AttriCSSは読み込むだけで見た目を整えられるclass-lessなCSSフレーム...
Tailwind.cssで構築されたピクセルパーフェクトなモバイル向けUIコンポーネント集・「Tailwind Mobile」
Tailwind Mobile Tailwind MobileはTailwind.cssで構築されたピクセルパーフェクトなモバイル向けUIコンポーネント集です。 全てのコンポーネントには、公式のデザインガイドラインに基づいて作成...
Webページの大まかなスタイルをざっくり決めてCSSコードを発行できる・「SHAPER」
SHAPER SHAPERWebページの大まかなスタイルをざっくり決めてCSSコードを発行できるOSSです。 ツールバーでタイポグラフィ、テキストやユニット、ボタンなどのスペースサイズ、カラースキーム、角丸の有無に加えてダークモ...
リアルタイムコラボレーション機能を備えたオープンソースの地図アプリ・「Mapus」
Mapus Mapusはリアルタイムコラボレーション機能を備えたオープンソースの地図アプリです。複数人が同時進行で地図にマーキングしたり距離を測ったり検索したり施設を探したり線を引いたり絵を描いたり、といった事が可能です。地図データは...
複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」
Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...
Next.jsとTailwind.cssで作るブログの為のスターターキット・「Nextjs Blog Boilerplate」
Nextjs Blog Boilerplate Nextjs Blog BoilerplateはNext.jsとTailwind.cssで作るブログの為のスターターキットです。静的サイトジェネレーターとして機能します。 コンテン...
Webアプリ向けに開発されたReactベースのUIデザインシステム・「Welcome UI」
Welcome UI Welcome UIはWebアプリ向けに開発されたReactベースのUIデザインシステムです。reactをベースに、styled-components、styled-system、reakitなどが導入されていま...
Webサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツール・「Sa11y」
Sa11y Sa11yはWebサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツールです。 下記のコードを挿入する事でWebページのアクセシビリティチェックを行う事が出来ます。 ...
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」
DFlex DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要...
Tailwind.cssベースのオープンソースReact UIキット・「Windy」
Windy WindyはTailwind.cssベースのReact UIキットです。簡単で素早くWebサイトを作成えきてカスタマイズしやすいよう設計されたそうです。 各コンポーネントのスタイルは内部のデフォルトテーマでスタイリン...
画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプト・「tobii」
tobii tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。 任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能...
ブラウザで使える超シンプルなオープンソースのコードエディター・「Smart Text Editor」
Smart Text Editor Smart Text Editorはブラウザで使える超シンプルなオープンソースのコードエディターです。ブラウザとキーボード操作だけで使えるよう設計されており、JavaScriptで書かれています。 ...
Tailwind.cssのユーティリティクラスをBootstrapやBlumaなど他のCSSフレームワークで使えるようにする拡張スクリプト・「Foxtail」
Foxtail Foxtailは、読み込むだけで他のCSSフレームワークでTailwind.cssのユーティリティクラスを使えるようにするCSSフレームワーク拡張スクリプトです。 BootstrapやBluma、UIkitやFo...
オープンソースとして公開されているBootstrap向けのナレッジベース用テンプレート・「KnowledgeBase.dev」
KnowledgeBase.dev KnowledgeBase.devはオープンソースとして公開されているBootstrap向けのナレッジベース用テンプレートです。 トップページ以外に数ページ用意されており、最低限のナレッジベー...
スプレッドシートライクな表計算ツールを提供するJavascriptライブラリ・「xcell」
xcell xcellはスプレッドシートライクな、リアクティブな表計算ツールを提供するJavascriptライブラリです。 例えば通常は以下のようになりますよね。 xcellでは以下のように計算する事が出来ます。 ...
スピーディーなアプリケーション開発をサポートするReactコンポーネントライブラリ・「Elementz」
Elementz Elementzはスピーディーなアプリケーション開発をサポートするReactコンポーネントライブラリです。 基本的なコンポーネントの構成は従来のUIライブラリの類と似たようなものですが、Elementzでは他ラ...
シンプルな2ペインのReact製Markdownエディター・「react-md-editor」
react-md-editor react-md-editorはシンプルで使いやすい2ペインのReact製Markdownエディターです。従来品同様に記述エリアとプレビューエリアに分かれており、即反映されるようになっています。 ...
Webインタビュー向けに作られた1人対1人用ビデオチャットツール・「I-Meet」
I-Meet I-MeetはWebインタビュー向けに作られた1人対1人用ビデオチャットツールです。ライセンスの明記がありませんがGithubにてソースコードも公開されています。 よくあるビデオチャットを1対1タイプにし、ビデオチ...