デザイナー向け初めてのphp ~サイト制作に役立つtips~

デザイナーさん向け初めてのPHP ~サイト制作に役立つTips~

第20回デザイン勉強会

自己紹介名前

所属

職種

!

!

Facebook

Blog

Mail

藤田　無憂

フリーランス

Webディレクター

Webエンジニア

講師

http://facebook.com/muyuu/

http://stackstock.net/

[email protected]

http://facebook.com/muyuu/

http://stackstock.net

mailto:[email protected]

スキルセットフロントエンド

端末対応

スマートフォン用サイト・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をhtmlに変換②

PHPの場合


ページあげるよー③

PHPをhtmlに変換②

基本これだけ!

他にもできるけど今はいらないこと• フォームとか作れる

• 他のサイトの情報を取得する

• APIデータを自サイトに組み込める

• 画像を生成、合成する

• ファイルを圧縮する

逆にできないこと• Webアプリ的な画面遷移せずに表示を変更

• タブとかカルーセルとかlightboxとか

• 「～秒後に表示させる」とかのタイマー系

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

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

PHPを使ってみる

PHPの使い方• 拡張子を .html から .php に変更

• PHPの記述をする箇所では <?php から ?> の間に

デモ

PHPでできること

基本的なPHPの使い方• 動的に変更する必要がある箇所の制御

• 共通で使う物を一元管理

表示する• <?php echo 表示させたい内容; ?>

• echo (半角スペース) の次の内容を表示する

• 文字列を表示させたい場合は文字を “ と “ の間に記述

データを整理する• プログラムはデータと処理の連続

• データは名前をつけてラベル管理

• ラベルの名前を「変数名」という

ラベル付け（変数）• プログラムでは様々なデータを記憶しておける

• ユーザ「muyuu」の苗字とか

• 「今表示してるページのURL」とか

• 「今日の日付」とか

2013年11月22日

藤田

http://phpsample.com/?user=muyuu


$today

$family_name

$this_url

2013年11月22日

藤田



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

ラベル付け（変数）• ラベルをつければどこでも使える

• データの値を変更したら次に使う際は変更された値に

ラベル付け（変数）<?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 "ラッキーセブン！"; } ?>



もし



$sum が 7 だったら

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } ?> { から } までに書かれている事を行う

※今回なら ラッキーセブン! を表示

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } else if ( $sum == 6 ) { echo "惜しいね！"; } ?>

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } else if ( $sum == 6 ) { echo "惜しいね！"; } ?>いや、ちがくて、7じゃなくて、



6だったら、

惜しいね! を表示

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } else if ( $sum == 6 ) { echo "惜しいね！"; } else { echo "ちがくね！？"; } ?>

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } else if ( $sum == 6 ) { echo "惜しいね！"; } else { echo "ちがくね！？"; } ?>いや、どれでもないって場合は

<?php if ( $sum == 7 ) { echo "ラッキーセブン！"; } else if ( $sum == 6 ) { echo "惜しいね！"; } else { echo “ちがくね！？"; } ?>

ちがくね！？ を表示

繰り返し• 例えば

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




( から ) の条件に従って繰り返すよ！




$i を 0として、




$i が 10より小さいウチは繰り返す




1回繰り返す毎に $i に1を足していきます

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

• イメージだと工場が近いですかねa と b を渡したら加工された c が出てくる感じ


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


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

$txt = “abcdefghĳklmn”; $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 コピーライトの年表記自動更新

CASE2 時間縛り表示

時間縛り

<?php if ( time() >= strtotime(“2013-11-22 00:00:00") && time() < strtotime("2013-12-01 00:00:00”) ) { echo "期間中です。"; } else { echo "期間中じゃありません。"; } ?>

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>

おまけ拡張子が html でも

PHP が動くようにしたい

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

AddType application/x-httpd-php .htm .html

おわりに

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

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

い事もあります

でも、それでいい

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

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

プログラムはコワクナイ

プログラムは味方だよ

ありがとうございました

デザイナー向け 初めてのphp ~サイト制作に役立つtips~

Documents

デザイナー向け初めてのphp ~サイト制作に役立つtips~