次に何をするかを教えられるチュートリアルをjQueryで作る方法

0

20101228-01

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

スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」

0

20101227-01

Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。

デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。
OSが変わっても同じ見せ方をしたい場合などに良さそうですね。

詳しくは以下

Flickrの写真からフォトギャラリーを作成できるPHPスクリプト

0

20101224-01

Flogr」はFlickrの写真からフォトギャラリーを作成できるPHPスクリプトです。

特定のタグや指定のユーザーの写真などから取得する情報を指定できるようになっています。
EXIF情報の取得や、写真に位置情報が含まれる場合には地図を表示する事もできるようです。

3Dのクリスマスツリーを1KB以内のJSで作る方法

0

20101224-02

ハッピークリスマス!という事でクリスマスネタを1つ。

How I did the 1kb Christmas Tree」というエントリーにて、ぐるぐる回るクリスマスツリーを1KB以内のJavaScriptコードで作った人がいるようです。

デモ

IEでは動作しなかったり、いくつかのブラウザでは動作がもっさりするようです。

これはJS1kという1KBまでのJavaScriptでどんな事ができるかを競うコンテストの作品のようですね。

他の作品も素晴らしいものが沢山あります。
興味のある方はJS1kをご覧ください。

CakePHPのデバッグレベルをブラウザから切り替えるFirefox拡張

0

CakeDebug」はブラウザからCakePHPのデバッグレベルを切り替えるFirefox拡張です。

インストールすると、ブラウザのステータスバーにCakeアイコンとデバッグレベルが表示されるようになります。
20101222-02

右クリックからデバッグレベルを選択、変更できるようになりました。
CakePHP開発者の方は全員入れて良いのではないでしょうか!

設定方法

コンポーネントをgithubからダウンロードして、コンポーネントに読み込むだけです。

app_controller.phpに設定すると良いでしょう。


class AppController extends Controller {
    var $components = array(
        'DebugControl',
    );
}

デバッグレベルが0の場合には動作しないようです。
必ず1以上の値を設定してください。

Configure::write('debug', 1);

これは便利!既存のWebページからワイヤーをつくってくれるブックマークレット

0

Wirify」は既存のWebページをワイヤーに変換してくれるブックマークレットです。

ウェブサイトを構築する際のワイヤーフレームである骨組みを
既にあるサイトから持ってこれるのですごく便利です!

当サイトで使ってみるとこんな感じになります。

20101222-01

ブックマークレット内ではjQueryを使って構築しているようですね。

以下のリンクをブックマークしてぜひ使ってみてください!

Wirify by Volkside

サイトヘは下のリンクからどうぞ!

jQueryやajaxを使ったクリエイティブなWordPressテーマ37選

0

ちょっと他と違ったサイトに仕上がっているWordPressのテーマを紹介した「37 Perfact Themes Based on jQuery & AJAX」というエントリーをご紹介。

有料のテーマもありますが、フリーの物よりもクオリティはかなり高いです。
一見の価値ありです。


Arras Theme

20101220-02

Demo  | Download

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


Auzora

20101220-03

Demo 

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


BOSSPRESS

20101220-04

Demo 

メインの背景がダイナミックに切り替わります。


Flex for Wordpress – A Portfolio & Blog Theme

20101220-05

Demo 

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


Photo Nexus

20101220-06

Demo

フォトログに良さそうなダイナミックな写真の使い方をしています。

サイトでは他にもまだまだ紹介されています。
お気に入りのテーマが見つかると思いますので、下のリンクからぜひ見てみてください。

CakePHPで普段使っているpluginをまとめてみた

3

20101220-07

2010年を振り返る意味で、自分がCakePHPで開発する際に良く使うプラグインをまとめてみました。
誰かのお役に立てれば幸いです。


1.cakeplus

■ よく使うバリデーションをまとめたBehaviorであるadd_validation_rule
モデルでバリデーションする際に本当に使います。


var $validate = array(
 		'hoge' => array(
			"rule1" => array('rule' => array('katakana_only'),
 				'message' => 'hogeにカタカナ以外が含まれています'
 			),
 		),
 	);

■ 自動でhiddenタグを生成するヘルパーformhidden

確認画面を挟む際にhiddenに入力情報をまとめて出力してくれます。

echo $formhidden->hiddenVars();

このプラグインを知ってから、CakePHPで作ったサイトには全て組み込んでいるぐらい必須のプラグインです。
フォームを作成する際にはもう手放せません


2.XformHelper

フォーム入力画面と確認画面で共通で使えるヘルパーです。
確認画面を作る際に、確認画面用のviewを作らなくてもよいので大変便利に使わせてもらってます。

例えば、こんなviewをelementに作ったとします。


echo 'タイトル:';
echo $xformjp->input('Post.title');

そうすると、入力画面と確認画面のviewから このelementを読み込むだけで、
・入力画面ではフォームを表示
・確認画面では入力されたテキストを表示
を自動的に切り替えてくれる素敵仕様になっています。
これもまず手放せないプラグインとなっています。


3. cakephp-commentor-plugin

