デザイナー向け 初めてのphp ~サイト制作に役立つtips~
Post on 22-Jun-2015
1.369 Views
Preview:
DESCRIPTION
TRANSCRIPT
デザイナーさん向け 初めてのPHP ~サイト制作に役立つTips~
第20回デザイン勉強会
自己紹介名前
所属
職種
!
!
Blog
藤田 無憂
フリーランス
Webディレクター
Webエンジニア
講師
http://facebook.com/muyuu/
http://stackstock.net/
anticyborg@gmail.com
スキルセットフロントエンド
端末対応
スマートフォン用サイト・Webアプリ
レスポンシブWebデザイン
サーバサイド
アジェンダ• htmlとPHPの違い
• PHPでできること
• 制作が楽になるTIPS
注意点
注意点• 今回お話しする内容は、正確さより分かりやすさに重点を置いてます
• なので、「ホントはこれじゃダメなんだけどね」ってことも書いてたり、完璧な説明はしてなかったりです
• まずは「簡単なことからできるように」なりましょうね
htmlとPHPのちがい
html• テキストファイル
• 拡張子は html
• 書いた内容がそのままWebブラウザに表示される
PHP• htmlをサーバーで生成するプログラム
• 拡張子は .php
• htmlファイルにプログラムを埋め込める
サーバーで生成？
Webページ表示の流れ• WebブラウザでURLにアクセス
• ブラウザは該当サーバにページくださいってお願いする
• html（とか画像とか一式）を受け取る
• Webブラウザの機能でhtmlを解析、表示
通常の流れ
通常の流れ
ページくれくれ①
通常の流れ
ページくれくれ
ページあげるー
①
②
PHPの場合
PHPの場合
ページくれくれ①
PHPの場合
ページくれくれ①
ちょっと 待ってね
PHPの場合
ページくれくれ①
PHPをhtmlに変換②
PHPの場合
ページくれくれ①
ページあげるよー③
PHPをhtmlに変換②
基本これだけ!
他にもできるけど今はいらないこと• フォームとか作れる
• 他のサイトの情報を取得する
• APIデータを自サイトに組み込める
• 画像を生成、合成する
• ファイルを圧縮する
逆にできないこと• Webアプリ的な画面遷移せずに表示を変更
• タブとかカルーセルとかlightboxとか
• 「～秒後に表示させる」とかのタイマー系
ページを表示させるまでがPHPの仕事
表示したページをどうこう するのはJavaScriptの仕事
PHPを使ってみる
PHPの使い方• 拡張子を .html から .php に変更
• PHPの記述をする箇所では <?php から ?> の間に
デモ
PHPでできること
基本的なPHPの使い方• 動的に変更する必要がある箇所の制御
• 共通で使う物を一元管理
表示する• <?php echo 表示させたい内容; ?>
• echo (半角スペース) の次の内容を表示する
• 文字列を表示させたい場合は文字を “ と “ の間に記述
データを整理する• プログラムはデータと処理の連続
• データは名前をつけてラベル管理
• ラベルの名前を「変数名」という
ラベル付け（変数）• プログラムでは様々なデータを記憶しておける
• ユーザ「muyuu」の苗字とか
• 「今表示してるページのURL」とか
• 「今日の日付」とか
$today
$family_name
$this_url
2013年11月22日
藤田
http://phpsample.com/?user=muyuu
余談• データには種類がある数値文字列配列オブジェクト
ラベル付け（変数）• ラベルをつければどこでも使える
• データの値を変更したら次に使う際は変更された値に
ラベル付け（変数）<?php$family_name = “藤田”; echo $family_name; // 藤田 と表示される$family_name = “白井”; echo $family_name; // 白井 と表示される?>
計算する
• 四則演算ができるa +b (足し算), a - b(引き算),a * b(かけ算), a / b(割り算)
• 文字と文字を足す$namae = “ふじた” . “むゆう”;
特定の条件の時だけ• if文という仕組みがある「～な時だけ～する」という事が可能になる
• 他にも switch文というのもある今回はやめときましょう
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } ?>
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } ?>
もし
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } ?>
$sum が 7 だったら
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } ?> { から } までに書かれている事を行う
※今回なら <p>ラッキーセブン!</p> を表示
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } ?>
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } ?>いや、ちがくて、7じゃなくて、
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } ?>
6だったら、
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } ?>
<p>惜しいね!</p> を表示
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } else { echo "<p>ちがくね！？</p>"; } ?>
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } else { echo "<p>ちがくね！？</p>"; } ?>いや、どれでもないって場合は
特定の条件の時だけ
<?php if ( $sum == 7 ) { echo "<p>ラッキーセブン！</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね！</p>"; } else { echo “<p>ちがくね！？</p>"; } ?>
<p>ちがくね！？</p> を表示
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> … <li>9</li> </ul>
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
( から ) の条件に従って繰り返すよ！
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
$i を 0として、
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
$i が 10より小さいウチは繰り返す
繰り返し• 例えば
10個 li タグを書いて、li の中身は1～10の数値とする
<ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
1回繰り返す毎に $i に1を足していきます
関数• データを渡すと何かしら加工してくれるもの
• イメージだと工場が近いですかねa と b を渡したら加工された c が出てくる感じ
関数• データを渡すと何かしら加工してくれるもの
mb_strimwidth文字列を指定した幅で丸める関数
関数• データを渡すと何かしら加工してくれるもの
mb_strimwidth文字列を指定した幅で丸める関数 !
$txt = “abcdefghijklmn”; $change_txt = mb_strmwidth( $txt, 0, 3 ); // $txt を 0文字目から3文字目までに変換 !
echo $change_txt; // abc
関数を自作• 関数は自分で作る事も出来る
• 同じような処理を何度も行う場合、関数化すると管理・記述が楽になる
関数を自作
<?php function add_num ( $one, $two ) { $sum = $one + $two; return $sum; } !$sum_num = add_num( 1, 3 ); echo $sum_num; // 4 ?>
ここまでが基本の基本
これらを駆使して色々 楽することができます
CASE1 コピーライトの 年表記自動更新
コピーライトの年表記自動更新
<div class=“copyright”> <p>Copyright © <?php echo date(“Y”); ?> muyuu</p> </div>
CASE2 時間縛り表示
時間縛り
<?php if ( time() >= strtotime(“2013-11-22 00:00:00") && time() < strtotime("2013-12-01 00:00:00”) ) { echo "<p>期間中です。</p>"; } else { echo "<p>期間中じゃありません。</p>"; } ?>
CASE3 2階層目のディレクトリ名取得
2階層目のディレクトリ取得function getSecondDir ( ) { // 今のページのルート相対パスを取得 $current_pass = $_SERVER[“REQUEST_URI"]; ! // パスの2文字目以降を取得（最初の / を削除） $dir = substr( $current_pass, 1 ); ! // 次の/が何文字目かを取得 $slashNum = strpos( $dir, '/' ); ! // 次の / 以降を削除（入ってる文字は2階層目のディレクトリ名になる） $dir = substr( $dir, 0, $slashNum ); ! return $dir; }
「トップページだったら」関数
<?php function is_top () { if ( getSecondDir() ) { return false; } else { return true; } } ?>
CASE4 ヘッダー、フッターの
共通化
ヘッダー・フッターの共通化<?php include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php"); ?> !<div class=“contentWrap”> <div class=“contentInner”>
CASE5 ファイルはまとめたけど 各ページで違うテキストを
使いたい
ヘッダー・フッターの共通化<?php $title = “会社概要”; include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php"); ?> !<div class=“contentWrap”> <div class=“contentInner”>
■ header.php <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title><?php ehco($title. “|”); ?>共通タイトル</title> </head>
ヘッダー・フッターの共通化<?php $title = “会社概要”; include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php"); ?> !<div class=“contentWrap”> <div class=“contentInner”>
■ header.php <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title><?php ehco($title. “|”); ?>共通タイトル</title> </head>
おまけ 拡張子が html でも
PHP が動くようにしたい
.html でもPHPを動かす設定をしたいディレクトリにApacheの設定ファイルである .htaccess ファイルを置き、以下を記述する
AddType application/x-httpd-php .htm .html
おわりに
ここで説明したことは PHPの入り口程度です
しかも、普通なら入り口で必ず説明するような事でも言ってな
い事もあります
でも、それでいい
全てを一度に知らなくて良い
わかるとこから やってみましょう
プログラムは コワクナイ
プログラムは 味方だよ
ありがとうございました
top related