JavaScript | Web API：位置情報・センサー － プライバシー配慮

センサーとプライバシーは「技術」じゃなくて「人の生活」に触れている話

位置情報・カメラ・マイク・DeviceMotion・DeviceOrientation…。
これらは全部、「あなたがどこにいて、何をしていて、どう動いているか」に直結する情報です。

だからセンサーを使うときは、
「どう実装するか」より先に「人のプライバシーをどう守るか」 を考える必要があります。

ここを雑にすると、
技術的には動いていても「怖いサービス」「信用できないサイト」になります。
逆に、ここを丁寧に設計できると、初心者のうちから一気に“プロ寄り”の感覚になります。

そもそも「プライバシー配慮」って何を気にすること？

センサーが漏らしうる情報をイメージする

まず、「センサーから何が分かってしまうか」を具体的に想像してみましょう。

• 位置情報
  • どこに住んでいるか
  • どの時間帯にどこにいることが多いか
  • よく行く店・職場・学校
• カメラ
  • 顔・部屋・家族・持ち物
  • 生活環境・経済状況
• マイク
  • 会話内容
  • 周囲の人の声
• DeviceMotion / DeviceOrientation
  • 歩いているか・走っているか・止まっているか
  • 端末の持ち方・使い方のクセ

これらは全部、「その人の生活そのもの」です。
だからこそ、「取れるから取る」ではなく「本当に必要なぶんだけ、慎重に扱う」 という姿勢が必要になります。

原則 1: 「最小限だけ取る」が基本ルール

いらない情報はそもそも集めない

プライバシー配慮の一番の基本はこれです。

いらない情報は、そもそも取らない。

例えば、こういう違いがあります。

悪い設計の例（なんとなく全部取る）

• 近くの店舗を表示したいだけなのに、
  高精度の位置情報をずっと追跡し続ける
• 1 回の現在地で足りるのに、watchPosition で延々と監視する

良い設計の例（目的に合わせて最小限にする）

• 「近くの店舗を出すだけなら、ざっくりした現在地で十分」
  → getCurrentPosition を 1 回だけ呼ぶ
• ランニングアプリなど、本当に継続追跡が必要なときだけ watchPosition を使う

コードでいうと、こういう差になります。

// 悪い例：なんとなく watchPosition を使ってしまう
navigator.geolocation.watchPosition(success, error);

// 悪い例：なんとなく watchPosition を使ってしまう
navigator.geolocation.watchPosition(success, error);

// 良い例：一回だけで足りるなら getCurrentPosition にする
navigator.geolocation.getCurrentPosition(success, error);

// 良い例：一回だけで足りるなら getCurrentPosition にする
navigator.geolocation.getCurrentPosition(success, error);

「どの API を使うか」は、
「どれくらいの情報が本当に必要か」 から逆算して決める、という感覚を持ってほしいです。

原則 2: 「何に使うか」を先にちゃんと伝える

ダイアログ任せにしないで、自分の言葉で説明する

ブラウザは、位置情報やセンサーを使うときに
「このサイトの位置情報の使用を許可しますか？」
といったダイアログを出してくれます。

でも、これだけだとユーザーはこう思います。

「え、何に使うの？」
「許可したら何が起きるの？」

だからこそ、アプリ側で先に説明します。

<p>
  現在地を使って、近くのカフェを表示します。<br>
  位置情報はサーバーに保存せず、このページ内だけで利用します。
</p>
<button id="useLocationBtn">現在地を使う</button>
<p id="message"></p>

const btn = document.querySelector("#useLocationBtn");
const message = document.querySelector("#message");

btn.addEventListener("click", () => {
  message.textContent = "ブラウザのダイアログで「許可」を選ぶと、近くのカフェを表示できます。";

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      message.textContent = "現在地を取得しました。近くのカフェを検索中…";
      // ここで検索処理を行う
    },
    (err) => {
      message.textContent = "位置情報を利用できませんでした。";
    }
  );
});

const btn = document.querySelector("#useLocationBtn");
const message = document.querySelector("#message");

btn.addEventListener("click", () => {
  message.textContent = "ブラウザのダイアログで「許可」を選ぶと、近くのカフェを表示できます。";

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      message.textContent = "現在地を取得しました。近くのカフェを検索中…";
      // ここで検索処理を行う
    },
    (err) => {
      message.textContent = "位置情報を利用できませんでした。";
    }
  );
});

ここで大事なのは、説明の中に

• 何のために使うのか
• どこまで使うのか（保存するのか、ページ内だけか）

を含めることです。

「理由が分かると、人は安心して許可しやすくなる」
これは技術というより、人間の心理の話です。

原則 3: 「拒否されても成立する」設計にする

拒否はエラーじゃなくて“正当な選択”

位置情報・カメラ・マイク・モーション…。
どれも「拒否されるのが普通」です。

だから、拒否されたときに

• 何もできなくなる
• 真っ白な画面になる
• 「エラー」とだけ出る

