WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

よつばベーカリー|横浜石川町の小さな街のパン屋さん

JR石川町駅から徒歩2分、元町、中華街からもほど近いところによつばベーカリーはあります。国産小麦(北海道産小麦100%)を使った昔ながらのふわふわ感にこだわったパンを焼いています。パンの香りと幸せがたくさんの方に届きますように。

yotsuba-bakery.com



f:id:yachin29:20201024205506j:plain

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com


HTMLで同じ項目のフォームを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google-formのカスタマイズ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>入力画面</h1>
<form action="#" method="POST" id="g-form">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><input type="text" name="#" placeholder="お名前を入力してください" required></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" name="#" required></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="#" value="男性" id="male"><label for="male">男性</label>
<input type="radio" name="#" value="女性" id="female"><label for="female">女性</label>
</dd>
<dt>お問い合わせ内容<span>必須</span></dt>
<dd>
<textarea name="#"required placeholder="お問い合わせ内容を記入して下さい"></textarea>
</dd>
</dl>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</body>
</html>

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。



以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。


f:id:yachin29:20190830132103p:plain




サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける




これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp

バナーの作成

バナー広告とはディスプレイ広告の1つです。
広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。


バナー広告の種類

  • モバイル:代表的なサイズ 320x50、320x100
  • パソコン:代表的なサイズ 300x250、728x90、160×600


モバイル用のバナーはPC用に比べ、極端にサイズが小さいのでテキストや画像の選択が非常に難しくなります。
さらにモバイル用であれば高解像度ディスプレイで閲覧される事が前提なので、2倍のサイズで作成します。


f:id:yachin29:20191205123220g:plain


f:id:yachin29:20191205123231g:plain



anagrams.jp



既存バナーのトレース

f:id:yachin29:20161125092848j:plain




アセット機能を使ってみる

以前はwebサイト制作のワークフローとして、Photoshopでカンプを作成し、画像を書き出す為に「スライスツールで各画像を切り出す」という作業を行なっていましたが、この「スライスツールで画像を切り出す」という作業が色々と制約があり、とても細かい作業の為、非常に面倒でした。

これがPhotoshopのCCになってから「画像アセットの生成」という機能に変わり、面倒なスライスツールを使う必要が無くなりました。
さらにレイヤー構造を保ったまま、複数のレイヤーを1枚の画像にまとめる事など、今までのスライスツールでは出来なかった事も出来るようになり、作業効率も非常に上がるので、ぜひ覚えましょう。

「画像アセットの生成」の作業手順

  1. photoshopの作業(psdデータ)データを名前を付けて適切な場所(フォルダー)に保存
  2. レイヤー、もしくはフォルダーに画像のファイル名と拡張子(jpgやpngなど)を付ける
  3. 「ファイル」の生成→「画像アセット」にチェックを入れる

f:id:yachin29:20190301111313p:plain

これだけでpsdデータを保存したフォルダーに「〇〇-assets」というフォルダーが生成され、その中にファイル名を付けたレイヤーが画像として書き出されます。
万が一、上手く生成されない場合は「環境設定」の「プラグイン」の項目の一番上の「Generaterを有効にする」にチェックが入っているか確認してみましょう。


レイヤーの命名規則

アセット機能を使用する際に一番重要なのは適切なレイヤー名を付ける事です。アセットで書き出す事の出来る画像拡張子は「jpg」「png」「gif」「svg」の4つです。
また、複数のサイズや複数の拡張子で書き出したい時はファイル名とファイル名の間にカンマを入れます。


例「200% logo@2x.jpg,logo.jpg」

そうすると「〇〇-assets」フォルダーに以下のように複数の画像が生成されます。
f:id:yachin29:20190301113818p:plain



また複数のレイヤーをフォルダーにまとめ、フォルダーに拡張子を付けると、ファルダーの中の各レイヤーが1つにまとまった画像が生成されるので、こちらも実際にやってみましょう。




詳しい命名規則はこちら
blogs.adobe.com


note.com



helpx.adobe.com

データベース の設定

今回はブラウザー上のフォームで入力したデータをデータベースに保存出来るようにします。

まずはXAMPPに新しいデータベースを作ります。
その次にテーブルを作成。

f:id:yachin29:20161219233236j:plain


今回はID、名前、メールアドレス、お問い合わせ内容の4つのカラムを作成

カラムを作る際には、そのカラムのデータ型に注意しましょう。

・主なデータ型
INT型:数値。データ番号やIDなどの時。
VARCHAR型:文字数を指定。文字列の長さは変動。
TEXT型:巨大なテキストデータを保存する。
DATETIME型:日付。 投稿日時、最終更新日時など。


データベースがちゃんと機能しているか、まずはSQLを使って手動で確認してみましょう。

