jQueryTween - Lightest Tweening Engine for jQuery 軽量＆多機能なアニメーションエンジン「jQueryTween」 ハードウェアアクセラレーションがかかったアニメーションを簡単実装できます。使い方も簡単。 関連エントリ リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」

ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」 2012年07月19日- Nestable ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」。 次のような綺麗なリストを下位の海藻までドラッグ＆ドロップで自由に移動できる所がポイント。 jQuery使っているとはいえ一から実装すると大変そうですが、簡単に実現できてしまいます。 折りたたみも可能です 階層データをJSONで吐き出すこともでき、データの保存も簡単。またそのデータを元にツリーの描画も可能ということで便利。 関連エントリ ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 ページめくりを実現するためのjQueryプラグイン集 レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」 アイテムを浮遊

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

jQuery Mobile Autocomplete now available - andy matthews スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン。 スマホではアプリなんかでよく見られるオートコンプリートですが、スマホ用WEBサイトにこれを組み込みたいといった場合にこれが使えそうです。 デザインも良い感じですね 関連エントリ jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mobi Pick」 スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ

Timepicker for jQuery 時間の入力を楽にすることが出来るjQueryプラグイン。 inputにカーソルを合わせると補完候補が出て、次のように選択できるようにすることができます クリックするとそのままテキストが入ります。 基本の時間をベースとして何分後かという表示をするようなカスタマイズも可能 サービスによってはうまくマッチするUIが簡単に作れそうですね。 関連エントリ ファイルアップロード関連のjQueryプラグイン１０ インラインサジェストを実現するjQueryプラグイン「jQuery.suggest」 Twitter OAuth認証をポップアップで行うjQueryプラグイン

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし

PDFKit ? A PDF Generation Library for Node Node.js向けのPDF作成ライブラリ「PDFKit」が公開されていました npmコマンドでインストールできるPDFライブラリです。 npm install pdfkit で入るそう。 HTML5のcanvas風APIで作れるみたいです。サンプルコードは以下。 かなり分かりやすいコードですね。JavaScript最高！というやつです。 今後もこうしたライブラリがどんどん充実していってほしいですね 関連エントリ node.jsに関する基礎や開発・チュートリアルのまとめ Node.js上でPHPを呼び出せる「NodePHP」 node.jsでシンプルなMVCを行うための仕組み色々

異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div

PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ 2011年05月30日- （注） PR記事です。でも一見の価値があると思います。 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ 過去に「ZendFrameworkで構築されたECサイト構築プラットフォーム「Live Commerce」」として紹介させて頂いたオープンソースのLive Commerceのホスティング版です。 そもそもosCommerceのメンテナンス性が悪いことでフルスクラッチでZendFrameworkをベースに書きなおされたらしい物で、以前もご紹介しましたがかなり多機能。 あと、単に物販のECサイトを構築するだけではなくて、ファイルのダウンロード販売や、携帯サイトとの連携も出来てしまいます。 写真や素材、プログラム、シェアウェアを実際に売れちゃうみ

背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ

どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 2011年05月12日- FitText - A plugin for inflating web type どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 iPhone/iPadやPCでも文字をフィットさせられます。 ブラウザをリサイズしてもちゃんとフィットしてくれます。 文字を大きくしてインパクトあるように見せたい、でもズレたらなんかカッコ悪いという場合に使えますね。 PCの通常サイズ。 幅を小さくしたところ。 使い方は $(element).fitText() とやるだけでOKみたい。 １からやるとなるとちょっとめんどくさそうですが、これだけ簡単にできる「jQuery最高！」という声が聞こえてきそうですね。 （

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

異なる幅・高さの画像も超綺麗に整列させる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以上ということで殆どのブラウザに対応。 まず、必要な

HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ

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

WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ 「WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ」というエントリで先日PEARの便利ライブラリについてまとめたのですが、今回はPEAR以外でも有名なライブラリをご紹介。 PEAR以外で挙げていくときりがありませんが、とりあえず有名どころや、私の知っている物、過去に当ブログで紹介したものをまとめてみます。 他にも便利な物や定番の物がありましたら、@phpspot_kj までTwitterなんかで教えてください。 グラフ描画 JpGraph ありとあらゆるグラフを描画してくれる有名なグラフライブラリ。 pChart グラフにデザイン性を求める場合に使えるクールなグラフ描画ライブラリ PHP/SWF Charts PHPでグラフをFlashで描画出来るライブラリ。グラフに動きを出してインタラクティブ

WEBサービス用にさくらのVPSサーバーを借りた後で役に立つ記事色々 さくらVPSサーバの人気が高いということで、借りたらやる設定についての記事をまとめてみました。 さくらのvpsといっても普通のcentosと一緒なので、他のvpsサービスやec2でも使えます。レンタルサーバーと違って最初はなにも入ってないので初期設定が必要ですが、これさえみとけば大体大丈夫というものをまとめてます。 さくらのVPS 初期設定 【さくらのVPS】初期設定をしてみた | Untitled Documents. root パスワードの変更、ユーザ追加、sudoers編集、ssh公開鍵設置、パッケージ管理ツールの設定等 CentOSをサーバーとして活用するための基本的な設定 (さくらインターネット創業日記) sshのポート番号変更、公開鍵設定、ファイアウォール設定の他、不要サービスの停止といったさくらインターネッ

スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ

Last RSS - PHP RSS parser/reader lastRSS.php is simple yet powerfull PHP class to parse RSS. PHPからシンプルにRSSをパースできるクラスライブラリ「Last RSS」。 １つのファイルのinclude で済み、必要最小限の機能で、クラスライブラリの分かりやすい形で使えます。 コード例は次のようにシンプル // include lastRSS library include './lastRSS.php'; // create lastRSS object $rss = new lastRSS; // setup transparent cache $rss->cache_dir = './cache'; $rss->cache_time = 3600; // one hour // load s

500 Exceptionally Beautiful Photoshop Patterns For Classy Designs | Multy Shades 高級っぽさを演出できるPhotoshopパターン500がまとめられたエントリのご紹介です。 絨毯地やグラデーション等、背景にすればサイトがとたんに高級っぽくなりそうなパターンには困らなさそう。 単なる画像なわけですが、高級感が簡単に出せたりするところはWEBサイトのデザインの面白いところですね。 関連エントリ 200を超える非常に美しいPhotoshopのパターン集 背景画像に使えるPhotoshopの背景パターン2000 PhotoShopのブラシやパターンがいっぱい「myphotoshopbrushes.com」 サイトの背景に使うと印象を際立たせられそうな50のPhotoshopパターン集 背景画像に使えるレトロなPhoto