僕は普段はPHPStormでプログラミングをしますが、CSSやJavaScript、PHPなどをちょこっと編集する際はほとんどコレを利用しています。

しかしながらこのエディタ、起動時に前回開いたファイルがそのままタブとして開かれてしまい、何となく気持ち悪い。

そういうときは Preferences > Settings - User を開き、設定値として下記を追加します。

{
	"hot_exit": false,
	"remember_open_files": false,
}

ポイントなのは hot_exit も合わせて false にすることで、remember_open_files のみを false にしただけでは、動作に変わりがありません。

どちらも false とすることで、次回から起動した際にブランクの状態で開かれるようになります。

しかし逆に、デフォルトの「投稿」機能から「カテゴリー」や「タグ」といった、 デフォルトで設定されている分類機能を取り外したいといった場合の情報はあまり見つかりません。

そんな時は下記のコードをfunctions.phpに記述して利用します。

function my_unregister_taxonomies()
{
	global $wp_taxonomies;

	/*
	 * 投稿機能から「カテゴリー」を削除
	 */
	if (!empty($wp_taxonomies['category']->object_type)) {
		foreach ($wp_taxonomies['category']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['category']->object_type[$i]);
			}
		}
	}

	/*
	 * 投稿機能から「タグ」を削除
	 */
	if (!empty($wp_taxonomies['post_tag']->object_type)) {
		foreach ($wp_taxonomies['post_tag']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['post_tag']->object_type[$i]);
			}
		}
	}

	return true;
}

add_action('init', 'my_unregister_taxonomies');

これだけで簡単に「カテゴリー」や「タグ」などを外すことができます。

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プラグインのように面倒なインストールや設定作業が必要ではなく、フック関数を利用することで様々な利用方法が考えられます。

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

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に利用する画像は、縦横のサイズが50ピクセル以上、アスペクト比は3:1までという仕様のようで、この仕様にあわない画像は取り扱ってくれません。

というような簡単な説明なのですが、あまりに簡単すぎるためか、このog:imageのアスペクト比に関しては、横長の画像なら大丈夫だけど縦長の画像はダメ！という誤解をしている方を、ちらほら見かけます。

アスペクト比の定義

しかしながら、このアスペクト比というのは、Wikipediaによると下記のように解説されています。

アスペクト比（アスペクトひ）またはアスペクト・レシオ（Aspect Ratio）とは2次元形状の物の長辺と短辺の比率を指し示す言葉。

アスペクト比 – Wikipedia

アスペクト比とは長辺と短辺の比率ということになので、縦の長さが横の長さの3倍だったとしても、3:1という比率で表現できるわけですね。

ということで、Facebookのog:imageに利用できる画像の規格は、正しくは長辺の長さが短辺の3倍までの画像となります。

実際に登録してみる

実際に縦長の画像をog:imageに登録してみました。

これを指定したページを、FacebookのURL Linterで読み込ませてみます。

URL Linterにも正しく認識されていますね。

このWordPress3.2はまだ日本語版のアップデータが提供されていないようなので、英語版になってしまいましたが、過去バージョンの言語ファイルがあるためか、「投稿の一覧」や「インストール済みのプラグイン一覧」などを除いてほとんどが日本語化された状態で利用出来ます。

プラグインが多少エラーを起こしていたくらいで、機能的にもほとんど問題無く利用できる状態のようです。

ただ、英語の未翻訳がどうしても気になる！という方のために、現状でWordPress3.2を完全に翻訳する方法がありましたので、ご紹介します。

最新の言語ファイルをダウンロードする

基本的にWordPressはi18nに対応しているので、翻訳用の言語ファイルさえあればすぐに多言語化対応が可能です。

そこで、WordPress日本語版のサイトから、最新の日本語ファイルをダウンロードして適用します。

2011年7月9日現在、WordPress日本語版のサイトではWordPress3.2の日本語版はダウンロードできませんが、WordPress3.2に対応した言語ファイルはすでに整っているようです。

言語ファイルのリポジトリから、SVNを利用して、言語ファイルをダウンロードします。

svn checkout http://svn.automattic.com/wordpress-i18n/ja/trunk/messages/ languages

SVNが利用出来ない場合

