<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名刺作成アプリ</title>
<style>
/* スタイルはここに書く */
</style>
</head>
<body>
<h1>名刺作成アプリ</h1>
<form id="myForm">
<p>
<label for="photo">写真読込：</label>
<input type="file" id="photo" accept="image/*">
</p>
<p>
<label for="name">名前：</label>
<input type="text" id="name">
</p>
<p>
<label for="position">役職：</label>
<input type="text" id="position">
</p>
<p>
<label for="company">会社名：</label>
<input type="text" id="company">
</p>
<p>
<label>名刺の雛形：</label>
<label for="template1"><img src="template1.png"></label>
<input type="radio" name="template" id="template1">
<label for="template2"><img src="template2.png"></label>
<input type="radio" name="template" id="template2">
<label for="template3"><img src="template3.png"></label>
<input type="radio" name="template" id="template3">
<label for="template4"><img src="template4.png"></label>
<input type="radio" name="template" id="template4">
<label for="template5"><img src="template5.png"></label>
<input type="radio" name="template" id="template5">
</p>
<p>
<label>名刺のカラー：</label>
<label for="color1"><span style="background-color: #fff;"></span></label>
<input type="radio" name="color" id="color1">
<label for="color2"><span style="background-color: #f00;"></span></label>
<input type="radio" name="color" id="color2">
<label for="color3"><span style="background-color: #00f;"></span></label>
<input type="radio" name="color" id="color3">
<label for="color4"><span style="background-color: #0f0;"></span></label>
<input type="radio" name="color" id="color4">
<label for="color5"><span style="background-color: #ff0;"></span></label>
<input type="radio" name="color" id="color5">
</p>
<p>
<label for="preview">プレビュー：</label>
<img id="preview" src="placeholder.png" alt="プレビュー">
</p>
<p>
<label for="fontsize">フォントサイズ：</label>
<select id="fontsize">
<option value="12">12px</option>
<option value="14">14px</option>
<option value="16">16px</option>
<option value="18">18px</option>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="30">30px</option>
</select>
</p>
<p>
<button type="button" onclick="createBusinessCard()">名刺を作成する</button>
</p>
</form>
<script>
// スクリプトはここに書く
function createBusinessCard() {
// 入力された値を取得する
var photo = document.getElementById("photo").files[0];
var name = document.getElementById("name").value;
var position = document.getElementById("position").value;
var company = document.getElementById("company").value;
var template = document.querySelector('input[name="template"]:checked').id;
var color = document.querySelector('input[name="color"]:checked').id;
var fontsize = document.getElementById("fontsize").value;
// 各項目が入力されているかチェックする
if (!photo) {
alert("写真を読み込んでください");
return false;
}
if (!name) {
alert("名前を入力してください");
return false;
}
if (!position) {
alert("役職を入力してください");
return false;
}
if (!company) {
alert("会社名を入力してください");
return false;
}
// 画像をプレビューする
var fr = new FileReader();
fr.onload = function() {
document.getElementById("preview").src = fr.result;
}
fr.readAsDataURL(photo);
// 名刺を作成する
// 社名からマーク自動作成機能は未実装
var businessCard = `
<div class="${template} ${color}">
<div class="photo">
<img src="${fr.result}" alt="${name}">
</div>
<div class="info">
<p class="name">${name}</p>
<p class="position">${position}</p>
<p class="company">${company}</p>
</div>
</div>
`;
// 作成した名刺をダウンロードする
var element = document.createElement('a');
element.setAttribute('href', 'data:image/png;base64,' + btoa(businessCard));
element.setAttribute('download', `${name}.png`);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</body>
</html>