のは、かなり不親切です。

位置情報の例で、良いパターンを見てみましょう。

navigator.geolocation.getCurrentPosition(
  (pos) => {
    // 現在地から店舗検索
    showShopsNear(pos.coords);
  },
  (error) => {
    if (error.code === error.PERMISSION_DENIED) {
      message.textContent =
        "位置情報の利用が拒否されました。エリアを選択して店舗を表示できます。";
      showAreaSelectUI(); // 都道府県や駅名を選べる UI を出す
    } else {
      message.textContent = "位置情報を取得できませんでした。";
    }
  }
);

navigator.geolocation.getCurrentPosition(
  (pos) => {
    // 現在地から店舗検索
    showShopsNear(pos.coords);
  },
  (error) => {
    if (error.code === error.PERMISSION_DENIED) {
      message.textContent =
        "位置情報の利用が拒否されました。エリアを選択して店舗を表示できます。";
      showAreaSelectUI(); // 都道府県や駅名を選べる UI を出す
    } else {
      message.textContent = "位置情報を取得できませんでした。";
    }
  }
);

ここでやっているのは、

• 拒否されたら「ダメでした」で終わらせない
• 代わりに「手動でエリアを選ぶ」ルートを用意する

という設計です。

「センサーはあくまで便利な追加機能であって、必須ではない」
という考え方を持てると、アプリが強くなります。

原則 4: 「保存」と「共有」を慎重に扱う

取ったデータを“どこまで持つか”を決める

プライバシー的に一番重いのは、
「センサーから取ったデータをサーバーに送って保存する」ことです。

例えば、位置情報なら

• その場で近くの店舗を出すだけ（サーバーに送らない）
• サーバーに送るが、処理が終わったらすぐ破棄する
• ユーザーの行動ログとして長期間保存する

など、レベルが全然違います。

初心者のうちは、まず

できるだけ「その場だけで使って、サーバーには送らない」設計を選ぶ

ことを意識してみてください。

例: クライアントだけで完結させるパターン（イメージ）

navigator.geolocation.getCurrentPosition((pos) => {
  const { latitude, longitude } = pos.coords;

  // 仮に、クライアント側に「店舗一覧」があるとする
  const nearShops = allShops.filter((shop) => {
    return distance(shop.lat, shop.lng, latitude, longitude) < 1000;
  });

  renderShops(nearShops); // サーバーに位置情報を送らずに完結
});

navigator.geolocation.getCurrentPosition((pos) => {
  const { latitude, longitude } = pos.coords;

  // 仮に、クライアント側に「店舗一覧」があるとする
  const nearShops = allShops.filter((shop) => {
    return distance(shop.lat, shop.lng, latitude, longitude) < 1000;
  });

  renderShops(nearShops); // サーバーに位置情報を送らずに完結
});

もちろん、実際のサービスではサーバー側で検索することも多いですが、
その場合でも

• どのくらいの期間保存するのか
• 何の目的で保存するのか
• ユーザーにそれを説明できるか

を意識して設計するのが大事です。

原則 5: 「トラッキングに使われないか」を一瞬立ち止まって考える

組み合わせると“指紋”になりうる情報

バッテリー API が廃止傾向になった話ともつながりますが、
一見無害そうな情報でも、組み合わせると「その人を特定する手がかり」になりえます。

例えば、こういう組み合わせです。

• 位置情報のパターン（よくいる場所・時間帯）
• 端末の種類・画面サイズ・言語設定
• センサーの微妙なクセ（ノイズの出方など）

これらを大量に集めると、
「この人はこの人だな」とかなり高い精度で推測できてしまう可能性があります。

初心者のうちから、
「この情報、本当に必要？ トラッキングに使われたら嫌じゃない？」
と一瞬立ち止まる癖をつけておくと、
プライバシー感度が一気に上がります。

原則 6: 「HTTPS と権限ダイアログ」はプライバシーの“入口”

なぜ HTTPS じゃないとダメなのか

位置情報・カメラ・マイク・センサー系の多くは、
「安全なコンテキスト（secure context）」でしか動きません。

つまり、基本的に

• https:// で配信されているページ
• http://localhost（開発用の特例）

でないと、API が使えなかったり、権限ダイアログが出なかったりします。

理由はシンプルで、

暗号化されていない通信で、
位置情報やカメラ映像を扱うのは危険すぎる

からです。

「HTTPS じゃないと動かない」のは、
「ユーザーのプライバシーを守るための最低ライン」 だと捉えてください。

権限ダイアログは“最後の砦”であって“説明の代わり”ではない

ブラウザの権限ダイアログは、
ユーザーに「許可／拒否」を選ばせる最後の砦です。

でも、それは

• アプリ側の説明不足を補うものではない
• 「とりあえずダイアログ出しとけばいい」ものでもない

ということを覚えておいてほしいです。

あなたがやるべきことは、

