PHPの話」カテゴリーアーカイブ

Swiperを設置したホームページを作ってみる

2019年4月9日

PHPで検索表示できるページとして激安の中古戸建てのページを試作してみたのですが、一覧表示のページからリンクされた詳細ページにおいて、Swiperを使って複数の画像を手動で入れ替えるようにしようと思っています。

ページによって画像の数が違うので、Swiperを使ったほうが、すっきりしたページになるんです。
せっかくなので、PHPでMySQLからデータを読み込むようにしようと思います。

とりあえず、HTMLでSwiperを使えるようにします。
https://github.com/nolimits4web/swiper/releases
から、swper(今回は swiper-4.4.6.zip)をダウンロードします。
ダウンロードしたswiper-2.7.6.zipを解凍して、swiper.min.cssとswiper.min.jsを取り出しまて、自分のサイトにアップロードします。
<HEAD></HEAD>の間に
<link rel=”stylesheet” href=”アップロードしたフォルダ/swiper.min.css”>
<BODY></BODY>の間の</BODY>の直前に
<script src=”アップロードしたフォルダ/swiper.min.js”>
</script>
を記載します。この部分がちょっと判りにくかったのでメモしておきます。

とりあえずアップロードしたswiper.min.jsとswiper.mini.cssは使わないで、
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js
にリンクして動作させることにしました。

ここまで準備出来たら、後は https://garigaricode.com/swiper/ を参考に
Swiperのオプション設定(Javascript)の内容を
<script src=”アップロードしたフォルダ/swiper.min.js”>の下に
<script>    </script>に囲んで記入します。
この位置関係が重要です。
俊は

<script>
var mySwiper = new Swiper(‘.swiper-container’, {
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
},
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
clickable: true
}
});
</script>

を選びました。

HTML内には表示したい場所に

<!– Swiper START –>
<div class=”swiper-container”>
<!– メイン表示部分 –>
<div class=”swiper-wrapper”>
<!– 各スライド –>
<div class=”swiper-slide”>Slide 1</div>
<div class=”swiper-slide”>Slide 2</div>
<div class=”swiper-slide”>Slide 3</div>
<div class=”swiper-slide”>Slide 4</div>
</div>
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
<div class=”swiper-pagination”></div>
</div>
<!– Swiper END –>

を記入します。
<div class=”swiper-slide”>Slide 1</div>
のSlide 1部分は各自で表示したいものに変更します。
画像の場合は
<div class=”swiper-slide”><IMG src=”abare2.jpg” border=”0″></div>
みたいな感じです。

<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
は次のページ、前のページに移動するためのボタンで
<div class=”swiper-pagination”></div>
は何ページ目かを表示するためのものです。

2019年4月13日

実際に、動作させてみたのですが、自分のサイトのファイルでも無事動作しました。

https://kimassi.net/hudousan/1/kodate1.php

PHPで工夫が必要なのは、<div class=”swiper-slide”>Slide 1</div>で画像の登録数を確認し登録数に従って記述の数を調整すところかなと思います。
IF文でデータが無ければ、<!– メイン表示部分 –>の処理を止めるという処理でうまくいけば楽なんですけど。
最終的にはカラムにデータがあれば表示するという処理を、10回繰り返す方法を採用しました。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<META name=”keywords” content=”金沢市,石川県,不動産,戸建て,中古”>
<META name=”description”content=”金沢の激安の中古住宅を紹介しています。”>
<META charset=”UTF-8″>
<STYLE>
<!–
.gyou{
line-height: 18pt ;
}
–>
</STYLE>
<STYLE>
<!–
body, th, td{
font-size: 95%;

// 600px以降から、100pxごとに1px大きくなる
@media (min-width: 600px) {
font-size: calc(112.5% + 4 * (100vw – 600px) / 400)
}

// 1,000px以上は、22pxに
@media (min-width: 1000px) {
font-size: calc(137.5%)
}
}

–>
</STYLE>
<STYLE>
<!–

@media(min-width: 600px){p.resizeimage3{
margin-top: 0px;margin-bottom: 0px;width: 720px;
}
}
p.resizeimage3 img{
width: 100%;
}

body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}

–>
</style>

<link rel=”stylesheet” href=”https://kimassi.net/hudousan/swiper.min.css”>

<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<TITLE>物件1  :金沢観光情報 【 きまっし金沢 】</TITLE>
</HEAD>
<BODY bgcolor=”#ffffff”>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD><A href=”https://kimassi.net/” target=”_top”><IMG src=”https://kimassi.net/kimassitoplogo.gif” alt=”金沢観光情報 【 きまっし金沢 】” width=”120″ border=”0″></A></TD>
<TD align=”left” valign=”middle”><H1 style=”font-size:18px; margin:0px;”><FONT color=”#cc0000″>物件1    </FONT></h1></TD>
</TR>
</TBODY>
</TABLE>
<BR>
</center>
<CENTER>
<TABLE class=”gyou”>
<TBODY>
<TR>
<TD ><FONT color=”#000000″>金沢近郊の激安(500万円以下)の中古の戸建てです。<BR>画像の横の矢印をクリックすると他の画像が見れます。</FONT><BR></TD>
</TR>
</TBODY>
</TABLE>

<?php
try {
$dsn=’mysql:host=127.0.0.1;dbname=kimassi_kodate’;
$db = new PDO($dsn, ‘kimassi_kodate’, ‘********’);
} catch (PDOException $e) {
echo ‘DB接続エラー: ‘ . $e->getMessage();
}
?>

<?php
$where=”no=1″;
?>

<BR>

</CENTER>

<CENTER>

<!– Swiper START –>
<div class=”swiper-container”>
<!– メイン表示部分 –>
<div class=”swiper-wrapper”>

<?php
$stmt = $db->query(”
SELECT *
FROM gekiyasukodate
WHERE $where
“);
$result = $stmt->fetch();

$price=number_format($result[‘kakaku’]);
if (empty($result[‘gazou2’])==false){
//<!– 各スライド –>;
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou2’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou3’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou3’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou4’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou4’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou5’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou5’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou6’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou6’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou7’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou7’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou8’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou8’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou9’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou9’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou10’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou10’].”\” border=\”0\”></P></div>\n”;}
?>
</div>
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
<div class=”swiper-pagination”></div>
</div>
<!– Swiper END –>

