• WP Google Maps

WP-GoogleMapsプラグインの概要

WP-GoogleMapsは1ブログ1マップという感じで実装するプラグインで、1つのマップの中にいくつでもマーカーを落とし込むことができます。

今のところ1つしかマップが登録できないのですが、ショートコードにidという記載があるため、もしかしたら今後複数のマップの管理などもできるようになるかもしれません。

有償のアドオンが存在する

有償のアドオンが存在し、アドオンを導入することで、

・デフォルトのマーカーアイコンの変更
・マーカー毎のアイコンの変更
・フキダシのテキストの変更
・フキダシへの画像挿入
・フキダシへのリンクの挿入
・マーカー情報のインポート、エクスポート（CSVファイル形式）

といったことが可能になります。

• WP Google Maps – WordPress Google Maps Plugin

問題点

プラグインを普通に導入すると、マーカー設置の際に日本語を入れると、文字化けして住所検索もできず、全く使い物になりません。

原因はプラグインのソースコードに有り、管理用のデータベーステーブルを生成する際、文字コードをlatin1として指定しているためです。

wpGoogleMaps.php 1064行目付近

    $sql = "
        CREATE TABLE `".$table_name."` (
          `id` int(11) NOT NULL AUTO_INCREMENT,
          `map_id` int(11) NOT NULL,
          `address` varchar(700) NOT NULL,
          `desc` varchar(700) NOT NULL,
          `pic` varchar(700) NOT NULL,
          `link` varchar(700) NOT NULL,
          `icon` varchar(700) NOT NULL,
          `lat` varchar(100) NOT NULL,
          `lng` varchar(100) NOT NULL,
          `anim` varchar(3) NOT NULL,
          PRIMARY KEY (`id`)
        ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; // この CHARSET=latin1 が問題
    ";

改善する方法

プラグインインストール前

WordPressの自動インストール機能を利用せず、アーカイブとしてまずはファイルをダウンロード・解答し、ソースコードを修正します。

--- wpGoogleMaps.php    2012-02-17 18:24:32.000000000 +0900
+++ wpGoogleMaps2.php   2012-02-21 23:50:50.002343200 +0900
@@ -1074,7 +1074,7 @@
           `lng` varchar(100) NOT NULL,
           `anim` varchar(3) NOT NULL,
           PRIMARY KEY (`id`)
-        ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
+        )
     ";
 
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');

具体的には、ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 の指定はいらないので削ってしまいます。

プラグインインストール後

コンソールまたは管理ツール（PhpMyAdminなど）でテーブルの文字コードをutf8に変更します。

バリデーションルールを切り替えるというのも1つの手段かと思いますが、もっと簡単に、バリデーションの定義だけでそれを実現できる関数を、ビヘイビアとして書いてみたので公開します。

ソースコード

下記のassoc_field_validation.phpをダウンロードして、APP/models/behaviors/以下に設置してください。

使い方

ビヘイビアに含まれるcheckAssocField関数を、バリデーションのルール（ユーザー定義関数）として指定します。

下記のコードは、先ほどの「選択肢A」が選ばれていた場合に「アンケート」の入力を必須入力にする、というサンプルです。

class Contact extends AppModel
{
	public $validate = array(
		'option' => array(
			'inList' => array(
				'rule' => array('inList', array('A', 'B', 'C')),
				'required' => true,
				'allowEmpty' => false,
			)
		),
		'questionnaire' => array(
			'checkAssocField' => array(
				'rule' => array('checkAssocField', 'option', array('A'), 'notEmpty'),
				'message' => '必ず入力してください。',
				'required' => true,
			),
		),
	);
}

checkAssocField関数は3つの引数を取ります。

assocField (string)

値をチェックする入力フォーム名です。

assocValueList (array)

assocFieldで指定してた入力フォームの値がここで指定された値ならば、delegateRuleを用いてバリデーションを行います。

delegateRule (mixed)

assocFieldで指定したフォームの値がassocValueListの値に含まれる場合に、実行するバリデーションのルールを指定します。
ここでは他のバリデーションのルールを自由に指定する事が出来ます。
例）array('maxLength', 30)、array('between', 20, 30)

注意

checkAssocField関数をバリデーションに利用した場合、そのフィールドのallowEmptyとrequiredの指定に気をつけて下さい。

例えば上述の例の場合、allowEmptyをtrueと指定してしまうと、この関数は意味を成しません。（値が空でもOKということになるため、「選択肢」がAだとしても「アンケート」の値が空で通ってしまう）

また、allowEmptyをfalseと指定すると、「選択肢」がAであれBであれ、「アンケート」が空の場合はエラーになってしまうため、これもまた意味がありません。

そこで、requiredのみをtrueとすることで値が空の状態でもバリデーションルールは実行する、という状態にする事が出来ます。

必須のチェックがしたければ、delegateRuleにnotEmptyを指定する事で行う事ができるので、allowEmptyではなくそちらを利用するようにしてください。

この指定にだけは気をつけて下さい。

エントリポイントであるAPP/webroot/index.phpを差し替えるという強硬手段もあるかと思いますが、もっと手軽に実現するためのMaintenanceコンポーネントを作成してみたので公開します。

利用可能な環境

下記環境で作成・テストを行っています。

• PHP 5.3.1
• CakePHP 1.3.11

PHP4系列では動作しません。
また、CakePHP1.2以前では動作するかわかりません。

ダウンロードと設置

下記ソースコードを、maintenance.phpとしてAPP/controllers/components/以下に配置してください。

