ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」:phpspot開発日誌
Idle Checker : by Kevin Lint ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。 ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。 会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。 デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。 プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。 ログアウトした際の例 使い方は以下のようにオプション
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
jQueryでXMLをパースして表示するコードサンプル例:phpspot開発日誌
Parse XML with jQuery | Papermashup.com jQueryでXMLをパースして表示するコードサンプル例が公開されています。 jQueryマスターな方には無用の物かも知れませんが、スニペットとしても使えそうなので便利かも、というのでご紹介。 $.ajax でサイト内にある .xml ファイルを取得して、success のハンドラによってXML処理させます。 普通に書くと大変ですが、jQueryを使うことで次のように簡単になります。 .xml のパスはサイト内のURLであれば何でもいいので、サーバ側に xml を出力するようなAPIが既にある場合、jsonに変換することなく簡単に使えますね。 jQueryのDOM操作の簡単さによってこれだけ短縮できているところが何とも凄いです。
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
WEBサイトデザインのフィードバック作業が超便利になりそうな「Notable」:phpspot開発日誌
WEBサイトデザインのフィードバック作業が超便利になりそうな「Notable」。 Notableは、サイトのスクリーンショットを撮ってからNotable上のサーバにアップロードし、そのスクリーンショットに、ビジュアルに色々書き込むことが出来るサービスです。 この仕組みがあれば、デザインが完成した後、クライアントさんが、「こことここを直して」っていう作業をWEB上で迅速に、便利に行えて作業の効率化が図れそうです。 画面にNotableのサイト上で注釈をどんどん入れていってる例。 Notableの使い方 それではどうやって使うかを簡単にご紹介。 まず、どうやってキャプチャを撮るか、ですが、Firefox3用のアドオンが公開されていて、インストールするとボタンがブラウザのツールバーに追加されます。 IEやChrome、Safariなどの他のブラウザでも、URLを入力するだけで簡単にキャプチャが取
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」:phpspot開発日誌
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」 2009年08月17日- UrlParams :: Firefox Add-ons WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」。 もうご存知の方も多いかもしれませんが、知らなかったのでご紹介。 Yahoo! などの検索エンジンにアクセスすると、「http://search.yahoo.co.jp/search?p=test&ei=UTF-8&fr=moz2」のように色々と引数がつきますが、これを分かりやすく解析してくれます。 さらに解析するだけでなく、独自パラメータを定義して送信するといったことも可能です。 上記GETによるアクセスで、以下のようにパラメータを分かりやすく表示してくれます。 POSTの場合は別のペインにパラメータが表示さ
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
200を超える非常に美しいPhotoshopのパターン集:phpspot開発日誌
200を超える非常に美しいPhotoshopのパターンがまとまったエントリが公開されています。 deviantARTなどに掲載されているもののピックアップで、紹介されているパターンは以下のように非常に美しいです。 リンク先は以下のエントリを参考にしてください。 200 free beautiful Photoshop patterns hand-picked from DeviantArt - FrancescoMugnai.com ためしに使ってみました。 次のような背景をパターンで簡単に定義できてしまいます。 素晴らしい！ 関連エントリ サイトデザインをオシャレにする背景画像パターン集 サイトのレイアウト時に役立ちそうなレイアウトパターン集「12 Standard Screen Patterns」 背景画像に使えるレトロなPhotoshopパターン集 PhotoShopのブラシやパター
最近公開されたPHP関連の各種テクニックや記事集:phpspot開発日誌
最近公開されたPHP関連の各種テクニックや記事集をご紹介。 開発に役立てられるＴＩＰＳが満載になっております。 Making Life Better With The SPL Autoloader | BrandonSavage.net spl_autoload_registerで独自autoloaderを作成する 3 Ways to Speed up Your Site with PHP - Nettuts+ PHPを使ってサイトのパフォーマンスをあげる３つの方法。CSS結合、ホワイトスペース除去、キャッシュ Online File Storage with PHP - Nettuts+ PHPでオンラインストレージ作成のチュートリアル In the Woods - Working with Sessions and Cookies in PHP and MYSQL PHPとMySQLで
サイトデザインにそのまま使えそうなPhotoshopデータが入手できる「ThemeForest」:phpspot開発日誌
サイトデザインにそのまま使えそうなPhotoshopデータが入手できる「ThemeForest」 2008年12月24日- PSD Templates - ThemeForest サイトデザインにそのまま使えそうなPhotoshopデータが入手できる「ThemeForest」。 サイトデザインの際に、まずPhotoshop等でモックアップを作成してデザインに落としていきますが、モックアップが最初から殆ど出来上がっていたとするとサイト作成完了までの時間は大幅に上がるはず。 例えば、以下のようなPhotoshopデータが入手できます。 DuoTone Package Darkness Portfolio theme Blue Esoteric Blog Theme green Violet_Girl 現在６２種類から選べるようになっていて、サイトにあったデザインも探せそうです。 これらは、フリ
HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグイン:phpspot開発日誌
HOKYPOKY. | MULTICOL. jQuery Plugin MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグインの紹介。 次のようにコードを書くと、複数のブロックを簡単に4カラムにすることが可能です。 $("#sample1").multicol({colNum:4, colMargin: 10}); マージンを指定できるところも良いですね。 関連エントリ 複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 CSSレイアウトのチート集「CSS Layout Cheats
サイトを美しく魅せるゴージャスナビゲーション集:phpspot開発日誌
50 Gorgeous Navigation Menus | Vandelay Website Design サイトを美しく魅せるゴージャスナビゲーション集。 重厚で美しいデザインのナビゲーションの特集です。 Housing Works Nuttersmark Paiko Good Soh Tanaka 参考にしてエレガントなメニュー作りに役立てましょう。 関連エントリ ナビゲーション実装に使える、Ajaxライブラリ/サンプル集 階層ナビゲーション実装ライブラリ集 クールなナビゲーションメニューを作成するCSS＆HTMLサンプル CSSベースの超クールなナビゲーション集 CSSでdigg風のナビゲーションを実装サンプル
プロのサイトデザイン方法を作って学べる手順集:phpspot開発日誌
35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design Photoshop is an excellent tool for creating attract websites. プロのサイトデザイン方法を作って学べる手順集。 次のようなサイトデザインのPhotoshopチュートリアル集です。 Create a Dark Themed Web Design from Scratch Making Your Own Portfolio Web Page Design a Cartoon Grunge Website Layout Hand Drawn Layout Online Photo Portfolio Layout Sound System Studio Website Layo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
次のプロジェクトに是非使いたくなってしまうような６０個のアイコンセット「NIXUS」:phpspot開発日誌
Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