localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 2014年05月29日- jquery.formsaver.js by hackprime localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 ブラウザが落ちてフォームが消えてしまった、というのに備えるためのライブラリです $("#form_id").saveForm(); $("#form_id").restoreForm(); のようなAPIで簡単にlocalStorageにフォーム内容を保存、リストアを可能にします。好きなタイミングで保存、リストアが可能となるので、扱いやすそう。 関連エントリ Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」

Zoomerang.js Mediumのアバターズーム風エフェクトがかけられるJSライブラリ「Zoomerang.js」 このライブラリを使えばどんなブロック要素でもアニメーションしながらズームし、ページ内に固定表示させることが出来ます。もう一度クリックでもとにもどります ブラウザ環境としてはCSS Transformが必要です。 関連エントリ サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」 画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」

jquery.dragtable.js カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」 意外となかったカラムをドラッグ＆ドロップで並び替えるプラグイン。 比較したい値が離れていると視点の移動でやりづらくなっちゃいますが、並び替えすることで比較が簡単になりそう 特定のカラムだけ固定することも可能 関連エントリ HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」

Responsive Nav ? Responsive Navigation Plugin レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」。 PC、タブレット、iphone等でそれぞれ美しいメニューを提供してくれるJSライブラリ。1.7KBと軽量で依存ライブラリなどはなく単体でう使えます。 シンプルですが十分に使えそうですね 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ナビゲーションが斬新な３０のサイト スマホでの面白いトップナビゲーションの見せ方チュートリアル 目次のナビゲーションを自動生成してくれるjQueryプラグイン「TOC」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」

equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」

Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかなり大変なものがありますが、簡単に実装できるというのはよいですね お絵かきというのは昔から人気の面白いコンテンツであるわけですが、実装したいってなった時に手軽に参考にできそうです 関連エントリ リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ コンテンツの折りたたみを楽々実装できるjQueryプラ

Mixpanel Flow | Mobile and Web Analytics 画面の遷移をヴィジュアライズできて超分かりやすいアクセス解析「Mixpanel Flow」 トップページからどこに行ったのか、っていう画面遷移の情報を次のようなダイアグラムでヴィジュアライズしてくれます。 ヒートマップでどこがクリックされているかという情報って取れますが、これは便利。 トップページからログインのページにいって、何％が離脱したのか？といった情報がすぐに見た目で判断できます カーソルを合わせると１１％が離脱という詳細が分かります。赤くなっている部分が離脱ということで超分かりやすい 更にその先はどうなってるの？と思ったら円をクリックすればその下が詳細に表示されるというものです ユーザの動きをこのツールで理解すれば、サイトとしてどこを改善すればよいのか？が一目瞭然なので、サイトの機能追加や改善といった

Centurion Project a Zend framework CMS - CMF ZendFrameworkベースのCMS兼フレームワーク「Centurion」 ZendFrameworkベースで開発されていて、沢山の有用で洗練されたインタフェースのコンポーネントが詰まっており、そのままで使うこともできるし、更にそれらを使って自分専用のサイトを作るのにも活かせるというものです。 インタフェースのデザインがモダンでいい感じという点が個人的にポイント高いです。 １回のインストールで、複数サイトを複数言語で運営できます。 CENTURIONを使って構築されたサイト 投稿した動画の検索ができます CMSとしてのページ管理画面は以下のようなモダンなデザインです 他にも洗練されたコンテンツ管理画面が用意されています CMS等は出来るだけ定番の物を使った方が無難ではありますが、評価してみるのもよ

綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ

PNGGauntlet - PNG Compression Software | BenHollis.net PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」。 いくらブロードバンドだからといって転送量のかかるサーバなどでは出来るだけ転送量を抑えたほうがいいですし、その方がページスピードも早くなる場合もありそうです。 次のようなインタフェースを持ち、ドラッグ＆ドロップで簡単に圧縮できます。 関連エントリ ドラッグ＆ドロップでCSSを瞬時に圧縮できるブラウザツール「excssive.com」

13 CSS Button Tutorials and Techniques - DesignModo CSSボタン作成チュートリアル＆テクニック集１３。 次のようなCSSボタンを作成するチュートリアルがまとまっていました。 既に紹介したものもありますが、そうでないものもありましたので参考にしてみましょう 関連エントリ ピュアCSSなソーシャルサイトのログインボタン CSSスプライトでカッコイイボタンを作るチュートリアル

10 Free Ajax Upload File Sample With PHP PHPを使ったAjaxファイルアップロードサンプル１０ Ajaxベースのものや、アップしたものを加工できるもの、エクスプローラベースのリッチなものなのが紹介されていて、つくろうとした時にある程度お望みのものがみつかるかも 本番環境で使う場合は認証を実施したり、そもそもセキュリティが考慮されていないものであったりするので、セキュリティ等に気を付けたいところですが、ベースとして使えそう 関連エントリ デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 HTML5を使ったファイルアップロード用プログラム集 HTML5でプログレスバー付きファイルアップロードを実現する例