get_template_part()の代わりにclassを呼び出す方法(2)オリジナルのテンプレートタグを作成する。

前回(get_template_part()の代わりにclassを呼び出す方法(1))では、基本的なClassの使い方を紹介しました。※1
今回は、さらに、汎用的なClassに仕上げる方法を紹介します。

前回の事例で、Classに複数の引数を渡す事例を紹介しましが、実はこの方法は、引数の並び順を一致させないとエラーになるという欠点があります。以下に例を示します。

呼び出す側:

$user = new Model36182($value, 'add', 'normal') ;

呼び出される側:

public function __construct($value, $calc, $format)

と、書くべきところ、

public function __construct($format, $calc, $value)

と書くとエラーになります。これでは、使いやすいClassとは言えません。

これを回避するためには、”オブジェクト”に引数をまとめる方法をとります。

リスト1は、オブジェクト$parに複数の引数をまとめた例です。引数を使用するときは、$par->calc というように書きます。->は、アロー演算子と呼ばれています。

リスト2は、さらに改良を加え、WordPressの代表的テンプレートタグ「WP_Query」と同じ書き方で呼び出せるようにしました。

WP_Queryの書き方

$args = array(
    'post_type'              => array( 'post' ),
    'author_name'            => 'rami',
    'order'                  => 'DESC',
    'orderby'                => 'date',
);
$query = new WP_Query( $args );

今回考えたClassの書き方

$args = array(
    'value' => array('100','10'),//引数a,b
    'calc' => 'Add',//計算方法
    'format' => 'Normal',//書式
);
$user = new Controller36638($args) ;

また、新たに、ClassController新設しています。これは、Controllerが起点となって複数のClassを使い分けたり、連結させることを想定しています。
(例)
・Controller→ModeA→ViewA
・Controller→ViewA
・Controller→ModeA→ViewB→Controller→ModeB

Classを使うとこのようなオリジナルのテンプレートタグを作成することができます。
今回作成したControllerクラス、Modelクラス、Viewクラスは、テンプレートファイルに直接書くのではなく、ブラグインフォルダに格納します。こうすることによって、テンプレートファイル(クラスを呼び出す側)は、$argsとnew Controller($args)の記述だけで済むので、コードも見やすく、プログラムの再利用性が高まります。


コード例

リスト1 オブジェクトを渡してClassを呼び出す方法①

呼び出す側

$value = array('100','10') ;
echo 'a='.$value[0].',b='.$value[1] ;
		
$par->balue = array('100','10') ;
		
$par->calc = 'Add' ;
$par->format = 'Normal' ;
$user = new Model36618($par) ;
		
$par->calc = 'Add' ;
$par->format = 'Bold' ;
$user = new Model36618($par) ;
		
$par->calc = 'Multi' ;
$par->format = 'Normal' ;
$user = new Model36618($par) ;
		
$par->calc = 'Multi' ;
$par->format = 'Bold' ;
$user = new Model36618($par) ;

呼び出される側

class Model36618//計算するクラス。
{
	public function __construct($par)
	{
		?><br><?php
		echo $par->calc.' ' ;	
		if($par->calc == 'Add'){
			$result =$par->value[0]+$par->value[1] ;			
		}elseif($par->calc == 'Multi'){
			$result =$par->value[0]*$par->value[1] ;			
		}
		$par->result = $result ;
		$user = new View36618($par) ;
	}//endfunction
}//endclass

class View36618//表示するクラス。
{
	public function __construct($par)
	{
		echo $par->format.' ' ;
		if($par->format == 'Normal'){
				echo $par->result ;		
		}elseif($par->format == 'Bold'){
			?><b><?php
				echo $par->result ;
			?></b><?php			
	}
	}//endfunction
}//endclass

リスト1 の実行結果

a=100,b=10
Add Normal 110
Add Bold 110
Multi Normal 1000
Multi Bold 1000

リスト2 オブジェクトを渡してClassを呼び出す方法②

呼び出す側

$args = array(
    'value' => array('100','10'),//引数a,b
    'calc' => 'Add',//計算方法
    'format' => 'Normal',//書式
);
$user = new Controller36638($args) ;

呼び出される側(ClassModlとClassViewは、リスト1と同じです。)

class Controller36638//コントローラーclass
{
	public function __construct($args)
	{
//////配列をオブジェクトに変換
		$par =(object)$args;
//////Modelメソッドの呼び出し
		echo 'a='.$par->value[0].',b='.$par->value[1] ;	
		$user = new Model36618($par) ;

	}//endfunction
}//endclass

