1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@umi24

ツーリングスポットアプリ３【プラン作成編】

1
Posted at

前回まで

次は、プラン作成編です。

ステップ1｜InfoWindow に「プランメモに追加」ボタンを追加しよう

現在の InfoWindow を確認しよう

現在script.js を見ると、InfoWindow は spots.forEach の中と showMarkers 関数の中の
2箇所に書かれているかと思いますので、両方にボタンを追加する必要があります。

現在の content はこうなっています。

content: `<p>${spot.name}</p><p>${spot.description}`,

やってみよう

  • この content の中に「プランメモに追加」ボタンを追加してみましょう
  • id をつけておくと、あとでボタンを取得しやすくなります

参考：template literal の中に HTML を追加する書き方

content: `
  <p>テキスト</p>
  <button id="任意のid名">ボタン</button>
`,

ステップ2｜プランメモを管理するファイルを用意しよう

memo.js を新規作成しよう

ホーム画面とプラン作成画面の両方でメモデータを使います。
spots.js と同じように別ファイルに切り出して管理しましょう。

やってみよう

  • memo.js を新規作成して、メモを管理する空の配列を定義しましょう
  • index.html で spots.js の下に読み込みを追加しましょう

参考：複数の JS ファイルを読み込む順番

<script src="./spots.js"></script>
<script src="./memo.js"></script>   <!-- spots.js の後、script.js の前 -->
<script src="./script.js"></script>

⚠️ script.js の中でメモの配列を使うので、script.js より前に読み込む必要があります

ステップ3｜ボタンを押したらメモに追加しよう

domready イベントを使おう

InfoWindow 内のボタンは、吹き出しが表示されてから DOM に追加されます。
通常の addEventListener では取得できないため、domready という専用のイベントを使います。

参考：domready の書き方

google.maps.event.addListener(infoWindow, 'domready', () => {
  // 吹き出しが表示されてから実行される
  document.getElementById('ボタンのid').addEventListener('click', () => {
    // ここにメモ追加の処理を書く
  });
});

やってみよう

  • domready の中でボタンを取得して、クリックしたらメモの配列にスポットを追加しましょう
  • console.log でメモの配列に追加されているか確認しましょう
  • 同じスポットが二重に追加されないようにチェックも入れましょう

ヒント：配列の中に同じデータがあるか調べる

配列.find(item => item.name === 調べたい名前)
// 見つかればそのデータが、見つからなければ undefined が返る

⚠️ domready の処理は spots.forEach の中と showMarkers 関数の中の
両方に追加してください。絞り込みでピンが再描画されたあとも動くようにするためです。

ステップ4｜メモを LocalStorage に保存しよう

ページをまたいでもデータを保持しよう

ホーム画面で追加したメモを plan.html でも使うため、localStorage に保存します。
メモに追加するたびに保存し直すようにしましょう。

参考：配列を localStorage に保存・読み込みする書き方

// 保存（配列は文字列に変換してから保存する）
localStorage.setItem('キー名', JSON.stringify(配列));

// 読み込み（文字列を配列に戻す）
const data = JSON.parse(localStorage.getItem('キー名'));

やってみよう

  • メモに追加するたびに localStorage に保存するようにしましょう
  • 開発者ツール → Application → Local Storage を開いて保存されているか確認しましょう

ステップ5｜プラン作成画面へ遷移するボタンを追加しよう

index.html にボタンを追加しよう

.plan エリアやヘッダーなど、わかりやすい場所にボタンを置きましょう。

参考：ボタンを押したら別ページへ移動する書き方

location.href = '移動先のファイル名.html';

やってみよう

  • index.html にボタンを追加して、plan.html へ移動できるようにしましょう
  • まだ plan.html がないので「ページが見つかりません」になります。次のステップで作ります

ステップ6｜プラン作成画面（plan.html）を作ろう

plan.html を新規作成しよう

index.html と同じフォルダに plan.html を作ります。

