2013年11月22日にネスト赤羽で開催された第20回デザイン勉強会の資料です。 デザイナーさんが「これならPHPやれそうだ」と思える物になると良いなぁと思いましたがどうですかね。

1. デザイナーさん向け 初めてのPHP
~サイト制作に役立つTips~
第20回デザイン勉強会

2. 自己紹介
名前
藤田 無憂
所属
フリーランス
職種
Webディレクター
!
!
講師
Facebook
Webエンジニア
http://facebook.com/muyuu/
Blog
http://stackstock.net/
Mail
anticyborg@gmail.com

3. スキルセット
フロントエンド
サーバサイド
端末対応
レスポンシブWebデザイン
スマートフォン用サイト・Webアプリ

4. アジェンダ
•
htmlとPHPの違い
•
PHPでできること
•
制作が楽になるTIPS

5. 注意点

6. 注意点
•
今回お話しする内容は、正確さより分かりやすさに重点
を置いてます
•
なので、「ホントはこれじゃダメなんだけどね」ってこ
とも書いてたり、完璧な説明はしてなかったりです
•
まずは「簡単なことからできるように」なりましょうね

7. htmlとPHPのちがい

8. html
•
テキストファイル
•
拡張子は html
•
書いた内容がそのままWebブラウザに表示される

9. PHP
•
htmlをサーバーで生成するプログラム
•
拡張子は .php
•
htmlファイルにプログラムを埋め込める

10. サーバーで生成？

11. Webページ表示の流れ
•
WebブラウザでURLにアクセス
•
ブラウザは該当サーバにページくださいってお願いする
•
html（とか画像とか一式）を受け取る
•
Webブラウザの機能でhtmlを解析、表示

12. 通常の流れ

13. 通常の流れ
①
ページくれくれ

14. 通常の流れ
①
ページくれくれ
ページあげるー
②

15. PHPの場合

16. PHPの場合
①
ページくれくれ

17. PHPの場合
①
ページくれくれ
ちょっと
待ってね

18. PHPの場合
①
ページくれくれ
②
PHPをhtmlに変換

19. PHPの場合
①
ページくれくれ
③ ページあげるよー
②
PHPをhtmlに変換

20. 基本これだけ!

21. 他にもできるけど今はいらないこと
•
フォームとか作れる
•
他のサイトの情報を取得する
•
APIデータを自サイトに組み込める
•
画像を生成、合成する
•
ファイルを圧縮する

22. 逆にできないこと
•
Webアプリ的な画面遷移せずに表示を変更
•
•
タブとかカルーセルとかlightboxとか
「∼秒後に表示させる」とかのタイマー系

23. ページを表示させるまでが
PHPの仕事

24. 表示したページをどうこう
するのはJavaScriptの仕事

25. PHPを使ってみる

26. PHPの使い方
•
拡張子を .html から .php に変更
•
PHPの記述をする箇所では <?php から ?> の間に

27. デモ

28. PHPでできること

29. 基本的なPHPの使い方
•
動的に変更する必要がある箇所の制御
•
共通で使う物を一元管理

30. 表示する
•
<?php echo 表示させたい内容; ?>
•
•
echo (半角スペース) の次の内容を表示する
文字列を表示させたい場合は文字を “ と “ の間に記述

31. データを整理する
•
プログラムはデータと処理の連続
•
データは名前をつけてラベル管理
•
ラベルの名前を「変数名」という

32. ラベル付け（変数）
•
プログラムでは様々なデータを記憶しておける
•
ユーザ「muyuu」の苗字とか
•
「今表示してるページのURL」とか
•
「今日の日付」とか

33. http://phpsample.com/?user=muyuu
2013年11月22日
藤田

34. http://phpsample.com/?user=muyuu
2013年11月22日
藤田
$today
$this_url
$family_name

35. 余談
•
データには種類がある
数値
文字列
配列
オブジェクト

36. ラベル付け（変数）
•
ラベルをつければどこでも使える
•
データの値を変更したら次に使う際は変更された値に

37. ラベル付け（変数）
<?php
$family_name = “藤田”;
echo $family_name; // 藤田 と表示される
$family_name = “白井”;
echo $family_name; // 白井 と表示される
?>