svnって何？という方やsvnの利用出来ない環境の方は、下記のURLにブラウザでアクセスします。

• http://svn.automattic.com/wordpress-i18n/ja/trunk/messages

言語ファイルの一覧で表示されるので、ローカルに languages/ というディレクトリを作成し、ファイルを全て保存してください。

TwentyElevenテーマも日本語化する

WordPress3.2に付いてくるデフォルトのテーマである、TwentyElevenも日本語化する場合は、ローカルに twentyeleven/ というディレクトリを作成し、下記URLに存在するファイルも全てダウンロードしてください。

http://svn.automattic.com/wordpress-i18n/ja/trunk/messages/twentyeleven/

言語ファイルを適用

ダウンロードした language/ ディレクトリに存在する .po, .mo という拡張子の言語ファイルを、WordPressの wp-content/languages/ ディレクトリに全てコピーします。
古いファイルが存在する場合は上書きして下さい。

また、TwentyElevenテーマも日本語化される場合は、wp-content/themes/twentyeleven/languages/ に、ダウンロードした twentyeleven/ ディレクトリのファイルを全てコピーしてください。

この機能は非常に便利ですが、本番環境などでデバッグレベルを0にしていると、発行したSQLを確認する手段がありません。

本番環境で何かしらデータベースエラーが発生した場合に、発行されているSQLを確認したいと思っても、そのままでは方法が無いのが現状です。

そこで、利用しているデータベースのドライバクラスを改良して、CakePHPのデバッグレベルに関わらず、発行したSQLをログファイルに保存できるように改造してみます。

ロギング用のデータベースドライバを作成

CakePHPのコアファイルに手を入れるのは避けたいので、データベースのドライバクラスを継承したログファイル保存用のドライバクラスを作成します。

ここではMySQLを利用する場合を想定します。
他のデータベースを利用している場合は、適宜利用しているデータベースのドライバクラスにを読み替えて下さい。

ファイルを作成

app/models/datasources/ に dbo_mysql_log.php を作成します。

dbo_mysqlを継承したコードを記述する

ここではDboMysqlを継承したDboMysqlLogという名前でクラスを作成します。

そして、SQLを発行するための関数であるexecute関数と、SQLのログ表示に関する処理を行うlogQuery関数をオーバーライトして、SQLをログに保存する設定であれば、実行したSQLをログファイルに保存できるように改良します。

App::import()関数を利用してスーパークラスを読み込んでおかないとエラーが出ますので注意して下さい。

データベースの接続設定を行う

app/configs/database.php ファイルの中で、利用するデータベースのドライバ指定を、先ほど作成したドライバに切り替えます。

public $development = array(
	'driver' => 'mysql_log',
	'persistent' => false,
	'host' => 'localhost',
	'login' => '********',
	'password' => '********',
	'database' => 'test',
	'prefix' => '',
	'encoding' => 'utf8'
);

driverの指定は、作成したドライバのファイル名から dbo_ と拡張子を除いたもので指定しましょう。

ログ保存用の設定を行う

config/bootstrap.php に下記のようなコードを記述します。

Configure::write('Sql.log', true);

これで、デバッグレベルに関係なく、発行されたSQLが tmp/logs/sql.log に出力されます。

以下は何も設定していない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が下記のように変わります。

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

旧ドメインでもアクセス可能ですが、もしブックマークされている方がいらっしゃれば、URLの変更をお願いいたします。

というわけでドメイン移転をしたので、その際に行ったことをまとめてみます。

前提

自分の場合、下記のような条件でドメインの移転を行いました。

サーバー

変更無し

データベース

同一サーバー上なので変更無し

ドメインのディレクトリへのマッピング

• ietomi.is-blog.net – /www/ietomi.is-blog.net/
• inspire-tech.jp – /www/inspire-tech.jp/

行ったこと

ietomi.is-blog.netをinspire-tech.jpに切り替える

新しく取得したドメインを古いドメインと同一のサーバーにマルチドメインとして割り当てて、新しいドメインでWordPressが稼働するようにしました。

ファイルを移動

まずは稼働しているWordPressの全ファイルを、古いドメインのディレクトリ/www/ietomi.is-blog.net/から新しいドメイン用のディレクトリ/www/inspire-tech.jp/に移動します。

