Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[PHP]フォームの制作…チェック機能を働かせる

これまで実装した仕様

  • index.php⇒フォームをpostで送信、エラーがあればここに戻る
  • check.php⇒index.phpからのpostをsessionに書き込み、エラーチェック、正しければ先へ
  • send.php⇒sessionのデータをメール送信
index.php
  • フォームのpostメソッドでname,email,messageをcheckに送信する
  • checkから戻ったとき…sessionに記録されたそれまでの入力値とエラー内容を表示する
<?php
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* sessionを利用 */
session_start();
/* 空文字を入れておく */
  $name = '';
  $email = '';
  $message = '';
  $name_error = '';
  $email_error = '';
  $message_error = '';
/* 初回はsessionの値が無い⇒undefinedなので@でエラー回避する(応急策) */
  $name = @$_SESSION['name'];
  $email = @$_SESSION['email'];
  $message = @$_SESSION['message'];
/* エラー */
  $name_error = @$_SESSION['name_error'];
  $email_error = @$_SESSION['email_error'];
  $message_error = @$_SESSION['message_error'];
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問合せフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>メールフォーム</h1>
<form action="check.php" method="post">
<table>
  <tr>
    <th><label for="name">お名前</label><br><small>(20文字以内)</small></th>
    <td><input type="text" name="name" id="name" value=<?php echo($name); ?>><?php if(!empty($name_error)){echo "<span>{$name_error}</span>";}?></td>
  </tr>
  <tr>
    <th><label for="email">Eメール</label><br><small>(25文字以内)</small></th>
    <td><input type="text" name="email" id="email" value=<?php echo ($email); ?>><?php if(!empty($email_error)){ echo '<span>',$email_error,'<span>';}?>
    </td>
  </tr>
  <tr>
    <th><label for="message">お問合せ</label><br><small>(150文字以内)</small></th>
    <td><textarea name="message" id="message"><?php echo($message); ?></textarea><?php if(!empty($message_error)){ echo '<span>',$message_error,'<span>';}?>
    </td>
  </tr>
</table>
<input type="submit" value="確認" id="submit">
</form>
</div>
</body>
</html>
check.php
  • いきなりアクセスされたときはindex.phpにリダイレクト
  • formから送られたデータを変数に格納
  • エラーメッセージを変数に格納
  • 送られてきたデータをsessionに格納
  • 適合値かチェックする
  • 入力されているか…empty
  • 文字数は大丈夫か…mb_strlen
  • 指定した文字が含まれるか…strpos
  • 全角/半角の判断…strlen != mb_strlen
  • いずれかに適合しなければフラグ$successをfalseにし、エラー内容をsessionに返す
  • $successがfalseであれば「送信」を表示しない
  • $successの結果をsessionに格納
<?php
/* htmlspecialcharsを使いやすくするために自作関数化 */
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* フォーム情報がない場合index.phpにリダイレクト */
if( !(isset($_POST['name'])) || !(isset($_POST['email'])) || !(isset($_POST['message']))){
  header('Location:index.php');
  exit;
}
/* 変数に格納 */
  $name = ($_POST["name"]);
  $email = ($_POST["email"]);
  $message = ($_POST["message"]);

/* エラー時のフラグと表示する文言を格納する変数 */
  $success = true;
  $name_error = '';
  $email_error = '';
  $message_error = '';
/* メールアドレスに@が入っているか */
  if(strpos($email,'@') === false){
    $email_error = '@マークが入力されていません';
    $success = false;
}
/* メールアドレスが全角文字 */
  if(strlen($email) != mb_strlen($email,'utf-8')){
    $email_error = 'メールアドレスに全角文字が含まれています';
    $success = false;
}
/*文字数チェック*/
  if(mb_strlen($name,'utf-8') > 20){ $name_error =  'お名前が長すぎます';  $success = false;}
  if(mb_strlen($email,'utf-8') > 20){ $email_error =  'メッセージが長すぎます';  $success = false;}
  if(mb_strlen($message,'utf-8') > 150){ $message_error =  'お問い合わせ内容が長すぎます';  $success = false;}
/* もし変数の中身が空なら */
  if(empty($name)){ $name_error = '名前が入力されていません';  $success = false;}
  if(empty($email)){ $email_error = 'メールアドレスが入力されていません';  $success = false;}
  if(empty($message)){ $message_error = 'お問合せ内容が入力されていません';  $success = false;} 
