任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリ・「party.js」 party.js party.jsは任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリです。 導入も操作も簡単で、利用するに特に困る事も無さそうなので覚えておこうかなと思います。 以下動作サン...2021.04.21
映画向けに作られたオープンソースのメディアプレーヤー・「Moovie.js」 Moovie.js Moovie.jsは映画向けに作られたオープンソースのメディアプレーヤーです。映画向けとありますが基本的にはどの内容の動画でも問題なく動作します。 基本的なメディアプレーヤーの機能に加えて.vttや.srtな...2021.04.15
軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリ・「tsParticles」 tsParticles See the Pen tsParticles - Monocromatic confetti explosions by Matteo Bruni (@matteobruni) on CodePen...2021.04.07
Vue.jsで作られた、パーツを組み合わせて作れるアバター作成アプリ・「Avatar Maker」 Avatar Maker Avatar MakerはVue.jsで作られた、パーツを組み合わせて作れるアバター作成アプリです。 任意の箇所から好みのパーツを選んで組み合わせてアバターを作成出来るよくあるやつです。素材やスタイルを...2021.03.20
仮想キーボードを実装する非依存で軽量なJavaScriptライブラリ・「Simple-keyboard」 Simple-keyboard Simple-keyboardは仮想キーボードを実装する非依存で軽量なJavaScriptライブラリです。PCのキーボードをモニターに表示してマウスでキーを選択できる、というもの。 スパイウェア対...2021.03.04
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」 pace.js See the Pen rNWwwap by kachibito (@kachibito) on CodePen. pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるス...2021.02.19
シンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキット・「bangle.dev」 bangle.dev bangle.devはシンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキットです。 基本的にはReactで使う事を想定した設計で今後はVueもサポートする予定との事です。...2021.02.15
すごくシンプルで使いやすい非依存型の画像拡大鏡スクリプト・「js-image-zoom」 js-image-zoom See the Pen PobWowK by kachibito (@kachibito) on CodePen. js-image-zoomはシンプルで使いやすい非依存型の画像拡大鏡スクリ...2021.02.13
ダミーの画像やテキストを提供するweb components・「</placeholders>」 </placeholders> See the Pen dyOXOrR by kachibito (@kachibito) on CodePen. </placeholders>はダミーの画像や...2021.02.09
セキュアでシンプルなオープンソースのパスワードジェネレーター・「passwrd.in」 passwrd.in passwrd.inはセキュアでシンプルなオープンソースのパスワードジェネレーターです。Vueで書かれており、サーバーには一切データは送信されず、ブラウザのみで処理されます。 パスワードは数字や記号を含めた...2021.02.05
タッチデバイスにも対応した、要素を複数選択できるようにするスクリプト・「Selecto.js」 Selecto.js Selecto.jsタッチデバイスにも対応した、要素を複数選択できるようにするスクリプトです。マウスによるドラッグだけでなくスマフォ等のタッチデバイスにも対応しています。 他ライブラリに依存せずVanill...2021.01.25
軽量で拡張的な非依存のカルーセルライブラリ・「Tiny-Swiper」 Tiny-Swiper See the Pen VwKWMym by kachibito (@kachibito) on CodePen. Tiny-Swiperは軽量で拡張的な非依存のカルーセルライブラリです。他ライ...2020.12.19
カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」 EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...2020.12.12
CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」 CSS clip-path Editor See the Pen CSS clip-path Editor by Mads Stoumann (@stoumann) on CodePen. CSS clip-pat...2020.12.11
ブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSS・「PRESENTA Lib」 PRESENTA Lib PRESENTA LibはブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSSです。 1枚のファイルで作成可能で書き方もシンプルで使いやすそうです。また、Markdown...2020.12.10
Three.jsを使ってマネキンに任意のポーズで表現できるスクリプト・「mannequin.js」 mannequin.js See the Pen rNMLqKv by kachibito (@kachibito) on CodePen. mannequin.jsはThree.jsを使って3Dマネキンに任意のポーズ...2020.12.09
Reactベースのシンプルでタッチフレンドリーな日付ピッカー・「React Nice Dates」 React Nice Dates React Nice DatesはReactベースのシンプルでタッチフレンドリーな日付ピッカーです。 タッチデバイスで指でタップしやすいように日付同士は間隔をあけられていたり、上下にドラッグする...2020.10.31
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」 dragmove.js See the Pen WNxjgOe by kachibito (@kachibito) on CodePen. dragmove.jsは任意の要素をドラッグ移動の操作が出来るようにする軽量ス...2020.10.28
カスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤー・「vime.js」 vime.js vime.jsはカスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤーです。 基本的には単体で動作しますが、ReactやVue、Svelteなど他フレームワークもサポートされています。 動画...2020.10.15
タッチデバイスフレンドリーなブロックレベルのコンテンツエディターライブラリ・「SmartBlock」 SmartBlock See the Pen SmartBlock Demo by kachibito (@kachibito) on CodePen. SmartBlockはッチデバイスフレンドリーなブロックレベ...2020.10.09
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」 Day.js Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使って...2020.10.05
ダウンロードもユーザー登録も不要で使えるオープンソースのグループビデオチャットツール・「Talk」 Talk Talkはダウンロードもユーザー登録も不要で使えるオープンソースのグループビデオチャットツールです。JavaScriptで書かれています。 アクセスするとすぐにランダムで作られるURLにリダイレクトされるのでそのURL...2020.09.29