Plupload - A tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus 今だかつてない使いやすさでUIもクールなマルチアップローダー実装ライブラリ「Plupload」。 Flash, Silverlight, Google gears, HTML5, Yahoo Browserplus などの技術を駆使することで多くのブラウザに対応し、ユーザビリティの優れたものになっているようです。 作者は有名なWYSIWYGエディタのTinyMCEのデベロッパーという点も気になります。 アップローダー画面。CMSなどに組み込む場合にも違和感なく使えそうなデザインとUIです。 ↑Add Files で選択したファイルを選ぶとすぐにファイル名が表示され、どんどんファイルを追加していっ

FeedCount-Like Google Analytics Counter FeedBurnerの読者数っぽいアクセスカウンタプログラムが公開されています。 FeedBurnerのカウンタというのは以下のようなものです。 以下は配布されているアクセスカウンタプログラムのデザインです。デザインそっくりですね。 また、このカウンタの数値ですが、Google Analytics API から値を引いてきて表示するものになってます。 プログラムはPHPで公開されていて、EMAILやパスワード、プロファイルの設定をすればあとはそのままというシンプルなものになっています。 <?php define('ga_email','yourGoogleEmail'); define('ga_password','yourGooglePass'); define('ga_profile_id','yourPr

purePDF, a complete actionscript PDF library - sephiroth.it - flash world ActionScript3からPDFを作成出来るライブラリ「purePDF」。 PHPなどからPDFを作成できるライブラリは色々ありましたが、AS3というのは初めてかも。 ライブラリを使って作成されたPDFはこちら（PDF注意） Google Code によってオープンソースで開発されてます。 purePDFのプロジェクトサイト - サンプルなんかも公開されています。 実際に使って検証が必要とは思いますが、サーバサイドにかかる負荷をこれでクライアントサイトに移すことが出来るかも、という点でこのライブラリは注目かもしれません。 関連エントリ PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラリまとめ PHP

PHPをC++に変換して高速化する「HipHop for PHP」をFacebookが公開 : candycane development blog すでにご覧になったかもしれませんが、HipHop for PHP というものがfacebookからGitHubにてオープンソースで出るようです。 PHPのコードをC++のコードに変換できるということで、これまでも同様のものがありましたが、facebookで作成され、月間4000憶というPVの90%以上に耐えうる形で実運用に使われているところが期待せずにはいられないところですね。 これが実際に物凄く使えて安定し広く使われるようになれば、PHPというツールの価値がますます上がりそうです。 開発中はPHPで素早く開発し、本番ではC++のコードが使えるというのはかなり凄いことです。 当たり前ですが、50%のCPU利用率が低下したということなので、単純

30 Websites To Download Free Stock Photos フリーの写真素材が入手出来る30サイトがまとまってました。 すでにご存知のところもあるかもしれませんが、全部網羅したエントリを知っておくと探すときに便利ですね。 stock.xchng Studio7designs Woophy 沢山あるものですね。 関連エントリ フリーフォト、無料写真素材サイト「足成」 5000枚以上のパブリックドメインな写真素材集「Free Stock Photos」

セレクトボックスの項目にチェックボックスを設置し、複数項目の選択を操作しやすくするスクリプトをerichyndsから紹介します。 jQuery MultiSelect Plugin デモページ デモでは上記のベーシックなタイプをはじめ、Optgroupに対応したもの、スタイルシートでデザインを変更したもの、一括操作ができるものなどがあります。 スクリプトのオプションでは、ヘッダの有無、高さの上限、表示位置、シャドウの有無、フェードのスピードなどが変更できます。 jQuery MultiSelect PluginはjQueryのプラグインのため、実装にはjquery.jsが必要です。

洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。 jDiv デモページ デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。 ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <!-- BEGIN MAIN NAV MENU--> <div id="menu"> <ul> <li><a href="#" id="menu1">Rollover me!</a></li> <li><a href="#">Link # 2</a><</li> <li

PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。

hide_email PHPでメールアドレスを画像化せずに簡単にスパム対策する方法です。 方法というよりも関数が公開されていて、次のように非常に簡単に使うことができます。 <?php echo hide_email('test@test.com'); ?> hide_email 関数に 自分のメールアドレス を渡すだけです。 これだけで、次のようにメールアドレスがクリックできる形で表示されます。 [javascript protected email address] HTMLに出力されるコードは以下です。 <SPAN id=e282852682>[javascript protected email address]</SPAN> <SCRIPT type=text/javascript>/*<![CDATA[*/eval("var a=\"PcXq@l82y.H3I_zNAtLQbr7

Jilion 無茶苦茶カッコいいHTML5 ビデオプレイヤー「SublimeVideo」。 Steve Jobs がFlash>HTML5といったことで盛り上がっている(?) HTML5ですが、クールなHTML5の動画プレイヤーが公開されています。 全画面モードにできたり、カッコいいコントロールパネルがついていたりと、Flash要らないんじゃないかという気にもなってしまうかも。 フォーカスを外れるとプログレスバーもフェードアウトしながらカッコよく消えます。 流れているムービーもカッコいいので必見です。 まだ公開はされていませんが、近いうちにフリーで公開されるようです。 現時点では、Safari4、Chrome4、IE(with Chrome Frame) に対応しているようです。 関連エントリ 最近公開のHTML5関連の参考サイト色々まとめ HTML5やCSS3のチートシート色々 HTML

IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹介しますね。 HTML5をIEでも使用可能にする html5.jsを読み込んで、HTML5をIEでも使用可能にする text-shadowプロパティー IEでtext-shadowプロパティーをfilterを使って実現 IEでのbox-shadow filterを使ってシャドウに見せるテクニック 角丸 モダンブラウザはborder-radiusで、IEにはDD roundiesを適用 マルチカラム div要素にカラムを追加する。IE用にはjQueryプラグインで実装 HTML5の表現はだんだん増えてくるかと思うので、一

ストックマガジンをご活用下さい。 『サイトを毎回チェックしている暇がない』『RSS購読が煩わしい』そんな方には【ストックマガジン】がオススメです。投稿があった時だけ、1週間に1回のペースで自動的にデザインのネタをあなたのメールへお届けします。メールチェックのついでに使えそうなネタのみを見つけて参考にすることができます。是非登録しご活用下さい。 登録はメールアドレスを下に入力して送信すれば登録完了！ ≫登録はコチラから フリーで使える写真素材・デザインの使える情報サイトの紹介 「デザイナーになりたい」そんなデザイナーの卵におくる個人作品の支援サイト、デザインの一般論や多彩なツール・基礎知識などプロになるためにしっかり身につけておきたい情報がたくさん！他にも色合わせチャートや便利なソフトショートカット表・Macの基礎講座を詰め込んだPDFのダウンロードなどが可能です！

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

Image magnifier デモ この画像の一部だけを拡大するスタイルシートは改良が重ねられたもので、よりシンプルで、より滑らかな動作を実現しています。 実装には画像が二枚必要で、デモでは左側のサムネイルと右側にその三倍のサイズの画像が使用されています。

24 Stylish and Natural Photoshop Brush Collections Media Militia 色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシがまとまっていましたのでご紹介。 雲、木、植物、雷、滝などのブラシがまとまっています。リアルなのでバックグラウンドイメージなどに使うとよさそうです。 雲のPhotoshopブラシ。デフォルトの雲模様よりもリアルですね 木のブラシ。種類が色々 リアルな花のブラシセット 雷のブラシ 滝のブラシもあります こうしたリアルな素材は覚えておけばサイトの彩りに使うことができそうなのでストックしておくと良いかもしれませんね。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット 光が超カッコいいPhotoshopのブラシ色々まとめ 無茶苦茶クールな光のPhotoshopブラシ集

ウェブのUIでよく利用されるエレメントがセットになった無料のPSD素材をMediaLootから紹介します。 Freebie: Massive Web UI & Button Set UIセットにはコントロールボタンやアロー、ベーシックなシンボルをはじめ、インフォボックス、テキストボックス、パンくずやボタンなどのナビゲーション、ドロップダウン、スピーチバブル、検索フォーム、ローディングエレメントなどが揃っています。 ダウンロードできるPSDファイルは、3つのスタイル、7つのカラーがあらかじめ用意されています。 素材の利用にあたっては個人・商用ともに無料で利用が可能で、再販などは不可とのことです。 詳細はサイトおよび添付のテキストを参照ください。

モックアップを作成したい。 そんなときに使えそうなのが、『MockFlow』。モックアップ作成AIRアプリです。 元々Webサービスでモックアップ / ワイヤーフレームを作成・共有できたMockFlowですが、そのAIRアプリが出たようですね。Web版と連携しているようです。 UIが洗練されていて、使っていて気持ちいいですね。コンポーネントも充実していて、imageやBanner、Button、Pagination、Textなど、ドラッグして配置することでモックアップを作成できます。 AIRアプリのUI。なかなかいい感じ。 ドラッグしたコンポーネントをダブルクリックすると、値や色を変更できたり、deleteキーで削除できたりと使いやすいですね。 ただ日本語が使用できないのが難点。アルファベットしか打てないようになっています。 一度見てみてください。 MockFlow 斉藤和義の武道館ライブ

MP3ファイルのテキストリンクの横に自動でめちゃめちゃ小さいMP3プレイヤーを設置できるスクリプトを紹介します。 1 Bit Audio Player デモ テキストの右に添えてあるアイコンのクリックでオーディオの再生と停止がコントロールでき、再生中はアイコンが変更されます。 プレイヤーはFlashのMP3プレイヤーが利用されています。 スクリプトはスタンドアローンで利用でき、またWordPressのプラグインとしても動作します。 設置時には、MP3ファイルのリンクの横に自動でアイコンが表示されます。 また、ブックマークレットも用意されており、スクリプトが設置されていないサイトでも1 Bit Audio Playerを利用することができます。 1 Bit Bookmarklet 1 Bit Audio Player（ブックマークレット）

高精細のグランジ風のペーパーのテクスチャ素材がまとめてダウンロードできるパッケージをArbenting Freebiesから紹介します。 6 Free High-Res Grungy Paper Textures ダウンロードできるテクスチャ素材は6枚がセットになっており、フォーマットはJPEGで、サイズは2336x3504と高精細なものとなっています。 グランジ風のペーパーのテクスチャは、こってりしたグランジ風ではなく、控えめな感じです。

ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」 2010年01月28日- Use jQuery - Blog - Brosho 'Design in the Browser' jQuery Plugin ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」。 インスタントにCSSでデザインというと、Firefox の EditCSS とか CssMate とか サイトのCSSを見たままリアルタイムに編集するツール色々 で紹介したもの等色々ありますね。 今回紹介するのは jQuery のプラグイン形式でインクルード後、初期化すると、以下のサイクルでサイトデザインが出来ます。 (1) エレメントをクリック (2) CSSを記述 (3) 1,2 の繰り返し

League Gothic 太くて強いフォントを探している。 そんなときにおすすめなのが、『20 Fonts Ideal for Big and Powerful Headings』。ヘッドライン要素に使えるボールドなフォント集です。 かなりかっこいいのが揃っていますね。 Franchise Molot Vollkorn Mido ライセンスはそれぞれあるので確認してください。 20 Fonts Ideal for Big and Powerful Headings もう5時か。。いろいろ進めなくては。

392 cool photoshop gradients ストックしておくと楽できそうなPhotoshop用グラデーション392種類。すでに紹介したものも含まれていますが、多数のグラデーションが紹介されてます。 ちょっとグラデーションを使いたいときにクリック一発で適用できるグラデーションのコレクションです。 あまり入れすぎるとスクロールバーが小さくなりすぎて使いにくい懸念もあるので入れすぎるのも問題かもしれませんが好みの効果を入れておくとよさそうですね。

これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ

スライド時のエフェクトやスピードをカスタマイズして、さまざまなアニメーションで表示させるスクリプトを紹介します。 sexyCycle image jQuery plugin デモページ 上記デモページでは、流れるようなアニメーションをはじめ、バウンドや収縮などさまざまなものが楽しめます。 さらに面白い動きをするTimerやRandomのデモページも公開されています。

Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a la Google デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6 Chrome Adobe AIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。 UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl

Free Icon Set for Designers ? The Go Green! Icon Set (108 Icons) - Speckyboy Design Magazine 次のようなシンプルがいい感じの緑アイコン108のセットが公開されています。 なぜ緑にしたかは作者さんのみぞ知るのですが、他の色にしちゃってもよさそうです アイコンはPNG形式で公開されています。 関連エントリ 白黒だけどシンプルで使いやすそうなアイコンセット「PICOL Icon Library」 シンプルなUIアイコンセット「Simplicio」 シンプルだけど味のある８４アイコンセット カクカクしてシンプルなアイコンセット「Blockie Icons」

Simple Cloud API PHPから各種クラウドにアクセスするためのライブラリ「Simple Cloud API」というものが公開されています。 クラウドといっても色々ですが、現在はストレージ用のAmazon S3や、Windows Azure Blob Storage、Nirvanixに対応しているそうです。 今後の対応予定については以下のようになってるようです。 普通のオープンソースではなく、ZendがSponsoredになっているところも注目で今後の発展が期待されます。 これは、Zend Framework のコンポーネント Zend_Cloud としても公開される予定があるとのことです。 いつクラウドを使う機会があるかわかりませんので覚えておいてもよいかもしれませんね。

PSDファイルを見てデザイン力を高めたい。 そんなあなたにおすすめなのが、『35 Exclusive And High Quality PSD Photoshop Resource Sites』。クオリティーの高いPSDが見つかるサイト集です。 いい感じなのをいくつかご紹介しますね。 deviantART PSD素材だけでなく、アイコンやテクスチャなどが探せるdeviantART Photoshop Candy 魅力的なエントリーが並んでいて、しっかり作り込まれているPhotoshop Candy FreePSD サイトテンプレートなど、たくさんの元ファイルが見つかるFreePSD PSGalaxy アイコンやロゴのPSD、ブラシなどが見つかるPSGalaxy BittBox Photoshopに関する情報が満載のBittBox Photoshopカテゴリー 気になったサイトをRSS購読し

case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-01-22 >

Lightboxなどのスクリプトを使用しないで、スタイルシートで実装する画像を拡大するテクニックをCSSplayから紹介します。 画像を拡大表示 拡大画像を消すのは、右上のアイコンです。 仕組みは簡単に説明すると、サムネイル画像と拡大画像（テキスト含む）をインライン要素として配置し、focusとactive時にdisplayやpositionなどを変更しています。 対応ブラウザは、Safari(PC), Google Chromeとのことですが、上記キャプチャはFirefox3.5です。 IE6でも動作するバージョンは「CSS Light Box - Click version」です。 このテクニックは画像ギャラリーだけでなく、商品写真の拡大などにも応用がきくものとなっています。

ペイントブラシで一つ一つ描かないで、簡単に水彩画のエフェクトが楽しめる無料のPhotoshopのブラシをSix Revisionsから紹介します。

日本語サイトにも対応した、指定したウェブページをPDFファイルに変換するオンラインサービスを紹介します。 PDFmyURL.com ウェブページをPDFに変換するのは簡単で、登録など面倒くさいことは必要ありません。 PDFmyURL.comにアクセス。 「Enter url location to pdf」にページのURLを入力。 右の「P」ボタンをクリック。 以上で操作は完了です。 あとはPDFファイルがダウンロードされるのを待つだけです。 当サイトのトップページをPDFファイルに変換したところ、下記のようになりました。

シンプルなものからグランジ風のものまで揃った、ポラロイドのフレーム素材をAmEeR-Saから紹介します。

TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。

80 Photoshop Actions for Giving Your Pictures a Vintage Look | Web Design Ledger 写真にビンテージ感を出せるPhotoshopのアクション集が多数まとまったエントリのご紹介です。 いろいろと簡単に実施できるのでそれぞれやってみて一番よいものを、といった使い方なんかによさそうですね。 元の写真もいいんだと思いますがサンプルはかなりよい感じになってますね。 関連エントリ 肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い 写真を一瞬でクールに出来るPhotoshopアクションが色々 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集

google-maps-icons - Project Hosting on Google Code GoogleMapを使ったサイト作成時に使えそうなカスタムアイコン900種類以上がセットになった「google-maps-icons」 次のような実に多数のGoogleMap用アイコンが公開されています。 画像はPNGフォーマットとなっています。 GoogleMap 以外の部分にも使うことができそうですね。 関連エントリ 2009年に発見した秀作アイコンのまとめ iPhoneアプリのツールバー部分に使えそうなアイコン色々

20 Awesome High Quality Abstract Photoshop Brushes Sets とってもクールな抽象ブラシセットいろいろがまとまったエントリのご紹介です。 過去にすでに紹介したものも含まれていますが、そうでないものも含まれていました。 ブラシ利用の後に、ブラシをいかに光り輝かせるかという部分もちょっとしたテクニックが必要ですが、元の形があると楽にカッコいいものが作れますね。

ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

20 Fresh JavaScript Data Visualization Libraries とても綺麗なグラフ等を描けるフレッシュなJavaScriptライブラリが色々と最近になってもリリースされていますね。 サムネイルだけ見ても、JavaScript でやってるの？というような綺麗なものが多いです。すでに紹介したものもあると思いますがご参考までに。 Highcharts gRaphaël JavaScript InfoVis Toolkit JS Charts Bluff Timeline データをビジュアライズしたい際の参考になりそうですね。 関連エントリ JavaScript用のグラフ描画ライブラリ色々

20 Gourgeous Free Apple Files & Icons webtoolfeed.com リアルで綺麗なアップルアイコンやファイルが色々と公開されています。 次のように無茶苦茶リアルで見るだけでも関心してしまいます。アップル関連のサイトとか、iPhoneアプリの紹介ページとかで使えますね。 こうしたアイコンは比較的作りやすいのかもしれませんが、それにしても綺麗に作られてますね。

大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、

In this Advanced Photoshop tutorial we'll create a nice cardboard effect and play with a neat torn edge effect. Please note that this is an advanced tutorial and certain assumptions have been made about your ability to get around inside the Photoshop interface.

グランジ系のテクスチャを探している。 そんなときにおすすめなのが、『Clean Grunge Texture Pack』。商用無料のライトグランジ系テクスチャパックです。 2400px程度の高解像度の画像が8個入っていますね。きついグランジではなくライトな感じなので、使いやすいのではないでしょうか。 zipファイルをダウンロードできるので、一度見てみてください。 Clean Grunge Texture Pack そろそろ出かけようかな。

illustratorで使えるパターンを探している。 そんなときにおすすめなのが、『225+ Free Adobe Illustrator Patterns』。フリーのillustratorパターン集です。 aiとpng、そしてPhotoshop用のパターンファイル（.pat）も入っていたりしますね。 円形のパターン 格子縞のパターン ハーフトーンパターン ハート柄のパターン 水玉のパターン 斜線のパターン ダイヤモンド型のパターン ダマスコ織のパターン ほかにもいろいろあるので、ぜひ見てみてください。 225+ Free Adobe Illustrator Patterns 今日は金曜日！テンション上がってきた。