Successfully reported this slideshow.
デザイナーさん向け 初めてのPHP
~サイト制作に役立つTips~
第20回デザイン勉強会
自己紹介
名前

藤田 無憂

所属

フリーランス

職種

Webディレクター
!
!

講師

Facebook

Webエンジニア

http://facebook.com/muyuu/

Blog

http://stackstock...
スキルセット
フロントエンド

サーバサイド

端末対応
レスポンシブ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」とか

•

「今日の日付」とか
http://phpsample.com/?user=muyuu
2013年11月22日

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

藤田
$today
$this_url
$family_name
余談
•

データには種類がある

数値

文字列

配列

オブジェクト
ラベル付け(変数)
•

ラベルをつければどこでも使える

•

データの値を変更したら次に使う際は変更された値に
ラベル付け(変数)
<?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 $sum が 7 だったら
if ( $sum == 7 ) {
echo "<p>ラッキーセブン!</p>";
}
?>
特定の条件の時だけ
<?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 "<...
特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン!</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね!</p>";
} else {
echo "<...
特定の条件の時だけ
<?php
if ( $sum == 7 ) {
echo "<p>ラッキーセブン!</p>";
} else if ( $sum == 6 ) {
echo "<p>惜しいね!</p>";
} else {
echo “<...
繰り返し
•

例えば

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>
<?ph...
繰り返し
•

例えば

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

例えば

10個 li タグを書いて、li の中身は1∼10の数値とする

$i を 0として、
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ...
繰り返し
•

例えば

10個 li タグを書いて、li の中身は1∼10の数値とする

$i が 10より小さいウチは繰り返す
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php ...
繰り返し
•

例えば

10個 li タグを書いて、li の中身は1∼10の数値とする
<ul>
<?php for ( $i = 0; $i < 10; $i++ ) { ?>
<li><?php echo $i; ?></li>
<?ph...
関数
•

データを渡すと何かしら加工してくれるもの
•

イメージだと工場が近いですかね

a と b を渡したら加工された c が出てくる感じ
関数
•

データを渡すと何かしら加工してくれるもの

mb_strimwidth

文字列を指定した幅で丸める関数
関数
•

データを渡すと何かしら加工してくれるもの

mb_strimwidth

文字列を指定した幅で丸める関数
!

$txt = “abcdefghijklmn”;
$change_txt = mb_strmwidth( $txt, 0,...
関数を自作
•

関数は自分で作る事も出来る
•

同じような処理を何度も行う場合、

関数化すると管理・記述が楽になる
関数を自作
<?php
function add_num ( $one, $two ) {
$sum = $one + $two;
return $sum;
}
!

$sum_num = add_num( 1, 3 );
echo $sum_...
ここまでが基本の基本
これらを駆使して色々
楽することができます
CASE1
コピーライトの
年表記自動更新
コピーライトの年表記自動更新

<div class=“copyright”>
<p>Copyright &copy; <?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>期間中です...
CASE3
2階層目のディレクトリ名取得
2階層目のディレクトリ取得
function getSecondDir ( ) {
// 今のページのルート相対パスを取得
$current_pass = $_SERVER[“REQUEST_URI"];

!
// パスの2文字目以降を取得(...
「トップページだったら」関数
<?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=“con...
CASE5
ファイルはまとめたけど
各ページで違うテキストを
使いたい
ヘッダー・フッターの共通化
<?php
$title = “会社概要”;
include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php");
?>
!
<div class=“contentWrap”...
ヘッダー・フッターの共通化
<?php
$title = “会社概要”;
include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php");
?>
!
<div class=“contentWrap”...
おまけ
拡張子が html でも
PHP が動くようにしたい
.html でもPHPを動かす
設定をしたいディレクトリにApacheの設定ファイルで
ある .htaccess ファイルを置き、以下を記述する

AddType application/x-httpd-php .htm .html
おわりに
ここで説明したことは
PHPの入り口程度です
しかも、普通なら入り口で必ず
説明するような事でも言ってな
い事もあります
でも、それでいい
全てを一度に知らなくて良い
わかるとこから
やってみましょう
プログラムは
コワクナイ
プログラムは
味方だよ
ありがとうございました
Upcoming SlideShare
Loading in …5
×

デザイナー向け 初めてのPhp ~サイト制作に役立つtips~

1,921 views

Published on

2013年11月22日にネスト赤羽で開催された第20回デザイン勉強会の資料です。

デザイナーさんが「これならPHPやれそうだ」と思える物になると良いなぁと思いましたがどうですかね。

  • Be the first to comment

デザイナー向け 初めてのPhp ~サイト制作に役立つtips~

  1. 1. デザイナーさん向け 初めてのPHP ~サイト制作に役立つTips~ 第20回デザイン勉強会
  2. 2. 自己紹介 名前 藤田 無憂 所属 フリーランス 職種 Webディレクター ! ! 講師 Facebook Webエンジニア http://facebook.com/muyuu/ Blog http://stackstock.net/ Mail anticyborg@gmail.com
  3. 3. スキルセット フロントエンド サーバサイド 端末対応 レスポンシブWebデザイン スマートフォン用サイト・Webアプリ
  4. 4. アジェンダ • htmlとPHPの違い • PHPでできること • 制作が楽になるTIPS
  5. 5. 注意点
  6. 6. 注意点 • 今回お話しする内容は、正確さより分かりやすさに重点 を置いてます • なので、「ホントはこれじゃダメなんだけどね」ってこ とも書いてたり、完璧な説明はしてなかったりです • まずは「簡単なことからできるように」なりましょうね
  7. 7. htmlとPHPのちがい
  8. 8. html • テキストファイル • 拡張子は html • 書いた内容がそのままWebブラウザに表示される
  9. 9. PHP • htmlをサーバーで生成するプログラム • 拡張子は .php • htmlファイルにプログラムを埋め込める
  10. 10. サーバーで生成?
  11. 11. Webページ表示の流れ • WebブラウザでURLにアクセス • ブラウザは該当サーバにページくださいってお願いする • html(とか画像とか一式)を受け取る • Webブラウザの機能でhtmlを解析、表示
  12. 12. 通常の流れ
  13. 13. 通常の流れ ① ページくれくれ
  14. 14. 通常の流れ ① ページくれくれ ページあげるー ②
  15. 15. PHPの場合
  16. 16. PHPの場合 ① ページくれくれ
  17. 17. PHPの場合 ① ページくれくれ ちょっと 待ってね
  18. 18. PHPの場合 ① ページくれくれ ② PHPをhtmlに変換
  19. 19. PHPの場合 ① ページくれくれ ③ ページあげるよー ② PHPをhtmlに変換
  20. 20. 基本これだけ!
  21. 21. 他にもできるけど今はいらないこと • フォームとか作れる • 他のサイトの情報を取得する • APIデータを自サイトに組み込める • 画像を生成、合成する • ファイルを圧縮する
  22. 22. 逆にできないこと • Webアプリ的な画面遷移せずに表示を変更 • • タブとかカルーセルとかlightboxとか 「∼秒後に表示させる」とかのタイマー系
  23. 23. ページを表示させるまでが PHPの仕事
  24. 24. 表示したページをどうこう するのはJavaScriptの仕事
  25. 25. PHPを使ってみる
  26. 26. PHPの使い方 • 拡張子を .html から .php に変更 • PHPの記述をする箇所では <?php から ?> の間に
  27. 27. デモ
  28. 28. PHPでできること
  29. 29. 基本的なPHPの使い方 • 動的に変更する必要がある箇所の制御 • 共通で使う物を一元管理
  30. 30. 表示する • <?php echo 表示させたい内容; ?> • • echo (半角スペース) の次の内容を表示する 文字列を表示させたい場合は文字を “ と “ の間に記述
  31. 31. データを整理する • プログラムはデータと処理の連続 • データは名前をつけてラベル管理 • ラベルの名前を「変数名」という
  32. 32. ラベル付け(変数) • プログラムでは様々なデータを記憶しておける • ユーザ「muyuu」の苗字とか • 「今表示してるページのURL」とか • 「今日の日付」とか
  33. 33. http://phpsample.com/?user=muyuu 2013年11月22日 藤田
  34. 34. http://phpsample.com/?user=muyuu 2013年11月22日 藤田 $today $this_url $family_name
  35. 35. 余談 • データには種類がある
 数値
 文字列
 配列
 オブジェクト
  36. 36. ラベル付け(変数) • ラベルをつければどこでも使える • データの値を変更したら次に使う際は変更された値に
  37. 37. ラベル付け(変数) <?php
 $family_name = “藤田”;
 echo $family_name; // 藤田 と表示される
 $family_name = “白井”;
 echo $family_name; // 白井 と表示される
 ?>
  38. 38. 計算する • 四則演算ができる
 a +b (足し算), a - b(引き算),
 a * b(かけ算), a / b(割り算) • 文字と文字を足す
 $namae = “ふじた” . “むゆう”;
  39. 39. 特定の条件の時だけ • if文という仕組みがある
 「∼な時だけ∼する」という事が可能になる • 他にも switch文というのもある
 今回はやめときましょう
  40. 40. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } ?>
  41. 41. 特定の条件の時だけ <?php もし if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } ?>
  42. 42. 特定の条件の時だけ <?php $sum が 7 だったら if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } ?>
  43. 43. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } { から } までに書かれている事を行う ?> ※今回なら <p>ラッキーセブン!</p> を表示
  44. 44. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } ?>
  45. 45. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } いや、ちがくて、7じゃなくて、 ?>
  46. 46. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } 6だったら、 ?>
  47. 47. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } <p>惜しいね!</p> を表示 ?>
  48. 48. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } else { echo "<p>ちがくね!?</p>"; } ?>
  49. 49. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } else { echo "<p>ちがくね!?</p>"; } いや、どれでもないって場合は ?>
  50. 50. 特定の条件の時だけ <?php if ( $sum == 7 ) { echo "<p>ラッキーセブン!</p>"; } else if ( $sum == 6 ) { echo "<p>惜しいね!</p>"; } else { echo “<p>ちがくね!?</p>"; } <p>ちがくね!?</p> を表示 ?>
  51. 51. 繰り返し • 例えば
 10個 li タグを書いて、li の中身は1∼10の数値とする
  52. 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. 53. 繰り返し • 例えば
 10個 li タグを書いて、li の中身は1∼10の数値とする <ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
  54. 54. 繰り返し • 例えば
 10個 li タグを書いて、li の中身は1∼10の数値とする <ul> ( から ) の条件に従って繰り返すよ! <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
  55. 55. 繰り返し • 例えば
 10個 li タグを書いて、li の中身は1∼10の数値とする $i を 0として、 <ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
  56. 56. 繰り返し • 例えば
 10個 li タグを書いて、li の中身は1∼10の数値とする $i が 10より小さいウチは繰り返す <ul> <?php for ( $i = 0; $i < 10; $i++ ) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul>
  57. 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. 58. 関数 • データを渡すと何かしら加工してくれるもの • イメージだと工場が近いですかね
 a と b を渡したら加工された c が出てくる感じ
  59. 59. 関数 • データを渡すと何かしら加工してくれるもの mb_strimwidth
 文字列を指定した幅で丸める関数
  60. 60. 関数 • データを渡すと何かしら加工してくれるもの mb_strimwidth
 文字列を指定した幅で丸める関数 ! $txt = “abcdefghijklmn”; $change_txt = mb_strmwidth( $txt, 0, 3 ); // $txt を 0文字目から3文字目までに変換 ! echo $change_txt; // abc
  61. 61. 関数を自作 • 関数は自分で作る事も出来る • 同じような処理を何度も行う場合、
 関数化すると管理・記述が楽になる
  62. 62. 関数を自作 <?php function add_num ( $one, $two ) { $sum = $one + $two; return $sum; } ! $sum_num = add_num( 1, 3 ); echo $sum_num; // 4 ?>
  63. 63. ここまでが基本の基本
  64. 64. これらを駆使して色々 楽することができます
  65. 65. CASE1 コピーライトの 年表記自動更新
  66. 66. コピーライトの年表記自動更新 <div class=“copyright”> <p>Copyright &copy; <?php echo date(“Y”); ?> muyuu</p> </div>
  67. 67. CASE2 時間縛り表示
  68. 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. 69. CASE3 2階層目のディレクトリ名取得
  70. 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. 71. 「トップページだったら」関数 <?php function is_top () { if ( getSecondDir() ) { return false; } else { return true; } } ?>
  72. 72. CASE4 ヘッダー、フッターの 共通化
  73. 73. ヘッダー・フッターの共通化 <?php include_once ($_SERVER[‘DOCUMENT_ROOT']."/header.php"); ?> ! <div class=“contentWrap”> <div class=“contentInner”>
  74. 74. CASE5 ファイルはまとめたけど 各ページで違うテキストを 使いたい
  75. 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. 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. 77. おまけ 拡張子が html でも PHP が動くようにしたい
  78. 78. .html でもPHPを動かす 設定をしたいディレクトリにApacheの設定ファイルで ある .htaccess ファイルを置き、以下を記述する AddType application/x-httpd-php .htm .html
  79. 79. おわりに
  80. 80. ここで説明したことは PHPの入り口程度です
  81. 81. しかも、普通なら入り口で必ず 説明するような事でも言ってな い事もあります
  82. 82. でも、それでいい
  83. 83. 全てを一度に知らなくて良い
  84. 84. わかるとこから やってみましょう
  85. 85. プログラムは コワクナイ
  86. 86. プログラムは 味方だよ
  87. 87. ありがとうございました

×