Resource - JavaScript

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

開発したHTML/CSS/JS製のWebアプリを公開したり利用できる・「Outpan」

Outpan OutpanはHTML/CSS/JSで開発したWebアプリを公開、利用できる開発者向けのWebアプリ公開プラットフォームです ユーザーは様々なWebアプリを検索したり利用でき、開発者は公開したWebアプリの人気に応...

ブラウザで契約書や納品書、請求書などの帳票を作成、PDFにしてダウンロードできるオープンソースソフトウェア・「ReportBro」

ReportBro ReportBroはブラウザで帳票を作成してPDFでダウンロードできるオープンソースのソフトウェアです 上図のように右ペインで各設定を行えば左ペインにプレビューされます。エクセルのように計算する事も可...

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

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

インタラクティブにアニメーションする背景を作成できるWebアプリ・「Naker.Back」

Naker.Back Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのと...

CSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリ・「Scene.js」

Scene.js Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数...

React.jsによるアプリケーション開発をサポートするコンポーネントのコレクション・「React Rainbow」

React Rainbow React RainbowはReact.jsによるアプリケーション開発用のコンポーネントのコレクションです レイアウトに関するコンポーネントは勿論、チャートやフォーム、アバター、マップやカレン...

CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」

debugCSS.js debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを...

React.jsによるアプリケーション開発の為のモジュール式UIコンポーネントライブラリ・「Chakra UI」

Chakra UI Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。 WAI-ARIAに準拠した...

既存のコンテンツに統合出来るオープンソースのブログシステムフレームワーク・「Shaai」

Shaai Shaaiは既存コンテンツに統合可能なOSSのブログシステムフレームワークです。JS製、管理画面もありました。 プラグイン式に既存のWebサイトやアプリ等と統合し、ブログを構築できるのだそう。静的CMSなんかと相性良...

Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」

pagemap See the Pen KKPqwER by kachibito (@kachibito) on CodePen. pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスク...

BootstrapベースでVueやReact、jQuery、Angularなど様々なライブラリに対応可能の、大量のコンポーネントを含んだダッシュボード/管理画面テンプレート・「Airframe」

Airframe AirframeはBootstrapベースのダッシュボードテンプレートです。BootstrapVueやng-bootstrapなどを使う事でVueやAngularなど様々なライブラリに対応できるとのことです。 ...

xkcdライクな手書き風のチャートライブラリ・「Chart.xkcd」

Chart.xkcd See the Pen chart.xkcd pie by timqian (@timqian) on CodePen. Chart.xkcdは手書き風のチャートを生成できるJavaScriptラ...

JavaScriptやCSSを書く感覚でクロスプラットフォームに対応できるデスクトップアプリを作るためのライブラリ・「NodeGUI」

NodeGUI NodeGUIはJSやCSSを書く感覚でデスクトップアプリを作成できるオープンソースのライブラリです。基本的にクロスプラットフォーム対応だそうです。 chromiumではなくQt5ベースとなっており、メモリとCP...

グラデーションにも対応できるJavaScriptカラーピッカー・「GPickr」

GPickr See the Pen KKPzPjr by kachibito (@kachibito) on CodePen. GPickrは単色だけでなく、CSSグラデーションにも対応できるカラーピッカーです。非依...

円型での切り取りも可能な画像クロップライブラリ・「Cropme」

Cropme CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を...

form要素を対話形式で作成できるスクリプト・「Conversational Form」

Conversational Form See the Pen Conversational Forms - native validation (v1.0.0 feature) by kachibito (@kachibi...

GoogleドキュメントでWebページを作成、公開できるOSS・「ImportDoc」

ImportDoc ImportDocはGoogleドキュメントで書いたコンテンツをそのままWebページとして公開できるようにするライブラリです。OSSとして公開されています。 Googleドキュメントで管理できるので簡易的...

ABC記譜法を自動で楽譜化、音源化したりダウンロード出来るようにするスクリプト・「abc.js」

abc.js abc.jsはABC記譜法を自動で楽譜化、その場で視聴したりMIDIファイルを生成してダウンロードできるようにするスクリプトです。 ABC記譜法は以下のようにプレーンテキストで楽譜を表現できるようにしたもの。 (...

オープンソースのシンプルでモダンなepubビューアスクリプト・「Foliate」

Foliate Foliateはオープンソースのシンプルでモダンなepubビューアスクリプトです。epub.jsがベースとなっているそうです。 ナビゲーションやスクロールバー設置、カスタムテーマ、注釈ツールやハイライトなど、ep...
Ads