<?php

echo “<table bgcolor=\”#fbe48c\”>\n”;

echo “<tr>\n”;
echo “<td bgcolor=\”#ffffff\” class=\”gyou2\” valign=\”top\”><span style=\”color: #ff0000;\”><strong>価格 $price 円</strong></span><BR>{$result[‘tiiki’]}{$result[‘tyoumei’]}
<A href=\”{$result[‘map’]}\” target=\”_blank\”>地図を見る</a> <BR>
土地面積 {$result[‘totimenseki’]}㎡ 建物面積 {$result[‘tatemonomenseki’]}㎡ <BR>築年数 {$result[‘tikunensuu’]}年  間取 {$result[‘madori’]}
駐車 {$result[‘tyuusya’]}<BR>
セットバック {$result[‘setback’]}   再建築の可否 {$result[‘saikentiku’]}<BR>
<span style=\”color: #ff0000;\”>{$result[‘bikou1’]}<BR>
{$result[‘bikou2’]}</span> <BR>
媒介種別 {$result[‘sennin’]}  登録日 {$result[‘date’]}</td>\n”;
echo “</tr>\n”;
echo “</table>\n”;

?>
</center>
<script src=”https://kimassi.net/hudousan/swiper.min.js”>
</script>
<script>
var mySwiper = new Swiper(‘.swiper-container’, {
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
},
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
clickable: true
}
});
</script>

</BODY>
</HTML>

後は掲示板を設置と入会登録(さすがに高額な住宅を掲載するのに登録なしというのは具合悪い)のファイルは必要かな?
掲示板の投稿があった時に投稿者にもメールするようなシステムが良いかなと思います。

 

PHPで検索表示できるページにトライ

2019年3月25日

PHPでのプログラムも慣れてきたので、次は条件を設定してデータを表示できるページを作ろうかなと思っています。
商品を探すときに、いくらからいくらの範囲で、どういう条件のものを安い順に一覧表示してクリックしたら詳細情報を得られるというようなページってよく見かけますよね。

これをマスターすると、ほぼどんなホームページでも作成できるようになります。

とりあえず、激安の戸建ての家をテーマに作ってみようと思います。
業者に頼らなくても、家を処分したい人が無料で掲載できるようにすれば面白いかなと思います。

データベースの項目はno,id,date,tiiki,tyoumei,tikunensuu,tyuusya,map,setback,saikentiku,bikou1,bikou2,totimenseki,tatemonomenseki,madori,sennin,mail,namae,kakaku,gazou1,gazou2,gazou3,gazou4,gazou5,gazou6,gazou7,gazou8,gazou9,gazou10
検索対象はtiiki,tikunensuu,kakaku,tiiki2
表示順はdate,kakaku
一覧表示はdate,tiiki.tyoumei,tikunensuu,saikentiku,bikou2,totimenseki,tatemonomennseki,kakaku,madori,gazou1,new
だいたい、こういう感じかな。

2019年3月30日

XAMPP上のデータベースを作成してみました。画像ってデータベースに登録するには不向きなようです。画像へのアドレスを登録して画像は別にアップロードするようです。

2019年3月31日

とりあえずデータベースから読み込んで、画像を1つと築年数と価格を表で表示するPHPを作ってみました。
¥は画面上は\になって表示されますがエディターでcopy&pasteは問題なくできます。

<?php
try {
$pdo = new PDO(‘mysql:dbname=gekiyasukodate;host=127.0.0.1;charset=utf8’, ‘root’, ”);
} catch (PDOException $e) {
echo ‘DB接続エラー: ‘ . $e->getMessage();
}
?>

<?php

echo “<table bgcolor=\”#fbe48c\”>\n”;
$stmt =$pdo->query(“SELECT * FROM gekiyasukodate”);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($result as $results) {

$price=number_format($results[‘kakaku’]);

echo “<tr>\n”;
echo “<td bgcolor=\”#ffffff\” ><p class=\”resizeimage2\”><IMG src=\”{$results[‘gazou1’]}\” border=\”0\”></p></td>\n”;
echo “<td bgcolor=\”#ffffff\” class=\”gyou2\”>築年数 {$results[‘tikunensuu’]}年<BR>価格 $price 円</td>\n”;
echo “</tr>\n”;
}
echo “</table>\n”;

?>

2019年4月1日

1ページに5件のデータの表示にして、その以上のデータは次のページで表示しようと思ったのですが、なかなかできません。
ネットで調べて、試してみたのですが、なかなか正常に動作しませんでしたが、なんとか正常に動作するプログラムを見つけました。

https://manablog.org/php-pagination/

を参考に、とりあえず該当するデータを5件ずつ表示する事ができました。まだまだ改良が必要です。

<?php
try {
$pdo = new PDO(‘mysql:dbname=gekiyasukodate;host=127.0.0.1;charset=utf8’, ‘root’, ”);
} catch (PDOException $e) {
echo ‘DB接続エラー: ‘ . $e->getMessage();
}
?>

<?php

// GETで現在のページ数を取得する(未入力の場合は1を挿入)
if (isset($_GET[‘page’])) {
$page = (int)$_GET[‘page’];
} else {
$page = 1;
}

// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 5) – 5 = 5』
$start = ($page * 5) – 5;
} else {
$start = 0;
}

echo “<table bgcolor=\”#fbe48c\”>\n”;
// postsテーブルから5件のデータを取得する
$stml = $pdo->prepare(”
SELECT *
FROM gekiyasukodate
ORDER BY kakaku ASC
LIMIT {$start}, 5
“);
$stml->execute();
foreach ($stml as $results) {

$price=number_format($results[‘kakaku’]);

echo “<tr>\n”;
echo “<td bgcolor=\”#ffffff\” ><p class=\”resizeimage2\”><IMG src=\”{$results[‘gazou1’]}\” border=\”0\”></p></td>\n”;
echo “<td bgcolor=\”#ffffff\” class=\”gyou2\”>築年数 {$results[‘tikunensuu’]}年<BR>価格 $price 円</td>\n”;
echo “</tr>\n”;
}
echo “</table>\n”;

// postsテーブルのデータ件数を取得する
$page_num = $pdo->prepare(”
SELECT COUNT(*) id
FROM gekiyasukodate
“);
$page_num->execute();
$page_num = $page_num->fetchColumn();

