Add Clear - jQuery Plugin - Demo Input欄にclearボタンを付与できるjQueryプラグイン「Add Clear」 インプット欄に入力すると右端に×ボタンがでてクリックすれば内容が消えるという、最近ではおなじみのUIがjQueryで実現可能です。 スマホ等のタッチ端末ではこうしたボタンがあって当然というところがありますから、こうしたプラグインで楽に対応できるのは便利。 関連エントリ レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 ドラッグ＆ドロップで移動できるグリッドレイアウト作成jqueryプラグイン「GridList」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive

Welcome to an Easier Way to Blog モダンなブログサイトが作れるデータベース不要のPHP製OSS「Dropplets」。 テンプレートが流行りのデザインで、カッコいい感じのブログを作るのに使えます。Mediumっぽい感じ。 記事のアップ方法がユニークで、マークダウン(md)形式のファイルをブラウザにアップするという物みたいです。 WordPressは定番すぎるっていう方にはいいのかも。 関連エントリ 今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」 モダンな写真投稿コミュニティが作れるRails製OSS「Photographer.io」 モダンなデザインでコマースサイトを作れるSymfony2ベースのOSS「Sylius」 PHP+MongoDBベースのECサイト構築OSS「Forward」 Meteorで構築されたR

Maskify Slider demos マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」。 画像をマスクでくりぬいて更にその中身の画像を切り替えられるというものです。 元画像 繰り抜き 繰り抜いたり、重ねたり、応用することで様々なことができそうですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」 これは新しい円形のスライダーが実装できる「Tiny Cir

Medoo - The Lightest PHP database framework to accelerate development 軽量で便利に使えるPHP用DB操作ライブラリ「Medoo」 SQLを書かなくてもメソッドでselect, insert, delete, update 等ができてコードも読みやすくなるライブラリです。 使うには１ファイルをincludeするだけでつかえます コード例。SQLをかかなくてすみ、インジェクション対策機能もあるらしいです 軽量かつ１ファイルなので簡単に導入できるので、ちょっとDBを使おうっていう場合に、MDB2等を使いたくない人は使ってみても良いかも 関連エントリ レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 Google,Facebook,Twitter,Tumblr等

Cheat Code: a jQuery Plugin サイトにコナミコマンドを超簡単に実装するためのjQueryプラグイン「Cheat Code」。 上上下下左右左右ＢＡでおなじみのコマンド。こうした特殊コマンドをサイトに埋め込みたい場合、結構大変そう、という感じになりますが、Cheat Codeプラグインを使えば、必要なライブラリを読み込んだら、以下のような cheatCode メソッドにオプションを渡してあげることで簡単に実装できます。 <script type="text/javascript"> $(function(){ $(document).cheatCode({ code : '38,40,37,39', // キーコードのカンマ区切り定義 message : 'Up,Down,Left,Right', activated : function(){  // コールバック

Icons Explorer | github repo クオリティの高いミニアイコンセットからワード検索ができて便利な「Icons Explorer」 FatCow、Fugue、 Led、 FamFamFamというクオリティの高いミニアイコンセットからキーワード検索ができるHTML＋JSベースのプログラム。 4セットともにアイコンの種類が似通っているため、併用しても違和感なく使えそうで、4セットを一括でキーワード検索することで、最もイメージにあったアイコンをすぐに探す事ができそう。 探したものはコピペですぐ使え、アイコン選びに時間を取られることなく生産性は向上しそう folder で検索してみたところ。4つのセットからfolderという名前がついたものだけを一覧することができます。 FatCowアイコンについては、クリックで32x32のサイズも表示できます。 git clone で自分の

hint.css - A tooltip library in CSS JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」。 指定位置にカーソルを合わせるとポップアップするツールチップヒントを次のようにCSSだけで実装できます。 ヒント位置も上下左右と自由に配置でき、カラーなどもCSSでカスタマイズできるみたい シンプルで軽量なのがメリットでしょうか。 関連エントリ いろんな種類のツールチップを簡単実装できる「Opentip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」

ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいいところもいいです。サンプルサイトがBootstrapベースですが、Bootstrapベースのサイトに入れても違和感なく埋め込めるでしょう。 カルーセル スライダー スクローラー サムネイル付きギャラリー。動きもいい感じ 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン サムネイルがシャッフルされてク

CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装

spin.js 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」。 あのローディング画像を画像を使わず、外部CSSも使わない方法で実現でいるライブラリです。 パラメータをいじくれば簡単にローディングイメージをカスタマイズ可能です。 独立して動く方式をベースとして、jQueryプラグイン方式で動くコードも公開されているみたいです。 最初は画像だったものが、画像不使用に変化し、ライブラリによってより便利になってますね。 関連エントリ 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」

Craftyslide - A tiny jQuery slideshow plugin 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 スライダーといえば多機能なものも多いですが、逆にそんな機能いらないよという場合も多かったりします 機能に比例してスクリプトサイズは上がるのでできるだけ軽いものがいいという場合にこちらはよいかもしれません。 マークアップは単にul li リストに画像を並べているだけでシンプルで綺麗 あとは1行jQueryプラグインで初期化するだけです。 アニメーションが気に入らない場合も自分でちょこっとカスタマイズすればよさそうですね 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 Apple.comの新スライダーエフェクトを

ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情

Adipoli jQuery Image Hover Effects 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 画像にカーソルを合わせるとアニメーションを画像に重ねて、インタラクティブな効果を持たせることができます ただ画像を並べるよりも面白いものが作れそうです $('#image1').adipoli(); 使い方もこんな感じで死ぬほど簡単です 勿論多彩なオプションでカスタマイズ可能です 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」

Home - Recline Data Explorer and Library 色んなデータを便利に表示できる「Recline.js」 データをExcel表風にしたり、グラフを描画したり、タイムラインにしてみたり、データを地図上にプロットしてみたりといったことが出来るライブラリだそう。 テーブルビュー。ソートなんかもできてこれだけでもリッチです このデータからグラフにしたいモノを選んでグラフ化も可能 データを元にタイムライン表示もできるみたい データを元に、地図上にプロットするなんていうこともできます なかなか面白いですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

TagCanvas - an HTML5 Canvas Tag Cloud HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 次のように３Dなタグクラウドがアニメーションします。Flashで似たようなものがありますが、こちらはHTML5版。 テキストだけじゃなくて画像もタグクラウドっぽくできます。 マウスホイールで拡大できたりと変なところに凝ってるところもナイス アニメーションのカスタマイズも色々とできるみたいです 関連エントリ HTML5を使ったファイルアップロード用プログラム集 HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5で色々作るチュートリアル＆チートシート

GoogleのPageRankをPHPから得られるPEARパッケージ「Services_PageRank」 2012年05月16日- Services_PageRank GoogleのPageRankをPHPから得られるPEARパッケージ「Services_PageRank」。 特定サイトのPageRankをPHPから簡単に得ることが出来ます。サイトの信頼性を調べたいといった場合に使うことができそうです 使い方は次のように超簡単。読み込んで１行でOK。 <?php require('Services/PageRank.php'); echo new Services_PageRank('example.com'); # returns 7 ?> PageRankというとあんまり最近聞かなかったワードですが、サイトの重要度を計る上においてはそれなりに使える指標であると思われます。 覚えておけ

infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル

Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」

idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」