Resource - JavaScript

CSSをJavaScript用に変換するシンプルなコンバーター・「CSS2JS」

CSS2JS CSS2JSはCSSをJavaScript用のコードに変換するシンプルなコンバーターです 特に解説不要のアプリなのでサンプルを使って簡単に。例えば以下のCSSを 以下のように変換します ...

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

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

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

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

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

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

ドラッグ&ドロップで作れるオープンソースのHTMLメールビルダー・「Mosaico」

Mosaico MosaicoはD&Dで作れるHTMLメールビルダーです。OSSとしてソースコードが公開されています 従来のこの手のアプリと同じ操作法で、ブロックを追加しながら編集し、HTMLメールを作る事が出来ます コー...

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

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

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

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

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

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

JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」

Web Projects With Vanilla JavaScript Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで...

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

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

シンプルで軽量なオープンソースの自己ホスト型アナリティクスツール・「Ackee」

Ackee Ackeeはシンプルで軽量な自己ホスト型のNode.jsベースのWebサイト分析ツールです。オープンソースとして公開されています インストールも簡単で必要なもののみを追跡するシンプル設計なのが特徴みたいです G...

手書き風のダイアグラムを作成出来るOSSのWebアプリ・「excalidraw」

excalidraw excalidrawは手書きライクなダイアグラムを直感的なUIで作成できるOSSのWebアプリです 上図のようなシンプルなダイアグラムを手書き風の背景、ボーダー、テキストで作成、ダウンロードできる、というも...

オープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプリ・「manifest」

manifest manifestはオープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプです グリッドがあるので綺麗にそろえられる、自動保存、メモをドラッグで移動、PWAになっているくらいしか機能はありま...

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としてダウンロードできるよ...

オープンなエデュケーションプラットフォームを構築できるOSS・「Openki」

Openki Openkiはオープンな教育プラットフォームを構築できるオープンソースのソフトウェアです ちょっとピンと来ない感じですが、基本的には教えてほしい人と教えたい人を結ぶコミュニティで、グループで勉強会、みたいなイベント...

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はシンプルで扱いやすい選択式チャットボットフレームワークです。上...

マウスポインタに合わせて画像を変えられるスクリプト・「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. ...
Ads