フォーム入力で阿部寛風ホームページを誰でも簡単に!
こんにちは、よみあきです。
僕は現在絶賛就職活動中で、エントリーシートを書いていると、URLの記入欄が…
ポートフォリオサイトを作らないと…!
しかし、特にレイアウトにいい思いつきがなかったので、誰かのサイトをパクろうと思いました。
そこで真っ先に思いついたサイト、
爆速で有名なあのサイトです。
でもせっかくなら自分のポートフォリオサイトを作るだけでなく、誰でも阿部寛さん風なホームページが作れるアプリがあったら面白いんじゃないかということで、
阿部寛風ホームページ生成ツール「あべじぇね」を作ってみました!(以下敬称略)

あべじぇね
阿部寛風ホームページジェネレータ
どういうもの?

画面はこのようになっています。

フォームに自分のプロフィールと写真を入力します。(写真はフリー素材です。)
新着情報を間違えて新着状況としてしまってるのはお気になさらず。

生成ボタンを押すと、ページが推移し、阿部寛風のホームページが出来上がりです。

そして、生成したHTMLもダウンロードできるので、各々でカスタマイズ可能です。
ページ生成や写真とHTMLをまとめたzipをダウンロードさせるなど、サーバーでの処理が必要となったので、主にPHPを使って制作しました。
ソースコード
<?php
//セッション始め
session_start();
//ダウンロードボタン押したときの処理
if(isset($_POST['download'])) {
//セッション変更
//session_regenerate_id();
//HTMLに代入する値
$name3=htmlspecialchars($_POST['name3']);
$name1=htmlspecialchars($_POST['name1']);
$name2=htmlspecialchars($_POST['name2']);
$birthday=htmlspecialchars($_POST['birthday']);
$btype=htmlspecialchars($_POST['btype']);
$english=htmlspecialchars($_POST['english']);
$email=htmlspecialchars($_POST['email']);
$address=htmlspecialchars($_POST['address']);
$news=htmlspecialchars($_POST['news']);
$head1=htmlspecialchars($_POST['head1']);
$p1=htmlspecialchars($_POST['p1']);
$head2=htmlspecialchars($_POST['head2']);
$p2=htmlspecialchars($_POST['p2']);
$head3=htmlspecialchars($_POST['head3']);
$p3=htmlspecialchars($_POST['p3']);
$head4=htmlspecialchars($_POST['head4']);
$p4=htmlspecialchars($_POST['p4']);
//出力HTML
$contents=<<<EOD
<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta http-equiv='Content-Style-Type' content='text/css'>
<meta name='GENERATOR' content='JustSystems Homepage Builder Version 20.0.6.0 for Windows'>
<title>あべじぇね</title>
</head>
<body id='body' background='img_png_src' marginwidth='0' marginheight='0'>
<div style="overflow: auto;padding:0px 20px;">
<br>
<script>
var bg;
bg=document.createElement('canvas');
bg.width =400;
bg.height=100;
var context =bg.getContext('2d');
context.fillStyle='#FFFFFF';
context.fillRect(0,0,400,100);
context.fillStyle='#A9F5D0';
context.font = '48px Monotype Corsiva';
context.fillText('{$name3}', 10, 50);
var img_png_src=bg.toDataURL();
document.getElementById('body').background = img_png_src;
</script>
<h1 align='center'>
{$name1}のホームページ</h1>
<table align='center'>
<tbody><tr>
<td rowspan='2'><img id='preview' src='{$_FILES['img']['name']}' width='350' height='414' border='0'><br>
<script>
</script>
<br>
<table width='256'>
<tbody><tr>
<td width='14'> </td>
<td width='230'>{$name2}<br></td>
</tr>
<tr>
<td> </td>
<td>生年月日 {$birthday}<br></td>
</tr>
<tr>
<td> </td>
<td>血液型 {$btype}<br></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan='2'><br>
{$english}<br>
<br>
mail:<a href='{$email}' target='_blank'> {$email}</a></td>
</tr>
</tbody></table>
<br>
所属<strong>:</strong><br>
{$address}<br>
<td> </td>
<td><div align='center'>★★★ {$news} ★★★</div></td>
</tr>
<tr>
<td></td>
<td>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong> {$head1}</strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'> </td>
<td> <strong>{$p1}</strong>
</td>
</tr>
</tbody></table>
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong>{$head2}</strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong>{$p2}</strong></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong>{$head3}</strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong>{$p3}</strong></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong>{$head4}</strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong>{$p4}</strong></form></td>
</tr>
</tbody></table>
<!-- end -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<b>当サイトの内容、テキスト、画像等の無断転載・無断使用を固く禁じます。<br>
また、まとめサイト等への引用を厳禁致します。<br>
お問い合わせはメールでご連絡をお願い致します。</b><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</tbody></table>
</body></html>
EOD;
//セッションごとのフォルダ作成
$session_folder="./users/".session_id();
$user_path=$session_folder."/your_homepage_file";
mkdir($session_folder);
mkdir($user_path);
//画像の保存先指定
$user_img = $user_path."/".$_FILES['img']['name'];
move_uploaded_file($_FILES['img']['tmp_name'],$user_img);
//HTMLの保存先指定
$user_html=$user_path."/homepage.html";
file_put_contents($user_html,$contents);
// 丸ごと圧縮するフォルダ
$folder = "your_homepage_file";
// Zip ファイル名
$fileName = $folder.".zip";
// Zip ファイルパス
$zipPath = $session_folder."/".$fileName;
//zipに圧縮
$command = "cd ". $session_folder .";".
"zip -r '". $fileName . "' ./".$folder."/";
exec($command);
chmod($zipPath, 0750);
//ダウンロード処理
mb_http_output("pass");
header("Content-Type: application/zip");
header("Content-Transfer-Encoding: Binary");
header("Content-Disposition: attachment; filename*=UTF-8\'\'" . $fileName);
header('Cache-Control: public');
header('Pragma: public');
ob_end_clean();
readfile($zipPath);
//ファイル・フォルダ削除
unlink( $zipPath );
unlink($user_html);
unlink($user_img);
rmdir($user_path);
rmdir($session_folder);
echo $zipPath;
//リダイレクト防止
header('Location: ./');
exit;
};
?>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.4, user-scalable=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Bootstrap Javascript(jQuery含む) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<title>あべじぇね</title>
</head>
<body id="body" background="img_png_src" marginwidth="0" marginheight="0">
<div class="container">
<div class="px-4 py-5 my-5 text-center" style="background-color: rgba( 220, 220, 220, 0.55 );">
<h1>あべじぇね</h1>
<h1><small>阿部寛風ホームページジェネレータ</small></h1>
<p>以下のフォームにプロフィールを入力することにより阿部寛風のホームページが生成できます。</p>
<a href="http://abehiroshi.la.coocan.jp/">阿部 寛のホームページ</a>
</div>
<div style="overflow: auto;padding:0px 20px;">
<br>
<script>
var bg;
bg=document.createElement("canvas");
bg.width =400;
bg.height=100;
var context =bg.getContext('2d');
context.fillStyle="#FFFFFF";
context.fillRect(0,0,400,100);
context.fillStyle="#A9F5D0";
context.font = '48px Monotype Corsiva';
context.fillText('ABE GENE', 10, 50);
var img_png_src=bg.toDataURL();
document.getElementById("body").background = img_png_src;
</script>
<form action="homepage.php" method="post" enctype="multipart/form-data" target=”_blank”>
<h1 align="center">
<input name="name1" style="display: inline" type="text" size="10" placeholder="名前">のホームページ</h1>
<table align="center">
<tbody><tr>
<?php
if($_FILES['img']['tmp_name']){
$_SESSION['img']['data'] = file_get_contents($_FILES['img']['tmp_name']);
$_SESSION['img']['tmp'] = exif_imagetype($_FILES['img']['tmp_name']);}
?>
<td rowspan="2"><img id="preview" src="" width="350" height="414" border="0"><br>
<input name="img" type="file" accept="image/*" onchange="previewImage(this);">
<script>
function previewImage(obj)
{
var fileReader = new FileReader();
fileReader.onload = (function() {
document.getElementById('preview').src = fileReader.result;
});
fileReader.readAsDataURL(obj.files[0]);
}
</script>
<br>
<table width="256">
<tbody><tr>
<td width="14"> </td>
<td width="230"><input name="name2" style="display: inline" type="text" size="10" placeholder="名前"><input name="name3" style="display: inline" type="text" size="10" placeholder="NAME"><br></td>
</tr>
<tr>
<td> </td>
<td>生年月日 <input name="birthday" style="display: inline" type="text" size="10" placeholder="○○年○○月○○日"><br></td>
</tr>
<tr>
<td> </td>
<td>血液型 <input name="btype" style="display: inline" type="text" size="10" placeholder="○型"><br></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><br>
<textarea name="english" cols="40" rows="8" placeholder="英語でなんか書く"></textarea><br>
<br>
mail:<input name="email" style="display: inline" type="text" size="10" placeholder=""></td>
</tr>
</tbody></table>
<br>
所属<strong>:</strong><br>
<textarea name="address" cols="40" rows="8" placeholder="住所、電話番号など書く"></textarea><br>
<br>
<br>
<br>
<br>
<td> </td>
<td><div align='center'>★★★ <input name="news" style="display: inline" type="text" size="10" placeholder="新着情報"> ★★★</div></td>
</tr>
<tr>
<td></td>
<td>
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="bottom"><hr width="100%" size="1"></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><input name="head1" style="display: inline" type="text" size="10" placeholder="項目1"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0">
<tbody><tr>
<td width="70" align="left" valign="top"> </td>
<td> <textarea name="p1" cols="40" rows="8" placeholder="項目1について"></textarea>
</td>
</tr>
</tbody></table>
<!-- start -->
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="bottom"><hr width="100%" size="1"></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><input name="head2" style="display: inline" type="text" size="10" placeholder="項目2"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0">
<tbody><tr>
<td width="70" align="left" valign="top"></td>
<td> <textarea name="p2" cols="40" rows="8" placeholder="項目2について"></textarea></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="bottom"><hr width="100%" size="1"></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><input name="head3" style="display: inline" type="text" size="10" placeholder="項目3"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0">
<tbody><tr>
<td width="70" align="left" valign="top"></td>
<td> <textarea name="p3" cols="40" rows="8" placeholder="項目3について"></textarea></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="bottom"><hr width="100%" size="1"></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><input name="head4" style="display: inline" type="text" size="10" placeholder="項目4"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0">
<tbody><tr>
<td width="70" align="left" valign="top"></td>
<td> <textarea name="p4" cols="40" rows="8" placeholder="項目4について"></textarea></form></td>
</tr>
</tbody></table>
<!-- end -->
<table width="100%" border="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="bottom"><hr width="100%" size="1"></td>
</tr>
</tbody></table>
<b>当サイトの内容、テキスト、画像等の無断転載・無断使用を固く禁じます。<br>
また、まとめサイト等への引用を厳禁致します。<br>
お問い合わせはメールでご連絡をお願い致します。</b><br>
<br>
<br>
<br>
</td>
</tr>
</tbody></table>
<!-- Button trigger modal -->
<div style="text-align:center;">
<button type=button class="m-3 col btn btn-secondary btn-lg text-center" data-toggle="modal" data-target="#exampleModal" style="width:1000px">
生成メニュー
</button></div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">生成メニュー</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input class="col btn btn-secondary btn-lg text-center" style="display:inline aligh:center" type="submit" value="生成">
<p>生成したHTMLが別のタブで開かれます。</p>
<input class="col btn btn-secondary btn-lg text-center" style="display:inline aligh:center" type="submit" name="download" formaction="index.php" formtarget="_self" value="生成したHTMLをダウンロード">
<p>選択した画像とHTMLがzipファイルでダウンロードされます。</p>
</div>
</div>
</div>
</div></form>
</div></div>
<br>
<br>
<br>
</body></html>
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta http-equiv='Content-Style-Type' content='text/css'>
<meta name='GENERATOR' content='JustSystems Homepage Builder Version 20.0.6.0 for Windows'>
<title>あべじぇね</title>
</head>
<body id='body' background='img_png_src' marginwidth='0' marginheight='0'>
<div style="overflow: hidden;padding:0px 20px;">
<br>
<script>
var bg;
bg=document.createElement('canvas');
bg.width =400;
bg.height=100;
var context =bg.getContext('2d');
context.fillStyle='#FFFFFF';
context.fillRect(0,0,400,100);
context.fillStyle='#A9F5D0';
context.font = '48px Monotype Corsiva';
context.fillText('<?php echo $_POST['name3']; ?>', 10, 50);
var img_png_src=bg.toDataURL();
document.getElementById('body').background = img_png_src;
</script>
<form action='homepage.php' method='post' enctype='multipart/form-data'>
<h1 align='center'>
<?php echo $_POST['name1']; ?>のホームページ</h1>
<table align='center'>
<tbody><tr>
<?php
session_start();
if($_FILES['img']['tmp_name']) {
$_SESSION['img']['data'] = file_get_contents($_FILES['img']['tmp_name']);}?>
<td rowspan='2'><img id='preview' src='img.php' width='350' height='414' border='0'><br>
<script>
</script>
<br>
<table width='256'>
<tbody><tr>
<td width='14'> </td>
<td width='230'><?php echo $_POST['name2']; ?><br></td>
</tr>
<tr>
<td> </td>
<td>生年月日 <?php echo $_POST['birthday']; ?><br></td>
</tr>
<tr>
<td> </td>
<td>血液型 <?php echo $_POST['btype']; ?><br></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan='2'><br>
<?php echo $_POST['english']; ?><br>
<br>
mail:<a href='<?php echo $_POST['email']; ?>' target='_blank'><?php echo $_POST['email']; ?></a></td>
</tr>
</tbody></table>
<br>
所属<strong>:</strong><br>
<?php echo $_POST['address']; ?><br>
<td> </td>
<td><div align='center'>★★★ <?php echo $_POST['news']; ?> ★★★</div></td>
</tr>
<tr>
<td></td>
<td>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong><?php echo $_POST['head1']; ?></strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'> </td>
<td> <strong><?php echo $_POST['p1']; ?></strong>
</td>
</tr>
</tbody></table>
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong><?php echo $_POST['head2']; ?></strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong><?php echo $_POST['p2']; ?></strong></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong><?php echo $_POST['head3']; ?></strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong><?php echo $_POST['p3']; ?></strong></td>
</tr>
</tbody></table>
<!-- end -->
<!-- start -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='top'><strong><?php echo $_POST['head4']; ?></strong></td>
</tr>
</tbody></table>
<table border='0' cellpadding='0'>
<tbody><tr>
<td width='70' align='left' valign='top'></td>
<td> <strong><?php echo $_POST['p4']; ?></strong></form></td>
</tr>
</tbody></table>
<!-- end -->
<table width='100%' border='0' cellpadding='0'>
<tbody><tr>
<td align='left' valign='bottom'><hr width='100%' size='1'></td>
</tr>
</tbody></table>
<b>当サイトの内容、テキスト、画像等の無断転載・無断使用を固く禁じます。<br>
また、まとめサイト等への引用を厳禁致します。<br>
お問い合わせはメールでご連絡をお願い致します。</b><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</tbody></table>
</body></html><?php
session_start();
echo $_SESSION['img']['data'];
?>ぜひ使ってみてください~~

あべじぇね
阿部寛風ホームページジェネレータ



コメント