// ページネーションの数を取得する
$pagination = ceil($page_num / 5);

?>

<?php for ($x=1; $x <= $pagination ; $x++) { ?>
<a href=”?page=<?php echo $x ?>”><?php echo $x; ?></a>
<?php } // End of for ?>

PHPのプログラムでエラー表示の際に、行数が表示されるのですが、実際のエディターでの行数とずれるので、不都合だったのですが、原因はエディターで2行に渡る文が実際には1行である場合があって、それが原因だと気づきました。
エディターの1行で表示できる文字数を最大にして解決しました。
秀丸の場合は、表示—-折り返し—-最大 でOKです。

2019年4月2日

ページへのリンクで現在表示されているページへのリンクを外して現在のページが判るようにしました。

// postsテーブルのデータ件数を取得する
$page_num = $pdo->prepare(”
SELECT COUNT(*) id
FROM gekiyasukodate
“);
$page_num->execute();
$page_num = $page_num->fetchColumn();

// ページネーションの数を取得する
$pagination = ceil($page_num / 5);

?>

<?php for ($x=1; $x <= $pagination ; $x++) {
if ($x <> $page ){
?>
<a href=”?page=<?php echo $x ?>”><?php echo $x; ?></a>
<?php
} else {echo $x;}?>
<?php }// End of for ?>

2019年4月5日

チェックボックス、ラジオボタンで条件を設定して、選択条件に従って検索するページを出力するPHPを作ろうと試行錯誤しています。
例えば、データから金沢と野々市の物件を価格の安い順に表示するような感じです。

チェックボックス、ラジオボタンの表示ができるのですが、選択した条件をデータとして取得するところが全く分かりません。結構し選べたのですが、分かりません。
それと複数の条件を1つの「送信する」でデータを取得する方法が判りませんでした。
これで3日間悩みました。

結論として、チェックボックス、プルダウン、ラジオボタンの使い方って、PHPでなくて、HTMLのformの勉強が必要だったのでした。ホームページは長年作っているけど、スタイルシートとformは避けていたので気が付きませんでした。
それと1つのフォームに複数のチェックボックスやプルダウン、ラジオボタンを入れて、まとめて送信する事も可能だとわかりました。

formではmethod= はgetかpostのどちらかを使い、action= では選択したデータを使って改めて表示しなおす場合は、今作動しているphpファイル(というかそのphpファイル自身)の名前を記入すれば良いようです。
(hudousan.phpというファイルなら<form method=”get” action=”hudousan.php”>)

option value= で選択したデータ(<option value=”kakaku”>ならkakaku)は、method=”get” の場合、<select name=”example1″>なら$_GET[‘example1’]で取り出せます。
こういう基本的な事を教えてくれる資料ってなかなか見つからなくて本当に苦労しました。
とりあえず、プルダウンで表示順を選択して表示する事ができるようになりました。

<?php
try {
$pdo = new PDO(‘mysql:dbname=gekiyasukodate;host=127.0.0.1;charset=utf8’, ‘root’, ”);
} catch (PDOException $e) {
echo ‘DB接続エラー: ‘ . $e->getMessage();
}
?>

<?php
function h($var) // HTMLでのエスケープ処理をする関数
{
if (is_array($var)) {
return array_map(‘h’, $var);
} else {
return htmlspecialchars($var, ENT_QUOTES, ‘UTF-8’);
}
}
// 表示する順番を設定 デフォルトは価格順
if (isset($_GET[‘example1’])) {
$example1=h($_GET[‘example1′]);
}
else { $example1=’kakaku’;}
?>

// 選択した条件を基に、現在のページを再読み込み
<form method=”get” action=”hudousan.php”>
<p>掲載順</p>
<select name=”example1″>
<option value=”kakaku”>物件の安い順</option>
<option value=”date”>登録が新しい順</option>
</select>
<p><input type=”submit” value=”送信する”></p>
</form>

<?php
echo “<table bgcolor=\”#fbe48c\”>\n”;
$stml = $pdo->prepare(”
SELECT *
FROM gekiyasukodate
ORDER BY $example1 ASC
“);
$stml->execute();
$result = $stml->fetchAll(PDO::FETCH_ASSOC);

foreach ($result as $results) {
$price=number_format($results[‘kakaku’]);// 数字を3桁ごとに,を入れて表示
echo “<tr>\n”;
echo “<td bgcolor=\”#ffffff\” ><p class=\”resizeimage2\”><IMG src=\”{$results[‘gazou1’]}\” border=\”0\”></p></td>\n”;
echo “<td bgcolor=\”#ffffff\” class=\”gyou2\”>築年数 {$results[‘tikunensuu’]}年<BR>価格 $price 円</td>\n”;
echo “</tr>\n”;
}
echo “</table>\n”;

でもチェックボックスで複数の条件を選択する方法がわかりません。

2019年4月6日

チェックボックスで複数の条件選択して、その選択条件に従って検索表示するPHPが動作しました。これだけで1日以上かかりました。
<input type=”checkbox” name=”example[]” value=”金沢市”>金沢市
<input type=”checkbox” name=”example[]” value=”野々市”>野々市
のようにして受け入れ画面を設置します。
example[] と ”野々市”>野々市 は各自が選びます。
example[]は配列なので[]は必須です。
<input type=”submit” value=”送信する”> でデータを送るのはプルダウンと同様です。

プルダウンの条件とチェックボックスで複数の条件選択の両方を一緒に条件を送るのは下記のような感じです。

 

<form method=”get” action=”hudousan.php”>
<p>掲載順</p>
<select name=”example1″>
<option value=”kakaku”>物件の安い順</option>
<option value=”date”>登録が新しい順</option>
</select>

<p>複数選択可</p>

<input type=”checkbox” name=”example[]” value=”金沢市”>金沢市
<input type=”checkbox” name=”example[]” value=”野々市”>野々市
<input type=”checkbox” name=”example[]” value=”白山市”>白山市
<input type=”checkbox” name=”example[]” value=”川北町”>川北町
<input type=”checkbox” name=”example[]” value=”内灘”>内灘
<input type=”checkbox” name=”example[]” value=”津幡町”>津幡町

<p><input type=”submit” value=”送信する”></p>
</form>

