WordPressローカル環境でレスポンシブテストツールをテーマに組み込む方法

ウェブサイトのレスポンシブデザインをチェックするサイトとしてResponsive Design Testingというテストツールがあります。

このツールは、Matt Kersleyさんというデザイナー兼開発者が作成したツールで、様々なデバイスの大きさのレスポンシブ具合を一覧で見ることができるテストツールです。

で、最近このツールは、WEB上で使うだけでなくローカル環境でも利用できることを知りました。

そこで、「Wordpressテーマ内に簡単にレスポンシブチェックできる機能をつけたら便利なのではないかな？」と思ったので試しに実装してみました。

そしたら、結構使い勝手がよかったので、その方法の紹介です。

主な手順

まずは、主な4つの手順を紹介します。

レスポンシブテストツールのダウンロードとリネーム
ローカル環境判別関数の作成
テストツールをカスタマイズ
テスト用リンクの設置

順番通りに行えば、特に難しいことはないと思います。

僕が利用しているローカル環境は以下です。

Windows上にサクサクっとローカルWordPress開発環境を作る方法

Wordpressのテーマなどをカスタマイズするときは、ローカルで編集して、FTPでアップロードするのが望ましいです。というのも、W...

nelog.jp

2014-11-25 14:49

テストツールのダウンロードとリネーム

まずは、レスポンシブテストツールをダウンロードします。

ダウンロードは、mattkersley/Responsive-Design-Testingの「Download ZIP」から行えます。

ダウンロードしたzipファイルの中から以下のファイルを取り出します。

index.html
responsive.js

今回利用するのは、この2つのファイルのみです。

この2つのファイルのうち、index.htmlファイルを「responsive-test.php」とリネームして「responsive.js」ファイルとともに、テーマ（子テーマ）ディレクトリ直下にコピーしてください。

こんな感じになります。

テストファイルの置き場所は、パスさえちゃんと設定すれば、どこでも良いですが、今回は説明の単純化のためテーマディレクトリ直下で説明します。

ローカル環境判別関数の作成

次にローカルのテスト環境であるかを判別する関数を作成します。

まずは、テーマ（子テーマ）ディレクトリ直下に「utility.php」というファイルを作成してください。ファイル名は、何でも良いのですが今回は「utility.php」とします。

utility.phpファイルをエディターなどで開いて、以下を貼り付けてください。

<?php 

//ローカルのテスト環境かどうか
function is_local_test(){
  $host = $_SERVER['SERVER_NAME'];
  //自分でホスト名を設定している場合は追加
  if ( $host == 'localhost' || $host == '127.0.0.1' ) {
    return true;
  }
}

これは、ホスト名を判別して、ローカル環境かどうかを判断する関数です。自前でホスト名などを設定している場合は、if部分に条件を追加してください。

あとは、Wordpress上でこの関数を呼び出せるように、functions.phpの先頭あたりに以下のコードを追加してください。

include 'utility.php';//自前で設定した関数の呼び出し

テストツールをカスタマイズ

次に、テストツールをカスタマイズします。

Responsive Design Testingというウェブサイトがあるのに、ローカルに同様のテスト環境を築く利点として、テストツールを自由にカスタマイズして使えるという利点があります。

カスタマイズするのは先程リネームした「responsive-test.php」というファイルです。