組み込み

基本的に1つだけのコントローラーをメンテナンスモードにする、というのもあまり考えられないと思うので、AppController自体に組み込んでおくと良いです。

class AppController extends Controller
{
    public $components = array('Maintenance');
}

設定

Maintenanceコンポーネントを動作させる上での設定を、下記の何れかの方法で設定を行います。

Configureクラスを利用する場合

bootstrap.phpなどの設定ファイルに記述する際にこちらの方法を使います。

Configure::write('Maintenance.level', 2);
Configure::write('Maintenance.errorMethod', 'error404');

コンポーネントの指定時に設定を行う場合

class AppController extends Controller
{
    public $components = array('Maintenance' => array(
        'level' => 2,
        'errorMethod' => 'error404',
    );
}

Controller::beforeFilterメソッドを利用する場合

class AppController extends Controller
{
	public $components = array('Maintenance');
	
	public function beforeFilter()
	{
		$this->Maintenance->level = 1;
		$this->Maintenance->errorMethod = 'error404';
	}
}

利用出来る設定の一覧

下記の項目を設定可能です。

動作の仕様上、コンポーネントのコンストラクタで利用する設定や、Component::initializeメソッドの実行時に利用する設定もあるため、そういった設定はbootstrap.phpでConfigureクラスを利用して指定したり、コンポーネントの指定時に設定する方法しか利用できません。

そのため、注釈にbootstrap.phpのみ等と書いてある項目に関しては、設定のタイミングを間違える（例えば、bootstarp.phpと書いてある項目をController::beforeFilterで設定する等）と正しく動作しませんので、ご注意下さい。

level (int) ※bootstrap.php、またはコンポーネントの指定時のみ

メンテナンスモードのレベルを設定します。
0 – メンテナンスモードを利用しません。
1 – allowedCIDRで指定されたIPアドレス帯域以外からのアクセスは、強制的にデバッグレベルを0にします。
2 – allowedCIDRで指定されたIPアドレス帯域以外からのアクセスは、強制的にデバッグレベルを0にした上で、メンテナンス画面へリダイレクトします。

debug (int) ※bootstrap.phpのみ

allowedCIDRで指定されたIPアドレス帯域でアクセスした場合のデバッグレベルを設定します。

allowedCIDR (array) ※bootstrap.php、またはコンポーネントの指定時のみ

メンテナンスモードの影響を受けないIPアドレスをCIDRの形式で記述します。
levelが1以上の時にここで指定されたIPアドレス帯域でアクセスすると、debugで指定されたデバッグレベルでアプリケーションが実行されます。
配列を利用する事で複数のパターンを指定する事が可能です。
例）192.168.0.1/32

baseURL (mixed)

アプリケーションのホームURLを文字列またはCakeURLの形式で指定します。
levelが2の時にこれ以外のURLにアクセスがあった場合、このURLにリダイレクトした後にメンテナンス画面を表示させます。

errorMethod (string)

メンテナンス画面を表示するためのエラーメソッドの名前を指定します。
内部的にはObject::cakeErrorメソッドを利用しているため、cakeErrorクラスもしくはappErrorクラスに定義されているメソッド名を指定します。（デフォルトではerror404です）

errorParams (array)

エラーメソッドに渡すパラメータを配列で指定します。

利用方法

上記設定を参考に、適切な設定を行うだけでOKです。
あとは必要に応じてlevelを2に変更する事で、すぐさまアプリケーション全体をメンテナンス中にすることができます。

その際、allowedCIDRに指定されたIPアドレス帯域からは、debugに指定したデバッグレベルで通常通りのアクセスが可能なため、通常のユーザーにはメンテナンス中を表示させ、その間に管理者がシステムのアップデートやバグの調査などを行う事が可能になります。

levelが1の場合は、通常のユーザーはデバッグレベル0、許可されたIPアドレス帯域からはdebugに指定したデバッグレベルでアクセスする事ができるので、小さなバグの検証などにも利用できるかと思います。

カスタマイズ性の高いフォーム作成画面

通常のテキスト入力やテキストエリアなどの他に、チェックボックスやセレクトボックスなどの多彩な入力フォームを設けることができ、さらにその組み合わせを、フォーム単位で保存する事が可能です。

選択できる入力フォーム

入力フォームは下記の11種類から選択し、各フォームをいくつでも配置する事が可能です。

• テキスト項目
• メールアドレス項目
• テキストエリア
• ドロップダウン・メニュー
• チェックボックス
• 承諾の確認
• クイズ
• CAPTCHA（画像認証）
• ファイルのアップロード
• 送信ボタン

右ペインのドロップダウンメニューから入力フォームのタイプを選択すると、入力フォームのカスタマイズを行う画面が表示されます。

必須入力かどうかや、IDやclass名などを指定する事が可能です。

また、入力された内容に従って、入力フォームや入力フォームの内容をを表示するためのテンプレートタグが表示されています。

このテンプレートタグを使って、お問い合わせフォームのHTMLテンプレートを作成します。

テンプレートタグは表示される際に適宜指定した入力フォームのHTMLに差し替えられ、お問い合わせフォームが表示されます。

通知メールのカスタマイズ

問い合わせがあった場合に、その問い合わせの内容がメールで管理者に送られてくる、通知メールの内容もカスタマイズすることが可能です。

入力フォームを作成した時に表示されたテンプレートタグを利用することで、送信されるメールのテンプレートを作成します。

テンプレートタグはお問い合わせフォームのHTMLテンプレートと違い、各フォームに入力された内容に差し替えられます。

確認メールも、もちろん送ることができる

問い合わせを行ってくださった方に、入力内容の確認として送信する「確認メール」も、簡単に対応することが可能です。

先ほどのメールの設定エリアの下にメール2という項目があり、「利用する」のチェックを入れると、こちらのメールテンプレートの内容も、同時にメールとして送信されるようになります。

このメールの「宛先」欄をメールアドレスのテンプレートタグを入力することで、確認メールとしての機能を実現する事ができます。

メールアドレスの入力フォームを設置していない場合、当たり前ですが確認メールは利用できません。

保存

メールフォームに適当な名前を付けて保存してください。
この時、画面下にフォームを埋め込むためのテンプレートタグが表示されます。

フォームの設置

フォームは、カスタムポストを含むあらゆるページに埋め込むことができます。
本文に、先ほど作成したメールフォームのテンプレートタグを埋め込むだけです。

動作確認

実際にフォームを設置したページを開いて、送信テストを行ってみましょう。

Ajaxを使ったリッチな送信画面なので、確認画面を作成する手間や、煩わしい画面スクロールがありません。

メールが正しく届いていれば大丈夫です。

文字コードによる注意

私の環境では発生していませんが、サーバーのPHPの文字エンコードの設定によってはメールの内容が文字化けするようです。

下記フォーラムの投稿をリンクしておきますので、文字化けが発生してしまった方は参考にしてください。

• WordPress › フォーラム » Contact Form 7のコンタクトメールで文字化けしてしまう

総括

MovableTypeでAFormというプラグインを利用したことがあるのですが、そちらに近いインターフェースで、簡単にお問い合わせフォームを作成する事が可能になっています。

AFormと比べると、コンバージョン率の測定やお問い合わせ内容の一括エクスポートなどの機能は無く、使い勝手も多少劣りますが、無償で利用出来る点を考えると、非常に利用価値の高いプラグインだと感じました。

WordPress版AFormと言っても過言ではないように思います。

高機能なメールフォームが欲しい方、WordPress版のAFormを探していた方など、WordPressを利用している方であれば是非導入を考えてみて下さい。

前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。

そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました。

ソースコード

利用方法

ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。

$('#tweets').twitterTrackback();

オプション

下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。

$('#tweets').twitterTrackback({ exclude: [ 'jyokyoku' ], renderCallback: renderTweets });

オプションの一覧

url (string)

ツイートを取得したいURLを指定します。デフォルトでは、スクリプトを設置したURLが利用されます。

wrapperTag (string)

ツイートの一覧を囲むタグを指定します。デフォルトではulです。

removeHash (boolean)

ツイートを取得するurlにハッシュが含まれる場合に、それを削除するかを指定します。デフォルトではtrueです。

renderCallback (function)

ツイートをレンダリングする関数を指定します。

pagerCallback (function)

ページャをレンダリングする関数を指定します。

pagerPos (string)

ページャを表示する位置を指定します。

• both – ツイート一覧の上下
• top – ツイート一覧の上
• bottom – ツイート一覧の下

perpage (integer)

1ページに表示するツイートの数を指定します。デフォルトでは10です。

noTrackback (string)

ツイートが1件も無い場合に表示するメッセージを指定します。デフォルトでは<p>Twitterからのトラックバックはありません。</p>が表示されます。

exclude (array)

ツイートを表示したくないユーザーIDを配列で指定します。

生成されるHTMLコード

renderCallbackオプションやpagerCallbackオプションに何も指定しない場合、下記のようなHTMLコードが生成されます。

適宜CSSを利用してスタイリングしてください。

ツイート一覧

<ul>
	<li class="tweet1">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
	<li class="tweet2">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
</ul>

ページャ

<div class="tweetPager">
	<span class="current">1</span>
	<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(2); return false;">2</a></span>
</div>

コールバック関数を利用する

renderCallbackオプションやpagerCallbackオプションに適切な関数を渡すことで、表示されるツイートの内容やページャのコードを変更する事ができます。

renderCallbackオプションを指定する

renderCallbackオプションを指定する場合、引数を1つ取る関数を指定してください。
引数にはツイートの番号が数値で渡されます。

また、関数のthisスコープはツイートの情報が格納されたオブジェクトになるため、this.author.nameなどでツイートに関する情報を表示することができます。

デフォルトで実行される関数を載せておきます。

function renderHtml(n) {
	return (
		'<li class="tweet' + n + '">' +
			'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
			'<ul class="section">' +
				'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
				'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
				'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
			'</ul>' +
		'</li>'
	);
}

pagerCallbackオプションを指定する

pagerCallbackオプションを指定する場合、引数を3つ取る関数を指定してください。
引数は下記の値が渡されます。

1. (integer) 現在のページ番号
2. (integer) 1ページにいくつツイートを表示するか
3. (integer) 現在のURLに対する全ツイート数

また、ページャで生成されたリンクがクリックされた場合には、必ず下記の関数を実行して、ツイート一覧を書き換えるようにしてください。

jQuery.twitterTrackback.update(pageNumber)

デフォルトで実行される関数を載せておきます。

function pagerHtml(current, perpage, total) {
	var totalPages = total / perpage;
	var links = '';

	for (var i = 1; i < totalPages; i++) {
		if (current != i) {
			links += '<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(' + i + '); return false;">' + i + '</a></span>';

		} else {
			links += '<span class="current">' + i + '</span>'
		}
	}

	return (
		'<div class="tweetPager">' + links + '</div>'
	);
}

バグやご要望など

バグやご要望などありましたら、ツイッターかコメントフォーム、Facebook、またはお問い合わせフォームからご連絡ください。

MediaPluginという有名なファイルアップロードプラグインがありますが、高機能・多機能との引き替えに、インストール方法やその利用方法が非常にわかりづらく、さらにプラグインをバージョンアップしただけでエラーを吐いて動かなくなったりと、常時メンテナンス、するプロジェクトに導入するには少々の抵抗があります。

そこで、もっとシンプルで使いやすいファイルアップロードプラグインである、FileBinderプラグインを紹介したいと思います。

FileBinderプラグインの特徴

FileBinderプラグインは、ファイルアップロードに関して下記のような機能を持っています。

• ファイルサイズの制限やファイルタイプの制限など、アップロードしたファイルのバリデーション
• ファイルの保存方法を任意のディレクトリに保存するか、DBにバイナリとして保存するか選べる
• 全てのファイルを1つのテーブルで管理できる
• 任意のテーブルにファイルの情報を仮想のフィールドとして組み込むことができる

ファイルアップロードで必要とされるであろうほとんどの機能が実装されていて、普通に使う分であれば何一つ不自由はしません。

そして、FileBinderプラグインの特徴と言える機能が、上記でも紹介している、任意のテーブルにファイルの情報を仮想フィールドとして組み込むことができる機能です。

この機能は、特定のテーブルの検索結果に仮想のフィールドを作成し、そこにファイルの情報を埋め込むことで、あたかもそのテーブルにファイルのデータが格納されているかのように扱うことができるのです。

仮想フィールドの例

例えば下記のようなプロフィールを管理するテーブルがあったとします。

• first_name
• last_name
• age
• blood_type
• address
• email
• phone

このテーブルにはプロフィール画像などを格納するフィールドはありません。
しかし、FileBinderプラグインを用いると、このテーブルの構造に全く手を付けずに、検索結果にプロフィール画像の情報を埋め込む事が可能になります。

• first_name
• last_name
• age
• blood_type
• address
• email
• phone
• profile_image
  • file_size
  • file_name
  • file_content_type
  • file_object
  • …

この機能は非常に便利です。

テーブルに手を加えなくても良いのでデータベース設計が柔軟になりますし、1つのテーブルにいくつでも仮想フィールドを加えることができるため、仕様変更が発生した場合でも簡単に対応できます。

また、Mediaプラグイン同様にファイルの情報を1つのテーブルで管理できるため、情報の管理がしやすくなるというメリットもあります。

基本的な利用の流れ

FileBinderプラグインの基本的な利用方法は、下記のようになっています。

1. ファイルの情報を組み込みたいモデルにBindableビヘイビアを組み込む
2. 上記のモデルにファイルアップロードに関する設定を定義
3. 上記のモデルを利用するコントローラーにRingコンポーネントを組み込む
4. ファイルアップロードを含んだフォームをコントローラーに送信
5. コントローラーでbindUpメソッドを実行
6. モデルのsaveメソッドでフォームデータを保存

ビヘイビアとコンポーネントを利用するので多少複雑に感じますが、利用し始めると全くその複雑さは感じません。

実行環境

解説は下記の環境を前提に行っています。

• PHP5系
• CakePHP 1.3系

CakePHPのバージョンは1.2系でも動作しそうではありますが、実際に試していないので動作保証はできません。

1.2系をご利用の場合は、コンソールからの実行コマンドが一部違ったりするため、その点は読み替えてご利用下さい。

プラグインファイルのダウンロード

下記のURLにアクセスして、最新バージョンをダウンロードして、app/plugins/ ディレクトリ以下に展開してください。

fusic/filebinder – GitHub

Attachmentモデルの作成

まずはファイル情報を格納するためのモデルである、Attachmentモデルを作成します。

プラグインのconfig/ディレクトリ以下にschema.phpファイルがありますが、そのまま実行するとバイナリデータ保存用のフィールドの型指定がCakePHPの許可する型に無いため、エラーが発生してしまいます。

そのため、下記のようにfile_objectフィールドの型をlongtextからtextなどに変更します。

class AppSchema extends CakeSchema {
    var $name = 'App';

