jsNoteEditor demo page 楽譜をWEB上で打ち込めるUI実装jQueryプラグイン「jsNoteEditor」。 アイテムをポチポチクリックで次のように楽譜と歌詞を入力できるUIが実装可能です 音楽はよく分かりませんがなかなか面白いプラグインですね 関連エントリ フォームにて入力の入力UIを追加できる「jquery.signfield」 フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」

heatmap.js Examples ヒートマップが簡単に描画できるライブラリ「heatmap.js」。 よくクリックされる位置等の計測に使われるヒートマップを簡単に描画できます。 デモ集 地図上にレイヤーをかぶせるなども可能のようです 関連エントリ 新し目のAPIにも対応したGoogleマップ操作jQueryプラグイン「Maplace.js」

フラットでシンプルなスライドショーが作れるjQueryプラグイン「Skippr... 次の記事 ≫：スマホでも楽々なアイコンを選択するだけのCaptcha「visualCaptcha」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 2014年06月30日-

ULリストをツリービュー状に開閉できるようにするjQueryプラグイン「Sap... 次の記事 ≫：HTMLをベースにCSSファイルのひな形を作ってくれる「extractCSS」

Bigfoot 分かりやすい脚注を実装できるjQueryプラグイン「Bigfoot」。 脚注を実装したい際に、クリックでポップアップ等しえ、分かりやすい脚注を実装できるプラグインです。 脚注を使うような長文記事サイトで活用できそう。 関連エントリ エントリに脚注を入れる場合に超便利な「jQuery Footnotes」

ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」 2013年11月13日- FileAPI ? a set of javascript tools for working with files. ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」。 ファイルのアップは複数アップやドラッグ＆ドロップアップ、ウェブカムからの取り込みも可能で、アップした画像にウォーターマークをつけたり、Instagram風にフィルタをつけたり、とにかくファイルアップして画像を扱うようなサイトを作る際に使えそうなJSライブラリです。 サーバサイド用にはphpクラスが用意されており、サーバサイドにも対応。 デモを見てみるだけでも何かできそうな気になります。 関連エントリ フラットで超カッコい

QuestionMark.js 先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」 キーボードの？を押すとサイトに実装されたキーボードショートカットが表示されます。 なんと、TwitterやGithub、GmailやGoogle+ではこの機能が実装されていますが知っていましたか？ 依存ライブラリがなく軽量サイズなライブラリとなっています 関連エントリ CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットだけど立体的なCSS3アニ

ifvisible.js test page ユーザがブラウザ上でアイドルかそうでないかを確認できる「ifvisible.js」 一定秒数以上の操作がないとアイドルとみなしてイベントハンドラを実行できるツールです 例えば、自動更新でページを更新しているようなサイトで、アイドルになった場合はリロードを止めてトラフィックを減らす、というようなことが出来そうですね 関連エントリ ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」 クールなページネーションを実装できるjQueryプラグイン「simplePagination」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 OS標準のツリービューが実装できるjQue

Layers CSS レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 Bootstrapみたく沢山コンポーネントは不用で、自分でサイトデザインしたいけど、レイアウト部分のレスポンシブ対応な軽量なフレームワークだけ使いたいという場合の１つの選択肢として。 このフレームワークを使って作られたデモ - レスポンシブ 関連エントリ モバイルファーストなレスポンシブCSSフレームワーク「Cardinal」 HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 CSSアニメーションでページを紙芝居の様に切り替えるデモ

Mailpile: Let's take e-mail back! WEBベースのモダンなUIを持つメーラー「Mailpile」 自前のサーバに設置する方式のメーラーで、モダンで高速なUIが特徴。 外部メールサービスを使うのに抵抗があり、でもブラウザで利用したいという方は検証してみてもよさそうです 言語はPythonで設置にはPython環境を用意する必要があります 関連エントリ POP3メールをブラウザで読めるメーラー「T-dah Webmail」 PHPとAjaxを使った軽快ブラウザメールライフを実現できるオープンソース集 高速検索、管理が可能なアウトラインプロセッサ「外部記憶データベース」

