diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100644
index 0000000..f1d137c
--- /dev/null
+++ b/android-chrome-192x192.png
Binary files differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100644
index 0000000..562bb8e
--- /dev/null
+++ b/android-chrome-512x512.png
Binary files differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..7606525
--- /dev/null
+++ b/apple-touch-icon.png
Binary files differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..c2922e5
--- /dev/null
+++ b/favicon-16x16.png
Binary files differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..5d9733d
--- /dev/null
+++ b/favicon-32x32.png
Binary files differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..371ce5e
--- /dev/null
+++ b/favicon.ico
Binary files differ
diff --git a/favorites.html b/favorites.html
new file mode 100644
index 0000000..eb9eb4c
--- /dev/null
+++ b/favorites.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ お気に入りページ
+
+
+
+
+
+
+
+ お気に入りページ
+
+
+
+
+
+
+
+
diff --git a/favorites.js b/favorites.js
new file mode 100644
index 0000000..f707507
--- /dev/null
+++ b/favorites.js
@@ -0,0 +1,38 @@
+const favoritesList = document.getElementById('favorites-list');
+let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+
+function displayFavorites() {
+ favoritesList.innerHTML = '';
+ favorites.forEach(snack => {
+ const li = document.createElement('li');
+ li.innerHTML = `
+ ${snack.name} (${snack.type})
+
+ `;
+ favoritesList.appendChild(li);
+ });
+}
+
+function removeFromFavorites(id) {
+ if (confirm('本当に削除しますか？')) {
+ favorites = favorites.filter(snack => snack.id !== id);
+ localStorage.setItem('favorites', JSON.stringify(favorites));
+ displayFavorites();
+ }
+}
+
+function sortFavorites(sortBy) {
+ if (sortBy === 'name') {
+ favorites.sort((a, b) => a.name.localeCompare(b.name));
+ } else if (sortBy === 'date') {
+ favorites.sort((a, b) => new Date(b.dateAdded) - new Date(a.dateAdded));
+ }
+ displayFavorites();
+}
+
+document.getElementById('sort-select').addEventListener('change', (e) => {
+ sortFavorites(e.target.value);
+});
+
+// 初期表示
+displayFavorites();
diff --git a/map.js b/map.js
new file mode 100644
index 0000000..a0c3f77
--- /dev/null
+++ b/map.js
@@ -0,0 +1,75 @@
+// 店舗データ
+const snacks = [
+ { id: 1, name: "スナック緑", lat: 38.91784466465069, lon: 139.83580858552295, type: "定休日:月曜日 営業時間 19:00〜0:00" },
+ { id: 2, name: "スナックLink", lat: 38.918328820566366, lon: 139.83473570196918, type: "定休日:なし 営業時間 20:00〜1:00" },
+ { id: 3, name: "スナックCherir", lat: 38.91731041980675, lon: 139.8348859056667, type: "定休日:日曜日 営業時間 20:00〜0:00" }
+];
+
+// 地図の初期設定
+const map = L.map('map').setView([38.9178, 139.8351], 16);
+
+// OpenStreetMapのタイルレイヤーを追加
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+// マーカーを格納する配列
+let markers = [];
+
+// スナックのマーカーを追加
+function addMarkers() {
+ snacks.forEach(snack => {
+ const marker = L.marker([snack.lat, snack.lon]).addTo(map);
+ marker.bindPopup(createPopupContent(snack));
+ markers.push(marker);
+ });
+}
+
+// ポップアップの内容を作成
+function createPopupContent(snack) {
+ const div = document.createElement('div');
+ div.innerHTML = `
+ ${snack.name}
+ ${snack.type}
+
+ `;
+ return div;
+}
+
+// お気に入り登録用のローカルストレージ管理
+function addToFavorites(id) {
+ let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+ const snack = snacks.find(s => s.id === id);
+ if (snack && !favorites.some(f => f.id === id)) {
+ favorites.push({...snack, dateAdded: new Date().toISOString()});
+ localStorage.setItem('favorites', JSON.stringify(favorites));
+ alert(`${snack.name}をお気に入りに追加しました。`);
+ }
+}
+
+// 検索機能
+document.getElementById('search').addEventListener('input', (e) => {
+ const searchTerm = e.target.value.toLowerCase();
+ snacks.forEach((snack, index) => {
+ if (snack.name.toLowerCase().includes(searchTerm) || snack.type.toLowerCase().includes(searchTerm)) {
+ markers[index].addTo(map);
+ } else {
+ map.removeLayer(markers[index]);
+ }
+ });
+});
+
+// ジオロケーション
+function showUserLocation() {
+ if ("geolocation" in navigator) {
+ navigator.geolocation.getCurrentPosition((position) => {
+ const userLocation = [position.coords.latitude, position.coords.longitude];
+ L.marker(userLocation).addTo(map)
+ .bindPopup("あなたの現在地")
+ .openPopup();
+ map.setView(userLocation, 13);
+ });
+ }
+}
+
+// 初期化
+addMarkers();
+showUserLocation();
diff --git a/snackmap.html b/snackmap.html
new file mode 100644
index 0000000..2f90da3
--- /dev/null
+++ b/snackmap.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ スナック案内マップ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..d1c81b7
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,139 @@
+/* グローバル設定 */
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f9;
+ color: #333;
+ line-height: 1.6;
+}
+
+h1 {
+ text-align: center;
+ margin: 0;
+ padding: 20px;
+ background-color: #0078d7;
+ color: white;
+ font-size: 26px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* 地図表示 */
+#map {
+ margin: 20px auto;
+ width: 90%;
+ height: 500px;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* リンクスタイル */
+a {
+ display: inline-block;
+ margin: 20px auto;
+ padding: 10px 20px;
+ text-decoration: none;
+ background-color: #0078d7;
+ color: white;
+ border-radius: 5px;
+ font-weight: bold;
+ text-align: center;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+a:hover {
+ background-color: #005a9e;
+ transform: translateY(-2px);
+}
+
+/* お気に入りリスト */
+#favorites {
+ width: 90%;
+ max-width: 800px;
+ margin: 20px auto;
+ padding: 20px;
+ background-color: #ffffff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#favorites h3 {
+ text-align: center;
+ color: #0078d7;
+ font-size: 22px;
+ margin-bottom: 15px;
+}
+
+/* お気に入りアイテム (カードスタイル) */
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+ul li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #f9f9f9;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ padding: 15px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+ul li:hover {
+ background-color: #f1f1f1;
+}
+
+ul li button {
+ background-color: #ff5252;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ padding: 10px 15px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+ul li button:hover {
+ background-color: #d32f2f;
+ transform: scale(1.05);
+}
+
+/* フッタースタイル (必要なら追加) */
+footer {
+ text-align: center;
+ margin-top: 30px;
+ padding: 10px 0;
+ font-size: 14px;
+ color: #888;
+ background-color: #0078d7;
+ color: white;
+}
+
+/* モバイル対応 */
+@media (max-width: 600px) {
+ h1 {
+ font-size: 22px;
+ padding: 15px;
+ }
+
+ #map {
+ height: 400px;
+ }
+
+ ul li {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 15px;
+ }
+
+ ul li button {
+ margin-top: 10px;
+ width: 100%;
+ }
+}