関宿城博物館には、房総の河川 の利根川・江戸川の近世～近現代や産業・暮らしに関する展示が行われています。
当時の絵図。
関宿は、河岸の町となり、積荷を扱う商人が集まり、蔵が建ち並び、市場が開かれました。茶屋、旅籠、遊廓。賭場なども当然のごとく生まれました。＊1
蒸気船「通運丸」が明治10年に就航し、関宿と両国（墨田区）を結びました。
関宿は、周囲を河川に囲まれ、水害が多かったため、人々は、土を盛って高くしたところに、水塚（みずか）と呼ばれる小屋（洪水時の避難施設）を作って、水がひくまでここに寝泊まりしました。
今回は、関宿（せきやど、千葉県野田市）の町並みを散歩します。
東武動物公園駅から、バスで30分、そして徒歩で15分。畑の中に怪しげな天守閣がそびえたっています。
関宿城（せきやどじょう）は、野田市関宿三軒家にあった日本の城ですが、現在は、再現され現在は、千葉県立関宿城博物館になっています。
博物館の入口。
天守閣の最上階からの眺め。
WordPressの本を書きました。Amazonでお買い求め頂けます。
本書は、本来ブログ用ソフトであったWordPressを、Webサイト用のソフト（CMS）として活用するためのノウハウをまとめたものです。
ブログは、記事を時系列で羅列したものです。ブログ記事が蓄積されると、たとえば、文献の情報のページを作り、これとブログ記事を連携させたいというような要望ができています。このような場合、サブクエリー（WP_Query）やサブループの記述などにＰＨＰのコーディングが必要となるのですが、カスタマイズを進めていいくにつれ、ＰＨＰコードの量も増えメンテナンスの工数も増えます。
本書は、ＰＨＰのコード量が多くてもメンテナンスが継続できるよう、類似のコードをクラスにまとめて再利用する方法について基本知識をまとめたものです。
タイトル：オブジェクト指向WordPress
著者名：風きよし
発行：古今東西舎
発売日：2020年9月1日
価格：￥1,700+税
地図表示でマーカーを表示するとき、マーカーをクリックするとポップアップ表示するだけでなく、外部のテキストからポップアップを開くことができれば、より便利です（下図）。
この機能を実現するためには、Leaflet側のマーカーのポップアップとWordPressで表示するテキスト表示を動的に連動させることが必要です。
コード量も増えるので、再利用しやすいようにClassに分けて記述することが理想的です。
【お知らせ】
上記の事例３に示すオブジェクト指向（MVCモデル）の使い方については、本書で詳しく解説しています。
本事例は、「Leaflet 外部からポップアップを開く」をもとに作成しました。
<body>
<div id="map_1" style="height: 400px;"></div>
</body>
<p>
<a href="1234map_1"onmouseover="popupOn1(0);">【東京都】</a>
<a href="3456map_1" onmouseover="popupOn1(1);">【千葉県】</a>
<a href="589map_1" onmouseover="popupOn1(2);">【埼玉県】</a>
</p>
<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.6896, 139.6918],
zoom: 9,
zoomControl: true
});
//マーカー情報
var markers=[];
markers[0]=L.marker([35.6896, 139.6918]).addTo(map_1).bindPopup("東京都");
markers[1]=L.marker([35.6050, 140.1234]).addTo(map_1).bindPopup("千葉県");
markers[2]=L.marker([35.8572, 139.6490]).addTo(map_1).bindPopup("埼玉県");
//ポップアップを開く関数
function popupOn1(id){
markers[id].openPopup();
}
</script>本事例は、WordPressのサブクエリーによってテキストデータを動的に表示し、そのループ処理の中でLeafletのマーカー表示を行い、WordPressのテキスト側からLeafletのポップアップ操作を行う事例です。
冒頭のstatic public $const = array() ;でクラス定数$constを定義します。これは、ループ処理の中でマーカーの情報を一時的に格納するための配列定数です。
$the_query = new WP_Query($args) ;にてサブクエリーを実行します。
テキストを表示するWhileループの中で、クラス定数$constに、 緯度（$lat）,経度（ $lon）, コンテンツのタイトル（$title）などを格納します。以上がＰＨＰの処理です。
次に、HTMLによる背景地図の設定を行います。
<div id="map_2" style="height: 400px;"></div>
最後にLeaflet.jsによる描画処理を行います。
static public $const = array() ;//クラス定数を定義
public function __construct()
{
//サブクエリー（テキストを抽出）
$args = array(
'post_type' => 'post',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'region',
'field' => 'term_id',
'terms' => '9790',//中央区
),
array(
'taxonomy' => 'genre',
'field' => 'term_id',
'terms' => '10274',//商店街
)
)
);
$the_query = new WP_Query($args) ;
//サブループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$count++;
//表示（View）部分
//クラス定数へ緯度経度情報を書き込み
$array = code40307::$const ;//クラス定数を読み込み
$num = $count-1 ;
$id = get_the_ID() ;
$title = get_post($id)->post_title ;
$lat = get_post_meta($id, 'latitude', true);//緯度
$lon = get_post_meta($id, 'longitude', true);//経度
$array[] = [$id, $lat, $lon, $num, $title];//多次元配列に要素を追加
code40307::$const = $array ;//クラス定数へ書き込み
//HTML記述
?><a class="<?php
echo $par2->id ;
echo ' ' ;
echo 'tag' ;
?>"href="<?php
echo get_permalink();
?>" onmouseover="<?php
echo 'popupOn2('.$num.');' ;
?>"><?php
the_title() ;
echo "<br>\n" ;
?></a><?php
}//endwhile
}//endif
//事物表示
//クラス定数の呼び出し
$map_marker_json = json_encode(code40307::$const);
//地図エリアの設定
?>
<body>
<div id="map_2" 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_2 = L.map('map_2', {
layers: [osm],
center: [35.664897,139.776624],
zoom: 15,
zoomControl: true
});
//マーカー表示
var array = JSON.parse('<?php echo $map_marker_json; ?>');
var addmarker2=[];
var i = 0
//ループ
array.forEach(function(id){
addmarker2[i]=L.marker([id[1],id[2]]).addTo(map_2).bindPopup(id[4]);
i++;
});//endeach
//ポップアップを開く関数
function popupOn2(id){
addmarker2[id].openPopup();
}
</script>//外部からLeafletを操作する（オブジエクト指向ＭＶＣモデル）
class code40309
{
static public $const = array() ;//クラス定数を定義
public function __construct()
{
$args = array(
'model' => '37694',
'view' => '40309',
'pattern_m' => 'Sour',
'entity_from' => 'Term',
'entity_to' => 'Post',
'post_type' => 'post',
'orand' => 'and',
'tax' => array('region','genre'),//地域、ジャンル
'field_value' => array('9809','10274'), //台東区、商店街
);
$user = new Controller37694($args) ;
$user = new View40309Map() ;
$user = new View40309Mapmarker() ;
}
}
//表示を行うクラス（View）
class View40309
{
public function __construct($par)
{
$array2 = code40309::$const ;//クラス定数を読み込み
$num = $par->num ;
$num = $num-1 ;
$id = get_the_ID() ;
$title = get_post($id)->post_title ;
$lat = get_post_meta($id, 'latitude', true);//緯度
$lon = get_post_meta($id, 'longitude', true);//経度
$array2[] = [$id, $lat, $lon, $num, $title];//多次元配列に要素を追加
code40309::$const = $array2 ;//クラス定数へ書き込み
?><a class="<?php
echo $par2->id ;
echo ' ' ;
echo 'tag' ;
?>"href="<?php
echo get_permalink();
?>" onmouseover="<?php
echo 'popupOn('.$num.');' ;
?>"><?php
the_title() ;
echo "<br>\n" ;
?></a><?php
}//endfunction
}//endclass
//背景地図を表示するクラス
class View40309Map
{
public function __construct()
{
?>
<body>
<div id="map_3" 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_3 = L.map('map_3', {
//layers: [osm,old1],
layers: [osm],
center: [35.712364,139.787258],
zoom: 14,
zoomControl: true
});
</script>
<?php
}//endfunction
}//endclass
//マーカーを表示するクラス
class View40309Mapmarker
{
public function __construct()
{
$map_marker_json2 = json_encode(code40309::$const);
?>
<script>
var array = JSON.parse('<?php echo $map_marker_json2; ?>');
var addmarker=[];
var i = 0
array.forEach(function(id){
addmarker[i]=L.marker([id[1],id[2]]).addTo(map_3).bindPopup(id[4]);
i++;
});//endeach
//ポップアップを開く関数
function popupOn(id){
addmarker[id].openPopup();
}
</script>
<?php
}//endfunction
}//endclassWordPressの投稿タイプやタクソノミーを理解しようとするとき、ＥＲ図を書いてみると、視覚的に理解しやすくなります。
データの集合をエンティティと呼びます。下図は、３つのエンティティ（ブログ投稿、市区町村、ジャンル）をデータの実例付きで図示したものです。
ＥＲ図では、主キーと外部キーを記述します。主キーは、図056の最左端のデータ項目で、エンティティのレコードを識別します。表の右端にある「市区町村ＩＤ」「ジャンルＩＤ」は、それ自身が別のエンティティの主キーとなり得るデータ項目で、外部キーと呼ばれます。 一つのエンティティに主キーは必ず一つですが、外部キーは複数持つことができます。図では、ブログ投稿は二つの外部キーを持つことによって、「ジャンル」と「市区町村」２つのエンティティを関連を持っています。
また、「市区町村」の事例は、外部キーが自身の主キーと結びつく「親子関係」のエンティティの事例です。
ブログ投稿と市区町村の関係は、１：Ｎ
・１つのブログ投稿に対し１つの市区町村が関連。
・その市区町村は別のブログ投稿とも関連。
ブログ投稿とジャンルの関係は、Ｎ：Ｎ
・ジャンルは、１つのブログ投稿に対し複数設定可能。
（例）
西仲通り商店街は、「商店街」と「路地」に関連
市区町村は親子ループ（１：Ｎ）を持つ
・１つの親は１つまたは複数の子を持つ。
・子に対し、親は１つ。
・同一エンティティの中で主キーと外部キーが結びつく（親子関係）。
上記のＥＲ図の主キーと外部キーのみを表記すると下図のようになります。主キーと外部キーに注目すると、下記４パターンに集約されます。
ⓐDestinationパターン
ⓑSourceパターン（MetaQuery、TaxQuery）
ⓒAncestorsパターン（現世代→先祖）
ⓓDescendantsパターン（現世代→子孫）
Ｗｅｂサイトを開発する前に全体のデザイン（設計）をすることが必要です。まず、エンティティを抽出し、それらの関連づけを行うための主キー、外部キーはを決めることが重要です。
下図は当サイトの場合のＥＲ図の事例です。WordPressは投稿タイプとタクソノミーの２種類がありますので、どちらにするかも最初にするかを決めておく必要があります。
エンティティ同士の関連には、
❶投稿タイプとタクソノミーの関連づけ
❷投稿タイプのカスタムフィールドによる関連づけ
❸parentフィールドによる親子関係の関連づけ
の３種類があります。
WordPressはイベント駆動型モデルであると言われています。これは、ＵＲＬを指定するだけで自動的にデータを取得（メインクエリー）し、自動的にテンプレートファイルを選択して画面表示（メインループ）するものです。
しかし、カスタム投稿タイプやカスタムタクソノミーを使ったＷｅｂアプリケーション開発に重きを置く場合は、サブクエリーを多用する場面が増えてきます。
WordPressには、サブクエリーを効率よく開発するためのモデルがありません。
今回は、サブクエリーを効率よく開発するために、ＭＶＣモデルを適用することについて解説します。
ＭＶＣモデルは、Ｍｏｄｅｌクラス、Ｖｉｅｗクラスにコードを集約し、オブジェックト指向の継承やオーバーライドを使って、類似のコードを抽象化することによって、コーディングの作業を軽減することができます。
次にオブジェクト指向でないコード（従来の書き方）とＭＶＣモデルを使ったオブジェクト指向のコードを比較してみることにします。
//サブクエリー
$args = array(
//条件の記述
);
//WP_Query
$the_query = new WP_Query($args) ;
//サブループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//表示の記述
the_title() ;
echo "<br>\n" ;
}
}//endifclass Controller
{
public function __construct($var){
$par =(object)$var;
$user = new Model($args);
または
$user = new ViewPost() ;
$user->format();
}
}
class Model
{
public function __construct($var)
{
//サブクエリー
$args = array(
//条件の記述
);
//WP_Query
$the_query = new WP_Query($args) ;
//サブループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//Viewクラスの呼び出し
$user = new ViewPost() ;
$user->format();
}
}//endif
}//endfunction
}//endclass
class View
{
public function __format()
}//endfunction
}//endclass
class ViewPost extends View
{
public function __format()
//表示
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclass//呼び出す側
$args = arry(
//条件の記述
);
$user = new Controller($args);サブクエリー（WP_Query）とサブループは、書き方のパータンがたくさんあり、すべてのパターンを覚えるのは大変なことです。そのため、書くたびにコードディングミスが起こり、完成するまでに時間がかかります。当然のことながら、これをメンテする作業も大変です。
これに対し、オブジェクト指向で書かれたコードは、呼び出す側は、フィルタリング条件を記述してクラスを呼び出すだけで、サブクエリー～サブループ～表示までの処理が完了します。
もちろん、呼び出される側のクラスとして、Controllerクラス、Modelクラス、Viewクラスがあり、これらのコードを合わせると、オブジェクト指向を使った場合の方がコードの量は格段に増えます。しかし、これらのクラスは、再利用することを前提に作成していますので、次回からは、呼び出す側の記述のみで済みます。
また、クラスには、スーパークラス（親クラス）の機能を継承して、差分の部分のみをサブクラス（子クラス）に記述することができ、メンテの効率が向上します。
WordPressの基本の理解で最も重要なことは、構造の理解です。理解するためには、図で示すことが最も近道です。
WordPressは、クエリーとループから成り立っています。
クエリー：データの検索
ループ：データの表示
WordPressの入門時に一番初めに理解すべきことは、メインクエリーとメインループですが、メインクエリーは「WordPressコア」と呼ばれる基本部分に包含されていて、通常はカスタマイズできないということです。（メインクエリーをカスタマイズするには、「フック」という特別なカスタマイズ方法を用います。）
WordPressのカスタマイズを理解の第一歩は、テーマの中にあるメインループを見つけ出し、ループの中の記述を自分の好みに合うようにカスタマイズし、実感をつかむことです。
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// この部分が記述（カスタマイズ）部分
//
} // end while
} // end if
?>上記のコードのif ( have_posts() )から} // end ifまでがメインループの記述で、その内側の部分がカスタマイズ部分で、ここに、たとえば、the_title();と書けば、投稿のタイトルが表示され、the_content();と書けば、投稿の本文が表示されるわけです。
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//記述（カスタマイズ）部分
the_title();
the_content();
//
} // end while
} // end if
?>もう一つ重要なポイントは、このメインループが実行される手前の段階で、「WordPressコア」の中のメインクエリーが、既に実行を完了しており、その結果がオブジェクトと呼ばれるデータの塊に保持されているということです。この塊から具体的なデータを抜き出す命令が、the_title();やthe_content();です。このとき、データは複数件あるので、これをメインループで回して表示しています。
WordPressのカスタマイズで頻繁に出てくるサブループについては、上記の概念図に併記すると理解が深まります。
メインクエリーが「WordPressコア」の中にあって、自動的に実行されるものであるのに対し、サブクエリーは、自分でコードを書く（カスタマイズする）ことが必要ですが、行っている処理は、メインクエリーと同じです。（両方ともWP_Queryが実行されている同じ処理。）
サブクエリーの結果は、オブジェクトに出力され、それを表示するのがサブループです。メインループとサブループの書き方は、ほぼ同じです。
上記の概念図では、左から右へ「クエリー」「ループ」「表示」と情報が転送され、全体としては、上から下へ「メイン」「サブ」と処理が進んでいくことを図示しています。
これまで、WP_Queryのカスタマイズ事例※1※2※3を示してきましたが、今回は、このうちのDestinationパターン※1とSourceパターン※2の事例を統合した万能型サブクエリーについて解説します。
$args = array(
'model' => '37694',
'view' => '37694',
'pattern_m' => 'Sour',
'entity_from' => 'Term',
'entity_to' => 'Post',
'post_type' => 'post',
'tax' => array('region','genre'),//タクソノミー名：地域、ジャンル
'field_value' => array('9790','10274'), //タクソノミーの値：中央区、商店街
);
$user = new Controller37694($args) ;class Controller37694
{
public function __construct($args)
{
//////配列をオブジェクトに変換
$par =(object)$args;
//////Modelメソッドの呼び出し
$model_name = 'Model'.$par->model ;
$model_obj = new $model_name($par) ;
}//endfunction
}//endclassclass Model37694
{
public function __construct($par)
{
//参照パターン毎に$argsの値を設定するため、分岐させるための$args_nameの値を設定。
$args_name = $par->pattern_m.$par->entity_from.$par->entity_to ;
if ($args_name == 'SourTermPost'){
$query_name = 'tax_query' ;
}elseif($args_name == 'SourPostPost'){
$query_name = 'meta_query' ;
}
$args = array(
'order' => $par->order,
'orderby' => $par->orderby,
'include' => $par->foreign_key,//タクソノミー用DPT
'hide_empty' => false,//Listのとき要DPT
'meta_key' => $par->meta_key,//DPP
'post_type' => $par->post_type,//DPP
'post__in' => $par->foreign_key,//DPP
'posts_per_page' => -1,//全行表示DPP
$query_name => array(
'relation' => $par->orand ,
array(
'taxonomy' => $par->tax[0],
'field' => 'term_id',//STP
'terms' => $par->field_value[0],//STP
'key' => $par->field[0],//SPP
'value' => $par->field_value[0],//SPP
),
array(
'taxonomy' => $par->tax[1],
'field' => 'term_id',//STP
'terms' => $par->field_value[1],//STP
'key' => $par->field[1],//SPP
'value' => $par->field_value[1],//SPP
)
)
);
if ($args_name == 'DestPostTerm'){
$the_query = get_terms($par->tax, $args);
}else{
$the_query = new WP_Query($args) ;
}
////////////////////表示ループ
//Viewクラスのクラス名を設定
$view_name = 'View' . $par->view;
$num = 0 ;
//表示するエンティティがpostの場合
if ($par->entity_to == 'Post'){
//while文でのループ処理
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$num = $loopcounter++ +1;
if ($num == '1' && !empty($par->title)){
echo '<h2>' . $par->title . '</h2>' ;//タイトルを表示
}
//カウントアップした番号$numをオブジェクト$parに設定
$par->num = $num ;
//Viewオブジェクトをインスタンス化
$view_obj = new $view_name($par);
}// end while
wp_reset_postdata();
}//end if
//表示するエンティティがtermの場合
}elseif ($par->entity_to == 'Term'){
echo '<h2>' . $par->title . '</h2>' ;
//foreach文でのループ処理
foreach ($the_query as $term){
$num = $loopcounter++ +1;
//カウントアップした番号$numと表示するオブジェクト$termをオブジェクト$parに設定
$par->term = $term ;
//Viewオブジェクトをインスタンス化
$view_obj = new $view_name($par);
}//endforeach
}else{
}//endif
}//endfunction
}//endclassclass View37694
{
public function __construct($par)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclass前回※1 「投稿のカスタムフィールドに関連付けられた投稿の表示」で、ブログ記事に文献の情報を関連付ける事例を紹介しました。（実際の画面サンプルはこちらです。）
この例では、「第八章 月島の商業」が関連付けられていますが、この上の階層である「第三編 明治以降の月島」と最上位階層である書籍名の「月島発展史」を併せて表示しています。
カスタム投稿タイプ「参考文献」は、親子関係を持った木（ツリー）構造になっていて、最初に関連付けされた「第八章 月島の商業」をキーに、祖先（父母→祖父母）の階層を表示しています。
リスト37639は、カスタム投稿タイプの祖先を表示するコードです。
カスタム投稿タイプ「参考文献」の全体を一覧表示する場合は、階層のトップのIDを指定し、それをキーに子孫の階層を上から順番に検索して表示します。（実際の画面サンプルはこちらです。）
リスト37639は、投稿の子孫を表示するコードです。WordPressのテンプレートタグ「get posts」を使って子孫を検索しています。
木（ツリー）構造を持つタクソノミーの全体を表示する事例を紹介します。（実際の画面サンプルはこちらです。）
たとえば「中央区」を選択した場合、祖先に東京都、子孫に月島３丁目があります。これらの表示をクリックするとどちらにでも移動できるようにすると便利です。また、自分が現在どの階層にいるかも解りやすくなります。
リスト36732は、タクソノミーの祖先と子孫の両方を表示する事例です。現世代の「中央区」を指定すると、まずその先祖を表示し、次に子孫を表示します。
$par2->gen_id = '18661';
$par2->post_type = 'reference' ;
$user = new Model37639() ;
$user->generation($par2) ;class Model37639 extends WP_Query
{
public function generation($par2)
{
$ance = array() ;
$ance = get_ancestors($par2->gen_id, $par2->post_type) ;
//$cnt = count($ance);
$ance = array_reverse($ance) ;
$k = 0 ;
While ( !empty($ance[$k])) {
$par2->id = $ance[$k] ;
$par2->k = $k ;
$View_obj = new View37639a($par2) ;
$k = $k +1 ;
}//endwhile
}//endfunction
}//endclass
class View37639a
{
public function __construct($par2)
{
$postslist = get_post($par2->id) ;
setup_postdata($postslist);
echo $postslist->post_title."<br>\n" ;
}//endfunction
}//endclass$par2->gen_id = '18444';
$par2->post_type = 'reference' ;
echo "<br>\n".'ID: '.$par2->gen_id."<br>\n" ;
$user = new Model37642() ;
$user->generation($par2) ;class Model37642 extends WP_Query
{
public function __construct()
{
//コンストラクタは、なぜ今回使わないのか。
}//endfunction
public function generation($par2)
{
//現世代を表示
echo '現世代'."<br>\n" ;
$par2->id = $par2->gen_id ;
$par2->k = 0 ;
$View_obj = new View37642a($par2) ;
//子孫を表示
echo '子孫'."<br>\n" ;
$this->children($par2) ;
}
public function children($par2)
{
//抽出処理
$k = $par2->k ;
$args = array(
'post_type' => $par2->post_type ,
'post_parent' => $par2->id ,
'orderby' => 'menu_order',
'order' => 'ASC',
);
$the_query = get_posts($args) ;
if(empty($the_query)){
return ;
}
//ループ処理
$k = $k +1 ;
foreach($the_query as $query){
$par2->id = $query->ID ;
$par2->k = $k ;
$View_obj = new View37642a($par2) ;
$this->children($par2) ;//再帰処理。
}
}//endfunction
}//endclass
class View37642a
{
public function __construct($par2)
{
$postslist = get_post($par2->id) ;
setup_postdata($postslist);
echo 'k='.$par2->k.' '.$par2->id ;
echo $postslist->post_title."<br>\n" ;
}//endfunction
}//endclass$par2->gen_id = '9790';
$par2->entity_name = 'region' ;
echo "<br>\n".'ID: '.$par2->gen_id."<br>\n" ;
$user = new Model36732() ;
$user->generation($par2) ;class Model36732//計算するクラス。
{
public function __construct()
{
//コンストラクタは、なぜ今回使わないのか。
}//endfunction
public function generation($par2)
{
$ance = array() ;
$ance = get_ancestors($par2->gen_id, $par2->entity_name) ;
//$cnt = count($ance);
$ance = array_reverse($ance) ;
//////先祖が存在しない場合、$anceは中身は空なので、次の処理へ進む。
//先祖を表示。
echo '先祖'."<br>\n" ;
$k = 0 ;
While ( !empty($ance[$k])) {
$par2->id = $ance[$k] ;
$par2->k = $k ;
$View_obj = new View36732a($par2) ;
$k = $k +1 ;
}//endwhile
//現世代を表示
echo '現世代'."<br>\n" ;
$par2->id = $par2->gen_id ;
$par2->k = $k ;
$View_obj = new View36732a($par2) ;
//子孫を表示
echo '子孫'."<br>\n" ;
$this->children($par2) ;
}
public function children($par2)
{
//抽出処理
$k = $par2->k ;
$args = array(
'parent' => $par2->id ,
);
$the_query = get_terms($par2->entity_name, $args) ;
if(empty($the_query)){
return ;
}
//ループ処理
$k = $k +1 ;
foreach($the_query as $term){
$par2->id = $term->term_id ;
$par2->term = $term ;//$par2に追加。
$par2->k = $k ;//$par2に追加。
$View_obj = new View36732b($par2) ;
$this->children($par2) ;//再帰処理。
}
}//endfunction
}//endclass
class View36732a//表示するクラス。
{
public function __construct($par2)
{
$term = get_term($par2->id , $par2->entity_name ) ;
echo 'k='.$par2->k.' '.$par2->id ;
echo $term->name."<br>\n" ;
}//endfunction
}//endclass
class View36732b//表示するクラス。
{
public function __construct($par2)
{
echo 'k='.$par2->k.' '.$par2->id ;
echo $par2->term->name."<br>\n" ;
}//endfunction
}//endclassリスト37167は、meta_queryの事例。
リスト37179は、tax_queryの事例です。
class code37167
{
public function __construct()
{
$args = array(
'model' => '37167',
'view' => '37167',
'post_type' => 'post',
'field' => array('ref'),//参考文献
'field_value' => array('18661'),//第八章 月島の商業
);
$user = new Controller37167($args) ;
}//endfunction
}//endclass
class Controller37167
{
public function __construct($args)
{
//////配列をオブジェクトに変換
$par =(object)$args;
//////Modelメソッドの呼び出し
$model_name = 'Model'.$par->model ;
$model_obj = new $model_name($par) ;
}//endfunction
}//endclass
class Model37167
{
public function __construct($par)
{
$args = array(
'post_type' => $par->post_type,
'meta_query' => array(
'relation' => 'OR',
array(
'key' => $par->field[0],
'value' => $par->field_value[0],
)
)
);
$the_query = new WP_Query($args) ;
//ループ～表示処理（Viewクラス）の呼び出し。
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$view_name = 'View'.$par->view ;
$view_obj = new $view_name($par) ;
}
}//endif
}//endfunction
}//endclass
class View37167
{
public function __construct($par)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclassclass code37179
{
public function __construct()
{
$args = array(
'model' => '37179',
'view' => '37179',
'tax' => array('region','genre'),//タクソノミー名：地域、ジャンル
'field_value' => array('9790','10274'), //タクソノミーの値：中央区、商店街
'post_type' => 'post',//投稿タイプ：ブログ記事
);
$user = new Controller37179($args) ;
}//endfunction
}//endclass
class Controller37179
{
public function __construct($args)
{
//////配列をオブジェクトに変換
$par =(object)$args;
//////Modelクラスの呼び出し
$model_name = 'Model'.$par->model ;
$model_obj = new $model_name($par) ;
}//endfunction
}//endclass
class Model37179//投稿を表示
{
public function __construct($par)
{
$args = array(
'post_type' => $par->post_type,
'tax_query' => array(
'relation' => 'OR',
array(
'taxonomy' => $par->tax[0],
'field' => 'term_id',
'terms' => $par->field_value[0],
),
array(
'taxonomy' => $par->tax[1],
'field' => 'term_id',
'terms' => $par->field_value[1],
)
)
);
$the_query = new WP_Query($args) ;
//ループ～表示処理（Viewクラス）の呼び出し。
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$view_name = 'View'.$par->view ;
$view_obj = new $view_name($par) ;
}
}//endif
}//endfunction
}//endclass
class View37179
{
public function __construct($par)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclass今回は、投稿データに関連付けられたタクソノミーや別の投稿を表示する方法について紹介します。
WP_Queryは、あるデータの集合（これをエンティティと呼びます）の外部キーから別のエンティティの主キーを検索しデータ群（オブジェクト）取得する仕組み（クラス）です。
WordPressの場合のエンティティは、「投稿タイプ」「カスタム投稿」「カテゴリー」「ターム」「カスタムタクソノミー」などのデータの集合です。これらのエンティティ同士は、主キーと外部キーで関連付けられます。
下図は、ブログ投稿の外部キーにカスタムタクソノミー「ジャンル」が関連づけられている場合を図示したものです。
リスト37209は、投稿のカスタムフィールドに関連付けられた投稿の表示の事例です。
ブログ記事のような投稿データに、別の投稿データを関連づけて表示したい場合があります。
リスト37211は、投稿に関連付けられたタクソノミーの表示の事例です。
ブログ記事のような投稿データには、タクソノミー（カテゴリー、タグ）を関連づけて記事の分類分けをしますが、このとき、ブログ記事のタイトルの上部や本文の末尾などにタクソノミーを表示したい場合があります。
class code37209
{
public function __construct()
{
$user = new Model37209() ;
}//endfunction
}//endclass
class Model37209 extends WP_Query
{
public function __construct()
{
$args = array(
'post_type' => 'post',
'post__in' => array('18348'),//IDを配列で指定。
);
$the_query = new WP_Query($args) ;
//ループ～表示処理（Viewクラス）の呼び出し。
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$view_obj = new View37209($par) ;
}
}//endif
}//endfunction
}//endclass
class View37209
{
public function __construct($par)//$parはいらない。
{
the_title() ;
echo "<br>\n" ;
//次の処理の準備
//投稿に関連付けられているカスタムフィールドのIDを取得する。
$myposts = get_post_meta(get_the_ID(), 'ref', false) ;//'ref'を指定。
if (!empty($myposts)){
$par->foreign_key = $myposts ;
$user = new Model37209a($par) ;
}else{
return ;
}
}//endfunction
}//endclass
class Model37209a
{
public function __construct($par)
{
$args1 = array(
'post__in' => $par->foreign_key,//配列をそのまま記述
'post_type' => 'reference',//DPP
);
$the_query = new WP_Query($args1) ;//WP_Query
//ループ～表示処理（Viewクラス）の呼び出し。
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$view_obj = new View37209a($par) ;
}
}//endif
}//endfunction
}//endclass
class View37209a
{
public function __construct($par)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclassclass code37211
{
public function __construct()
{
$user = new Model37211() ;
}//endfunction
}//endclass
class Model37211
{
public function __construct()
{
$args = array(
'post_type' => 'post',
'post__in' => array('18348'),//IDを配列で指定。
);
$the_query = new WP_Query($args) ;
//ループ～表示処理（Viewクラス）の呼び出し。
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
$view_obj = new View37211($par) ;
}
}//endif
}//endfunction
}//endclass
class View37211
{
public function __construct($par)
{
the_title() ;
echo "<br>\n" ;
//次の処理の準備
//投稿に関連付けられているタクソノミーのIDを取得する。
$myterms = wp_get_object_terms(get_the_ID(), 'region');
if (!empty($myterms)){
$foreign_key = array() ;
foreach ($myterms as $post){
array_push( $foreign_key , $post->term_id);
}
}else{
return ;
}//endif
$par->foreign_key = $foreign_key ;
$user = new Model37211a($par) ;
}//endfunction
}//endclass
class Model37211a
{
public function __construct($par)
{
$args = array(
'include' => $par->foreign_key,
);
$the_query = get_terms('region', $args) ;
//ループ～表示処理（Viewクラス）の呼び出し。
foreach ($the_query as $term){
$par->term = $term ;
$view_obj = new View37211a($par) ;
}
}//endfunction
}//endclass
class View37211a
{
public function __construct($par)
{
echo $par->term->name."<br>\n" ;
}//endfunction
}//endclassサブクラスにおいてWP_Queryを使うことのメリットは、拡張（継承）してカスタムクラスを作れることです。Rakhitha Nimesh Ratnayake（ラーキサ・ニーメシュ・ラーネヤク）は、その著書「WordPressによるWebアプリケーション開発」の中で、WP_Queryクラスの継承の用例を示しています。＊1
リスト37188は、ラーネヤク氏が示した用例を本書のテーマに即してアレンジしたものです。
通常、WP_Queryを使うときは、次のように配列にすべてのフィルタリング条件を記述しなければなりませんが、リスト37188では、Modelクラスの中にこの記述を書いているので、呼び出す側は、１行のコードのみで済みます。
たしかに、同じフィルタリング条件を何度も繰り返し使う場合はこの方法が有効であり、クラスを継承すれば、少し異なる条件の場合も含めて抽象化できるかもしれません。
しかし、あらゆるパターンのサブクエリー（投稿の場合、タームの場合、親子の場合）と表示をすべて網羅的に抽象化するためには、もう一工夫必要です。
リスト36618は、リスト37188をアレンジし、この課題を解決するための方法です。
呼び出す側に、フィルタリング条件を羅列しますが、そこには値を直接記述します。これを受け取ったModelクラスは、その値をWP_Queryのフィルタリング条件にあてはめます。
この方法のメリットは、面倒なWP_Queryの記述から解放されるということです。
さらに、表示するViewクラスの名称なども呼び出す側の条件に加えることにより、サブクエリーから表示までを一貫して抽象化することができそうです。
$the_query = new Model37188();
//ループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//Viewの記述
$view_obj = new View37188($par2) ;
}
wp_reset_postdata();
}//endifclass Model37188 extends WP_Query
{
public function __construct( $args = array() )
{
//クエリー
$args = wp_parse_args( $args, array(
'post_type' => 'glossary',
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'gloss_type',
'value' => '9851',
),
array(
'key' => 'region',
'value' => '9790',
)
)
)
);
parent::__construct($args) ;
}
}class View37188
{
public function __construct($par2)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclass$args = array(
'post_type' => 'glossary',
'key' => array('gloss_type','region'),
'value' => array('9851','9790')
);
$query = new Model36618($args);class Model36618 extends WP_Query
{
public function __construct($var)
{
//配列をオブジエクトに変換。
$par =(object)$var;
//クエリー
$args = array(
'post_type' => $par->post_type,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => $par->key[0],
'value' => $par->value[0],
),
array(
'key' => $par->key[1],
'value' => $par->value[1],
)
)
);
$the_query = new WP_Query($args) ;
//ループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//Viewの記述
$view_obj = new View36618($par2) ;
}
wp_reset_postdata();
}//endif
}
}
class View36618
{
public function __construct($par2)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclass「Leaflet」は、Webサイトに地図を載せる場合に利用するツールです。
「Leaflet」はフリーソフトでありながら、細かなオプションが用意されているのが特徴です。
リスト1 は、背景となる地図（ベース地図）を表示するコードです。
WordPressにLeafletを埋め込む場合は、事前準備として、function.phpに、Leafletを読み込むコードを記述します。
まず、事前準備として、次のコードを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>古地図をWEB地図上に表示するためには、スキャナーやデジタルカメラなどを使って紙の地図をデジタル化し、それをWEB地図上に貼り付けるわけですが、このとき、
（１）古地図に緯度・経度の情報を付加する作業
（２）古地図を適切な形に整形して (ゆがめて) 現実の地図の上に置く作業
が必要です。この作業のことをジオリファレンスと言います。
「日本版MapWarper」は、このジオリファレンスを簡単に行うことができるツール（ジオリファレンサー）です。
オープンソース・ソフトウェアなので、誰でも無料で利用でき、公開した地図（されている地図）は、誰でも閲覧でき、ダウンロード利用できます。
今回は、鯖江市が公開している古地図データ＊1 を日本版MapWarperにアップロードして、ジオリファレンスを行います。
日本版MapWarperに会員登録し、ログインし、メニューの「地図をアップロードする」を使って古地図をアップロードします。
次に、「整形」の機能を使って、古地図を変形・伸縮させて現実の地図の座標に合うよう整形（ジオリファレンス）します。画面の左側が古地図、右側が現実の地図です。大正時代の地図は現在の地図にぴったりと重なりませんので、ここで補正を行います。両方の地図の一致する場所をダブルクリックして基準点を登録します。今回は、１１か所の基準点を登録しました。①から⑪までの基準点が図示されています。
最後に「切り抜き」の機能を使って古地図の余分な部分を取り除くと完成です。
「プレビュー」のタブに切り換えると、現実の地図の上に古地図が重ねられた状態が確認できます。＊2
前回※1、get_template_part()に引数を渡す方法を紹介しましたが、この方法では、
（１）呼び出す側にset_query_varと呼び出される側にget_query_varをその都度書かなければならないこと。
（２）PHPファイル別々に作成するので、見通しが悪くなること。
ことが、課題です。
そこで、今回は、これに代わる方法として、classを呼び出す方法を紹介します。
$args = array(
'post_type' => 'glossary',
'key' => array('gloss_type','region'),
'value' => array('9851','9790')
);
$query = new Model36618($args);class Model36618 extends WP_Query
{
public function __construct($var)
{
//配列をオブジエクトに変換。
$par =(object)$var;
//クエリー
$args = array(
'post_type' => $par->post_type,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => $par->key[0],
'value' => $par->value[0],
),
array(
'key' => $par->key[1],
'value' => $par->value[1],
)
)
);
$the_query = new WP_Query($args) ;
//ループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//Viewの記述
$view_obj = new View36618($par2) ;
}
wp_reset_postdata();
}//endif
}
}
class View36618
{
public function __construct($par2)
{
the_title() ;
echo "<br>\n" ;
}//endfunction
}//endclassWordPressのカスタマイズの規模が大きくなると、８割～９割は同じようなPHPのコードを何度も書いていることがあります。このようなときは、別ファイルを作成してソースコードを分割し、コードを再利用することにします。
分割した別ファイルは、get_template_part()によって呼び出しますが、このとき、再利用の度合いを高めるために引数を渡したい場合があります。
WordPressCodexには、テンプレートに変数を渡す方法が解説されています。
今回は、一例として、引数taxと引数termを渡して、テンプレート側サブクエリーを実行する例を紹介します。
$args = array(
'tax' => 'region',
'term' => '9789',
);
set_query_var( 'val', $args) ;
get_template_part( 'template-parts/sample/content', 'sample' ); <?php
//引数を受け取り
$var = get_query_var('val');
$par =(object)$var;
//サブクエリー
$args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => $par->tax,
'field' => 'term_id',
'terms' => $par->term,
)
)
);
$the_query = new WP_Query($args) ;
//サブループ
if($the_query->have_posts()){
While($the_query->have_posts()){
$the_query->the_post();
//表示
the_title() ;
echo "<br>\n" ;
}
}//endif ◆新型コロナウイルスの感染拡大に伴い、当面の間、散歩ブログの更新を休止致します。
◆ブログトップのＵＲＬを下記の通り変更しました。
ご迷惑をおかけしますが、よろしくお願い致します。
（変更前）http://kokontouzai.jp/sanpo
（変更後）http://kokontouzai.jp/blog/sanpo
◆新たに、ＩＴに関するブログの掲載を始めました。
（ＵＲＬ）http://kokontouzai.jp/blog/it
茂原駅前に建つ駅前ビル。１階は、飲食店街になっています。
昔ながらの洋食屋。
店内は、バーのような雰囲気。
ナポリタンとビールを注文。
房総横断道路から北へ入った通り。
銭湯の桜湯があります。
ペンキで書かれた「桜湯」の文字
傍らには、桜の木。屋号の由来の木でしょうか。
房総横断道路沿い。
交差点脇に１軒屋の建物。
サロン（風俗店）と軽食が併設された店舗です。
現在は休業している模様です。
今回は、茂原（千葉県茂原市）の町並みを散歩します。
茂原の榎町商店街と駅前通り商店街は1970年代か ら1980年代に最盛期を迎えました。＊1
現在も当時からの商店が建ち並んでいます。
商店街は500mほど続きます。東側の通りにも看板建築が残っています。
住居部分と一体となったお菓子屋さん。
佐竹商店街の東側（小島一丁目）の清洲橋通り。
三軒長屋の商店。色は３色です。
２階部分。
後方に、３階建て部分が見えます。
佐竹商店街から西へ入った路地。
看板建築の建物が残っています。
銅板建築。
隣のトタン建築の物干し台。
佐竹商店街（台東３丁目）は、江戸時代に佐竹藩の屋敷があたことから名づけられた商店街で、南北300mに及ぶ長大な商店街です。
商店街にある「吉田屋」。
「モスリン店」※1 の看板が掲げられています。」
竹久夢二の作品。
入谷の交差点。遠くには東京スカイツリーが見えます（写真左奥）。
北上野側の交差点の角のビルの２階部分に、「モスリン店」と書かれています。
「モスリン（織物）」という呼び名は、毛斯綸紡織（株）（1896（明治29）年設立）の社名※1 や大阪の「モスリン大橋」という橋の名前※2 に使われました。明治時代の殖産興業政策を連想させる呼び名です。
歩道橋から見たモスリン店。
上野３丁目のビル街。
銭湯の燕湯は、国の登録有形文化財に指定されている貴重な銭湯です。
ビルの１階部分が宮型銭湯となっていますが、建物全体はビルになっている独特の建築です。
銭湯の裏側の通り。
上野アメ横の東側の通りにある玩具問屋「上野屋」。
創業は昭和25年（1950年）です。＊1
店舗の前面には、マスク類が所狭しと陳列されています。宴会などで使用するおもちゃ類を販売しているようです。
看板には、「流行・教材・季節・景品・サービス・花火 各種玩具」「玩具問屋」と書かれています。
２階部分には懐かしいアニメなどのポスター類が貼られています。
ボビーオロゴン、美川憲一（コロッケ）。
東上野三丁目のビル街。通り沿いには、仏壇店が連なっています。（写真の左右の店舗はいずれも仏壇店です。）
通りを南へ入ったところにあるラブホテル。
モダンなデザインの入口。
反対側（南側）から。
今回は、上野（東京都台東区）の町並みを散歩します。
ＪＲ上野駅の東側（東上野三丁目）のビルの地下１階にある純喫茶「古城」。
入口の階段のステンドグラスには、白馬の騎士が描かれています。
店内は、荘厳な雰囲気です。
ココアを注文。
京成電鉄幕張駅前。線路沿いの通りに中華料理店があります。
「町中華」という言葉がぴったりくるような中華料理「松楽」。
テーブル席３つとカウンター席。
チャーハンとビールを注文。チャーハンには大きめのチャーシューがたくさん入っていて、風味と歯ごたえが充分です。
京成電鉄幕張駅近くの線路沿い。舗装されていない道の先。
美容室「ローズ」の看板
木造家屋の美容室です。
「パーマ」の大看板は、遠くからでも見えます。
幕張駅の北東側。徒歩５分のところにある銭湯の鈴の湯。
昔ながらの銭湯です。
銭湯には、破風屋根の軒下に細かな細工の懸魚（けぎょ）を見かけることがありますが、鈴の湯の場合は「鈴」のオブジェです。
「鈴の湯」と書かれた煙突。
今回は、幕張（千葉県千葉市花見川区）の町並みを散歩します。
ＪＲ幕張本郷駅の南側。京葉道路幕張インターの東側にラブホテル街に、宇宙船の形をしたラブホテルがあります。
正面入口。
入口のゲートには、ロケットを模したオブジェ。
宇宙船の丸窓。
新小岩駅南口の平和橋通りから西へ入る小路。小路の先に飲み屋のほ灯が見えます。
立ち飲み屋「わか」。今年で３０周年（暖簾に書いてありました。）だそうです。
周囲は、小規模な飲み屋街になっています。
名物の刺身盛り合わせとホッピーを注文。
江戸川区松島の住宅街の中にある銭湯の「旭湯」。
都内ではめずらしい、昔ながらの銭湯です。
中庭には金魚が泳いでいます。
建物の南側。
今回は、新小岩（東京都葛飾区）の町並みを散歩します。
新小岩二丁目の住宅街。
児童公園の隣に大ゲートが出現します。
住宅街の中のラブホテル。
L字型の小路を抜けると反対側にもゲートがあります。
鶯谷駅南口の前から言問い通りへ向かう坂道の下。
老舗とんかつ店「とん平」があります。開業は戦後だそうです。
カウンター席だけのこじんまりとした店です。とんかつはロースカツとヒレカツのみ。
ロースカツとライス、ビールを注文。
下谷１丁目の住宅街。
交差点の角に、古いコンクリート製の建物があります。１階には店舗。同じビルに質屋の看板が残っています。
建物の側面。
側面の窓の配置から、３階建ての建物であることが解ります。
鶯谷駅前の「ダンスホール新世紀」。
隣のビルの屋上に残る「銀星 PLAYSPOT GINSEI」のレトロ大看板。パチンコ店か何かだったのでしょうか。現在、「銀星」の店舗はビル内には見当たりません。
１Ｆにある歌謡曲カフェ。
鶯谷駅からの遠望。
鶯谷のラブホテル街は、駅前の言問い通りの南側が中心ですが、言問い通りの北側にも大規模なホテル街が立地しています。
敷地内に祠のあるラブホテル（写真中央に祠の屋根が見えます。）
メインの通り。
西側には、高層階のホテルが建ち並んでいます。
今回は、鶯谷（東京都台東区）の町並みを散歩します。
鶯谷駅南口の陸橋を渡った線路沿いに、木造三階建ての建物が連なっています。
飲み屋街。
スナックの入口。
シスタービル。
浅草橋５丁目にある「すし栄」。
握り寿司とビールを注文。
かつての「すし栄」は銀座数店舗あったそうです。
ピンクの看板が目印です。地元の方の話によると、かつては「ピンク寿司」と呼ばれ親しまれていたそうです。
蔵前橋通りの南側。浅草橋５丁目に、銭湯の鶴の湯があります。塀や建物の壁面は鮮やかな水色に塗られています。
鶴が彫りこまれた懸魚は見事です。
料亭の建物のような意匠。
入口。
レトロな建物が残っているおかず横丁。
理容室（バーバー）。
レトロなパーマ屋さん。
交差点の角の赤い建物の美容室。
浅草橋の北側。鳥越１丁目のおかず横丁。
看板建築の商店の建物など、昔の商店街の雰囲気が残っています。
銅板が貼れた重厚な感じの看板建築。
裏側からの眺め。
かつての花街があった柳橋一丁目。
篠塚稲荷神社の隣に、老舗やきとり店があります。
釜めしと焼き鳥。
焼き鳥定食と日本酒を注文。
かつての柳橋の花街は、墨田川沿いにありました。
「昭和３７年の柳橋マップ」＊1 によると、この通りの東側（写真左側）に、「料亭深川亭」「料亭子安」「料亭卯の木」「料亭はやし」「料亭津久松」「料亭柳水」がありました。
佃煮屋の「小松屋」のマーク
反対側（南側）から。
墨田川からの遠望。現在はビルが建ち並んでいます。
今回は浅草橋（東京都台東区）の町並みを散歩します。
かつての花街だった柳橋の路地に老舗寿司店が営業中です。
建物は道を挟んで、本店は２棟あります。
創業は、文化５年。
風情のある路地。
銀座線稲荷町駅近く。
銭湯の寿湯。
本格的な銭湯ですが、内部は改装されている部分もあって快適です。
入口。
東上野五丁目。繁華街からは離れた場所です。
駐車場の脇に設置された犬糞看板。
ブロック塀は、犬がおしっこをかけやすい場所です。
非常識。犬のくそ！
上野６丁目の繁華街にはレンタルルームが数軒点在しています。最近、繁華街で多く見かける業態です。
１階がラーメン店。２階がレンタルルーム。
赤い看板のレンタルルーム
英語と中国語の看板。
上野公園通りを北へ進んだところにある老舗洋食店の「とうかい」。
洋食店のメニューはひとおり揃っています。
店内は質素ですが、非常に落ち着きます。
オムライスとビールを注文。オムライスは小ぶりながらも味は絶品でした。
下町風俗資料館の２階の特別展示（令和元年１２月７日～令和２年２月２４日）は、資料館が所蔵する「江戸風俗人形」の展示です。
吉原の妓楼「三浦屋」を再現したものです。檜細工師・三浦宏氏による建物（模型）は３０年以上も前に制作されたものだそうです。＊1
内所」と呼ばれる、妓楼の楼主の居間。
格子を組んだ「張見世」。
花魁。
上野公園にある台東区下町風俗資料館。
１階は大正時代の下町の町並みを再現した常設展示です。長屋の井戸端が再現されています。
物干し竿。
駄菓子屋の店内。
今回は、上野（東京都台東区）の町並みを散歩します。
ＪＲ上野駅ガード下にあるカレー専門店「クラウン」。王冠のマークが目印です。
開業当時の上野の写真なども飾られていて、歴史を感じます。
自販機で食券を買います。大盛りはダブルまで。チキンカレーはチキンカツではありません。
カツカレー大盛りにさらに大盛り券（１枚）とビールを注文。満足のボリュームでした。
眞金町１丁目の「よこはまばし入口」交差点の角にある酔来軒。
広東料理の店です。
名物の酔来丼は400円です。
酔来丼とビールを注文。
酔来丼は、チャーシューとメンマ、モヤシ、刻みネギがのっていて、からしを効かせた特性のタレをかけて食べます。
真金町の南側の三吉橋商店街。中村川に架かる三吉橋の上には、首都高速３号線が通っています。
「三吉演芸場」は、昭和5年12月25日の創業で、現存する演芸場では横浜最古です。
昭和初期、コークス製造業し、その熱を有効に使うために風呂屋を手掛けましたが、法令に規制されるようになり、劇場として利用することに着目しました。
入口。
真金町２丁目の旧遊廓街の北側の通り。中央に緑地帯を持つ道幅の広い道路です。
ラブホテルの建物。
入口には、フリータイムとＳＴＡＹの２つの看板。
古い看板。
今回は、真金町（神奈川県南区）の町並みを散歩します。
横浜橋交差点の東側に。スナックが建ち並ぶ通りがあります。
１軒屋のスナック。
３軒長屋のスナック店。
２軒が並ぶスナック街。
福富町に隣接する吉田町。「野毛おでん」のある通り。この通りの向こう側は伊勢佐木モールです。
老舗天ぷら店。
「登良屋」の暖簾
天ぷら定食と日本酒を注文。
今回は、福富町（神奈川県横浜市中区）の町並みを散歩します。福富町の商店街には、ハングル語の看板が密集しています。
韓国料理の店。
小料理店の看板もハングル語です。
美容室。
伊勢佐木通りの隣にある親不孝通りは、現在は風俗街となっていますが、その中に古いアパートが残っています。
玄関部分は、黄緑色のタイルで装飾されています。
建物側面のタイル。
黄緑色とピンク。
曙町４丁目の四つ角の古い住宅。
建物の角に目的不明のタイルの柱があります。昔、お風呂場などでよく使われていた丸玉石モザイクのタイプです。
ほぼ正方形の四角柱。
かなりの年数が経過していると思われますが、タイルの輝きは失われていません。
曙町の親不孝通り。
２階部分がレトロな感じです。
赤線建物を思わせるアール形状の庇。
白い円柱。
曙町の親不孝通りを西へ進んだ伊勢佐木町六丁目。
昔は左側にも飲食店が建ち並んでいました。※1
現在は、片側のみが残っています。
以前は、この写真の右手前のあたりに、黒い円柱を持つ建物が残っていました。※1
伊勢佐木モールのピアゴイセザキ店の角を曲がった先。
ここにある駐車場は、大衆酒場「根岸家」があった場所です。
「根岸屋」は、昭和21年5月、伊勢佐木町で営業を始めた大衆酒場でした。終戦後、 進駐軍のカマボコ兵舎からドラム缶詰で吐き出される残飯の中には、”牛肉もゴム製品も”いっしょくただった。これを選り分けて、”食べられる残飯”を野毛の「くじら横丁」などの闇市に雑炊用として提供していました。
まずは、パンパンたちがお店の上得意になり、そしてそして彼女たちを追って進駐軍の米兵たちが多く集まってきたほか、ヤクザ、愚連隊、ポン引きなどが割拠するたまり場として、その名を轟かせることになりました。
伊勢佐木町に、青江三奈さんが歌った伊勢佐木町ブルースの歌碑があります。
青江三奈さんは、横浜の「ナイトアンドデイ」というナイトクラブの歌手でした。*1
伊勢佐木町ブルースを歌った青江三奈さんは、当時、森進一さんと並んで、「ため息路線」として大きく売り出されました。*2
歌碑の楽譜には、冒頭の「あ～、あ～」の部分には、「ため息」と記されています。
伊勢佐木町ブルースのおかげで、伊勢佐木町の名は全国に知れわたることになりました。
歌碑の台座のボタンを押すと、内蔵されているスピーカーから、青江三奈さんが歌う伊勢佐木町ブルースが再生されます。
*1
【参考文献】
*1 松葉好市,小田豊二：横浜物語（集英社,2003）P.259-P.260
*2 鈴木則文：日本の映画とロックと歌謡曲（2007）
伊勢佐木町の長者町８丁目。
イセブラ小路と名付けられた小路があります。
気が付かずに通り過ぎてしまいそうなＬ字型の小路。
反対側の入口。
今回は、伊勢佐木町（神奈川県横浜市中区）の町並みを散歩します。
伊勢佐木町通りを北西に入った通り。
昼間は閑散としています。
屋上には、国際クラブ「三千里」の大看板。
現在も高級クラブが営業中です。
ＪＲ根岸線石川町駅の西側。中村川の南側の住宅。
ビル型銭湯の小山湯。
階段を下りると入口です。反対側の入口にも通じていて、建物の両側から入れる構造になっています。
小山湯の木製看板。
ＪＲ石川町駅前の高速道路の向こう側は、ラブホテル街です。
まるでマンションのような外観のホテル。
老朽化が進んでいますが、近日中に建て替えが計画されているようです。
最近建てられたと思われる上層階に露店風呂が設置されたホテル。周囲はマンションが建ち並んでいますが、ホテルもマンションと同じような外観です。
今回は、石川町（神奈川県横浜市中区）の町並みを散歩します。
ＪＲ京浜東北線の石川駅前にある老舗喫茶「モデル」。
内部はレンガで装飾されていて、歴史を感じさせます。
「モデル」のコースター。
年代物のレジ。
元町中華街の南側にある「恵びす温泉」。写真奥は首都高速です。
３階建てのビル。
赤い文字で「恵びす温泉」と書かれた看板。
階段を上った２階が銭湯です。
元町中華街の上海路の北端。
店名は長崎屋。
名物はラーメン、ちゃんぽんですが、実はオススメは「ちゃんぽん麺を使ったナポリタンです。
「昔ながらのナポリタン」とビールを注文。中華街で味わうナポリタンは格別です。
元町中華街の市場通りの北側。
中華街でよく見かける甘栗の店があります。
その隣にあるみやげもの店。
鮮やかなトタン建築です。
建物の後方から。
馬車道の繁華街。
交差点の角にあるアートビルは１階部分が広場になっている落ち着いた感じのビルです。
この１階に設置されてあったベンチは、白化粧のメリーさん※1 の指定席でもありました。
メリーさんを出入り禁止したビルが多かった中、アートビルのオーナーであり、かつてはビル１階に店舗を構えていた「アート宝飾」の代表、六川勝仁さんは、メリーさんを拒むことはしませんでした。
すでに、ベンチは取り外され、１階の「アート宝飾」の店舗は「スターバックスコーヒー」へと変わりました。
関内駅の南側の国道１６号線沿のオフィス街。
神奈川中小企業センターのビルがある場所には、明治時代、新宿の遊女だったお倉が明治時代に開業した料亭「富貴楼」がありました。
お倉の才覚により、伊藤博文などの明治の元勲たちが集まり、富貴楼は、政治と経済の中心となりました。*3
桜木駅方向から。屋上が丸くなっているビルが、神奈川中小企業センターのビルです。
【参考文献】
＊1 鳥居民：横浜富貴楼お倉（草思社,1997）P.9
今回は、関内（神奈川県横浜市中区）の町並みを散歩します。
横浜港の大桟橋近くにある開港広場
ここに「日米和親条約締結の地」の碑があります。
日米和親条約（1854年締結）は、鎖国制度が破られた歴史的条約です。＊1
４年後（1858年）には、タウンゼント・ハリスと日米修好通商条約が締結され、このときのハリスの要請により、外国人の相手を目的とした港崎遊廓が関内（現在の横浜球場付近）に開業されました。※1
1854年3月31日（安政元年3月31日）江戸幕府がアメリカ使節ペリーと横浜で締結し…
野毛の繁華街の南側。このあたりまでくるとっ少し落ちついた雰囲気の町並みになります。
中華料理「萬福」。町中華の王道を行くような佇まいです。
メーニューは、すべて漢字表記が加えられています。
サンマー麺とビールを注文。
大岡川に沿って建つ都橋商店街の西隣の飲食店街の建物。
２階が居住部分です。
ビルの１階はのほとんどは飲食店ですが、１店舗だけ理容室があります。
レトロなドアと外壁。
野毛の中心部（野毛町一丁目）。
ラーメンの店 菊屋。
「看板による看板建築」と言えそうです。
隣に居酒屋「魂屋」。
野毛町２丁目の繁華街。
飲み屋の多い小路です。
建物の壁に直接手書きされた「鳥居のマーク」と「小便スルナ」注意書き。
反対側から。
野毛の繁華街の中心部。四つ角にホテルがあります。ホテルのビルの１階には、串カツ店などの飲食店舗が入っています。
入口。
西側の小路のホテル側は、木製板塀になっていて、そこには昭和を感じさせるホテルの裏口があります。
ホテルの裏口。
野毛三丁目は、野毛の中心部からは西側へはずれた場所ですが、動物園通りには、飲食店が建ち並んでいます。
中央部に横丁の入口がある建物。
スナック店が密集するビル小路。
奥行のある建物です。
今回は、野毛（神奈川県横浜市中区）の町並みを散歩します。
ＪＲ桜木町駅前には、戦前は桜川が流れていて錦橋～緑橋～瓦斯橋の間には、飲食物の露店小屋が発生していました。
石炭ビルと呼ばれていたビルがあったあたり。
桜川沿いの露店小屋の一部は、後にできた桜木町アパートに吸収されました。＊1＊2
この周辺は、カストリまたはクジラ横丁と呼ばれていました。
旧川崎宿の西端の日新町にある簡易宿泊所（ドヤ街）。
複数の簡易宿泊所が密集しています。
昭和28年に５軒の宿泊所が開業したのが始まりです。昭和35年には60軒になりました。
テレビ付き。
川崎南町の南側、貝塚二丁目の住宅街にある銭湯の「吉の湯」。
２つの建物（左側はコインランドリ）の間の通路の先が銭湯の入口です。
コインシャワー。
銭湯の建物は、道路の東側に面しています。
川崎南町の西側、市電通りの近く。数店舗の飲食店が散在する通りです。
ラーメンと書かれた大看板。
ラーメン中心のメニューです。
チャーシューメンとビールを注文。
川崎南町の北側の通り。
ストリップの川崎ロック座が営業中です。
レトロな大看板。nudetheater（ヌードシアタ）と書かれています。
建物側面の階段。
風俗店が散在する川崎南町にある小規模な飲み屋横丁。
小料理店など複数の店舗。
現在は、ほとんどの店舗が休業中のようです。
反対側。
かつて川崎宿の一部だった旧東海道沿いの通り（小川町通り）。この付近は、川崎遊廓があった場所です。
この付近は、小土呂新地と呼ばれ、大正１１年には南町と呼ばれるようになりました。
江戸時代より飯盛女を抱えた旅籠屋は、風紀上問題が多く、明治３５年、この地に移されました。
近くには「新地支」と書かれた電柱標識があります。
旧東海道から南へ入った場所にある南町公園。
ここにも「新地支」のプレートがあります。
旧東海道と駅前の大通り（新川通り）が交差する場所に、小土呂（こどろ）橋親柱の史跡があります。＊1
親柱。
現在、小土呂の名は、交差点の名前に残っています。
小土呂バス停。
今回は、川崎南町（神奈川県川崎市川崎区）の町並みを散歩します。
チネチッタの東側にある商店街の名画通り。飲食店が建ち並ぶまっすぐな小路があります。
「名画通り商店会」の看板。
和風の飲食店。
まっすぐに伸びる側溝。
旧東海道川崎宿の通りに面したところに、「東海道かわさき宿交流館」があります。
３階と４階が展示室。
川崎宿の模型。ねずみ色の屋根は瓦屋根、茶色の屋根は茅葺き屋根を表しています。
江戸時代の雰囲気がよみがえってくるようです。
他に、幕末の安政4年(1857)に、アメリカの初代駐日総領事ハリスが宿泊した万年屋の展示などがあります。＊2
今回は、川崎（神奈川県川崎市川崎区）の町並みを散歩します。
川崎市街を東西に横断する旧東海道。江戸時代は宿場町として繁栄しましたが、現在はその面影はありません。
現在の本町一丁目付近には、川崎宿を示す掲示が多く設置されています。
遊女の墓のある宗三寺周辺には、平旅籠の他に、飯盛旅籠も多く散在していました。＊1
本陣近く。この付近も飯盛旅籠がありました。＊1
権田原バス停の近く。
権田原のハッテンバの第一エリアだった公衆トイレは、最近リニューアルされたようです。
権田原の地名を冠した公衆便所です。
ＪＲ信濃町駅前の歩道橋から、権田原公衆便所方面への遠望。
JR信濃町駅を下車し、外苑東通りを南へ進むと、「権田原（ごんだわら）」の交差点があります。交差点の角には交番があって、交差点の北東側に、明治記念館。南東側に東宮御所、西側に明治神宮外苑が立地しています。
かつて、このエリアは、「権田原」という名のハッテンバでした。ハッテンバとは、ある一定の場とか施設が時間帯によってその機能を変質させられ、男性の同性愛者の性行動をうながす場となっているところを指しています。そこは、公園であり、公衆便所なのですが、夜になるとどこからともなく集まってくる男たちによって、開放的な性行動の場に変質させられました。権田原のハンテンバのエリアは、第一エリアから第三エリアと呼ばれる三ヶ所があって、その最盛期は、1961年から1971年までの10年間でした。第一エリアは、権田原バス停近くの公衆便所、第二エリアは、明治神宮外苑の森の入口の公衆便所で、第三エリアは、第二エリアの南側の前方の小公園でした。*1
1964年、東京オリンピック開催のため、第一エリア周辺が道路整備事業の対象区域となると、人々は向かい側の第二エリアに移動しました。やがて第二エリアも柵がめぐらされ、入口が閉ざされてしまうと、人々は第三エリアに移動しました。
ところが、第三エリアに隣接した都営住宅の住民の騒音拒否運動の抵抗にあい、住民の都への働きかけによって、東京都公園管理事務所は、夜間は閉門の措置をとったため、権田原のハッテンバは消滅しました。*1
現在も、そのためか、夕方16：30以降、公園の門は閉ざされます。
【参考文献】
*1 現代風俗研究会：現代遺跡・現代風俗91（リブロポート,1990）P.168-P.175
信濃町駅前の駅ビルの「味の名店街」には、歴史のある飲食店が集まっています。
地下１階の老舗カレー店。
メニューは、ポークカレー（並、中、大）のみです。
カレー（大）とビールを注文。キャベツは食べ放題です。
今回は、信濃町（東京都新宿区）の町並みを散歩します。
信濃町駅北口にそびえるトーシン信濃町駅前ビル。
１階には、レトロ感漂う名店街の入口があります。
「地下街入口」の看板
飲食店の名店の名が並びます。
たくさんの公衆トイレが整備されている飲み屋街の「塙山キャバレー」ですが、一方で、小便禁止看板もあちこちに建っています。
立小便の標的になりそうな空地。
赤文字の部分はかすれています。
中央の広場の看板。