    function before($event = array()) {
        return true;
    }

    function after($event = array()) {
    }

    var $attachments = array(
                           'id' => array('type' => 'integer', 'null' => false, 'default' => NULL, 'key' => 'primary'),
                           'model' => array('type' => 'text', 'null' => false, 'default' => NULL),
                           'model_id' => array('type' => 'integer', 'null' => false, 'default' => NULL),
                           'field_name' => array('type' => 'text', 'null' => false, 'default' => NULL),
                           'file_name' => array('type' => 'text', 'null' => false, 'default' => NULL),
                           'file_content_type' => array('type' => 'text', 'null' => false, 'default' => NULL),
                           'file_size' => array('type' => 'integer', 'null' => false, 'default' => NULL),
                           'file_object' => array('type' => 'text', 'null' => true, 'default' => NULL), // この行のタイプを text に変更
                           'created' => array('type' => 'timestamp', 'null' => true, 'default' => NULL),
                           'modified' => array('type' => 'timestamp', 'null' => true, 'default' => NULL),
                           'indexes' => array('PRIMARY' => array('column' => 'id', 'unique' => 1)),
                           'tableParameters' => array('charset' => 'utf8', 'collate' => 'utf8_general_ci', 'engine' => 'InnoDB')
                           );
  }

そして、コンソールから先ほどのschema.phpを利用してテーブルを作成します。

コンソールからの実行コマンドが間違えていたのを修正しました。（2011.07.26）

cake schema create -app your_app_name -plugin filebinder -name app

データベースにファイルを保存する場合、先ほど変更したfile_objectフィールドのデータ型を、データベースのコンソールや設定画面から変更しておきましょう。

さもないと、text型では最大サイズの都合から、テキストファイルや小さな画像程度しか保存できなくなってしまいます。

また、忘れずにモデルクラスも作成しておきます。
app/models/attachment.php

class Attachment extends AppModel
{
}

Bindableビヘイビアの組み込み

ファイルアップロードのキモとなるBindableビヘイビアを、ファイルの情報を結び付けたいモデルに組み込みます。

class Profile extends AppModel
{
	public $actsAs = array(
		'Filebinder.Bindable' => array(
			'model' => 'Attachment', // ファイル情報を保存するモデル名
			'filePath' => WWW_ROOT . 'img' . DS, // ファイルを保存するディレクトリ（絶対パス）
			'dbStorage' => true, // ファイルをバイナリデータとしてデータベースに保存するか
			'beforeAttach' => null, // フック関数（ファイル保存前）
			'afterAttach' => null, // フック関数（ファイル保存後）
			'withObject' => false, // 検索結果にファイルのバイナリデータを付加するか
		)
	);
}

オプションを指定しない場合、上記の値がデフォルト値として利用されます。

bindFields変数の定義

そして、ファイル情報を結び付ける仮想フィールドの設定を、$bindFieldsというメンバ変数として下記のように定義します。

class Profile extends AppModel
{
	public $actsAs = array(
		'Filebinder.Bindable' => array(
			'model' => 'Attachment',
			'filePath' => WWW_ROOT . 'img' . DS,
			'dbStorage' => true,
			'beforeAttach' => null,
			'afterAttach' => null,
			'withObject' => false,
		)
	);