Sixpack: An Ab Testing Framework from SeatGeek 言語依存のないABテストフレームワーク「Sixpack」 A/Bテストを実装する際のPHP,Ruby,Python,JS用のライブラリと次のような美しい、結果を見るための画面が付いているようです。 テストケースに対するコンバージョンがグラフ描画されて一目瞭然ですね。 A/Bテストをやろうとおもった際の１つの選択肢として。 関連エントリ A/Bテストが簡単に実装できるPHPライブラリ「phpScenario」

NProgress: slim progress bars in JavaScript Google風スリムでクールなプログレスバー実装JS「NProgress」 次のようにページ上部にプログレスバーと円形ナビゲーションが表示され、必要最小限のプログレスバーが実現可能。 通常のページではあまり使えないかもしれませんが、アップローダーやAjaxで実装されたアプリケーションなどに使えそうです 関連エントリ スピード感が凄いプログレスバー実装ライブラリ「progress.js」

Owl Carousel タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」。 タブレット出荷数がPCを上回る等、今後も伸びるタブレットでも使えるタッチ可能かつレスポンシブなカルーセルが実装可能です。 Appleのホーム画面っぽいページおくりがついてレスポンシブになるあたりがカッコいい。 関連エントリ どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ

Skeuocard by kenkeiter 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard」 クレジットカード状の画像があり、番号を入力していくと、VISAなどに識別され、自動でカードのデザインが変わり、カードの字体も本物ソックリ。 通常のクレジットカード入力よりも分かりやすくてオシャレというのがいいですね。 GithubからDLできます。プライスレス 関連エントリ オンライン決済用のボタン75個セット

DalekJS - Automated cross browser testing with JavaScript JSでクロスブラウザの動作テストを自動化できる「DalekJS」。 テストコードをJavaScriptで記述すれば、指定したサイトを開いてスクリーンショットを撮って、指定位置をクリックして、といった具合にテストが実施できます Seleniumのような既にメジャーなツールもありますが、これもなかなか便利そうです。 node.jsベースで実装されているみたい。 関連エントリ JavaScriptのコードでPDFを生成できる「jsPDF」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」

Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp

50 Awesome Twitter Bootstrap Templates フリー＆プレミアムなTwitterBootstrapテーマ50 Bootstrapベースとはいえ、Bootstrap臭があまりしないテンプレートが多数まとまっています。 通常サイトや管理画面等のテンプレートがまとまっていて、活用してサクっと仕事を終えられる事もあるかも Bootstrapの便利さを享受しつつ、うまくサイトデザインする際の参考にもできそうです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」

PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 2013年05月24日- Browser code editor awesomeness : ICEcoder PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 ブラウザ上だけどツリービューでファイルを開けたり、タブでファイルを複数開けたりIDE顔負けのインタフェースを持つエディタ。 OSSなので自分のサーバに設置して使うことができます。リモート開発の方法は色々ありますが、Chromeだけでサクサク開発するっていう手法もなかなか便利なのかも。 こういうのを１０年ぐらい前の人に見せてあげたいですね。 そういう意味では１０年後が恐ろしかったりします。 関連エントリ フルスクリーン編集可能なWYSIWYGエディタ実装jQ

Mini AJAX File Upload Form | Tutorialzine Ajaxアップ＆ドロップでアップできるアップローダーデモ＆サンプル 次のようなUIが良い感じのアップローダーのデモと、プログラムDLが可能。 アップロード後にファイル名が表示されるあたりがなかなかカッコいいです。 手軽に使いやすいアップローダーを設置したいという場合は参考にしてみるとよさそう。 公開用としてつかう場合はセキュリティ等も問題ないか確認の上で使ったほうが良いですね 関連エントリ 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」

Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」