2015年11月13日開講教室 修了生の皆様へ

修了式お疲れ様でした。

お仕事が決まった方も、これから就職される方も、明日からは開講前とも在学中とも違う日々が始まります。
けれど11月の中頃より丸四カ月間。様々な技術や知識を身に付けられたと思います。

それまで出来なかったことが、一つ一つ出来る様になったこと。
その感覚を忘れずに、自信をもって、どんどん色んなことに挑戦してみてください。

月並みではありますが、修了おめでとうございます。
皆さまより良いお仕事に就けますよう、心より応援しております。

2016年3月11日 鈴木,苅部

Webサイト制作演習③~⑥ DBシステムまとめ

今回は技術的な話ではなく、システム構築そのものに対する記事です。

データベースを使ったシステム構築

先週から、データベースを使ったシステムの構築作業の講義を簡単に行った。
「システム構築」というと難しい響きだが、データベースを使ってやることはかなり限られる。

  • 追加
  • 更新
  • 検索
  • 削除

大きく分ければこの四種類だけ(閲覧も「全データを表示」するという検索の一種になる)。
SQLで言えば、「INSERT」「UPDATE」「SELECT」「DELETE」の四種である。
PHPではPDOを使って、これらのSQL文を利用できるので、「どんなデータを」「どんな風に表示するのか」を考え、実現する。
最終的にはこれらの作業が行える管理画面を作る事が目的になる。

プログラム的には
入力(データを打つ・ボタンを押す) → 処理(追加・削除・更新・検索) → 出力(結果を画面に表示)
の三工程までに単純化できる。
工程を単純にした上で書いていけば、やる事はそう難しくはない。

利用しているところで言えば、WordPressのダッシュボードもデータベースを利用したシステムの一つと言える。
また、PHPMyAdminも管理ツールではあるが、実際には「クライアント目線」に立った構築が求められる。
普段利用しているSNSなども、実際にはデータベースと連携しているが、顧客として使う時にはそれを意識する事は無い。「誰でも使える分かりやすいシステム」が理想形になる。

UI(ユーザーインターフェース)を意識したデザイン

「システム構築」なんていうと、プログラマーだけの仕事の様に思えるが、デザイナーの役割は従来より高まっている。上の項で述べた様に、システム画面は「クライアント目線」での使いやすさが非常に重要。
現状ではSNSや会社などで使われるローカルのシステムなど、いろんな場面で使う機会は多いはずだが、使い勝手の悪いシステムは多い。
ここで登場するのがUI(ユーザーインターフェース)という概念で、かなり幅広い意味があるが、ものすごく大雑把に言えば「使い勝手の良さ」を示す。
最近では「UIデザイン」「UIデザイナー」という言葉がよく使われる。単に見た目を考えるだけでなく、より使いやすいシステム画面を考えたデザインの事。
ボタンの押しやすさや、入力欄の量やメニューの配置など、一つ一つの工夫で、システムの使い勝手は大きく変わる。

スマホアプリの普及以後、これまで以上にUIの向上が求められる時代。
Webデザインでもそうだが、「クライアントの目線」に立った「使いやすさ」まで意識できると、デザイナーとしての幅は大きく広がる。
成果を出すUIデザイン9つのメソッド

「権限」について

システムを構築する上で、必要な項目はかなり単純化出来た。
しかし実際のWebシステムを構築する上で重要になるのが、「権限」である。
システム画面は基本的に、多くの人々が利用する。
その上で、それぞれがデータの管理を行うわけだが、そこで問題が発生する。
そもそも、不特定多数の誰もが、データベース上の全てのファイルを更新したり削除したりできる様な状態では、システムは成り立たない。

そこで、多くの場合はシステムに関わる人間を絞る為に、ログイン機能を導入する。
そもそもログインできる人間以外には触れらない状態にしておけば、間違いが起こる可能性は減る。

その上で、更にユーザー毎に権限を割り振る場合も多い。
SNSを筆頭にしたシステムでは、基本的に自分の投稿したものに関してのみ、変更や削除の権限が与えられる。
それに対し、ごく一部の管理者は全ての情報を一限で閲覧・変更・削除できる権限を持っている。

システムを構築する上では、「権限を幾つ用意するのか」、「それぞれどこまでできるのか」を考えるのも重要な要素になる。
基本的にはユーザー権限もデータベースに登録しておき、IF文などで使える機能を絞っていく

3月1日(火) Webサイト制作演習②

PHPステップアップ②~shuffleとarray_shift~

shuffle(配列);
配列を入れると、中身をバラバラに入れ替える関数
array_shift(配列);
配列の一番最初のデータを取り出す関数

以前のPHPの学習では、「rand」関数を使って、ランダムな文字列を実装した。

$kuji = array('大吉','中吉','小吉');
$result = rand(0,2);   //0~2のランダム表示
echo $kuji[$result]; //大吉、中吉、小吉のいずれかを表示

上記のような形であれば、「完全にランダム(ホントは厳密には違いますが……)」なくじ引きが実装できる。

しかし、次のような場合はどうだろう。

A君、B君、C君の三人が、掃除当番を決めようとしている。全員遊びにいきたいので、誰もやりたくはない。やりたくはないが、誰かがやらなくてはならない。
そこで、三人は公平さを重んじる為、くじ引きを行う事にした。
オーソドックスなスタイルで、紙を長細く三本に切り、一本だけ端を赤く塗る……赤を引いた一人が当番だ。
これを乱数で実装してみる。

$kuji = array('赤','白','白');

$Akun = $kuji[rand(0,2)];
$Bkun = $kuji[rand(0,2)];
$Ckun = $kuji[rand(0,2)];

echo <<<EOD
A君の引いたクジ{$Akun}<br>
B君の引いたクジ{$Bkun}<br>
C君の引いたクジ{$Ckun}
EOD;

当然だが、これは間違いである。
上記は「全員が引くたびにクジを戻している」のと同じ状態。つまり毎回当たりも外れもある。
これでは全員が白の可能性も、全員が赤の可能性も出てきてしまう為、掃除当番を巡って喧嘩になってしまう。

こういう時に利用されるのが、shuffle関数。

<?php
$kuji = array('赤','白','白');	//クジが三つ入った箱
shuffle($kuji);			//箱をシャカシャカ揺らす

//一人ずつ順番にクジを引く
$Akun = array_shift($kuji);
$Bkun = array_shift($kuji);
$Ckun = array_shift($kuji);

//結果、赤は誰か一人にしか引かれなくなる
echo <<<EOD
A君の引いたクジ{$Akun}<br>
B君の引いたクジ{$Bkun}<br>
C君の引いたクジ{$Ckun}
EOD;
?>

同じランダムでも、「順番に引く」「一つずつ減る」という結果を出したい場合は、このようにshuffleを用いると良い。
組み合わせ次第で様々なゲームが作れるし、場合によってはシステムにも応用できる。

PHPで作るゲームの注意点

rand、shuffleなどを上手く使えばPHPで簡単なゲーム的なものは作れるようになる。
しかしPHPは複雑なゲーム制作には向いていない
PHPはサーバーサイドスクリプトなので、データの切り替え時にサーバーにアクセス、つまり一度画面を読み込みなおさなければならない。
その関係上、画面内での複雑な動きはできないし、データもSESSIONなどで引き渡さないと、逐一リセットされてしまう。
より直感的に動くブラウザゲームは、クリックやキーボードでイベントを起こせるJavaScript等の方が向いている。

とはいえ、フォームと連携してボタンを押す→結果が出るといった動作はPHPの基本だし、そう言った動きであれば凝り方次第で色んなことが出来るので、色々と遊んでみてほしい。

おまけ。シャッフルを使った簡易ブラックジャック~自己完結版~

絵札の置き換えを何度もやるのが面倒だったので、どうにかできないか考えてみました。
元の物より行数は減りますが、やる事は複雑になります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHPで簡単なブラックジャック</title>
</head>

