投稿日: 2013-02-12 2013-11-18

JavaScript の超便利なメソッド bind で this を制御する

JavaScript の関数オブジェクトには、「bind」という便利なメソッドがあります。このメソッドは関数内で参照できる this を指定のオブジェクトに束縛できるものです。この関数を使うと、this に関連した良く有る問題をスマートに解決できます。

this にまつわるよくある問題

次の例は、実行後に「こんにちわぷんちゃん」とアラートするコードです。

var Person = function (name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    alert('こんにちわ ' + this.name);
}

var punchan = new Person('プンちゃん');
punchan.sayHello(); //「こんにちわ プンちゃん」と表示される

var Person = function (name) {

this.name = name;

}

Person.prototype.sayHello = function() {

alert('こんにちわ ' + this.name);

}

var punchan = new Person('プンちゃん');

punchan.sayHello(); //「こんにちわプンちゃん」と表示される

では、３秒後に表示させてみましょう。よく次のように書きます。

var Person = function (name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    alert('こんにちわ ' + this.name);
}

var punchan = new Person('ぷんちゃん');

setTimeout(function() {
    punchan.sayHello(); //3秒後に「こんにちわ プンちゃん」と表示される
}, 3000)

var Person = function (name) {

this.name = name;

}

Person.prototype.sayHello = function() {

alert('こんにちわ ' + this.name);

}

var punchan = new Person('ぷんちゃん');

setTimeout(function() {

punchan.sayHello(); //3秒後に「こんにちわプンちゃん」と表示される

}, 3000)

これは期待通りに動作します。しかし、setTimeout に渡している無名関数は、単に Person.sayHello() をコールしているだけなので、次のようにも書けそうです。

setTimeout(punchan.sayHello, 3000);

1	setTimeout(punchan.sayHello, 3000);

しかし、これは期待通りには動作しません。
通常、ブラウザで実行させている時には「こんにちわ undefined」と表示されます。

これは JavaScrip における一般的な動作です。オブジェクトのメソッドはオブジェクトに束縛されているものではなく、その時々のコンテキストにおいて実行されるからです。JavaScript をある程度理解しているプログラマは、このことを良くご存知のはずです。

bind を使って this を束縛する

さて、本題です。

この this を固定してしまえるメソッド「bind」が関数オブジェクトには存在します。
例を見てみます。

var Person = function (name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    alert('こんにちわ ' + this.name);
}

var punchan = new Person('ぷんちゃん');

setTimeout(punchan.sayHello.bind(punchan), 3000); //3秒後に「こんにちわ プンちゃん」と表示される

var Person = function (name) {

this.name = name;

}

Person.prototype.sayHello = function() {

alert('こんにちわ ' + this.name);

}

var punchan = new Person('ぷんちゃん');

setTimeout(punchan.sayHello.bind(punchan), 3000); //3秒後に「こんにちわプンちゃん」と表示される

今度は期待通り動作しました。

bind メソッドはこのように、関数内の this を指定のオブジェクトに束縛した新しい関数を返す機能を提供します。上の例では、bind に punchan オブジェクトを与えて、sayHello メソッド内の this が常に punchan オブジェクトとなるような新しい関数を取得し、それを setTimeout に渡すことで、期待通りの動作を実現しました。

このように、bind を使うことで、関数実行時の this を簡単に束縛できます。JavaScript でオブジェクトを利用したスクリプトを書く時にはとても便利ですね！

別のよくありそうな例

もうひとつ、良く有りそうな例を。

var Speaker = {
    say: function(wordsGetter) {
        var words = wordsGetter();
        alert(words);
    }
}

function Person(nickname) {
    this.nickname = nickname;
}

Person.prototype.sayName = function() {
    Speaker.say(function() {
        return this.nickname; //この this は Person オブジェクトでは無い！
    });
};

var person = new Person('Gyu-ri');
person.sayName(); //undefinend