コメントを表示するプラグインです。
投稿はajaxで出来るようになっているので、組み込みも簡単です。

コメントスパム対策プラグインであるAkismetや、連続投稿の防止、IP制限など様々なスパム対策が施されています

使う時はこんな感じでelementを組み込むだけです。


//投稿済みのコメント一覧を表示します
echo $this->element('comments/index', array(
    			'plugin' => 'commentor',
    			'commentParent' => $commentParent,
				));

//投稿フォームを表示します
echo $this->element('comments/add', array(
    		'plugin' => 'commentor',
		));


4. debug_kit

言わずと知れた最強デバッガー。
POSTやViewへ渡した変数の出力やSQLの表示など、必要な情報をブラウザで確認できるようになります。

これはコンポーネントにプラグインを指定するだけで使えるようになります。


var $components = array('DebugKit.Toolbar');


5. MeioUpload Behavior

画像のアップロードビヘイビア。
プラグイン使用時に画像のフォーム名を指定して、
WWWROOTの下にモデル名 / カラム名 のフォルダを作成すると、該当箇所に勝手にアップロードしてくれます。

リサイズのサイズ設定も初期値を設定してあげるだけで自動的によしなにしてくれます。

    var $actsAs = array(
        'Meioupload.MeioUpload' => array(
            'image' => array(
                'thumbsizes' => array(
                //サムネイルのサイズをここで指定します。
    				'large'  => array('width'=>450, 'height'=>450, 'zoomcrop'=>null),
                ),
            ),
        ),
	);

MediaPluginという高機能なファイルアップローダーもあるのですが、画像ファイルだけ上げれば良い場合にはこっちを使う事が多いです。


6. qdmail

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);
}


7. multibox_validation

チェックボックスをグループとして扱うためのビヘイビア。

チェックボックスのチェック数をバリデートできるようになります。
例えば、1個以上、4個以下のチェックの場合にエラーを発生させるような動作なんかに使います。

var $actsAs  = array(
    'MultiboxValidation' => array(
        'name' => 'house',
        'min' => '1',
        'max' => '4',
        'message'=>'1から4個の範囲でチェックしてください'
    ),
);

データはシリアライズされて格納されるのでなかなか便利です。


8. MultivalidatableBehavior

Validationの必須ルールを動的に変更します。
データ登録時と編集時でバリデーションが違ったり、同じModelでもページ毎にバリデーションが違う場合なんかに良く使います。

function register() {
    $this->User->setValidation('register'); 

    //登録時にのみチェックするバリデーションに変更します。
} 

function password() {
    $this->User->setValidation('changePassword'); 

    //パスワード変更時にのみチェックするバリデーションに変更します。
}


9. OrderedBehavior

並び順を指定したり変更する事ができます。
idを指定するだけで、一つ上(下)のデータと順番を入れ替える事ができます。

//一つ上に移動する場合
$this->ModelName->moveup($id);
//一つ下に移動する場合
$this->ModelName->movedown($id);

※bakeryの記事からバージョンが上がっているようです。
リンク先の一番下のコメントに最新版へのリンクがあります。


10. csv Datasource

データベースが使えない場合や、管理更新はCSVを使うと言う場合に重宝します。
CSVを使ったfind、ページングができるようになっています。

$conditions = array(
  "id >" => 10,
  "status" => 1
);
$conditions = array(
  "or" => array(
    "id <=" => 10,
    "status" => 1
  )
);

最後に

CakePHPは最早枯れたフレームワークになって来ていると思います。
もっと便利になるように、みんなで使い倒しましょう。

他にも便利なプラグインがあれば教えてください!

SVGグラフを出力できるPHP製のライブラリ「SVGGraph」

0

20101220-01

SVGGraph」はPHPから使用可能なSVGグラフのライブラリです。

グラフの描画にはデータベースからデータを取得するなど、サーバーサイドで操作できると非常に便利なのですが、
このライブラリを使う事でPHPから簡単にグラフを出力可能になっています。

3Dのグラフが簡単に出力可能に

棒グラフ、折れ線、円グラフを出力可能なのはもちろん、全て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などのプラグインをインストールする事で見る事ができるようになります。

マウスオーバーするとソーシャルメディアのリンクを表示するjQueryプラグイン「SMover」

0

20101219-11

SMover」はソーシャルメディアへのリンクを必要な時にだけ表示するためのjQueryプラグインです。

常に表示していると邪魔なアイコンもユーザーのアクションによって表示させる事で、すっきりしたレイアウトになります。

通常時は以下のような状態にしておいて、、、

20101219-09

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

20101219-08

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

20101219-10

以下のようなコーデで簡単に実装できるようです。

■ JAVASCRIPT

$(document).ready(function() {
    $('#share-page').smover();
});

■ HTML

Share Page
  • Share with Delicious
  • Share with Digg
  • Share with Facebook
  • Share with StumbleUpon
  • Share with Twitter

ファイルサイズも4KBと軽量サイズですね。
動作にはjQueryとhoverIntentというプラグインが必要なようです。

興味のある方はダウンロードしてみてください。