Unify Project iOSやAndroidOS以外にデスクトップでも動くアプリを共通で作れる「Unify」 iOSとAndroidOS用にPhoneGapを使って共通化し、更にWindows、MacOS用にAIRでも動くような仕組みを提供してくれるそうです。 アプリ作成に使うのはCSS3やHTML5,JavaScriptといった仕組み。 動作するアプリケーションのデモは次のムービーで確認できます 今後、ますますスマートフォンの市場が盛り上がると思いますが、クロスプラットフォームで動作するものをこうしたもので作り、ターゲットとするマーケットを拡大することが出来ますね。 若干、HTML5のアプリは速度が気になるということもありますが、今後ハードウェアの進化によってストレスのないUIも作れていくと思います。 １つの選択肢として覚えておいてもよいかも 関連エントリ これは注目のHTML5を

Phraseanet IV 写真、動画、音声等をリッチなUIで管理出来るOSSのPHPアプリ「Phraseanet」。 次のようなリッチなUIでメディアファイルをブラウザ上で管理することが出来ます。 管理画面、アップロード画面、整理、LightBoxによる表示、レポート機能などが組み込まれています。 沢山のドキュメントをブラウザ上で管理したり閲覧したりする場合に使えるかもしれませんね。 関連エントリ オープンソースの便利PHPスクリプトまとめサイト「Open Source PHP」 オープンソースGoogleAnalytics風、PHP製アクセス解析フレームワーク「Open Web Analytics」 PHPからiPhoneに通知を送るためのオープンソースの仕組み「apns-php」 オープンソースのphp広告管理システム

長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ

Amazon Web Services Blog: New AWS SDK for PHP EC2等のAmazonウェブサービスをPHPから使えるNEWな公式SDKがアップデートされたそうです。 本パッケージは次の殆のAWSインフラに対応しています。 ・Amazon Elastic Compute Cloud ・Amazon Simple Storage Service ・Amazon SimpleDB ・Amazon CloudFront ・Amazon Simple Queue Service ・Amazon Simple Notification Service ・Amazon CloudWatch ・AWS Identity and Access Management サンプルコードが充実しており、PEARからのインストールも可能 標準のコマンドラインツールでもできるけど、使い慣れ

Nick Farina - iOS Icon Template for Perfectionists iPhone4用もあるiOSのアイコンテンプレートPhotoshopファイル。 iPhone4, iPhone, iPad用のテンプレートです。 iOS用のアイコンをサクッと作りたい場合に活用できそうですね。 関連エントリ iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhone等のモバイルデバイス向けWordPressテーマ色々

Free High Quality PSD Buttons, Icons & Badges - SloDive ハイクオリティなPhotoshopのボタン、アイコン、バッジ等のテンプレ集がまとまっていて活用できそうです。 凝ったデザインのボタンもテンプレを活用することですぐ作れるので効率化できますね。 Aero Avatar and SIG Free Button Pack Glass Video Playback Buttons PSD Icons Vol. 1 Windows Buttons 全部見る 関連エントリ サイトのデザインやイメージ画像に使えるPhotoshopテンプレート集 iPhone4のGUIパーツのPhotoshopテンプレート そのまま使えるWEBレイアウトのPhotoshopテンプレート40 iPhone4向けのアイコン作成用Photoshopテンプレートファイル

Skullribbles - Free Photoshop Brushes | Brush King ちょっぴりダークな印象を出したい場合につかえるPhotoshopブラシ「Skullribbles」。 次のような骸骨や骨等、ちょっとブラックな印象のPhotoshopブラシが公開されています。 ちょっと怖いですが落書きっぽいのがいい感じです。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ クリエイティブでカッコいいPhotoshopブラシセット５０ 非常に美しい光などのPhotoshopブラシいろいろ ペンキをぶちまけたようなクールなPhotoshopブラシ色々

Power dump() on your PHP applications | News | Phil Sturgeon PHPで変数を若干分かりやすくスタイリングしてくれる関数が紹介されています。 基本的にvar_dumpなのですが、<fieldset>と<legend>タグ、CSSを使い比較的分かりやすく表示してくれます。 自分なりに見やすくなるようにデザインしておくと便利に使えるかもしれませんね。 関連エントリ PHPのデバッグを補助してくれるFirefoxエクステンション「Xdebug Helper」 PHPの「Segmentation Fault」でのデバッグ方法

Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.com かなりクールにデザインされたPhotoshop用のボタンテンプレート集。 CSS3でかなりボタンをデザインできるようになったとはいえ、そこまでやるなら画像にしちゃったほうが、という場面も多くあります。 Photoshop用のボタンテンプレートが色々まとまっていたのでデザインの際の参考にできそうです。 36 Free High Quality Web Buttons Different buttons and states with sliders and drop downs by James McDonald Download 60 glossy web buttons in PSD & PNG Grey Button with hover by Ignaci

少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」 2010年10月04日- jQuery plugin: Easy Accordion | Andrea Cima Serniotti 少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」。 次のようなクールなアコーディオンが簡単に実装することが出来ます。 コンテンツをタイマーで自動的に切り替えることも可能 コンテンツは次のように定義しておいて後はjQueryでやってくれるというもの。 <div id="accordion-2"> <dl> <dt>Slide title</dt> <dd><h2>First mammoth here</h2><p><img src="images/mammoths/img1.p

Liquidicity 2400 Flag Icon Set クールな国旗アイコンがサイズ別に2400個まとまったセット 16x16, 24x24, 32x32, 48x48, 64x64 サイズがそれぞれ含まれます。 微妙な立体感がクールです。 64x64という大きなサイズも含まれているので利用範囲は広そうです。 関連エントリ サイトで使える500近いフリーのPNGアイコンセット「spirit20」 iPhone4向けのアイコン作成用Photoshopテンプレートファイル 手書き感がなんとも素晴らしいアイコンセット集 アイコン検索エンジントップ１０

Box2d - by Pixel Lab JavaScriptの物理エンジン「Box2d」。 SourceForgeで開発版のクローンのデモで、いい感じに物理エンジンがブラウザ上で実現されています。 デモを見るだけでも楽しいので是非見てみましょう。 ActionScript3でも同じ名前のライブラリがありますね。 Agent8Ball このエンジンを使って作られたゲームもいい感じ 関連エントリ Actionscriptで書かれた物理エンジンライブラリ「jiglibflash」 3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集 ActionScript3用3D物理エンジンライブラリ「WOW-Engine」

jQuery Title Alert | Jonatan Heyman | heyman.info タイトルバーで警告を表示するjQueryプラグイン「Title Alert」。 プラグインに入っている関数を呼び出すとタイトルバーを一定期間別のタイトルをタイマーで切り替えることが出来ます。 タイトルバーを切り替えることで、Windowsであればタスクバーの状態も変わるので、一定期間アイドル時間を過ぎたら点滅させるといった使い方が想定されます。 実装コードは次のようになってます。 $.titleAlert("New chat message!", { requireBlur:false, stopOnFocus:false, duration:4000, interval:700 }); 関連エントリ ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecke

Compact News Previewer with jQuery | Codrops コンパクトでクールなニュース表示ウィジェット実装デモ＆サンプルが公開されています。 次のようなクールなUIでニュースを表示することが可能。 自サイトのニュースや、話題のニュースなんかを表示させても面白そうです。 アニメーションもいい感じで動きます。 jQueryとCSS3を使ってデザインされており、サイトの解説記事を読むことで勉強にもなります。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 キャンバスを使ったお絵かきウィジェットが実装できるjQueryプラグイン「DrawBox」 PHPで作るメッセージが流れるTwitterウィジェット クールなデジタル時計ウィジ

Icons By Enliven Labs シンプルだけど汎用的で使い勝手の良さそうな円形アイコン集「Discons」 次のような実に使い勝手の良さそうなアイコン集が配布されています。 様々なデザインにマッチしそうなシンプルさですね。 関連エントリ サイトで使える500近いフリーのPNGアイコンセット「spirit20」 iPhone4向けのアイコン作成用Photoshopテンプレートファイル 10セットの1000種類にのぼる秀逸なフリーのアイコン集 アイコン検索エンジントップ１０

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmap... 次の記事 ≫：WEBレイアウト作成用のモック作成ツールキット

Free Sketching & Wireframing Kit WEBレイアウト作成用のモック作成ツールキット。 次のようなデザインで、UIパーツがつまったツールキットが各種ベクターフォーマット（.ai, .pdf, .svg, .eps) の形式でダウンロードすることが出来ます。 モック作成のテンプレ等は色々ありますが、デザインが本当にモックっぽいところが特徴 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる「Dynamic Dummy Image Generator」

これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 2010年10月07日- CSS3 Animated Bubble Buttons | Tutorialzine これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例です。 ボタンにカーソルを合わせるとカッコよく背景がアニメーションされ、よりボタンが押したくなるかもしれないテクニックです。 デザイナの方は１つのテクニックとして知っておいて損はしなさそうなテクニックなので押さえておいてもよいかも。 デモページで見てみる アニメーションに使う背景画像。 アニメーション自体は transition プロパティを用いて実装されています。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 I