/* セッションを使う⇒入力内容 */
session_start();
  $_SESSION['name'] = $_POST['name'];
  $_SESSION['email'] = $_POST['email'];
  $_SESSION['message'] = $_POST['message'];
  $_SESSION['success'] = $success;
/* セッションを使う⇒エラー内容 */
  $_SESSION['name_error'] = $name_error;
  $_SESSION['email_error'] = $email_error;
  $_SESSION['message_error'] = $message_error;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力内容の確認</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>入力内容の確認</h1>
<table>
<tr><th>お名前</th><td><?php echo h($name); echo '<span>',h($name_error),'</span>'; ?></td></tr>
<tr><th>Eメール</th><td><?php echo h($email); echo '<span>',h($email_error),'</span>'; ?></td></tr>
<tr><th>お問合せ</th><td><?php echo nl2br(h($message)); echo '<span>',h($message_error),'</span>'; ?></td></tr>
</table>
<div id="lastBtn">
<p><a href="index.php" >戻る</a></p>
<?php
  if($success){
    echo '<p><a href="send.php">送信</a></p>';
  }
?>
</div>
</div>
</body>
</html>
send.php
  • いきなりアクセスされたときはindex.phpにリダイレクト
  • しかしsessionに格納されたsuccessがtrueであれば(checkをクリアしていれば)メールを送信
<?php
/* セッションを利用 */
  session_start();
/* 直接アクセスされたときindex.phpにリダイレクト */
  $success = $_SESSION['success'];
    if( !$success ){
        header('Location:index.php');
        exit;
  }
  $name = $_SESSION['name'];
  $email = $_SESSION['email'];
  $message = $_SESSION['message'];
/* サーバからメールを送信 */
  mb_send_mail('hoge@hoge.com', 'お問い合わせメール', $name.$email.$message);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<h1>お問合せメールを送信しました</h1>
<p>お問合せありがとうございました。</p>
<p><a href="index.php" >トップへ戻る</a></p>
</body>
</html>
strpos()
  • 指定した変数に指定した文字が入っているか?
  if(strpos($email,'@') === false){
    $email_error = '@マークが入力されていません';
    $success = false;
}
mb_strlen
  • 指定した変数の指定した文字コードの文字列長を調べる
  if(mb_strlen($name,'utf-8') > 20){ $name_error =  'お名前が長すぎます';  $success = false;}
全角/半角チェック
  • strlenは文字のバイト長を返し、mb_strlenは指定した文字コードの文字長を返す。半角文字は1文字1バイト、utf-8は1文字3バイトの性質を利用し、比較演算子でつなげることで全角文字が含まれているか調べる。
  if(strlen($email) != mb_strlen($email,'utf-8')){
    $email_error = 'メールアドレスに全角文字が含まれています';
    $success = false;
}

 その他

  • 境界線テスト⇒文字列が指定されたフォームで実際に文字数を入力してチェックすること
  • POST⇒サーバ上の「メモリ」にデータが蓄えられる
  • セッションのデータができるタイミング⇒session_start()後
  • 有効期限⇒標準:24分

[jQuery]jQueryを使ったアニメーションの注意事項/スマホにおける:hover

jQueryにおけるアニメーションの注意点

  • サムネイルをクリックすると画像が置き換わるような仕組み
  • クリックしたときに画像が読み込まれるため、ユーザー側でタイムラグが発生する
  • 瞬間に画像を切り替えたいタッチアクションなどでは違和感を生みやすい

f:id:akatonbo_web:20150709164331p:plain

  • これはユーザーエクスペリエンス上好ましくないため、あらかじめ画像が読み込まれるCSSスプライトを利用したい
  • 上の場合、サムネイルをCSSスプライトの画像としクリックされるとjQUerycssを書き換えるなどして「ずらして」画像の変化を表現する。

スマホにおける:hoverの問題

スマホ対応ではontouchイベントを使う
  .bind( 'touchstart', function(){
    $( this ).addClass( 'クラス名' );
}).bind( 'touchend', function(){
    $( this ).removeClass( 'クラス名' );
}); css

plustrick.com

Google「hoverをスマホサイトのメニューに使わないで」

[PHP]セッションの利用

post・get以外の方法でhtml間でファイルを渡す

問題点
  • input要素に type="hidden" を指定して隠しデータを送る方法は古くセキュリティが脆弱⇒×
  • クッキーを使う方法はユーザのPC内に書き込まれるためユーザ側で偽造可能⇒×
セッションを利用する
  • sessionを使うと「サーバの中に」ファイルが出来情報が書き込まれる
  • 以降サーバを参照して情報を取り出す仕組み
  • tmpフォルダ(テンポラリー<一時>フォルダ)の中の、tmpファイルが中身
  • データを参照⇒$_SESSION['name']

