jQuery fullsizable by MSchmidt 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」。 HTML5のフルスクリーンAPIなども使ってLightBoxの代替として大きい画像を楽しむサイトに使えそうなプラグインです。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」

jsMovie - jquery plugin - for image - sequence animation - without flash html5 アニメGIFでもHTML5でもFlash動画でもない動画を実装できる「jsMovie」 JSで連番の画像を切り替えて再生する方式の動画実装ライブラリ。 再生、停止、一時停止、リピート等のボタンも付けられ、まるで従来の動画のように使えますが実際は 001.jpg といった連番画像。 複数の画像があって、これを動画のように再生したい、という場合に使えそうですね 関連エントリ 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 Youtube動画とSlideshareのスライドを同期して再生できる「Presen

QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

12 Tutorials for creating PHP5 MVC Framework PHP5でMVCフレームワークを自作するためのチュートリアル PHPフレームワークは沢山ありますが、速度や機能面において、これといってデファクトスタンダードが決まっているわけではないという状況です。 なんか機能が便利そうだなとおもって使うと速度が全くでなくて規模の比較的大きなサイトだと使いものにならなかったり、フレームワークごとにクセがあったりするので、いっそ自作した方が余計な物がはいってなくて良いなんて場合もありそうです。 そんな場合に、フレームワークを作るチュートリアル記事が参考になりそうです。 個人的に速度はかなり重要度が高く、有名なフレームワークを使う場合はCodeIgniterのような軽いフレームワークがいいなと思っています。 関連エントリ ログイン/ユーザ登録といったフォーム実装用のフレー

Zebra_Image, a lightweight image manipulation library written in PHP 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 転送量や速度の観点からPHPの画像を縮小したり、またはサイズをそろえてきれいに並べるなど扱いやすくする際にもリサイズを行いますがそういった処理を簡単に行えるようになるクラスライブラリのご紹介です。 元の画像 背景を指定しておき、２００ｘ２００ピクセルなど指定したサイズにまるめるメソッド。 元画像は一切、切り取られることなく縮小され、指定の画像サイズにできます 指定幅サイズに単に縮小 ２００ｘ２００ピクセルなどを指定した場合、指定ピクセルいっぱいに広がるようにサイズ調整して切り抜く方法 GDで１から書くと結構めんどくさかったりするのでこうしたもので簡単にやっちゃいましょう 関連

Attach a function to iOS’s shake ? gShake | Webification iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」。 このプラグインを使うことで、iPhoneをシェイクした際にブラウザ上でイベントを起こして処理を行うことができるみたいです。 iOS4.2以降で動作するそうです。 実装にはライブラリを読み込んで次のようにコールバックを設定するだけのようです。 動きなどは検証していないのですが、HTML5ベースでアプリケーションを作るぜ、という場合に便利に使うことができるかも。 関連エントリ スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 レイアウトに関する強力なjQ

上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 2011年06月07日- jQuery Slick Plugin ? Examples Design Chemical Lab 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」。 最近色々なサイトで実装されているアレを実装するためのｊQueryプラグインです。 目立たない程度にページの脇に表示されており、クリックするとコンテンツ表示します アニメーションしながらメニュー表示。常に表示しているよりも、使用頻度が少ないようなケースにおいてはメニューは隠しておいたほうがよいこともありそう 使い方も次のように直感的に簡単に使えるようになっています 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。

jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり

もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が

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サービス作成のための使えるPHPキャッシュテクニックまとめ。 サービス展開というとOSのチューニングや各種インフラソフトウェアのチューニング、更にはWEBアプリプログラム自体の効率化と、幅広い知識が必要になってきますが、PHPでWEBアプリを作る際によく効くキャッシュテクニックを用途・使いどころ別に説明します。 キャッシュをうまく効かせることで大幅に計算量を減らしてより多くのリクエストを少ないマシンで捌くことが出来、コストを下げたり、過負荷の悩みを減らせます。 個人レベルでのWEBサービス開発の場合、サーバ代がお財布を大きく圧迫しますが、最低のコストでサービスを賄うことに繋げられます、ということでPHPでサービス作ってやろうと思っている人は参考にしてみて下さい。 static変数でキャッシュ 特に何も入れなくてもそのまま使えるstatic変数。例えば、関数等で一定の計算