jQuery & PHP Powered User Manager BitsNTuts.Com jQuery | CSS | PHP | MySQL Tutorials & Articles jQueryとPHPを使ったモダンなユーザ管理機能実装デモ。 ユーザ登録、ログインといった機能は画面遷移するのが通常ですが、jQueryを使い画面遷移なしのモダンなログイン機能・ユーザ登録を実現するためのコードです。 デモということでそのまま本番プログラムとして使う場合にはチェックはした方がよいですが、ダウンロードして使うことが出来ます。 ページヘッダーに表示されるログインのタブ クリックするとニョキっと表示され、そのままログイン。 「Not Registerd?〜」の部分を押すと登録画面がLightBox風に表示されます。 ユーザデータがMySQLに保存される部分までのPHPコードも同梱されており、

jQuery Plugin: jQuery-Notes 1.0.8 画像の上に落書きできるjQueryプラグイン「jQuery-Notes」。 次のようにFlickrっぽく画像の上に落書きする機能を簡単に提供することが出来ます。 jQueryプラグインだけでなく、ちゃんと保存できるようにサーバサイド用のphpスクリプトも含まれています。 実装も簡単で $(element).jQueryNotes({ options }); でOK 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル

Filter Forge - Photoshop Plugin to Create Your Own Filters Photoshopフィルタを簡単に作れるプラグイン「Filter Forge」。 フィルタによって様々な画像加工も一瞬で終わらせることが出来ますがそんなフィルタを簡単に自作できるプラグインです。 ビジュアルなノードエディタによってプログラミングレスでフィルタを作ることが可能。 作ったフィルタはオンラインでシェアすることも出来ます。 ~ FIlter Forge を使って作られたフィルタ集。7000種類以上が登録されており、実に様々なフィルタが作れるようです。

Bugaboo App iPhone/iPad用のサイトを作る際のデバッグに便利な「Bugaboo」。 デスクトップに入れたSafariで動作確認をしても、実際には若干の違いがあってうまく動かない場合がありますね。 この仕組は、iPhoneにはアプリとしてBugaboo Appを入れておくと、iPhone上にデーモンが起動して、PC等のブラウザから直接iPhoneに繋いでJavaScriptデバッグできるというものです。 デスクトップにはiPhoneのデバッグコンソールが現れ、デスクトップから直接JavaScriptのコマンドを実行して動作確認することが可能です。 動きを見てみる場合は以下のムービーを参照して下さい。

Showcase of 50 Dark Portfolio Designs | Boost Inspiration ダークでクールなポートフォリオデザイン５０。 デザイン時の参考にできそうなクールなサイトデザイン集です。 Twice Trikoder Lighthouse London Bret Glassett Leah Haggar 見るだけでも楽しめますね。 全部見る 関連エントリ クリエイティブなデザインのCSSサイト２７ CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」 一流のサイトデザインを一から作成する手順集

Videozoom 動画ブログを作りたい際に使えるWordPressテーマ「Videozoom」。 有償ですが、かなりクールで、動画をメインにかっこいいブログを作りたい際には検討してみてもいいかも。 デモはこちら シングルライセンスで＄６９と、自分で１から作ることを考えると安いかも。 関連エントリ かなり美麗なフリーのWordPressテーマ60 スモールビジネス向けのWordPressテーマ１０ iPhone等のモバイルデバイス向けWordPressテーマ色々 会社でも使えそうなWordPressテーマ２０ 黒ベースのハイクオリティなWordPressテーマ集２０

Famous Letterpress Text Effect in Adobe Photoshop CS5 | TutorialsBucket 凹みを使って映えるテキストを作成するPhotoshopチュートリアル。 背景を円形グラデーションにして凹みのエフェクトをかけるというシンプルな加工で次のような映えるテキストが作成できます。 簡単な割に結構カッコいいと思うので覚えておくとよいかも。 あまり凝ったことをするよりもシンプルで綺麗に見えるテクニックを沢山しっておくというというのは重要かもしれません。 関連エントリ プロレベルのPhotoshopチュートリアル集 超カッコいい写真加工のPhotoshopチュートリアル集 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 Photoshopテキストエフェクト作成チュートリアル35

10 Free CSS and HTML Admin and Backend Templates :Speckyboy Design Magazine CSSデザインの実用的な管理画面テンプレート１０個がまとまっています。 管理画面も使いやすくしたい場合や商用プロダクトなので管理画面もカッコよくしたいというような場合に参考にできるかもしれません。 普通のテンプレートは多いのですがこうしたテンプレートはそれほど多くはないので助かりますね。 Internet Dreams Admin Skin INADMIN – HTML,CSS & jQuery Admin Panel Adminizio Lite – Admin Template Admin Template For Web Applications Spring Time – Simple Admin Template 全部見る 関連エ

coryroloff's environment-badge at master - GitHub WEBアプリの開発環境であることを分かりやすくバッジ表示できるjQueryプラグイン。 プラグインを読み込んで初期化すると次のように右上に固定でバッジを表示することができ、今自分が開発環境で作業していることをより分かりやすくすることが出来ます。 クリックするとサーバの情報等を追加で表示させることも可能です。 スクリプト側で、開発環境の場合はこのjQueryプラグインを呼び出すように設定しておくと、開発している状況・環境にもよりますが、謝って本番環境で作業してしまうというのを防ぐことも出来るケースがありそう。 開発・本番の分けというのを示すためだけではなく、利用者に対する通知としてのインタフェース実装に使ってもよい気がしますね。 関連エントリ Twitterのようにスマートな通知バーを一瞬で実

Apple-like Retina Effect 画像上のマウス位置虫眼鏡で拡大したように表現できるjQueryプラグイン。 マウス位置の画像を拡大表示することができます。AppleのRetinaディスプレイのPRページっぽい表現が簡単に実装できるようです。 キャンペーン用のページなんかで、何かを探してください、みたいな感じで利用者に遊んでもらうインタフェース作り等に使えそうですね。 見た目的にもなかなかカッコいいです。 関連エントリ 画像をスムーズに拡大できるjQuery版FancyZoom 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」

CGMサイトで盛り上がってる感を出して成功に近づける方法まとめ CGMサイト等でどんなにシステムを作りこんでも人がいない、あるいは人がいない感が漂っているサイトだと利用見込みの訪問者も利用をためらってしまうかもしれません。 ということで、サイトがどれだけ盛り上がっているかを表す方法や、それをやることで盛り上がるかもしれない方法、で本等を読んで勉強したことを自分なりにまとめてみました。 当たり前のことも多いですが、サイト作り自体に集中していると当たり前のことに気づかないこともあり、あえて当たり前のことも入れてあります。 他にこんな方法もあるよという方がおられましたら教えてください:-) ログイン人数を表示 アカウント登録型のサイトの場合、ログイン人数が多い場合はそれだけで盛り上がってる感を出すことができますね。 携帯サイトなどでは端末IDがユニークで取得できるのでログインしていないユーザもカ

コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン「wdScrollTab」 2010年10月13日- wdScrollTab Scroll Tab | jQuery Plugins コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン「wdScrollTab」 次のようなタブUIを実装することが出来ます。タブは見ての通り綺麗なインタフェースで、閉じるボタンを付けたりすることも出来ます。 タブ内のデータはJSの配列で定義しておいて、TabPanelコンストラクタにオプションを渡すことで初期化することが出来ます。 １から実装しようとするとなかなか大変そうですが、これなら簡単に実装出来ますね。 関連エントリ タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル アイコン付きタブが可愛いアニメーションメニューを実装するチュートリアル ナビ

How to create a kick-ass CSS3 progress bar - CatsWhoCode.com イカしたデザインのプログレスバーをCSS3で作成する例 次のようなデザインのプログレスバーをCSS3とJSを使って実装する例です。 バーの背景がアニメーションする上に進捗によって滑らかにアニメーションしてくれます。 そのまま応用して使うことも出来ますし、解説を見て勉強することも出来ます。 CSS3なブラウザで動きを見てみましょう。 実装ページ 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種

41Latitude - Styled Maps Using Google Maps API Version 3 GoogleマップAPI ver3でGoogleマップを独自にスタイルすることが出来るらしい。 やってみた例が沢山のっています。これでますますマッシュアップが楽しくなるかもしれません。 道路を強調 プレーンな地図 テキストラベルなし 立体表示 都市をドット表示 暗めのマップ 緑とか他の色にもできる 道路なんかもカラーリング 自由度が高くなってますね。競合他社も真似していくのはかなり大変そうです（＾＾；） 関連エントリ Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 Googleマップ風のUIを実現できるJSライブラリ「Polymaps」 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it

Edit images directly in your CMS. Now as a plugin for Joomla 1.5. - Picture Editor, GD, PHP, Open Source, GPL WEB上で画像のリサイズ/回転/切抜き等が可能になるPHPのオープンソース「PHP Image Editor」が公開されています。 そのまま使ってもいいですし、CMSなんかの組み込み用に使ってもよさそう。Joomlaのプラグイン形式でも公開されています。 指定サイズにそのままリサイズする機能 左右に９０度回転する機能 範囲を選択して切り抜く機能 明るさとコントラストを調節する機能 デモを使ってみると結構便利でしたので試してみましょう。 関連エントリ オープンソースの便利PHPスクリプトまとめサイト「Open Source PHP」 オープンソースGoogleAnalytic