• 何に使うかを先に説明する
• ユーザーの操作をきっかけに権限を求める
• 拒否されたときのルートを用意する

そのうえで、ブラウザのダイアログが
「最終確認」として出てくる、というイメージです。

小さな例で「プライバシー配慮」をコードに落とし込む

例: 「現在地で天気を出す」けど、拒否されても使えるページ

HTML:

<p>
  現在地を使って、今いる場所の天気を表示できます。<br>
  位置情報はサーバーに保存せず、このページ内だけで利用します。
</p>
<button id="useLocationBtn">現在地の天気を見る</button>

<p>または、都市名を入力してください:</p>
<input id="cityInput" placeholder="例: Tokyo">
<button id="useCityBtn">都市名で天気を見る</button>

<pre id="result"></pre>

JavaScript（プライバシー配慮を意識した書き方のイメージ）:

const useLocationBtn = document.querySelector("#useLocationBtn");
const useCityBtn = document.querySelector("#useCityBtn");
const cityInput = document.querySelector("#cityInput");
const result = document.querySelector("#result");

function showWeatherByCoords(lat, lng) {
  // 本当はここで API を叩くが、例なのでダミー表示
  result.textContent = `緯度 ${lat}, 経度 ${lng} の天気を取得しました（ダミー）。`;
}

function showWeatherByCity(city) {
  result.textContent = `${city} の天気を取得しました（ダミー）。`;
}

useLocationBtn.addEventListener("click", () => {
  if (!("geolocation" in navigator)) {
    result.textContent = "このブラウザは位置情報に対応していません。都市名を入力してください。";
    return;
  }

  result.textContent =
    "ブラウザのダイアログで「許可」を選ぶと、現在地の天気を表示できます。";

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude } = pos.coords;
      showWeatherByCoords(latitude, longitude);
    },
    (error) => {
      if (error.code === error.PERMISSION_DENIED) {
        result.textContent =
          "位置情報の利用が拒否されました。都市名を入力して天気を表示できます。";
      } else {
        result.textContent = "位置情報を取得できませんでした。都市名を入力してください。";
      }
    }
  );
});

useCityBtn.addEventListener("click", () => {
  const city = cityInput.value.trim();
  if (!city) {
    result.textContent = "都市名を入力してください。";
    return;
  }
  showWeatherByCity(city);
});

const useLocationBtn = document.querySelector("#useLocationBtn");
const useCityBtn = document.querySelector("#useCityBtn");
const cityInput = document.querySelector("#cityInput");
const result = document.querySelector("#result");

function showWeatherByCoords(lat, lng) {
  // 本当はここで API を叩くが、例なのでダミー表示
  result.textContent = `緯度 ${lat}, 経度 ${lng} の天気を取得しました（ダミー）。`;
}

function showWeatherByCity(city) {
  result.textContent = `${city} の天気を取得しました（ダミー）。`;
}

useLocationBtn.addEventListener("click", () => {
  if (!("geolocation" in navigator)) {
    result.textContent = "このブラウザは位置情報に対応していません。都市名を入力してください。";
    return;
  }

  result.textContent =
    "ブラウザのダイアログで「許可」を選ぶと、現在地の天気を表示できます。";

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude } = pos.coords;
      showWeatherByCoords(latitude, longitude);
    },
    (error) => {
      if (error.code === error.PERMISSION_DENIED) {
        result.textContent =
          "位置情報の利用が拒否されました。都市名を入力して天気を表示できます。";
      } else {
        result.textContent = "位置情報を取得できませんでした。都市名を入力してください。";
      }
    }
  );
});

useCityBtn.addEventListener("click", () => {
  const city = cityInput.value.trim();
  if (!city) {
    result.textContent = "都市名を入力してください。";
    return;
  }
  showWeatherByCity(city);
});

ここに、プライバシー配慮のエッセンスが詰まっています。

• 位置情報の用途を説明してからボタンを押させる
• 拒否されたら「都市名入力」という代替ルートを用意する
• 「保存しない」と明言して、安心感を出す

こういう小さな配慮の積み重ねが、
「このサービスは信用できるな」という印象につながります。

初心者として「プライバシー配慮」で本当に掴んでほしいこと

まとめると、センサー利用のプライバシー配慮はこういう感覚です。

• 取れるから取る、ではなく「本当に必要な最小限だけ取る」
• 何に使うか・どこまで使うかを、先に自分の言葉で説明する
• 拒否・非対応を“普通のケース”として扱い、代替ルートを用意する
• できるだけクライアント内で完結させ、保存や共有は慎重に決める
• 「これ、トラッキングに使われたら嫌じゃない？」と一瞬立ち止まる

センサーを触るときは、
コードを書く前に一度だけ、ユーザー側に立ってこう自問してみてください。

「自分がこのサイトを使うとき、この動きは気持ちいいか？ 怖くないか？」

その問いを忘れない限り、
あなたの実装は、技術的にも人間的にも、ちゃんと“優しい”ものになっていきます。