このページはhudousan.phpなのでaction=”hudousan.php”というのは自らのページを読み直すということになります。

最も重要なポイントは、1つの項目(カラム)で複数のデータを対象に検索する書式を把握する事でした。
例えば、tiikiという項目(カラム)で金沢市と白山市と川北町というデータを対象に検索する場合は、SELECT文の条件設定で WHERE  tiiki IN (“金沢市,白山市,川北町)   という書式が必要という事です。
tiiki IN (“金沢市,白山市,川北町)  の部分の文字列を取得するために 変数を設定します。ここでは$where にしました。
<form method=”get” action=”hudousan.php”>
<input type=”checkbox” name=”example[]” value=”金沢市”>金沢市
で入力したので、そのデータを受け取るには $_GET[‘example’] を使います。
つまり method=”get” と name=”example[]” の部分が受け取る配列名を決めているようです。

$where=”tiiki IN (“;
if (isset($_GET[‘example’])) {
foreach ($_GET[‘example’] as $value) {
$where=$where.”‘”.$value.”‘,”;
}
}

配列 $_GET[‘example’]  を 変数$whereに加えて、 $_GET[‘example’] の前に「 ‘ 」を後ろに「 ‘ 」と「 , 」を加えるという処理です。
$whereの文末が「 , 」 になるので、下記で、文末の「 , 」を削除して「 ) 」を加えます。

$where=substr($where, 0, -1).”)”;

SELECT文の条件設定の部分は

WHERE $where

になります。
なお条件設定して表示するので、表示のデータ数も減るのでページネーションの部分の変更も必要になりました。

$page_num = $pdo->prepare(”
SELECT COUNT(*) id
FROM gekiyasukodate
“);
$page_num->execute();
$page_num = $page_num->fetchColumn();

を下記に変更しました。

$page_num = $pdo->prepare(”
SELECT COUNT(*)
FROM gekiyasukodate
where $where
“);
$page_num->execute();
$page_num = $page_num->fetchColumn();

これでPHPで検索表示できるページの基本的な手法は理解できたのだと思います。

2019年4月7日

テーブル内の画像の上下部に余白ができるので、スタイルシートの

<STYLE>
<!–
@media(min-width: 600px){p.resizeimage2{
width: 240px;
}
}
p.resizeimage2 img{
width: 100%;
}
–>
</style>

を下記に書き換えました。

<STYLE>
<!–
@media(min-width: 600px){p.resizeimage2{
margin-top: 0px;margin-bottom: 0px;width: 240px;
}
}
p.resizeimage2 img{
width: 100%;
}
–>
</style>

2ページ目を見る時に、設定した条件がリセットされて、初期条件の2ページが表示され、設定した条件の2ページ目が見れなくなっていました。
2ページ目に飛ぶリンクは

<a href=”?page=<?php echo $x ?>”><?php echo $x; ?></a>

になっていますが、現状のページのアドレスを取得して、それを基に2ページ目のアドレスを指定するプログラムに変更しました。ばっちり動作しました。

<a href=”<?php echo $_SERVER[‘REQUEST_URI’]?> &page=<?php echo $x ?>”><?php echo $x; ?></a>

今まで、XAMPP上で動作させていたのですが、ある程度、動作するようになったので、オンラインで動作させる事にしました。
データベースのアドレスやデータベース名、テーブル名を変更してアップロードしたのですが、データベースのデータが表示されません。
プログラムを簡略化してもダメです。

$stml = $pdo->prepare(“SELECT * FROM gekiyasukodate”);

の部分が、XAMPPでは動作するけどオンラインでは動作しないようです。

$stml = $db->prepare(“SELECT * FROM gekiyasukodate”);

に変更すると動作しました。

https://kimassi.net/hudousan/hudousan.php

2019年4月8日

チェックボックス、ラジオボタンで条件を設定して、選択条件に従って中古戸建ての激安物件を検索一覧表示するページに必要項目をすべて表示できるように作り変えました。
詳細ページへのリンクも挿入しました。
詳細ページを作れば、とりあえずは基本的な処理はできます。
詳細ページの画像はスライドできてクリックで拡大できるといいかな。
投稿者の会員登録のページと投稿者のデータ入力のページや物件ごとの掲示板も設置しようと思います。かなり本格的なシステムになりそうです。

XAMPPが動作しない

2019年1月1日

新年に入って、時間に余裕が出来たので、PHPの勉強を始めました。

2019年1月3日

本を読んでいて、ちょっと理解しにくいところがあって、実際に動作させたくなって、パソコン上で動作できるXAMPPを利用する事にしました。
https://webkaru.net/php/setup/

Apacheの起動をしてみました。
でも、XAMPPのApacheで使うPort 80が他で使われていてApacheの起動ができません。

https://php1st.com/946
を参考にコマンドプロントでnetstat -nao を動作してローカルアドレスの数字が80のPIDを調べると4でした。
タスクマネージャーの詳細を確認するとSystem (NT Kemel & System)になっていました。

http://lovee7.blog.fc2.com/blog-entry-35.html
を参考に、[コントロールパネル] → [プログラム] → [プログラムと機能] → [Windowsの機能の有効化または無効化]で「Windowsの機能」ダイアログを表示させます。
「インターネット インフォメーション サービス」の項目を開いて、「World Wide Web サービス」のチェックを外しました。

XAMPPを管理者として実行(アイコンを右クリックで管理者として実行)する。
Apacheが起動しました。
Attempting to start Apache service.
が表示されましたが、それ以降進みません。
https://lightning2014.ensyutsubu.com/blog/post-6335/
を参考にして
XAMPP Control Panelで「Apache」の左側についたチェックを押すと×マークになります。
これでApacheの起動するようになりました。 ここまでの道は長かったです。
結局、最初にXAMPPを使わないでApacheが動作しなかった原因も、Port 80が他で使われていた事が原因だったようです。

c:/xampp/htdocs/ に動作するPHPファイル(例えば test.php)を設置してあれば
XAMPP Control PanelでApacheとMySQLをStartさせて
http://localhost/test.php
でtest.phpを動作させることができます。

2019年1月4日