var Speaker = {

say: function(wordsGetter) {

var words = wordsGetter();

alert(words);

}

function Person(nickname) {

this.nickname = nickname;

}

Person.prototype.sayName = function() {

Speaker.say(function() {

return this.nickname; //この this は Person オブジェクトでは無い！

});

};

var person = new Person('Gyu-ri');

person.sayName(); //undefinend

14行目で this を参照していますが、この時の this は Person オブジェクトでは無くて、グローバルオブジェクト（ブラウザなら通常 window オブジェクト）になります（ちなみにその this が決定されているのは、3行目の呼び出し部です）。

14 行目の this の部分で、Person オブジェクトを参照したい時に、よく次のようにするでしょう。

Person.prototype.sayName = function() {
    var self = this;
    Speaker.say(function() {
        return self.nickname;
    });
};

Person.prototype.sayName = function() {

var self = this;

Speaker.say(function() {

return self.nickname;

});

};

13 行目で期待する this の値を一旦別の変数に移して、その変数を 15 行目で参照しています。これは上手く行きます。しかし、関数オブジェクトの bind を使うと、次のようにも書けます。

Person.prototype.sayName = function() {
    Speaker.say(function() {
        return this.nickname;
    }.bind(this));
};

Person.prototype.sayName = function() {

Speaker.say(function() {

return this.nickname;

}.bind(this));

};

15 行目で bind を使って、13〜15 行目に定義した無名関数オブジェクト内での this を指定しています。このケースではこの方がスマートですね！

読みやすさについてはケースバイケースだと思いますが、これは JavaScript でオブジェクトを扱う時の基本テクニックの一つです。このような bind の用法を知っておくことで、より読みやすいコードを書ける場面も増えると思います。

ちなみに、bind にはどんなオブジェクトでも渡すことができます。ここでは this を渡していますが、必要に応じて、様々なオブジェクトを、関数内の this として bind できるということを覚えておいてください。

bind による引数の部分適用

実は bind は this だけではなく関数の引数も束縛することが出来ます。
次の例を見てください。

var mul = function(a,  b) {
     alert(a * b);
}
mul(2, 3); //6とアラートされる

//bindで引数を束縛してみる
var mul2 = mul.bind(null, 2);
mul2(4); //8とアラートされる
mul2(16); //32とアラートされる

//更にbindで引数を束縛してみる
var mul2x5 = mul2.bind(null, 5);
mul2x5(); //10とアラートされる

var mul = function(a, b) {

alert(a * b);

}

mul(2, 3); //6とアラートされる

//bindで引数を束縛してみる

var mul2 = mul.bind(null, 2);

mul2(4); //8とアラートされる

mul2(16); //32とアラートされる

//更にbindで引数を束縛してみる

var mul2x5 = mul2.bind(null, 5);

mul2x5(); //10とアラートされる

4 行目の mul(2, 3) は、単純な関数呼び出しです。6とアラートされます。

7 行目で bind を利用して、引数の一つを 2 に束縛した新しい関数 mul2 を得ています。
8、9 行目の意味が分かるでしょうか？　関数 mul2 は、関数 mul の最初の引数が 2 に束縛されているものなので、常に 2 * b の演算を行ってアラートする関数になります。結果、ここではそれぞれ 2 * 4 ⇒ 8、2 * 16 ⇒ 32 というアラートが表示されます（ちなみに、前述の通り bind の第１引数には this とするオブジェクトを指定しますが、ここでは this は使っていないため null としています）。

また、11 行目からのように、引数が部分適用された関数を、更に部分適用する事もできます。

mul.bind(null, 2) で返される関数と等価なコードを書くと、次のようになります。

var mul2 = function(b) {
    mul(2, b);
}

var mul2 = function(b) {

mul(2, b);

}

使いどころが難しい機能かも知れませんが、ライブラリなどの汎用性を高める為に利用することが出来そうですし、アイデア次第、使い方次第、ということになると思います。

引数の部分適用の例１

引数の部分適用の例を挙げてみます。

post.tags.remove(tag)
.done(function() {
	alert('タグ「' + tag.name + '」を削除しました。');
})
.fail(function() {
	alert('何か問題が発生して、処理に失敗しました。');
});

post.tags.remove(tag)

.done(function() {

alert('タグ「' + tag.name + '」を削除しました。');

})

.fail(function() {

alert('何か問題が発生して、処理に失敗しました。');

});

これは tags というコレクションオブジェクトから任意の tag を削除するコードです。tags.remove メソッドは jQuery.Deferred オブジェクトを返し、tag の削除に成功した時に done、失敗した時に fail にセットされたコールバック関数が呼ばれるというコードです。ここでコールバックでは alert を表示することしかしていません。これを bind を使って書き換えると、次のように書けます。

post.tags.remove(tag)
.done(alert.bind(window, 'タグ「'　+ tag.name + '」を削除しました。'))
.fail(alert.bind(window, '何か問題が発生して、処理に失敗しました。'));

post.tags.remove(tag)

.done(alert.bind(window, 'タグ「'　+ tag.name + '」を削除しました。'))

.fail(alert.bind(window, '何か問題が発生して、処理に失敗しました。'));

如何でしょうか？この例が見やすいかどかは人それぞれだと思いますが、このように使えるということを覚えていると、きっと何かの時に役立つかと思います。

もう一つ、もう少し使いどころがありそうな例を挙げてみます。

引数の部分適用の例２

次のコードは、1秒毎に３回 alert がコールされて「○秒後！」と表示します。もちろん、「１秒後！」「２秒後！」「３秒後！」となることを期待していますが、これは３回とも「４秒後！」と表示されてしまいます。クロージャ変数についてよくある問題ですね。

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        alert((i + 1) + '秒後！');
    }, 1000 * i);
}

for (var i = 0; i < 3; i++) {

setTimeout(function() {

alert((i + 1) + '秒後！');

}, 1000 * i);

}

これは例えば次のようにして期待通りの動作をさせることが出来ます。

for (var i = 0; i < 3; i++) {
    setTimeout(function(second) {
        return function() {
            alert(second + '秒後！');
        };
    }(i + 1), 1000 * i);
}

for (var i = 0; i < 3; i++) {

setTimeout(function(second) {

return function() {

alert(second + '秒後！');

};

}(i + 1), 1000 * i);

}

ただ、ちょっとややこしいですね…。

そこで、bind による引数の部分適用を利用すると、次のように書くことができます。

for (var i = 0; i < 3; i++) {
    setTimeout(function(second) {
        alert(second + '秒後！');
    }.bind(null, i + 1), 1000 * i);
}

for (var i = 0; i < 3; i++) {

setTimeout(function(second) {

alert(second + '秒後！');

}.bind(null, i + 1), 1000 * i);

}

これはスッキリして、またしっくり来るのではないでしょうか (*’-‘*)

以上です。

ご存知の方はご存知というお話ですが、僕はつい半年位前まで知らなかったもので共有させて頂きました。

投稿日: 2013-02-12 2013-07-12

WordPress のマルチサイトで、ネットワークブログの投稿を一覧表示する

[2013-07-12 追加] 公式プラグインディレクトリに「WP Over Network」をリリースしました。管理画面からインストールできます。とりあえずの日本語の紹介はコチラのページになります。

[2013-06-07 追記] GitHub にプラグイン化したものをアップしています。良かったらご利用ください。フォーク歓迎。https://github.com/yuka2py/wp_over_network

WordPress をネットワーク化してマルチサイトを運用する際、ネットワーク上の各ブログの記事の更新情報をホストサイトのホームページなどに一覧表示させるという要件があると思います。

@HissyNC さんの「WordPressマルチサイトネットワークから新着記事を取得するコード（修正版）」を参考にして考えてみましたが、今回はネットワークサイトの更新情報をまとめたアーカイブページを持つ必要があったため、かわりに以下のような方法を行ってみました。

<?php

/**
 * 投稿日順で、ネットワーク上の全てのブログの投稿を取得する。
 * @param  mixed  $args
 *	numberposts    取得する投稿数。デフォルトは 5
 *	offset    取得する投稿のオフセット。デフォルトは false で指定無し。指定すると、paged より優先。
 *	paged    取得する投稿のページ数。get_query_var( 'paged' ) の値または１のいずれか大きな方。
 * @return  array<stdClass>
 */
