LoginSignup
0

More than 3 years have passed since last update.

ボタンクリックでランダムでペンギンの画像が出るページを作る その2

Last updated at Posted at 2019-12-11

概要・目次はこちら

ベースづくり

整理のために、ひとまず必要なページなどを書き出してみます。
いわゆるサイトマップ。

index.html
⇃(ボタンクリックで遷移)
result.php(ランダムでペンギンの画像表示)

サイトマップ作るほどでもないのでこれで

Javascriptとか組み合わせればページ遷移せずに(index.html内で)画像表示までできるんだろうけど、とりあえずシンプルにこの形で…

コーディング

サイトマップが出来たらページデザイン、
デザインが出来たらコーディングしていきます。
(複雑なものだとワイヤー作ったほうがいいと思います…)

ひとまずphp無しに作りますが、作りながらどこを動的に処理したいか考えつつコーディングします。
コメント 2019-12-01 175345.png
コメント 2019-12-01 17534dsdsd.png
画像、画像の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">&copy; 2019 Random Penguin</footer>
    </div>
</body>

main-imgmain-img-ttlmain-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">&copy; 2019 Random Penguin</footer>
    </div>
</body>

結果ページで更新かけるとまたランダムに変わってしまったり、いろいろ改善すべき点はあるけども、
やりたいことはなんとなくできたのでオッケーとします。

テストページ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0