まずはPHPの復習。ProgateのPHPⅣ（所要時間 85分）
２周目なので、何をどうしたらいいか何となくわかるのですが、
なぜクラスにするのか、メソッドや関数との使い分けはどうなっているのか・・・
どうにもピンときません。PHPはなかなか難しいです。
そこで本日は簡単なお題を考えて、実装してみる事にしました。
クリックでうごく信号機はどうだろう？
信号機のアイコンをクリックしたら赤→青→黄と変わる。
簡単そうです！
イラストはこちらからお借りさせていただきました。
信号機のイラスト（青信号・黄色信号・赤信号・全点灯）
難しかった・・・！！！
思ったよりずっと難しかったです・・・
PHPを自分のパソコンで動かす
PHPはサーバーサイドスクリプトなのでWEBサーバーを立てる必要があります。幸い、使っているのがMacなので、デフォルトでPHPが使えます。よかった！
ターミナルを立ち上げて、次のコマンドを実行します。
php -S localhost:8080 -t ~/Documents/PHP
そして、~/Documents/PHPに作成したPHPファイルを持ってきて、ブラウザを立ち上げて、localhost:8080/ファイル名を開きます。
まずはProgateの課題でつくったPHPファイルをダウンロードして動かしてみました。・・・動きました！開発環境はこれでオッケーです。
(とても参考になりました）
【初心者向け】インストール無し！MacでPHPの開発環境を作ろう！
ざっくりHTMLとCSSを作る
紙とペンでざっくり作りたい感じをスケッチして、HTMLとCSSを作り、表示を確かめました。
さらに画像をクリックしたら赤→青→黄と変わりたいので、<form></form> で囲って<input>でボタンを作る事にしました。
また、サーバーを起動停止しても大丈夫にしたいので、直前の状態をテキストに保存する事にしました。
画像ボタン作りでハマりました。
ボタンは<input>で、画像を使うにはtype="image"を指定します。
（inputのくわしい解説です）
画像で送信ボタンを作る
しかし、<img src="~~~.png">だと指定通りのサイズになるのに、<input type="image rc="~~~.png">だと画像そのままのサイズで表示され、指定のサイズに収まりません。
ここはだいぶ悩みました。
Chromeで開いて、画像を右クリックして、「検証」からデベロッパーツールを起動して、該当のCSSを確認すると、cssで指定したimg要素に横線ががーっと引かれています。これはこのブラウザでは無効になっている事を示しているそうです。
（助かりました！）
①初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
②CSSが効かない・反映されないときの対処法まとめ
いくつか対処法をためすうちに、imgじゃなくてimputを装飾すればよさげな事に気がつきました！
body {
color: #FFFF99;
background: #100000;
}
.main {
width:100vw;
padding: 1em;
}
input[type="image"] {
-webkit-appearance: none;
width:90vw;
margin:1vw;
}
めちゃくちゃ詳しくて理解できなかったけど参考になりました。
input[type="button"] と button の違い
input[type="button"]、input[type="submit"]の例が参考になりました。
input要素のうち、ボタンだけを対象にして装飾するCSS
画像をクリックして状態を記録するには
inputとformの例に、<input type="hidden">で何でも送れるそうなので、
ここに画像のファイル名を書いて、PHPを介してテキストに書き込んでみる事にしました。
テキストファイルを更新する方法を調べてみました。
PHPでファイルの読み込みをする主な4つの方法
fopen,fgets,fwrite,fcloseを組み合わせて使う・・・みたいです。
ざっくり使い方を考えてみます。
(1)最初にファイル（URL）を開いた時
①ファイル名をきめる
②fopenでファイルを開く（読み取りモード）
③fgetsでファイルを読み込む→変数に格納してHTMLで表示
④fcloseでファイルを閉じる
(2)クリックしたとき
①ファイル名をきめる
②fopenでファイルを開く（書き込みモード）
③HTMLからもってきた変数を、fwriteで書き込む
④fcloseでファイルを閉じる
こんな感じかな？
画像ファイルを切り替えるには
なぜかここでもハマりました。
信号なので、ao, ki, aka の３種類を順番に切り替える事にしたのですが
if~elseif~else だとうまく動作しません。思ったのと違う結果が返ってきます。
何かを見落としているのでしょうか。。。そのかわりにSwitchを使ってみました。
switch($color) {
case 'ao':
$color='ki';
break;
case 'ki':
$color='aka';
break;
case 'aka':
$color='ao';
}
完成！
<?php
//クリックされた信号機の色を$colorに入れる
$color = $_POST['color'];
//初回は$colorが空白なので、switch,fwriteはとばす。
//クリックで$colorに値が入ると実行される。
if(empty($color)==false){
switch($color) {
case 'ao':
$color='ki';
break;
case 'ki':
$color='aka';
break;
case 'aka':
$color='ao';
}
//変更したらテキストに保存する
$fp = fopen('shingou.txt', 'w');
fwrite($fp,$color);
}
//テキストを読み込む
$fp = fopen('shingou.txt', 'r');
$color = fgets($fp);
fclose($fp);
?>
<?php
require_once("edit.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>あかあおきいろ</title>
<link rel="stylesheet" href="shingou.css">
</head>
<body>
<div id="main">
<div class='contents'>
<form method="post" action="">
<input type="hidden" name="color" value="<?=$color?>" />
<input class="shingou" type="image" src="<?=$color?>.png" />
</form>
</div>
</div>
</body>
</html>
ProgateのPHPもクリアしたし、クリックで状態が変わるだけなんて楽勝でしょーと思ったら、思いの外むずかしくて参りました。
Herokuで公開！
なんと、だいぶ前の事なので手順を忘れていました。。。
ログインしたら最新が5 month agoでした。３日坊主が５ヶ月だと新右衛門さん？信念さん？？？
①ローカルのGithubと同期しているフォルダに一式いれる
②Github Desktopでアップロードする。
③HerokuとGithubを同期させる
④Herokuからデプロイする。
できました！！！
Day53:あかあおきいろ
クリックして色が変わるだけなのにこんなに大変だなんて、、、想像以上でした。
(所要時間 ５時間)