Resource - JavaScript

アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」

isocity isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそ...

任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」

cosha See the Pen zYGjrbq by kachibito (@kachibito) on CodePen. coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラ...

Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」

Edtr.io Edtr.ioはReactで書かれたオープンソースのWYSIWYGインラインエディターです mediumで採用されたエディターのようにコンテンツに直接編集を加えるタイプで、ブロックの追加やD&Dによる移動、複製な...
Ads

モスキート音を出すためのスクリプト・「Mosquito.js」

Mosquito.js Mosquito.jsはいわゆるモスキート音を鳴らせるスクリプトです。非依存なので単体で動作します 一昔前に、深夜の若者の騒音対策として公園などに導入されたものです(Wikipedia:モスキート音) ...

30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」

Uppload Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです 単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿...

ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」

Vanilla-DataTables See the Pen Vanilla DataTables by Karl Saunders (@Mobius1) on CodePen. Vanilla-DataTable...

非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」

DiagramFlowJS DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです 他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます ...

Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」

GuideChimp GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してあり...

軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」

DarkModeJS See the Pen VwLYLzd by kachibito (@kachibito) on CodePen. DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプ...

都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」

city-roads city-roadsは任意の都市名を入力すると、その都市内の道路だけを線画で抽出、色などを変更してSVGなどでダウンロードできる地図アプリです OSSとしてソースコードが公開されています。企業や店舗の地図作...

拡張も可能な、ドラッグ&ドロップで作るWebページビルダーを実装するためのフレームワーク・「craft.js」

craft.js craft.jsは拡張可能な、D&Dで作れるWebページビルダーJSフレームワークです。Reactが使われています ドラッグで要素等を配置しテキストや色を編集できるのは優れたUXを提供できる手段として現在でも高...

Vue.jsを使ったオープンソースのオンラインMarkdownエディタ・「Inko」

Inko InkoはVue.jsを使ったオープンソースのオンラインMarkdownエディタです Markdownエディタではよくある左右2ペインレイアウトで左がエディタ、右がプレビューエリアとなっています。書いたMarkdown...

MarkdownでLaTeXを使えるようにするスクリプト・「TeXMe」

TeXMe See the Pen rNazLQa by kachibito (@kachibito) on CodePen. TeXMeはMarkdownでLaTeXを使えるようにするスクリプトです。ちょっと語弊ある...

ブラウザで動作するピボットテーブルを実装するスクリプト・「WebDataRocks」

WebDataRocks See the Pen Dashboard with WebDataRocks & Google Charts (bar chart) by kachibito (@kachibito) o...

SVGをPDFに変換するJavaScriptライブラリ・「svg2pdf.js」

svg2pdf.js svg2pdf.jsはSVGをPDFに変換するJavaScriptライブラリです。基本的にはjsPDFと併用する事を想定しているみたいです 上の動作サンプルはSVGをPDFとしてダウンロードできるよ...

LEGO®ライクなグラフィックを描ける軽量なJavaScriptライブラリ・「Legra」

Legra LegraはLEGO®ぽいグラフィックを手軽に描ける軽量なJSライブラリです。Legraは「Lego® brick Graphics」を略したものだそうです canvasにLEGO®を並べたようなグラフィックで色など...

シンプルで扱いやすい、簡易的な選択式チャットボットフレームワーク・「Peekobot」

Peekobot See the Pen QWwLjJv by kachibito (@kachibito) on CodePen. Peekobotはシンプルで扱いやすい選択式チャットボットフレームワークです。上...

ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」

Flowy Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますの...

マウスポインタに合わせて画像を変えられるスクリプト・「Creepyface」

Creepyface See the Pen PoorKQe by kachibito (@kachibito) on CodePen. Creepyfaceはマウスポインタに合わせて画像を変更できるスクリプトです ...

Youtubeの埋め込みを高速レンダリングするスクリプト・「Lite YouTube Embed」

Lite YouTube Embed See the Pen dyyLzVd by kachibito (@kachibito) on CodePen. Lite YouTube EmbedはYoutubeのemb...

Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」

vue-interactive-paycard See the Pen Credit Card Form - VueJs by Muhammed Erdem (@JavaScriptJunkie) on CodePen. ...

手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」

roughViz.js roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使...
Ads