Air

旅行記

📍 GPS位置を移動中

Air — 地図と写真でエア旅行した気分になる

AI生成

写真・GPX

📷 写真をドラッグ＆ドロップまたはタップ
📍 GPXファイル

ブログ

新しいタブで開く

旅行アニメ

生成中...

地球の歩き方

アニメ

アニメ画像

旅行記

スタンプ一覧

AI設定

AI機能で使用するプロバイダーとAPIキーを設定します。旅行記はリーズナブルなモデル、アニメは高性能モデルを使用します。

Air ヘルプ (v1.6.5)

Air - 地図と写真でエア旅行

GPS付き写真を地図上に表示し、スライドショーや旅行記でトリップを楽しむWebアプリです。

📋 バージョン v1.6.5 の新機能

  • 🌐 Mapbox 3D地図: 自動再生中に 3D 地図に切り替え。ルート線・ポイントがグロー効果で強調表示（config.js で MAPBOX_TOKEN を設定）
  • 📱 PWA対応: Service Worker でオフラインキャッシュ。初回以降の表示を高速化
  • 💾 IndexedDB GPXキャッシュ: GPX ファイルを 24 時間キャッシュ
  • ✨ 出来事生成: AI アニメに新スタイル。旅の印象的な出来事を 5 コマで生成（キャラ画像必須）
  • 📤 旅行記シェア: Twitter / Instagram / Facebook で旅行記を共有
  • ⚡ パフォーマンス最適化: マップマーカー更新の debounce、トリップリストのリアルタイム同期

🌍 閲覧モード（ログインなし）

公開トリップを見る:

  1. 右側パネルのトリップ一覧から選択
  2. 写真サムネイルをクリックして地図上に表示
  3. 「▶ 再生」でスライドショー自動再生
  4. 「前」「次」ボタンで写真を手動で切り替え（非表示状態で「次」を押すと最初の写真を表示）

トリップ所在で絞り込み:

  • ドメインで自動適用: airj.ktrips.net / air.jp.ktrips.net → 日本のトリップのみ、airg.ktrips.net / air.gl.ktrips.net → グローバルのトリップのみ
  • URLパラメータ: ?region=japan または ?region=global

地図操作:

  • 右上の🗺️ボタンで地図・地形・航空写真を切り替え
  • マウスホイールでズーム、ドラッグで移動
  • 写真マーカーをクリックして詳細表示

自動再生:

  • 「▶ 再生」でスライドショー開始。再生終了後は地図全体表示に自動復帰
  • Mapboxトークンが設定されている場合、再生中は Mapbox 3D 地図に切り替わりルート線・ポイントがグロー効果で強調表示
  • 画面下部の ■ 停止ボタンでいつでも停止可能

動画・旅行記:

  • 右上メニュー（☰）から動画・旅行記・スタンプラリーを表示
  • 動画表示中は画面上中央のコントロールバー（⏮ ⏸/▶ ⏭ ✕）で操作。動画終了後は自動で次の動画へ
  • YouTube・Vimeo・YouTube Shortsの動画URLに対応
  • 旅行記がある場合、トリップ名をクリックで旅行記を表示

📖 旅行記の表示

  • PC（デスクトップ）: ルート地図と目次（ランドマーク一覧）が横並び表示。常時展開
  • モバイル: ルート地図・目次はアコーディオン折り畳み（タップで展開）
  • アニメストリップ: サマリー直下に詳細アニメを横並びでプレビュー表示
  • 動画ポイント: 動画URLがあるポイントは動画サムネイルをメイン表示。クリックで動画を再生
  • 旅行記履歴: 右側メニューの旅行記履歴から過去の旅行記を参照。横の ✕ ボタンで削除可能
  • シェア: 旅行記下部の Twitter / Instagram / Facebook ボタンで共有（Instagram はURLをコピー）

✏️ 編集モード（ログイン必要）

トリップ所在フィルタ（ログイン時のみ表示）:

  • トリップ一覧の選択リスト（All / Japan / Global）で表示を絞り込み
  • Japan: 写真のGPSが日本国内のトリップのみ
  • Global: 写真のGPSが日本国外のトリップのみ

1. ログインして始める:

  1. 右上メニュー（☰）→「Googleでログイン」
  2. 「新規」ボタンで新しいトリップを作成

2. 写真をアップロード:

  • 画面に写真をドラッグ＆ドロップ（複数枚可）
  • GPS情報付き写真は自動的に地図上に配置、地名も自動取得
  • GPS情報がない写真は地図をクリックして位置を指定

3. ポイント情報を編集:

  1. 地図上の写真マーカーをクリック
  2. ✏️編集ボタンをクリック
  3. ポイント名・説明・ランドマーク番号・動画URLを入力
  4. 「保存」ボタンで保存

3b. GPS位置を変更（マーカードラッグ）:

  1. ログイン済みの状態で地図上のマーカーをドラッグ
  2. 移動先でドロップすると地図下部に保存バーが表示
  3. 「保存」で新しい位置を確定、「元に戻す」でキャンセル

4. 写真の削除:

  • 📷写真削除: 写真のみ削除、ポイント情報は残る
  • 🗑️全削除: ポイントごと完全に削除

5. GPXルートを追加:

  1. 右上メニュー→「GPXアップロード」
  2. GPXファイルを選択
  3. ルートが地図上に表示されます

6. トリップを設定:

  • 右上メニューでトリップ名・説明を入力
  • ブログURLを追加（説明欄にリンク表示）
  • 動画URLを追加（YouTube/Vimeo対応）
  • カラーピッカーでルート色を選択（15色）