New Twitter Design with CSS and JQuery. リニューアルしたTwitter風のWEBインタフェース作成チュートリアルのご紹介。 jQueryとCSSを使って新TwitterのUIを実装している例です。 左カラムの行をクリックすることで右にコンテンツが現れるようなＵＩを実現しています。 ちゃんとスタイルすれば本当にTwitterライクなＵＩになりそうですね。 ブログの見出しと記事のレイアウトにすればTwitterライクなインタフェースのブログが作れそうです。 関連エントリ サイトにTwitterの機能を組み込むためのjQueryプラグイン集 Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「Like

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン

Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」

iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック 2010年10月15日- Customizing web forms with CSS3 and WebKit - (37signals) iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニックが37signals.comにて紹介されています。 紹介されている１例として、SafariというとフォームおなじみのAquaっぽいスタイルになりますが、-webkit-appearance: none; のように設定するとプレーンなフォーム要素になるようです。 CSS3や画像を活用して、次のようなフォームをカッコよくデザインしたサンプルなんかも公開されています。 実際に見てみる 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CS

20 Helpful jQuery Tooltip Plugins and Tutorials | CreativeFan jQueryでツールチップ実装に迷ったらみるエントリ。２０種類のjQueryツールチッププラグインとチュートリアルがまとまっています。 様々なデザインや、それぞれの使い勝手があるので選ぶときに参考にしてみるとよさそうです。 比較的簡単な機能ですが、それ故にライブラリも豊富で選択肢も広いですね。 関連エントリ JavaScriptツールチップライブラリ24個 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」 画像なしで実現するCSS吹き出しツールチップ実装サンプル色々 JavaScriptを使わずCSSのみでシンプルなツールチップ実装 画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」

15 Free PSD Website Templates いい感じのフリーのWEBサイトレイアウト用Photoshopテンプレート１５がまとまっています。 それぞれインパクトのあるデザインになっていて使えそうです。 ほんとにフリーでいいの？というクオリティですが、こうしたものがフリーである以上、WEBデザイナー専業でやっている人は何か付加価値をクライアントに提供していくためのスキルを身につけておきたいですね。 関連エントリ WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 そのまま使えるWEBレイアウトのPhotoshopテンプレート40 かなりクールなフリーのWEBサイトPhotoshopテンプレート「BlueMasters」 無料で使える綺麗なWEBサイトPhotoshopテンプレート

Red5 recorder: open source video recorder. Add video to your site. WEBカメラの映像をブラウザ上で録画できるオープンソース「Red5 recorder」。 Flashプレイヤー9以上があれば他のプラグインは不要でカメラの内容をサーバに録画できるみたいです。 録画機能以外に、オーディオチャットの機能なんかもついてるそう。 FEはflashvarsのパラメーターをいじって殆どの挙動をコントロールすることもできるそうです。 残念なのは、サーバサイドのコードが提供されていない点で、サーバサイド部分は自分で実装するか、あるいは「Services」タブよりコンタクトして提供してもらう必要がある点。 とはいえ、690ユーロで約8万円なので、１から作ったり誰かに作ってもらうことを考えると比較的安価に導入できるかもしれません。 また、利用す

10 Excellent WordPress Themes for Portfolios and Galleries | Resources WordPressでポートフォリオやギャラリーを構築する際に使えそうなテーマ１０ シンプルですがかなりいい感じのポートフォリオ、ギャラリー用のテーマがあつまっていました。 そうしたニーズに応えるために覚えておいてもよさそう Work On Assignment Photography Portfolio Blogfolio 全部見る 関連エントリ かなり美麗なフリーのWordPressテーマ60 スモールビジネス向けのWordPressテーマ１０ iPhone等のモバイルデバイス向けWordPressテーマ色々 会社でも使えそうなWordPressテーマ２０

Entri | Free & Simple Collaborative Document Sharing Tool 複数人数で１個のドキュメントを作成する際のコラボツール「entri」。 「create your entri」ボタンを押すと独自のページが発行されます。 例えば、http://entri.co/6rhSEc のようなURLが発行されます。 URLにアクセスすると、ブラウザ上で動くWYSIWYGなエディタが開かれ、適当に編集し、保存ボタンを押せばそのまま保存できます。 編集ログが右カラムに表示されます。ログ部分をクリックすれば、過去のリビジョンを開くことが可能。 サービスにはTwitterアカウントでログインすることもでき、誰が編集したかも分かるみたい。 関連エントリ ブラウザ上でリアルタイムにコラボレーション開発できる「Amy Editor」 イベントやプロジェクト管理、ブロ

20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

is-real / wonder-webkit CSS3の3D transformationを使ったすごいサンプルが公開されています。 マウスカーソルを移動させると本の表紙風の画像が立体的に移動します。 実際に使うかどうかは別にして、こうしたことがブラウザ上で出来るというのは面白いですね。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ＋α イカしたデザインのプログレスバーをCSS3で作成する例

jQuery Mobile | jQuery Mobile jQuery Mobileのアルファ版がリリースされました。 ボタンやフォーム要素、リスト、UIなどのコンポーネント要素が最初から入っており、スマートフォン向けのスマートなサイト作成が簡単に、jQueryベースで実現できます。 iOSやAndroidの他主要なスマートフォンのOSで動くことが想定されており、クロスプラットフォームで動作するリッチなサイトを作りたい場合のフレームワークとしては大注目ではないでしょうか。 デモページではリッチなコンポーネントが多数確認できます。 JSフレームワークではjQueryがシェアを独占してしまった感がありますが、スマートフォン用サイトのフレームワークでもjQueryがシェアを握ってしまうのでしょうか。 関連エントリ これは注目のHTML5を使ったモバイルアプリケーション構築用フレームワーク「Se

IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

PHP Image Resizer Class : Milaju PHPで画像のリサイズ等が簡単に行えるクラスが公開されています。 こうしたライブラリは同様のものが存在するのですが、便利そうなので公開。 次のように実装時に分かりやすいコードでかつ簡単にリサイズが可能です。リサイズだけではなく、クオリティやmaxサイズといったオプション指定も出来るようになってます。 require_once('class.imgsizer.php'); $imgSizer = new imgSizer(); $imgSizer->type = "width"; $imgSizer->max = 100; $imgSizer->quality = 8; $imgSizer->square = true; $imgSizer->prefix = "sml_"; $imgSizer->folder = "_siz

Full Set Of Credit Card Icons By Graphicpeel 角丸でいい感じのクレジットカードアイコンセット３５。 PNG形式で32x32の形式で配布されていてすぐに使うことができます。 主要クレジットカード会社のアイコンはもちろん、Google Checkout や amazon 決済、Paypalなどもあります。 こんないい感じのアイコンがあったら購買意欲向上にも貢献するんじゃないか？ というふうにまで思ってしまうアイコンセットですね。 関連エントリ クレジットカードやPaypal、貨幣等のシンプルで綺麗なアイコンセット集 RSS、クレジットカード、国旗など便利なフリーアイコン集「fineicons」 オンラインショップ向けのクレジットカードアイコンいろいろ

iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々 2010年10月21日- HTML5/CSS3やJavaScript、Flashを使ってiPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組みを色々と調査してみました。 スマートフォンアプリを作るのであれば効率的にクロスプラットフォーム上で動く物で作りたい、というのは開発者の誰もが思うことではないでしょうか？ そんな技術の現時点でのまとめ、更にHTML5によるモバイルアプリ作成のフレームワークについても軽くまとめてみました。 Titanium Mobile HTML5/CSS3やJavaScriptベース→Native並の速度のiPhoneアプリ変換。javascriptをベースとしてアプリ開発を行うスタイルを実現する仕組み naoyaさんの「Titani

50 Free CSS/(X)HTML Templates - Noupe Design Blog フリーの(X)HTML/CSSテンプレートが沢山まとまったエントリが沢山ありましたのでご紹介。 先日も似たようなものを紹介しましたが、本日も便利そうなエントリを発見しました。 HTML5 and CSS3 Ornare iPhone App StudioClick Darkness MYportfolio 全部見る こんなものをフリーで提供してくれる方々の仕事している姿を想像すると涙が出そうになります。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ クールなデザイン満載のXHTML/CSSテンプレート４０種 フリーのCSS/HTMLテンプレートいろいろ2010

How to Build an RSS Reader with jQuery Mobile | Nettuts jQuery Mobileでスマートフォン対応のRSSリーダー作成デモ＆チュートリアルが速くも公開されています。 サンプルプログラムのダウンロードも出来るようなのでチェックしておくと後に利用することができるかも。 Titaniumとかで変換して実機でどのぐらいの速度になるんでしょうね。 関連エントリ jQuery Mobileのアルファ版がリリース

