かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」:phpspot開発日誌
Smoky Backgrounds Generator - waterpipe.js かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」。 次のような超カッコいい背景画像をパラメータをカスタマイズしてリアルに描画できます。 なんかCMっぽいですが、これをjsでやっちゃってるのがいいですね。 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」 ベクターでレスポンシブな地図を描画できる「jQuery-Mapael」 フライトインジケータ表示用jQueryプラグイン「Flight Indicators」
フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」:phpspot開発日誌
jQuery Circliful Plugin - Documentation フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」。 次のようなカッコいいデザインでアニメーションするプログレスバーの実装が可能。ローディング画面などに使えそうですね 関連エントリ テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 ガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」 フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」
ドットによるナビゲーションのクールなサンプル集:phpspot開発日誌
Dot Navigation Styles | Codrops ドットによるナビゲーションのクールなサンプル集。 ギャラリーやスライドで使われるドットによるナビゲーション。 単にドットによるナビゲーションといっても色々なデザイン＆アニメーション方法があるみたいで、こうしたナビゲーションを作る際には一度参考にしてみてよさそうなサンプル集となっています 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 クールな円形ナビゲーションを作るチュートリアル
フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」:phpspot開発日誌
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 次のようなフラットなselectボックスが実装できます。スタイルが色々選べるようです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 オシャレなSelectボックスが実装できる「FancySelect」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 selec
ドラッグ＆ドロップで複数の画像を切替えられるようにするjQueryプラグイン「Covering Bad」:phpspot開発日誌
Covering Bad ドラッグ＆ドロップで複数の画像を切替えられるようにするjQueryプラグイン「Covering Bad」。 次のように２枚の画像に切れ目を入れて、つまみ部分をドラッグ＆ドロップで画像を切替えられるUIが作れます。 あるときと無いとき、みたいな比較画像をサイトに表示したい場合に使えますね 関連エントリ 複数の画像を組み合わせて3Dっぽく回転できる「jQuery Interactive 3D」 画像のdiffができるjQueryプラグイン「TwentyTwenty」 コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
あなたのPSDファイルがルールに沿って作られているかチェックしてくれる「PSD Validator」:phpspot開発日誌
あなたのPSDファイルがルールに沿って作られているかチェックしてくれる「PSD Validator」 2013年10月30日- PSD Validator ? Find out how good your PSD file is structured あなたのPSDファイルがルールに沿って作られているかチェックしてくれる「PSD Validator」。 PSD Etiquetteというルールがあるみたいなんですが、PSDをアップロードするとそのルールに添って作られているかをチェックしてくれるツールらしいです。 自己流でPhotoshopを覚えた場合は割とゴチャゴチャになっていることが多かったりしますが（自分）、こうしたルールがあってそれに沿うように意識すればもっと綺麗に作れそうですね。 ルールに添って作成した上でこのバリデータにかけると簡易チェックができてよいのかも。 関連エントリ iPh
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル:phpspot開発日誌
jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。 関連エントリ ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」 ファイルアップロード関連のjQueryプラグイン１０ PHPを使ったAjaxファイルアップロードサンプル１０
様々にCSSでデザインされたソーシャルボタンセット:phpspot開発日誌
Demo: CSS Social Buttons 様々にCSSでデザインされたソーシャルボタンセット。 CSSでボタン作ればこんなにも便利だというのが分かるサンプル集になってます。 ボーダーやドロップシャドウ等は自由にデザインできるわけなので本当にちょっとした文字列の変更で多彩なデザインが出来る上に軽くて本当に便利ですね。 １０年前の人が見たら画像にしか見えなかったはずですね。 関連エントリ 円形で良い感じのソーシャルアイコンセット「Circle Social Media Icons」 手書き風だけど綺麗にデザインされたソーシャルアイコンセット「Setway Icon Set」 3Dの立体感が面白いソーシャルアイコンセット
15000ものAndroidアプリ用アイコンセット「Android icons Set」:phpspot開発日誌
Android icons 15000ものAndroidアプリ用アイコンセット「Android icons Set」 Android's UI guideline に沿ったアイコンセットが15000も公開されています アイコンセットというのは１つのテイストで揃えたいため、数があるほど使いやすいわけなんですが、15000は驚きですね。 逆に探すのに苦労しそうですが・・（＾＾；） Photoshopのvector形式で入手できるっぽいです 関連エントリ 商用利用可能なバレンタインデーのアイコンセット１０ ５００以上のモノクロ記号アイコンセット「PICOL」 綺麗なデザインのクレジットカードアイコン15個セット
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
様々なドロップダウンメニューを実装するスクリプト集:phpspot開発日誌
Useful jQuery Drop Down Menu Scripts - DesignModo 様々なドロップダウンメニューを実装するスクリプト集 ページをシンプルに見せつつ、機能性も損なわないようにできるドロップダウンメニューも色々な実装がありますね。 様々なタイプのドロップダウンと、それを実現するためのスクリプトが公開されていていざ自分がドロップダウンを実装するという時に参考にできます 最近はやってるサイトはナビゲーションなんかもシンプルになるように、それでいて十分な機能を提供している気がしますが、ドロップダウンなどをうまく活用していますね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装 CSS3だけで実現する幅広で使えそうなドロップダウン実装チュ
HTML5を使ったファイルアップロード用プログラム集:phpspot開発日誌
10 HTML5 File Upload with jQuery Example HTML5を使ったファイルアップロード用プログラム集 プログレスバー付きや、デスクトップ等からのドラッグ＆ドロップ対応等、HTML5やjQueryを活用したアップローダーの例が公開されています。 プログラムのダウンロードも可能。アップロードはWEBサービスの昨今において必須の技術ですが、こうしたサンプルを見つつ実装方法について一考してみてもよさそうですね ファイルアップロードも昔は単調はフォームだったのが嘘に思えるぐらい進化してますね 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー 超シンプルな画像アップローダー＆画像シェアできるツール「imgur」 今だかつてない使いやすさでUIもクールなマルチアップローダー実装ライブラリ「Plupload」
jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
秀逸なFacebookファンページデザイン集４０:phpspot開発日誌
40 Great Examples of Facebook Fan Pages 秀逸なFacebookファンページデザイン集４０ 予めレイアウトが決まっていますが、各社違和感なくかつ美しくデザインしているところが素晴らしいです。 最近自分のまわりでも殆がFacebookをやっているような状態で、今後もユーザ数が増えていきそうなFacebook。 ファンページ作成に関するデザイン力なんかも求められる時代になってきそうな気がします。 大手企業のきれいにデザインされたページがまとまっていましたので参考にできそうです。 各社デザインがいいのも去ることながら、Facebookファンページという仕組み自体も、Facebook自体の世界観を壊すことなくサードパーティのコンテンツを載せられているという意味でうまく出来ているなぁと感心してしまいますね。 関連エントリ facebookのファンページ用ウィジェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
