- 2010/12/28 jQuery Plugin

サイト内で次にどのボタンを押したら良いか、どう行動したら良いかをチュートリアル形式で表示できるjQueryの作り方を紹介している「Website Tour with jQuery」が便利そうだったのでご紹介。
cakephp/wordpress/flash/flex/iPhone/mixiアプリの開発しています。

サイト内で次にどのボタンを押したら良いか、どう行動したら良いかをチュートリアル形式で表示できるjQueryの作り方を紹介している「Website Tour with jQuery」が便利そうだったのでご紹介。

「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。
デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。
OSが変わっても同じ見せ方をしたい場合などに良さそうですね。
詳しくは以下

「Flogr」はFlickrの写真からフォトギャラリーを作成できるPHPスクリプトです。
特定のタグや指定のユーザーの写真などから取得する情報を指定できるようになっています。
EXIF情報の取得や、写真に位置情報が含まれる場合には地図を表示する事もできるようです。

ハッピークリスマス!という事でクリスマスネタを1つ。
「How I did the 1kb Christmas Tree」というエントリーにて、ぐるぐる回るクリスマスツリーを1KB以内のJavaScriptコードで作った人がいるようです。
IEでは動作しなかったり、いくつかのブラウザでは動作がもっさりするようです。
これはJS1kという1KBまでのJavaScriptでどんな事ができるかを競うコンテストの作品のようですね。
他の作品も素晴らしいものが沢山あります。
興味のある方はJS1kをご覧ください。
「CakeDebug」はブラウザからCakePHPのデバッグレベルを切り替えるFirefox拡張です。
インストールすると、ブラウザのステータスバーにCakeアイコンとデバッグレベルが表示されるようになります。

右クリックからデバッグレベルを選択、変更できるようになりました。
CakePHP開発者の方は全員入れて良いのではないでしょうか!
コンポーネントをgithubからダウンロードして、コンポーネントに読み込むだけです。
app_controller.phpに設定すると良いでしょう。
class AppController extends Controller {
var $components = array(
'DebugControl',
);
}
デバッグレベルが0の場合には動作しないようです。
必ず1以上の値を設定してください。
Configure::write('debug', 1);
「Wirify」は既存のWebページをワイヤーに変換してくれるブックマークレットです。
ウェブサイトを構築する際のワイヤーフレームである骨組みを
既にあるサイトから持ってこれるのですごく便利です!
当サイトで使ってみるとこんな感じになります。

ブックマークレット内ではjQueryを使って構築しているようですね。
以下のリンクをブックマークしてぜひ使ってみてください!
サイトヘは下のリンクからどうぞ!
ちょっと他と違ったサイトに仕上がっているWordPressのテーマを紹介した「37 Perfact Themes Based on jQuery & AJAX」というエントリーをご紹介。
有料のテーマもありますが、フリーの物よりもクオリティはかなり高いです。
一見の価値ありです。

画面右側のテキストクリックでメインのビジュアルを切り替えるようになっています。

画面左側のボタンクリックで、メインコンテンツがスライドしながら切り替わります。
これ、結構気持ちいいですw

メインの背景がダイナミックに切り替わります。
Flex for Wordpress – A Portfolio & Blog Theme

一瞬Flash?!と間違うぐらいのクオリティ。ウインドウサイズを変更すると、アイテムが自動的に並び替えられます。

フォトログに良さそうなダイナミックな写真の使い方をしています。
サイトでは他にもまだまだ紹介されています。
お気に入りのテーマが見つかると思いますので、下のリンクからぜひ見てみてください。