	public $bindFields = array(
		array(
			'field' => 'profile_image', // ファイル情報を組み込む仮想フィールド名
			'filePath' => WWW_ROOT . 'profile_image' // ファイルを保存するディレクトリ（絶対パス）。指定されない場合、ビヘイビアの設定が利用されます。
		),
	);
}

もし、仮想フィールドを複数指定したい場合は下記のように指定します。

public $bindFields = array(
	array(
		'field' => 'file_upload_filed_name1',
		'filePath' => WWW_ROOT . 'file1'
	),
	array(
		'field' => 'file_upload_filed_name2'
		'filePath' => WWW_ROOT . 'file2'
	),
	array(
		'field' => 'file_upload_filed_name3'
	),
);

バリデーションの定義

Bindableビヘイビアにはファイルアップロード専用のバリデーションメソッドが揃っています。

checkContentType

ファイルのメタ情報を制限します。

array(
	'profile_image' => array(
		'rule' => array('checkContentType', array('image/jpeg', 'image/gif', 'image/png'))
	)
);

checkExtension

ファイルの拡張子を制限します。

array(
	'profile_image' => array(
		'rule' => array('checkExtension', array('jpg', 'gif', 'png'))
	)
);

checkFileSize

ファイルサイズを制限します。KB、MB、GBなどの単位が利用出来ます。

array(
	'profile_image' => array(
		'rule' => array('checkFileSize', '10MB')
	)
);

checkMinFileSize

ファイルの最小サイズを制限します。KB、MB、GBなどの単位が利用出来ます。

array(
	'profile_image' => array(
		'rule' => array('checkMinFileSize', '10MB')
	)
);

funcCheckFile

ユーザー関数でファイルのバリデーションを行います。

array(
	'profile_image' => array(
		'rule' => array('funcCheckFile', 'userFunction')
	)
);

notEmptyFile

ファイルの未アップロードを制限します。

array(
	'profile_image' => array(
		'rule' => array('notEmptyFile')
	)
);

必要に応じて、仮想フィールドを組み込むモデルにバリデーションを定義します。

class Profile extends AppModel
{
	public $actsAs = array(
		'Filebinder.Bindable' => array(
			'model' => 'Attachment',
			'filePath' => WWW_ROOT . 'img' . DS,
			'dbStorage' => true,
			'beforeAttach' => null,
			'afterAttach' => null,
			'withObject' => false,
		)
	);

