ユーザへの通知UI全部のせなjQueryプラグイン「noty」:phpspot開発日誌
noty - a jquery notification plugin ユーザへの通知UI全部のせなjQueryプラグイン「noty」 ページトップやボトム、あるいはページのセンターやポップアップでメッセージを表示することが出来るプラグインです noty({text: 'noty - a jquery notification library!'}); のように呼び出せばアラートが出せるみたいです。 各種オプション指定によって表示位置を変えられたりするようです 最近のWEBを見ていると通知ってやっぱり重要だなと感じるわけですが、こうしたもので分かりやすく表示してあげるといいですね。 関連エントリ faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 分かりやすい通知ボックスを作れる「Humane JS」 簡単なコードでアイコ
カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」:phpspot開発日誌
カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 2011年09月30日- jBubbles - jQuery plugin to make links or other elements bubble カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 正直、魚以外に誰が得するんだろうと思うプラグインですが、面白かったのでご紹介です。 プラグインを改良してカーソルを合わせると超気持ちいい演出に応用できるかもしれません。 使い方は以下のように超簡単です。が手間に見合わない効果かもしれません。 $( selector ).mouseover(function () { $(this).jBubbles(); }); 関連エントリ Windowsのスピンボタンコントロールを実装できるjQueryプラグ
中身が画像のselectボックスを作るjQueryプラグイン:phpspot開発日誌
Image Select plugin with jQuery | images select 中身が画像のselectボックスを作るjQueryプラグイン 普通selectの中身といえばテキストが一般的ですが、画像で選ぶことができます。 select内のoptionの値を画像のパスにしておいて、$(element).ImageSelect() のように初期化するだけで使えます 関連エントリ アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成できるjQueryプラグイン「FancySelector」
Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル:phpspot開発日誌
Google Plus Photo stack animation using Jquery and CSS3 Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル カーソルを合わせるとアニメーションをしながら展開されるフォトスタックを実現するチュートリアルとデモがダウンロード可能です。 写真の一覧をオシャレに出したいような場合に使えます。 デモページはこちら こうしたテクニックが当たり前になってくると更に応用して新しいインタフェースが出てきたりして楽しみです 関連エントリ カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル
WEB管理画面のテンプレート２２:phpspot開発日誌
22 Awesome Admin Panels For Web Developers | ZoomZum WEB管理画面のテンプレート２２がまとまっていました。 すでに紹介したものもあり、ほとんどが有償ですが、デザインの参考にしたり、１から作るのに比べれば相当安価なので便利だと思います。 管理画面のデザインはちょっと普通のサイトと違うパターンであったりするので学習素材としてもよさそうです。 デザインは奥が深いですね。 関連エントリ CSSデザインの実用的な管理画面テンプレート１０個 管理画面やダッシュボードのハイクオリティなテンプレート色々
ページのパフォーマンスを向上させるツールのまとめ:phpspot開発日誌
15 Tools to Help Speed Up Your Website ページのパフォーマンスを向上させるツールのまとめが公開されていました。 ページを高速化することで利用者満足度は上がる上に、検索エンジンでの順位にも影響してくるというので、ページ高速化はWEB制作においてかなり重要な要素をとなっていますが、それらにまつわるエントリがまとまっていたので、ちょっと見て実践してみるとよさそう。 知らないものもあったので、ザッとでも見ておくと便利に使えそうです Pingdom 指定ページに含まれる画像やCSSの読み込み状態をブラウザ上で確認できるツール。 YSlow - Firefox拡張 Yahooの公開しているパフォーマンスベストプラクティス も参考になります Google Page Speed - Google製のFirefox拡張 pagespeedをブラウザで計測するツール UR
TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０:phpspot開発日誌
40 Sets of Free Social Media Icons | Vandelay Design Blog TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０。 次のような、デザインに嫌なクセがなくて汎用に使えそうなアイコン〜個性的なものまで色々なアイコンセットが紹介されています。 サイトデザインに合ったアイコンが選べそうなので覚えておいてもよさそう。 Linked.inも日本で開始するそうですが、どうなっていくのか楽しみです 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット 246種類のクリアで美しいソーシャルアイコンセット
TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」:phpspot開発日誌
Picons | Vector Icons and Pictograms TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」 ベクター形式でロイヤリティフリーなので独自アイコン作成の際にはうってつけ。 デザイナーさんなら誰もが独自のアイコンを作りたいと思うのでこれをベースにするとよさそうです。 ６０種類のソーシャルアイコンが同梱 配布形式も色々で扱いやすいです。 アーカイブをDLすればそれぞれ収録されています 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０ シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット
iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集:phpspot開発日誌
60 Amazing iPhone Application Websites For Design Inspiration iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集。 iPhoneアプリケーションのサイトはアプリのプロモーションなわけなのでかっこ良く作っておくと、アプリの出来は別として興味を持ってもらえるはずです。 色々なiPhone実機の設置例が見られて非常に参考になると思ったのでご紹介。 アプリ紹介サイトと一言でいっても色々なデザイン方法があることがわかります 関連エントリ 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ HTML5とCSS3を使ったフォームデザインのチュートリアル集３０
管理画面やダッシュボードのハイクオリティなテンプレート色々:phpspot開発日誌
35 Admin, Dashboards and CMS interface templates | WP Chief - WordPress Premium Themes and Web Design Templates 管理画面やダッシュボードのハイクオリティなテンプレート色々が特集されています。 有料の物になりますが、自分の管理画面デザインに生かしたり、有料といっても＄１５程度なので誰かに頼むよりもはるかに安くテンプレートを入手出来ます。 当然無料の方がいいとは思うんですが、１つの選択肢としてこうしたテンプレートを活用することで仕事が楽になるかもしれませんね。 管理画面ひとつとってみても色々なデザインの仕方がありますね。 関連エントリ カッコいい管理画面のHTMLテンプレート総まとめ CSSデザインの実用的な管理画面テンプレート１０個 MySQLベースのデータ管理画面をWEB上で自動
PHPでWEBサイトのスクリーンショットを作成するチュートリアル:phpspot開発日誌
Taking screenshots of websites in PHP PHPでWEBサイトのスクリーンショットを作成するチュートリアルが紹介されています。 スクリーンショットの撮影には wkhtmltopdf というオープンソースソフトウェアを利用します。 このソフト自体がMac OS XやWindows、Linuxで動作するコマンドラインツールとなっているようなのでクロスプラットフォームで動作します。 このツールを使えば、「wkhtmltoimage --quality 50 //phpspot.org/blog/ snap.jpg」のようにコマンドを打つことでスナップショットが撮れます。 コマンドラインオプションが多数あるのでPHPerじゃない方も覚えておいて損はなさそうです。 例えば、 JavaScriptをオフにした状態でスクリーンショットを撮ったり、高さや幅の指定、切抜きの
PHPでGoogleのOAuthを使ってGmailのコンタクトリストを得るサンプル:phpspot開発日誌
Import GMail Contacts Google OAuth Connect with PHP. PHPでGoogleのOAuthを使ってGmailのコンタクトリストを得るサンプルが公開されています。 自分のWEBアプリケーションに、「友達を誘う」的な機能を実装する際に、アプリから直接メールアドレスを得られると便利ですね。 スクリプトのダウンロードも可能なので、本番導入の前には検証が必要ですがプロトタイプとして活用させてもらえそうです。 こんなことが出来るんですね。 ちょっと危ない気もするので、利用者の方は逆に、簡単に「認証OK」のボタンをおさないようにする必要があるのかも。 関連エントリ PHPのRSSパーサライブラリ１０種 PHPでよく使うライブラリを毎回requireしないでよくなる方法 PHPのスクリプトやライブラリがダウンロードできる海外サイト１２
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」:phpspot開発日誌
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 2011年06月09日- Official Demo page for MyFacebookStyleSidebar jquery plugin Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 このプラグインを使えば左側にメニュー、右側にコンテンツがあり、メニュークリックでAjaxなどによって画面を切り替えるUIが実現できます。 ajaxでページ読み込みはもちろんiframeも利用可能みたいです。 ローディング画像を表示できたり、SEOフレンドリなAjaxコール、そしてクロスブラウザ動作という特徴を持ちます。 実際に数億人が使うUIを真似ることで、世界中の人々が使いやすいUIというものを構築で
上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」:phpspot開発日誌
上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 2011年06月07日- jQuery Slick Plugin ? Examples Design Chemical Lab 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」。 最近色々なサイトで実装されているアレを実装するためのｊQueryプラグインです。 目立たない程度にページの脇に表示されており、クリックするとコンテンツ表示します アニメーションしながらメニュー表示。常に表示しているよりも、使用頻度が少ないようなケースにおいてはメニューは隠しておいたほうがよいこともありそう 使い方も次のように直感的に簡単に使えるようになっています 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。
ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」:phpspot開発日誌
CJ Object Scaler 3.0 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」。 幅300pxのブロックに、幅500の画像がきたらデザインが崩れてしまいますが、これをjQueryで自動補正してくれるプラグインのご紹介。 スクリプトでやってくれるため、予め自分でサイズを計算して指定しておく必要はなく、かつデザインを崩しません。 ブログなんかで、画像をアップしたけど、ちょっと大きくてデザイン崩れるかもっていう場合にも、自分でリサイズしなくてもやってくれるというのは楽でいいですね。 調整方法も２種類選べます。 ぴったりと埋める Fill 画像の表示領域をそのままで表示するFit 使い方は $(element).cjObjectScaler(options, callback) で、調整後のコールバック関数も呼べます。 $(element)
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
モバイルアプリに使えそうなフリーのベクターアイコン「99+ICONS」:phpspot開発日誌
Roam Design Blog Blog Archive Free Vector Icons モバイルアプリに使えそうなフリーのベクターアイコン「99+ICONS」。 次のようにモバイルアプリのツールバーなんかに出てきそうな汎用アイコンセットがダウンロード出来ます。 形式は、.ai のイラストレーター形式です。 ライセンスはCreative Commons Attribution 3.0 United States License 関連エントリ モバイル端末アプリ向けに付けそうなフリーアイコンセット「Mobile Icon Set」 iPhone等のスマートフォンのアイコンが詰まったパック iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010
WEBサービス作るなら忘れてはいけないもう一つのPEAR「Openpear」の便利モジュール集:phpspot開発日誌
Openpear :: Open PEAR Repository Channel WEBサービス作るなら忘れてはいけないもう一つのPEAR「Openpear」の便利モジュール集。 本家のPEARよりいいんじゃないか？というぐらい便利なライブラリが揃っているOpenpearからよく使いそうな物をまとめてみました。 2011年2月現時点で186もの便利モジュールが登録されています。 ちょっと古いものも含まれており、動かないものもあるかもしれませんが便利そうなものをとりあえず羅列してみます。 Services_ShortURL_Googl goo.glにURL短縮するライブラリ。PEAR::Services_ShortURLのサブパッケージだそうです。 Services_Foursquare FoursquareのAPIを叩くライブラリ Services_SBM_Info はてブ数やTwitte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイル等用のUIキット３５:phpspot開発日誌
フォーム要素をクールにするためのjQueryプラグイン集:phpspot開発日誌