7. 保存と公開:

  1. 「保存」ボタンでFirestoreに保存
  2. 「公開する」にチェック→誰でも閲覧可能に
  3. チェックを外す→自分だけが見られる

📁 親子トリップ（フォルダ管理）

複数のトリップを整理:

  1. 「親トリップ」にチェック→フォルダとして使用
  2. 親トリップには写真やGPXは追加しない
  3. 子トリップで「親を選択」→親トリップを選択
  4. 「＋ 子トリップを追加」で新しい子を作成

親トリップ選択時の表示:

  • 全子トリップのAIアニメサムネイルをまとめてインライン表示（クリックでスライドショー）
  • 旅行記ボタン（📖）をクリックすると子トリップ一覧が表示され、各トリップの旅行記を確認できる
  • 旅行記一覧では各子トリップ名の横に🎬動画ボタンも表示（動画がある場合）
  • スタンプラリーがある場合は🎫スタンプ一覧ボタンを表示
  • 動画ボタン（🎬）で親トリップの動画 → 各子トリップの動画 → 各ポイントの動画を連続再生

🤖 AI機能（オプション）

1. AI設定:

  • 右上メニュー→「AI設定」
  • プロバイダー選択: Gemini / OpenAI / Anthropic
  • 各プロバイダーのAPIキーを入力
  • Nano Banana Pro2のAPIキー（アニメ生成用）

2. AI旅行記生成:

  1. 写真・ポイント説明・GPSを用意（動画URLがあるポイントは自動的に動画サムネイルを使用）
  2. 右側メニュー→「AI旅行記生成」
  3. 旅行記が生成されます（サマリー・目次・ルート地図・ランドマーク別詳細の構成）
  4. ヘッダーの「旅行記」ボタンで表示
  5. 過去の旅行記は旅行記履歴ボタンから参照・削除可能

3. AIアニメ生成:

  1. 先に旅行記を生成
  2. 右側メニューでスタイルを選択→「アニメ生成」
  3. スタイル: 地球の歩き方表紙風 / 少年ジャンプ表紙風 / 旅行雑誌表紙風 / 詳細4ページ
  4. 地球の歩き方表紙風はタイトルをトリップ名から自動生成し、ルートミニマップを表紙に追加
  5. 生成後は ← → ボタンで並び替え、✕ で削除可能
  6. 詳細アニメは旅行記のサマリー下にプレビュー表示

4. 出来事生成:

  1. キャラ画像をアップロード（必須）
  2. スタイルで「出来事生成」を選択
  3. テキストボックスに旅の印象的な出来事を入力（例: 山道で老夫婦の車に乗せてもらった）
  4. 「アニメ生成」で 5 コマキャラアニメを生成
  5. 生成済みアニメは旅行記の「出来事、出会い」セクションに表示

📱 モバイル機能

  • トリップ名タップ: 旅行記を表示（旅行記がある場合）
  • 下部の再生ボタン: スライドショー開始
  • スワイプ: 写真を左右に切り替え
  • メニュー: 右上の☰から各機能にアクセス
  • ヘッダー表示: 隠れたヘッダーはプルダウンバーを下スワイプ、または地図上部を下スワイプで表示
  • 自動再生中: 3Dマップでルート・ポイントがグロー表示。画面下部の ■ 停止ボタンで停止。再生終了後は自動で地図に復帰
  • 動画再生中: 画面上中央のコントロールバー（⏮ ⏸/▶ ⏭ ✕）で前の動画・再生停止・次の動画・終了の操作が可能
  • 旅行記: 地図・目次はアコーディオン（タップで展開）

💡 Tips

  • PWAインストール: ブラウザの「ホーム画面に追加」でアプリとしてインストール可能。オフラインでも基本機能が使えます
  • 3D地図: Mapboxトークンを設定すると自動再生中に 3D 地図でルートをグロー表示。未設定でも 2D 地図で動作します
  • 写真ナビゲーション: 写真が非表示のとき「次へ」を押すと最初の写真を表示
  • トリップ所在フィルタ: ログイン時は All / Japan / Global で絞り込み。URLの ?region=japan やドメイン（airj/airg.ktrips.net）でも指定可能
  • GPS付き写真: スマホで位置情報ONで撮影した写真を使用
  • ルート表示: GPXファイルで移動軌跡を記録
  • ランドマーク: ポイントにランドマーク番号を付けてスタンプラリー＆旅行記の目次に自動掲載
  • 動画連携: ポイントに動画URLを設定すると旅行記でサムネイルをメイン表示
  • カラー: トリップごとに15色から選択して地図上で区別
  • YouTube Shorts: 通常のYouTube URLに加え、Shorts形式のURLも動画として登録可能
  • 公開設定: 公開/非公開はいつでも変更可能

❓ よくある質問

Q: 写真が地図に表示されません

A: 写真にGPS情報が含まれているか確認してください。GPS情報がない場合は、地図をクリックして手動で位置を指定できます。

Q: 保存したトリップが消えました

A: ログアウトすると自分のトリップは見えなくなります。再度ログインしてください。

Q: 動画が再生されません

A: YouTube/VimeoのURLを使用してください。埋め込み制限がある動画は再生できません。

Q: 旅行記で動画サムネイルが表示されません

A: ポイントの編集画面で動画URLを設定してから旅行記を再生成してください。

Q: AIアニメのタイトルがトリップ名と違います

A: 地球の歩き方表紙風スタイルは「〇〇の歩き方」形式で自動生成します（日付・活動名を除いて地名を抽出）。

詳細は GitHub をご覧ください

🗺️ Mapbox 利用統計

🤖 AI 使用量チェック: Gemini API / Claude API