ボタンクリックでランダムでペンギンの画像が出るページを作る その2
概要・目次はこちら
ベースづくり
整理のために、ひとまず必要なページなどを書き出してみます。
いわゆるサイトマップ。
index.html
⇃（ボタンクリックで遷移）
result.php（ランダムでペンギンの画像表示）
サイトマップ作るほどでもないのでこれで
Javascriptとか組み合わせればページ遷移せずに（index.html内で）画像表示までできるんだろうけど、とりあえずシンプルにこの形で…
コーディング
サイトマップが出来たらページデザイン、
デザインが出来たらコーディングしていきます。
（複雑なものだとワイヤー作ったほうがいいと思います…）
ひとまずphp無しに作りますが、作りながらどこを動的に処理したいか考えつつコーディングします。
画像、画像のalt、画像のタイトル、説明文が変わっていくな～～とか思いながらコーディングします
phpを実装する
ベースが出来たら、phpで動きを実装していきます。
<body>
<div class="wrap">
<header class="header">Qiita</header>
<article class="main">
<h1 class="main-ttl">Random Penguin</h1>
<p class="main-img"><img src="img/01.jpg" alt="タイトル01"></p>
<p class="main-img-ttl">タイトル01</p>
<p class="main-img-caption">説明文01</p>
</article>
<footer class="footer">© 2019 Random Penguin</footer>
</div>
</body>
main-img、main-img-ttl、main-img-captionの部分をまとめて変えたいので、配列でセットを作ります。
画像・タイトル・説明文を設定する
<?php
$set = array(
array( //[0]
'title' => 'タイトル01',
'img' => '01',
'caption' => '説明文01'
),
array( //[1]
'title' => 'タイトル02',
'img' => '02',
'caption' => '説明文02'
),
array( //[2]
'title' => 'タイトル03',
'img' => '03',
'caption' => '説明文03'
),
);
echo 'タイトル：'.$set[0]['title'].'<br>';
echo '画像：'.$set[0]['img'].'<br>';
echo '説明文：'.$set[0]['caption'];
?>
//実行結果
タイトル：タイトル01
画像：01
説明：キャプション01
$set[0]の数字を変えればその中にセットしたtitleなどが表示されます。
ランダムな数字を発生させる
rand関数を使います。
//0～2の数字からランダムな数字を$randomに入れる
$random = rand(0, count($set)-1);
//$set[0～2]を$resultに入れる
$result = $set[$random];
rand(0, 2)でもいいけど、$setの中身が増えても対応させていきたいので、$setの中身をcountで数えて-1します。
あとは$result['title']などで表示させるだけ。
htmlに組み込む
<?php
$set = array(
array( //[0]
'title' => 'タイトル01',
'img' => '01',
'caption' => '説明文01'
),
array( //[1]
'title' => 'タイトル02',
'img' => '02',
'caption' => '説明文02'
),
array( //[2]
'title' => 'タイトル03',
'img' => '03',
'caption' => '説明文03'
),
);
$random = rand(0, count($set)-1);
$result = $set[$random];
?>
<body>
<div class="wrap">
<header class="header">Qiita</header>
<article class="main">
<h1 class="main-ttl">Random Penguin</h1>
<p class="main-img"><?php echo '<img src="img/'.$result['img'].'.jpg" alt="'.$result['title'].'">' ;?></p>
<p class="main-img-ttl"><?php echo $result['title']; ?></p>
<p class="main-img-caption"><?php echo $result['caption']; ?></p>
</article>
<footer class="footer">© 2019 Random Penguin</footer>
</div>
</body>
結果ページで更新かけるとまたランダムに変わってしまったり、いろいろ改善すべき点はあるけども、
やりたいことはなんとなくできたのでオッケーとします。
Author And Source
この問題について(ボタンクリックでランダムでペンギンの画像が出るページを作る その2), 我々は、より多くの情報をここで見つけました https://qiita.com/xcx_04/items/30bc4b3ab1e223faf6f7著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .