Advertisement

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

PHP

 

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

 

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

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

 

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

プログラムに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>

 

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

 

Advertisement

基本設定

 

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

 

 

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

 

 

 

サンプルプログラムを順番に説明します。

 

<?php

$totalPage = 10;

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


?>

 

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

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

 

PC・タブレットでの表示

 

 

まず、PC・タブレットでは2枚の画像を表示させる処理を行います。「$page」関数を使って画像が順番に表示するようファイル名に合わせて「pic’ . ($page) . ‘.jpg」と記述します。

48行目以下にページを送るリンクを表示します。「$page – 2」「$page + 2」と書くことで最初の画像を奇数ごとに表示するようにしています。

サンプルでは右送りですので表記を逆にすれば左送りにすることも可能です。

 

スマートフォンでの表示

 

 

スマートフォンでは1枚ごとに表示しますので67行目に書く画像表示は1つだけです。

ボタン送りも「$page – 1」「$page + 1」と1枚ずつでの処理です。

 

CSSでの調整

 

 

CSSではスマホ表示で画像が画面いっぱいに表示されるように設定しています。

また、Bootstrap特有のPaddingが適用されないように処理を施しています。

 

他は主に画像送りボタンの表示を設定しています。サンプルでは記号を使っていますが、画像でもアイコンでも自由に置き換えることが可能です。

こちらは好みの表示になるように調整してみてください。

 

PHPのページング(ページネーション)を使うだけで簡単にコミック閲覧ができます

 

これまでコミック閲覧ページComic Viewerで検索してもなかなか良いプログラムがありませんでした。あってもスクリプトを使ったものだったりしてあまり良いものでは無かったです。

今回PHPのページング機能に画像表示を上乗せする形で簡単なコミック閲覧プログラムを作成しました。これで画像を閲覧するごとに「ページが変わる」ので、ページごとにRSSで更新をお知らせしたり、ソーシャルボタンやコメント欄を設置することもできます。

 

コミック閲覧サイト(Comic Viewer site)の制作を請け負っています

 

ARMDroid BLOGではこのようなPHPを使ったコミック閲覧サイトの他にもWordPressのプラグイン「Comic easel」を使ったWordpressテーマ「ComicPress」での制作実績がございます。

「作った漫画をサイトに載せたい」「自分の作品を自分のサイトで紹介したい」と考えている方がいましたらお気軽にご相談ください。

こちらのメールアドレスまたはFacebookまでどうぞ

 

メールでのお問い合わせはこちら

Facebookはこちら

PHP
Advertisement

プログラマーです。メインはWEB作成をやってます。
生まれも育ちもアスペルガー。心屋仁之助さんの前者後者理論を実践しています。
プロフィール詳細はこちらから

ARMDroidをフォローする
ARMDroidをフォローする
Advertisement
ARMDroid BLOG