Practical Uses for PHP 5.3 Closures | Vance Lucas PHP5.3での実用的なクロージャのコード例。 PHP5.3ではクロージャが使えるわけですが、今まで使えなかったものが急に使えるようになったので、使ってない人も多そう。 まだPHP5.3以下の環境であったりもしますしね。なかなか興味深い使い方のコード例を解説しているページがあったのでご紹介。 メソッドの引数にクロージャで関数を引数として渡している例。 引数が関数になることで、呼び先のメソッドでより柔軟な処理が可能になりますね。 次は、コンフィグファイルにクロージャで関数を代入。より状況にあわせたダイナミックなコンフィグの使い分けができそう 次は、データのキャッシュの際に、キャッシュしたいデータを返す関数をキャッシュする関数の引数として渡すというもの。 コードの可読性とか構造とかこれでいいのか

Free Elegant Restaurant WordPress Themes | Blogger's Path お店なんかのブログを作る時に使えるかもしれないフリーのWordPressテーマ集。 量は多くはありませんがクオリティの高いテーマが色々掲載されていましたのでご紹介。 カフェっぽいデザイン こちらもカフェっぽいデザイン レストランで使えそう 寿司に限るかも 関連エントリ かなり美麗なフリーのWordPressテーマ60 スモールビジネス向けのWordPressテーマ１０ iPhone等のモバイルデバイス向けWordPressテーマ色々 会社でも使えそうなWordPressテーマ２０

シンプルUIがいい感じのカラーピッカー実装jQueryプラグイン「simpleColorPicker」 2010年10月22日- simpleColorPicker jQuery plugin シンプルUIがいい感じのカラーピッカー実装jQueryプラグイン「simpleColorPicker」。 次のような超シンプルで逆に使いやすそうなカラーピッカー実装が簡単に１行で行えるプラグインのご紹介。 $(inputElement).simpleColorPicker(); として初期化するだけで実装できます。 色をクリックすればその値がそのまま入ります。 こうしたコンポーネントはどんどんリッチになる傾向がありますが、原点に戻ってあえてシンプルに考えることで使いやすいものが出来るのかもしれませんね。 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ リッチなカラーピッ

Create a 3D Industrial-style Download Icon in Photoshop | Tutorial9 デラックスなダウンロードアイコンを作るPhotoshopチュートリアル。 何かのファイルを配布したりする際のダウンロード位置にアイコンがあると分かりやすいですよね。 次のような目立つダウンロードアイコン作成のチュートリアルです。立体感を出す部分とかは他に応用とかできそうです。 意味のある部分に視覚的に分かりやすいアイコンを置いておけば内容を読まなくても場所が分かるということで、他にも応用してユーザビリティをあげられるかも。 関連エントリ iPhone4用もあるiOSのアイコンテンプレートPhotoshopファイル Photoshopによる美麗アイコン作成チュートリアル集

11 Fresh High-Quality Free Fonts | Freebies 個性的でカッコいいフリーのフォント１１をご紹介。 あまり見ない感じのフォントがいろいろ掲載されています。いつもと違う感じを出したい場合は使ってみるのもいいかも。 Matilde Color Lines SayTwo Lintel Regular Teardrop 全部見る 関連エントリ Twitterで使われているフォント「Pico」 クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集

指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 2010年10月25日- SlideNote | A jQuery Plugin For Sliding Notifications 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」。 $(element).slideNote(); として初期化しておくと、element 位置までスクロールした時点でアニメーションして分かりやすいヒントを表示できます。 ページの上の方（まだ表示されていません） スクロールしていくと現れます（右からアニメーションしながらいい感じにきます） 特定の位置でヒントを出したいような場合に導入するとユーザビリティをあげられそうですね。 関連エントリ Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプ

jQuery Slide Effect | hv-designs jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル。 特別に難しかったり真新しいものではないのですが、エフェクト的にカッコ良い効果だったのでご紹介。 スライドアニメーションしながら画像の上にコンテンツがオーバーレイで表示されます。 何かを紹介する際のバナーなんかでも使えそうですね。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル アニメーションの残像が残るjQueryアニメーションチュートリアル jQueryで幅の大きなドロップダウンメニュー作成チュートリアル

28 Inspirational Typographic Designs - Web Design Blog ? DesignM.ag ロゴ作成などに参考にできるかもしれないタイポグラフィデザイン２８。 アイデアあふれるデザインが満載で見ているだけで楽しく勉強にもなりそう。 なんとも素晴らしい限り。 関連エントリ タイポグラフィに使える20の便利ツール集 ロゴデザインやタイポグラフィの見本や資料まとめ集 これはクール！人の顔をベースにタイポグラフィで描画するPhotoshopチュートリアル

再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 2010年10月26日- jQuery Youtube Player 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 このプラグインを使えば次のように、Youtubeの動画に独自の再生、動画送り、リピートボタン、ボリュームボタンの他、プレイリストを付けてリストから再生なんていうことができちゃいます。 YoutubeのコントロールはFlashの中にあるから無理と思っていましたがYoutubeのFlash側で対応したっぽいですね。（外部からJSでFlash内で公開された関数を操作してるようです） ↑プレイヤー下部のリストがプレイリスト。クリックで動画が切り替わります。 ↓現在再生中の秒数なんかも取れたりするようで

再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube P... 次の記事 ≫：シンプルだけど使えそうなドロップダウンメニュー実装jQueryプラグイ...

Simple Dropdown List Plugin - Examples シンプルだけど使えそうなドロップダウンメニュー実装jQueryプラグイン。 次のような見た目で、クリックするとアニメーションしながら開くドロップダウンを簡単に実装できます。 クリックでアニメーションしながら開きます。 タグ的には<ul><li>のリストでアイテムを定義しておいて、$.simpledropdown(element); で初期化できるようです。 デフォルトのデザインはちょっとカッコ悪いですが、CSSでデザインを直せばそれなりに使えそうですね <select>じゃなくて、独自デザインで作りたい場合にサクッと実装できそうなので覚えておいてもよいかも。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 コンテンツがたっぷりつまって使

ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip

SVG-edit ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄いです。 次のようなインタフェースで、Chromeだとサクサク動くSVGエディタがGoogle codeにてオープンソースでダウンロード可能です。 SVGでお手軽にお絵かきしたい場合や、SVGなお絵かきサイトなんかを作るのにも活用できそう 描画したグラフィックをSVGに変換した例。ツールバーからそのまま出力可能です。 次のようなXMLデータになります。 触ってみるだけでも価値がありそうです。 関連エントリ JavaScriptでFlashやSVGを使わない3Dアニメーション PHPでベクターグラフィックスを作成するためのチュートリアル テキストで描画されたSVGグラフィックス

カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 2010年10月28日- jQuery vScroll ? Simple animated vertical content scroller supporting varying heights HibboBlog カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 通常、divなんかにサイズを指定して、overflow:auto とかにすると次のようにスクロールバーがでますよね。 ただ、このスクロールバーはブラウザ依存でちょっとデザインにあわなかったりしてカッコ悪いという場合があります。 デモページ そこでこのプラグインを使えば、スクロールバーを消してしまうことが可能。 消しちゃうとコンテンツ見れないじゃん、という心配は不要で、ボタンをクリック

Davor Spasovski / Web Developer 画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」。 次のような１枚の画像を使って簡単に綺麗なカウントダウン＆カウントアップタイマーが実装できます。 タイマーを表示されるなら味気ないテキスト表示よりも画像で綺麗にやりたいですよね。 画像なので、画像編集ツールを使って簡単にフォントやデザインを替えられます。 元画像。これをjQueryでCSSスプライトを活用してタイマーにします。 残り１時間に設定したカウントダウンタイマー。ちゃんと時間表示になってますね。 カウントアップにも対応。スタート/ストップボタンによってタイマーの制御も出来ます。 地味に使いそうなので覚えておいてもよさそう。 関連エントリ 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」 色合いを選べるツール

33 Fresh & High Quality Fonts For Your Next Designs PSDFan 次のデザインで使えるかもしれないフレッシュでハイクオリティなフォント３３ フリーではないですが、個性的なフォントが多く紹介されていたのでご紹介。 関連エントリ Twitterで使われているフォント「Pico」 クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集 フリーフォントがダウンロードできる６０サイト

コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分

jQuery.isHTMLElement | Nerdy Is Back 引数の値がHTML要素かどうか調べられる「jQuery.isHTMLElement」プラグイン。 クロスブラウザで動作するので要素かそうでないのかを調べたい際に使えそうです。 使い方は簡単です。 $.isHTMLElement(document.body); // true を返す $.isHTMLElement(4) // falseを返す ソース自体も小さいので判別コードをコピーして使ってもよさそうです 関連エントリ クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 クロスブラウザでのテキストエリア操作が便利になる「A-TOOLS」 IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」

RailsWizard RailsアプリのテンプレートをWEB上でウィザード形式で作れる「RailsWizard」。 Rails自体でアプリケーションを高速を作成できるのですが、RailsWizardを使って更に基本的なことをウィザード形式で設定することでより高速なアプリ作成が可能になるかも。 まずはテンプレート名を入れて開始 テンプレートのDescription設定 利用するORマッパーを選択する テスティングの設定 利用するJavaScirptフレームワークの選択 認証の設定 テンプレート設定 テンプレートの出力後に実行するRubyコードを記述 あとはRailsのコマンドで作ったテンプレートを指定するみたい。 作ったテンプレートにはPermalinkが発行されるので再利用もできそうですね。 関連エントリ 各言語用Ruby on Railsの代替フレームワーク