function get_posts_over_network( $args=null ) {

	global $wpdb;

	$args = wp_parse_args( $args, array( 
		'numberposts' => 5,
		'offset' => false, 
		'paged' => max( 1, get_query_var( 'paged' ) ),
	) );
	extract( $args );

	//ページ指定とオフセットの調整
	if ( $offset === false ) {
		$offset = ( $paged - 1 ) * $numberposts;
	}

	//《1》ネットワーク上のブログの一覧を取得
	$query = sprintf( 'SELECT * FROM %sblogs', $wpdb->prefix );
	$blogs = $wpdb->get_results( $query );

	//《2》各ブログの投稿データを取得するサブクエリの準備
	$sub_queries = array();
	foreach ( $blogs as $blog ) {
		$blog_prefix = ( $blog->blog_id == 1 ) ? '' : $blog->blog_id . '_';
		$sub_queries[] = implode(' ', array(
			sprintf( 'SELECT %3$d as blog_id, %1$s%2$sposts.* FROM %1$s%2$sposts', 
				$wpdb->prefix, $blog_prefix, $blog->blog_id ),
			$wpdb->prepare('WHERE post_type = %s AND post_status = %s', 'post', 'publish'),
		));
	}
	//《3》クエリの組み立て
	$query = array();
	$query[] = 'SELECT SQL_CALC_FOUND_ROWS *';
	$query[] = sprintf( 'FROM (%s) as posts', implode( ' UNION ALL ', $sub_queries ) );
	$query[] = 'ORDER BY post_date DESC';
	$query[] = sprintf( 'LIMIT %d, %d', $offset, $numberposts );
	$query = implode( ' ', $query );

	//《4》問い合わせの実行
	$posts = $wpdb->get_results( $query );
	$foundRows = $wpdb->get_results( 'SELECT FOUND_ROWS() as count' );
	$foundRows = $foundRows[0]->count;

	//《5》wp_query の書き換え
	global $wp_query;
	$wp_query->query_vars['posts_per_page'] = $numberposts;
	$wp_query->found_posts = $foundRows;
	$wp_query->max_num_pages = ceil( $foundRows / $numberposts );

	return $posts;
}

<?php