何か不具合があったときのために、まずはコピーで対応すると良いでしょう。

データベースの書き換え

ファイルを移動しただけだと、WordPressの管理画面が404エラーになってしまい、ログインすることさえできなくなってしまっています。

これは、WordPressの環境変数に古いドメインが含まれているためです。

また、投稿記事の内容などにも古いドメインが含まれているため、データベースの内容を全て新しいドメインに書き換えてやる必要があります。

下記は最低限変更を書き換えを行ったテーブルです。
必要に応じて他のテーブルも書き換えて下さい。

wp_options

UPDATE wp_options SET option_value=REPLACE(option_value, 'ietomi.is-blog.net, 'inspire-tech.jp')

wp_posts

UPDATE wp_posts SET post_content=REPLACE(post_content, 'ietomi.is-blog.net', 'inspire-tech.jp'), guid=REPLACE(guid, 'ietomi.is-blog.net', 'inspire-tech.jp')

.htaccessのでリダイレクト設定

古いURLを参照した場合に404になってしまうのは問題なので、ModRewireを使ってリダイレクトを設定します。

.htaccessは/ietomi.is-blog.net/に設置することにします。

RewriteEngine on
RewriteBase /ietomi.is-blog.net/
RewriteRule ^$ http://inspire-tech.jp/ [R=301,L]
RewriteRule ^(.+)$ http://inspire-tech.jp/$1 [R=301,L]

ステータスコード301を返すことで、検索エンジン等に恒久的なURL移動があったことを伝えます。

移行完了

以上でドメインの切り替えは完了です。

切り替えは非常にあっけなく終わりましたが、ソーシャルプラグインのカウントが0になってしまったのはちょっと寂しいですね。

OGPっていったい何？という方や、Facebookやmixiのいいね！ボタンは設置してみたけどOGPなんて知らないという方は、下記の記事をご覧ください。

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

OGP属性のog:imageは、Webページのサムネイルを示すもので、正しく指定しておくと、例えばFacebookのいいね！ボタンが押された時などに、リンクやその他情報と共に、そのサムネイルがボタンを押した方のウォールに投稿されます。

実はこのog:imageですが、他のOGPタグと違って、以下のように複数指定しておくことができます。

<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-wall-300x134.png" />
<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-share-300x258.jpg" />

複数指定する事でどんな意味があるかというと、Facebookのシェアボタンをサイトに埋め込んでいる場合に、クリックした人がシェアする際のサムネイルを、自由に選んでもらうことができるようになります。

Facebookのいいね！ボタンではあまり意味なし

ただ、Facebookのいいね！ボタンに限ってみた場合、og:imageを2つ以上記述する意味はあまりありません。

いいね！ボタンはシェアボタンとは違い、og:image属性が複数指定されていても、シェアボタンが押された場合の画面のような、画像の選択は表示されません。

選択が表示されないばかりか、設定してあるog:image属性の中から1つが、Facebookによって自動的に利用されます。

しかしながら、この自動的に選択する部分の仕様が不透明で、どういった条件で1枚の画像を選ぶのか、その条件が全くわかりません。

画像サイズやファイル名、アスペクト比などでソートされているのかと思っていろいろと実験してみましたが、特に関係が無いようでした。

今後のソーシャルメディア側の対応に期待

今後、各ソーシャルメディアやそのほかのサービスで、さらにOGPを使った機能が増えてくると思いますが、いつ如何なるサービスで、この複数指定が生きてくるかわかりません。

現状ではあまり使い道はないですが、覚えておいても損はないでしょう。

今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。

OGPとは？

OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。

OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。

• フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

Facebookのいいね！ボタンはOGPが必須

タイトルにも記述しましたが、Facebookのいいね！ボタンを設置したページにOGPが設定されているかされていないかで、Facebook上での挙動に大きな差が出ます。

まず、OGPが設定されていないWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールにWebサイトの情報が表示されるだけで、それ以上は特に何もありません。

しかし、OGPが設定されているWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールと、その友達のニュースフィードにWebサイトの情報が表示されます。

これは、とてつもなく大きな差です。

たった一人のユーザーに認知されて終わるか、そのユーザーのつながっているユーザー全員に認知されるかの差になるからです。

つながりの多いユーザーがいいね！をクリックしてくれれば、そのつながっているユーザー全員にWebサイトの情報が通知されるわけですから、そこからさらに大きな反響を呼び、「いいね！」が「いいね！」を呼ぶことも、大いに考えられます。

OGPの設定

と、非常に重要な役割を担うOGPですが、設定自体は非常に簡単です。
決められた属性を持つmetaタグを、決まったフォーマットでWebページのheadタグ内に記述しておくだけでいいのです。

metaタグを設置するだけ

metaタグの property属性にOGPの属性名を指定し、content属性にその内容を記述します。

<meta property="属性名" content="内容" />

例えば下記のように設定します。

<meta property="og:site_name" content="Webサイト名" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:url" content="http://example.com/test_page.html" />
<meta property="og:description" content="サンプルのWebページです。" />

OGPの属性

OGPの代表的な属性を紹介します。

og:site_name

Webページの所属するWebサイトのタイトル

og:title

Webページのタイトル。

og:type

Webページの種類。OGPの仕様で規定されている種類一覧から選択します。

og:image

Webページのサムネイル画像のURL。この属性に限り、複数設置しても大丈夫なようです。

og:url

WebページのURL。ブログの記事などに設定する場合は、この属性にパーマリンクを出力するテンプレートタグを仕込みましょう。

og:description

Webページの簡単な説明です。

上記以外にもOGPには多数の属性がありますので、興味がある方は下記のOGPの詳細仕様を参照して下さい。

• The Open Graph Protocol

Facebook独自属性

FacebookではOGP用の独自属性を定義していて、これを設定することでFacebookプラグインの機能を拡張したり、Facebookでいいね！ボタンのクリック率を計ることが出来る「インサイト」機能などを利用することが可能になります。

fb:admins

Webページの管理者が誰であるかをFacebookのユーザーIDで指定します。管理者が複数存在する場合、ユーザーIDを半角カンマで区切って入力できます。

fb:app_id

Webページと結びつけたいFacebookのアプリケーションIDを指定します。

fb:page_id

Webページと結びつけたいFacebookのファンページIDを指定します。

例えばFacebookコメントプラグインを利用している場合、fb:adminとfb:app_idを指定していると、コメント欄をカスタマイズできる「管理者画面」を表示することが可能になります。

Facebookのいいね！ボタンからのアクセスを一覧・解析できるインサイト機能については下記の記事をご覧下さい。

• Facebookインサイト 「いいね！」でわかるアクセス解析！簡単設定！: 世界中の１％の人々へ

ソーシャルメディア毎の独自属性

上記の他にも、Facebookやmixiなど各ソーシャルメディア毎に独自に追加された属性もあるので、設置の際は各ソーシャルメディアのOGPの説明を、合わせてチェックしてみてください。

FacebookでのOGPの詳細説明（英語）

Open Graph protocol – Facebook開発者

※ OGPの基本属性からFacebook用の独自属性まで、かなり詳細に記載されていますので是非チェックしてください。

mixiでのOGP拡張属性の説明

技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

FacebookでOGPタグの簡単生成

Facebookではサイト毎のOGPタグを簡単に生成できるフォームがあります。
いいね！ボタンを生成するフォームと同一のページに存在するので、いいね！ボタンを設置する際には、こちらも一緒に設置してしまったほうが良いでしょう。

下記のURLにアクセスし【Step 2 – Get Open Graph Tags】という見出しの下にあるフォームが、OGPの生成フォームです。

• Like Button – Facebook開発者

フォームにWebページのURLや説明などを入力することで、そのWebページ用のOGPタグを自動的に生成してくれます。

WordPressでのOGP

WP-OGPプラグインに設定画面を設けて、いろいろな機能追加を施したプラグインをリリースしました。（2011-07-02）

WordPressでは非常に簡単にOGPを導入できる仕組みとして、WP-OGPプラグインというものが存在します。

• WordPress › WP-OGP « WordPress Plugins
• ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌

プラグインをダウンロードして有効にするだけで、各ブログ記事毎のOGPタグを自動的に埋め込んでくれます。