30行ほどのVanillaなスクリプトでExcelっぽいものを作る・「Tiny Excel-like app in vanilla JS」
Tiny Excel-like app in vanilla JS Tiny Excel-like app in vanilla JS。プレーンなスクリプト30行でExcelのような表計算が出来るシートを作成する、というもの。例えば=...
Resource - フレームワーク
Vanillaなスクリプトを沢山コレクション、紹介ししている・「Vanilla List」
Vanilla List Vanilla ListはプレーンなJavaScriptをコレクションしているWebサイトです。Github等で公開されている多様なバニラスクリプトを収集、紹介してくれています。それぞれのスクリプトは動作アン...
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」
Hover on Touch Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化...
複雑なtableでも対応できる、セルがどの列と行に属しているかをハイライトするスクリプト・「jquery-gettable」
jquery-gettable jquery-gettableはtableのセルがどの列と行にあるかをハイライトしてくれるスクリプトです。jQueryに依存しています。上図のようにセル上にマウスを持って行くと、そのセルが属する行と列が...
Bootstrapの代替として作られたコンパクトなCSSフレームワーク・「Cutestrap」
Cutestrap CutestrapはコンパクトなBootstrap代替CSSフレームワークです。肥大化したBootstrapをもっとコンパクトに、というニーズはよく見かけますので結構この手のCSSは出回っていますが、本フレームワー...
checkboxにアニメーションエフェクトを付与するCSS・「Checkbox.css」
Checkbox.css Checkbox.cssはcheckboxにアニメーションエフェクトを付与する為のスタイルシートです。上図のようにチェックを入れるとボックスがアクションを起こす、というもの。通常のWebサイトのお問い合せフォ...
HTMLで書いたtableのデータをプレーンテキストやCSV、XLSなどのフォーマットでエクスポート出来るスクリプト・「TableExport.js」
TableExport.js TableExport.jsはtableに書いたデータをCSVやxls、xlsx、プレーンテキスト等のフォーマットでエクスポート出来るようにするスクリプトです。jQueryとFileSaver.jsを使用...
レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」
Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...
jsfiddleのようなテストツールをオフラインでも利用出来るChromeエクステンション・「Web Maker」
Web Maker Web Makerはjsfiddleライクな実行テストツールを使えるようにするChromeエクステンションです。オフラインでも利用できるのが主な特徴のようです。jsfiddleライク、と言っても他ライブラリを手軽に...
Webサイトのテーマカラーをユーザーが選べるようにする為のスクリプト・「jquery Theme Switcher」
jquery Theme Switcher jquery Theme SwitcherはWebサイトのテーマカラーを閲覧しているユーザーが選択できるようにする為のスクリプトです。jQueryに依存しています。通常のWebサイトではあま...
複数選択可能なselect要素でoptionを選択しやすくするスクリプト・「PopSelect」
PopSelect PopSelectはselect要素でoptionを選択しやすいUIにする為のスクリプトです。jQueryに依存します。上図のように、select要素にフォーカスするとoption要素がポップアップするので選択すれ...
可愛らしいスタイルのタイムピッカーを実装出来るスクリプト・「timedropper」
timedropper timedropperは可愛らしいスタイルのタイムピッカーです。jQueryに依存しています。アナログ時計に見立てたUIで時間をピック、フィールドに入力する事が出来ます。年月日等を入力管理出来るデイトピッカーで...
絵文字を簡単に追加出来るようにするスクリプト・「Emoji One Area」
Emoji One Area Emoji One Areaはコメント等に絵文字を簡単に挿入出来るようにするためのWYSIWYGエディタです。jQueryに依存しています。特定のUnicodeに沿った絵文字に置換してるみたいです。モバイ...
スタイリッシュなBootstrap向け管理画面テンプレート・「Blur Admin」
Blur Admin Blur AdminはBootstrapベースの管理画面テンプレートです。jQuery及びAngularJSをサポートしており、管理画面に必要なUIは一通り揃えられている印象です。チャートライブラリはamChar...
input要素にフォーカスした際のアニメーションエフェクトをいろいろまとめた・「Awesome input focus effects」
Awesome input focus effects Awesome input focus effectsはinput要素にマウスフォーカスした際のエフェクトのまとめです。borderやbackground、placeholder...
グリッドレイアウトのポートフォリオサイトを手軽に作成する為のシンプルなスクリプト・「gridfolio.js」
gridfolio.js gridfolio.jsはグリッドレイアウトのポートフォリオサイトを手軽に作成できるJavaScript製のジェネレーターです。gridfolio.jsにコンテナのタイトルやアイキャッチ、リンク先、スタイルや...
モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」
Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...
ツリー構造データを可視化するためのシンプルな非依存型スクリプト・「treeData.js」
treeData.js treeData.jsはツリー構造のデータを可視化する為のスクリプトです。シンプルな仕様で、単純に可視化するためだけのものとなっていますので他スクリプト等への依存もなく、コードも少なく実装も容易です。使い勝手は...
jQueryで作られたオープンソースのシンプルなTodoアプリ・「LobiList」
LobiList LobiListはjQuery製のToDoアプリです。OSSとして公開されています。上図のように複数リストも設定可能で基本的なToDoアプリの性能は揃っている印象でした。シンプルで使いやすそうですし、手軽に作れるのは...
レスポンシブWebデザイン対応のHTMLメールフレームワーク・「Outline Mail」
Outline Mail Outline MailはRWDなメールのHTMLフレームワークです。スマフォの普及で以前より需要が増している印象です。HTMLメールのRWD対応は通常のWebページとは少し勝手が違うのでこの手のフレームワー...
canvasを使ったシンプルなドローライブラリ・「atrament.js」
atrament.js atrament.jsはcanvasを使ったシンプルなドローライブラリです。色やペンの太さ、消しゴム、透過機能などが揃っています。他ライブラリへの依存も無く、圧縮版で7KBほどと軽量です。滑らかで動作も軽いドロ...
Webアプリ向けに設計された非依存型で軽量なツールチップ実装スクリプト・「Popper.js」
Popper.js Popper.jsは常に見やすい状態に維持してくれるツールチップ実装スクリプトです。圧縮版で3.5KBと軽量且つ非依存型で単体で動作してくれます。うまく説明出来ませんが、任意のコンテナにツールチップを表示した際、ス...