［スマートフォンサイト］スマートフォンサイト制作の前提の知識
スマートフォン用サイトのサイズについて
２つのサイズがある
- CSSピクセル（csspx） ：ディスプレイのサイズ
- デバイスピクセル（dpx）：解像度のサイズ
Retinaディスプレイ登場以前はこの２つは同じだった。
＜iPhone3と、Retinaディスプレイ搭載iPhone4の比較＞
iPhone3 ディスプレイサイズ：3.5インチ 解像度：320×480
iPhone4 ディスプレイサイズ：3.5インチ 解像度：640×960
⇒ ディスプレイサイズは同じだが、画像解像度が２倍になった ⇒ ２倍の大きさが必要
・Retinaディスプレイ対応のためには、デバイスピクセル基準で画像を用意すること
ベンダープレフィクス
「プレフィクス」とは？ ⇒ 接頭辞
CSS3をブラウザで動作させる為に属性につける接頭辞のこと。
ブラウザごとに異なる。
-webkit- Google Chrome、Safari -moz- Firefox -o- Opera -ms- IE
スマートフォンのシェアで言えばiPhone（Safari）とAndroid（Chrome）で90%以上を占めるため、-webkit-でほぼカバーできる。
ベンダープレフィクスあり・なしの両方の表記をする。
CSS3のプロパティのブラウザ対応状況を調べるには、以下のサイトが便利
Can I use... Support tables for HTML5, CSS3, etc
background-sizeについて
スマートフォン用サイトで特に重要。背景画像のサイズを指定する場合に使うCSSのプロパティ
background-imageまたはbackgroundプロパティと一緒に指定する必要がある
主に使われる値
background-size: contain;
縦横比を保持しつつ領域内に収まる最大サイズになる
background-size: cover;
縦横比を保持しつつ、背景を全て覆う大きさになる（拡大する）画像が切れる場合がある
background-size: auto;
初期値
その他、パーセント指定・ピクセル指定も可能
スマートフォンサイトに必須・viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- width=device-width ：ディスプレイ幅を自動感知し、その幅を最大幅とする機能
- initial-scale ：ディスプレイの方向を変えた場合の拡大倍率の設定。
向きを変えるとディスプレイ幅に合わせて拡大するのが初期設定。
変えたくない場合は initial-scale＝1.0 とする。
値を2.0とすると２倍拡大になる。
- user-scalable=no ：指で拡大縮小（ピンチイン・ピンチアウト）できるようにするかどうかの設定
値を１（yes）か０（no）とする場合もある
［スマートフォンサイト］
6月19日 今日のWORK
スマートフォン専用サイト
ＨＴＭＬ
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format description" content="telephone=no, email=no"> <link rel="apple-toch-icon.png" href="apple-touch-icon.png"> <link rel="stylesheet" href="style.css"> <title>スマートフォン専用サイト</title> </head> <body> <header class="global-header"> <h1 class="page-heading">エモトカホリ</h1> </header> <img src="img/logo.png" class="img-illust"> <p class="introduction">エモトカホリのポートフォリオサイトです。<br>動物や植物を中心にしたイラストを書いています。</p> <section class="block"> <h1 class="block-heading">イラスト集</h1> <p class="comment">エモトカホリの作品集です。絵をクリックするとイラストのページに移動します。</p> <nav class="nav-portfolio"> <ul> <li><a href="flying-penguin.html" title="ペンギン"><img src="img/thumbnail_flying-penguin.png" alt="群れをなして空を飛ぶペンギンたちのイラスト"></a></li> <li><a href="#" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守る小鳥がハート型に赤い糸を咥えているイラスト"></a></li> <li><a href="#" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li> <li><a href="#" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取り網でたくさん捕まえているイラスト"></a></li> <li><a href="#" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱をカラダにつけたイヌのイラスト"></a></li> <li><a href="#" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li> <li><a href="#" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギのイラスト"></a></li> <li><a href="#" title="カメ"><img src="img/thumbnail_tortoise.png" alt="杜で長生きしているカメのイラスト"></a></li> </ul> </nav> <p class="comment">コチラで紹介している作品以外の作品もありますので、ご覧になりたい方は<a href="mailto:mail@example.com?subject=【エモトカホリの他の作品について】">メールでお問い合わせ下さい。</a></p> </section> <footer> <nav class="nav-about"> <ul> <li><a href="#">エモトカホリの紹介</a></li> <li><a href="#">イラストの販売について</a></li> <li><a href="#">仕事の依頼・お問い合わせ</a></li> </ul> </nav> <p class="copyright"><small>Copyright©2014 Emoto Kahori</small></p> </footer> <script src="js/iphone.js"></script> </body> </html>
@charset "UTF-8";
/* reset*/
html, body, h1,p, nav, ul, li, a, img,header, footer, small, section, div {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
line-height: 1.0;
-webkit-text-size-adjust: none; /*テキストのサイズを自動調整する機能*/
}
article, aside, canvas, details, figcaption. figure, footer, header, menu, nav,section,summary {
display: block;
}
img {
border: none;
vertical-align: bottom;
}
ul {
list-style: none;
}
body {
background-color: #D9F5F3;
line-height: 1.6;
font-family: "Hiragino Kaku Gothic ProN", Helvetica, sans-serif;
}
/* サイトのレイアウト */
.global-header {
height: 44px;
line-height: 44px;
background-image: -webkit-linear-gradient(top, #cfe1ed, #7faaca);/*グラデーション*/
background-image: linear-gradient(to top, #cfe1ed, #7faaca);
border: solid 1px #5a83a1;
}
.page-heading {
margin: 0 auto;
color: #333;
font-size: 16px;
text-align: center;
width: 140px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-shadow: 1px 1px 1px #FFF;
}
.img-illust{
margin: 0 auto;
display: block;
border: 10px solid #F5F5f0;
}
.introduction {
margin: 15px 10px;
padding: 5px 10px;
background: #75D9D0;
font-size: 12px;
border-radius: 8px;
}
.block{
margin-bottom: 20px;
}
.block-heading {
margin:10px;
padding: 5px;
border-left: 5px solid #75D0D0;
font-size: 14px;
}
.comment {
margin: 0 10px;
font-size: 12px;
}
.nav-portfolio {
margin-top: 10px;
}
.nav-portfolio img {
margin: 5px 0;
width: 60px;
height: 60px;
border-radius: 30px; /*元の画像がサイズが60pxなので、半分のサイズを半径とする*/
box-shadow: 0 0 3px #333333; /*boxshadowにベンダープレフィクスは不要*/
}
.nav-portfolio ul {
display: block;
overflow: hidden;
}
.nav-portfolio li {
margin: 0 0 10px 16px;
float: left;
text-align: center;
}
.nav-portfolio a {
display: block;
text-decoration: none;
}
/*navのタイトルについての指定*/
.nav-portfolio a:after {
display: block;
content: attr(title);
font-size: 12px;
text-align: center;
width: 60px; /*タイトルが60px以上の内容は省略する*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
footer {
background: #75D9D0;
padding: 10px;
}
/*footer .nav-about {
margin: 10px;
}
*/
footer nav ul {
background: #FFF;
border-radius: 15px;
}
footer nav ul li {
font-size: 12px;
line-height: 44px;
padding: 0 10px;
}
footer nav ul li {
border-bottom: 2px solid #75D9D0;
}
footer nav ul li:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
footer nav ul li:last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
footer nav ul li a {
text-decoration: none;
display: block;
}
footer p.copyright {
font-size: 12px;
text-align: center;
color: #FFF;
}
［PHP］入力フォーム⑦
フォームを送信後に入力フォームをクリアにする
以下のコードによって、送信完了すると、セッションファイルに保存されていたデータが破棄されるようになる。
【send.php】
$_SESSION = array();
unset($_SESSION['name']);
unset($_SESSION['email']);
unset($_SESSION['msg']);
session_destroy();
初めてページを開くと、画面にエラーがでる。それを回避する方法
セッションファイルが作成されていないのが原因。
回避する方法は２つ
①エラー制御演算子「＠」を使う
②isset関数を使う
①エラー制御演算子を使う場合
【index.php】 既に記述した以下のコードを変更
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];↓
$name = ＠$_SESSION['name'];
$email = ＠$_SESSION['email'];
$msg = ＠$_SESSION['msg'];
②isset関数を使う場合
１）まず次のコードを削除する
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
２）isset関数
$_SESSION['○○']の値がある場合、変数○○にその値を代入するようにする
if(isset($_SESSION['name'])){
$name = $_SESSION['name'];
}
if(isset($_SESSION['email'])){
$email = $_SESSION['email'];
}
if(isset($_SESSION['msg'])){
$msg = $_SESSION['msg'];
}
３）変数$name、$email、$msgの初期値を空にする
$name = '';
$email = '';
$msg = '';
※ ’’・・・シングルクォーテーション２つで「空文字列」。
値は空だが、中身は空ではない。
echoで出力した場合空に見える。
テキストエリアに入力したメッセージに改行が入らない
お問い合わせ欄に入力した文章が、入力確認ページでは改行されずに出力される。
これを成形する為の方法。
nl2br( )を使用
( )内の文字列に含まれる改行を反映して返す
お問い合わせ内容：<td><?php echo nl2br(htmlspecialchars($msg, ENT_QUOTES,'UTF-8')); ?>
※htmlspecialchars（）をnl2br（）で囲む。
結果
ここまでのファイルの内容
【index.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
<?php
$name = '';
$email = '';
$msg = '';
session_start();
if(isset($_SESSION['name'])){
$name = $_SESSION['name'];
}
if(isset($_SESSION['email'])){
$email = $_SESSION['email'];
}
if(isset($_SESSION['msg'])){
$msg = $_SESSION['msg'];
}
?>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<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 htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="email">メールアドレス：</label></th><td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="msg">お問い合わせ内容：</label></th><td><textarea name="msg" id="msg"><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>
</body>
</html>
【check.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力確認画面</title>
<?php
if( !isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['msg']) ){
header('Location:./index.php');
exit;
}
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
session_start();
$_SESSION['name'] = $_POST['name'];
$_SESSION['email'] = $_POST['email'];
$_SESSION['msg'] = $_POST['msg'];
?>
</head>
<body>
<h1>入力内容確認画面</h1>
<table>
<tr><th>お名前：</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>メールアドレス：</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>お問い合わせ内容：</th><td><?php echo nl2br(htmlspecialchars($msg, ENT_QUOTES,'UTF-8')); ?></td></tr>
</table>
<p><a href="send.php">送信する</a></p>
<p><a href="index.php">入力画面に戻る</a></p>
</body>
</html>
【send.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メール送信画面</title>
<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
$_SESSION = array();
unset($_SESSION['name']);
unset($_SESSION['email']);
unset($_SESSION['msg']);
session_destroy();
//ヒアドキュメント
$body=<<<EOF
お問い合わせが送信されました。
送信者のお名前：{$name}
メールアドレス：{$email}
内容は以下の通りです。
{$msg}
EOF;
mb_send_mail('xxx@xxxxx.com','お問い合わせがありました','$body');
?>
</head>
<body>
<h1>メール送信画面</h1>
<p>以下の内容で送信しました。</p>
<table>
<tr><th>お名前：</th><td><?php echo htmlspecialchars($name,ENT_QUOTES, 'UTF-8');?> </td></tr>
<tr><th>メールアドレス：</th><td><?php echo htmlspecialchars($email,ENT_QUOTES, 'UTF-8');?></td></tr>
<tr><th>お問い合わせ内容：</th><td><?php echo nl2br(htmlspecialchars($msg,ENT_QUOTES, 'UTF-8'));?></td></tr>
</table>
<p><a href="index.php">入力画面へ戻る</a></p>
</body>
</html>
［PHP］php.iniファイルの初期設定（XAMPP、MAMP）
XAMPP、MAMPでPHPを始める前にやっておくべきなのですが、php.iniファイルのデフォルトの設定変更があります。
設定を変更する際にはXAMPP、MAMPを一旦停止しておきましょう
Windows・XAMPP編 （v3.2.1）
○XAMPPのphp.iniファイルの場所はこちら
C:¥¥xampp¥php¥php.ini をテキストエディタで開く
●タイムゾーン設定変更
1045行目あたり
;date.timezone = Europe /Berlin
↓
これをコピーして次の行にペーストし、打ち変える
date.timezone = Asia /Tokyo ※先頭のセミコロンは外す
●文字コード設定変更
814行目あたり
;default_charset = "UTF-8"
↓
先頭のセミコロンを外す
default_charset = "UTF-8"
ファイルを保存しXAMPPを起動
MAMP編
MAMPのデフォルトではSESSIONの設定も変更しなければならない（セッション）ので
文字コード、タイムゾーン、sessionの３つを変更します
①使っているPHPのバージョンを確認
MAMPをインストールすると複数のPHPのバージョンが同時にインストールされ、それぞれにファイルが存在する。使っているバージョン以外のファイルを変更しても意味がないため、バージョン確認は必須。
確認方法は、
1) MAMPをアプリケーションで立ち上げる
（ApacheとMySQLを起動する必要はない）
2) 「設定」を押し
3) PHPのタブの「標準バージョン」でラジオボタンがついている方
右の場合は「5.6.7」と判明。
②php.iniファイルの場所
アプリケーション＞ MAMP＞ bin ＞ php ＞ 使用するphpのバージョン名 ＞ conf ＞ php.ini
テキストエディタで開く
●タイムゾーン設定変更
552行目あたり date.timezone = "Europe/Berlin"
↓
date.timezone = "Asia/Tokyo"
●文字コード設定変更
; PHP's built-in default is text/html
default_mimetype = "text/html"
;default_charset = "iso-8859-1"
Always populate the $HTTP_RAW_POST_DATA variable.
;always_populate_raw_post_data = On
セミコロンを外してUTF-8に変える
default_charset = "UTF-8"
1016行目あたり
[mbstring]
; language for internal character representation.
;mbstring.language = Japanese⇒セミコロンを削除
; internal/script encoding.
; Some encoding cannot work as internal encoding.
; (e.g. SJIS, BIG5, ISO-2022-*)
;mbstring.internal_encoding = EUC-JP⇒セミコロンを削除しUTF-8へ書き換え
; http input encoding.
;mbstring.http_input = auto⇒セミコロンを削除
; http output encoding. mb_output_handler must be
; registered as output buffer to function
;mbstring.http_output = SJIS
; enable automatic encoding translation accoding to
; mbstring.internal_encoding setting. Input chars are
; converted to internal encoding by setting this to On.
; Note: Do _not_ use automatic encoding translation for
; portable libs/applications.
;mbstring.encoding_translation = Off
; automatic encoding detection order.
; auto means
;mbstring.detect_order = auto
●セッション設定変更
810行目あたり
session.auto_start = 0
↓
session.auto_start = 1
ファイルを保存して、MAMPを再起動
