• このエントリーをはてなブックマークに追加

Webサイト上でクリスマスになったら気分を変えたい。と思ったとき、具体的に自分に対してどういった行動をとるか。
それがうまくさらさらと考えられればプログラムと仲良くなれる。

クリスマスに何か変えようとするときに、HTMLを書き換えるのであればその日に対象の画像などを変えて、次の日に元に戻すという事を行えばいい。ただそれだけなんだけど、それがめんどくさいと感じたり、あるいは別の例えばバレンタインデーの日も変えたい!ひなまつりも・・・いっそのこと365日変化をつけたい。
そんな時には手で更新するのも正直しんどい。

そういった時にこの日は、自動的にヘッダーのこの画像を変える。という命令を打ってあげればその日になったときに自動的に思い通りの結果を出すことが出来る。具体的に以下のような感じで。
※考え方によってもっと効率のいい方法も

  1. 画像を変えて気分転換
  2. 具体的にいつ画像を変えるか決める
  3. 画像の場所はどこ?
  4. 画像を一つのフォルダに入れて管理
  5. 名称は1月1日のようにしよう(0101.jpgがいいかな)
  6. 画像の決まりとフォルダの決まりが分かったから次は読み込みの仕組みを考えよう
  7. 画像ならば、<img>を利用すればいいかな
  8. <img src=”image/bnr365/xxxx”>という風に読み込むから、xxxxにプログラムの結果があればいいか
  9. じゃあ具体的にどうしよう
  10. まずは日付を元にファイル名を表示できるようにしよう
  11. 日付の関数を調査・記述
  12. 日付を代入する方法を調査・記述
  13. 日付が分かったから、それを加工してファイル名にしよう
  14. 日によって違ったファイル名が取得できるようになった。365日分のファイル名が取り出せたから、画像を必要な文だけ用意。
  15. このまま<img>を設置するとまずい(365枚画像を表示させてしまう)から分岐させよう
  16. 分岐はif(条件){処理;}だから、さっきの繰り返しの中で分岐させよう
  17. このifのカッコ内の処理に<img>をつければ完了!
  18. 動いているかな?チェック→だめなら修正の繰り返し

もっと具体的な例 PHPで

  1. 画像を変えて気分転換
  2. 具体的にいつ画像を変えるか
  3. 画像の場所はどこ?
    image/bnr365/ ← この表示させるPHPから見てここに入れていこう
  4. 画像を一つのフォルダに入れて管理
    例外を考えないのであればbnr365のフォルダに全て入れるようにする
    管理が難しくなりそうならサブフォルダを設定する。のちのコーディングに影響が出るので拡張性を考える
  5. 命名規約の設定
    0101.jpg 上二桁は月、下二桁は日にする。
  6. 画像の決まりとフォルダの決まりが分かったから次は読み込みの仕組みを考えよう
  7. 画像ならば、<img>を利用すればいいかな
    <img>画像を表示させる仕組みを考える。   <?php print "<img src="image/bnr365/画像の名称.jpg" alt="画像(※ここも変えるのであればもう少しプログラムが複雑になる)">"; ?>
  8. <img src=”image/bnr365/画像の名称.jpg”>という風に読み込むから、xxxxにプログラムの結果があればいいか
  9. じゃあ具体的にどうしよう
  10. まずは日付を元にファイル名を表示できるようにしよう
  11. 日付の関数を調査・記述 date("d"); これかな?
  12. 日付を代入する方法を調査・記述 $dd = date("d"); 日が$ddに代入されている模様。 print $dd; 本当に入っているか上記のように出力して検証
  13. 日付が分かったから、それを加工してファイル名にしよう $mm = date("m"); $dd = date("d"); print "<img src="/" . $mm . $dd . ".jpg">";
  14. 日によって違ったファイル名が取得できるようになった。365日分のファイル名が取り出せたから、画像を必要な文だけ用意
    今回はクリスマスとバレンタインデーと通常の3枚の画像を設定することに
  15. このまま<img>を設置するとまずい(365枚画像を表示させてしまう)から分岐させよう $mm = date("m"); $dd = date("d"); if(条件を何か・・・){ print "<img src="image/bnr365/" . $mm . $dd . ".jpg">"; }
  16. 分岐はif(条件){処理;}だから、さっきの繰り返しの中で分岐させよう $mm = date("m"); $dd = date("d"); if(条件){ print $mm . $dd ; }
  17. このifのカッコ内の処理に<img>をつければ完了! $mm = date("m"); $dd = date("d"); //クリスマス? if($mm . $dd == "1225"){ print "<img src="image/bnr365/" . $mm . $dd . ".jpg">"; //それともバレンタインデー? }else if($mm . $dd == "0214"){ print "<img src="image/bnr365/" . $mm . $dd . ".jpg">"; //それ以外(残りの363日分の画像はこっちに分岐:1枚で363日分を担う) }else{ print "<img src="image/bnr365/0101.jpg">"; }
  18. 動いているかな?チェック→だめなら修正の繰り返し

完成!

<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>章名</h1>
<p>ページ紹介文</p>
<?php
$mm = date("m");
$dd = date("d");
//クリスマス?
if($mm . $dd == "1225"){
print "<img src="image/bnr365/" . $mm . $dd . ".jpg">";
//それともバレンタインデー?
}else if($mm . $dd == "0214"){
print "<img src="image/bnr365/" . $mm . $dd . ".jpg">";
//それ以外(残りの363日分の画像はこっちに分岐:1枚で363日分を担う)
}else{
print "<img src="image/bnr365/0101.jpg">";
}
?>
</body>
</html>