Design a Halloween Pumpkin Patch Text Effect PSDFan テキストをハロウィンのかぼちゃっぽくするPhotoshopチュートリアル。 次のようにPSDという文字をカボチャっぽくしています。 ちょっとギリギリですが、サイトにハロウィンな感じを出したい場合は参考にできるかもしれませんね。 関連エントリ ハロウィン用のベクターデータ、ブラシ、フォント色々 ハロウィンに関するPhotoshop素材やブラシ集 Photoshopテキストエフェクト作成チュートリアル35 Photoshopでなかなかカッコいい3Dテキストを作るチュートリアル 凹みを使って映えるテキストを作成するPhotoshopチュートリアル

PHPと組み合わせることでブラウザごとのCSSセレクタが使えるようになる「PHP CSS Browser Selector」 2010年10月31日- PHP CSS Browser Selector PHPと組み合わせることでブラウザごとのCSSセレクタが使えるようになる「PHP CSS Browser Selector」。 PHPでエージェント判別することで、ブラウザごとのCSSが書けるようになるのでハックなどを使わなくとも分かりやすいCSSが書けるようになります。 次のように、IEだけ、IE7だけ、Geckoだけという処理が簡単に書けるようになります。 .ie body { background-color: yellow } .ie7 body { background-color: orange } .gecko body { background-color: gray } 誰

zepto.js ? the aerogel-weight mobile javascript framework jQueryライクに使えて2KBしかないスマートフォン用JSフレームワーク「zepto.js」。 それなりにスマートフォンでも速度がでるとはいえ軽いに越したことはないというところで、jQueryのminify版が26KB (1.4.3) というところで、１０分の１以下のサイズでjQueryと同じように使えるのはいいかもしれませんね（当然機能は落ちますが） 詳細については以下のSlideShareも参考に出来ます

Create a Street Fighter Inspired Composition in Photoshop | Psdtuts ストリートファイターみたいな画像を作成するPhotoshopチュートリアル。 背景画像の作成から始まり人物の加工、さらには波動拳っぽいものまで描画するチュートリアルです。 題材として面白い上にそこそこ力がつきそうなチュートリアルですね。 関連エントリ プロレベルのPhotoshopチュートリアル集 超カッコいい写真加工のPhotoshopチュートリアル集 デラックスなダウンロードアイコンを作るPhotoshopチュートリアル

15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新

Visual Inspiration: 30 Beautiful Web App Site Designs 美しいWEBアプリケーションPR用のサイト３０。 ウェブアプリケーションPRのサイトに絞られており、同じようなサイトを作る際に参考にできそう。 どれもデザインが美しくて、実際のプロダクトもより魅力あるように見えるのが特徴。 気合をいれたアプリケーションはこうして綺麗にデザインしたいものですが、その際の参考に。 関連エントリ カラフルで美しいデザインのWEBサイト３５ コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 フッターにするのは惜しいぐらいのフッターデザイン色々

The Secretary / Home ポートフォリオサイト構築専用のPHP＆MySQLなCMS「The Secretary」 JavaScriptによるナウなUIなんかも取り入れつつシンプルにデザインされた使いやすい管理画面を使ってポートフォリオを構築出来ます。 プロジェクトやブログ、ページを管理画面から簡単に投稿することが出来ます。 テーマなんかも選べるようです。 WordPressでも出来るかもしれませんが、ポートフォリオを構築するような仕事がはいってきた時のために１つの選択として覚えておいてもよさそう。 関連エントリ あなたが知らなかったかもしれないPHP用のCMS ブログやCMSに最適なクールアイコン集「iMini」 サイトで使っているＣＭＳなどが一目でわかるFirefoxアドオン

Badass JavaScript - Face Detection in JavaScript via HTML5 Canvas JavaScriptとHTML5 Canvasを使って顔認識するコードがすごいです。 ccv.jsとface.jsというファイルがGitHub上で公開されていて、認識自体をJavaScriptでやってしまっているようです。 JavaScriptが高速化するにつれ、WEBはもっと高速に、サーバにも優しくなっていく流れになっていきそうですね。 GitHubでは２つのJSと１枚のHTML、１つのPHPコードが配布されています。 ccv.jsがコアで、face.jsは定義ファイルっぽいです。 画像を外部から呼び出すためのプロクシ用にphpを使っていますがphpでOpenCVを使ったりはしていないようです。 関連エントリ PHPでOpenCVなしのピュアPHPで顔認識す

5 Exclusive PSD of Business Card For SloDive Readers 裏表使えるクールな名刺のPhotoshopテンプレート５。 名刺などは会社に属している方は会社用等はもってたりするのですが、フリーであったり、会社員だけどちょっとオフ会に参加する際に会社名はあまり出したくないというような場合に自作する必要がありますね。 で、いざ作ろうとすると、用紙を買ってきて微妙な名刺作成ツールでカッコ悪い名刺にため息という経験がある方もおられるのではないでしょうか。 そういう場合はPhotoshopテンプレートでサクッとクールなものを作ってしまいましょう。 次のようないい感じの名刺テンプレートが公開されています。裏表っていうのもいいですね。 PSDなので編集も容易です。 肝心のPSDですがエントリ元で入手して下さい。 関連エントリ クールな名刺を作る際のチュートリア

20 Bewitching Brush Fonts ブラシで描いたようなフリーで個性的なフォント２０が紹介されていました。 一部をご紹介しています。サイトに訪れた人にインパクトが大きそうなので、こうしたテイストが合いそうなサイトの場合には使えそう。 Apocalypse Beautiful Ink Blemished Bolide Brook 23 全部見る 関連エントリ Twitterで使われているフォント「Pico」 クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集

abitlikethis's fbStatus at master - GitHub facebookのステータスをページに簡単に埋め込めるjQueryプラグイン「fbStatus」。 facebookが盛り上がってきているらしい今日この頃ですが、便利なjQueryプラグインがあるみたい。 TwitterみたいにステータスをWEBサイトに表示させたい場合に使えそうです。 次のように使い方は超簡単です。 $(".facebookfeed").fbstatus({ username: 'prettyklicks',  // 表示するusername count: 5,  // 表示件数 loading_text: "loading status..."  // ロード中のテキスト }); 関連エントリ FacebookのGUIレイアウトのPhotoshopテンプレートファイル ページフッタに置

The Best Domain Name Generator Ever: Impossibility! ドメイン検討に迷ったら一度試してみるとよいかもなジェネレーター。 単語を適当に考えて、それが形容詞か、動詞なのか、名詞なのかを指定してあげます。 そして、その単語が最初か最後に付く、取得可能なドメインを教えてくれます。 試してみたところ、「phpneet.com」等という面白いドメインが作成できました。 思いもよらないドメインが出来るのでなかなか楽しいです。 関連エントリ Web2.0な画像、CSS、カラー等のジェネレーター集１００＋

Top 10 Best Wordpress Themes Of October 2010 For Free Download 全部使いたい！と思ってしまうフリーのWordPressテーマ2010年10月。 どれも綺麗で迷うデザインが一杯です。もうすぐ年も変わるので気分転換に変えてみるのもよさそうですね。 テンプレートって数えるといくつあるんでしょうね。 関連エントリ かなり美麗なフリーのWordPressテーマ60 スモールビジネス向けのWordPressテーマ１０ フリーで使える比較的新しいWordPressテーマ

SQLiteManager - Web-based SQLite administration WEBベースで楽々SQLite管理「SQLiteManager」 SQLiteは便利ですが、あまり慣れていないとテーブル内を操作するのは微妙に面倒だったりします。 このオープンソースを使えばWEBベースのGUIで簡単管理が出来ます。 複数のデータベース管理や、テーブル作成、インデックス操作、基本のテーブル操作（Insert , Update, Delete, Select)や、データのエクスポートが可能。 スキンによるインタフェースの見た目を変更することも出来ます。 これはいいですね。 関連エントリ SQLiteのアーキテクチャ資料 phpSQLiteAdmin

Choco-Slider | A very tasty jQuery Plugin 軽量(7KB)でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」のご紹介です。 実際のスライダーは次のような感じ。 画像切替の際のアニメーションはチョコをかけるような効果でいい感じに動きます。 画像の説明を画像下にテキストで入れることも可能です。予めULリストで定義しておきます。 １つの選択肢として覚えておいてもいいですね。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル JavaScript製の画像スライダー・ギャラリーいろいろ

Baker Ebook Framework HTML5による電子書籍発行フレームワーク「Baker」。 HTML5で、768px幅固定でページを作っていって、HPubフォーマットでファイル一覧をアーカイブします。 これをBakerフレームワークを落としてきてXcodeで開き、データを入れてコンパイルするって流れのようです。 HTML5ということで、画像を固めたものよりインタラクティブなことができそうですね。 サンプルで配布されているBookも落として見ましたがなかなかいい感じでした。 関連エントリ ブログを電子書籍形式(ePub)に変換できるWordPress3のプラグイン「Anthologize」

