HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」
DirtyMarkup DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能...
Resource - JavaScript
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」
jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」
Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...
豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」
One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...
コメントシステムを実装できるオープンソースのDisqusクローン・「schnack.js」
schnack.js schnack.jsはコメントシステムを静的なWebサイトにも導入できるOSSのDisqusクローンです。サーバー要件はNode6以上とSQLiteとのこと。同じようにGithubやTwitter等のアカウントで...
jsfiddleライクなエディタやカラーパレット作成ツール等を公開する・「Liveweave.com」
Liveweave.com Liveweave.comはjsfiddleライクなHTML/CSS/JavaScript実行ツールやカラーパレットを生成してSVGやPNGでダウンロードできるツール、CSSツールやベクターツールなどを公開...
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」
Froala Design Blocks Froala Design BlocksはBootstrapで使えるフォームや地図コンテンツ、フッターや「値段表」、「製品詳細」のようなよく見かけるコンテンツなどをブロック単位にして170種ほ...
編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」
jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」
file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...
anime.jsでテキストにアニメーションエフェクトを付与するコードをまとめたサンプル集・「MOVING LETTERS」
MOVING LETTERS MOVING LETTERSはanime.jsでテキストにアニメーションエフェクトを付与するスクリプトをまとめたコードサンプル集です。各エフェクトはクリックすればコードが表示されるようになっています。いい...
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」
bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...
CSVやプレーンテキストのデータをJSONやMarkdown等に変換できるOSSなコンバーター・「Mr. Data Converter」
Mr. Data Converter Mr. Data ConverterはCSVやプレンテキスト（タブ区切りしたもの）をJSONやMarkdown、PHPやRubyなどの各言語での配列等に変換してくれるコンバーターです。オープンソー...
一定の幅にテキストをフィットさせてくれるスクリプト・「Fitty」
Fitty Fittyは一定の幅にテキストをフィットさせてくれるスクリプトです。先行スクリプトとしてFitText.jsがありますが、Fittyは軽量で非依存型というメリットがあります。それぞれ特徴は多少異なるので用途次第で使い分ける...
Vue.jsのコンポーネントフレームワーク・「Vuetify」
Vuetify VuetifyはVue.jsのコンポーネントフレームワークです。リユーサブル且つクリーンな設計で使いやすさを重視した印象です。スタイルはマテリアルデザインパターンを導入。沢山のコンポーネントが用意されているので不便はし...
現在の時刻に応じて、時刻に見合ったさまざまなメッセージを表示出来るスクリプト・「tidyTime.js」
tidyTime.js tidyTime.jsは現在の時刻に応じて、その時刻に見合ったメッセージを表示できるスクリプトです。例えば11時まであと15分です、とか朝の9時丁度になりました、とか22時を7分過ぎました、とか。また、前後にメ...
国産のオープンソースなメモアプリ、Boostnoteのスマフォアプリ版・「Boostnote mobile」
Boostnote mobile Boostnote mobileは以前ご紹介したプログラマー向けのOSSなメモアプリのスマフォ版です。こちらも同様に、Markdown記法でメモを取ることが出来るようになっています。React Nat...
Vue.jsベースのフロントエンドUIフレームワーク・「AT UI」
AT UI AT UIはVue.jsベースのフロントエンドなUIキットです。軽量でモジュラー形式のUIフレームワークだそう。ES2015/ES6サポート、npm+webpack+babelな開発ワークフロー等が特徴とのことです。ボタン...
Vue.jsに影響を受けたシンプルで軽量なライブラリ・「Moon」
Moon MoonはVue.jsにインスパイアされた軽量なJSライブラリです。高速でフレキシブル、学習コストも低く、シンプルで軽量ながら高いパフォーマンスと、直感的でわかりやすいAPIが特徴とのこと。vueがmin+gzipで20kb...
SVGで波状のグラデーションを生成するジェネレーター・「SVG Gradient Wave Generator」
SVG Gradient Wave Generator See the Pen SVG Gradient Wave Generator by kachibito (@kachibito) on CodePen. SVG Gradie...
jQueryライクに使えるシンプルで軽量なDOM操作ライブラリ・「stuQuery」
stuQuery stuQueryはjQueryライクに使えるシンプルで軽量なDOM操作用ライブラリです。DOM操作の為だけにjQueryを初め、サイズの大きいライブラリを使うのに抵抗があったため作成したそうです。コンフリクトを避ける...
必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ツール・「Aperitif」
Aperitif Aperitifはプロジェクトに必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ジェネレーターです。使い方はまず最初に配置したいエリアをクリックしてから配置するコンテナ...