	public $bindFields = array(
		array(
			'field' => 'profile_image',
			'filePath' => WWW_ROOT . 'profile_image'
		),
	);

	public $validate = array(
		'profile_image' => array(
			'fileSize' => array(
				'rule' => array('checkFileSize', '1MB'),
				'message' => 'ファイルサイズは1MB以内でアップロードしてください。'
			),
			'fileExt' => array(
				'rule' => array('checkExtension', array('jpg', 'gif', 'png')),
				'message' => '許可されていない拡張子を利用しています。'
			)
		)
	);
}

Ringコンポーネントの組み込み

フォームからのデータを受け取るコントローラーに、Ringコンポーネントを組み込みます。

class ProfileController extends AppController
{
	public $components = array(
		'Filebinder.Ring'
	);
}

特に設定は必要ありません。

フォームを作成

ファイルアップロードを行うフォームを作成します。
このとき、ファイルを選択する入力フォームは、先ほど定義した仮想フィールドの名前と同一にします。

フォームの内容がおかしかったのを修正しました。 （2011.07.26）

<?php echo $this->Form->create(array('type' => 'file')) ?>
<dl>
<dt>性</dt>
<dd><?php echo $this->Form->text('first_name') ?></dd>
<dt>名</dt>
<dd><?php echo $this->Form->text('last_name') ?></dd>
<dt>年齢</dt>
<dd><?php echo $this->Form->text('age') ?></dd>
<dt>血液型</dt>
<dd><?php echo $this->Form->text('bloodtype') ?></dd>
<dt>住所</dt>
<dd><?php echo $this->Form->text('address') ?></dd>
<dt>メールアドレス</dt>
<dd><?php echo $this->Form->text('email') ?></dd>
<dt>電話番号</dt>
<dd><?php echo $this->Form->text('phone') ?></dd>
<dt>プロフィール画像</dt>
<dd><?php echo $this->Form->file('profile_image') ?></dd>
</dl>
<?php echo $this->Form->end() ?>

仮想フィールドを複数作成した場合、それに対応した入力フォームを用意しましょう。

BindUpメソッドを実行し、データを保存

フォームのデータを受け取るコントローラーのアクションで、RingコンポーネントののbindUpメソッドを実行し、あと通常通りデータを保存します。

bindUpメソッドはファイルアップロードの前処理を行うメソッドで、このbindUpメソッドを実行しないとファイルが保存されません。

class ProfileController extends AppController
{
	public $components = array(
		'Filebinder.Ring'
	);