jQuery webcam plugin - Website and Application Intelligence webカメラに簡単アクセス可能にするjQueryプラグイン「jQuery webcam」 webカメラ経由で写真を撮って表示させたりすることが出来ます。 更には、そのままPHPに送信して保存なんていうことも出来るみたいでなかなか便利そうです。 コード例は次のように、幅、高さとFlashのSWFファイルを指定し、各種コールバック関数を定義するだけです。 ここらへんの仕様に詳しくない場合でも、簡単に実装できるというのは便利ですね。 関連エントリ WEBカメラの映像をブラウザ上で録画できるオープンソース「Red5 recorder」

5 Ways to Make Money Blogging ブログでマネタイズする方法が５つまとまっていました。 既にみなさんご存知な事ばかりだと思いますが、まとまっていると便利なのでご紹介です。 1. アフィリエイトマーケティング 2. Google AdSense 3. ペイパーポスト（いわゆる記事広告） →ペイパーポストによる問題も参照しておきましょう 4. バナー広告・純広告 5. 独自プロダクト or サービスの販売 他にも、次のようなものが考えられますね。 6. 寄付・カンパ 7. 月額プレミアム記事（Moongiftさんがプレミアム記事を提供してる例） 8. RSS広告 ブログで小銭を稼いでやろうという方は参考にしてみましょう。 関連エントリ 第3回マネタイズハックス議事録 - yukawasaグループ

Snippet jQuery Syntax Highlighter 多数の言語に対応して色合いも選べるシンタックスハイライト用jQueryプラグイン。 メジャーな以下の１５の言語は標準サポートしていて、他にも多数のフォーマットに対応できます。 このプラグインのユニークなところは、３９のカラースキームから選べるという部分。 実に多数の色合いから好きなものを選べるので、様々なタイプのデザインのマッチさせることが出来るでしょう。 実装は必要なライブラリを読み込んで、$(element).snippet("pascal") といった感じでハイライト言語を引数で渡してあげるだけです。 実装もかなり簡単です。 .snippet("php",{style:"navy",showNum:false}); styleで色合いを簡単に指定。行番号のあり・なしも指定可能です。 技術系のサイトを運営している人は覚

スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」 2010年11月10日- Amit Patil's Blog スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」。 サイドに常に表示されている「Follow Me」みたいなツイッターのフォローボタンは最近よく見かけますね。 これをjQueryで簡単に実装してしまおうというもの。 使い方は次のようにオプションを渡してあげるだけです。 $(function() { $("body").sidebar({ text  : "Follow Me", // 表示テキスト size  : "30px", // 幅 length : "200px", // 高さ margin  : "130px", // マージン p

10 Powerful AJAX jQuery File Uploaders | CreativeFan 画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10。 アップローダ実装にまよったらとりあえず、このエントリを参考に比較検討できそうです。 Valums AJAX Uploader Plupload Uploadify AJAX Multiple File Upload Form using jQuery jQuery Multiple File Upload Plugin これだけあれば、自分にあったものが見つかりそうですね。

30 Examples of Big Backgrounds in Web Design | Inspiration 大きな背景画像を使ってうまくデザインされたサイト３０。 次のように、大きな背景の写真を上手に使いつつ、WEBデザインとして組み立てられたレイアウトが秀逸です。 ブロードバンド以前では考えにくいデザインで、昔からWEBデザインをやっている人にとって、あまり作らないデザインではないでしょうか。 参考に作ってみるとよいかもしれませんね。 関連エントリ 自然を取り入れた美しいWEBデザイン集 斬新なコメントフォームデザイン集 なんとなく和むイラストベースのWEBデザイン集60

jquery vticker (vertical news ticker) JugBit 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」。 特定のdivに次のようにulでリストを定義しておいて、$(element).vTicker(); とすることで簡単にアニメーションするニュースティッカーが実装できます。 幅、高さは固定できるので、自由にレイアウトできるところもナイスです。 表示時間が終わって消えるリストがグレーにフェードアウトするところも芸が細かくてナイス。 デモを見る デモはCSSでスタイリングされておらず味気ないものですが、CSSで綺麗にデザインしてあげることでかなり映えそうです。 オプションで、次の挙動についてカスタマイズも可能です。 ・スピード変更 ・待ち時間変更 ・アイテム表示数変更 ・アニメーション指定 ・マウスで停止するか指定

Nexuss Roster: 50 URL Shortener Website For Your Blog And Website URL短縮サイト５０まとめ。 bit.lyやtinyurl、goo.gl等の有名所の他にも色々なURL短縮サービスがあるようですね。 利用するサイトの運営元なんかには注意した方がよさそうですが、これもドメインを選ぶように自由に短縮URLを使えるというところで参考にできるかも。 こうしたサービスは比較的簡単に設置できることから今後も増えていきそうですね。 関連エントリ PHP25行で書くURL短縮プログラム 飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」 amazonページ専用のURL短縮サービス「amz.ly」 URL短縮サービス展開用のオープンソース9種

SpryMap - lightweight javascript click and drag map script | candrews.net ドラッグ＆ドロップできる地図を実装できる3KBの軽量JSライブラリ「SpryMap」。 JSだけなら3KBで記述された軽量なスクリプトになっています。jQuery等のライブラリにも依存していないので手軽に使うことが可能。 こうしたライブラリは他にもありますが、ここまで軽いのはなかなかないかもしれませんね。 jQueryを使っていませんが次のように非常に使いやすい物になっています。 関連エントリ Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 GoogleマップAPI ver3でGoogleマップを独自にスタイルすることが出来るらしい Googleマップ風のUIを実現できるJSライブラリ「Polymap

ページ内の画像が全部読まれた場合にイベントを発生させられるjQueryプラグイン「onImagesLoad」 2010年11月12日- Official documentation for the jQuery 'onImagesLoad' plugin - by Cirkuit Networks, Inc. ページ内の画像が全部読まれた場合にイベントを発生させられるjQueryプラグイン「onImagesLoad」 ブラウザの標準機能ではonloadはありますが、画像を読み込んだタイミングで発生させるonImageLoadを発生させられるjQueryプラグインです。 単純に、ページ全体の画像というくくりだけでなく、特定の<div>内の画像を全部読み込んだ後で発生させることも出来るみたいです。 AJAXを活用したダイナミックなサイトで活用できそうですね。 具体的な動作サンプルはサイトでチェ

25 Free Incredible Floral WordPress Themes 女性向けブログ等によさそうな花をベースとしたWordPressテーマ２５ 花を使った美しいWordPressテーマが沢山紹介されています。 見ていて心がなごむ自然と組み合わせるのはいいですね。 関連エントリ かなり美麗なフリーのWordPressテーマ60 会社でも使えそうなWordPressテーマ２０ iPhone等のモバイルデバイス向けWordPressテーマ色々 黒ベースのハイクオリティなWordPressテーマ集２０

10 Beautiful PSD Templates Of October 2010 For Free Download 本当に無料でいいの？というWEBサイト用Photoshopテンプレート１０。 次ようにプロがデザインしたと思われるサイトのPhotoshopテンプレートが１０個紹介されています。 タイトル部分だけ変えれば立派なWEBデザインの完成ということになってしまいそうですね。 なんでこんなものがフリーになっちゃうのというぐらいクオリティが高いですね。 関連エントリ そのまま使えるWEBレイアウトのPhotoshopテンプレート40 いい感じのフリーのWEBサイトレイアウト用Photoshopテンプレート１５

Signature Pad Lab Thomas J Bradley HTML5のcanvasを使って手書き署名入力をWEBで行う際に役立つjQueryプラグイン「Signature Pad」 次のように手書きで署名を描画できるエリアをHTML5+canvasで実装できるみたいです。 JSONデータから後で描いた署名を再現することも出来ます。 何かに使えるかもしれませんね。 関連エントリ GoogleライクなCAPTCHAをPHPで作成するサンプル PHPとGDを使ってCaptchaを自作するチュートリアル PHP等で実装できる動画でCAPTCHAできるより強固な「NuCaptcha」

26 Useful jQuery Navigation Menu Tutorials - Web Design Blog ? DesignM.ag ナビゲーションメニューに関する有用なjQueryチュートリアル集のご紹介。 ２６にもわたるチュートリアルになっていて、プラグインではありませんが、参考にすることで実装は容易でしょう。 クールな見た目が多いのもいいですね。 沢山の種類があるのでイメージにマッチしたものも見つかりそうです。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例

ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグイン 2010年11月15日- SelectBox Plug-in ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグインのご紹介。 ユーザ登録の際に、パスワード強度を表示するサイトが多くなってきていますが、利用者がパスワードを決める場合に注意が働くためサイト全体としての安全性が高まるという点で効果がありそうですね。 仕事でサイトをつくっていて、あの機能入れてくれといわれた場合に、瞬時に実装できそう。 パスワードが弱い場合は次のように表示されます。 いい感じの場合はGoodが表示されます。 出し方は次のようにメソッドに渡すオプションを変更するだけでかえられます。 IDとパスワードが同じでもエラーを出せたりします。 関連エントリ パスワード生成や年齢計算等、P