/**

* 投稿日順で、ネットワーク上の全てのブログの投稿を取得する。

* @param mixed $args

* numberposts 取得する投稿数。デフォルトは 5

* offset 取得する投稿のオフセット。デフォルトは false で指定無し。指定すると、paged より優先。

* paged 取得する投稿のページ数。get_query_var( 'paged' ) の値または１のいずれか大きな方。

* @return array<stdClass>

function get_posts_over_network( $args=null ) {

global $wpdb;

$args = wp_parse_args( $args, array(

'numberposts' => 5,

'offset' => false,

'paged' => max( 1, get_query_var( 'paged' ) ),

) );

extract( $args );

//ページ指定とオフセットの調整

if ( $offset === false ) {

$offset = ( $paged - 1 ) * $numberposts;

}

//《1》ネットワーク上のブログの一覧を取得

$query = sprintf( 'SELECT * FROM %sblogs', $wpdb->prefix );

$blogs = $wpdb->get_results( $query );

//《2》各ブログの投稿データを取得するサブクエリの準備

$sub_queries = array();

foreach ( $blogs as $blog ) {

$blog_prefix = ( $blog->blog_id == 1 ) ? '' : $blog->blog_id . '_';

$sub_queries[] = implode(' ', array(

sprintf( 'SELECT %3$d as blog_id, %1$s%2$sposts.* FROM %1$s%2$sposts',

$wpdb->prefix, $blog_prefix, $blog->blog_id ),

$wpdb->prepare('WHERE post_type = %s AND post_status = %s', 'post', 'publish'),

));

}

//《3》クエリの組み立て

$query = array();

$query[] = 'SELECT SQL_CALC_FOUND_ROWS *';

$query[] = sprintf( 'FROM (%s) as posts', implode( ' UNION ALL ', $sub_queries ) );

$query[] = 'ORDER BY post_date DESC';

$query[] = sprintf( 'LIMIT %d, %d', $offset, $numberposts );

$query = implode( ' ', $query );

//《4》問い合わせの実行

$posts = $wpdb->get_results( $query );

$foundRows = $wpdb->get_results( 'SELECT FOUND_ROWS() as count' );

$foundRows = $foundRows[0]->count;

//《5》wp_query の書き換え

global $wp_query;

$wp_query->query_vars['posts_per_page'] = $numberposts;

$wp_query->found_posts = $foundRows;

$wp_query->max_num_pages = ceil( $foundRows / $numberposts );

return $posts;

}

以下に簡単に解説します。

《1》で wp_blogs テーブルよりブログの一覧を取得
《2》で《1》で取得したブログから投稿を取得するサブクエリを準備
《3》でクエリ全体を組み立て
《4》で記事データと、総件数を取得
《5》で wp_query の変数の一部を書き換え

大きなポイントは、《3》で各サイトの投稿テーブルを UNION ALL してしまうことと、《5》で wp_query を書き換えることです。《5》を行う事によって、wp_pagenavi などのプラグインでページナビゲーションの表示が可能になります。なかなか泥臭いことをやっていますね。 (; ^ω^)

上記の関数は、例えば次のようにして利用できます。

<?php 

get_header();
the_post();

?>
<section id="content-primary">

	<header id="page-header">
		<h1><?php the_title() ?></h1>
	</header>

<?php

$posts = get_posts_over_network();

wp_pagenavi();

?>
<?php if ( ! empty ($posts) ) : ?>
	<section class="post-list">
<?php
	foreach ( $posts as $post ) :
		switch_to_blog( $post->blog_id );
		setup_postdata( $post )
?>
		<section id="post-<?php the_ID() ?>" <?php post_class() ?>>
			<h2>【<?php echo get_bloginfo( $post->blog_id ) ?>】</h2>
			<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
			<?php echo get_the_excerpt() ?>
		</section>
<?php
		restore_current_blog();
	endforeach;
?>
	</section>
<?php else : ?>
	<p>投稿がありません。</p>
<?php endif; # End of empty( $posts ) ?>

</section>
<?php

wp_reset_query();
get_sidebar();
get_footer();

<?php

get_header();

the_post();

</header>

<?php

$posts = get_posts_over_network();

wp_pagenavi();

<?php if ( ! empty ($posts) ) : ?>

<?php

foreach ( $posts as $post ) :

switch_to_blog( $post->blog_id );

setup_postdata( $post )

<?php echo get_the_excerpt() ?>

</section>

<?php

restore_current_blog();

endforeach;

</section>

<?php else : ?>

<p>投稿がありません。</p>

<?php endif; # End of empty( $posts ) ?>

</section>

<?php

wp_reset_query();

get_sidebar();

get_footer();

このサンプルは固定ページを準備して、固定ページのテンプレートに直接上記のコードを書いて、ネットワークブログのアーカイブページとして表示させるイメージです。

15行目で投稿データを取得
17行目で、wp_pagenavi を呼び出してページャーを表示しています。
24行目でブログを切り替え、25行目で投稿データをセットアップ
33行目でブログをカレントブログに戻します。

これで wp_pagenavi によるページナビゲーションもちゃんと表示されます。もちろんページの移動も可能です。

以下は、汎用的に使えるように幾つかオプションを足して、整理したものです。ご参考まで。

<?php

class network
{
	/**
	 * ネットワーク上の投稿データを取得します。
	 * @param  mixed  $args
	 *	numberposts    取得する投稿数。デフォルトは 5
	 *	offset    取得する投稿のオフセット。デフォルトは false で指定無し。指定すると、paged より優先。
	 *	paged    取得する投稿のページ数。get_query_var( 'paged' ) の値または１のいずれか大きな方。
	 *	post_type    取得する投稿タイプ。デフォルトは post
	 *	orderby    並び替え対象。デフォルトは post_date
	 *	order    並び替え順。デフォルトは DESC で降順
	 *	post_status    投稿のステータス。デフォルトは publish
	 *	blog_ids    取得するブログのIDを指定。デフォルトは null で指定無し
	 *	exclude_blog_ids    除外するブログのIDを指定。デフォルトは null で指定無し
	 *	affect_wp_query    wp_query を書き換えるか否か。デフォルトは false で書き換えない。wp_pagenavi など wp_query を参照するページャープラグインの利用時には true とする
	 * @return  array<stdClass>
	 */
	function get_posts( $args=null ) {

		global $wpdb;

		$args = wp_parse_args( $args, array( 
			'numberposts' => 5,
			'offset' => false, 
			'paged' => max( 1, get_query_var( 'paged' ) ),
			'post_type' => 'post',
			'orderby' => 'post_date',
			'order' => 'DESC',
			'post_status' => 'publish',
			'blog_ids' => null,
			'exclude_blog_ids' => null,
			'affect_wp_query' => false,
		) );
		extract( $args );

		//ページ指定とオフセットの調整
		if ( $offset === false ) {
			$offset = ( $paged - 1 ) * $numberposts;
		}

		//ブログの一覧を取得
		$blogs = self::get_blogs( compact( 'blog_ids', 'exclude_blog_ids' ) );

		//投稿データを取得するサブクエリの準備
		$sub_queries = array();
		foreach ( $blogs as $blog ) {
			$blog_prefix = ( $blog->blog_id == 1 ) ? '' : $blog->blog_id . '_';
			$sub_queries[] = implode(' ', array(
				sprintf( 'SELECT %3$d as blog_id, %1$s%2$sposts.* FROM %1$s%2$sposts', 
					$wpdb->prefix, $blog_prefix, $blog->blog_id ),
				$wpdb->prepare('WHERE post_type = %s AND post_status = %s', 
					$post_type, $post_status),
			));
		}

		//クエリの組み立て
		$query[] = 'SELECT SQL_CALC_FOUND_ROWS *';
		$query[] = sprintf( 'FROM (%s) as posts', implode( ' UNION ALL ', $sub_queries ) );
		$query[] = sprintf( 'ORDER BY %s %s', $orderby, $order );
		$query[] = sprintf( 'LIMIT %d, %d', $offset, $numberposts );
		$query = implode( ' ', $query );

		//問い合わせの実行
		global $wpdb;
		$posts = $wpdb->get_results( $query );
		$foundRows = $wpdb->get_results( 'SELECT FOUND_ROWS() as count' );
		$foundRows = $foundRows[0]->count;

		//wp_query の書き換え
		if ( $affect_wp_query ) {
			global $wp_query;
			$wp_query->query_vars['posts_per_page'] = $numberposts;
			$wp_query->found_posts = $foundRows;
			$wp_query->max_num_pages = ceil( $foundRows / $numberposts );
		}

		return $posts;
	}

	/**
	 * ブログの一覧を取得する。
	 * 返される各ブログの情報を持つオブジェクトは、ブログ名とその Home URL を含む。
	 * @param  mixed  $args
	 *	blog_ids  取得するブログのIDを指定。デフォルトは null で指定無し
	 *	exclude_blog_ids  除外するブログのIDを指定。デフォルトは null で指定無し
	 * @return  array<stdClass>
	 */
	function get_blogs( $args=null ) {

		global $wpdb;

		$args = wp_parse_args( $args, array(
			'blog_ids' => null,
			'exclude_blog_ids' => null,
		) );
		extract( $args );

		//必要に応じて、where 句を準備
		$where = array();
		if ( $blog_ids ) {
			if ( is_array( $blog_ids ) ) {
				$blog_ids = array_map( 'intval', (array) $blog_ids );
				$blog_ids = implode( ',', $blog_ids );
			}			
			$where[] = sprintf( 'blog_id IN (%s)', $blog_ids );
		}
		if ( $exclude_blog_ids ) {
			if ( is_array( $exclude_blog_ids ) ) {
				$exclude_blog_ids = array_map( 'intval', (array) $exclude_blog_ids );
				$exclude_blog_ids = implode( ',', $exclude_blog_ids );
			}			
			$where[] = sprintf( 'blog_id NOT IN (%s)', $exclude_blog_ids );
		}

		//クエリの組み立て
		$query[] = sprintf( 'SELECT * FROM %sblogs', $wpdb->prefix );
		if ( $where ) {
			$query[] = "WHERE " . implode(' AND ', $where);
		}
		$query[] = 'ORDER BY blog_id';
		$query = implode( ' ', $query );

		//問い合わせの実行
		$blogs = $wpdb->get_results( $query );

		//各ブログの情報を取得
		foreach ( $blogs as &$blog ) {
			switch_to_blog( $blog->blog_id );
			$blog->name = get_bloginfo('name');
			$blog->home_url = get_home_url();
			restore_current_blog();
		}

		return $blogs;
	}

	/**
	 * 投稿データをブログとともにセットアップする。
	 * 内部的に switch_to_blog を使っているので、呼び出した後の処理が終わったら、
	 * restore_current_blog() を都度コールする
	 * @param  array  $post  投稿データ。$post->blog_id を保持していること。
	 * @return void
	 */
	function setup_postdata_and_switch_to_blog( $post ) {
		switch_to_blog( $post->blog_id );
		$post->blog_name = get_bloginfo( 'name' );
		$post->blog_home_url = get_home_url();
		setup_postdata( $post );
	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<?php

class network

{

/**

* ネットワーク上の投稿データを取得します。

* @param mixed $args

* numberposts 取得する投稿数。デフォルトは 5

* offset 取得する投稿のオフセット。デフォルトは false で指定無し。指定すると、paged より優先。

* paged 取得する投稿のページ数。get_query_var( 'paged' ) の値または１のいずれか大きな方。

* post_type 取得する投稿タイプ。デフォルトは post

* orderby 並び替え対象。デフォルトは post_date

* order 並び替え順。デフォルトは DESC で降順

* post_status 投稿のステータス。デフォルトは publish

* blog_ids 取得するブログのIDを指定。デフォルトは null で指定無し

* exclude_blog_ids 除外するブログのIDを指定。デフォルトは null で指定無し

* affect_wp_query wp_query を書き換えるか否か。デフォルトは false で書き換えない。wp_pagenavi など wp_query を参照するページャープラグインの利用時には true とする

* @return array<stdClass>

function get_posts( $args=null ) {

global $wpdb;

$args = wp_parse_args( $args, array(

'numberposts' => 5,

'offset' => false,

'paged' => max( 1, get_query_var( 'paged' ) ),

'post_type' => 'post',

'orderby' => 'post_date',

'order' => 'DESC',

'post_status' => 'publish',

'blog_ids' => null,

'exclude_blog_ids' => null,

'affect_wp_query' => false,

) );

extract( $args );

//ページ指定とオフセットの調整

if ( $offset === false ) {

$offset = ( $paged - 1 ) * $numberposts;

}

//ブログの一覧を取得

$blogs = self::get_blogs( compact( 'blog_ids', 'exclude_blog_ids' ) );

//投稿データを取得するサブクエリの準備

$sub_queries = array();

foreach ( $blogs as $blog ) {

$blog_prefix = ( $blog->blog_id == 1 ) ? '' : $blog->blog_id . '_';

$sub_queries[] = implode(' ', array(

sprintf( 'SELECT %3$d as blog_id, %1$s%2$sposts.* FROM %1$s%2$sposts',

$wpdb->prefix, $blog_prefix, $blog->blog_id ),

$wpdb->prepare('WHERE post_type = %s AND post_status = %s',

$post_type, $post_status),

));

}

//クエリの組み立て

$query[] = 'SELECT SQL_CALC_FOUND_ROWS *';

$query[] = sprintf( 'FROM (%s) as posts', implode( ' UNION ALL ', $sub_queries ) );

$query[] = sprintf( 'ORDER BY %s %s', $orderby, $order );

$query[] = sprintf( 'LIMIT %d, %d', $offset, $numberposts );

$query = implode( ' ', $query );

//問い合わせの実行

global $wpdb;

$posts = $wpdb->get_results( $query );

$foundRows = $wpdb->get_results( 'SELECT FOUND_ROWS() as count' );

$foundRows = $foundRows[0]->count;

//wp_query の書き換え

if ( $affect_wp_query ) {

global $wp_query;

$wp_query->query_vars['posts_per_page'] = $numberposts;

$wp_query->found_posts = $foundRows;

$wp_query->max_num_pages = ceil( $foundRows / $numberposts );

}

return $posts;

}

/**

* ブログの一覧を取得する。

* 返される各ブログの情報を持つオブジェクトは、ブログ名とその Home URL を含む。

* @param mixed $args

* blog_ids 取得するブログのIDを指定。デフォルトは null で指定無し

* exclude_blog_ids 除外するブログのIDを指定。デフォルトは null で指定無し

* @return array<stdClass>

function get_blogs( $args=null ) {

global $wpdb;

$args = wp_parse_args( $args, array(

'blog_ids' => null,

'exclude_blog_ids' => null,

) );

extract( $args );

//必要に応じて、where 句を準備

$where = array();

if ( $blog_ids ) {

if ( is_array( $blog_ids ) ) {

$blog_ids = array_map( 'intval', (array) $blog_ids );

$blog_ids = implode( ',', $blog_ids );

}

$where[] = sprintf( 'blog_id IN (%s)', $blog_ids );

}

if ( $exclude_blog_ids ) {

if ( is_array( $exclude_blog_ids ) ) {

$exclude_blog_ids = array_map( 'intval', (array) $exclude_blog_ids );

$exclude_blog_ids = implode( ',', $exclude_blog_ids );

}

$where[] = sprintf( 'blog_id NOT IN (%s)', $exclude_blog_ids );

}

//クエリの組み立て

$query[] = sprintf( 'SELECT * FROM %sblogs', $wpdb->prefix );

if ( $where ) {

$query[] = "WHERE " . implode(' AND ', $where);

}

$query[] = 'ORDER BY blog_id';

$query = implode( ' ', $query );

//問い合わせの実行

$blogs = $wpdb->get_results( $query );

//各ブログの情報を取得

foreach ( $blogs as &$blog ) {

switch_to_blog( $blog->blog_id );

$blog->name = get_bloginfo('name');

$blog->home_url = get_home_url();

restore_current_blog();

}

return $blogs;

}

/**

* 投稿データをブログとともにセットアップする。

* 内部的に switch_to_blog を使っているので、呼び出した後の処理が終わったら、

* restore_current_blog() を都度コールする

* @param array $post 投稿データ。$post->blog_id を保持していること。

* @return void

function setup_postdata_and_switch_to_blog( $post ) {

switch_to_blog( $post->blog_id );

$post->blog_name = get_bloginfo( 'name' );

$post->blog_home_url = get_home_url();

setup_postdata( $post );

}

上記は、最初のサンプルとほぼ同様に、次のようにして利用できます。

<?php 

get_header();
the_post();

?>
<section id="content-primary">

	<header id="page-header">
		<h1><?php the_title() ?></h1>
	</header>

<?php

//ホストブログを除いた一覧の取得。wp_pagenavi を利用するため、affect_wp_query=true とする
$posts = network::get_posts('exclude_blog_ids=1&affect_wp_query=true');

wp_pagenavi();

?>
<?php if ( ! empty ($posts) ) : ?>
	<section class="post-list">
<?php
	foreach ( $posts as $post ) :
		network::setup_postdata_and_switch_to_blog( $post );
?>
		<section id="post-<?php the_ID() ?>" <?php post_class() ?>>
			<h2>【<?php echo $post->blog_name ?>】</h2>
			<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
			<?php echo get_the_excerpt() ?>
		</section>
<?php
		restore_current_blog();
	endforeach;
?>
	</section>
<?php else : ?>
	<p>投稿がありません。</p>
<?php endif; # End of empty( $posts ) ?>

</section>
<?php

wp_reset_query();
get_sidebar();
get_footer();

<?php

get_header();

the_post();

</header>

<?php

//ホストブログを除いた一覧の取得。wp_pagenavi を利用するため、affect_wp_query=true とする

$posts = network::get_posts('exclude_blog_ids=1&affect_wp_query=true');

wp_pagenavi();

<?php if ( ! empty ($posts) ) : ?>

<?php

foreach ( $posts as $post ) :

network::setup_postdata_and_switch_to_blog( $post );

<?php echo get_the_excerpt() ?>

</section>

<?php

restore_current_blog();

endforeach;

</section>

<?php else : ?>

<p>投稿がありません。</p>

<?php endif; # End of empty( $posts ) ?>

</section>

<?php

wp_reset_query();

get_sidebar();

get_footer();

以上です。

投稿日: 2013-02-08 2013-03-20

CakePHP2.x の Shell で Component を使う

CakePHP2.x の Shell で Component を使う、というよくありそうな要件です。

検索してみて色々出てくるのですが、微妙に上手く行かなかったり、上手くいくものの「こっちの方が正しいのでは？」と思えたりしたので、下記にメモしておきます。

<?php

App::uses('Shell', 'Console');
App::uses('ComponentCollection', 'Controller');
App::uses('TransactionComponent', 'Controller/Component');
App::uses('SqlDumpComponent', 'Controller/Component');

/**
* Application Shell
* @package app.Console.Command
*/
class AppShell extends Shell
{
    public function startup() {
        $this->components = new ComponentCollection();
        $this->Transaction = $this->components->load('Transaction');
        $this->SqlDump = $this->components->load('SqlDump');
    }
}

<?php

App::uses('Shell', 'Console');

App::uses('ComponentCollection', 'Controller');

App::uses('TransactionComponent', 'Controller/Component');

App::uses('SqlDumpComponent', 'Controller/Component');

/**

* Application Shell

* @package app.Console.Command

class AppShell extends Shell

{

public function startup() {

$this->components = new ComponentCollection();

$this->Transaction = $this->components->load('Transaction');

$this->SqlDump = $this->components->load('SqlDump');

}

特に難しいことをしているわけでなく、ComponentCollection を new し、そこから load するのが良さそうなのかな、ということですが、ComponentCollection を自分で new するのに少々疑問もあるのです。 (; ^ω^)

もしより良い方法があればどなたかご教示ください。

投稿日: 2013-01-20 2013-01-20

Local Web Developer Coffee Meeting KITA-KOBE #01

はてなブックマーク - Local Web Developer Coffee Meeting KITA-KOBE #01

Local Web Developer Coffee Meeting KITA-KOBE #01 を題して、自宅にて Web 系勉強会を開催しました。

僕が山奥に住んでいて都会まで出掛けるのが大変なので、同じような境遇の方もいるであろうと、田舎者集まれ！で企画してみましたが、新しいご近所さんには来て頂くことが出来ずに、知り合いさんばかりでの開催となりました。でもなかなか盛り上がって勉強にもなりましたし、コーヒーも美味しく頂くことが出来たかと思います。まずは開催して良かった！です。本日のミーティングに参加いただいた皆さん、本当にありがとうございました。また機会がありましたら、是非ご一緒させてください。

本ミーティングの主題は、クリエイター同士の情報共有です。しかし、それは大きなものではなくて、より実践に沿った身近な内容のものです。「そうなんだ、そういうやり方もあるんだ」「なるほど。そういう考え方もあるんだ」というような気付きを、それぞれが持ち帰れることが出来ると良いなーと思っています。その為に、少人数での、全員参加のミーティングを企画しましたが、皆さん何かお持ち帰り頂けたでしょうか？ (^_^;A　僕個人的には、とても沢山のものを頂くことが出来ました。やっぱり良いですね。コーヒーを飲みながらとか、ちょうど良い。またメンバーが集まるかは疑問ですが、とりあえず次回、また開催したいと思います！

以下、本日のご報告です。

本日の参加メンバー（勝手な思い込みでのカウントです）

デザイナー：１名
システムエンジニア：１名
デザイン〜プログラムまで幅広く：３名

本日の内容（ざっくりですがすみません）

SASS（compass）について
- 最近初めて使ってみた人の感想
  - 使ってみたが、CSSの設計が変わる
    - extend / include 便利＆合理的
    - 変数や数式。意味の残る値を記述できる。
    - 入れ子で掛けることとかも素直に便利だし、結構賢い。
  - 導入も思っていたよりも簡単
- デザイナーからみた意見
  - コンソールを使わないと行けないのが、デザイナーには難しいかも？
    - yat さんのブログ記事の通りやれば OK だったので簡単でしたよ
  - 変数とか計算とか出来るけれども、それも難しく思えてしまうところも…
- システムエンジニア、プログラマにも必要？
  - 知ってて損は無う。
  - でも CSS をそれほど書かないのなら、やはりわざわざ勉強しなくとも…
  - 仮に SCSS ファイルが来て修正することになっても、CSSの知識があればそんなに戸惑わないと思う
- 覚えるのは大変？
  - SASS ではそのまま CSS を書いてもOKなので、覚えた機能から使えるので気軽に出来る
  - そもそもそれほど難しくないと思うので分かり易い
- ワークフローでの注意点は？
  - 個人の作業フローとしてはそれほど変化無い。楽になる。意味的なCSSが書ける。保守性が高まる
  - SASS を使っている人と使っていない人との協業があるなら、ワークフローに工夫は必要かも？
プロジェクト管理
- BackLog や ChatWalk 、サイボウズ Live など、色々あるけど、みんな何使ってるの？
- 全部使ってる（笑）
  - グループ、コミュニティ、お客様それぞれで使っているものが違うので、全部使うことになる
- それはメンドクサク無いんですか？
  - めんどくさい！（笑）でも仕方ない…
  - それだけじゃない。Twitter や Facebook、…はては電話、ファックスの人もいて混乱する
- 効率化出来てるんですか？
  - 微妙…？
  - もちろん色々と便利なところはあるけれど
  - やはり色々使って、あちこち見なければ行けないのは大変…
- しかし、多人数でのプロジェクトでは必要？
  - それも一概に言えない。
  - たとえばスピードが求められるコミュニケーションでは、結局一部の人間が別の連絡手段（スカイプチャット）などで連絡し、プロジェクト管理ツールには決まったことだけを流すようなことになったことも…
  - 結局、使う人たちがちゃんと使うことが大切。ツールはあくまでも補助。ツールを準備する前に、ツールを使う心構えが大切か。
- ところで Git とかは？
  - ほぼみんな使っている
  - やはり便利？
    - 個人の作業でも便利だと思うので、使ってみるのは良いと思う
  - デザイナーでも使っている＆使える
    - GUIソフトがある（SourceTree）
    - でも混乱することもあるので、時々エンジニアの方に助けてもらっている
Webサーバーの選択
- ところで、Amazon EC2 って、どういった場面で使っているのか？
  - １年間はほぼ無料で利用できるプランがあるので、それで勉強を始めている。勉強の理由：選択肢を増やしておきたい。
  - エバンジェリストの人が頑張っていて流行っている感もあるけれど、それほど良いかなーとも思う
  - 割と費用も高いですよね？（安価な共有サーバーに比べると）
  - もちろん必要な場面もあるけれど、マッチする場面が多いかは微妙？（案件による、ということか）
- では、みなさんがお客様にサーバーを進める場合は？
  - 中小企業のコーポレートサイト程度なら、やっぱりサクラかな（安価でそこそこ動く）
    - サクラはサーバーによって速度が変わるね（笑）
    - 安価なプランはどこのサーバー屋さんもだいだい一緒かも
    - 月５千円とか以下ぐらいのサーバーはみなそんなものかも…
  - 自分がサポートしなければいけないのなら、まず自分が知っているサーバーが楽で良い
セキュリティ
- FTP でデータをアップロードするのって、やはり問題があるのか？
  - 使えるなら SFTP、FTPS などでアップするのが良いと思う
  - FTP で運用していて、問題があったという話も身近に効いた事がありますね…
  - でもあまりシビアに考えなくても良いのでは？
  - 実際にクラックされたことある人は？
    - 決済アカウントを乗っ取られた事例が一つ…。Webサーバーとは違うけど、恐ろしい…。原因は不明とのこと。
  - 外でネット接続する時には気にしているけど、家ではあまり気にしていないかも…
  - 並のクライアントなら、FTPでもSFTP/FTPS でも手間は変わらないので、使えるなら使うのが良いかな…
  - お客様にお願いできるか？
  - 微妙かな？
  - 一度お願いして、難しそうな顔されたら諦める、ぐらいか。「一応言ったからね」ということで責任を果してる？ (^_^;A

まとめ

実は明確な進行など何もなくて、アジェンダを読み上げているなかで話がふくらみ、各方面に話が弾んだのでモデレータとしては大変楽チンでした♪（というか何もしていない (^_^;A）話も散漫になることなく、経験者から未経験者への感想や体験の共有や、一人からみんなへの質問、それから個々の細かな技術的な話など、自由に聞きたいことが聞けたのではないかなーと思います。個人的には、グループウェア回りの話や、Amazon EC2 の立ち位置など、気になっていた部分について、生の意見が聞けてとても良かったです。

次回は春頃にやりたいと思っています。

投稿日: 2012-12-18 2013-02-14

僕だって何か出来るはずですよ (’-‘) #wacja2012

WordPress Advent Calendar 2012 の参加記事、18日目担当 @yuka2py ことノジマです。昨日の担当 odyssey 先輩のご担当よりの引き継ぎですよー。頑張ります。

おっと。でも今日のご担当は僕一人じゃないですか。いやん。まいりました。責任重大ですね。純粋に勢いに任せて参加表明してしまったのですが、何を書こうやら今を持って悩んでます (^_^;A　既に執筆された諸先輩方の記事を改めて眺めさせて頂きましたよ。まあいいや。自然に書こう。自然に。

最近忙しかったので、自分のサイトにログインしていませんでしたよ。サイトはもちろん WordPress ですよ。サイトを開いたら画面上の黒いバーがありませんね。下の方に行って「ログイン」ボタンからログインしてみたら…

「WordPress 3.5 が利用可能です ! 更新してください。」

そうか、もうそんな季節でしたか…。えいや！ままよ！更新しちまえ！（自分のサイトがまず実験台）。おもむろに更新開始。

いつもの更新画面…更新完了。派手な更新完了画面。素晴らしい。おっと、プラグインもアップデートがいるのね。GO。まぁ、テーマもアップデートあるのね。使ってないテーマだけど、GO。プラグインの更新状況がズンズンと表示されていきますね。素晴らしい。

一通り更新完了。本題「アドベントカレンダーのブログを書く」に入ろうとしたら、更新画面が↓こんなの出てた。ヘー。なるほど。画像とか管理する例のアレが使い勝手良くなったらしい。どれどれ。

ほう。なるほど。素晴らしい。WordPress 歴の浅い僕にとっても、これは前のよりずいぶん良くなった気がしますよ。使い易いし、変わっても違和感無く使えます。素晴らしい。凝った画面に感心したところで、意地悪な僕なので、どれどれとウィンドウの横幅を変えて楽しんでみましたが、見事にこんなところまで高度にレスポンシブ対応されています。素晴らしい。なんだこれ。素晴らし過ぎる。

いやー。素晴らしい！

僕はシステムエンジニアです。ソフトウェア開発がお仕事です。色々書きますよ。色々作りますよ。でも何をするのも、思うより結構大変なんですよ。小さな事でつまづくんですよ。５分で出来ると思ってたら３日掛かることもあるんですよ（たまに逆もあるけれどw）。お客様が簡単だよね？って言う事ほど難しかったりするんですよ。で、それで、こんな画面どうですか？見積もりしたらお客様もびっくりですよ。こんなアップグレードのフレームワークは如何ですか？自分で作るなんてワー！タイヘーン ε=ε=ε=ヽ(|||; >д<)ノですよ。というか、時代に合わせて保守更新していくのだけでも大変なんですよね。

それで、なんでこんな素晴らしい WordPress が無料で使えるんだろうか？
いやいやそれ以上に、一体誰が WordPress を作ってるんだろうか？

世の中にオープンソースのプロダクトは沢山ありますよね。概ね無料で自由に使える。どの製品にも共通して言えることだけれど、誰かがその製品を作ってるんですよね。きっとすごく労力を使っていると思う。そして僕らはそれを利用させて頂いている。無料で？ …いや、わかんない。ここのところ、最近は無料だと思わない方が良いように思って来ました。

いや、あんまり優等生的な事を言うつもりは無いんですよ。でも、「タダより高いものは無い」なんて昔から言うじゃないですか。だから僕らはお世話になっている WordPress さんにも積極的に対価を支払うほうが良いと思うんですよね。その方が自分も気持ち良い（はず！）。

オープンソースプロダクトのメンテナンスに携わっている人々への感謝の気持ち、これは有って然るべきものであると思うけれども、でもでも、感謝だけじゃなくって、僕らはきっと何か貢献できると思うんですよね。「私には何も出来ない」とかじゃなくって「出来るはず」だし、それって因果応報、きっと自分に帰ってくる。ちょっと具体的には、自分が作ったプラグインやテーマを単に公開するだけでも良いと思う。それが誰かに使われて、誰かの役に立てばそれが貢献。気付いたこと、覚えた事をブログに書くのも良い。きっと誰かの助けになる。それも貢献。そうやって自分も含めたユーザーが世界を広げて、広がった世界がより多くのユーザーと繋がって、そして製品がより素晴らしいものになっていくんだろーなーと思う。

とはいえ！僕も、「じゃあアナタは何か出来ていますか？」と真剣な眼差しで問われると「う〜ん。微妙 (#^.^#)」と照れちゃう程度なので、まぁまぁ、これから♪　エンジニアだし、とりあえずはプラグインとか作って公開したいよね。いや、しちゃいますよ。ただ WordPress って「これエエんちゃうん？」と思ったアイデア、既にあったりして、しかも凄いプラグインとかだったりして、まぁ、やばいやばいw　まぁ、いいや、そこも気楽に行こう。貢献しなきゃ、って焦る必要は少しもないんだから。

オレ得気分でもいい。WordPress という世界で、僕らはきっと何か出来るのですよ。(=゜ω゜)ノ

という感じで、ネタに悩んでいたところ、WordPress のアップグレード画面を見てて思ったことを書いちゃいました。ネタ候補は幾つかあったんですよ。でもどれもパッとしなかったので。まあこれも大した話でも無かったので、申し訳ないです。とはいえ、また感動したので書きました。「WordPress すごい！」って思うと同時に、「みんな本当にありがとうございます」と思えた。僕も改めてプラグインとか作っちゃおうとか思えたし、仕事の中でも自分に何か残るような仕事の仕方をしなきゃなーと思いました。さて、頑張ろう頑張ろう。明日元気でいるために。

ちなみに、2012/12/15日現在で、WordPress 3.5 に上げて各種プラグインを全部アップデートしたのですが、Jetpack の Photon を有効にしていると投稿本文に貼った画像が何故か 150×150 のサムネールになってしまうという現象に遭遇。とりあえず Photon を off にしました。他は概ね大丈夫みたいです。素晴らしい。Jetpack もまたアップデートされて問題が解消されるでしょうー。

さて、明日は僕もみんなも憧れの額賀さんですね。光栄です！よろしくですわよーヽ(*´∀`)/