リスト2 の実行結果

a=100,b=10
Add Normal 110

参考記事

Leaflet入門

「Leaflet」は、Webサイトに地図を載せる場合に利用するツールです。
「Leaflet」はフリーソフトでありながら、細かなオプションが用意されているのが特徴です。

リスト1 は、背景となる地図(ベース地図)を表示するコードです。
WordPressにLeafletを埋め込む場合は、事前準備として、function.phpに、Leafletを読み込むコードを記述します。

コード例

リスト1 Leaflet入門(背景地図の表示)

function.php

まず、事前準備として、次のコードをfunction.phpに記述します。

function leaflet_enqueue_styles() {
    wp_enqueue_style( 'leaflet-style', '//unpkg.com/leaflet@1.5.1/dist/leaflet.css', NULL, NULL );
}
add_action( 'wp_enqueue_scripts', 'leaflet_enqueue_styles' );
/* 先にスタイルシートを読み込んでからJavaScriptを読み込む */
function leaflet_enqueue_script() {
    wp_enqueue_script( 'leaflet-js', '//unpkg.com/leaflet@1.5.1/dist/leaflet-src.js', NULL, NULL );
}
add_action('wp_enqueue_scripts', 'leaflet_enqueue_script');

テンプレートファイル

次にテンプレートファイルに次のコードを記述します。

<body>
    <div id="map_1" style="height: 400px;"></div>
</body>

<script>
//////背景地図
	var osm = new L.tileLayer
	('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    	maxZoom: 19,
    	attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
	});
	
	var map_1 = L.map('map_1', {
		layers: [osm],	
		center: [35.717007,139.752772],
		zoom: 18,
    	zoomControl: true
		});
</script>

リスト1 の実行結果

get_template_part()の代わりにclassを呼び出す方法(1)クラスの使い方の基本。

前回※1、get_template_part()に引数を渡す方法を紹介しましたが、この方法では、
(1)set_query_varとget_query_varを呼び出す側と呼び出される側、計4か所に記述しなかればならないこと。
(2)変数もしくは配列は1つしか設定できない。
ことが、使いずらい点です。
そこで、今回は、これに代わる方法として、classを呼び出す方法を紹介します。

リスト1は、前回※1 のget_template_part()の事例と同様、足し算(100+10=110)を行う例です。
get_template_part()の代わりに、クラスを呼び出しています。
    $user = new addition($value) ;
は、’addition’という名前のクラスを呼び出しいる箇所です。このとき、引数$valueをクラスへ渡しています。
Class additionの中の
    public function __construct($val)
で引数を受け取っています。この例で示すとおり、引数の名前は渡す側と受け取る側で異なっていてもかまいません。(引数名が渡す側は$value、受け取り側が$valと異なっていてかまいません。)

リスト2は、計算する部分と表示する部分を別のクラスで表現したものです。

リスト3は、リスト2を発展させ、計算方法を足し算とかけ算の2通り、表示形式を通常の文字と太文字の2通り、計4通りの場合に対応できるようにしたものです。
呼び出し側は、計算方法$calcと書式$formatを引数としてクラスへ渡すことによって、2種類の計算方法と2種類の表示方法を共通のコードで処理できます。

コード例

リスト1 計算するClassと表示するClassの分離①

呼び出す側

$value = array('100','10') ;
echo 'a='.$value[0].',b='.$value[1] ;
$user = new Model36179($value) ;//Modelクラスを呼び出し。

呼び出される側(Class)

class Model36179//計算するクラス。
{
	public function __construct($value)
	{
		$sum =$value[0]+$value[1] ;
		$user = new View36179($sum) ;//Viewクラスを呼び出し
	}//endfunction
}//endclass

class View36179//表示するクラス。
{
	public function __construct($sum)
	{
		?><br><?php
		echo ' a+b='.$sum ;
	}//endfunction
}//endclass

リスト1 の実行結果

a=100,b=10
a+b=110

リスト2 計算するClassと表示するClassの分離②

呼び出す側

$value = array('100','10') ;
echo 'a='.$value[0].',b='.$value[1] ;
$user = new Model36182($value, 'add', 'normal') ;
$user = new Model36182($value, 'add', 'bold') ;
$user = new Model36182($value, 'multi', 'normal') ;
$user = new Model36182($value, 'multi', 'bold') ;

呼び出される側(Class)

