| タイトル | 補足 | 国 | 地域 | ver | 鉄人 | 主要DLC | ベースMOD | その他MOD |
| オスマン世界征服録 | 初心者向けの解説多め | オスマン | ヨーロッパ | 1.38 | Yes | Domination | Vanilla | なし |
| 明で朝貢再興RTA | 縛りプレイです | 明 | アジア | 1.38 | Yes | なし | Vanilla | なし |
| Kaiserreich: ドイツ勝利への道 | HoI4の大型MODです | ドイツ | ヨーロッパ | 1.14 | No | なし | Kaiserreich | なし |
| ヴェネツィア海洋帝国一代記 | 交易と海軍が主役 | ヴェネツィア | ヨーロッパ | 1.35 | Yes | Winds of Change, Domination | Vanilla | Beautiful Borders |
| 日本幕府の太平洋戦略 | 植民と海戦 | 日本 | アジア | 1.35 | No | Domination | Vanilla | JP MOD |
#html
!-- =================================================================
AARアーカイブ 表示エリア ここから下は、上の表のデータを元に自動的に表示されます。 直接編集する必要はありません。 ================================================================= -->div id="aar-archive">
<!-- 1. 操作パネル --> <div class="controls"> <input type="text" class="search" placeholder="タイトル・補足で検索..." /> <select id="filter-region"> <option value="">地域で絞り込み</option> <option value="ヨーロッパ">ヨーロッパ</option> <option value="アジア">アジア</option> <!-- (必要なら地域を追加) --> </select> <select id="filter-ironman"> <option value="">鉄人モードで絞り込み</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> <select id="filter-basemod"> <option value="">ベースMODで絞り込み</option> <option value="Vanilla">Vanilla</option> <option value="Kaiserreich">Kaiserreich</option> <!-- (必要なら大型MODを追加) --> </select> </div>
<!-- 2. AARリスト本体 -->
<div class="table-container">
<table>
<thead>
<tr>
<th><button class="sort" data-sort="title">タイトル ▲▼</button></th>
<th><button class="sort" data-sort="nation">国 ▲▼</button></th>
<th><button class="sort" data-sort="region">地域 ▲▼</button></th>
<th><button class="sort" data-sort="version">Ver ▲▼</button></th>
<th><button class="sort" data-sort="ironman">鉄人 ▲▼</button></th>
<th><button class="sort" data-sort="dlc">主要DLC ▲▼</button></th>
<th><button class="sort" data-sort="basemod">ベースMOD ▲▼</button></th>
<th><button class="sort" data-sort="othermod">その他MOD ▲▼</button></th>
</tr>
</thead>
<!-- データはここに自動的に挿入されます -->
<tbody class="list"></tbody>
</table>
</div>
<p><em class="fuzzy-search-notice"></em></p>
<p class="pagination"></p>
/div>
!-- 3. データとロジック (JavaScript) -->
!-- 3.1. List.jsライブラリの読み込み -->
script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
!-- 3.2. PukiWikiの表をデータに変換し、List.jsを初期化するスクリプト -->
script>
document.addEventListener('DOMContentLoaded', function() { // PukiWikiの表からデータを抽出 const table = document.querySelector('.style_table'); const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent); const aarData = Array.from(table.querySelectorAll('tbody tr')).map(row => { const rowData = {}; Array.from(row.querySelectorAll('td')).forEach((td, i) => { // HTMLを保持するためにinnerHTMLを使用 rowData[headers[i]] = td.innerHTML; }); return rowData; });
// List.jsのオプション設定
const options = {
valueNames: [
{ name: 'title', attr: 'data-title' },
{ name: 'nation', attr: 'data-nation' },
{ name: 'region', attr: 'data-region' },
{ name: 'version', attr: 'data-version' },
{ name: 'ironman', attr: 'data-ironman' },
{ name: 'dlc', attr: 'data-dlc' },
{ name: 'basemod', attr: 'data-basemod' },
{ name: 'othermod', attr: 'data-othermod' }
],
// 1行のテンプレート
item: (values) => {
let tr = document.createElement('tr');
tr.setAttribute('data-title', values.タイトル);
tr.setAttribute('data-nation', values.国);
tr.setAttribute('data-region', values.地域);
tr.setAttribute('data-version', values.ver);
tr.setAttribute('data-ironman', values.鉄人);
tr.setAttribute('data-dlc', values.主要DLC);
tr.setAttribute('data-basemod', values.ベースMOD);
tr.setAttribute('data-othermod', values.その他MOD);
tr.innerHTML = `
<td>${values.タイトル}<br><small>${values.補足}</small></td>
<td>${values.国}</td>
<td>${values.地域}</td>
<td>${values.ver}</td>
<td>${values.鉄人}</td>
<td>${values.主要DLC}</td>
<td>${values.ベースMOD}</td>
<td>${values.その他MOD}</td>
`;
return tr;
},
page: 20,
pagination: true
};
// List.jsを初期化
const aarList = new List('aar-archive', options, aarData);
// 絞り込み機能のイベントリスナー
const filters = ['region', 'ironman', 'basemod'];
filters.forEach(filter => {
document.getElementById(`filter-${filter}`).addEventListener('change', function() {
const selectedValue = this.value;
aarList.filter(item => {
if (selectedValue === "") return true; // "すべて"が選択された場合
return item.values()[filter] === selectedValue;
});
});
});
});
/script>
!-- 4. スタイル (CSS) -->
style>
#aar-archive .controls { margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; } #aar-archive .search { padding: 8px; border: 1px solid #ccc; border-radius: 4px; min-width: 200px; } #aar-archive select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } #aar-archive .table-container { overflow-x: auto; } #aar-archive table { width: 100%; border-collapse: collapse; } #aar-archive th, #aar-archive td { padding: 10px; border: 1px solid #dcdcdc; text-align: left; vertical-align: top; } #aar-archive th { background-color: #f2f2f2; } #aar-archive td small { color: #555; } #aar-archive .sort { background: none; border: none; font-weight: bold; cursor: pointer; padding: 0; width: 100%; text-align: left; } #aar-archive .sort:hover { color: #2a4a75; } #aar-archive .pagination li { display: inline-block; padding: 5px 10px; } #aar-archive .pagination .active a { font-weight: bold; }/style>
#endhtml
