Resource - JavaScript

オープンソースのアバターイラスト作成ジェネレーター・「Avataaars Generator」

Avataaars Generator Avataaars Generatorはオープンソースのアバターイラスト作成ジェネレーターです。なんとなくよく利用されてるっぽいスタイルのアバターイラストを作成し、ダウンロードできる、というもの...

スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」

lax.js lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけの...

座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」

maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...
Ads

jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」

femtoJS femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き...

Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」

viewRecorder viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低...

JavaScriptで配列のメソッドを対話式に調べられる・「JavaScript Array Explorer」

JavaScript Array Explorer JavaScript Array ExplorerはJavaScriptにおける配列のメソッドを対話式に調べられるOSSです。以前ご紹介したGit ExplorerのJavaScri...

JavaScriptでロングタップイベントを実装する・「long-press-event」

long-press-event long-press-eventはスマホ等の長押しイベントを実装するJSライブラリです。シンプルな作りで、非常に軽量で非依存型となっています。要素を長押しすると、data-editing="tru...

オープンソースで公開されている、大量のコンポーネントを含んだBootstrapベースの管理画面テンプレート・「STISLA」

STISLA STISLAはオープンソースのBootstrapベースの管理画面テンプレートです。大量のコンポーネントを含んでおり、ほとんどの需要に応えられるようになっています。また、インタラクティブなチャートやデータテーブルなどの為の...

モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」

Undernet Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...

Vue.jsベースのinstagramクローン・「Vuestagram」

Vuestagram VuestagramはVue.jsをベースにして作られたinstagramクローンです。クローンと言っても完全再現ではありませんが、写真にフィルター、アップロード、Like等、instagramの中心的な機能は備...

スマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプト・「Shiny」

Shiny Shinyはスマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプトです。モバイルデバイスで加速度センサーの値を取得し、コンテンツにリフレクションエフェクトを付与する、というもの。上gifはデスクトップブラウザのシ...

オープンソースのコラボレーションメモツール・「wolkenkit-boards」

wolkenkit-boards wolkenkit-boardsはオープンソースのコラボレーションメモツールです。複数ユーザー間で付箋ライクなメモコンテンツを共同管理できる、というもの。UIは少し異なりますがTrelloライクな使い...

three.jsよりも軽量なJavaScript 3Dライブラリ・「Shree.js」

Shree.js Shree.jsは3D描画ライブラリの代表ともいえるthree.jsよりも軽量な3Dライブラリです。豊かな機能性の代償にサイズが大きくなりがちですが、もう少し機能を抑えても良いので軽くしてほしい、というニーズは少なく...

Webサイトに訪問したユーザーの行動を記録し、再生できるライブラリ・「rrweb」

rrweb rrwebはWebサイトに訪問したユーザーの行動を記録、再生する為のWebセッションリプレイライブラリです。主に行動分析やバグの再現によるフィードバック向上、Webサイト上におけるユーザーとの対話(チャット等)の記録などを...

Webサイト制作におけるワークフローを邪魔しない超シンプルなCSSデバッグ・「DebuCSSer」

DebuCSSer See the Pen DebuCSSer by Lucagez (@lucagez) on CodePen. DebuCSSerは超シンプルなCSSデバッグツールです。Webサイト制作時のワークフローを邪魔しな...

SRPGのようなターン制のシミュレーションゲームフレームワーク・「Zemeroth」

Zemeroth ZemerothはSRPGのようなターン制のシミュレーションゲームを構築する為のフレームワークです。Rustで書かれているそう。FEシリーズとかディスガイアのようにマスを進めて相手の陣地を得る、みたいなもの。マスはヘ...

Markdownで書けるシンプルなナレッジベース構築の為のソフトウェア・「Raneto」

Raneto RanetoはMarkdownで書けるシンプルなナレッジベースです。軽量で高速、DB不要で動作します。レイアウトはBootstrapベースでRWDにも対応、Highlight.jsによるハイライト、Lunrで全文検索に対...

任意のコンテンツを他言語に対応するための軽量なスクリプト・「Translater.JS」

Translater.JS See the Pen WYJevW by kachibito (@kachibito) on CodePen. Translater.JSはWebページ内の任意のコンテンツを他言語対応にするためのライブ...

モバイルフレンドリーで軽量、高速なコンテンツスライダーを実装できるスクリプト・「Glider.js」

Glider.js Glider.jsはモバイルフレンドリーなコンテンツスライダーを実装できる軽量で高速なスクリプトです。使い方も簡単で動作も軽量(圧縮版で2.5kbほど)、マークアップもシンプルな状態を保てますので使い勝手も良い印象...

軽量で使いやすい非依存のオートコンプリートライブラリ・「autoComplete.js」

autoComplete.js autoComplete.jsはinput要素で自動補完を実装するためのシンプルなスクリプトです。非依存で軽量、高速なのが特徴みたいです。自動補完用のリストも簡単に作れますので個人的にも扱いやすそうとい...

シンプルで見やすいBootstrapベースの管理画面テンプレート・「Lath」

Lath Lathはシンプルで美しく見やすいBootstrapベースのadminテンプレートです。スタイルも完成されている印象で、プロジェクトのキックスタートに使って欲しいとの事で、管理画面のスタイリングをしなくても済ませられる、とい...

MediumやDropbox Paperなどのようなリッチテキストエディタを実装する為のフレームワーク・「Slate」

Slate Slateはリッチテキストエディタを作るためのフレームワークです。MediumやDropbox PaperやGoogle Docsといった、性質の異なる様々なリッチテキストエディタの構築をサポートしてくれます。Draft....
Ads