class Model36182//計算するクラス。
{
	public function __construct($value, $calc, $format)
	{
		?><br><?php
		echo $calc.' ' ;	
		if($calc == 'add'){
			$result =$value[0]+$value[1] ;			
		}elseif($calc == 'multi'){
			$result =$value[0]*$value[1] ;			
		}
		$user = new View36182($result, $format) ;
	}//endfunction
}//endclass

class View36182//表示するクラス。
{
	public function __construct($result, $format)
	{
		echo $format.' ' ;
		if($format == 'normal'){
				echo $result ;		
		}elseif($format == 'bold'){
			?><b><?php
				echo $result ;
			?></b><?php			
	}
	}//endfunction
}//endclass

リスト2 の実行結果

a=100,b=10
Add Normal 110
Add Bold 110
Multi Normal 1000
Multi Bold 1000

参考記事

この記事を参照している記事

get_template_part()で引数を渡す方法

WordPressのカスタマイズの規模が大きくなると、8割~9割は同じようなコード(PHPのプログラム)を何度も書いていることがあります。このようなときは、別ファイルを作成してソースコードを分割し、コードを再利用することにします。
分割した別ファイルは、get_template_part()によって呼び出しますが、このとき、再利用の度合いを高めるために引数を渡したい場合があります。

WordPressCodexには、テンプレートに変数を渡す方法が解説されています。
今回は、一例として、引数aと引数bを渡して、テンプレート側でa+bの足し算を行い、その結果を返す例を紹介します。

コード例

リスト1 get_template_part()で引数を渡す方法

呼び出す側

 $value = array('100','10') ;
 echo 'a='.$value[0].',b='.$value[1] ;
 set_query_var( 'val', $value) ;  -----❶
 get_template_part( 'template-parts/sample/gtp', 'sample1' );
 $sum = get_query_var('sum'); -----❸
 echo 'a+b='.$sum ;

呼び出される側(gtp-sample1.phpの中身)

 $val = get_query_var('val'); -----❷
 $sum = $val[0]+$val[1] ;
 set_query_var( 'sum', $sum);

説明

呼び出す側:set_query_varで引数'var'に配列$valueを指定し、get_template_part()を呼び出します。
❷呼び出される側:get_query_varによって引数を受け取り、計算結果$sumをset_query_varによって引数'sum'として返します。
呼び出す側:get_query_varで引数'sum'を受け取ります。

リスト1 の実行結果

a=100,b=10 a+b=110

この記事を参照している記事

get_template_part()の代わりにclassを呼び出す方法(1)クラスの使い方の基本。2020-05-21

「日本版MapWarper」のジオリファレンス機能について

◆ジオリファレンスとは

古地図をWEB地図上に表示するためには、スキャナーやデジタルカメラなどを使って紙の地図をデジタル化し、それをWEB地図上に貼り付けるわけですが、このとき、
(1)古地図に緯度・経度の情報を付加する作業
(2)古地図を適切な形に整形して (ゆがめて) 現実の地図の上に置く作業
が必要です。この作業のことをジオリファレンスと言います。

◆日本版MapWarperについて

日本版MapWarper」は、このジオリファレンスを簡単に行うことができるツール(ジオリファレンサー)です。
オープンソース・ソフトウェアなので、誰でも無料で利用でき、公開した地図(されている地図)は、誰でも閲覧でき、ダウンロード利用できます。

◆「大正3年頃の鯖江図」のジオリファレンス事例

今回は、鯖江市が公開している古地図データ*1 を日本版MapWarperにアップロードして、ジオリファレンスを行います。

古地図

日本版MapWarperに会員登録し、ログインし、メニューの「地図をアップロードする」を使って古地図をアップロードします。

次に、「整形」の機能を使って、古地図を変形・伸縮させて現実の地図の座標に合うよう整形(ジオリファレンス)します。画面の左側が古地図、右側が現実の地図です。大正時代の地図は現在の地図にぴったりと重なりませんので、ここで補正を行います。両方の地図の一致する場所をダブルクリックして基準点を登録します。今回は、11か所の基準点を登録しました。①から⑪までの基準点が図示されています。

整形画面

最後に「切り抜き」の機能を使って古地図の余分な部分を取り除くと完成です。

「プレビュー」のタブに切り換えると、現実の地図の上に古地図が重ねられた状態が確認できます。*2

プレビュー画面

参考文献

*1 鯖江地区まちづくり推進協議会: 鯖江市 古地図データ (鯖江市,) リンク
007 大正3年頃の鯖江図 リンク
*2 立命館大学文学部地理学教室: 日本版MapWarper (立命館大学文学部地理学教室,) リンク
大正3年頃の鯖江図 リンク