PGRFileManager - Manage your files easily PHPベースの使いやすそうなAjaxファイルマネージャ「PGRFileManager」。 ブラウザ上から認証して、ファイルの追加、移動、リネーム、削除、フォルダの作成といった一連のファイル操作が可能。 画像だったらちゃんとサムネイル化してくれる上に、CKEditorによってその場で編集することも出来ます HTMLなんかはその場で編集できます。 なかなか便利そうですね。 関連エントリ まるで何かのOSに搭載されているようなブラウザベースの高機能ファイルマネージャ「elFinder」 PHP+MySQLで作成されたAjaxベースのWeb2.0ファイルマネージャ:Relay PHPとAjaxを使ったWEBベースのファイル管理ツール「PHP Navigator」

passwordフィールドにテキストヒントを表示させられるjQueryプラグイン「Text2Pass」 2010年11月15日- taledo Blog Archive Text2Pass ? Text inside a password field passwordフィールドにテキストヒントを表示させられるjQueryプラグイン「Text2Pass」。 入力フィールドにヒント表示するプラグインはあったりしますが、それがpasswordフィールドの場合でもちゃんとヒントを表示できます。 「ここにパスワードを入力」というようなヒントを入れつつ、入力した場合はちゃんとフィールドが***になる点がいいです。 input に対するヒント表示 入力するとちゃんとpasswordフィールドとして機能 ログインフォーム等のユーザビリティ向上に役立ちそうですね。 関連エントリ 複数のパスワードをデータベー

ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン。 ブロック要素があって、背景だけをアニメーションさせるという効果を簡単に作成できるようです。 要素中のテキストは動かないので、ページ全体のブロック要素の背景をパッとアニメーションで切り替えるのも面白い効果が得られるかもしれませんね。 ちょっと分かりづらいと思うのでデモを見てください。 関連エントリ 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例

25 Useful HTML5/CSS3 Tools, Cheat Sheets and Resources HTML5/CSS3に関する便利ツールやチーとシート、リソース２５。 HTML5やCSS3に関する勉強用や効率化に役立ちそうなエントリのご紹介です。 以下に一部をご紹介。 CSS3 Selectors Test CSS3のどのセレクタが効いているかテスト Web Browser CSS Support ブラウザごとのCSS対応状況をテーブルで表示 HTML5 Security Cheatsheet HTML5に関するセキュリティのチーとシート HTML5 Gallery HTML5で書かれたいい感じのサイトギャラリー HTML5 CheatSheet HTML5のタグのチートシート CSS3 Please! クロスブラウザでCSS3を動かせるためのプロパティジェネレーター CSS3

jQuery 1.4.4 API Cheat Sheet ? Future Colors 最新版 jQuery1.4.4のチートシートが公開されました。 HTMLでそのままWEB上で見られる他、PNG、PDF形式でダウンロードして使うこともできます。 1.4以降の機能の場合、次のように表示してくれてわかりやすい。 関連エントリ jQuery1.4.2のビジュアルチートシート シンプルなPhotoshop CS5チートシート サイトデザイン時に有効なチートシート集 次期 jQueryバージョン1.4のチートシート「jQuery 1.4 API Cheat Sheet」

Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png";  // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6

LeanBack Player | HTML5 Video Player 字幕.inみたいなサイトが簡単に作れそうなスマフォ対応のHTML5動画プレイヤー「LeanBack Player」。 次のように字幕を付けることができます。埋め込みコードの出力や、Youtubeっぽいインタフェースもいい感じです。 HTML5なのでモバイルデバイスなんかでも使えちゃいますね。 HTML5非対応ブラウザで見ても動画は再生できるようになっています。 独立したライブラリで動作し、CSSによるスキン変更にも対応。 キーボードショートカットにも対応するなど芸が細かい。 PCでは主要ブラウザでの動作が確認されている他、モバイルデバイスでは、iPhone iOS 3+、iPad iOS 3.2+、Android2.2でもテストされています。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 CSSで

How to Create a Safari Extension from Scratch | Nettuts Safari5の拡張機能をExtension Builderで作るチュートリアルがNettutsで公開されています。 サイトへのアクセシビリティを高めるというところで、safariユーザ向けにこうしたエクステンションを用意してみるのもいいかもしれません。 ゼロから始めることを考えると大変そうなので、作り方を紹介してくれているこのページは覚えておいても損はないですね。 関連エントリ Safari用JavaScriptデバッガ「Drosera」 古いバージョン〜最新バージョンのSafariを入手できるサイト「Multi-Safari」

Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 2010年11月18日- Tech Laboratory Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 Windowsインストーラーは「次へ」を押していくとどんどんインストールを進められて簡単ですが、それをブラウザ上で簡単に実現してしまえます。 各ページの中身は、単純に<div>で並べるだけというお手軽さ。ルールに従ってHTMLを記述し、$(element).smartWizard() で初期化するだけです。 デモページはこちら タブを左にレイアウトしてもなかなかいい感じ。 デフォルトのデザインはお世辞にもカッコイイとは言い難いのですが、CSSデザインが可能なので、自由にスタ

なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 2010年11月18日- hash slider by manjographics なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 コンテンツ自体はul > li リストに埋め込んで、ナビゲーション用のタグを定義して必要なcssとjsをインクルードすれば自動でスライダーにしてくれます。 プラグイン内で自動で初期化してくれるため、コーディング不要です。 デフォルトでは独特のUIですがCSSによるカスタマイズが可能です。 色々と使えるかもしれませんね。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル 軽量の

20 Best And Fresh CSS Portfolio Websites Design クールなCSSデザインのポートフォリオサイト２０。 いい感じのポートフォリオサイトデザインがあつまっていたのでサイト構築の際の参考にしてみてもいいかも。 いろいろな感性があるものですね。 関連エントリ 斬新なコメントフォームデザイン集 自然を取り入れた美しいWEBデザイン集 なんとなく和むイラストベースのWEBデザイン集60

Best Free WordPress Themes of 2010 | Freebies ユニーク記事配置がいい感じなWordPressテーマいろいろ2010。 単に記事を上から並べただけではなく、面白い並べ方をしているテーマなどが色々紹介されていました。 来年はちょっと気分をかえてこうしたテーマにしてみてもいいかもしれませんね。 Shaken Grid Imbalance Mansion Simplefolio Simplo AutoFocus+ Koi 関連エントリ MacOSのGUIみたいなWordpresテーマ「Tigerpress」 かなり美麗なフリーのWordPressテーマ60 iPadやiPhoneアプリ等の開発ブログとして使えそうなクールなWordPressテーマ 凄くクールなフリーのWordpressテーマ「Infinity」

Top 10 Best Free HTML / CSS Website Templates Of October 2010 綺麗にデザインされたフリーのHTML/CSSテンプレート１０。 以下のような美しいデザインがフリーでダウンロードできます。 素晴らしいですね 関連エントリ ハイクオリティでフリーなXHTMLテンプレート61 ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ フリーのCSS/HTMLテンプレートいろいろ2010

Pure CSS GUI icons (experimental) ? Nicolas Gallagher ? Blog & Ephemera ピュアCSSで描画されたGUIアイコンセット。 よくやったなという感じですが、次のようなCSSでかかれたアイコンが出てます。 Firefox 3.5+, Chrome 5, and Opera 10.6でテストされているようです。 ピュアCSS画像エディタ等も今後でてくるんでしょうかね 関連エントリ ピュアCSSで実装された吹き出しのデザイン例色々 ピュアCSSでTwitterのメンテナンスモードのクジラをアニメーションさせる例 ピュアCSSで画像を壁に貼ったポラロイドギャラリー風にするサンプル

