レスポンシブデザインって？

現在では、さまざまなデバイスが登場していますよね。例えば、ひとくちにスマホと言ってもディスプレイサイズはさまざま。このように多岐に渡るディスプレイサイズに対応するために、レスポンシブウェブデザインを採用しているウェブサイトが増えてきました。

レスポンシブウェブデザインとは、さまざまなディスプレイサイズに対応するためのウェブ技術のこと。簡単に言うと、ディスプレイサイズによって適用するCSSを切り替えます。これによって、ユーザーが使っているデバイスごとに、最適なレイアウトでウェブページが表示されるのです。

デバイスごとに異なるスタイル（CSS）を適用させる

レスポンシブウェブデザインのメリット・デメリットをまとめておきましょう。

メリット

• デバイスによらず同一のコンテンツを提供できる
• SEOに強い
• シェアに強い
• 保守管理が楽になる

デメリット

• ページの表示に時間がかかる（場合がある）
• 制作工数・コストがかかる（場合がある）

レスポンシブウェブデザインの最大のメリットは、全てのユーザーに同一のコンテンツを提供できることですね。また、SEOやシェアに強いことでも知られています。レスポンシブウェブデザインでは各ページのHTMLファイルが一つなので、Googleによるインデックスがばらけないことが理由です。

一方で、つくり方によっては制作コストがかさんだり、ページの表示スピードが遅くなることもあります。メリット・デメリットを把握した上で、うまく活用していきたいものですね。

レスポンシブデザイン導入の手順

レスポンシブデザインを導入する方法はいくつかありますが、今回はCSS3のmedia queryを利用した手順をご紹介していきましょう。

ステップ１．ブレークポイントを指定する

レスポンシブデザインのポイントは、デバイスのディスプレイサイズによってCSSを切り替えること。CSSファイルを別個に用意してもいいですし、一つのCSSファイル内にまとめてもかまいません。

さて、CSSを切り替える方法ですが、CSS3から追加されたmedia queryを使います。例えば、下記のように記述すれば、iPad（縦、ランドスケープ）に対してのみ適用させるCSSを記述することができます。

@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait) {
    /* CSS */
}

レスポンシブデザインを上手く構築するには、ディスプレイサイズごとに的確にCSSを分けることです。適用するCSSを切り替える「ブレークポイント」を、正確に指定することが肝要です。

ステップ２．CSSスタイルを記述する

次に、上で設定した各画像サイズごとに、スタイルを記述します。コツとしては、リキッドレイアウトでデザインすることです。各要素の横幅をpx（ピクセル）指定で固定するのではなく、%（パーセント）指定を使って可変レイアウトにしておきましょう。

スタイルの可変指定が漏れてしまっていると、その要素が原因となってレイアウト崩れ（要素がはみ出てしまったり）を起こしてしまうことがあります。画像のサイズ指定については特に注意が必要なので、よく配慮しましょう。

ステップ３．viewportを指定する

さて、CSSの準備ができたら、HTMLから読み込みましょう。なおステップ１ではCSS内でスタイルを切り替えましたが、HTMLファイルから読み込むCSSファイルを切り替えることも可能です。デバイスごとにCSSファイルを用意している場合は、この方法でスタイルを適用させましょう。

<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" href="ipad-portrait.css" />

最後に、viewportで表示領域を指定して完了です。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

Spring をやっている方ならテンプレートエンジンは Thymeleaf をお使いだと思いますが、以前ハマったポイントを記事に書き忘れていたので今回備忘録として残しておきます。

HTML を書き終わり、プロジェクトをビルドして画面を開こうとすると・・・エラーが発生

2015-09-29 22:47:58.030 ERROR 3372 --- [tp2117193231-14] o.thymeleaf.templateparser.ErrorHandler  : [THYMELEAF][qtp2117193231-14] Fatal error during parsing

org.xml.sax.SAXParseException: The element type "link" must be terminated by the matching end-tag "</link>".
	at org.apache.xerces.util.ErrorHandlerWrapper.createSAXParseException(Unknown Source)
	at org.apache.xerces.util.ErrorHandlerWrapper.fatalError(Unknown Source)
（以下スタックトレース）

Thymeleaf の HTML 解析は XMLチェックが走るため、閉じタグを省略したような書き方だと弾かれます。

これをどうにかしないといつまでたっても画面自体が表示されません。今さら HTML を書き直すのはさすがに厳しいので以下の手順で回避しましょう。

1．Thymeleaf のパース（構文解析）設定をゆるく変える

Thymeleafの設定をクラスを使って変えることもできますが、今回は application.properties ファイルを作って設定を入れてみます。
以下のように src/main/resources 直下に、空の application.properties ファイルを作ってください。