実際にPHPのファイルを動作させてみましたが、日本語は文字化けしました。
c:/xampp/php/ のphp.iniを書き換えると解決するということなんですが、
PHPの絵本では、文字コードEUC-JPにすると書いてあったので、その通りにしても解決しなく
本が古いので、新しい環境(Windows10)に合わせたほうが良いのかなと思って
https://techacademy.jp/magazine/2412 を参考に
文字コードUTF-8にして保存してみたのですが、やっぱり解決しません。

2019年1月5日

結果的には文字コードUTF-8にするのが正解だったのですが、PHPのファイルを作る際にも、UTF-8で入力しなければいけなかったのです。
https://hombre-nuevo.com/programming/%E3%80%90php%E3%80%91%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91%E5%AF%BE%E7%AD%96%E3%81%AE%E3%81%9F%E3%82%81php%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%E3%80%90xampp%E3%80%91/
が参考になりました。

これで、やっと日本語を使ったPHPのファイルをパソコン上で動作させる環境が整いました。
これだけの事で、これほど苦労させられるなんて、先が思いやられます。

次はサーバー上で動作できるように設定です。
サーバーでの設定の変更は、サーバーごとに違うんだと思いますが、自分が利用しているサーバーcoreserverの場合は、coreserverにログインして、サイト設定でPHPのバージョンをphp72に変更です。

早速、XAMPP上で動作したphpファイルをFTPでアップロードして、属性を全部実行可(755)に設定し動作を試してみました。
無事動作しました。やったね!

2019年3月24日

PHPのプログラムの製作に成功し、XAMPP 上のPHPで動作させる必要性に迫られたので、主に使うパソコンすべてにXAMPP 上でPHPを動作する環境を設置する事にしました。

さっそくデスクトップの自作パソコンにXAMPPをインストールしたのですが、動作しません。
「or reconfigure Apache and the Control Panel to listen on a different port」というエラーです。

前回同様
[コントロールパネル] → [プログラム] → [プログラムと機能] → [Windowsの機能の有効化または無効化]で「Windowsの機能」ダイアログを表示させます。
「インターネット インフォメーション サービス」の項目を開いて、「World Wide Web サービス」のチェックを外しました。

XAMPPを管理者として実行(アイコンを右クリックで管理者として実行)する。
XAMPP Control Panelで「Apache」の左側についたチェックを押すと×マークになります。
startボタンをクリックすると、許可画面が表示されるので許可するとApacheが起動しました。
XAMPP Control Panel右上部のConfigをクリックして、Autostart of modulesのApacheにチェックを入れてSaveすると自動起動します。
Start Control Panel MinimizedにチェックしてSaveするとXAMPP Control Panelが表示することなく起動します。

次はPHPのインストールです。
前にダウンロードしてあったphp-7.2.13-Win32-VC15-X64 でインストールします。
展開したフォルダの名前をphpに変更してc:¥phpになるように配置し、phpフォルダの直下にある「php.ini-production」ファイルをコピーし、「php.ini」というファイル名に変更しました。

これでPHPがXAMPPで動作するようになりました。

残りもう1台も同じ設定で動作するようになりました。

ついでに、Windows7のAOA150(液晶サイズ:8.9インチ CPU:Atom N270/1.6GHz/1コア メモリ容量:1GB)にもインストールしました。
特に設定を変えることなく、すんなり動作しました。
PHPの処理も問題なくできました。
寝室用に使おうと思います。

PHPで楽天APIを利用

せっかくPHPの勉強をしたので、楽天APIを利用したページ作りにトライしました。

楽天APIの一覧で使いたいAPIを選んでおきます。
https://webservice.rakuten.co.jp/document/

まずは、楽天のデベロッパーIDとアフィリエイトIDを取得しないと始まりません。
https://webservice.rakuten.co.jp/
で新規アプリ登録をします。使うのは楽天トラベルの空室検索APIです。
登録が終わるとデベロッパーIDとアフィリエイトIDが表示されます。
自分の場合は
1089363386770913344
15040cf4.7d33bce5.15040cf5.078e12d9
でした。

公開API活用ガイド(ZAPA)の楽天APIに関するPHPプログラムを動作させてみました。
ソースファイルrakuten.phpは
http://www.kohgakusha.co.jp/support.html
で入手できます。
でも動作しませんでした(笑!)
楽天側の仕様が変わったのだと思います

これじゃあ話にならないという事で、とにかく楽天APIを動作させるPHPのサンプルプログラムをネットで探してみました。いくつか試したのですが、いずれもエラー表示が出るものばかりで使い物になりません。
http://connet.lolipop.jp/agoranet/rakutenaff/
でやっと自分の環境でも動作するPHPファイルを見つけました。
それを参考に、公開API活用ガイド(ZAPA)の楽天APIに関するPHPプログラムを改変して、やっと動作させることに成功しました。
設定した検索ワードに基づいて、5件分の画像が表示され、画像をクリックするとアフィリエイトIDをクッキーに埋め込み、対象ページに移動するプログラムです。

青文字は各自のIDを入れないといけないし、赤文字は今回書き換えた部分です。

<!DOCTYPE html >
<html lang=”ja”>
<head>
<meta charset=utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Rakuten API sample</title>

</head>
<body>
<?php

//楽天から商品を検索してHTMLタグを返す関数
function search_rakuten($keyword,$limit){

//developerIdを設定する
$applicationId = ‘1089363386770913344‘;

//affiliateIdを設定する
$affiliateId = ‘15040cf4.7d33bce5.15040cf5.078e12d9‘;

//バージョンを設定する
$version = ‘2017-07-06‘;

//取得件数を設定する
$hits = $limit;

//検索キーワードをURLエンコードして設定する
$text = urlencode($keyword);

//人気の高い順に検索する
$sort = urlencode(“standard”);

//URLを生成する
$url = ‘https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=xml’.
‘&applicationId=’.$applicationId.
‘&affiliateId=’.$affiliateId.
‘&version=’.$version.
‘&keyword=’.$text.
‘&hits=’.$hits.
‘&sort=’.$sort;

//RESTで返されるXMLファイルを取得する
$str = @file_get_contents($url);

//XMLを解析してオブジェクトにセットする
$xml = simplexml_load_string($str);

//xpathによって、Item要素だけを取り出す
$Items = $xml->Items->Item;

//divタグでくくる
$ret = ‘<div id=”rakuten_item”>’;

//Item数だけ繰り返す
foreach($Items as $Item){
$ret .= ‘<a href=”‘.$Item->affiliateUrl.'”>’;
$ret .= ‘<img src=”‘.$Item->mediumImageUrls->imageUrl.'” >’;
$ret .= “</a>\n”;
}

//divタグを閉じる
$ret .= ‘</div>’;

//作成したHTMLを返す
return $ret;
}

