webサイト制作の勉強|2020年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

WordPressを始めるための下準備

ここでは、WordPressのオリジナルテーマを作成する為の下準備を行います。

WordPressのインストール


ダウンロードした「wordpress」フォルダーをテストサーバーの「htdocs」フォルダー内にコピーし、新規データベースを作成する。データベース名は適宜、文字コードは「utf-8_general_ci」にする。
テストサーバーにアクセスし、WordPressのインストール作業を画面の指示に沿って進めましょう。

f:id:yachin29:20150507013228p:plain
f:id:yachin29:20150507013247p:plain
f:id:yachin29:20150507013257p:plain
f:id:yachin29:20150507013318p:plain
f:id:yachin29:20150507013331p:plain


WordPressへログイン

オリジナルテーマを作成する途中では「ログイン」ボタンが存在しません。なので「http://localhost/フォルダー名/wp-admin/」からログイン画面を表示します


コンテンツのインポート

新たにインストールしたWordPressにはコンテンツが何も無いのでオリジナルテーマを作成する前コンテンツのサンプルデータをダウンロードしましょう。


www.socym.co.jp


もちろん自分で投稿記事などを入力する事も可能ですが、ここではサンプルデータをダッシュボードからインポートします。
「ツール」→「インポート」→「WordPress
f:id:yachin29:20150507020347p:plain


ダウンロードした「posts.xml」ファイルを選んでインポートしましょう。
f:id:yachin29:20150507020743p:plain


ユーザー名を選択して「Submit」ボタンを押します(画像などの関連ファイルはないので、Attachmentsのチェックは不要)
f:id:yachin29:20150507020403p:plain


ダッシュボードの「投稿」から「投稿一覧」を選び、投稿データがインポートされているか、必ず確認しましょう。
f:id:yachin29:20150507020412p:plain



school.yachin29.com

第4回試験内容

第4回の試験内容
提出日3月9日20:35までに提出
提出フォーマット:PDFかgoogleスライド