INSERT INTO mytable (name, email,message,date) VALUES ('山田太郎', 'yamada@gmail.com','こんにちは',now())


続いて、PHPファイルでフォームを作ります。

入力画面(input.php)
確認画面(confirm.php
登録画面(submit.php

session

セッションは、個々のユーザーのデータを格納する仕組みで、 個々のユーザーに対してセッション ID を用意します。 これを用いて、複数ページにまたがるリクエストの間で状態の情報を永続させることができます。 Cookie(クッキー)の仕組みととても似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。

// セッションの開始
session_start();

// 入力値をセッション変数に格納
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;

PDOでデータベースに接続し、SQLを実行する

PDO PHP Data Object

データベースでの実行は、「データベースに接続」して「データベースを捜査する許可を得る」必要があります
そのために「PDO」という命令を使って、「ユーザー名」と「パスワード」を設定します
通常のオブジェクトと同様、このオブジェクトの中には「データベースへの接続」や「SQLの実行」「実行結果の取得」などデータベースを使ったアプリケーション開発に必要な命令がそろっています。

データベースに接続する為に必要な情報

  • データベースホスト名:localhostmampの場合もポート番号は省略)

使用するデータベース名:
ユーザー名:root
パスワード:root (xamppの場合は省略)


入力画面に戻る

何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、この設定をするとしないではフォームの離脱率に非常に影響が出るので、設定しましょう。
今回は簡単なJavascriptを使った方法で、データを保持したまま入力画面に戻る機能をつけましょう。


buttonタグの場合

<button type="button" onclick="history.back()">戻る</button>


inputタグの場合

<input value="前に戻る" onclick="history.back();" type="button">


まずはsubmit.php(データベース にデータを送信)のみを作ってDBにちゃんとデータが送信されるか、確認してみましょう。

<?php

// 変数の初期化 & 日時の取得
$sql = null;
$res = null;
$dbh = null;

$name = "名前";
$email = "aaa@aaa";
$message = "テスト";
$date = date('Y-m-d H:i:s');

try {
	// DBへ接続(ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード)
	$dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root');

	// SQL作成
	$sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')";

	// SQL実行
	$res = $dbh->query($sql);

} catch(PDOException $e) {
	echo $e->getMessage();
	die();
}

// 接続を閉じる
$dbh = null;
?>


また、初期設定では確認画面(confirm.php)や登録画面(submit.php)に直接アクセスしてしまうと、POSTの値が空なのでエラーが出てしまいます。それを回避する為、以下のif文を使って入力画面(input.php)にリダイレクトさせます。

if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動(リダイレクト)させる
 header('Location:input.php');
 exit;
}


input.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続しているフォーム|入力画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>入力画面</h1>
<form action="confirm.php" method="post">
<dl>
<dt>お名前</dt><dd><input type="text" name="name" required placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt><dd><input type="email" name="email" required></dd>
<dt>お問い合わせ内容</dt><dd><textarea name="message" required cols="40" rows="5"></textarea></dd> 
</dl>
<p><input type="submit" value="確認画面へ"></p>
</form>
</div>
</body>
</html>
confirm.php(確認画面)
<?php
if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動(リダイレクト)させる
 header('Location:input.php');
 exit;
}

$name = htmlspecialchars($_POST["name"], ENT_QUOTES);
$email = htmlspecialchars($_POST["email"], ENT_QUOTES);
$message = htmlspecialchars($_POST["message"], ENT_QUOTES);