その中に以下の設定を書いて保存します。

spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8

テンプレートモードを「LEGACYHTML5」へ変更してやることで HTML 解析がゆるくなります。
ひきつづき次の手順2．に進んでください。

2．NekoHTML ライブラリを入れる

今回 Maven から NekoHTML を入れる方法をご紹介します。ちなみに NekoHTML は HTMLパーサーです。
ネコというネーミングが気になりますが・・・。

Maven の pom.xml に以下を追記

<dependency>
  <groupId>net.sourceforge.nekohtml</groupId>
  <artifactId>nekohtml</artifactId>
  <version>1.9.22</version>
</dependency>

ライブラリを入れるために一度プロジェクトをビルドしてください。

これで Thymeleaf のパーサーがゆるい設定に変わりますので、あとはいつもどおりプロジェクトを実行してください。パーサーチェックが通って画面が無事表示されるはずです。

おまけ

そういえば前にクラスから Thymeleaf の設定をしようとして書いたコードが残っていました。
実行しても設定が変わらなかったのでどなたか解決策をご存知でしたら教えてくださいｗ

@Configuration
public class ThymeleafConfig {
    @Bean
    public ThymeleafViewResolver thymeleafViewResolver() {
        ServletContextTemplateResolver servletContextTemplateResolver = new ServletContextTemplateResolver();
//        servletContextTemplateResolver.setPrefix("/webapp/templates/");
        servletContextTemplateResolver.setSuffix(".html");
        servletContextTemplateResolver.setTemplateMode("LEGACYHTML5");
        servletContextTemplateResolver.setCharacterEncoding("UTF-8");
        servletContextTemplateResolver.setCacheable(false);
 
        SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
        springTemplateEngine.setTemplateResolver(servletContextTemplateResolver);
 
        ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
        thymeleafViewResolver.setCharacterEncoding("utf-8");
        thymeleafViewResolver.setTemplateEngine(springTemplateEngine);
 
        return thymeleafViewResolver;
    }
}

それでは今日はここまで。Thymeleaf使いの方の一助になれば幸いです。

Selenium WebDriver が対応している言語は Java, C#, Ruby, Python, Node.js ですが、php-webdriver-bindings といったサードパーティのライブラリを使えば PHP でも書けるようになります。

今回は Java からブラウザテストを実行していきます。

 Java 用ライブラリをダウンロード

Seleniumダウンロードサイトの赤丸で囲ったところをクリックするとライブラリの詰まった zip ファイルがダウンロードできます。

デスクトップにダウンロードしたら、zip ファイルを解凍しましょう。

解凍が終わったら、お使いの Java IDE から一般的な Java プロジェクトを作成して、selenium-java-2.45.0.jar と libsフォルダの中の jar ファイルをすべてライブラリとして読み込みます。（画面は NetBeans）

さっそくブラウザを開いて特定のサイトにアクセスしてみる

おもむろに以下のコードを書いて実行してみてください。

package seleniumwebdrivertest;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

/**
 *
 * @author masa
 */
public class SeleniumWebDriverTest {

    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("https://cloudear.jp");
    }
    
}

FireFox が起動して弊社のサイトが表示されます（宣伝？ｗ）

ここから作りこんでファイルをダウンロードしたりフォームを埋めて送信したり、テストを書いていくわけです。一から書き込んでいくのは大変なので、前回取り上げた Selenium Builder で操作を記録して、エクスポートしたファイルを調整していくのが良いかと思います。（参照： Selenium Builder で UIテストを高速化）

いかがでしたか？今日はプログラムから UIテストを自動実行する Selenium WebDriver というライブラリをご紹介しました。日々、フロントエンドのテストに追われているエンジニアの方の一助になれば幸いです。

※2015年5月現在の最新版「Firefox 38.0.1」だと Selenium のエクスポートができないようです。もしお使いの FireFox が最新版である場合は、「FireFox Portable版37.02」で Selenium Builder をお試しください。

Selenium Builder とは 以前の Selenium IDE の後継にあたる FireFox 用プラグインソフトです。例えばお問い合わせフォームの機能をテストしたいとします。

1. 名前を入力
2. メールアドレスを入力
3. 電話番号を入力
4. 都道府県を選択
5. 住所を入力
6. 送信ボタンをクリック

これだけでも何回も手で操作するのはキツイです。Selenium Builder を使えば、手動でやった操作を REC で記録し、何度でも同じ操作を再生することができるのです。

