|
|
| (同じ利用者による、間の16版が非表示) |
| 1行目: |
1行目: |
| __NOINDEX__ | | __NOINDEX__ |
| <templatestyles src="検索結果カード/styles.css" /> | | <templatestyles src="検索結果カード/styles.css" /> |
| <html>
| | {{パンくずリスト | 1=飲食店検索}} |
| <nav class="breadcrumb">
| |
| <a href="/">ホーム</a>
| |
| › <a href="/wiki/飲食店検索">飲食店検索</a>
| |
| <span id='navText'></span>
| |
| </nav>
| |
| <style>
| |
| .breadcrumb {
| |
| font-size: 14px;
| |
| color: #555;
| |
| margin-bottom: 12px;
| |
| } | |
| | |
| .breadcrumb a {
| |
| color: #3366cc;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .breadcrumb span {
| |
| color: #333;
| |
| font-weight: bold;
| |
| } | |
| </style>
| |
| </html>
| |
| == 検索条件 == | | == 検索条件 == |
| <!-- 検索ボックス --> | | <!-- 検索ボックス --> |
| <html>
| | {{検索UI/飲食店}} |
| <form method="get" action="" id="searchForm">
| | {{飲食店検索/script.js}} |
| <div class="search-form-container">
| |
|
| |
| <!-- 検索ボタンエリア -->
| |
| <div class="form-actions">
| |
| <button type="button" class="clear-btn">クリア</button>
| |
| <button type="submit" class="search-btn">検索</button>
| |
| </div>
| |
|
| |
| <!-- 予約可トグル -->
| |
| <div class="form-row toggle-row">
| |
| <span class="toggle-label">予約できる店だけ</span>
| |
| <label class="toggle">
| |
| <input type="checkbox" name="reservable" value="1">
| |
| <span class="slider"></span>
| |
| </label>
| |
| </div>
| |
|
| |
| <!-- 店名検索 -->
| |
| <div class="form-row">
| |
| <input class="form-input" type="text" name="searchText" placeholder="店名で検索" id="searchText"/>
| |
| </div>
| |
|
| |
| <!-- ジャンル -->
| |
| <div class="form-row">
| |
| <select name="genre" id="genre" class="form-select">
| |
| <option value="">すべてのジャンル</option>
| |
| <option value="居酒屋">居酒屋</option>
| |
| <option value="ダイニングバー・バル">ダイニングバー・バル</option>
| |
| <option value="創作料理">創作料理</option>
| |
| <option value="和食">和食</option>
| |
| <option value="洋食">洋食</option>
| |
| <option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
| |
| <option value="中華">中華</option>
| |
| <option value="焼肉・ホルモン">焼肉・ホルモン</option>
| |
| <option value="韓国料理">韓国料理</option>
| |
| <option value="アジア・エスニック料理">アジア・エスニック料理</option>
| |
| <option value="各国料理">各国料理</option>
| |
| <option value="カラオケ・パーティ">カラオケ・パーティ</option>
| |
| <option value="バー・カクテル">バー・カクテル</option>
| |
| <option value="ラーメン">ラーメン</option>
| |
| <option value="お好み焼き・もんじゃ">お好み焼き・もんじゃ</option>
| |
| <option value="カフェ・スイーツ">カフェ・スイーツ</option>
| |
| <option value="その他グルメ">その他グルメ</option>
| |
| </select>
| |
| </div>
| |
|
| |
| <!-- 最寄り駅 -->
| |
| <div class="form-row">
| |
| <select name="station" class="form-select" id="station">
| |
| <option value="">最寄り駅：指定なし</option>
| |
| <option value="川西能勢口駅">川西能勢口</option>
| |
| <option value="雲雀丘花屋敷駅">雲雀丘花屋敷</option>
| |
| <option value="川西池田駅">川西池田</option>
| |
| <option value="北伊丹駅">北伊丹</option>
| |
| <option value="絹延橋駅">絹延橋</option>
| |
| <option value="滝山駅">滝山</option>
| |
| <option value="鴬の森駅">鴬の森</option>
| |
| <option value="鼓滝駅">鼓滝</option>
| |
| <option value="多田駅">多田</option>
| |
| <option value="平野駅">平野</option>
| |
| <option value="一の鳥居駅">一の鳥居</option>
| |
| <option value="畦野駅">畦野</option>
| |
| <option value="山下駅">山下</option>
| |
| <option value="笹部駅">笹部</option>
| |
| <option value="日生中央駅">日生中央</option>
| |
| <option value="妙見口駅">妙見口</option>
| |
| </select>
| |
| </div>
| |
|
| |
| <!-- 予算 -->
| |
| <div class="budget-section">
| |
| <div class="budget-header">
| |
| <span class="budget-title">予算</span>
| |
| <div class="budget-type">
| |
| <label class="radio-label">
| |
| <input type="radio" name="lanch-dinner" value="lanch">
| |
| <span>昼</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="lanch-dinner" value="dinner">
| |
| <span>夜</span>
| |
| </label>
| |
| </div>
| |
| </div>
| |
| <div class="budget-range">
| |
| <select name="budget_min" id="budget_min" class="form-select-small">
| |
| <option value="">下限なし</option>
| |
| <option value="1000">1,000円</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| </select>
| |
| <span class="budget-separator">〜</span>
| |
| <select name="budget_max" id="budget_max" class="form-select-small">
| |
| <option value="">上限なし</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| <option value="5000">5,000円</option>
| |
| </select>
| |
| </div>
| |
| </div>
| |
|
| |
| </div>
| |
| | |
| <!-- こだわり条件（アコーディオン） -->
| |
| <details class="accordion">
| |
| <summary>こだわり条件</summary>
| |
|
| |
| <div class="accordion-content">
| |
| <!-- 支払い方法 -->
| |
| <fieldset class="filter-group">
| |
| <legend>支払い方法</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="credit">
| |
| <span>カード</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="emoney">
| |
| <span>電子マネー</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="qr">
| |
| <span>QRコード決済</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
| | |
| <!-- 禁煙・喫煙 -->
| |
| <fieldset class="filter-group">
| |
| <legend>禁煙 / 喫煙</legend>
| |
| <div class="radio-grid">
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="">
| |
| <span>指定なし</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="non">
| |
| <span>禁煙のみ</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="allow">
| |
| <span>喫煙可</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
| | |
| <!-- メニュー -->
| |
| <fieldset class="filter-group">
| |
| <legend>メニュー</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="tabehodai">
| |
| <span>食べ放題</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="nomihodai">
| |
| <span>飲み放題</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="takeout">
| |
| <span>テイクアウト</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
| | |
| <!-- 設備・サービス -->
| |
| <fieldset class="filter-group">
| |
| <legend>設備・サービス</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="parking">
| |
| <span>駐車場</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="privateroom">
| |
| <span>個室</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="wifi">
| |
| <span>Wi-Fi</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="barrierfree">
| |
| <span>バリアフリー</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="kids">
| |
| <span>お子様連れOK</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="reserve">
| |
| <span>貸切</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
|
| |
| <!-- アコーディオン内の検索ボタン -->
| |
| <div class="form-actions">
| |
| <button type="button" class="clear-btn">クリア</button>
| |
| <button type="submit" class="search-btn">検索</button>
| |
| </div>
| |
| </div>
| |
| </details>
| |
| </form>
| |
| | |
| <style>
| |
| /* ========================================
| |
| フォーム全体
| |
| ======================================== */
| |
| #searchForm {
| |
| max-width: 800px;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .search-form-container {
| |
| background: #fff;
| |
| border-radius: 12px;
| |
| padding: 20px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| margin-bottom: 16px;
| |
| }
| |
| | |
| /* ========================================
| |
| ボタンエリア
| |
| ======================================== */
| |
| .form-actions {
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| gap: 10px;
| |
| margin-bottom: 16px;
| |
| }
| |
| | |
| .clear-btn {
| |
| padding: 10px 20px;
| |
| background: #e0e0e0;
| |
| color: #333;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
| | |
| .clear-btn:hover {
| |
| background: #d0d0d0;
| |
| }
| |
| | |
| .clear-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
| | |
| .search-btn {
| |
| padding: 10px 24px;
| |
| background: #f59e0b;
| |
| color: #fff;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
| | |
| .search-btn:hover {
| |
| background: #d97706;
| |
| }
| |
| | |
| .search-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
| | |
| /* ========================================
| |
| フォーム行
| |
| ======================================== */
| |
| .form-row {
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .toggle-row {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 12px 16px;
| |
| background: #f9fafb;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .toggle-label {
| |
| font-weight: 500;
| |
| color: #333;
| |
| }
| |
| | |
| /* ========================================
| |
| 入力フィールド
| |
| ======================================== */
| |
| .form-input,
| |
| .form-select {
| |
| width: 100%;
| |
| padding: 12px 16px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 8px;
| |
| font-size: 14px;
| |
| transition: all 0.2s;
| |
| background: #fff;
| |
| }
| |
| | |
| .form-input:focus,
| |
| .form-select:focus {
| |
| outline: none;
| |
| border-color: #f59e0b;
| |
| box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
| |
| }
| |
| | |
| .form-input::placeholder {
| |
| color: #9ca3af;
| |
| }
| |
| | |
| /* ========================================
| |
| 予算セクション
| |
| ======================================== */
| |
| .budget-section {
| |
| background: #f9fafb;
| |
| padding: 16px;
| |
| border-radius: 8px;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .budget-header {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .budget-title {
| |
| font-weight: 600;
| |
| color: #333;
| |
| }
| |
| | |
| .budget-type {
| |
| display: flex;
| |
| gap: 16px;
| |
| }
| |
| | |
| .budget-range {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .form-select-small {
| |
| flex: 1;
| |
| padding: 10px 12px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 6px;
| |
| font-size: 13px;
| |
| background: #fff;
| |
| }
| |
| | |
| .budget-separator {
| |
| color: #6b7280;
| |
| font-weight: 500;
| |
| }
| |
| | |
| /* ========================================
| |
| トグルスイッチ
| |
| ======================================== */
| |
| .toggle {
| |
| position: relative;
| |
| width: 44px;
| |
| height: 24px;
| |
| display: inline-block;
| |
| }
| |
| | |
| .toggle input {
| |
| display: none;
| |
| }
| |
| | |
| .slider {
| |
| position: absolute;
| |
| cursor: pointer;
| |
| inset: 0;
| |
| background: #d1d5db;
| |
| border-radius: 24px;
| |
| transition: 0.3s;
| |
| }
| |
| | |
| .slider::before {
| |
| content: "";
| |
| position: absolute;
| |
| height: 18px;
| |
| width: 18px;
| |
| left: 3px;
| |
| top: 3px;
| |
| background: white;
| |
| border-radius: 50%;
| |
| transition: 0.3s;
| |
| }
| |
| | |
| .toggle input:checked + .slider {
| |
| background: #f59e0b;
| |
| }
| |
| | |
| .toggle input:checked + .slider::before {
| |
| transform: translateX(20px);
| |
| }
| |
| | |
| /* ========================================
| |
| ラジオボタン
| |
| ======================================== */
| |
| .radio-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
| | |
| .radio-label input[type="radio"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .radio-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
| | |
| .radio-grid {
| |
| display: flex;
| |
| gap: 16px;
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| /* ========================================
| |
| チェックボックス
| |
| ======================================== */
| |
| .checkbox-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
| | |
| .checkbox-label input[type="checkbox"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .checkbox-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
| | |
| .checkbox-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
| |
| gap: 12px;
| |
| }
| |
| | |
| /* ========================================
| |
| アコーディオン
| |
| ======================================== */
| |
| .accordion {
| |
| background: #fff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 12px;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| }
| |
| | |
| .accordion summary {
| |
| padding: 16px 20px;
| |
| cursor: pointer;
| |
| font-weight: 600;
| |
| font-size: 15px;
| |
| color: #111827;
| |
| background: #f9fafb;
| |
| user-select: none;
| |
| list-style: none;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
| | |
| .accordion summary::-webkit-details-marker {
| |
| display: none;
| |
| }
| |
| | |
| .accordion summary::after {
| |
| content: "▼";
| |
| font-size: 12px;
| |
| color: #6b7280;
| |
| transition: transform 0.3s;
| |
| }
| |
| | |
| .accordion[open] summary::after {
| |
| transform: rotate(180deg);
| |
| }
| |
| | |
| .accordion-content {
| |
| padding: 20px;
| |
| }
| |
| | |
| /* ========================================
| |
| フィルターグループ
| |
| ======================================== */
| |
| .filter-group {
| |
| border: none;
| |
| padding: 0;
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| .filter-group:last-of-type {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .filter-group legend {
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| color: #111827;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| /* ========================================
| |
| ダークモード対応
| |
| ======================================== */
| |
| .skin-theme-clientpref-night .search-form-container,
| |
| .skin-theme-clientpref-night .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .form-input,
| |
| .skin-theme-clientpref-night .form-select,
| |
| .skin-theme-clientpref-night .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .toggle-row,
| |
| .skin-theme-clientpref-night .budget-section,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .toggle-label,
| |
| .skin-theme-clientpref-night .budget-title,
| |
| .skin-theme-clientpref-night .filter-group legend,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .radio-label span,
| |
| .skin-theme-clientpref-night .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
| | |
| /* 自動モード（ダーク時） */ | |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os .search-form-container,
| |
| .skin-theme-clientpref-os .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .form-input,
| |
| .skin-theme-clientpref-os .form-select,
| |
| .skin-theme-clientpref-os .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-row,
| |
| .skin-theme-clientpref-os .budget-section,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-label,
| |
| .skin-theme-clientpref-os .budget-title,
| |
| .skin-theme-clientpref-os .filter-group legend,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .radio-label span,
| |
| .skin-theme-clientpref-os .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
| }
| |
| | |
| /* ========================================
| |
| レスポンシブ
| |
| ======================================== */
| |
| @media (max-width: 600px) {
| |
| .search-form-container {
| |
| padding: 16px;
| |
| }
| |
|
| |
| .budget-header {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| gap: 12px;
| |
| }
| |
|
| |
| .checkbox-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| </style>
| |
| <script>
| |
| document.getElementById('searchForm').addEventListener('submit', function (e) {
| |
| const searchText = document.getElementById('searchText');
| |
| const genre = document.getElementById('genre');
| |
| const station = document.getElementById('station');
| |
| const budget_min = document.getElementById('budget_min');
| |
| const budget_max = document.getElementById('budget_max');
| |
| | |
| if (searchText.value === '') {
| |
| searchText.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (genre.value === '') {
| |
| genre.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (station.value === '') {
| |
| station.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_min.value === '') {
| |
| budget_min.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_max.value === '') {
| |
| budget_max.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| });
| |
| | |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const params = new URLSearchParams(window.location.search);
| |
| | |
| params.forEach((value, key) => {
| |
| // input, select, checkbox, radio 全対応
| |
| const el = document.querySelector(`[name="${key}"]`);
| |
| if (!el) return;
| |
| | |
| // checkbox / radio (name[] の対応含む)
| |
| if (el.type === "checkbox" || el.type === "radio") {
| |
| document.querySelectorAll(`[name="${key}"]`).forEach(input => {
| |
| if (input.value === value) {
| |
| input.checked = true;
| |
| }
| |
| });
| |
| } else {
| |
| // text / select など
| |
| el.value = value;
| |
| }
| |
| });
| |
| | |
| const clearBtn = document.querySelector('.clear-btn');
| |
| const form = document.getElementById('searchForm');
| |
| | |
| clearBtn.addEventListener('click', function () {
| |
| | |
| form.reset();
| |
| });
| |
| | |
| // URLパラメータ取得
| |
| var area = params.get("station");
| |
| var category = params.get("genre");
| |
|
| |
| var reservable = params.get("reservable");
| |
| var smoking = params.get("smoking");
| |
| var tabehodai = params.get("tabehodai");
| |
| var nomihodai = params.get("nomihodai");
| |
| var takeout = params.get("takeout");
| |
| var parking = params.get("parking");
| |
| var kids = params.get("kids");
| |
| var reserve = params.get("reserve");
| |
| var count = document.getElementById("count");
| |
| count = count.dataset.total.toString();
| |
| | |
| // タイトル生成
| |
| let title = "川西市でおすすめのグルメ情報をご紹介！ | 川西図鑑";
| |
| // パンくず用テキスト生成
| |
| let nav = "";
| |
| | |
| if (area) {
| |
| if (category) {
| |
| title = `${area}でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| nav = ` › ${area} × ${category}`;
| |
| } else {
| |
| title = `${area}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`;
| |
| nav = ` › ${area}`;
| |
| }
| |
| } else if (category) {
| |
| title = `川西市でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| nav = ` › ${category}`;
| |
| }
| |
| | |
| // タイトル更新
| |
| document.title = title;
| |
| // パンくず更新
| |
| document.getElementById('navText').textContent = nav;
| |
| | |
| if (area) {
| |
| area = "の" + area;
| |
| } else {
| |
| area = "";
| |
| }
| |
| | |
| if (category) {
| |
| category = "の" + category;
| |
| } else {
| |
| category = "";
| |
| }
| |
| | |
| if (count) {
| |
| count = count + "件";
| |
| } else {
| |
| count = "";
| |
| }
| |
| | |
| if (reservable) {
| |
| reservable = "予約可能";
| |
| } else {
| |
| reservable = "";
| |
| }
| |
| if (smoking == "non" ) {
| |
| smoking = "禁煙";
| |
| } else {
| |
| smoking = "";
| |
| }
| |
| if (tabehodai) {
| |
| tabehodai = "食べ放題あり";
| |
| } else {
| |
| tabehodai = "";
| |
| }
| |
| if (nomihodai) {
| |
| nomihodai = "飲み放題あり";
| |
| } else {
| |
| nomihodai = "";
| |
| }
| |
| if (takeout) {
| |
| takeout = "テイクアウトあり";
| |
| } else {
| |
| takeout = "";
| |
| }
| |
| if (parking) {
| |
| parking = "駐車場あり";
| |
| } else {
| |
| parking = "";
| |
| }
| |
| if (kids) {
| |
| kids = "お子様連れOK";
| |
| } else {
| |
| kids = "";
| |
| }
| |
| if (reserve) {
| |
| reserve = "貸切可能";
| |
| } else {
| |
| reserve = "";
| |
| }
| |
| | |
| const keys = [
| |
| reservable,
| |
| smoking,
| |
| tabehodai,
| |
| nomihodai,
| |
| takeout,
| |
| parking,
| |
| kids,
| |
| reserve,
| |
| ];
| |
| | |
| const valid = keys.filter(v => {
| |
| if (!v) return false;
| |
| if (v.trim() === "") return false;
| |
| return true;
| |
| });
| |
| | |
| // 上から3つだけ取得
| |
| const top3 = valid.slice(0, 3);
| |
| | |
| // description に使う文字列を作成
| |
| let conditionText = "";
| |
| if (top3.length > 0) {
| |
| conditionText = top3.join("・");
| |
| }
| |
| | |
| if (conditionText) {
| |
| conditionText = `${conditionText}のお店を厳選して表示しています。`;
| |
| } else {
| |
| conditionText = ``;
| |
| }
| |
| | |
| // description生成
| |
| let desc = `「川西図鑑」では、兵庫県川西市${area}で人気${category}のお店を ${count}掲載中。${conditionText}営業時間、アクセス、写真、地図などの詳細情報をまとめています。ランチやディナー、テイクアウトなど条件で絞り込みができ、地元でおすすめのお店が見つかります。`;
| |
| | |
| let meta = document.querySelector("meta[name='description']");
| |
| if (!meta) {
| |
| meta = document.createElement("meta");
| |
| meta.name = "description";
| |
| document.head.appendChild(meta);
| |
| }
| |
| | |
| meta.content = desc;
| |
| // 現在のURL取得
| |
| let url = window.location.href;
| |
| // ページネーション
| |
| const fullurl = new URL(location.href);
| |
| const page = parseInt(fullurl.searchParams.get('page') || '1', 10);
| |
| | |
| // 最終ページ制御
| |
| const countMeta = document.getElementById('count');
| |
| if (!countMeta) return;
| |
| | |
| const total = parseInt(countMeta.dataset.total, 10);
| |
| const limit = parseInt(countMeta.dataset.limit, 10);
| |
| | |
| if (isNaN(total) || isNaN(limit) || limit <= 0) return;
| |
| | |
| const lastPage = Math.ceil(total / limit);
| |
| | |
| if (lastPage <= 1) {
| |
| const pagination = document.querySelector('.pagination');
| |
| if (pagination) pagination.style.display = 'none';
| |
| return;
| |
| }
| |
| | |
| if (page > lastPage) {
| |
| fullurl.searchParams.set('page', lastPage);
| |
| location.replace(fullurl.toString());
| |
| }
| |
| | |
| if (page < 1) {
| |
| fullurl.searchParams.set('page', 1);
| |
| location.replace(fullurl.toString());
| |
| }
| |
| | |
| function makeLink(targetPage) {
| |
| fullurl.searchParams.set('page', targetPage);
| |
| return fullurl.toString();
| |
| }
| |
| | |
| // 各ボタン
| |
| const first = document.querySelector('[data-role="first-page"]');
| |
| const prev = document.querySelector('[data-role="prev-page"]');
| |
| const next = document.querySelector('[data-role="next-page"]');
| |
| const last = document.querySelector('[data-role="last-page"]');
| |
| | |
| if (page <= 1) {
| |
| first.classList.add('disabled');
| |
| prev.classList.add('disabled');
| |
| } else {
| |
| first.href = makeLink(1);
| |
| prev.href = makeLink(page - 1);
| |
| }
| |
| | |
| if (page >= lastPage) {
| |
| next.classList.add('disabled');
| |
| last.classList.add('disabled');
| |
| } else {
| |
| next.href = makeLink(page + 1);
| |
| last.href = makeLink(lastPage);
| |
| }
| |
| | |
| // 数字ボタン
| |
| const pageNumbers = document.querySelector('[data-role="page-numbers"]');
| |
| if (!pageNumbers) return;
| |
| | |
| const start = Math.max(1, page - 2);
| |
| const end = Math.min(lastPage, page + 2);
| |
| | |
| for (let i = start; i <= end; i++) {
| |
| const link = document.createElement('a');
| |
| link.textContent = i;
| |
| | |
| const newUrl = new URL(url);
| |
| newUrl.searchParams.set('page', i);
| |
| link.href = newUrl.toString();
| |
| | |
| if (i === page) {
| |
| link.classList.add('current');
| |
| }
| |
| | |
| pageNumbers.appendChild(link);
| |
| }
| |
| });//# sourceURL=foobar.js
| |
| </script>
| |
| </html>
| |
| {{#vardefine:hitCount | | | {{#vardefine:hitCount | |
| {{#cargo_query: | | {{#cargo_query: |
| tables=飲食店情報 | | tables=図鑑情報 |
| |fields=COUNT(*) | | |fields=COUNT(*) |
| |where=( | | |where=( |
| (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') | | 図鑑情報.カテゴリ='飲食店' |
| OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') | | AND ((図鑑情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') |
| OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%')) | | OR 図鑑情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') |
| {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }} | | OR 図鑑情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%')) |
| {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }} | | {{#if: {{#urlget:genre}} | AND 図鑑情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }} |
| | {{#if: {{#urlget:station}} | AND 図鑑情報.最寄り = '{{#urlget:station}}' }} |
| {{#if: {{#urlget:lanch-dinner}} | | | {{#if: {{#urlget:lanch-dinner}} | |
| {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}} | | {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 図鑑情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 図鑑情報.予算昼下限 < {{#urlget:budget_max}} }}}} |
| {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }} | | {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 図鑑情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 図鑑情報.予算夜下限 < {{#urlget:budget_max}} }} }} }} |
| {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }} | | {{#ifeq: {{#urlget:smoking}} | non | AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }} |
| {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%分煙%') }} | | {{#ifeq: {{#urlget:smoking}} | allow | AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%分煙%') }} |
| {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }} | | {{#if: {{#urlget:tabehodai}} | AND 図鑑情報.食べ放題 = 1 }} |
| {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }} | | {{#if: {{#urlget:nomihodai}} | AND 図鑑情報.飲み放題 = 1 }} |
| {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }} | | {{#if: {{#urlget:takeout}} | AND 図鑑情報.テイクアウト = 1 }} |
| {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }} | | {{#if: {{#urlget:parking}} | AND 図鑑情報.駐車場 = 1 }} |
| {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }} | | {{#if: {{#urlget:privateroom}} | AND 図鑑情報.個室 = 1 }} |
| {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }} | | {{#if: {{#urlget:wifi}} | AND 図鑑情報.WiFi = 'あり' }} |
| {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }} | | {{#if: {{#urlget:barrierfree}} | AND 図鑑情報.バリアフリー = 1 }} |
| {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }} | | {{#if: {{#urlget:kids}} | AND 図鑑情報.お子様連れ = 1 }} |
| {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }} | | {{#if: {{#urlget:reserve}} | AND 図鑑情報.貸切 = 1 }} |
| {{#if: {{#urlget:reservable}} | AND 飲食店情報.予約 = 1 }} | | {{#if: {{#urlget:reservable}} | AND 図鑑情報.予約 = 1 }} |
| ) | | {{#if: {{#urlget:aria}} | AND 図鑑情報.エリア = '{{#urlget:aria}}' }} |
| | )) |
| }} | | }} |
| }} | | }}{{#vardefine:page|{{#urlget:page|1}}}}{{#vardefine:limit|30}}{{#vardefine:offset|{{#expr: ({{#var:page}} - 1) * {{#var:limit}} }}}}{{#vardefine:from|{{#expr:({{#var:page}} - 1) * {{#var:limit}} + 1}}}} |
| {{#vardefine:page|{{#urlget:page|1}}}} | |
| {{#vardefine:limit|30}} | |
| {{#vardefine:offset| | |
| {{#expr: ({{#var:page}} - 1) * {{#var:limit}} }}
| |
| }} | |
| {{#vardefine:from| | |
| {{#expr:
| |
| ({{#var:page}} - 1) * {{#var:limit}} + 1
| |
| }}
| |
| }} | |
| <h1 style="font-size: 1.2em;"> | | <h1 style="font-size: 1.2em;"> |
| <strong>{{#if: {{#urlget:station}} | {{#urlget:station}} |川西市}}</strong>の<strong>{{#if: {{#urlget:genre}} | {{#urlget:genre}} |グルメ}}</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">{{#var:hitCount}} 件の結果があります（{{#var:from}} 件目～） | | <strong>{{#if: {{#urlget:aria}} | {{#urlget:aria}} |{{#if: {{#urlget:station}} | {{#urlget:station}} |川西市}}}}</strong>の<strong>{{#if: {{#urlget:genre}} | {{#urlget:genre}} |グルメ}}</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">{{#var:hitCount}} 件の結果があります（{{#var:from}} 件目～） |
| </strong> | | </strong> |
| == 検索結果 == | | == 検索結果 == |
| <!-- 検索実行 --> | | <!-- 検索実行 --> |
| {{#cargo_query: | | {{#cargo_query: |
| tables=飲食店情報 | | tables=図鑑情報 |
| |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標 | | |fields=図鑑情報._pageName,図鑑情報.店名,図鑑情報.画像,図鑑情報.ジャンル,図鑑情報.郵便番号,図鑑情報.住所,図鑑情報.最寄り,図鑑情報.営業時間月,図鑑情報.定休日,図鑑情報.電話番号,図鑑情報.予算昼下限,図鑑情報.予算昼上限,図鑑情報.予算夜下限,図鑑情報.予算夜上限,図鑑情報.ストリートビューURL,図鑑情報.座標 |
| |where=( | | |where=( |
| (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') | | 図鑑情報.カテゴリ='飲食店' |
| OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') | | AND ((図鑑情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') |
| OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%')) | | OR 図鑑情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') |
| {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }} | | OR 図鑑情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%')) |
| {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }} | | {{#if: {{#urlget:genre}} | AND 図鑑情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }} |
| | {{#if: {{#urlget:station}} | AND 図鑑情報.最寄り = '{{#urlget:station}}' }} |
| {{#if: {{#urlget:lanch-dinner}} | | | {{#if: {{#urlget:lanch-dinner}} | |
| {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}} | | {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 図鑑情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 図鑑情報.予算昼下限 < {{#urlget:budget_max}} }}}} |
| {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }} | | {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 図鑑情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 図鑑情報.予算夜下限 < {{#urlget:budget_max}} }} }} }} |
| {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }} | | {{#ifeq: {{#urlget:smoking}} | non | AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }} |
| {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%分煙%') }} | | {{#ifeq: {{#urlget:smoking}} | allow | AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 図鑑情報.禁煙喫煙 LIKE CONCAT('%分煙%') }} |
| {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }} | | {{#if: {{#urlget:tabehodai}} | AND 図鑑情報.食べ放題 = 1 }} |
| {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }} | | {{#if: {{#urlget:nomihodai}} | AND 図鑑情報.飲み放題 = 1 }} |
| {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }} | | {{#if: {{#urlget:takeout}} | AND 図鑑情報.テイクアウト = 1 }} |
| {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }} | | {{#if: {{#urlget:parking}} | AND 図鑑情報.駐車場 = 1 }} |
| {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }} | | {{#if: {{#urlget:privateroom}} | AND 図鑑情報.個室 = 1 }} |
| {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }} | | {{#if: {{#urlget:wifi}} | AND 図鑑情報.WiFi = 'あり' }} |
| {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }} | | {{#if: {{#urlget:barrierfree}} | AND 図鑑情報.バリアフリー = 1 }} |
| {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }} | | {{#if: {{#urlget:kids}} | AND 図鑑情報.お子様連れ = 1 }} |
| {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }} | | {{#if: {{#urlget:reserve}} | AND 図鑑情報.貸切 = 1 }} |
| {{#if: {{#urlget:reservable}} | AND 飲食店情報.予約 = 1 }} | | {{#if: {{#urlget:reservable}} | AND 図鑑情報.予約 = 1 }} |
| ) | | {{#if: {{#urlget:aria}} | AND 図鑑情報.エリア = '{{#urlget:aria}}' }} |
| | )) |
| |format=template | | |format=template |
| |template=検索結果カード | | |template=検索結果カード |
| 1,020行目: |
77行目: |
| |more results text= | | |more results text= |
| }} | | }} |
| <html>
| | {{ページネーション}} |
| <div class="pagination">
| |
| <a data-role="first-page" href="#">＜＜</a>
| |
| <a data-role="prev-page" href="#">＜</a>
| |
| <div class="page-numbers" data-role="page-numbers"></div>
| |
| <a data-role="next-page" href="#">＞</a>
| |
| <a data-role="last-page" href="#">＞＞</a>
| |
| </div>
| |
| | |
| <style>
| |
| .pagination {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 12px;
| |
| margin: 24px 0;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .pagination a {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 8px 14px;
| |
| min-width: 40px;
| |
| text-decoration: none;
| |
| border-radius: 6px;
| |
| border: 1px solid;
| |
| transition: background-color 0.15s ease,
| |
| color 0.15s ease,
| |
| box-shadow 0.15s ease;
| |
| }
| |
| | |
| .page-numbers {
| |
| display: flex;
| |
| gap: 6px;
| |
| }
| |
| | |
| .page-numbers a {
| |
| min-width: 36px;
| |
| padding: 8px 0;
| |
| }
| |
| | |
| /* ライト・通常 */
| |
| .pagination a {
| |
| background: #f9fafb;
| |
| color: #1f2937;
| |
| border-color: #d1d5db;
| |
| }
| |
| | |
| .pagination a:hover {
| |
| background: #eef2f7;
| |
| box-shadow: 0 1px 4px rgba(0,0,0,0.08);
| |
| }
| |
| | |
| /* 非活性 */
| |
| .pagination a.disabled {
| |
| background: #f1f5f9;
| |
| color: #94a3b8;
| |
| border-color: #e2e8f0;
| |
| pointer-events: none;
| |
| box-shadow: none;
| |
| }
| |
| | |
| /* 現在ページ（数字） */
| |
| .pagination .page-numbers a.current {
| |
| background: #1f2937;
| |
| color: #fff;
| |
| border-color: #1f2937;
| |
| font-weight: 600;
| |
| pointer-events: none;
| |
| }
| |
| | |
| /* ダーク・通常 */
| |
| .skin-theme-clientpref-night .pagination a {
| |
| background: #374151;
| |
| color: #f9fafb;
| |
| border-color: #4b5563;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .pagination a:hover {
| |
| background: #4b5563;
| |
| } | |
| | |
| /* ダーク・非活性 */
| |
| .skin-theme-clientpref-night .pagination a.disabled {
| |
| background: #1f2937;
| |
| color: #6b7280;
| |
| border-color: #374151;
| |
| }
| |
| | |
| /* ダーク・現在ページ */
| |
| .skin-theme-clientpref-night .pagination .page-numbers a.current {
| |
| background: #f9fafb;
| |
| color: #1f2937;
| |
| border-color: #f9fafb;
| |
| } | |
| | |
| </style>
| |
| </html>
| |
| | |
| __目次非表示__ | | __目次非表示__ |
