PHPページング表示を利用したコミック閲覧ページの作り方

PHPの基本機能「ページネーション」を使ったコミック閲覧『Comic viewerプログラム』を作成しました。

WordPressのブログにも使われている記事の切り替えを使って画像を順番に切り替えます。

これでマンガの閲覧から画像を使ったプレゼンテーションまで様々な画像切り替えとして応用できます。

サンプルではBootstrapを使ってPCとタブレットでは２ページごと・スマートフォンでは１ページごとに表示させるようにしています。

プログラムにPHPを使用しています。

PC・タブレットでの表示

スマートフォンでの表示

<?php 
$totalPage = 10; 

if (
isset($_GET["page"]) &&
 $_GET["page"] > 0 &&
 $_GET["page"] <= $totalPage 
) { 
$page = (int)$_GET["page"]; 
} else { $page = 1; 
} 
?>

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>コミック閲覧サンプルページ</title> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!--キャッシュを有効化しつつ[CSS]や[JavaScript]ファイルの変更を確実に反映させる方法--> <link rel="stylesheet" href="../comic/style.css?<?php echo filemtime('style.css') ?>" type= "text/css"> <link rel="stylesheet" href="../comic/css/normalize.css" type= "text/css"> </head> <body> <div class="container"> <div class="low"> <span class="col-lg-12 hidden-sm hidden-xs"> <?php echo '<img src=\'../comic/comics/pic'.($page).'.jpg\' width="50%" height="50%">' ?><?php echo '<img src=\'../comic/comics/pic'.($page + 1).'.jpg\' width="50%" height="50%">' ?> </span> </div> <div class="low"> <div class="col-md-3"></div> <div class="col-md-6 hidden-sm hidden-xs"> <div class="col-md-12 d-button"> <?php if ($page > 1) : ?> <button id="first"><a href="index.php">◀︎◀︎<br><span class="bfont">first</span></a></button> <button id="prev"><a href="?page=<?php echo ($page - 2); ?>">◀︎<br><span class="bfont">prev</span></a></button> <?php endif; ?> <?php if ($page + 1 < $totalPage) : ?> <button id="next"><a href="?page=<?php echo ($page + 2); ?>">▶︎<br><span class="bfont">next</span></a></button> <button id="last"><a href="?page=<?php echo $totalPage; ?>">▶︎▶︎<br><span class="bfont">last</span></a></button> <?php endif; ?> </div> </div> <div class="col-md-3"></div> </div> </div> <div class="container-fluid nopadding"> <div class="low"> <div class="visible-sm visible-xs"> <?php echo '<img src=\'../comic/comics/pic'.($page).'.jpg\' width="100%" >' ?> </div> </div> <div class="low"> <div class="col-md-3"></div> <div class="col-md-6 visible-sm visible-xs"> <div class="col-md-12 s-button"> <?php if ($page > 1) : ?> <button id="first"><a href="index.php">◀︎◀︎<br><span class="sfont">first</span></a></button> <button id="prev"><a href="?page=<?php echo ($page - 1); ?>">◀︎<br><span class="sfont">prev</span></a></button> <?php endif; ?> <?php if ($page < $totalPage) : ?> <button id="next"><a href="?page=<?php echo ($page + 1); ?>">▶︎<br><span class="sfont">next</span></a></button> <button id="last"><a href="?page=<?php echo $totalPage; ?>">▶︎▶︎<br><span class="sfont">last</span></a></button> <?php endif; ?> </div> <div class="col-md-3"></div> </div> </div> </div> </body> </html>

サンプル→　コミック閲覧サンプルページ

まずPHPファイルとCSSファイルと画像を格納するフォルダを用意します。

画像が入るフォルダ（見本ではcomics）に画像を入れます。ファイル名は表示させたい順番に番号を振っておきます。サンプルでは10枚の画像を入れてます。画像数は後で使うので覚えておきましょう。

<?php 
$totalPage = 10;
 if ( isset($_GET["page"]) &&
 $_GET["page"] > 0 &&
 $_GET["page"] <= $totalPage 
) { 
$page = (int)$_GET["page"]; 
} else { 
$page = 1;
 } 
?>

2行目の「$totalPage」にフォルダに入れてある画像の数を記入します。サンプルの画像は10枚なのでここでは「10」と入れます。

IF文には規定されたページに飛ばないように１ページ目に飛ばせる処理を加えています。