また、記録した操作は Java, PHP, Ruby, Python, C# などのスクリプトに書き出し、Selenium Webdriver を使ってプログラムからテスト実行することもできます。
逆に言えば本来スクリプトで操作内容を書いて SeleniumDriver から実行するのですが、それが大変なので GUI 画面から簡単に出来るようにしたのが、この Selenium Builder なわけです。

　Selenium Builder をインストールする

まずは FireFox を起動して、公式サイト　からプラグインをダウンロードします。

FireFox のプラグインとしてインストールするダイアログが画面がでたらそのままインストール続行してください。インストールが終わるとブラウザの再起動を求められます。

ブラウザ再起動が終わったら FireFox のメニューから「開発ツール」を選択→「Launch Selenium Builder」を選択します

　まずは簡単な操作を記録して再生してみる

Selenium Builder が起動したら、Selenium2 のボタンをクリックすると記録がスタートします。
※Selenium1 だと旧 SeleniumRC でのスクリプト作成になりますので非推奨

ちなみに Slenium 対象のタブはふちが緑色になります。

では以下の操作をしてみます。

1. Google を開く

2. 検索バーに「ボラボラ島」と入力

3. 画像検索結果で一番目の写真をクリック

4. 操作が終わったら Selenium の画面で「Stop recording」をクリックして記録を止めます。

5. 記録した操作を再生します。Runメニューから「Run test locally」をクリックすると再生が開始されます。

自動的に操作されましたか？ちょっと感動しますね。もっと複雑な操作の場合はスクリプトで調整する必要がありますが、ざっくりと雛形を作るにはとても便利なツールだと思います。

最後にこの記録をスクリプトに書き出してみましょう。今回はネイティブな Java にエクスポートしてみます。
Fileメニューから「Export」をクリックします。

お好きな言語を選択してください。

ちなみにこれが Java で書き出したソースコードです。

import java.util.concurrent.TimeUnit;
import java.util.Date;
import java.io.File;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.*;
import static org.openqa.selenium.OutputType.*;

public class sb {
    public static void main(String[] args) throws Exception {
        FirefoxDriver wd;
        wd = new FirefoxDriver();
        wd.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
        wd.get("https://www.google.co.jp/?gws_rd=ssl");
        wd.findElement(By.id("lst-ib")).click();
        wd.findElement(By.id("lst-ib")).clear();
        wd.findElement(By.id("lst-ib")).sendKeys();
        wd.findElement(By.id("lst-ib")).click();
        wd.findElement(By.id("lst-ib")).sendKeys("\n");
        wd.findElement(By.id("lst-ib")).click();
        wd.findElement(By.id("lst-ib")).clear();
        wd.findElement(By.id("lst-ib")).sendKeys("ボラボラ島");
        wd.findElement(By.id("lst-ib")).click();
        wd.findElement(By.id("lst-ib")).sendKeys("\n");
        wd.findElement(By.name("imgthumb1")).click();
        wd.quit();
    }
    
    public static boolean isAlertPresent(FirefoxDriver wd) {
        try {
            wd.switchTo().alert();
            return true;
        } catch (NoAlertPresentException e) {
            return false;
        }
    }
}

このスクリプトをいじって Selenium Webdriver でプログラムから実行することも可能です。

いかがでしたか？今日は UIテストツールである Selenium Builder を取り上げてみました。もしこの記事に反響があれば Selenium Webdriver についても書いてみたいと思います。

Thymeleaf の話の前に・・・Spring MVC だと xml ファイルで設定をするのが常ですが、Spring Boot を使うと設定がスクリプトとして書かれ、@EnableAutoConfiguration というアノテーションをつけるだけで設定が自動的に読み込まれます。

まずは、Spring Boot と Spring Boot 用の Thymeleaf ライブラリを Maven からインストールします。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>        
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>

次に、Controller を以下のように実装して、GET を受けられるようにします↓

package jp.cloudear.spring_boot.controller;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

/**
 *
 * @author masa
 */
@Controller
@EnableAutoConfiguration
public class App {
   
    @RequestMapping("/hello")
    public String hello(@RequestParam(value="name", required=false, defaultValue="masa") String name, Model model) {
        model.addAttribute("name", name);
	return "hello";
    }

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
    
}

そして、src/main/resources/templates にhello.html を作成します↓

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf で出力しますよ</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'こんにちは, ' + ${name} + 'さん!'" />
</body>
</html>

ビルドしたら作った URL にアクセスします↓

http://localhost:8080/hello

そうすると以下のようにページが表示されました。

いかがでしたか？今回は簡単ではありますが、Spring Boot から Thymeleaf を使ってみました。Thymeleaf日本語のサイトもありますので是非チェックしてみてください。