//検索ワードを設定する
$keyword = “スイーツ”;

//取得数を設定する
$limit = 5;

//楽天から商品を検索して表示する
echo search_rakuten($keyword,$limit);

?>
<br>
<!– Rakuten Web Services Attribution Snippet FROM HERE –>
<a href=”https://webservice.rakuten.co.jp/” target=”_blank”>Supported by 楽天ウェブサービス</a>
<!– Rakuten Web Services Attribution Snippet TO HERE –>
</body>
</html>

オープンデータの情報をPHPでGooglemapに埋め込む

2019年2月24日

Googlemapにオープンデータの情報を入力して表示する為にPHPを利用できないかと頑張ってみました。
オープンデータの情報を取り出してPHPで処理して、下記に必要なデータを埋め込めば楽だと思ったのです。
せっかくPHPの勉強したんだから使わないと上達しません。

{
name: ‘<table><tr><td>金沢駅西口時計駐車場</td></tr><tr><td >24時間<br>収容台数:1500台</td></tr></table>’,
lat: 36.5806,
lng: 136.648722,
icon: ‘tam1.gif’ // 金沢駅西口時計駐車場のイメージpng
},
{
name: ‘<table><tr><td>金沢駅西広場一般車駐車場</td></tr><tr><td >24時間<br>収容台数:68台</td></tr></table>’,
lat: 36.57949,
lng: 136.647391,
icon: ‘tam2.gif’ // 金沢駅西広場一般車駐車場のイメージpng

},

{
name: ‘<table><tr><td>東山観光駐車場</td></tr><tr><td>午前7時~午後10時<br>収容台数:15台</td></tr></table>’,
lat: 36.573087,
lng: 136.665389,
icon: ‘tam3.gif’ // 東山観光駐車場jpg

}

金沢市の駐車場・駐輪場のオープンデータはCSV形式でID,地域,緯度,経度,ジャンル1,サブジャンル1,ジャンル2,サブジャンル2,ジャンル3,サブジャンル3,名称,概略(収納台数),郵便番号,住所,電話番号,FAX番号,E-mail,開館時間,休館日,料金,備考,リンクの項目があります。

そのまま使えるようなPHPプログラムにしても良いのですが、少しでも簡単にという事で、必要なデータだけ残すことにしました。
最初に駐輪場のデータを削除しました。
緯度,経度,名称,概略(収容台数),開館時間の4項目(列)だけ残して残りの項目を削除しました。
1行目の項目名も削除しました。
ファイル名をshisetsu_parkingre.csvにして、datafフォルダに入れました。
h.phpファイルをlibフォルダに入れました。

h.phpファイルの内容は

<?php
function h($var) // HTMLでのエスケープ処理をする関数
{
if (is_array($var)) {
return array_map(‘h’, $var);
} else {
return htmlspecialchars($var, ENT_QUOTES, ‘UTF-8’);
}
}
/* ?>終了タグ省略 ☆レシピ001☆(サーバーのPHP情報を知りたい) */

です。

オープンデータをGooglemap用に埋め込むプログラムはread_csv.phpです。

<?php
# h()関数☆レシピ221☆(安全にブラウザで値を表示したい)を読み込みます☆レシピ041☆(他のファイルを取り込んで利用したい)。
require_once ‘./lib/h.php’;

// CSVファイルはWindowsのExcelで作成したSJISエンコード
$csvFile = ‘./data/shisetsu_parkingre.csv’;
if (! file_exists($csvFile)) {
die(‘ファイルが存在しません。’);
}

// 文字化け対策
# CSVファイルの中身をすべて取り込みます。
$tempCSV = file_get_contents($csvFile);
# 文字エンコードをUTF-8に変換します☆レシピ058☆(文字エンコードを変換したい)。
$tempCSV = mb_convert_encoding($tempCSV, ‘UTF-8’, ‘CP932’);
# 一時ファイルに保存します。
$fp = tmpfile();
fwrite($fp, $tempCSV);
# ファイルポインタを先頭に戻します。
rewind($fp);
# ローケルを設定します。
setlocale(LC_ALL, ‘ja_JP.UTF-8’);

$file = ‘people.txt’;
$n=1;
while ($arr = fgetcsv($fp)) {
if (! array_diff($arr, array(”))) { // 空行を除外
continue;
}
list($lat, $lng, $name,$syuunou,$time) = $arr;
// nl2br()関数で要素内改行を<br>に変換
$person = ‘{name: \'<table><tr><td>’.nl2br(h($name), false) . ‘</td></tr><tr><td >’.nl2br(h($time), false) .'<br>’ . nl2br(h($syuunou), false) . ‘</td></tr></table>\’,’
.’lat:’ . nl2br(h($lat), false).’,’
.’lng: ‘. nl2br(h($lng), false) .’,’
. ‘icon: \’tam’.$n.’.gif\’ //’.nl2br(h($name), false) .’イメージgif’.”\n”.’},’.”\n”

;
file_put_contents($file, $person, FILE_APPEND | LOCK_EX);
$n=$n+1;
}

# ファイルのロックを解除します。
fflush($fp);
flock($fp, LOCK_UN);

# ファイルを閉じます。
fclose($fp);

?>

以上です。people.txtというファイルに出力されます。
一番最後のデータの }, は } に書き換えて埋め込みます。

埋め込みが完了したページは
https://kimassi.net/test/test5F.html
です。

ちなみに、概要のページtest5F.htmlのソースは下記の通りです。

<html>
<head>
<META charset=”UTF-8″>
<META name=”GENERATOR” content=”JustSystems Homepage Builder Version 21.0.5.0 for Windows”>
<STYLE>
<!–
.gyou{
line-height: 18pt ;
}
.gyou2{
line-height: 18pt ; padding-left:10pt ; padding-right:10pt;
}
.gyou3{
line-height: 18pt ; padding-left:10pt;
}
TABLE{
line-height: 18pt;
}
–>
</STYLE>
<STYLE>
<!–
body, th, td{
font-size: 95%;

// 600px以降から、100pxごとに1px大きくなる
@media (min-width: 600px) {
font-size: calc(112.5% + 4 * (100vw – 600px) / 400)
}

// 1,000px以上は、22pxに
@media (min-width: 1000px) {
font-size: calc(137.5%)
}
}