1、プロジェクト概要
-今回作成するサイトの概要
2、クライアント情報
-クライアントの情報(ペルソナ設定が大事)
-クライアントの要望
-要望に対する答え(最新の内容にアップデート)
3、システム要件(最新の内容にアップデート)
-ページ構成
-各ページのコンテンツ(正確なコンテンツ内容)
-入れる機能(スムーススクロール、ハンバーガーメニューなど細かく)
-入れるプラグイン
-使用言語(html,css,javascript,jQuery
-wordpress化の有無
4、デザイン要件(最新の内容にアップデート)
-デザインコンセプト
-カラーマネージメント(カラーコードで)
-フォントマネージメント(指定するフォントをすべて[googleFontsを含む])
-ワイヤー
-ロゴやキービジュアルなど
-カンプデータ(pdfかjpg)

※カンプと実際のコーディング内容が違う場合、その理由を必ず明記する事

getとpostを使ったフォーム送信

PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。

GET

GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。
そのせいで、URLにデータが表示されてしまい、誰からでも見ることができます。なので、フォームやECサイトなどの個人情報を扱うデータ送信には向いていません。
また送ることのできるデータ量が制限されています。テキストデータのみ送信可能です。
Internet ExplorerではURLに使用できる文字数が2,083文字と決まっており、パスに使用できる最大文字数は2,048文字となっています。
GETメソッドはデータをURLの末尾につけて送るので、制限されることになります。
URLなどを送信したい場合はGETを使いましょう。

getでの送信方法

データを送信する方の設定

<form action="output.php" method="get">
<input type="text" name="name">
</form>


データを受け取る側の設定

$name = $_GET[ 'name' ];

POST

POSTメソッドで送るデータはWebブラウザ上には現れないので、秘匿性の高いデータやデータベースなど重要度の高いデータは必ずPOSTメソッドを使いましょう。
また、送ることの出来るデータ量も特に明確な制限があるわけでは無いので、大量のデータを送る際も必ず、POSTメソッドを使いましょう。

なので、基本的にはデータ送信の際のメソッドはPOSTと覚えておきましょう。





POSTでの送信方法

データを送信する方の設定

<form action="output.php" method="post">
<input type="text" name="name">
</form>


データを受け取る側の設定

$name = $_POST[ 'name';


input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Post送信でデータを送信</title>
<style>
dl,dt,dd{
margin: 0;
padding: 0;
}
form{
width: 600px;
margin: 50px auto 0;
}
h1{
text-align: center;
padding: 20px 0;
}
dl{
display: flex;
flex-wrap: wrap;
border: 1px solid #555;
margin-bottom: 20px;
}
dt{
width: 30%;
padding: 20px;
box-sizing: border-box;
background-color:burlywood;
color: #FFF;
border-right:1px solid #555;
}
dt:nth-of-type(n+2){
border-top: 1px solid #555;
}

dd{
width: 70%;
padding: 20px;
box-sizing: border-box;
}
dd:nth-of-type(n+2){
border-top: 1px solid #555;
}

</style>
</head>
<body>

<form action="output.php" method="post">
<h1>入力画面</h1>
<dl>
<dt>お名前</dt>
<dd><input type="text" name="name"></dd>

<dt>メールアドレス</dt>
<dd><input type="email" name="email"></dd>

<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="男性">男性
<input type="radio" name="gender" value="女性">女性
</dd>

<dt>お問い合わせ内容</dt>
<dd><textarea name="ask"
rows="5" cols="40"></textarea></dd>
</dl>
<input type="submit" value="確認">
</form>
</body>
</html>

output.php

<?php
$name=$_POST['name'];
$email=$_POST['email'];
$gender=$_POST['gender'];
$ask=$_POST['ask'];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Post送信でデータを受信</title>
<style>
dl,dt,dd{
margin: 0;
padding: 0;
}
form{
width: 600px;
margin: 50px auto 0;
}
h1{
text-align: center;
padding: 20px 0;
}
dl{
display: flex;
flex-wrap: wrap;
border: 1px solid #555;
margin-bottom: 20px;
}
dt{
width: 30%;
padding: 20px;
box-sizing: border-box;
background-color:burlywood;
color: #FFF;
border-right:1px solid #555;
}
dt:nth-of-type(n+2){
border-top: 1px solid #555;
}

dd{
width: 70%;
padding: 20px;
box-sizing: border-box;
}
dd:nth-of-type(n+2){
border-top: 1px solid #555;
}

</style>
</head>
<body>

<form action="#" method="post">
<h1>確認画面</h1>
<dl>
<dt>お名前</dt>
<dd><?php echo $name; ?></dd>

<dt>メールアドレス</dt>
<dd><?php echo $email; ?></dd>

<dt>性別</dt>
<dd><?php echo $gender; ?></dd>

<dt>お問い合わせ内容</dt>
<dd><?php echo $ask; ?></dd>
</dl>
<p>内容を確認し、間違いが無ければ送信ボタンをおして下さい。</p>
<input type="submit" value="送信">
</form>
</body>
</html>

includeを使って外部ファイル化する

ホームページを作る際にヘッダーやフッターなど各ページで共通のパーツを使う事が多々あります。各ページごとに記述してしまうと、万が一修正が発生した場合、全てのページに影響が及んでしまいます。
そうならない様に「外部ファイル化」しテンプレート化する事で修正作業が容易になり、メンテナンス性も上がります。



通常のソース

<header>
<h1></h1>
<nav class="g-nav">
</nav>
</header>


<div class="main">

</div>

<footer>
</footer>


includeを使って共通パーツ(header、footer)を外部ファイル化したパターン

<?php
//header.phpを読み込む
include('header.php');
?>

<div class="main">

</div>

<?php
//footer.phpを読み込む
include('footer.php');
?>
<header>
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<li><a href="#">会社概要<span>Company</span></a></li>
<li><a href="#">事業内容<span>Srvice</span></a></li>
<li><a href="#">採用情報<span>Recruit</span></a></li>
<li><a href="#">お問い合わせ<span>Contact</span></a></li>
</ul>
</nav>
</header>

.matchMedia()でjsをメディアクエリを使って条件分岐する

window.matchMedia

window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。


例 1000pxまではjsを有効にさせる

$(window).on('load resize', function(){
if(window.matchMedia('(min-width:1000px)').matches) {

1000pxまで有効にさせたいjavascript

}
});

ナビゲーションの場合

Toggleを使う場合、「:not(:animated)」を設定しないとボタンをクリックした回数分スライドしてしまうので、「:not(:animated)」の設定をしましょう。

$(window).on('load resize', function(){
if(window.matchMedia('(max-width:767px)').matches){
  //スマホの時の状態
    $('#g-nav').hide();//SPの時はnavを非表示にしておく
  }else{
  //タブレット・PCの時の状態
    $('#g-nav').show();//SP以外の時はnavを表示しておく
}
});

$('#btn').on('click',function(){
$('#g-nav:not(:animated)').slideToggle();
});

ユーザーエージェントでスマホかPCか判別してやる方法もあります

ユーザーエージェント

ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。


今回のパターンはPC・タブレットであればjQueryを有効に。スマホiPhoneAndroid)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


逆にPC・タブレットであればjQueryを無効に。スマホiPhoneAndroid)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホiPhoneAndroid)とタブレットiPad)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。