用意するphp

  1. フォームの送信用 index.php ⇒formのsendで渡す
  2. 送信内容の確認用 check.php ⇒sessionで渡す
  3. 内容をメールで送信し、結果を表示用 send.php
  4. これらのphpをサーバにアップロードする
  5. ローカルだと設定していなければメールが送られないので適当なレンタルサーバにアップする
index.php
<?php
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* sessionを利用(後述) */
session_start();
/* 初回はsessionの値が無い⇒undefinedなので@でエラー回避する(応急策) */
$name = @$_SESSION['name'];
$email = @$_SESSION['email'];
$message = @$_SESSION['message'];
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問合せフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>メールフォーム</h1>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前</label></th><td><input type="text" name="name" id="name" value=<?php echo($name); ?>></td></tr>
<tr><th><label for="email">Eメール</label></th><td><input type="text" name="email" id="email" value=<?php echo($email); ?>></td></tr>
<tr><th><label for="message">お問合せ</label></th><td><textarea name="message" id="message" value=<?php echo($message); ?>></textarea></td></tr>
</table>
<input type="submit" value="確認" id="submit">
</form>
</div>
</body>
</html>
check.php
<?php
/* htmlspecialcharsを使いやすくするために自作関数化 */
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* フォーム情報がない場合index.phpに戻る */
if( !(isset($_POST['name'])) || !(isset($_POST['email'])) || !(isset($_POST['message']))){
  header('Location:index.php');
  exit;
}
/* 変数に格納 */
  $name = ($_POST["name"]);
  $email = ($_POST["email"]);
  $message = ($_POST["message"]);
/* 入力が空白(空文字)はエラーにしたいので変数に代入 */
  $success = true;
  $name_error = '';
  $email_error = '';
  $message_error = '';
/* もし変数の中身が空なら */
  if(empty($name)){ $name_error = '名前が入力されていません';}
  if(empty($email)){ $email_error = 'メールアドレスが入力されていません';}
  if(empty($message)){ $message_error = 'お問合せ内容が入力されていません';} 
/* セッションを使う */
session_start();
  $_SESSION['name'] = $_POST['name'];
  $_SESSION['email'] = $_POST['email'];
  $_SESSION['message'] = $_POST['message'];
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力内容の確認</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>入力内容の確認</h1>
<table>
<tr><th>お名前</th><td><?php echo h($name); echo h($name_error); ?></td></tr>
<tr><th>Eメール</th><td><?php echo h($email); echo '<span>',h($email_error),'</span>'; ?></td></tr>
<tr><th>お問合せ</th><td><?php echo nl2br(h($message)); echo '<span>',h($message_error),'</span>'; ?></td></tr>
</table>
<p><a href="index.php" >戻る</a></p>
<p><a href="send.php" >送信</a></p>
</div>
</body>
</html>
send.php
<?php
/* セッションを利用 */
  session_start();
  $name = $_SESSION['name'];
  $email = $_SESSION['email'];
  $message = $_SESSION['message'];
/* サーバからメールを送信 */
  mb_send_mail('hirowebweb@gmail.com', 'お問い合わせメール', $name.$email.$message);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
mb_send_mail関数
  • phpを送信するphpの関数
  • mb_send_mail(宛先, 件名, 本文, ヘッダ情報)
セッションの有効期限について(概要)
  • ある条件でtmpデータは消える
  • 分母と分子の関係

[CSS]7/7授業 スマホ対応、アニメ効果

スマホ対応

yachin29.hatenablog.com

CSS3を利用したアニメ効果

  • 背景をグラデーションで色変化。
  • これに文字部分だけ透過させたpngを置くと、文字部分を色変化させたりできる。
  • background-colorをrgbaにして透過させると、色をかぶせることができる。
#container {
  width: 300px;
  height: 250px;
  -webkit-animation: bg-color 8s linear alternate infinite;
  animation: bg-color 8s linear alternate infinite;
}
@-webkit-keyframes bg-color{
  0%{ background-color: #0CC;}
  50%{ background-color: #3498db;}
  100%{ background-color:#C00;}
}
@keyframes bg-color{
  0%{ background-color: #0CC;}
  50%{ background-color: #3498db;}
  100%{ background-color:#C00;}
}

www.flapism.jp

リンク集

指定した技術のブラウザのサポート状況を調べられるサイト。
ちょっとした短い動画をダウンロードできるサイト。

videos.pexels.com