座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...
Resource - JavaScript
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」
femtoJS femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き...
Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」
viewRecorder viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低...
JavaScriptでロングタップイベントを実装する・「long-press-event」
long-press-event long-press-eventはスマホ等の長押しイベントを実装するJSライブラリです。シンプルな作りで、非常に軽量で非依存型となっています。要素を長押しすると、data-editing="tru...
OSSのJavaScript製スプレッドシート・「x-spreadsheet」
x-spreadsheet x-spreadsheetはOSSのJS製スプレッドシートWebアプリです。canvasが用いられているのにはDOMレンダリングよりもパフォーマンスが期待できるのとコードを書くのが簡単だからだそうです（HN...
モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」
Undernet Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...
スマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプト・「Shiny」
Shiny Shinyはスマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプトです。モバイルデバイスで加速度センサーの値を取得し、コンテンツにリフレクションエフェクトを付与する、というもの。上gifはデスクトップブラウザのシ...
three.jsよりも軽量なJavaScript 3Dライブラリ・「Shree.js」
Shree.js Shree.jsは3D描画ライブラリの代表ともいえるthree.jsよりも軽量な3Dライブラリです。豊かな機能性の代償にサイズが大きくなりがちですが、もう少し機能を抑えても良いので軽くしてほしい、というニーズは少なく...
Webサイトに訪問したユーザーの行動を記録し、再生できるライブラリ・「rrweb」
rrweb rrwebはWebサイトに訪問したユーザーの行動を記録、再生する為のWebセッションリプレイライブラリです。主に行動分析やバグの再現によるフィードバック向上、Webサイト上におけるユーザーとの対話(チャット等)の記録などを...
任意のコンテンツを他言語に対応するための軽量なスクリプト・「Translater.JS」
Translater.JS See the Pen WYJevW by kachibito (@kachibito) on CodePen. Translater.JSはWebページ内の任意のコンテンツを他言語対応にするためのライブ...
ドラッグ&ドロップでWebページを作成できるスクリプト・「VvvebJs」
VvvebJs VvvebJsはWebページをD&Dで作成できるスクリプトです。jQueryに依存、bootstrap4をベースとしています。パーツやコンポーネント等を組み合わせて、コードを書かずにWebサイトを作成できる、というよく...
モバイルフレンドリーで軽量、高速なコンテンツスライダーを実装できるスクリプト・「Glider.js」
Glider.js Glider.jsはモバイルフレンドリーなコンテンツスライダーを実装できる軽量で高速なスクリプトです。使い方も簡単で動作も軽量(圧縮版で2.5kbほど)、マークアップもシンプルな状態を保てますので使い勝手も良い印象...
軽量で使いやすい非依存のオートコンプリートライブラリ・「autoComplete.js」
autoComplete.js autoComplete.jsはinput要素で自動補完を実装するためのシンプルなスクリプトです。非依存で軽量、高速なのが特徴みたいです。自動補完用のリストも簡単に作れますので個人的にも扱いやすそうとい...
レスポンシブなWebページを簡単に作成できるWebページビルダーを作るためのスクリプト・「GrapesJS」
GrapesJS GrapesJSはWebページを簡単な操作で作成できるWebページビルダーを構築する為のスクリプトです。CMS等に内蔵させて管理画面内で動作させるのが主な目的のようです。以前からありましたが、非依存型になる等かなり改...
ページのスクロールに応じて任意の要素にアニメーションエフェクトを付与できる非依存の軽量ライブラリ・「ScrollOut」
ScrollOut See the Pen Cascading text effects w/ Splitting + ScrollOut ✍️🤓 by kachibito (@kachibito) on CodePen. Scro...
シンプルなbefore/afterコンテンツを作成できるスクリプト・「beerslider」
beerslider beersliderは上記のようなbefore/afterコンテンツを作成できるスクリプトです。他スクリプトに依存せず、単体で動作しますが、jQueryやZeptoとの併用も可能です。25kbほどの軽サイズで扱い...
非依存型のミニマルなプレゼンテーションライブラリ・「presentr」
presentr presentrは他ライブラリに依存せず単体で動作するミニマルなプレゼンライブラリです。圧縮版で1.8kbほどと軽量でシンプル、BootstrapやVueとの併用などにも対応できるそうです。近年ではさほど高い需要は無...
ミニマルなスタイルのHTML5製ミュージックプレイヤー・「cPlayer」
cPlayer cPlayerはHTML5製のミニマルなミュージックプレイヤーライブラリです。上図のように省スペースでミニマルなスタイルのプレイヤーを実装できる、というもので見た目のシンプルさとは異なり、リピート機能やプレイリスト、連...
読み込むだけでMarkdownでWebページを作成できるようにするスクリプト・「md-page」
md-page See the Pen mzwQeO by kachibito (@kachibito) on CodePen. md-pageは読み込むだけでMarkdown記法でWebサイトを作成できるスクリプトです。上サンプル...
音に合わせて要素をアニメーションさせるスクリプト・「Rythm.js」
Rythm.js Rythm.jsは音に合わせて任意の要素をアニメーションさせるためのスクリプトです。動作や色の変化など、要素に対して様々なエフェクトを、音源に応じて変化させることが出来る、というもの。エフェクトはたくさん用意されてい...
スクロールアニメーションを実装できる超軽量且つ非依存のライブラリ・「Sal.js」
Sal.js Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデー...
要素にYoutubeの動画IDを含めるだけでポップアップ再生できるようにするスクリプト・「GRT Youtube Popup」
GRT Youtube Popup GRT Youtube Popupは任意のHTML要素に動画IDを含めるだけでポップアップ再生できるようにするスクリプトです。jQueryに依存します。下記のような書き方で上デモのようにポップアップ...