WordPressは1万3000以上のプラグイン、1300以上のテーマが公式に登録されており、その拡張性から大体のことは出来てしまいます。 但し、弱点があってデフォルト利用だとパフォーマンスがあんまり出ないってことで、アクセスの多いブログでも捌けるようにするには色々工夫が必要ということで高速化に関するページを色々まとめてみました。 15 Ways To Speed Up Wordpress WordPressでのページ表示高速１５の方法。 体感速度をあげちゃう方法が色々と載ってましたので通常のWEBサイト作りにおいての常識も多く含みますが参考までにメモしてみました。 FirebugとYSlowを使ってページを最適化しよう W3 Total Cache を使おう WP Super Cache 等、静的にキャッシュしてそもそもDBアクセスをなくしちゃったりするプラグインを使おうという話 WP

Free Ecommerce CMS solution: software for your online store | LiteCommerce モダンなＵＩを活用したショッピングサイト運営用phpオープンソース「LiteCommerce」 最近公開されただけあって、アイテムをドラッグ＆ドロップでバッグに入れたり、ページ遷移に一部ajaxが使われていたりします。 以下がデモ画面。アイテムや文字が大きく表示されており見やすいのが特徴 デモページはこちら 利用にはPHP5.3以降、MySQL5.0.3以降が必要 関連エントリ PHP製のショッピングカートシステムいろいろ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」

サーバ上で動いてるどのphpが重いか？を調べられる「PhpTop」。 「サーバ監視に超使える〜topコマンドのまとめ」というエントリで様々なtopコマンドを紹介したのですが、phptopなるものを新たに発見したのでご紹介。 具体的に出来ることは、今サーバで動いているものを指定した期間で、もっともアクセスが多いphp、CPUを多く消費しているphp、メモリを多く使っているphpといったものを降順にソートできるというものです。 サーバ上で多くのphpが動いており、どうも負荷が高いけどどれが重いのかよくわからないという場合に使えます。 top コマンドでは httpd が動いてるぐらいしか分からないので phper な方で負荷にお悩みの方は使ってみるのもよいかも。 たとえば、 $ phptop -t 15 -s mem のように実行すると、15分以内で、メモリを多く使っている順にソートが可能。

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 これだけあれば、自分にあったものが見つかりそうですね。

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

jqpad - Project Hosting on Google Code iPad向けのリッチなサイトが超簡単に作成できるフレームワーク「jqpad」。 iPad向けのネイティブアプリケーション風のUIでWEBサイトを構築することが容易になります。 iPhone用のiUIのiPad版といったところでしょうか。 こちらのページをiPadで見てみましょう 少しクセがあるみたいですが、使いこなせば１から作るよりははるかに楽に作れそうです。 まだ不備もあるみたいなので今後に期待です。 関連エントリ iPhone向けWebアプリを作ろう これは注目のHTML5を使ったモバイルアプリケーション構築用フレームワーク「Sencha Touch」

高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 2010年08月11日- Zoom.it 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」。 こういうものを実現するライブラリ等はありましたが、Zoom.itはサイトにURLを貼りつけて送信するだけで、インスタントに実現でき、更に自サイトに埋めこむことだって出来ます。 大きなサイズの画像をうまく指定のサイズに収めつつ、拡大もさせたいという場合にかなり使えそうです。 コントロールボタンが右下に表示されるのでここで拡大・縮小が可能 めいっぱい拡大してこんな感じ。本来の美しさは損なわれません。 使い方によっては非常に便利に使えそうですね。 以下に実際に埋め込んでみました。

入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun