５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル:phpspot開発日誌
50 curved drop shadow effects, free PSD ５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル。 次のように、色々なドロップシャドウのデザインが収録されたPSDファイルが配布されています。 ちょっと変わったデザインの物も多く収録されているので試してみてもいいかも。 関連エントリ これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 クリエイティブでカッコいいPhotoshopブラシセット５０ 動物に関するPhotoshopブラシ色々 プロレベルのPhotoshopチュートリアル集
ブーケがスプラッシュしている超カッコいい画像作成Photoshopチュートリアル:phpspot開発日誌
Photoshop Roses bouquet splash effect for image ブーケがスプラッシュしている超カッコいい画像作成Photoshopチュートリアル。 次のようなブーケをスプラッシュさせるチュートリアルです。ブーケ以外にもスプラッシュさせることで通常ありえないエフェクトを作ってインパクト大にできそうですね。 かなりリアルに合成してますね。 関連エントリ プロレベルのPhotoshopチュートリアル集 クラウド時代にファンシーな雲を描画するPhotoshopチュートリアル ボタン作成のPhotoshopチュートリアル集
HTML5ベースの動画プレイヤー１１:phpspot開発日誌
11 Efficient HTML5 Video Players | blueblots.com HTML5ベースの動画プレイヤーが１１種類まとまったエントリのご紹介です。 UIがそれぞれ個性を持っているので好みに合わせて選ぶことができそう Flashを使うことなく、既存のWEB技術でデザインを調整できるのはいいですね。 関連エントリ HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 これは見ておくべきHTML5のCanvasを使ったデモ集 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」:phpspot開発日誌
jquery.qrcode - jquery plugin for a pure browser qrcode generation QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」。 通常QRコードというとサーバ側で画像にして画像を送信するというのが一般的ですが、このプラグインはブラウザ上で描画するタイプです。 <div id="qrcode"></div> というマークアップがあったとして、次のようにすることでQRコードを埋め込みます。 jquery('#qrcode').qrcode("this plugin is great"); カメラ等で読み取れば、「this plugin is great」がテキストとして読み取れます。 canvasを使っているので、canvas対応ブラウザでしか動作しない点に注意。 関連エントリ リンクにカーソルを合わせる
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
JavaScriptでIEかどうかをたったの1行で判別する方法:phpspot開発日誌
Dean Edwards: Sniff! My current frog exaggerator of choice JavaScriptでIEかどうかをたったの1行で判別する方法。 なんと、次の1行だけで、isMSIE 変数に、IEで見れば true 、そうでなければ false を代入することが出来ます。 var isMSIE = /*@cc_on!@*/false; 次のサンプルコードで確認しました。 <html> <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { alert('IE!'); } else { alert('not IE!'); } </script> <body> </body> </html> IEであれば IE! を alert し、そうでなければ not I
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」:phpspot開発日誌
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 2011年04月06日- ChocolateChip-UI コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 ダウンロードしたサンプルにはかなりの量のiOSアプリ風のUIが含まれていて、これスマフォサイト用のインタフェース作成には困らないんじゃないかという感じです。 リストのUI 読み込み画面 アイコン付きテーブル ちょっとUIを変えてみる例 サムネイル付きリスト ちょっとデザインを変える 普通のリストも。 デザインを変えたリストも ラベルつきのリスト ボタンや、ON/OFFも スライダーも 背景の模様も自由に変えられます ボタンも豊富 ツールバーデザイン。アイコンを入れたり色々 更にカラフルなボタンやアイコンのみのボタンも。 タブも作れます
PHPでよく使うライブラリを毎回requireしないでよくなる方法:phpspot開発日誌
PHPでよく使うライブラリを毎回requireしないでよくなる方法。 PHPエクステンション等を使ってライブラリをPHPに組み込んでしまえば、何もrequireせずに関数が使えたりしますが、phpで書かれたライブラリは毎回require・includeが必要です。 よく使うライブラリは毎回requireって書くのは面倒だ、という場合、php.ini の auto_prepend_file に設定しておくと便利です。 auto_prepend_file=/path/to/init.php とりあえず１つのファイルを設定しておいて、あとはその中からrequireすればapacheの再起動なしに設定変更出来ます。 特に、以下のようなケースで有効です。 ・毎回この機能は絶対使う ・頻度的にかなり多く使う ・開発中のサーバで、デバッグ機能を組み込んでおきたい 但し、注意点として、あまり多くしすぎると
PHPでバッチ処理する際に便利なglob使いこなしテクニック:phpspot開発日誌
PHP Magic Function : glob() | PHP Code Base PHPでバッチ処理する際に便利なglob使いこなしテクニック。 globl("*.gif"); 等とすることで、同じディレクトリにある gif 拡張子のファイルを配列で受け取るなんていう便利な関数がありますが、その glob をもっと使いこなすテクニックが紹介されていましたのでご紹介。 階層的なファイルを探索 glob('pear/*/DB/*') のようにして、階層的にファイルを探索することが出来る 第二引数を活用 第二引数は個人的に使ったことなかったのですが、これはかなり便利そう glob("*.gif", 第二引数); GLOB_MARK: 返ってきたディレクトリの最後に / を付ける GLOB_NOSORT: ソートを行わない GLOB_NOCHECK: 検索パターンにマッチするファイルが見つか
PHPのスクリプトやライブラリがダウンロードできる海外サイト１２:phpspot開発日誌
12 Websites Useful in Downloading PHP Scripts | blueblots.com PHPのスクリプトやライブラリがダウンロードできる海外サイト１２。 WordPress等の有名なオープンソースとかを活用するのもいいですが、小物のPHPスクリプトや、直接ソースに組み込んで使えたりするライブラリなんかを探せるサイトのまとめがありました。 日本にもこうしたサイトは多数ありますが、日本に見当たらない場合なんかは探してみると自分で１から作る手間が省けたりするかもしれません。 The PHP Resource Index Script Dungeon free-php PHP Classes Repository Scripts.com Hot Scripts 有名どころも多いですが個人的に知らないところも何個かありました。 リンク先は元のエントリを参照してみ
Node.js上でPHPを呼び出せる「NodePHP」:phpspot開発日誌
davidcoallier/node-php - GitHub Node.js上でPHPを呼び出せる「NodePHP」。 Node.js上のコードからFastCGIのインタフェースを使ってPHPを呼び出すというもの。 そもそもそんなことしなくても、NginxとFastCGIでPHP動かしたほうがいいんじゃ？という物ですし、作者自身もNode.jsのコンセプトに反する物だとしています。 とはいえ、なかなか面白い物だと思うのでご紹介。 Node.jsからfastcgi経由でphpを呼び出す部分 https://github.com/davidcoallier/node-php/blob/master/lib/nodephp.js そのまま使わないとしても１つのコード例として使える場面がありそうです。 関連エントリ node.jsに関する基礎や開発・チュートリアルのまとめ node.jsでシンプ
PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」:phpspot開発日誌
php-console - Google Chrome extension for displaying PHP errors/exceptions/debug messages in browser console or notification popups - Google Project Hosting PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」。 Chromeの拡張とPHPのソースコードで動かすもので、PHPのエラーを、Chromeのコンソールウィンドウや、画面内にポップアップでポコポコ出せたりします。 要はChrome用のFirePHPみたいなものです。 以下のようにエラーレベルとエラーメッセージが表示されます。 コンソールの例 ポップアップの例 この機能が使えるかどうか？はアドレスバーで確認できます。使える場合はアイコンが次のように表
年表作り等に使えるタイムライン実装用jQueryプラグイン「timeglider.js」:phpspot開発日誌
Timeglider jQuery Plugin/Widget 年表作り等に使えるタイムライン実装用jQueryプラグイン「timeglider.js」。 マウスでドラッグ＆ドロップしたり、拡大できたりする年表のUIを提供してくれます。 例えば、どういうJavaScriptライブラリが何年に登場したのか、みたいなものを表示するのに使えます。 誰がいつ入社したのか？といった時系列のデータの表示なんかにも使えそう。 年代なんかも表示できます。 更にアイテムをクリックした場合には注釈を表示することも出来ます。 あまり使う機会はないかもしれませんが、こうしたライブラリはそれほど多く無いので覚えておいても損はなさそうです。 関連エントリ PHP・CSS・jQueryを使った横向きのタイムライン実装例 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.
指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」:phpspot開発日誌
FontSize | jQuery Plugins 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 特定のエレメントをクリックした際に、指定した要素のフォントサイズをUPさせることが可能。最大や最小のサイズも指定出来ます。 使い方は簡単で、必要なライブラリを読み込んだら次のように呼び出すだけです。 $(element).fontSizer({ action: "up", elements: "#content", max: 36 }); デモページはこちら コンテンツをどんどん大きくしていった例。maxを指定しておくと一定以上からサイズは大きくならなくなります。 エレメントを絞ることで、サイト全体のレイアウトが崩れることもありません。 ちょっとしたユーザビリティの向上に知っておいてもよさそうなプラグインですね。 関連エントリ コンピ
白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット:phpspot開発日誌
JustVector Social Icons 1.0 Alex Peattie, a web developer and designer. 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット。 次のようなアイコンが公開されています。 形式は、EPS、SVG、AI、PNG形式で配布してるようです。 当然ながらPNGのものは32x32のラスター形式になっています。 evernote、amazon、facebook等のアイコンもありますね。 関連エントリ iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 jQuery UI のアイコンチートシート モダンなブラウザアイコンセット９
IE9にも対応したCSS3リファレンスサイト「css3files」:phpspot開発日誌
CSS3 properties exposed | css3files.com IE9にも対応したCSS3リファレンスサイト「css3files」 CSS3のプロパティがカテゴリごとにまとまっており、それぞれのプロパティについて、ブラウザ対応や、使い方、サンプルが見やすく整理されていていい感じす。 先日発表されたIE9にも対応しているので、CSS3を使う場合には覚えておくとよさそうですね。 互換性の図。Internet Explorer 9 があって、IE9でも使えることがすぐ分かります。Firefox 4 もありますね。 ↓↓↓適用の図も表示。これは分かりやすい サイト自体にもCSS3の利用例が散りばめられている点にも注目。 今後、IE9のシェアはどんどん上がってくるでしょうから、CSS3が普通に使える日は近そうですね。 関連エントリ インタフェースが良くてプレビューも見やすいCSS3コ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
475種類の汎用に使えるフリーのアイコンセット:phpspot開発日誌