流行りのYoutube風ローディングバー実装jQueryプラグイン:phpspot開発日誌
jQuery Youtube-like Ajax Loading Bar by Pete R. | The Pete Design 流行りのYoutube風ローディングバー実装jQueryプラグイン。 次のようなページ上部に表示されるプログレスバー実装が可能。微妙なバーのグラデーションデザインも再現されています スマホのブラウザではこうしたローディングが主流となってきており、Ajaxなサイトでもこうしたプログレスバーを実現するのに使えそうですね 関連エントリ フラットデザインのプログレスバー実装jQueryプラグイン「NumberProgressBar」 モダンなプログレスバーを表示できるJSライブラリ「nanobar.js」 フォーム入力の進捗をプログレスバーで表示できる「Fort」 フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」 ボタン自体にプロ
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」:phpspot開発日誌
Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou 超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」 2KBで次のようにオートコンプリートが実装できます。 実装方法は、補完したいデータを data-list で属性定義するだけ、という簡単さ。 次のように別途datalist タグでデータを定義する事も可能です @を入れた後のドメイン補完機能なんかも応用することで実現が可能 関連エントリ オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」 オートコンプリートにテーブルを使える「Autocomplete-Table」 お手軽に使えるBootstrapベースのオートコンプリート実装jQueryプラグイン「comple
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」:phpspot開発日誌
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 2014年01月15日- nghuuphuoc/bootstrapvalidator GitHub Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 BootstrapなサイトでのJSベースでのフォームバリデーションを実装できます。 Emailやクレジットカード等のよく使いそうなバリデーションや長さチェック等一般的なものまで実装されています。 リアルタイムバリデーションで使い勝手をよくしたい場合の１つの選択肢として覚えておいても良さそう 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 フリーで使えるフラットでハ
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
Flashみたいに美しいCSSテキストアニメーションデモ:phpspot開発日誌
Text Opening Sequence with CSS Animations | Codrops Flashみたいに美しいCSSテキストアニメーションデモ。 CSSでもこういうの作れるよ、ということで覚えておいてもよさそうなサンプルです。 こういうのを一括でいろいろとできるライブラリなんかはすぐに出てきそうな予感というか期待。 スマホ上でもこういう演出が簡単にできるようになっていくわけですね 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 テキストを燃え上がらせられるjQueryプラグイン「jQuery Burn」
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」:phpspot開発日誌
Pictodeck Icon Set: Over 700 Free Pictograms for Keynote - Noupe ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 次のようなシンプルだけどセンスのあるアイコンが７００個詰まったセットがダウンロード可能です。 こういうテイストのアイコンを使えばGoogle＋のようないい感じのサイトを作ることができそうですね 関連エントリ 白黒だけど汎用的にシンプルデザインのWEBアイコン５００ ソーシャル等シンプルデザインのアイコン144個セット シンプルだけど味のある１００以上のベクターアイコンセット シンプルさがいい感じのソーシャルアイコンセット「Simplito」
名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン:phpspot開発日誌
Simple yet sexy hovercard with minimum CSS 名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン 名前にカーソルを合わせると、名前のテキスト位置はそのままに次のようにプロフィールが浮かび上がるサンプルです。 ポップアップでもいいんですが、もとのテキストはそのままの位置というのがなかなかカッコイイのと技術的に面白いですね。 プロフィールが浮かび上がります。 マークアップとCSSが公開されていて、JSはjQueryを使って数行で実装されています。 ｊQueryプラグイン形式でも使うことができるみたいです 関連エントリ シンプルなツールチップ実装ができるjQueryプラグイン「mTip」 jQueryでツールチップ実装に迷ったらみるエントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリ
ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル:phpspot開発日誌
Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」
PHPを使って画像をアップしてjQueryで切り抜くチュートリアル:phpspot開発日誌
Image Upload and Cropping with PHP and Jquery PHPを使って画像をアップしてjQueryで切り抜くチュートリアルとデモが公開されています。 配布されているプログラムをダウンロードしてプロトタイプとして使って開発効率を高める事もできますし、単に学習用に使うこともできそうです。 実際のサービスで使うにはセキュリティの問題がないかどうかをちゃんとチェックして使いましょう デモページはこちら 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル PHPとGDを使ってCaptchaを自作するチュートリアル
クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌
Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」:phpspot開発日誌
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 2011年05月26日- jQuery HTML5 Uploader HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」。 デスクトップからブラウザにドラッグ＆ドロップできたら、初心者の人とかはもっとアップロードが簡単になるはずですね。 HTML5を使って実装されていて、そのUIなんかも面白いUIで提供されていたのでご紹介。当然ダウンロードして使うことができます。 ファイルを画面の割れ目の穴にドロップしましょう。複数ファイルもOKみたい。 なんと、すぐ下にイメージが表示されてアップ開始。進捗表示もできます。 こんなことが出来るんだというのを知っておくだけでもよさそうですが、jQue
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectタグの機能を大幅に向上させる「selectivity」:phpspot開発日誌