phpScenario: Free Split Testing Library for PHP A/Bテストが簡単に実装できるPHPライブラリ「phpScenario」。 A/Bテストとは、AとBを出しわけて、どっちが収益につながるコンバージョン率が高いかを調べたり、使われたりするかをするテストです。 これをライブラリを使って可能な限り簡単に実装できるそうです。 たとえば、次のように、分岐させてテストを行うみたいです。 <?php if (Scenario::IsControl('my_test')) { // my_test の場合の処理を行う } else { // それ以外の場合の処理を行う } ?> 具体的なコードはドキュメントがあまり充実していないのでわかりづらいのですが、１から実装するよりも参考にできる部分がありそうです。 テスト結果も以下のように出力できるっぽいです。

7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが７つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜％として表示してくれます。 何を改善すればポイントを上げられるか？についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ

phpmd PHPコードのバグ可能性発見や未使用変数等を解析できる「PHP Mess Detector」。 pearコマンドでインストールすると、phpmd コマンドが使えるようになり、そのコマンドを使ってPHPコードの最適化ができます。 たとえば、未使用変数は次のようにして解析＆結果が出ます $ phpmd test.php text unusedcode test.php:4 Avoid unused private fields such as '$FOO'. test.php:5 Avoid unused private fields such as '$i'. test.php:12 Avoid unused private methods such as 'foo'. test.php:14 Avoid unused private methods such as 'bar'.

VexFlow - HTML5 Music Engraving HTML5とJSでWEB上に綺麗な楽譜が書けるライブラリ「VexFlow」。 Canvas+SVGで描画され、次のように綺麗に描画できます。 たとえば、次のようにテキストで表現します。 tabstave notation=true notes 4-5-6/3 10/4 次のように描画されます。 チュートリアルをみると結構複雑なものも描画できるみたいです。 私自身、楽譜は全く読めませんが、面白いライブラリですね。

pimcore - Enterprise Content Management Framework ZendFrameworkとExtJSを使った超リッチかつ多機能なCMS「pimcore」 それなんてアプリ？といってしまいそうなリッチな管理画面やWYWIWYG編集、コンテンツのバージョン管理、A-Bテスト等、機能盛り沢山となっています。 管理画面を一見しただけでその高機能さが伺え、使ってみたいという気にさせられます。 バージョン管理機能がいい感じで、次のように、修正前、修正後がtracみたいにわかりやすく表示してくれます。 コンテンツはリッチで綺麗なUIで編集することができるみたいです。 ファイルはツリーで管理でき、画像とかはなんとWEB上でPhotoshopっぽいツールで編集できるようです。 CMS上にコンテンツと連動させた形で、GoogleAnalyticsのAPIを使った解析画面も

Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」 2010年11月24日- 520 Grid System - HTML/CSS Framework made for Facebook Page Developers Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」。 CSSフレームワークといえば沢山ありますが、こちらはFacebookのページ作成に特化したフレームワークです。 フレームワークを使って複雑なレイアウトも比較的容易に実装できそうです。 facebookが流行るかもといわれている今日この頃、一応ツール周り等準備を整えておいてもよいかというところです。 関連エントリ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「j

nude.js | Nudity detection with JavaScript and HTMLCanvas 画像がヌードかどうか調べられるJavaScript「nude.js」。 HTMLのCanvasを使ってヌードかどうかについて調べられるそうです。 結構重そうな処理ですが、高速なブラウザ上で処理させることで、サーバサイドに負担をかけることなく処理できます。 こっそりブラウザに重い処理を仕込んでおいてブラウザに処理を分散させるみたいなことも出来ちゃうのか、とちょっと怖くなったサンプルでした。 関連エントリ JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０ パズルゲーム等が作れるオープンソースのJavaScriptゲームエンジン「Diggy」 IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」

WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 2010年11月25日- jquery.dynatree.js | jQuery Plugins WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」。 次のように、デザインそっくりのUIが比較的簡単に実現できます。 スキンに対応していて、次のように、Vistaっぽくすることも可能 アイコンを付けてより分かりやすくすることもできます。 ドラッグ＆ドロップも出来たりします。移動している最中のUIもWindowsアプリそっくり 各ツリーはAjaxに対応していて、読み込み時に全部読む必要がなく、巨大なツリーを表示することにも対応しています。 Windowsアプリなんかでは何かと便利なこのUIですが

WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラ... 次の記事 ≫：シンプルさがいい感じの１５４種類のアイコンセット Top 10 MySQL Mistakes Made by PHP Developers PHP開発者のMySQLの間違いトップ１０。 手慣れている人にとっては知ってることも多いかもしれませんが、初心者が役立ったり、知らない部分のカバーとしてメモとして書いてみます MyISAMを使っている デフォルトはストレージエンジンにMyISAMだけどInnoDBを使おう リカバリ可能でオンラインバックアップ機能、外部キー利用可能なInnoDBおすすめ 詳細：Open database life: MyISAMとInnoDBのどちらを使うべきか PHPのMySQL関数を使っている mysql_* 関数を使わず、PDO等でストレージ変更に対応しよう

New Freebie: WPZOOM Developer Icon Set (154 free icons) 次のような、シンプルさがいい感じの１５４種類のアイコンセットが公開されています。 白黒ですが、かなりいい感じにデザインされています。ベクター形式( .ai ) と Photoshop 形式でダウンロード可能です。 色は自由に変えれるのと、ベクターもはいってるのでサイズも自由ですね。 関連エントリ シンプルなUIアイコンセット「Simplicio」 シンプルがいい感じの緑アイコン108のセット シンプルな丸型アイコンセット「Circular Icons」

jQuery Matrix | Romanovian 普通のサイトを一瞬でマトリックス風にできるjQueryプラグイン「jQuery Matrix」。 次のように、一見何の変哲もない普通のサイトがありますが、.matrix() メソッドで瞬時にマトリックス化されます。 以下がその結果。 なんだ、文字と色かえただけじゃん、と思われた方も多いかもしれません。 しかし、別のデモを見ると画像をマトリックス化してるデモが・・・。なんとアスキーアートです。 テキストなので選択も出来ます。 アスキーアートとして使う文字は自分で配列で指定できるのですが、次のように１文字で表現することもできます。 なんか最後はあまりマトリックス関係なくなってしまいましたね。 単純に、写真へのエフェクトとしてかけてみるだけでも面白い効果が得られそうですね。 関連エントリ ユーザ登録時にパスワード強度表示を入れてと言われた場合

１ファイルで設置が簡単で使いやすそうなMySQL/PostgreSQL管理ツール「DBKiss」 2010年11月26日- DBKiss - php database browser (mysql, postgresql) １ファイルで設置が簡単で使いやすそうなMySQL/PostgreSQL管理ツール「DBKiss」。 phpMyAdminは便利だけどファイルがやたら多くて設置しづらい、そんなに高機能は必要ないんだけど、という方にはいいかもしれないツールが公開されています。 基本的な機能は盛り込まれているようなので試してみてもいいかも。 専用サーバを使っている方は別として、レンタルサーバ等でFTP転送する場合も１ファイルなのでサクッと転送して設置できるのは便利そう。 関連エントリ １ファイルで動作する設置が超簡単なphpMyAdmin「Adminer」 phpMyAdminの簡易版「ph

Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル

Best Free Fonts of 2010 | Freebies 個性的だけど色々使えそうないい感じのフォントを色々まとめたエントリのご紹介です。 次のようなフォントが色々と紹介されています。 Null VAL Stencil Code The Lobster Font AW Conqueror Age Piron SAF こんなにも沢山フォントがあると困りそうですが、ワードに応じてこのフォントを使おう的な検索エンジンがあったら便利かもしれませんね。 関連エントリ Twitterで使われているフォント「Pico」 クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集 フリーフォントがダウンロードできる６０サイト

次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」 2010年11月28日- Supersized - Full Screen Background/Slideshow jQuery Plugin 次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」。 画像のスライドショーと言えば、次や前の画像はナビゲーションだけでわからないものがほとんどですが、このギャラリースクリプトを使えば次のように次・前の画像のサムネイルを表示しつつフルスクリーンでスライドショーを実現できます。 基本は$(element).supersized(); を呼び出すのですが、オプションを豊富に渡せて動きを自由にカスタマイズすることが可能です。 ナビゲーションのUIもなかなか秀逸なのでカッコイイ写真の

カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき

アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 2010年11月29日- jQuery.superselect アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」。 以下が普通のselect ですが…。 使用後は次のようにファンシーな感じに。 なんかページデザインとselectボックスのデザインに統一感がないというようなケースや、アイコンを付けてわかりやすく選択してもらいたい場合に使えそうですね。 <option>タグのrel属性にアイコンを設定しておいて、$(element).superselect() とやると実現できるみたいです。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサンプル集 斬新なコメントフォームデザイン集

How to Create an Awesome Image Preloader | Nettuts 画像を今風にプレロードするjQueryプラグイン。 画像をプレロードするというと、new Image してsrc に指定とかCSSで見えないようにしてロード等いうのが昔は一般的でしたね。 紹介されている jQueryプラグインを使うことで、画像の表示位置にローディングアニメーションを付けつつ、画像が読み終わったらフェードインアニメーションで表示という、今風な感じでロードできるようです。 デモページ 画像を読み込んだ後のコールバック関数を指定することもできるので、更にこれから何かをしたいという場合にも便利。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 これはいい！iPadテーマのjQuery画像ギャラリー 画像にぼかし効果を与えられ

Easy iOS Style Wallpaper in Photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials iOSスタイルの壁紙を作成するPhotoshopチュートリアル。 iOSを使っている方なら一度は見たことのあるあの壁紙画像を作成するチュートリアルです。 なんとなくオシャレなあの壁紙も比較的簡単に作れることがわかります。 フィルタのノイズを実施した後、縦横に「ぼかし（移動）」をかけてブレンドするだけのようです。 iPhone関連のサイトでの表示なんかに使うと親和性が高いかもしれませんね。 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種 ボタン作成のPhotoshopチュートリアル集 超カッコいい写真加工のPhotos

サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io

100 New And Free Cool Fonts A Designer Must Download | Design your way フリーで比較的新しい英文フォントが100個もまとまっていました。 ざっとみましたが全体的になかなかのクオリティです。使いそうなフォントはチェックしておくとよさそう。 2010年も終わりですし、2011年は新しいフォントでサイトのロゴを作ってみてもいいかもしれませんね 関連エントリ Twitterで使われているフォント「Pico」 フリーフォントがダウンロードできる６０サイト クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集