やってみよう

  • detail.html を参考に HTML の基本構造を書きましょう（ヘッダーはコピーしてくる）
  • 以下の要素を置きましょう
    • メモ一覧を表示するエリア（空の div）
    • 「プランを作成する」ボタン
    • 「← ホームに戻る」ボタン
  • spots.js と新しく作る plan.js を読み込みましょう

⚠️ memo.js は plan.html では読み込まなくて大丈夫です。
メモデータは localStorage から取得するので plan.js 側で処理します。

ステップ7｜プランメモの一覧を表示しよう

plan.js を新規作成しよう

plan.html 専用の JS ファイルです。
localStorage からメモを読み込んで画面に一覧表示します。

参考：localStorage にデータがないときの初期値の書き方

const saved = localStorage.getItem('キー名');
const data = saved ? JSON.parse(saved) : []; // 保存がなければ空配列にする

参考：要素を動的に生成して追加する書き方

const card = document.createElement('div');
card.className = 'クラス名';
card.innerHTML = `表示したいHTML`;
document.querySelector('追加先').appendChild(card);

やってみよう

  • localStorage からメモを読み込んで、スポット名などをカードで表示しましょう
  • メモが 0 件のときは「ホーム画面でスポットをメモに追加してください」と表示しましょう

ステップ8｜スポットを選択できるようにしよう

カードをクリックしたら選択状態にしよう

style.css にはすでに .select-button.active のスタイルがあります。
同じように .memo-card.active のスタイルを追加して、選択中がわかるようにしましょう。

参考：クリックのたびにクラスをつけたり外したりする書き方

要素.classList.toggle('クラス名');

やってみよう

  • style.css に .memo-card.active のスタイルを追加しましょう
  • カードをクリックするたびに見た目が切り替わることを確認しましょう

ステップ9｜3〜5箇所の選択数をチェックしよう

作成ボタンを押したとき選択数を確認しよう

参考：active クラスがついている要素の数を取得する書き方

const selected = document.querySelectorAll('.クラス名.active');
const count = selected.length;

参考：条件を満たさないとき処理を止める書き方

if (条件) {
  alert('メッセージ');
  return; // ここで処理を止める
}

やってみよう

  • 2件以下のときは「3箇所以上選択してください」とアラートを出しましょう
  • 6件以上のときは「5箇所以内で選択してください」とアラートを出しましょう
  • 3〜5件のときは console.log で選択されたスポット名を確認しましょう

ステップ10｜プランを作成して LocalStorage に保存しよう

選択したスポットのデータをまとめて保存しよう

選択されたカードのスポット名をもとに、planMemo から該当データを取り出してプランを作ります。
作成済みのプランは追加していけるように配列で管理します。

参考：配列を別の形の配列に変換する書き方

const new配列 = 元の配列.map(item => 変換処理);

参考：既存の配列に新しいデータを追加して保存し直す流れ

// 1. 既存のデータを読み込む（なければ空配列）
const existing = JSON.parse(localStorage.getItem('キー名')) || [];
// 2. 新しいデータを追加する
existing.push(新しいデータ);
// 3. 丸ごと保存し直す
localStorage.setItem('キー名', JSON.stringify(existing));

やってみよう

  • プランを保存したら location.href でホーム画面に戻りましょう
  • 開発者ツールで plans に複数のプランが保存されているか確認しましょう

ステップ11｜ホーム画面にプランを複数表示しよう

script.js でプラン一覧を読み込んで表示しよう

localStorage から全プランを読み込んで .plan-content に表示します。
プランの中にスポットが入っているので、ループの中でさらにループする書き方になります。

参考：二重ループの書き方

外側の配列.forEach((内側の配列, index) => {
  // プランごとの見出しなど

  内側の配列.forEach(item => {
    // スポットを1件ずつ表示する
  });
});

やってみよう

  • 「プラン1」「プラン2」のように番号つきの見出しをつけて表示しましょう
  • script.js の末尾でこの関数を呼び出すことを忘れずに！
  • プランを複数作成して、ホーム画面に並んで表示されることを確認しましょう
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?