-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (158 loc) · 8.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/prism.css">
<link rel="stylesheet" href="./css/styles.css">
<script src="./js/prism.js" defer></script>
<script src="./index.js" type="module"></script>
<script src="./js/zip.js"></script>
<title>定義書RustコードコンバータWASM</title>
<meta name="description" content="システム定義書からRustの構造体を自動生成するサイトです。このページではサンプルのCSVから定義書を作成することができます。" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Google tag (gtag.js) -->
<meta name="google-site-verification" content="flysVjQiakJuvdDqcnNSuTyz0whOo4ILWFb7fO0EPU4" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3EFFRMQQN7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3EFFRMQQN7');
</script>
<meta name="google-adsense-account" content="ca-pub-3637968081702806">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3637968081702806"
crossorigin="anonymous"></script>
<meta property="og:url" content="https://sotanengel.github.io/class-creator-rust-wasm/">
<meta property="og:type" content="website">
<meta property="og:title" content="定義書RustコードコンバータWASM">
<meta property="og:description" content="システム定義書からRustの構造体を自動生成するサイトです。このページではサンプルのCSVから定義書を作成することができます。">
<meta property="og:site_name" content="定義書RustコードコンバータWASM">
<meta property="og:image" content="img/og-image-top.png">
</head>
<body>
<header>
<meta charset="utf-8" />
<h1>定義書RustコードコンバータWASM</h1>
<a href="https://github.com/sotanengel/class-creator-rust-wasm" target="_blank" style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%);">
<img src="img/github-mark.png" alt="GitHub" style="width: 40px; height: 40px;">
</a>
</header>
</header>
<main>
<!-- タブメニュー -->
<div class="tabs">
<div class="tab active" data-tab="sample" data-url="index.html">サンプルCSV変換</div>
<div class="tab" data-url="custom-index.html">カスタムCSV変換</div>
</div>
<!-- サンプルCSV変換タブ内容 -->
<div id="sample" class="tab-content active">
<a id="rdd-format-link" href="https://docs.google.com/spreadsheets/d/1AXVg4XjH29HAD4s9mgJJ-_7WFBCtXn3tweTK68ERBaI/edit?usp=sharing" target="_blank">定義書フォーマット(Google スプレッドシート)</a>
<div id="drop-zone" class="drop-zone">
<p>ここにCSVファイルをドロップするか、下のボタンから選択してください</p>
<input type="file" id="file-input" accept=".csv">
</div>
<div id="radio-buttons-container">
<label><input type="radio" name="impl-option" value="include" checked> 構造体 + コンストラクタ</label>
<label><input type="radio" name="impl-option" value="struct-only"> 構造体のみ</label>
<button id="re-output-btn">再出力</button>
</div>
<pre id="code-block"><code id="output" class="language-rust"></code></pre>
<a id="download-btn" href="#" download="struct_output.txt">生成コードのダウンロード!</a>
<!-- 使い方の折りたたみメニュー -->
<button class="collapsible">使い方</button>
<div class="content">
<p>1. <a href="https://docs.google.com/spreadsheets/d/1AXVg4XjH29HAD4s9mgJJ-_7WFBCtXn3tweTK68ERBaI/edit?usp=sharing" target="_blank">サンプルCSV(Google スプレッドシート)</a>をダウンロードします。</p>
<p>2. ダウンロードしたCSVファイルを書き換えます。</p><img src="img/example-sample-csv.png" width="600">
<p>3. ファイルを選択ボタンから書き換えたファイルを選択します。</p>
<p>4. 「生成コードのダウンロード」ボタンを押して、構造体コードを保存します。(構造体のみで良い場合には「構造体のみ」を選択し、再出力ボタンを押してください)</p>
<img src="img/example-converted-page-image.png" width="600">
</div>
</div>
</main>
<div id="footer-placeholder"></div>
<script>
const tabs = document.querySelectorAll('.tab');
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
if (tab.dataset.url) {
// URLが設定されている場合は、そのURLにリダイレクト
window.location.href = tab.dataset.url;
} else {
// 通常のタブ切り替え処理
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
const activeContent = document.getElementById(tab.dataset.tab);
activeContent.classList.add('active');
}
});
});
// フッターを読み込む関数
function loadFooter() {
fetch('footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer-placeholder').innerHTML = data;
})
.catch(error => console.error('Error loading footer:', error));
}
// ページが読み込まれたときにフッターを読み込む
document.addEventListener('DOMContentLoaded', () => {
loadFooter();
});
// 折りたたみメニューの動作
const collapsibles = document.querySelectorAll('.collapsible');
collapsibles.forEach(collapsible => {
collapsible.addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
});
// ドラッグオーバー時のスタイル変更
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
// ファイルがドロップされた時の処理
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length) {
const file = files[0];
if (file.type === 'text/csv') {
// ファイルをfileInputに反映させる
fileInput.files = e.dataTransfer.files;
// fileInputのchangeイベントをトリガーする
const changeEvent = new Event('change');
fileInput.dispatchEvent(changeEvent);
} else {
alert('CSVファイルをドロップしてください');
}
}
});
// ファイル選択ボタンから選択された時の処理
fileInput.addEventListener('change', async function() {
const reader = new FileReader();
reader.onload = async function(e) {
csvContent = e.target.result;
await generateStruct(); // 構造体生成関数を呼び出す
};
reader.readAsText(this.files[0]);
});
</script>
</body>
</html>