noteMap 三連休最終日に鎌倉登山⑭-2
初めに
先日の三連休最終日、鎌倉へ散歩登山について投稿しました。
その後、投稿記事をnoteMapアイコンで地図と連携しました。
そのときの操作で以下の不具合に気が付きましたので、手直しします。
・ 終了画面のデザインが悪い
・ 登録後に表示される地図画面が寂しい
地図の連携操作
note記事と地図との連携は、記事の登録を完了した後に行います。
🖱 noteMapアイコンをクリックします。
→ 最初の登録時は横浜駅周辺の地図が表示されます。
🖱 左上の検索エリアに地図を位置付ける住所を入力します。
今回は「鎌倉 今泉4丁目 天園ハイキングコース」と入力しました。
→ 地図は天園ハイキングコース入り口に位置付けられました。
🖱 天園ハイキングコース入り口をクリックします。
→ 地図上に地図情報入力ダイアログが表示されます。
🖱 ここで「保存」をクリックします。
→ 次のようなメッセージが表示されてDBへの保存の成功が知らされます。
終了画面のデザイン
このメッセージは開発者にとって「地図情報のDBへの保存の成功」がわかるのですが、他の人にとっては必要のない情報です。
この画面を見ても、ここで画面を終了すべきだとわかりません。
それに、この画面がダサいのです。
このメッセージが表示される画面を改良することにします。
どのように改良すべきでしょう。
失敗ではないことがわかればよいのです。
極端に言えば「宝くじに当たった」と思わせる、太鼓を打ち鳴らし、ハートが降り注ぐ動画でもよいのです。
noteMapアイコンを押した時の画像に終了ボタンを表示することにします。
最終的にこのようなデザインのダイアログを表示することにしました。
文字だらけのダイアログとは全く印象が変わりました。
地図情報書き込み処理を行うMapPost.phpのコードから不要メッセージの発行を止めてこのダイアログの表示処理に差し替えます。
地図情報書き込みのデータベース接続などの準備
if ($_SERVER["REQUEST_METHOD"] == "POST") {
地図情報書き込み処理
if ($conn->query($sql) === TRUE) {
//echo "Data inserted successfully";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウ表示</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
.container { width: 350px; height: 450px; text-align: center; background-color: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.container img { max-width: 100%; max-height: 100%; }
.container button { margin-top: 10px; padding: 5px 10px; }
</style>
</head>
<body>
<div class="container">
<h3>地図情報を保存しました</h3>
<img src="img/mapIllust.png" alt="Illustration"> <br>
<p>今後は<img src="img/icon16.png" alt="Illustration">クリックして地図を起動します。</p>
<button onclick="closeWindow()">終了</button>
</div>
<script> function closeWindow() { window.close(); } </script>
</body>
</html>
<?php
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}マーカーの表示
🖱 地図を登録した後、記事を表示してnoteMapアイコンをクリックします。
→ 記事に登録された地図が表示されます。
この地図が登録地点に何もなく寂しいのです。
Google 地図でお馴染みのマーカーを表示してみることにします。
地図表示関数initmap( )にマーカー表示機能のコードを追加します。
function initMap() {
const urlParams = new URLSearchParams(window.location.search);
const lat = parseFloat(urlParams.get('lat'));
const lng = parseFloat(urlParams.get('lng'));
// 初期画面
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: lat, lng: lng },
zoom: 15,
});
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
title: 'Marker Title'
});
}
終わりに
今回の修正は些細なことです。
しかし、これらが積み重なってサービスの印象に悪影響を与えます。
一度だけで終わる作業です。
細かい改善であっても、これからも丁寧にやっていこうと思います。
以上でnoteMap機能は、最も簡単な地図の登録から表示まで一連の動作が使えるようになりました。
これからは、一箇所の地点ではなく、ルートや複数地点の登録、表示ができるようにしたくなります。
意欲が持続できる限り機能を追加していきたいと思っています。
【人生最後のプロジェクト】
高齢者の妄想 ビットコインを自分で作ってみたが失敗
Coincheckのアカウント登録が拒否されました
これから始める 人生最後のプロジェクト①
人生最後のプロジェクト note記事と地図を連携させたい②
noteMap構想 開発するときの頭の中③
noteMapサービス 中の人と外の人④
noteMap GoogleにChrome拡張を申請⑤
noteMap Googleから申請却下の返事⑥
noteMap Googleからまたもや申請却下⑦
noteMap Chrome Web Storeに登録された⑧
noteMap これからどうする⑨
noteMap どんな言語を使って開発する？⑩
noteMap 開発を始める前にGoogleアプリやサービス全体の理解⑪
noteMap 場所検索機能を追加する⑫
noteMap 登録した場所を表示する⑬
noteMap 三連休最終日に鎌倉登山⑭-1
noteMap 三連休最終日に鎌倉登山⑭-2（本記事）