–>
</style>
<STYLE>
<!–
body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}

–>
</style>

<style>
<!–
#map{

width: 100%;

height: 400px;

background-color: grey;

}

–>
</style>
<meta name=”viewport” content=”initial-scale=1.0″>
<title>金沢の駐車場GoogleMap </title>

</head>
<body>
<BR>
<center>
<TABLE>
<TBODY>
<TR>
<TD><A href=”https://kimassi.net/” target=”_top”><IMG src=”https://kimassi.net/kimassitoplogo.gif” alt=”金沢観光情報 【 きまっし金沢 】” width=”120″ border=”0″></A></TD>
<TD align=”left” valign=”middle”><H1 style=”font-size:18px; margin:0px;”><FONT color=”#cc0000″>金沢の駐車場 </FONT></h1></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE>
<TBODY>
<TR>
<TD>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>

<div id=”map”></div>
<script>
var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
{name: ‘<table><tr><td>金沢駅西口時計駐車場</td></tr><tr><td >24時間<br>収容台数:1500台</td></tr></table>’,lat:36.5806,lng: 136.648722,icon: ‘tam1.gif’ //金沢駅西口時計駐車場イメージgif
},
{name: ‘<table><tr><td>金沢駅西広場一般車駐車場</td></tr><tr><td >24時間<br>収容台数:68台</td></tr></table>’,lat:36.57949,lng: 136.647391,icon: ‘tam2.gif’ //金沢駅西広場一般車駐車場イメージgif
},
{name: ‘<table><tr><td>金沢駅東駐車場</td></tr><tr><td >午前7時~午後11時<br>収容台数:352台</td></tr></table>’,lat:36.576206,lng: 136.648134,icon: ‘tam3.gif’ //金沢駅東駐車場イメージgif
},
{name: ‘<table><tr><td>ポルテ金沢駐車場</td></tr><tr><td >24時間<br>収容台数:450台</td></tr></table>’,lat:36.57634,lng: 136.649433,icon: ‘tam4.gif’ //ポルテ金沢駐車場イメージgif
},
{name: ‘<table><tr><td>リファーレ駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:268台</td></tr></table>’,lat:36.575865,lng: 136.651441,icon: ‘tam5.gif’ //リファーレ駐車場イメージgif
},
{name: ‘<table><tr><td>武蔵地下駐車場</td></tr><tr><td >午前7時~午後11時<br>収容台数:194台</td></tr></table>’,lat:36.574211,lng: 136.654129,icon: ‘tam6.gif’ //武蔵地下駐車場イメージgif
},
{name: ‘<table><tr><td>石川県立音楽堂</td></tr><tr><td >午前9時~午後10時<br>収容台数:152台</td></tr></table>’,lat:36.57672,lng: 136.647841,icon: ‘tam7.gif’ //石川県立音楽堂イメージgif
},
{name: ‘<table><tr><td>金沢フォーラス駐車場</td></tr><tr><td >24時間<br>収容台数:420台</td></tr></table>’,lat:36.579348,lng: 136.649811,icon: ‘tam8.gif’ //金沢フォーラス駐車場イメージgif
},
{name: ‘<table><tr><td>名鉄スカイパーキング</td></tr><tr><td >午前6時~午後12時<br>収容台数:620台</td></tr></table>’,lat:36.572802,lng: 136.654387,icon: ‘tam9.gif’ //名鉄スカイパーキングイメージgif
},
{name: ‘<table><tr><td>近江町パーキングビル</td></tr><tr><td >午前8時00分~午後6時00分<br>収容台数:228台</td></tr></table>’,lat:36.570437,lng: 136.656682,icon: ‘tam10.gif’ //近江町パーキングビルイメージgif
},
{name: ‘<table><tr><td>めいてつ・エムザ地下駐車場</td></tr><tr><td >午前8時30分~午後8時30分<br>収容台数:60台</td></tr></table>’,lat:36.572674,lng: 136.654991,icon: ‘tam11.gif’ //めいてつ・エムザ地下駐車場イメージgif
},
{name: ‘<table><tr><td>近江町市場</td></tr><tr><td >建て替えのため閉鎖中<br>建て替えのため閉鎖中</td></tr></table>’,lat:36.571631,lng: 136.657648,icon: ‘tam12.gif’ //近江町市場イメージgif
},
{name: ‘<table><tr><td>近江町いちば館駐車場</td></tr><tr><td >午前7時30分~午後11時30分<br>収容台数:94台</td></tr></table>’,lat:36.571844,lng: 136.656398,icon: ‘tam13.gif’ //近江町いちば館駐車場イメージgif
},
{name: ‘<table><tr><td>石川県兼六駐車場</td></tr><tr><td >24時間<br>収容台数:482台</td></tr></table>’,lat:36.564888,lng: 136.664091,icon: ‘tam14.gif’ //石川県兼六駐車場イメージgif
},
{name: ‘<table><tr><td>兼見御亭パーキング</td></tr><tr><td >午前8時30分~午後5時30分<br>収容台数:100台</td></tr></table>’,lat:36.561714,lng: 136.665588,icon: ‘tam15.gif’ //兼見御亭パーキングイメージgif
},
{name: ‘<table><tr><td>石川県石引駐車場</td></tr><tr><td >24時間<br>収容台数:370台</td></tr></table>’,lat:36.557697,lng: 136.665008,icon: ‘tam16.gif’ //石川県石引駐車場イメージgif
},
{name: ‘<table><tr><td>金沢歌劇座有料駐車場</td></tr><tr><td >24時間<br>収容台数:76台</td></tr></table>’,lat:36.558593,lng: 136.658952,icon: ‘tam17.gif’ //金沢歌劇座有料駐車場イメージgif
},
{name: ‘<table><tr><td>金沢市役所・美術館駐車場</td></tr><tr><td >午前8時30分~午後11時<br>収容台数:319台</td></tr></table>’,lat:36.560954,lng: 136.657267,icon: ‘tam18.gif’ //金沢市役所・美術館駐車場イメージgif
},
{name: ‘<table><tr><td>香林坊地下駐車場</td></tr><tr><td >24時間<br>収容台数:813台</td></tr></table>’,lat:36.564272,lng: 136.65473,icon: ‘tam19.gif’ //香林坊地下駐車場イメージgif
},
{name: ‘<table><tr><td>竪町駐車場</td></tr><tr><td >24時間<br>収容台数:205台</td></tr></table>’,lat:36.558446,lng: 136.653684,icon: ‘tam20.gif’ //竪町駐車場イメージgif
},
{name: ‘<table><tr><td>北パーキング</td></tr><tr><td >24時間<br>収容台数:85台</td></tr></table>’,lat:36.56054,lng: 136.651377,icon: ‘tam21.gif’ //北パーキングイメージgif
},
{name: ‘<table><tr><td>タイムズ金沢片町商店街</td></tr><tr><td >24時間<br>収容台数:32台</td></tr></table>’,lat:36.558507,lng: 136.65311,icon: ‘tam22.gif’ //タイムズ金沢片町商店街イメージgif
},
{name: ‘<table><tr><td>OVALパーキング</td></tr><tr><td >24時間<br>収容台数:270台</td></tr></table>’,lat:36.558696,lng: 136.65341,icon: ‘tam23.gif’ //OVALパーキングイメージgif
},
{name: ‘<table><tr><td>にし茶屋観光駐車場</td></tr><tr><td >午前9時~午後10時<br>収容台数:13台</td></tr></table>’,lat:36.557087,lng: 136.648079,icon: ‘tam24.gif’ //にし茶屋観光駐車場イメージgif
},
{name: ‘<table><tr><td>長町観光駐車場</td></tr><tr><td >午前7時30分~午後6時<br>収容台数:20台</td></tr></table>’,lat:36.563104,lng: 136.64958,icon: ‘tam25.gif’ //長町観光駐車場イメージgif
},
{name: ‘<table><tr><td>近江町観光バス駐車場</td></tr><tr><td >午前7時30分~午後9時<br>収容台数:バス4台</td></tr></table>’,lat:36.570363,lng: 136.657602,icon: ‘tam26.gif’ //近江町観光バス駐車場イメージgif
},
{name: ‘<table><tr><td>東山観光バス駐車場</td></tr><tr><td >午前9~午後6時<br>収容台数:バス5台</td></tr></table>’,lat:36.573291,lng: 136.664824,icon: ‘tam27.gif’ //東山観光バス駐車場イメージgif
},
{name: ‘<table><tr><td>東山北観光駐車場</td></tr><tr><td >午前9~午後6時<br>収容台数:7台</td></tr></table>’,lat:36.573799,lng: 136.665524,icon: ‘tam28.gif’ //東山北観光駐車場イメージgif
},
{name: ‘<table><tr><td>東山観光駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:15台</td></tr></table>’,lat:36.573087,lng: 136.665389,icon: ‘tam29.gif’ //東山観光駐車場イメージgif
},
{name: ‘<table><tr><td>東山河畔観光駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:14台</td></tr></table>’,lat:36.571628,lng: 136.665982,icon: ‘tam30.gif’ //東山河畔観光駐車場イメージgif
}
];
function initMap() {
// 地図の作成
var mapLatLng = new google.maps.LatLng({lat: markerData[0][‘lat’], lng: markerData[0][‘lng’]}); // 緯度経度のデータ作成
map = new google.maps.Map(document.getElementById(‘map’), { // #mapに地図を埋め込む
center: mapLatLng, // 地図の中心を指定
zoom: 15 // 地図のズームを指定
});

// マーカー毎の処理
for (var i = 0; i < markerData.length; i++) {
markerLatLng = new google.maps.LatLng({lat: markerData[i][‘lat’], lng: markerData[i][‘lng’]}); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});

infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
content: ‘<div class=”map”>’ + markerData[i][‘name’] + ‘</div>’ // 吹き出しに表示する内容
});

markerEvent(i); // マーカーにクリックイベントを追加

marker[i].setOptions({// マーカーのオプション設定
icon: {
url: markerData[i][‘icon’]// マーカーの画像を変更
}
});

}
}

// マーカーにクリックイベントを追加
function markerEvent(i) {
marker[i].addListener(‘click’, function() { // マーカーをクリックしたとき
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
});
}
</script>
<script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyClHkPIxdkxBg4j7Z7k7yPxmlNyKg8sqOM&callback=initMap”
async defer></script>
<br>番号のマークをクリックすると詳細情報を表示します<br><br>
</center>
</body>
</html>

2019年3月27日

PHPについてスキルが上がってきたので、金沢のオープンデータをそのままデータベースにインポートして、そのデータベースを読み込んでGooglemapに表示するPHPプログラムを作成することにしました。そうすれば、データが更新された時に、金沢のオープンデータをそのままデータベースにインポートするだけで良いので楽です。

何を表示しようか迷ったのですが、公衆トイレにすることにしました。
400件以上あるので、処理能力の問題もあります。

まずは、金沢のオープンデータをそのままデータベースにインポートするために、データベースのテーブルを手動で作ります。
項目数は22あります。その内、経度と緯度と名称だけ取得して、マークは全部同じ・で表示してクリックしたら名称が表示されるようにします。

2019年3月28日

金沢のオープンデータをそのまま手動でデータベースにインポートするのは簡単にできました。全部で430のデータがありました。
IDをprimaryキーに設定しました。
でも、同じ施設が何か所もデータがあるのは地図上に表示するのには不向きです。
仕方が無いので手動で削除する事にしました。入場者だけしか利用できないトイレも削除しました。結局データは146になりました。これくらいなら処理の負荷も心配するほどではないと思います。
金沢城などのトイレは場所が離れていても、緯度と経度が一緒なのは怠慢だと感じました。

よく調べたらGooglemapにマークなどを表示するのはJavascriptなのですが、JavascriptとMySQLとは相性が悪く、PHPを経由してアクセスしないといけないようです。
かなり難易度が高いので断念しました。

せっかくなので、従来の方法でページを作るようにしました。

2019年3月29日

金沢の公衆トイレは、すでにGooglemapに登録されていることに気づきました。しかもマークの色と形まで一緒になっていました。
無駄な労力を費やしてしまいました。