Clik here to view.
映画向けに作られたオープンソースのメディアプレーヤー・「Moovie.js」
Moovie.js Moovie.jsは映画向けに作られたオープンソースのメディアプレーヤーです。映画向けとありますが基本的にはどの内容の動画でも問題なく動作します。 基本的なメディアプレーヤーの機能に加えて.vttや.srtなどの字幕サポートや字幕の他言語化サポートなどの機能がビルトインされています。 他ライブラリに依存せず単体で動作します。以下は動作サンプルです Ads See the Pen...
View ArticleClik here to view.
任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリ・「party.js」
party.js party.jsは任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリです。 導入も操作も簡単で、利用するに特に困る事も無さそうなので覚えておこうかなと思います。 以下動作サンプルです。 Ads See the Pen NWdOajG by kachibito (@kachibito) on CodePen....
View ArticleClik here to view.
チャット風のフォームを実装できるスクリプト・「chatty-form」
chatty-form chatty-formはチャット風のフォームを実装できるスクリプトです。React向けに設計されています。かなり昔にChattyというjQueryのプラグインがありましたが同じような感じのものです。 質問に対して回答を入力すると、次の質問がチャットのUIで表示される、というもの。扱いもシンプルで使いやすそうでした。 <ChattyForm...
View Article軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリ・「WinBox.js」
WinBox.js See the Pen GRrzXoo by kachibito (@kachibito) on CodePen. WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリです。 クリックで開かせることも可能ですが、今回は既に開いた状態のサンプルを用意しました。 Ads <script src="winbox.bundle.js"...
View ArticleClik here to view.
任意のWebサイトにコードエディタを実装できるスクリプト・「Copenhagen Editor」
Copenhagen Editor Copenhagen Editorは任意のWebサイトにコードエディタを実装できるスクリプトです。 highlight.jsとfeather iconsが内蔵されていますが、その他のライブラリには依存しません。 シンタックスハイライトに加えてコード入力補完やマルチフォーカスもサポート等もサポートされています。 Ads <link...
View Articleスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」
animon See the Pen RwpWBqd by kachibito (@kachibito) on CodePen. animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 Ads <link...
View ArticleClik here to view.
cannon.jsベースの軽量なJavaScript製3D物理エンジン・「cannon-es」
cannon-es cannon-esはWeb用の軽量なJavaScript製3D物理エンジンです。three.jsのシンプルなAPIをインスパイアしてるそうです。 開発の止まってしまったcannon.jsをフォークし、開発継続しているみたいですね。 例えば重力設定なら以下のように書けばいいみたいです。 const world = new CANNON.World({ gravity: new...
View ArticleClik here to view.
管理画面テンプレートも用意されたオープンソースのVue.js向けUIフレームワーク・「Vuestic UI」
Vuestic UI Vuestic UIはオープンソースのVue.js向けUIフレームワークです。Vue 3に対応しており多数コンポーネントに加えて管理画面テンプレートも用意されています。...
View ArticleClik here to view.
任意のテキストとカラーパレットからシンプルなSVGアバター等を生成するReactライブラリ・「Boring Avatars」
Boring Avatars Boring Avatarsは任意のテキストとカラーパレットからシンプルなSVGアバター等を生成するReactライブラリです。...
View ArticleClik here to view.
シンプルで汎用的なアバターを生成するオープンソースのReactライブラリ・「react-nice-avatar」
react-nice-avatar react-nice-avatarはシンプルで汎用的なアバターを生成するオープンソースのReactライブラリです。 性別や表情、髪型やその色、服や肌の色、耳や鼻のサイズなど顔の各パーツや背景等を組み合わせてアバターを生成できる、というもの。...
View ArticleClik here to view.
JavaScriptを使用しないシンプルで高速なWebページを作れるOSS・「imml」
imml immlはシンプルで高速なJS不使用のWebページを作れるOSSです。単純にMarkdownライクな記法で書いたものをHTMLでエクスポート、というもの。 名前のimmlはindented markdown markup languageの頭文字をとったものだそうで、ミニマルで超高速なWebページを作成できるシンプルな静的サイトジェネレーターとして機能します。...
View ArticleClik here to view.
TyporaにインスパイアされたオープンスースのWYSIWYG markdownエディター・「Milkdown」
Milkdown MilkdownはTyporaにインスパイアされたオープンスースのWYSIWYG markdownエディターです。 リッチテキストエディタにはprosemirrorが、パーサにはmarkdown-itが採用、ビルトインされており、Typoraのようなシンプルで直感的なUIを提供してくれます。...
View ArticleClik here to view.
Webインタビュー向けに作られた1人対1人用ビデオチャットツール・「I-Meet」
I-Meet I-MeetはWebインタビュー向けに作られた1人対1人用ビデオチャットツールです。ライセンスの明記がありませんがGithubにてソースコードも公開されています。 よくあるビデオチャットを1対1タイプにし、ビデオチャットをしながら内容などをメモできるようにホワイトボード機能を搭載。ノート替わりに利用、PDFなどでDL出来るようになっています。...
View ArticleClik here to view.
シンプルな2ペインのReact製Markdownエディター・「react-md-editor」
react-md-editor react-md-editorはシンプルで使いやすい2ペインのReact製Markdownエディターです。従来品同様に記述エリアとプレビューエリアに分かれており、即反映されるようになっています。...
View ArticleClik here to view.
スプレッドシートライクな表計算ツールを提供するJavascriptライブラリ・「xcell」
xcell xcellはスプレッドシートライクな、リアクティブな表計算ツールを提供するJavascriptライブラリです。 例えば通常は以下のようになりますよね。 var b = 1, c = 2 var a = b + c //aは3 b = 42 alert("aは: " + a) // bを42にしてもaは44にはならず3のまま xcellでは以下のように計算する事が出来ます。...
View ArticleClik here to view.
Tailwind.cssのユーティリティクラスをBootstrapやBlumaなど他のCSSフレームワークで使えるようにする拡張スクリプト・「Foxtail」
Foxtail Foxtailは、読み込むだけで他のCSSフレームワークでTailwind.cssのユーティリティクラスを使えるようにするCSSフレームワーク拡張スクリプトです。...
View ArticleClik here to view.
ブラウザで使える超シンプルなオープンソースのコードエディター・「Smart Text Editor」
Smart Text Editor Smart Text Editorはブラウザで使える超シンプルなオープンソースのコードエディターです。ブラウザとキーボード操作だけで使えるよう設計されており、JavaScriptで書かれています。...
View ArticleClik here to view.
画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプト・「tobii」
tobii tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。 任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能で、グループ化も出来ます。グループ化した際はスワイプにも対応しています。 以下動作サンプルを作りました。 Ads See the Pen by kachibito...
View ArticleClik here to view.
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」
DFlex DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web...
View ArticleClik here to view.
Webサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツール・「Sa11y」
Sa11y Sa11yはWebサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツールです。 下記のコードを挿入する事でWebページのアクセシビリティチェックを行う事が出来ます。 <script...
View Article