// セッションの開始
session_start();
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続しているフォーム|確認画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>確認画面</h1>
<form action="submit.php" method="post">
<dl>
<dt>お名前</dt><dd><?php echo $name ?></dd>
<dt>メールアドレス</dt><dd><?php echo $email ?></dd>
<dt>お問い合わせ内容</dt><dd><?php echo $message ?></dd> 
</dl>
<p>
<input type="submit" value="送信">
<input type="button" value="戻る" onclick="history.back();">
</p>
</form>
</div>
</body>
</html>
submit.php(データベース にデータを送信)
<?php
if(!(isset($_SESSION['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動(リダイレクト)させる
session_destroy();
 header('Location:input.php');
 exit;
}

// 変数の初期化 & 日時の取得
$sql = null;
$res = null;
$dbh = null;

// セッションの開始
session_start();
$name = $_SESSION[ 'name' ];
$email = $_SESSION[ 'email' ];
$message = $_SESSION[ 'message' ];
$date = date('Y-m-d H:i:s');
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>最終画面</title>
</head>
<body>
<h1>お問い合わせ、ありがとうございました。</h1>
<P><a href="input.php">入力画面に戻る</a></P>
<?php
try {
	// DBへ接続(ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード)
	$dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root');

	// SQL作成
	$sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')";

	// SQL実行
	$res = $dbh->query($sql);

} catch(PDOException $e) {
	echo $e->getMessage();
	die();
}
// 接続を閉じる
$dbh = null;

//最後にセッション情報を破棄
session_destroy();
?>
</body>
</html>

PHPでセッション情報をコントロールする

セッション(session)とは

セッションとは、コンピュータのサーバー側に一時的にデータを保存する仕組みのことです。たとえば、あるECサイトへのログイン情報やユーザー情報など、ユーザーに直接紐づくようなデータをセッションに格納して使ったりします。
以前、授業で使ったCookie(クッキー)の仕組みと似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。サーバーにデータを保存するセッションのほうがよりセキュリティ的に安全だと言われています。


セッションの使い方

セッションを使う場合、まず最初にsession_start関数 を使い、スタートさせてからその下に諸々を書いていきます。

session_start();


次にセッションを使ってデータを保存したい場合は、セッション用のグローバル変数を使用します。

<?php
session_start();

$name = 'yajima';

$_SESSION['name'] = $name;

echo $_SESSION['name'];
?>

この時点で、サーバー(XAMPP)にセッションデータが保存されているので、確認してみましょう。XAMPPの場合だとhtdocsフォルダと同じ階層のtmpフォルダに作成されているので確認してみましょう。
(mampの場合はtmp→phpの中)

セッションのデータの中身を削除
<?php
session_start();

$name = 'yajima';

$_SESSION['name'] = $name;

echo $_SESSION['name'];

unset($_SESSION['name'] );


?>
セッションを終了
<?php
session_start();

$name = 'yajima';

$_SESSION['name'] = $name;

echo $_SESSION['name'];

session_destroy();
?>

スマートフォンの時だけ電話番号のリンクを有効にする

スマートフォンタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリンク扱いになってしまいます。

PCで確認
http://felica29.starfree.jp/tel/


スマホで確認
f:id:yachin29:20200622155615p:plain




なので、まずmetaタグで

<meta name="format-detection" content="telephone=no">

と記述し、


実際の電話番号へのリンク部分に

<a href=”tel:0312345678”>お電話はこちら</a>

というリンク設定をします。



ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。

pointer-events

pointer-eventsはマウスイベント(hover , click など)の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。


今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。

/*pcの時*/
a[href^="tel:"] {
    pointer-events:none;
}
@media screen and (max-width:767px){}
/*spの時*/
a[href^="tel:"] {
    pointer-events:auto;
}
}

「href^=""」ビット排他的論理和演算子

これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。

オーガニック検索

オーガニック検索(自然検索 / Organic Search)とは、検索結果画面(SERPs)に表示されるURLのリストのうち、リスティング広告のような広告枠を含まない部分を指します。

リスティング広告

リスティング広告とは、ユーザーが検索したキーワードに応じて検索結果上に表示される広告を指して使われています。この広告は、広告が検索されたキーワードに連動して表示されるため、検索連動型広告とも呼ばれます。

www.seohacks.net




検索エンジン最適化(SEO)スターター ガイド

Googleはサイトの品質の向上を目的とし、SEOの基礎知識を包括的に学びたい人に、ガイドを公表しています。Googleでサイトが自動的に掲載順位 1 位になるための秘訣が紹介されているわけではありませんが、以下に示すおすすめの方法を取り入れると、検索エンジンがコンテンツをクロールしてインデックス登録し、理解するのが容易になるでしょう。
support.google.com



description

meta descriptionは、ランキングには影響しない。しかし、検索結果でクリックしてもらえるかどうかに大きく影響する。というのも、検索結果に表示されるスニペット(説明文)に使われるからだ(クエリによっては使われないこともある)。検索ユーザーが「このページを見てみたい」と思うように、興味や期待をかきたてるmeta descriptionにするのは、重要なことだ。

  • SEO上の順位上昇の効果はほとんどない
  • 検索結果上のクリック率には大きく関与する
  • ページ内容を端的にまとめた内容にする
  • 全角でおよそ120文字以内で対策キーワードを含む内容にする
  • 各ページ異なる内容にする

モバイルフレンドリー

スマートフォンの需要拡大と共にGoogleがモバイルサイトについても細かい指針を出しています。モバイル フレンドリー ページ(スマートフォンで見やすく使いやすいページ)の検索順位が上がるようなアルゴリズムを採用しています。下記のテストサイトでモバイルフレンドリーテストを行い、問題点が指摘されたら改善しましょう。

モバイル フレンドリー テスト - Google Search Console




Google Search Console

Google Search Console(以前はGoogle web マスターツールという名前でした)という、Googleが無料で提供しているツールで、これをサイトに組み込む事によって、アクセス数や流入キーワード、どれくらいリンクされているかなど、自分のサイトの状況を教えてくれます。また、場合によっては改善点とその解決方法を提示してくれます。
この作業は上位検索をする上では必須と言っても良いと思います。

Google Search Console



bazubu.com


coliss.com