JavaScriptサンプルコードです。JavaScriptも参照のこと。
history.pushState()とpopstate()は、履歴に対して新しい項目を追加したり、その追加した項目を取り出すことのできる機能。
シングルページアプリケーションを実装している際に、たとえばタブの切り替えに応じて、履歴を追加・取り出ししたい時などに使う。
たとえば、タブがクリックされた時は、
function TabClick(tabname) {
history.pushState(tabname, null, "index.html");
ChangeTab(tabname);
}
function ChangeTab(tabname) {
document.getElementById('tab_top').style.display = 'none';
document.getElementById('tab_profile').style.display = 'none';
document.getElementById('tab_novel').style.display = 'none';
document.getElementById('tab_diary').style.display = 'none';
document.getElementById('tab_links').style.display = 'none';
document.getElementById('tab_intro').style.display = 'none';
document.getElementById(tabname).style.display = 'block';
document.getElementById(tabname + '_li').style.background = 'white';
if (tabname != 'tab_top') {
document.getElementById('tab_top_li').style.background = '#e3e3e3';
}
if (tabname != 'tab_profile') {
document.getElementById('tab_profile_li').style.background = '#e3e3e3';
}
if (tabname != 'tab_novel') {
document.getElementById('tab_novel_li').style.background = '#e3e3e3';
}
if (tabname != 'tab_diary') {
document.getElementById('tab_diary_li').style.background = '#e3e3e3';
}
if (tabname != 'tab_links') {
document.getElementById('tab_links_li').style.background = '#e3e3e3';
}
if (tabname != 'tab_intro') {
document.getElementById('tab_intro_li').style.background = '#e3e3e3';
}
}
のようにし、クリックされた項目を履歴に追加する。
popstateイベントは、戻るや進むボタンがクリックされた時に呼び出される。そのため、以下のようにすれば、戻るや進むボタンがクリックされた時にタブを移動できる。
window.addEventListener('popstate', e => {
if (e.state === null) {
return;
} else {
ChangeTab(e.state);
}
});
e.stateはhistory.pushState()で挿入した内容（tabname）が取り出される。自分で追加したのではない場合にはnullが返る。
これで、ページのロード時に指定のタブを表示するために、以下のようにする。
<script type="text/javascript">
ChangeTab('tab_top');
</script>
ただし、僕がこれを実装していた時、上のコードだとバグがある。e.stateがnullである時は、ページの最初に何もpushState()せずにページが表示された時点へと戻った時と、別のサイトからこのページに戻ってきた時を示すが（ここらへんのことは、ブラウザでデバッグしながら自分なりに分かったことであり、詳細まで分かっていないので、もし間違っていたら申し訳ない）、このような時に上のコードでは上手く履歴が戻ってくれない。
次のように、ロード時にChangeTab()ではなくTabClick()を実行すると、この問題は解決する。
<script type="text/javascript">
TabClick('tab_top');
</script>
だが、この場合、ページのロード時にpushState()を行うため、別のページから戻ってきた時に進むの履歴が消えてしまう。また、最初のページのロード時に必要のない履歴がひとつ加わってしまう。
僕はいろいろと試した結果、結局このバグを直すことができなかったため、このシングルページアプリケーションを実装するのは諦めた。
ちなみに、HTMLは以下のようになる。
<div class="tab_menu">
<ul class="tab_list">
<li id="tab_top_li"><a href="#tab_top" class="tab_top" onclick="TabClick('tab_top'); return false;">トップ</a></li>
<li id="tab_profile_li"><a href="#tab_profile" class="tab_profile" onclick="TabClick('tab_profile'); return false;">自己紹介</a></li>
<li id="tab_novel_li"><a href="#tab_novel" class="tab_novel" onclick="TabClick('tab_novel'); return false;">作品</a></li>
<li id="tab_diary_li"><a href="#tab_diary" class="tab_diary" onclick="TabClick('tab_diary'); return false;">日記</a></li>
<li id="tab_links_li"><a href="#tab_links" class="tab_links" onclick="TabClick('tab_links'); return false;">世界観</a></li>
<li id="tab_intro_li"><a href="#tab_intro" class="tab_intro" onclick="TabClick('tab_intro'); return false;">略歴</a></li>
</ul>
</div>
<div class="box">
<div id="tab_top">
<h3>トップ</h3>
<p>(ここにトップページを記述する)</p>
</div>
<div id="tab_profile">
<h3>自己紹介</h3>
<p>(ここに自己紹介を記述する)</p>
</div>
<div id="tab_novel">
<h3>作品</h3>
<p>(ここに作品を記述する)</p>
</div>
<div id="tab_diary">
<h3>日記</h3>
<p>(ここに日記を記述する)</p>
</div>
<div id="tab_links">
<h3>世界観</h3>
<p>(ここに世界観を記述する)</p>
</div>
<div id="tab_intro">
<h3>略歴</h3>
<p>(ここに略歴を記述する)</p>
</div>
</div>
また、CSSは以下のようになる。
.tab_menu { }
.tab_list {
margin: 0;
padding: 0;
}
.tab_list li {
list-style-type:none;
list-style-image:none;
display: inline-block;
margin: 0;
margin-top: 5px;
margin-right: 5px;
padding: 3px 5px 3px 5px;
width: auto;
border-top: 2px solid #aaaaaa;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
background: #e3e3e3;
}
.tab_list A:link,
.tab_list A:visited {
text-decoration: none;
font-weight: bold;
}
#tab_top_li {
background: white;
}
.box {
border-top: 1px solid #cccccc;
}
.box h3 {
font-size: 120%;
background: #eeeeee;
border: 1px solid #cccccc;
color: #444444;
padding: 5px 10px 5px 10px;
margin: 20px 0 20px 0;
}
後日注記：このようにタブごとにページを切り替えるページを作る時は、シングルページアプリケーションにするのではなく、きちんとページをタブごとに分けましょう。それがもっとも素直で正しい解決方法です。また、シングルページアプリケーションにする際には、そもそもタブごとに切り替えるような構造のサイトにしないことです。Ajaxを用いたサービスは、普通戻るや進むボタンは使いません。
以下はヒストリーAPIの参考文献。
タブ切り替えのコードは以下が参考になります。
2026.05.18編集
以下はJavaScriptで僕が書いたFizzBuzz。
for (var i = 1; i <= 100; i++) {
if (i % 15 == 0) {
process.stdout.write('FizzBuzz, ');
} else if (i % 3 == 0) {
process.stdout.write('Fizz, ');
} else if (i % 5 == 0) {
process.stdout.write('Buzz, ');
} else {
process.stdout.write(i + ', ');
}
}
process.stdout.write('終了.\n');
実行結果：
1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, 17, Fizz, 19, Buzz, Fizz, 22, 23, Fizz, Buzz, 26, Fizz, 28, 29, FizzBuzz, 31, 32, Fizz, 34, Buzz, Fizz, 37, 38, Fizz, Buzz, 41, Fizz, 43, 44, FizzBuzz, 46, 47, Fizz, 49, Buzz, Fizz, 52, 53, Fizz, Buzz, 56, Fizz, 58, 59, FizzBuzz, 61, 62, Fizz, 64, Buzz, Fizz, 67, 68, Fizz, Buzz, 71, Fizz, 73, 74, FizzBuzz, 76, 77, Fizz, 79, Buzz, Fizz, 82, 83, Fizz, Buzz, 86, Fizz, 88, 89, FizzBuzz, 91, 92, Fizz, 94, Buzz, Fizz, 97, 98, Fizz, Buzz, 終了.
JavaScriptにおいて、改行なしで画面に出力するにはprocess.stdout.write()を使う。
FizzBuzzの詳細についてはC言語サンプルコードを参照のこと。
2023.05.17
最近は、日記の月別のタブをJavaScriptで作りました。
JavaScriptコードは以下（script_sylph.js）。
// データ部分
var tabs = ['2022_01', '2022_02', '2022_03', '2022_04', '2022_05', '2022_06', '2022_07', '2022_08', '2022_09', '2022_10', '2022_11', '2022_12'];
var tabs_map = new Map();
tabs_map.set('2022_01', ['2022.01.01', '2022.01.02', '2022.01.03', '2022.01.04', '2022.01.05', '2022.01.06', '2022.01.07', '2022.01.08', '2022.01.09', '2022.01.10', '2022.01.11', '2022.01.12', '2022.01.13', '2022.01.14', '2022.01.15', '2022.01.16', '2022.01.17', '2022.01.18', '2022.01.19', '2022.01.20', '2022.01.21', '2022.01.22', '2022.01.23', '2022.01.24', '2022.01.25', '2022.01.26', '2022.01.27', '2022.01.28', '2022.01.29', '2022.01.30', '2022.01.31']);
tabs_map.set('2022_02', ['2022.02.01', '2022.02.02', '2022.02.03', '2022.02.04', '2022.02.05', '2022.02.06', '2022.02.07', '2022.02.08', '2022.02.13', '2022.02.14', '2022.02.15', '2022.02.16', '2022.02.17', '2022.02.19', '2022.02.20', '2022.02.21', '2022.02.22', '2022.02.23', '2022.02.27', '2022.02.28']);
tabs_map.set('2022_03', ['2022.03.01', '2022.03.02', '2022.03.03', '2022.03.04', '2022.03.05', '2022.03.06', '2022.03.07', '2022.03.08', '2022.03.09', '2022.03.10', '2022.03.11', '2022.03.13', '2022.03.14', '2022.03.15', '2022.03.16', '2022.03.17', '2022.03.19', '2022.03.20', '2022.03.21', '2022.03.22', '2022.03.23', '2022.03.24', '2022.03.25', '2022.03.26', '2022.03.27', '2022.03.28', '2022.03.29', '2022.03.31']);
tabs_map.set('2022_04', ['2022.04.01', '2022.04.02', '2022.04.03', '2022.04.04', '2022.04.05', '2022.04.06', '2022.04.07', '2022.04.08', '2022.04.09', '2022.04.10', '2022.04.11', '2022.04.12', '2022.04.13', '2022.04.14', '2022.04.15', '2022.04.16', '2022.04.17', '2022.04.18', '2022.04.19', '2022.04.20', '2022.04.21', '2022.04.22', '2022.04.23', '2022.04.24', '2022.04.25', '2022.04.26', '2022.04.27', '2022.04.28', '2022.04.29', '2022.04.30']);
tabs_map.set('2022_05', ['2022.05.01', '2022.05.02', '2022.05.03', '2022.05.04', '2022.05.05', '2022.05.06', '2022.05.07', '2022.05.08', '2022.05.09', '2022.05.10', '2022.05.11', '2022.05.12', '2022.05.13', '2022.05.14', '2022.05.15', '2022.05.16', '2022.05.17', '2022.05.18', '2022.05.19', '2022.05.20', '2022.05.21', '2022.05.22', '2022.05.23', '2022.05.24', '2022.05.25', '2022.05.26', '2022.05.27', '2022.05.28', '2022.05.29', '2022.05.30', '2022.05.31']);
tabs_map.set('2022_06', ['2022.06.01', '2022.06.02', '2022.06.03', '2022.06.04', '2022.06.05', '2022.06.06', '2022.06.07', '2022.06.08', '2022.06.09', '2022.06.10', '2022.06.11', '2022.06.12', '2022.06.13', '2022.06.14', '2022.06.15', '2022.06.16', '2022.06.17', '2022.06.18', '2022.06.19', '2022.06.20', '2022.06.21', '2022.06.22', '2022.06.23', '2022.06.24', '2022.06.25', '2022.06.26', '2022.06.28', '2022.06.29', '2022.06.30']);
tabs_map.set('2022_07', ['2022.07.01', '2022.07.03', '2022.07.04', '2022.07.05', '2022.07.06', '2022.07.07', '2022.07.08', '2022.07.09', '2022.07.10', '2022.07.11', '2022.07.12', '2022.07.14', '2022.07.15', '2022.07.16', '2022.07.17', '2022.07.18', '2022.07.19', '2022.07.20', '2022.07.22', '2022.07.23', '2022.07.24', '2022.07.25', '2022.07.26', '2022.07.27', '2022.07.28', '2022.07.29', '2022.07.30', '2022.07.31']);
tabs_map.set('2022_08', ['2022.08.01', '2022.08.02', '2022.08.03', '2022.08.05', '2022.08.06', '2022.08.07', '2022.08.08', '2022.08.09', '2022.08.10', '2022.08.11', '2022.08.12', '2022.08.13', '2022.08.14', '2022.08.15', '2022.08.16', '2022.08.17', '2022.08.18', '2022.08.19', '2022.08.20', '2022.08.21', '2022.08.22', '2022.08.23', '2022.08.24', '2022.08.25', '2022.08.26', '2022.08.27', '2022.08.28', '2022.08.29', '2022.08.30', '2022.08.31']);
tabs_map.set('2022_09', ['2022.09.01', '2022.09.02', '2022.09.03', '2022.09.04', '2022.09.05', '2022.09.06', '2022.09.07', '2022.09.08', '2022.09.09', '2022.09.10', '2022.09.11', '2022.09.12', '2022.09.13', '2022.09.14', '2022.09.15', '2022.09.16', '2022.09.17', '2022.09.18', '2022.09.19', '2022.09.20', '2022.09.21', '2022.09.22', '2022.09.23', '2022.09.24', '2022.09.25', '2022.09.27', '2022.09.28', '2022.09.29', '2022.09.30']);
tabs_map.set('2022_10', ['2022.10.01', '2022.10.02', '2022.10.03', '2022.10.04', '2022.10.06', '2022.10.07', '2022.10.08', '2022.10.09', '2022.10.10', '2022.10.11', '2022.10.12', '2022.10.13', '2022.10.14', '2022.10.16', '2022.10.18', '2022.10.19', '2022.10.21', '2022.10.22', '2022.10.23', '2022.10.27', '2022.10.28', '2022.10.29', '2022.10.30', '2022.10.31']);
tabs_map.set('2022_11', ['2022.11.01', '2022.11.02', '2022.11.03', '2022.11.04', '2022.11.05', '2022.11.06', '2022.11.07', '2022.11.09', '2022.11.10', '2022.11.11', '2022.11.12', '2022.11.13', '2022.11.14', '2022.11.15', '2022.11.17', '2022.11.18', '2022.11.19', '2022.11.20', '2022.11.21', '2022.11.22', '2022.11.25', '2022.11.28', '2022.11.29', '2022.11.30']);
tabs_map.set('2022_12', ['2022.12.01', '2022.12.03', '2022.12.04', '2022.12.05', '2022.12.06', '2022.12.07', '2022.12.09', '2022.12.10', '2022.12.11', '2022.12.12', '2022.12.13', '2022.12.14', '2022.12.15', '2022.12.17', '2022.12.18', '2022.12.19', '2022.12.20']);
// タブの表示と非表示を切り替える
function ChangeTab(tabname) {
tabs.forEach((tab) => {
document.getElementById('tab_' + tab).style.display = 'none';
});
document.getElementById(tabname).style.display = 'block';
document.getElementById(tabname + '_li').style.background = 'white';
tabs.forEach((tab) => {
if (tabname != ('tab_' + tab)) {
document.getElementById('tab_' + tab + '_li').style.background = '#c6e2f8';
}
});
/* 以下のコードと等価。
document.getElementById('tab_2022_01').style.display = 'none';
document.getElementById('tab_2022_02').style.display = 'none';
document.getElementById('tab_2022_03').style.display = 'none';
document.getElementById('tab_2022_04').style.display = 'none';
document.getElementById('tab_2022_05').style.display = 'none';
document.getElementById('tab_2022_06').style.display = 'none';
document.getElementById('tab_2022_07').style.display = 'none';
document.getElementById('tab_2022_08').style.display = 'none';
document.getElementById('tab_2022_09').style.display = 'none';
document.getElementById('tab_2022_10').style.display = 'none';
document.getElementById('tab_2022_11').style.display = 'none';
document.getElementById('tab_2022_12').style.display = 'none';
document.getElementById(tabname).style.display = 'block';
document.getElementById(tabname + '_li').style.background = 'white';
if (tabname != 'tab_2022_01') {
document.getElementById('tab_2022_01_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_02') {
document.getElementById('tab_2022_02_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_03') {
document.getElementById('tab_2022_03_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_04') {
document.getElementById('tab_2022_04_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_05') {
document.getElementById('tab_2022_05_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_06') {
document.getElementById('tab_2022_06_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_07') {
document.getElementById('tab_2022_07_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_08') {
document.getElementById('tab_2022_08_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_09') {
document.getElementById('tab_2022_09_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_10') {
document.getElementById('tab_2022_10_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_11') {
document.getElementById('tab_2022_11_li').style.background = '#c6e2f8';
}
if (tabname != 'tab_2022_12') {
document.getElementById('tab_2022_12_li').style.background = '#c6e2f8';
}
*/
}
// 配列に表示する文字列を追加する
var data = [];
data.push('<div class="tab_menu"><ul class="tab_list">');
tabs.forEach((tab) => {
data.push('<li id="tab_' + tab + '_li"><a href="#tab_' + tab + '" class="tab_' + tab + '" onclick="ChangeTab(\'tab_' + tab + '\'); return false;">' + tab.split('_').join('-') + '</a></li>');
});
data.push('</ul></div><div class="box">');
/* 以下の文字列を表示させるのと等価。月を選択するタブの部分。
<div class="tab_menu">
<ul class="tab_list">
<li id="tab_2022_01_li"><a href="#tab_2022_01" class="tab_2022_01" onclick="ChangeTab('tab_2022_01'); return false;">2022-01</a></li>
<li id="tab_2022_02_li"><a href="#tab_2022_02" class="tab_2022_02" onclick="ChangeTab('tab_2022_02'); return false;">2022-02</a></li>
<li id="tab_2022_03_li"><a href="#tab_2022_03" class="tab_2022_03" onclick="ChangeTab('tab_2022_03'); return false;">2022-03</a></li>
<li id="tab_2022_04_li"><a href="#tab_2022_04" class="tab_2022_04" onclick="ChangeTab('tab_2022_04'); return false;">2022-04</a></li>
<li id="tab_2022_05_li"><a href="#tab_2022_05" class="tab_2022_05" onclick="ChangeTab('tab_2022_05'); return false;">2022-05</a></li>
<li id="tab_2022_06_li"><a href="#tab_2022_06" class="tab_2022_06" onclick="ChangeTab('tab_2022_06'); return false;">2022-06</a></li>
<li id="tab_2022_07_li"><a href="#tab_2022_07" class="tab_2022_07" onclick="ChangeTab('tab_2022_07'); return false;">2022-07</a></li>
<li id="tab_2022_08_li"><a href="#tab_2022_08" class="tab_2022_08" onclick="ChangeTab('tab_2022_08'); return false;">2022-08</a></li>
<li id="tab_2022_09_li"><a href="#tab_2022_09" class="tab_2022_09" onclick="ChangeTab('tab_2022_09'); return false;">2022-09</a></li>
<li id="tab_2022_10_li"><a href="#tab_2022_10" class="tab_2022_10" onclick="ChangeTab('tab_2022_10'); return false;">2022-10</a></li>
<li id="tab_2022_11_li"><a href="#tab_2022_11" class="tab_2022_11" onclick="ChangeTab('tab_2022_11'); return false;">2022-11</a></li>
<li id="tab_2022_12_li"><a href="#tab_2022_12" class="tab_2022_12" onclick="ChangeTab('tab_2022_12'); return false;">2022-12</a></li>
</ul>
</div>
*/
tabs.forEach((tab) => {
data.push('<div id="tab_' + tab + '" style="display: none;"><ul>');
tabs_map.get(tab).forEach((date) => {
data.push('<li><a href="' + date + '.html">' + date.split('.').join('-') + '</a></li>');
});
data.push('</ul></div>');
});
data.push('</div>');
/* 以下の文字列を表示させるのと等価。日付を一覧するフレームの部分。
<div class="box">
<div id="tab_2022_01" style="display: none;">
<ul>
<li><a href="2022.01.01.html">2022-01-01</a></li>
<li><a href="2022.01.02.html">2022-01-02</a></li>
<li><a href="2022.01.03.html">2022-01-03</a></li>
<li><a href="2022.01.04.html">2022-01-04</a></li>
<li><a href="2022.01.05.html">2022-01-05</a></li>
<li><a href="2022.01.06.html">2022-01-06</a></li>
<li><a href="2022.01.07.html">2022-01-07</a></li>
<li><a href="2022.01.08.html">2022-01-08</a></li>
<li><a href="2022.01.09.html">2022-01-09</a></li>
<li><a href="2022.01.10.html">2022-01-10</a></li>
<li><a href="2022.01.11.html">2022-01-11</a></li>
<li><a href="2022.01.12.html">2022-01-12</a></li>
<li><a href="2022.01.13.html">2022-01-13</a></li>
<li><a href="2022.01.14.html">2022-01-14</a></li>
<li><a href="2022.01.15.html">2022-01-15</a></li>
<li><a href="2022.01.16.html">2022-01-16</a></li>
<li><a href="2022.01.17.html">2022-01-17</a></li>
<li><a href="2022.01.18.html">2022-01-18</a></li>
<li><a href="2022.01.19.html">2022-01-19</a></li>
<li><a href="2022.01.20.html">2022-01-20</a></li>
<li><a href="2022.01.21.html">2022-01-21</a></li>
<li><a href="2022.01.22.html">2022-01-22</a></li>
<li><a href="2022.01.23.html">2022-01-23</a></li>
<li><a href="2022.01.24.html">2022-01-24</a></li>
<li><a href="2022.01.25.html">2022-01-25</a></li>
<li><a href="2022.01.26.html">2022-01-26</a></li>
<li><a href="2022.01.27.html">2022-01-27</a></li>
<li><a href="2022.01.28.html">2022-01-28</a></li>
<li><a href="2022.01.29.html">2022-01-29</a></li>
<li><a href="2022.01.30.html">2022-01-30</a></li>
<li><a href="2022.01.31.html">2022-01-31</a></li>
</ul>
</div>
<div id="tab_2022_02" style="display: none;">
<ul>
（以下月ごとに繰り返し）
</ul>
</div>
</div>
*/
// 配列の内容をひとつの文字列に連結する
var result = data.join('');
// タブを表示する
let div_sylph_script = document.getElementById('sylph_tab');
div_sylph_script.insertAdjacentHTML('beforebegin', result);
以下はCSS（style_sylph.css）。
.tab_menu { }
.tab_list {
margin: 0;
padding: 0;
}
.tab_list li {
list-style-type:none;
list-style-image:none;
display: inline-block;
margin: 0;
margin-top: 5px;
margin-right: 5px;
padding: 3px 10px 3px 10px;
width: auto;
border-top: 2px solid #6bb6bb;
border-right: 1px solid #9acce3;
border-left: 1px solid #9acce3;
background: #c6e2f8;
}
.tab_list A:link,
.tab_list A:visited {
color: #019c96;
text-decoration: none;
font-weight: bold;
}
.box {
border: 1px solid #9acce3;
padding: 10px 10px 10px 10px;
margin-bottom: 20px;
}
.box ul {
padding: 0;
margin: 0;
}
.box li {
list-style-type:none;
list-style-image:none;
display: inline-block;
padding: 0;
margin: 0;
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 5px;
width: 100px;
text-align: center;
}
@media screen and (max-device-width: 480px) {
.box li {
margin-left: 1px;
margin-right: 1px;
}
}
この状態で、2022年1月の日記の場合、HTMLの<head>タグに以下の記述をします。別の月の場合は「2022_01」の記述を変えます。
<link rel="stylesheet" type="text/css" href="style_sylph.css">
<style type="text/css">
#tab_2022_01_li {
background: white;
}
</style>
また、<body>タグに以下の記述をします。
<script type="text/javascript" src="script_sylph.js"></script>
<script type="text/javascript">
ChangeTab('tab_2022_01');
</script>
そして、タブを表示させたい場所に、
<div id="sylph_tab"></div>
と記述します。
実際の動作例はシルフの秘密の場所や紅蓮と黄金の出会う場所を参照のこと。
2026.05.18