Skip to content

Instantly share code, notes, and snippets.

@imaizume

imaizume/index.html

Last active July 25, 2025 08:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save imaizume/fcbe9681fd0ed451c48e1b86e5c25f61 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save imaizume/fcbe9681fd0ed451c48e1b86e5c25f61 to your computer and use it in GitHub Desktop.
Download ZIP
ボタンによるメニュー表示と非表示切り替えのサンプル
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="uk-container uk-container-large uk-margin-top">
<h1 class="uk-heading-primary uk-text-center uk-margin-medium-bottom">サンプルページ</h1>
<!-- ID変更フォーム -->
<div class="uk-card uk-card-default uk-card-body uk-margin-medium-bottom">
<h3 class="uk-card-title">レストランID変更</h3>
<form class="uk-form-horizontal" id="idChangeForm">
<div class="uk-margin">
<label class="uk-form-label" for="restaurantId">レストランID (12桁):</label>
<div class="uk-form-controls">
<input class="uk-input" type="text" id="restaurantId" name="restaurantId"
placeholder="100001634125" value="100001634125"
pattern="[0-9]{12}" maxlength="12" required>
<div class="uk-text-meta uk-margin-small-top">12桁の数字を入力してください</div>
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-primary" type="submit">IDを変更</button>
</div>
</form>
</div>
<table class="uk-table uk-table-striped uk-table-hover">
<thead>
<tr>
<th class="uk-width-1-4">説明</th>
<th class="uk-width-2-5">通常のリンク</th>
<th class="uk-width-2-5">openExternalBrowser=1 付きリンク</th>
</tr>
</thead>
<tbody>
<tr>
<td>通常のリンク（パスなし・targetなし）</td>
<td><a href="https://retty.go.link/?adj_t=1oqcczbw&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125">何もなし</a></td>
<td><a href="https://retty.go.link/?adj_t=1oqcczbw&openExternalBrowser=1&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125">何もなし + browser=1</a></td>
</tr>
<tr>
<td>target="_blank" 付き（パスなし）</td>
<td><a href="https://retty.go.link/?adj_t=1oqcczbw&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125" target="_blank">target="_blank"</a></td>
<td><a href="https://retty.go.link/?adj_t=1oqcczbw&openExternalBrowser=1&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125" target="_blank">target="_blank" + browser=1</a></td>
</tr>
<tr>
<td>URLに path を含むリンク（targetなし）</td>
<td><a href="https://retty.go.link/path?adj_t=1oqcczbw&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125">pathあり</a></td>
<td><a href="https://retty.go.link/path?adj_t=1oqcczbw&openExternalBrowser=1&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125">pathあり + browser=1</a></td>
</tr>
<tr>
<td>URLに path を含み、かつ target="_blank"</td>
<td><a href="https://retty.go.link/path?adj_t=1oqcczbw&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125" target="_blank">path/target="_blank"</a></td>
<td><a href="https://retty.go.link/path?adj_t=1oqcczbw&openExternalBrowser=1&link=retty%3A%2F%2F%3Fpage%3Drestaurant%26restaurant_id%3D100001634125" target="_blank">path/target + browser=1</a></td>
</tr>
</tbody>
</table>
</div>
<script>
document.getElementById('idChangeForm').addEventListener('submit', function(e) {
e.preventDefault();
const newId = document.getElementById('restaurantId').value;
if (!/^[0-9]{12}$/.test(newId)) {
UIkit.notification('12桁の数字を入力してください', {status: 'warning'});
return;
}
const links = document.querySelectorAll('a[href*="restaurant_id%3D"]');
links.forEach(link => {
const href = link.getAttribute('href');
const updatedHref = href.replace(/restaurant_id%3D\d{12}/, `restaurant_id%3D${newId}`);
link.setAttribute('href', updatedHref);
});
UIkit.notification(`レストランIDを ${newId} に変更しました`, {status: 'success'});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment