プロダクト画像を360度回転させられるようにするjQueryプラグイン５つ:phpspot開発日誌
5 plugins em jQuery para imagens em 360 | Wallace Erick | Desenvolvedor Front-End プロダクト画像を360度回転させられるようにするjQueryプラグイン５つがまとまっています。 ショッピングサイトでたまにみかける、マウスドラッグで回転する製品画像。これをjQueryプラグインによって簡単に実現することが出来ますが、更に５つのjQueryプラグインから自分にあったものを選ぶ際の参考に出来ます。 回転だけでなくズームできるものもあったり、多機能であったり、IEにも対応していたりとそれぞれ特徴があります オンラインショッピングのマイナス面を解消しようと生まれたこういう機能。 実際にやるとなると画像を効率良くいかに撮るかという部分が課題であったりしますが、画像さえあれば実装は簡単にできそうですね。 関連エントリ タイ
〜秒前の実装を簡単にするjQueryプラグイン「Livestamp.js」:phpspot開発日誌
Livestamp.js - a simple, unobtrusive jQuery timeago plugin 〜秒前の実装を簡単にするjQueryプラグイン「Livestamp.js」 最近のリアルタイムなWEBでは、〜秒前、〜時間前といった表示がよくされていて、画面の遷移がなくてもこれが切り替わったりしますが、同じような実装を実現するためのプラグインです。 自分で実装しちゃってもよさそうですが、仕組みとして面白かったのでご紹介。 UNIXのタイムスタンプをタグに入れておいて、後は初期化という感じの使い方です。 待っていると表示が変わることを確認出来ると思います リロードがないと、実は５分前なのに１分前と表示するよりも、こうやってリアルタイムに更新してあげるのはやはり良いUIといえますね 関連エントリ 時間の入力を楽にすることが出来るjQueryプラグイン Youtube動画を自由
Photoshopレイヤーに他のPSDをリンクできて便利なプラグイン「CanLinkIt」:phpspot開発日誌
CanLinkIt Photoshopレイヤーに他のPSDをリンク・共有できて便利なプラグイン「CanLinkIt」。 こちらのプラグインを使うとよく使うアイテムを別PSD化して再利用可能にできるみたい。 例えば、ボタンのよく使う画像があるとします。 別PSDファイルのボタンを読み込んで使えます。デザインを変更すると・・。 すべてのボタンに適用されます。標準でこういう機能がなかったのか、という感じになりますが便利ですね。 よく使うものはライブラリ化しておくと、一括して編集を反映できるのでUIライブラリとかを作る場合に便利かもしれませんね。 関連エントリ PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」
手書きでサイトやアプリデザインする際に便利なテンプレPDF「Sneakpeekit」:phpspot開発日誌
Sneakpeekit | Sketch sheets for Web Designers 手書きでサイトやアプリデザインする際に便利なテンプレPDF「Sneakpeekit」 モックアップ作成ツールは色々ありますが、やっぱり手軽なのは手書きということで印刷して使うタイプの画面デザイン用PDFがiPhone、iPad、PC用等で使える形式で配布されています。 商品ではなく印刷してすぐに使えるのは地味にありがたいですね よーし、パパこれでいいデザインつくっちゃうぞー 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート カッコいいティーザーページ作成用CSS3テンプレート TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」
PHPの基本機能を拡張して便利にできる「UtilityPHP」:phpspot開発日誌
util.php - The PHP programmers best friend - UtilityPHP PHPの基本機能を拡張して便利にできる「UtilityPHP」。 読み込むと、util::〜系の便利関数が沢山使えるようになります。 var_dumpを綺麗に折畳み可能な形で出力してくれる util::var_dump、多次元の配列を１つの配列にする array_flatten や、URLにクリを追加したり削除する add_query_arg, remove_query_arg、httpsアクセスかどうかを判断する is_https など、汎用に利用できそうな関数群が詰まっています。 読み込むと全て使えるようになるものの要らないものも多そうなわけですが、この中から必要なものだけをコピーして使うという使い方で便利に活用できるかなと個人的に思いました。 これはよく使うっていうものは抜
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル:phpspot開発日誌
16 Best CSS3 Transitions And Animations Tutorials WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル。 CSS3が登場したことによって、こんなことできるの？という驚きを最近よく感じていますが、そういうデモのチュートリアル集です。 16個ありますので、すべて見るだけでも見ておくべきだと思いましたのでシェア。 紙を折りたたむ風UIは スクロールで驚きのアニメーション 紙の折畳みや折り曲げエフェクト iPadの輝きをインタラクティブに変更 ビットマップグラフィクでマリオ。画像もキャンバスも利用していない、ピュアなCSS 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3で出来たクールなLightBox実装チュー
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
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ボックスを作成でき
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
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シミュレーターにできる拡
モダンな５０のPhotoshopのボタン用スタイル集:phpspot開発日誌
Free Button Styles | MediaLoot モダンな５０のPhotoshopのボタン用スタイル集。 クリック一発でリアルな質感を実現できるスタイルですが、次のような、モダンなボタン作成にはぴったりのスタイルが公開されているではありませんか。 Appleっぽいボタンもあっていい感じ。 ５０種類のデザインから選びます。カラーは自由にレイヤーカラーを変更すればよいですね これは入れるっきゃないですね 関連エントリ 映画のロゴみたいな超カッコイイロゴが一瞬で作れるPhotoshopスタイル集 Photoshopのクリエイティブで効率化ができるレイヤースタイル２０ ストライプ等、Photoshop用の４００個のパターンまとめ
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」:phpspot開発日誌
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 2012年03月19日- jQuery File Upload Demo 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 Twitter Bootstrap を使ったアップロードのデモなんですが、ファイルを選択するとサムネイルが直ぐに出てくれてます。（複数選択が可能） そして、選択後、すぐアップロードは開始されず、Startボタンを押すと開始されます。 なんか選択したらすぐアップされたなんていうケースがありますのでこれは安心です。 更に、個別にキャンセルが可能なので、アップしようと思った画像と違う物を間違ってアップする事をサムネイルで未然に防げます。 アップした後も、Del
デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」:phpspot開発日誌
DukeLeNoir/jQCloud GitHub デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 作ってみると意外と難しいタグクラウド。それを次のように美しく実装できるタグクラウド実装用プラグインです ワードのリストを次のように配列で渡してあげて初期化するだけです。デザインとかは全部やってくれるみたいです 文字の羅列だけをデザインする上に、毎回ワードが変わるわけなのでなかなかデザインが難しいところですね。 Web2.0と言われた２００５年当時は何処でも見る程よく使われていたインタフェースですが、CSS3を使ってrotateさせたりすることで今ならより進んだ面白い表現ができるかもしれませんね 関連エントリ 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」 HTML5のcanvasを使ったアニメーションするタグクラウド
様々にCSSでデザインされたソーシャルボタンセット:phpspot開発日誌
Demo: CSS Social Buttons 様々にCSSでデザインされたソーシャルボタンセット。 CSSでボタン作ればこんなにも便利だというのが分かるサンプル集になってます。 ボーダーやドロップシャドウ等は自由にデザインできるわけなので本当にちょっとした文字列の変更で多彩なデザインが出来る上に軽くて本当に便利ですね。 １０年前の人が見たら画像にしか見えなかったはずですね。 関連エントリ 円形で良い感じのソーシャルアイコンセット「Circle Social Media Icons」 手書き風だけど綺麗にデザインされたソーシャルアイコンセット「Setway Icon Set」 3Dの立体感が面白いソーシャルアイコンセット
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カレンダーやDateピッカー関連のjQueryプラグイン20:phpspot開発日誌
iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート:phpspot開発日誌