<body>
<?php 
	$value = array();	//後で使う配列の初期値設定
	
	$card = array('A',2,3,4,5,6,7,8,9,10,'J','Q','K');	//表示用の配列を用意
	
	shuffle($card);	//配列の中身をシャッフルシャッフル
	
	//cardとは別に、計算用の値の配列を用意
	for($i = 0; $i < count($card); $i++){	//配列の長さだけ繰り返し
		if($card[$i] == 'A'){		//もしi番目のカードが「A」なら
			$value[$i] = 11;	//i番目の値は11に
		}elseif($card[$i] == 'J' || $card[$i] == 'Q' || $card[$i] == 'K'){	//もしi番目のカードが「J」「Q」「K」のいずれかなら
			$value[$i] = 10;	//i番目の値は10に
		}else{				//それ以外なら
			$value[$i] = $card[$i];	//そのままの値を代入
		}
	}
	
	//配列なので、foreachでも同じことができます(上のfor文かこちらのいずれかを使用)
	/*
	foreach ($card as $k => $v){
		if($v == 'A'){ 
			$value[$k] = 11; 
		}elseif($v == 'J' || $v == 'Q' || $v == 'K'){ 
			$value[$k] =10;
		}
		else {
			$value[$k] = $v;
		}
	}*/
	
	
	//2つの配列の中身を確認(print_rは配列の中身を全て表示する確認用関数)	
	print_r($card);	
	echo "<br>";
	print_r($value);
	
	
	//プレイヤーA 1枚目
	$A_draw1 = array_shift($card);		//表示カード
	$A_value1 = array_shift($value);	//計算用数値
	
	//プレイヤーB 1枚目
	$B_draw1 = array_shift($card);		//表示カード
	$B_value1 = array_shift($value);	///計算用数値
	
	
	//プレイヤーA 2枚目
	$A_draw2 = array_shift($card);		//表示カード
	$A_value2 = array_shift($value);	///計算用数値
	
	//プレイヤーB 2枚目
	$B_draw2 = array_shift($card);		//表示カード
	$B_value2 = array_shift($value);	//計算用数値
	
	$A_result = $A_value1 + $A_value2;	//Aの結果(Aの1枚目の値 + Aの2枚目の値)
	$B_result = $B_value1 + $B_value2;	//Bの結果(Bの1枚目の値 + Bの2枚目の値)

	//結果を変数に格納
	if($A_result == $B_result){			//AとBが同値なら
		$last_result = '引き分け';		//引き分け
	}elseif($A_result > $B_result){		//AがBより大きければ
		$last_result = 'Aの勝ち';		//Aの勝ち
	}else{								//それ以外(BがAより大きければ)
		$last_result = 'Bの勝ち';		//Bの勝ち
	}
?>

<!--折角なのでテーブルで表示-->
<hr>

<h4>結果</h4>
<table>
	<tr>
		<th>プレイヤー</th>
		<th>1枚目</th>
		<th>2枚目</th>
		<th>合計</th>
	</tr>
	
	<tr>
		<th>Aさん</th>
		<td><?php echo $A_draw1; //Aの手札1 ?></td>
		<td><?php echo $A_draw2; //Aの手札2 ?></td>
		<td><?php echo $A_result;//Aの手札合計値 ?></td>
	</tr>
	
	<tr>
		<th>Bさん</th>
		<td><?php echo $B_draw1; //Bの手札1 ?></td>
		<td><?php echo $B_draw2; //Bの手札2 ?></td>
		<td><?php echo $B_result; //Aの手札合計値 ?></td>
	</tr>
	
	<tr>
		<td colspan="3">
			<?php echo $last_result; //勝敗表示 ?>
		</td>
	</tr>
</table>
</body>
</html>

上記では「表示用の配列」とは別に、「計算用の配列」を用意する事で解決しています。
「こんなやりかたもあるんだー」という参考程度に。コピペすれば使えますが、興味のある方は中身を「読んで」みてください。
「ユーザー定義関数」を使った他の方法もあるのですが、それだけで一講義必要なので、今回は割愛します。