38. 計算する
•
四則演算ができる
a +b (足し算), a - b(引き算),
a * b(かけ算), a / b(割り算)
•
文字と文字を足す
$namae = “ふじた” . “むゆう”;

39. 特定の条件の時だけ
•
if文という仕組みがある
「∼な時だけ∼する」という事が可能になる
•
他にも switch文というのもある
今回はやめときましょう

40. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
}
?>

41. 特定の条件の時だけ
<?php
もし if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
}
?>

42. 特定の条件の時だけ
<?php $sum が 7 だったら
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
}
?>

43. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
}
{ から } までに書かれている事を行う
?>
※今回なら <p>ラッキーセブン!</p> を表示

44. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
}
?>

45. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} いや、ちがくて、7じゃなくて、
?>

46. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} 6だったら、
?>

47. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} <p>惜しいね!</p> を表示
?>

48. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} else {
echo "<p>ちがくね！？</p>";
}
?>

49. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} else {
echo "<p>ちがくね！？</p>";
} いや、どれでもないって場合は
?>

50. 特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン！</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね！</p>";
} else {
echo “<p>ちがくね！？</p>";
} <p>ちがくね！？</p> を表示
?>

51. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする

52. 繰り返し
•
例えば
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>

53. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?php } ?>
</ul>

54. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする
<ul> ( から ) の条件に従って繰り返すよ！
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?php } ?>
</ul>

55. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする
$i を 0として、
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?php } ?>
</ul>

56. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする
$i が 10より小さいウチは繰り返す
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?php } ?>
</ul>

57. 繰り返し
•
例えば
10個 li タグを書いて、li の中身は1∼10の数値とする
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?php } ?>
</ul>
1回繰り返す毎に $i に1を足していきます

58. 関数
•
データを渡すと何かしら加工してくれるもの
•
イメージだと工場が近いですかね
a と b を渡したら加工された c が出てくる感じ

59. 関数
•
データを渡すと何かしら加工してくれるもの
mb_strimwidth
文字列を指定した幅で丸める関数

60. 関数
•
データを渡すと何かしら加工してくれるもの
mb_strimwidth
文字列を指定した幅で丸める関数
!
$txt = “abcdefghijklmn”;
$change_txt = mb_strmwidth( $txt, 0, 3 );
// $txt を 0文字目から3文字目までに変換
!
echo $change_txt; // abc

61. 関数を自作
•
関数は自分で作る事も出来る
•
同じような処理を何度も行う場合、
関数化すると管理・記述が楽になる

62. 関数を自作
<?php
function add_num ( $one, $two ) {
$sum = $one + $two;
return $sum;
}
!
$sum_num = add_num( 1, 3 );
echo $sum_num;
// 4
?>

63. ここまでが基本の基本

64. これらを駆使して色々
楽することができます

65. CASE1
コピーライトの
年表記自動更新

66. コピーライトの年表記自動更新
<div class=“copyright”>
<p>Copyright &copy; <?php echo date(“Y”); ?> muyuu</p>
</div>

67. CASE2
時間縛り表示

68. 時間縛り
<?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>";
}
?>

69. CASE3
2階層目のディレクトリ名取得

70. 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;
}

71. 「トップページだったら」関数
<?php
function is_top () {
if ( getSecondDir() ) {
return false;
} else {
return true;
}
}
?>

72. CASE4
ヘッダー、フッターの
共通化

73. ヘッダー・フッターの共通化
<?php
include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php");
?>
!
<div class=“contentWrap”>
<div class=“contentInner”>

74. CASE5
ファイルはまとめたけど
各ページで違うテキストを
使いたい

75. ヘッダー・フッターの共通化
<?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>

76. ヘッダー・フッターの共通化
<?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>

77. おまけ
拡張子が html でも
PHP が動くようにしたい

78. .html でもPHPを動かす
設定をしたいディレクトリにApacheの設定ファイルで
ある .htaccess ファイルを置き、以下を記述する
AddType application/x-httpd-php .htm .html

79. おわりに

80. ここで説明したことは
PHPの入り口程度です

81. しかも、普通なら入り口で必ず
説明するような事でも言ってな
い事もあります

82. でも、それでいい

83. 全てを一度に知らなくて良い

84. わかるとこから
やってみましょう

85. プログラムは
コワクナイ

86. プログラムは
味方だよ

87. ありがとうございました