2010年を振り返る意味で、自分がCakePHPで開発する際に良く使うプラグインをまとめてみました。
誰かのお役に立てれば幸いです。
■ よく使うバリデーションをまとめたBehaviorであるadd_validation_rule
モデルでバリデーションする際に本当に使います。
var $validate = array(
'hoge' => array(
"rule1" => array('rule' => array('katakana_only'),
'message' => 'hogeにカタカナ以外が含まれています'
),
),
);
■ 自動でhiddenタグを生成するヘルパーformhidden
確認画面を挟む際にhiddenに入力情報をまとめて出力してくれます。
echo $formhidden->hiddenVars();
このプラグインを知ってから、CakePHPで作ったサイトには全て組み込んでいるぐらい必須のプラグインです。
フォームを作成する際にはもう手放せません。
フォーム入力画面と確認画面で共通で使えるヘルパーです。
確認画面を作る際に、確認画面用のviewを作らなくてもよいので大変便利に使わせてもらってます。
例えば、こんなviewをelementに作ったとします。
echo 'タイトル:';
echo $xformjp->input('Post.title');
そうすると、入力画面と確認画面のviewから このelementを読み込むだけで、
・入力画面ではフォームを表示
・確認画面では入力されたテキストを表示
を自動的に切り替えてくれる素敵仕様になっています。
これもまず手放せないプラグインとなっています。
コメントを表示するプラグインです。
投稿はajaxで出来るようになっているので、組み込みも簡単です。
コメントスパム対策プラグインであるAkismetや、連続投稿の防止、IP制限など様々なスパム対策が施されています。
使う時はこんな感じでelementを組み込むだけです。
//投稿済みのコメント一覧を表示します
echo $this->element('comments/index', array(
'plugin' => 'commentor',
'commentParent' => $commentParent,
));
//投稿フォームを表示します
echo $this->element('comments/add', array(
'plugin' => 'commentor',
));
言わずと知れた最強デバッガー。
POSTやViewへ渡した変数の出力やSQLの表示など、必要な情報をブラウザで確認できるようになります。
これはコンポーネントにプラグインを指定するだけで使えるようになります。
var $components = array('DebugKit.Toolbar');
画像のアップロードビヘイビア。
プラグイン使用時に画像のフォーム名を指定して、
WWWROOTの下にモデル名 / カラム名 のフォルダを作成すると、該当箇所に勝手にアップロードしてくれます。
リサイズのサイズ設定も初期値を設定してあげるだけで自動的によしなにしてくれます。
var $actsAs = array(
'Meioupload.MeioUpload' => array(
'image' => array(
'thumbsizes' => array(
//サムネイルのサイズをここで指定します。
'large' => array('width'=>450, 'height'=>450, 'zoomcrop'=>null),
),
),
),
);
MediaPluginという高機能なファイルアップローダーもあるのですが、画像ファイルだけ上げれば良い場合にはこっちを使う事が多いです。
PHP高機能日本語メール送信ライブラリ。
メール送信の際はもうこれで良いでしょう的な最強メールClass。
コンポーネントととして利用する場合には、初期値をよしなにしてくれるプラグインcakephp-qdmailerは必須です。
以下はQdmailerを使用したサンプル
$this->Qdmailer->to( "送信先メールアドレス" );
$this->Qdmailer->subject("サブジェクト");
$this->Qdmailer->from( "送信者のメールアドレス" );
//メール本文はelementを使用
$this->Qdmailer->cakeText( $this->data, 'element名', 'default');
//送信処理
if (!$result = $this->Qdmailer -> send()) {
//メール送信時にエラーが発生した場合にログを出力
$message = print_r($this->Qdmailer->errorStatment(false),true);
$this->log($message);
$this->log($this->data);
}
チェックボックスをグループとして扱うためのビヘイビア。
チェックボックスのチェック数をバリデートできるようになります。
例えば、1個以上、4個以下のチェックの場合にエラーを発生させるような動作なんかに使います。
var $actsAs = array(
'MultiboxValidation' => array(
'name' => 'house',
'min' => '1',
'max' => '4',
'message'=>'1から4個の範囲でチェックしてください'
),
);
データはシリアライズされて格納されるのでなかなか便利です。
Validationの必須ルールを動的に変更します。
データ登録時と編集時でバリデーションが違ったり、同じModelでもページ毎にバリデーションが違う場合なんかに良く使います。
function register() {
$this->User->setValidation('register');
//登録時にのみチェックするバリデーションに変更します。
}
function password() {
$this->User->setValidation('changePassword');
//パスワード変更時にのみチェックするバリデーションに変更します。
}
並び順を指定したり変更する事ができます。
idを指定するだけで、一つ上(下)のデータと順番を入れ替える事ができます。
//一つ上に移動する場合 $this->ModelName->moveup($id); //一つ下に移動する場合 $this->ModelName->movedown($id);
※bakeryの記事からバージョンが上がっているようです。
リンク先の一番下のコメントに最新版へのリンクがあります。
データベースが使えない場合や、管理更新はCSVを使うと言う場合に重宝します。
CSVを使ったfind、ページングができるようになっています。
$conditions = array(
"id >" => 10,
"status" => 1
);
$conditions = array(
"or" => array(
"id <=" => 10,
"status" => 1
)
);
CakePHPは最早枯れたフレームワークになって来ていると思います。
もっと便利になるように、みんなで使い倒しましょう。
他にも便利なプラグインがあれば教えてください!

「SVGGraph」はPHPから使用可能なSVGグラフのライブラリです。
グラフの描画にはデータベースからデータを取得するなど、サーバーサイドで操作できると非常に便利なのですが、
このライブラリを使う事でPHPから簡単にグラフを出力可能になっています。
棒グラフ、折れ線、円グラフを出力可能なのはもちろん、全て3Dで表示する事もできるようになっています。
以下のようなコードで使用できるようです。
$graph = new SVGGraph(640, 480);
$graph->colours = array('red' ,'green' ,'blue' );
$graph->Values(100, 200, 150);
$graph->Links('/Tom/' , '/Dick/' , '/Harry/' );
$graph->Render('BarGraph' );
動作にはPHP5以上が必要になっていました。
IEはデフォルトではSVGをサポートしていませんが、Adobe SVG Viewerなどのプラグインをインストールする事で見る事ができるようになります。

「SMover」はソーシャルメディアへのリンクを必要な時にだけ表示するためのjQueryプラグインです。
常に表示していると邪魔なアイコンもユーザーのアクションによって表示させる事で、すっきりしたレイアウトになります。
通常時は以下のような状態にしておいて、、、

マウスオーバーでアイコンやリンクを表示させる事ができます。

ソーシャルメディアへのリンクだけでなく、固有のメールリンクやゴミ箱アイコンなど使い道は色々ありそうです。

以下のようなコーデで簡単に実装できるようです。
■ JAVASCRIPT
$(document).ready(function() {
$('#share-page').smover();
});
■ HTML
ファイルサイズも4KBと軽量サイズですね。
動作にはjQueryとhoverIntentというプラグインが必要なようです。
興味のある方はダウンロードしてみてください。
0