	public function add()
	{
		if (!empty($this->data)) {
			$this->Ring->bindUp();

			if (!$this->Profile->save()) {
				// 保存完了
			}
		}
	}
}

このとき、bindUpメソッドの引数には、ファイルの保存処理を行うモデル名を指定する事ができます。

このモデル名は、先ほどBindableビヘイビアを組み込んだモデルを指定しますが、省略した場合、自動的にコントローラーの$modelClass変数に定義されたモデルが利用されます。

データが登録されているか確認する

保存したモデルのデータを実際に確認してみます。

$profile = $this->Profile->read();
debug($profile);

[Profile] => Array
(
    [id] => 1
    [first_name] => 太郎
    [last_name] => 山田
    [age] => 25
    [blood_type] => A
    [address] => 東京都千代田区
    [email] => taro.yamada@test.com
    [phone] => 03-1234-5678
    [craeted] => 2011-07-20 00:00:00
    [modified] => 2011-07-20 00:00:00
    [profile_image] => Array
        (
            [id] => 1
            [model] => Profile
            [model_id] => 1
            [field_name] => profile_image
            [file_name] => sample.jpg
            [file_content_type] => image/jpeg
            [file_size] => 65536
            [created] => 2011-07-20 00:00:00
            [modified] => 2011-07-20 00:00:00
            [file_path] => /app/webroot/profile_image/Profile/1/profile_image/sample.jpg
            [bindedModel] => Attachment
        )
)

正しくファイルの情報が結びついて読み出されているのがわかりますね。

注意

この検索結果にファイルの情報を結びつける機能は、ビヘイビアのafterFindメソッドで実現しています。

CakePHPでは、ビヘイビアのaftetFindメソッドは、そのビヘイビアが組み込まれたモデルが直接検索された時にしか呼ばれません。

要するに、AというモデルにhasManyで結びつけられたBというモデルがあり、そのBモデルにFileBinderビヘイビアが組み込まれているとします。

この時、Aモデルをfindした結果にBモデルの情報が存在していても、Bモデルの情報にはファイルの情報は結びついて来ません。

これは実に不便なのですが、CakePHPの仕様のため、ビヘイビアではどうすることもできません。

ビューでの使い方

取得したファイルの情報を表示するには、付属のLabelヘルパーが便利です。
Labelヘルパーには下記のような機能があります。

• ファイル情報の配列からaタグ（リンク）を生成
• ファイル情報の配列からimgタグを生成
• ファイルがブラウザから参照出来ない場所にある場合でも、ファイルがダウンロード・表示できるようにURLを生成してくれる

Labelヘルパーの使い方

HTMLヘルパーに似ているので、使い方は簡単です。

ファイル情報からａタグを生成する

echo $this->Label->link($profile['profile_image']);

ファイル情報からimgタグを生成する

echo $this->Label->image($profile['profile_image']);

ファイルの削除

仮想フィールドに登録したデータを削除したい場合、下記のようなフィールドを利用します。

$this->Form->checkbox('profile_image_delete');

仮想フィールド名＋_deleteという名称のフィールドが送信された場合、そのフィールドの値が真であれば、対応する仮想フィールドに結びついているファイル情報が削除されます。

とても便利なプラグイン

以上、基本的な使い方を解説しましたが、使い慣れると手放せなくなるほど便利なプラグインです。

ファイルのバージョン生成機能やキャッシュ機能などはありませんが、Mediaプラグインのように面倒なインストールや設定作業が必要ではなく、フック関数を利用することで様々な利用方法が考えられます。

是非一度、利用してみてください。

この機能のおかげで、追加機能やバグの修正版が出た場合でも、ボタン1つで最新のパッケージが利用出来るため、いちいちファイルをダウンロードしてサーバー上のファイルを更新するという手間がありません。

とても便利な自動更新機能なのですが、何かの都合で本体を更新出来ない場合や、更新したくないプラグインが存在する場合、サイドバー等に常に更新通知が表示されるため、逆に非常に煩わしいものに変わってしまいます。

そんな時、WordPress本体や特定のプラグインの更新通知を非表示にする方法があるので紹介します。

WordPress本体のアップデート通知を非表示にする

これは下記のサイトを参考にしました。

• WordPressの自動アップグレードを表示させない方法 | WordPress（ワードプレス）コミュニティ

利用しているテーマの functions.php に下記のコードを記述するだけです。

add_filter('pre_site_transient_update_core', create_function('$a', "return null;"));

これでWordPress本体のアップデート通知は無効になります。

特定のプラグインのアップデート通知を非表示にする

これは調べてもやっている方がいないようなので、WordPress本体のソースを解析してみました。

利用しているテーマの functions.php に下記のコードを記述します。

add_filter('site_option__site_transient_update_plugins', 'filter_hide_update_notice');
function filter_hide_update_notice($data) {
	if (isset($data->response['プラグインのメインファイルまでのファイルパス'])) {
		unset($data->response['プラグインのメインファイルまでのファイルパス']);
	}
}

「プラグインのメインファイルまでのファイルパス」は、WordPressの wp-content/plugins ディレクトリの直下から、プラグインのメインファイルまでのパスを、相対パスで指定します。

例えば私の環境では、最新版に更新することで大幅に機能低下してしまうため、過去バージョンのまま利用しているYARPP（Yet another related posts plugin）というプラグインがあります。

これを例にすると、下記のように記述します。

add_filter('site_option__site_transient_update_plugins', 'filter_hide_update_notice');
function filter_hide_update_notice($data) {
	if (isset($data->response['yet-another-related-posts-plugin/yarpp.php'])) {
		unset($data->response['yet-another-related-posts-plugin/yarpp.php']);
	}
}

これで、特定のプラグインの更新通知を無効にする事ができます。

以下は何も設定していないFacebookのコメントプラグインです。

コメントができる以外に、特に機能はありません。

ここで、ちょっとした設定を加えるだけで下記のような、コメントのモデレーションやコメントプラグインの挙動を設定できる、管理画面を表示することができます。

fb:adminsを指定する

まずは自身がWebサイトの管理者であることをコメントプラグインに知らせるために、OGPの属性であるfb:adminsを指定します。

OGPってなんぞ？という方は、下記の記事を参照ください。

• Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い » INSPIRE TECH

fb:app_idを指定する

コメントを管理するためのFacebookアプリケーションのIDを、こちらもOGP属性であるfb:app_idとして指定します。

「アプリなんて作ったことないよ！」という方も、Facebookのいいね！ボタンを作成したことがあれば、その際に自動的にいいね！ボタン用にFacebookアプリケーションが作成されていますので、そちらを使うと手間が省けます。

すでに存在するFacebookアプリケーションのIDを確認するには、Facebookにログインした状態で下記のURLにアクセスします。

• Facebook開発者

ログインした人が作成したFacebookのアプリ一覧が表示されますので、その中の「アプリID」をメモして利用して下さい。

Facebookアプリケーションを作成したことが無い場合

Facebookアプリケーションを作成していない場合、上記URLにアクセスすると、下記のような画面が表示されます。

開発者登録

Facebookでアプリケーションを作成するには、必ず開発用のアプリケーションを許可し、さらにデベロッパー登録が必要になります。

このデベロッパー登録については、下記のURLに詳細が記載されていますので参照ください。

• Facebookデベロッパーに登録する際、携帯アドレスでアカウント認証する方法-がんばるデザイナ tuts!

アプリ作成

デベロッパー登録が完了したら再度先ほどの画面に戻り、右上にある「Create New App」をクリックします。

表示されたウィンドウに必要事項を記入してOKをクリックして下さい。
アプリケーション名は基本的に外部に公開するようなアプリケーションでは無いので、サイト名＋Appとしておくのがわかりやすくて良いと思います。、

CAPTCHAの確認後、アプリケーションの作成が完了します。
完了後の画面にあるApp IDをメモして利用して下さい。

fb:app_idを指定しない場合

fb:app_id、すなわちFacebookのアプリケーションIDを指定しないと、コメントプラグインの設定画面は表示されますが、機能が大きく制限されてしまいます。

Facebookのアプリケーションは、必ずしもFacebookのソーシャルプラグインの導入には必要ではないのですが、導入することによって、今回紹介している機能を含めて、下記のような機能が利用できます。

• すべてのコメントをFacebookアプリケーションの管理画面から一括で管理できる
• Webページに設置したコメントプラグインで、Facebookアプリケーションのコメント管理画面と同等の設定が可能になる
• いいね！ボタンを押してくれた人全員にアプリケーションを通じてお知らせなどを送ることができる

よほどのことがない限り、Webサイト用にひとつ作っておくことで、その後の管理が楽になります。

URL LinterでFacebookに通知

上記の作業が終わったところで、Fecebookにログインしてから、設置したURLをURL Linterで読み込んでみましょう。

• URLリンター – Facebook開発者

この作業は行わなくても、約一日で反映されるのですが、一応正しく設置されているのを確認する為に、読み込んでおくと良いでしょう。

すると、コメントプラグインのUIが下記のように変わります。

ここで「設定」リンクをクリックすると、最初に紹介したようなコメントプラグインの挙動をカスタマイズ画面が表示されるようになります。

• WordPress › WP-OGP « WordPress Plugins

自分もFacebookのいいね！ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。

ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり（変更するにはプラグインに含まれるファイルを差し替える必要がある）、Facebook用のOGPタグであるfb:app_idがスペルミスっていたりと、少し不満な点もありました。

そんな中、下記サイトでマルチサムネイルに対応したWP-OGPプラグインを配布しているのを見つけました。

• WP-OGPを改造してマルチサムネイル対応＆正しいプロパティ表記にしました | Sinack

ブログ記事の中の画像を利用するというアイデアと、マルチサムネイルというアイデアが素晴らしかったので、自分もインスパイアされて、WP-OGPプラグインを詳細設定が出来るような設定画面付きに改造してみました。

カスタマイズしたWP-OGPプラグインの特徴

本プラグインはWordPress3.0以上での対応となります。(2011.08.28)

下記のような管理画面を新たに設けています。

説明文に利用するテキストをある程度選べる

オリジナル版のプラグインでは、og:descriptionに利用するテキストを、下記のような優先順位で取得して利用しようとします。

1. descriptionというキー名のカスタムフィールド
2. 投稿の抜粋
3. 投稿の本文

本プラグインでも、この利用する優先順位は変更していませんが、下記の項目の設定を可能にしました。

• 利用するカスタムフィールドのキー名を変更可能
• 投稿の抜粋を利用するかどうかを選択可能

設定を行って頂くことで、ある程度ですがog:descriptionに利用されるテキストを、選択できるようになっています。

テキストの抽出方法を単語区切りか文字数かを選べる

オリジナルのWP-OGPプラグインでは、og:descriptionに利用するテキストを、単語数で75単語分を抽出して利用します。

そのため、単語区切りが存在しない日本語では、テキストがそのままズラーッと改行無しで入ってしまい、og:descriptionが異常に長くなるという現象が発生します。

それを防ぐために、

• 単語数で抽出する
• 文字数で抽出する

を選択できるようにしました。

その際、抽出する単語数または文字数を、固定の75単語（文字）ではなく、任意の数値で指定する事が可能になっています。

記事中に利用された画像をog:imageとして利用できる

オリジナルのプラグインでは、og:imageに利用する画像を、投稿のアイキャッチ画像が存在する場合はアイキャッチ画像を、存在しない場合はプラグインに含まれるデフォルトの画像が利用されるようになっています。

この場合、アイキャッチ画像が設定されていないとデフォルトの画像が利用されるため、og:imageに任意の画像を指定するにはアイキャッチ画像を利用しなくてはなりません。

それは少し面倒なので本プラグインでは、画像の利用方法を下記の2つから選べるようにしました。

• アイキャッチ画像を利用する
• 記事中の画像を利用する

og:imageのサイズとアスペクト比の自動チェック

Facebookのog:imageの仕様では、画像のサイズは最低で縦横50px以上、アスペクト比は最大で3:1と規定されています。

og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

Open Graph protocol – Facebook開発者

本プラグインでは、og:imageを記事中の画像から利用する場合、画像の縦横のサイズとアスペクト比を自動的にチェックして、規格に合わない画像は埋め込まないようにしました。

og:imageの最大数を設定できる

記事中の画像を使う設定の場合、その最大数を設定できるようにしました。
0を指定した場合は、記事中の画像を全てog:imageとして埋め込みます。

デフォルトでog:imageに利用される画像のURLを指定できる

オリジナルのプラグインでは、アイキャッチ画像が無かった場合に、デフォルトでog:imageに利用される画像はプラグインのディレクトリに含まれていて、変更するにはプラグインのファイルに手を加えなくてはいけません。

それが面倒なので、デフォルトでog:imageに利用される画像を、URLで指定できるようにしました。

常にデフォルトの画像を利用するかを指定できる

og:imageに利用する画像を本文から抽出して使う場合、その最後に、必ずデフォルトの画像を含められるようにしました。

これは、og:imageが複数指定されているページでFacebookのシェアボタンをクリックした場合に、ウォールに表示する画像をシェアしたユーザーが選ぶことができるためです。

もし今後、いいね！ボタンでも同等の機能が実装されたり、他のサービスでも複数のog:imageを利用した機能が実装された場合を考えて、本機能を付けてあります。

プラグインのダウンロード

プラグインをgithubでの管理に移行しましたので、改変履歴や過去のバージョンなどはそちらからご覧ください。（2011.07.09）

プラグインファイルは、下記のリンクからダウンロードしてください。

WP-OGP customizedプラグインをダウンロード

インストール方法

解凍してできたwp-ogp-customizedディレクトリを、wp-content/plugins/ディレクトリにアップロードしてください。
その後、プラグインの一覧から有効化してください。

注意

本プラグインは、オリジナルのWP-OGPプラグインとは共存できませんので、利用する際はオリジナル版を停止してから本プラグインを有効にしてください。

不具合などのご報告

twitterまたはFacebook、もしくは本記事のコメントでご連絡下さると有り難いです。

カスタマイズ性が高い

まず自分が導入時に一番気にしていたことは、ツイートの内容がどこまで編集できるかということ。

単純にタイトルと記事のリンクをつぶやくプラグインなら数あれど、このプラグインほどカスタマイズ性が高いのはあまりありません。

編集時にも呟いてくれる

ツイートの内容がテンプレートで編集できるのは当たり前として、投稿時に加えて編集時にもツイートをする機能を備えています。

投稿時にツイートの内容を編集することができる

これも他にはない機能ですが、投稿時にその投稿の時だけツイートの内容をカスタマイズすることも可能です。

まさに痒いところに手が届く機能。

ダウンロード

ダウンロードはこちらのサイトから、またはWordPressの管理画面で「プラグインの追加」からWP to Twitterで検索して下さい。