このファイルをエディターなどで開いて、中身を以下のものに入れ替えてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Responsive design testing for the masses">
    <title>Responsive Design Testing</title>
    <style>
        *{vertical-align:top;}
        body{padding:20px;font-family:sans-serif;overflow-y:scroll;}
        h2{margin:0 0 20px 0;}
        span.small{font-size:60%;vertical-align:middle;}
        #url{margin:0 0 20px 0px;display:block;}
        #url input[type=text]{border:solid 1px #666;width:85%;margin:0 auto;font-size:2em;text-align:left;}
        #url #options{float:right;line-height:25px;width:13%;}
        #url #options input{margin-top:5px;}
        #frames{overflow-x:scroll;width:100%;margin-bottom:10px;padding-bottom:20px;}
        .frame{margin-right:20px;float:left;}
        .frame:last-child{margin-right:0;}
        .frame img{display:none;vertical-align:middle;}
        iframe{border:solid 1px #000;}
        .widthOnly {height:580px;}
        .widthOnly h2 span{display:none;}
        .widthOnly iframe{height:500px;}
    </style>
</head>
<body id="container">
<?php 
include 'utility.php';


if ( is_local_test() ): ?>
    <div id="url">
        <form method="post">
            <input type="text" placeholder="Test your own site... type the url and hit enter" />
            <input type="submit" value="submit">
            <div id="options">
                <label for="normal"><input id="normal" type="radio" name="option" value="1" checked>Width only</label><br />
        <label for="accurate"><input id="accurate" type="radio" name="option" value="2">Device sizes</label><br />
                <label for="scrollbar"><input id="scrollbar" type="checkbox" name="scrollbar" value="1" checked>Visible Scrollbars</label>
            </div>
        </form>
    </div>
    <div id="frames" class="widthOnly">
        <div id="inner">
            <div id="f1" class="frame">
                <h2>240<span> x 320</span> <span class="small">(small phone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="255" height="320"></iframe>
            </div>
            <div id="f2" class="frame">
                <h2>320<span> x 480</span> <span class="small">(iPhone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="335" height="480"></iframe>
            </div>
            <div id="f3" class="frame">
                <h2>480<span> x 640</span> <span class="small">(small tablet)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="495" height="640"></iframe>
            </div>
            <div id="f4" class="frame">
                <h2>768<span> x 1024</span> <span class="small">(iPad - Portrait)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="783" height="1024"></iframe>
            </div>
            <div id="f5" class="frame">
                <h2>1024<span> x 768</span> <span class="small">(iPad - Landscape)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1039" height="768"></iframe>
            </div>
            <div id="f6" class="frame">
                <h2>1280<span> x 768</span> <span class="small">(iPad - Landscape)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
                <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1295" height="768"></iframe>
            </div>
        </div>
    </div>
    <span>A tool by <a href="http://mattkersley.com">Matt Kersley</a> - <a href="https://github.com/mattkersley/Responsive-Design-Testing">Fork it on Github</a></span><br />
    <span>Note: The content width may not be pixel perfect - I have added 15px to the iframes to cater for the scrollbars</span>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script src="responsive.js"></script>
<?php else: ?>

<p>このページはローカルテスト環境からの利用のみです。</p>
<?php endif; ?>

</body>
</html>

カスタマイズした部分をかいつまんで説明すると、まず先程のローカル環境判別関数を呼び出しています。

include 'utility.php';

その関数を利用して、ローカル環境以外では、ツールが起動しないようにしています。

一応、パブリックで利用しても特に問題のあるコードは使われてはいないと思っているのですが、一応念のためローカルだけの使用にしています。

で、こんな感じで、1280幅の表示を確認できるエリアを追加しています。

<div id="f6" class="frame">
    <h2>1280<span> x 768</span> <span class="small">(iPad - Landscape)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1295" height="768"></iframe>
</div>
</div>

ローカルでこのツールを使う利点は、こういった感じで自由な幅のレスポンシブチェックを設定できることにあります。

このように、自分がチェックしたい端末幅のテストエリアを自由に追加することができます。

テスト用リンクの設置

あとは、フッターのクレジット表記部分の下あたりに以下のように書き込みます。（テストしやすい場所ならどこでも良い）

<?php if ( is_local_test() ):
  $page_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>
  <a href="<?php echo get_template_directory_uri().'/responsive-test.php?'.$page_url; ?>" target="_blank" rel="nofollow">レスポンシブテスト</a>
<?php endif; ?>

子テーマからだとget_template_directory_uri()部分をget_stylesheet_directory_uri()に変更してください。

すると、ローカル環境からサイトにアクセスするとフッターに以下のようにリンクが表示されます。