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

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

レスポンシブウェブデザインとは、さまざまなディスプレイサイズに対応するためのウェブ技術のこと。簡単に言うと、ディスプレイサイズによって適用する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使いの方の一助になれば幸いです。

Reactとは

Reactはブラウザで動作するWebアプリケーションのUI（ユーザインターフェイス）を担当するJavaScriptライブラリです。DOM操作を通して画面の見た目を変えることに特化しています。

Reactの重要な特徴は３つあります。

JSXによるDOM操作の隠蔽

本来DOM操作は面倒で誤りやすいプログラムを書く必要があのですが、Reactは、JSXというJavaScriptを拡張した言語を提供することで、面倒なDOM操作をプログラマから隠してくれます。

その代わりJSXをJavaScriptに変換するという開発上の手間が必要ですが、JSXはこの手間を上回る利便性を提供してくれます。

一方向データバインディング

Reactでは「データ」→「画面（HTML）」という方向でしかデータが流れません。AngularJSなどは画面でユーザの入力を検出したらデータに反映してくれるようですが、Reactはあくまでデータを画面に反映するのみです。

これはプログラムの見通しが良くなる効果がありますし、またReactを使うために覚えることが少なくなるという利点もあります。

コンポーネント指向

Reactは画面の部品化を促進します。HTMLの一部をコンポーネントとして切り出し、プロパティやイベントハンドラをコンポーネントの中にまとめて記述出来ます。

これにより、プログラムの記述方法が統一されるという効果や、いわゆるカプセル化による保守性向上が望めます。

Reactを使ったプログラム

さてこれ以降は、実際にReactを使ったプログラムを見て行きましょう。今回はHTMLファイルの中にスクリプトを書く方法を使います。

最小のサンプル

まずはReactを使ってHello Worldを書いてみます。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Hello, React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

// コンポーネントを定義
var Hello = React.createClass({
    render: function() {
        return (
            <h1>Hello, React!</h1>
        );
    },
});
// コンポーネントを描画
React.render(<Hello />, document.getElementById('content'));

  </script>
</body>

scriptタグのtype属性値が”text/jsx”となっていることに注意して下さい。

このサンプルでは、Reactプログラミングで欠かすことの出来ない２つの操作を行っています。

• コンポーネントを作る：React.createClass関数（”createClass”なのに”コンポーネントを作る”と表現しているのは大目に見て下さい）
• 画面に描画する：React.render関数

また、Helloコンポーネントのrender関数に注目して下さい。HTMLタグを直接returnしていますね。この書き方を実現しているのが、JSXというJavaScript拡張言語です。

重要な３つの機能

驚くべきことに、ReactでWebアプリケーションを作る上で必須なのはたった３つの機能です。

１．子コンポーネントに属性を指定する

コンポーネントは入れ子に出来ます。１つのコンポーネントで事が済むことはほとんど無く、いくつかのコンポーネントを組み合わせて画面を作って行くのが通常です。

なおここからのサンプルコードは、HTMLの部分が最小のサンプルと変わりません。ですのでscriptタグの中だけを記載することにします。

// 子コンポーネント
var Child = React.createClass({
    render: function() {
        return (
            <h2>{this.props.text}</h2>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child text="ここは子1です" />
                <Child text="ここは子2です" />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

ChildとParentという２つのコンポーネントを定義しています。そして親コンポーネントParentのrender関数の中でChildコンポーネントを使っています。render関数の中にはHTMLタグだけでなくコンポーネントを書くことも出来るのです。

重要な機能として、親から子に属性を通して値を渡すことが出来ます。以下の部分です。

<Child text="ここは子1です" />

Childコンポーネントにtext属性を付けています。一方、Childコンポーネントの中では次のようにしてtext属性値を使っています。

return (
    <h2>{this.props.text}</h2>
);

this.propsというオブジェクトを使うことで属性値にアクセス出来ます。

２．イベントハンドリング

コンポーネントの属性には関数を渡すことが出来ます。これを利用し、子コンポーネントのイベントを親コンポーネントでハンドリングすることが出来ます。

// 子コンポーネント
var Child = React.createClass({
    onClick: function() {
        this.props.onNowButtonClick(new Date());
    },
    render: function() {
        return (
            <div>
                <h2>{this.props.text}</h2>
                <button onClick={this.onClick}>現在時刻を通知</button>
            </div>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    handleNowButtonClick: function(pNow) {
        alert(pNow);
    },
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child onNowButtonClick={this.handleNowButtonClick} text="ここは子です" />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

親コンポーネントにはイベントをハンドリングする関数handleNowButtonClickが増えました。またChildコンポーネントの属性にイベントハンドリング関数を渡しています。

子コンポーネントは少し複雑です。まずrender関数にbuttonタグを増やしonClick属性に自身のイベントハンドラ関数onClickを渡しています。

<button onClick={this.onClick}>現在時刻を通知</button>

そして自身のイベントハンドラ関数の中で、属性に指定された関数onNowButtonClickを実行しています。

onClick: function() {
    this.props.onNowButtonClick(new Date());
}

３．状態を扱う

最後の機能は状態を扱うためのものです。次のサンプルではボタンを押す度に画面の時刻表示が変わります。

// 子コンポーネント
var Child = React.createClass({
    onClick: function() {
        this.props.onNowButtonClick(new Date());
    },
    render: function() {
        return (
            <div>
                <h2>{this.props.time.toString()}</h2>
                <button onClick={this.onClick}>現在時刻を通知</button>
            </div>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    getInitialState: function() {
        return {
            now: new Date()
        };
    },
    handleNowButtonClick: function(pNow) {
        this.setState({ now: pNow }); // ←ここが重要！状態を更新します
        alert(pNow);
    },
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child onNowButtonClick={this.handleNowButtonClick} time={this.state.now} />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

親コンポーネントにgetInitialState関数が増えています。この関数はコンポーネントの初期状態を返します。

getInitialState: function() {
    return {
        now: new Date()
    };
}

更にsetState関数を呼び出すことで状態を変更しています。

handleNowButtonClick: function(pNow) {
    this.setState({ now: pNow }); // ←ここが重要！
    alert(pNow);
}

もう１つ重要な箇所があります。子コンポーネントの属性に親コンポーネントの状態を渡しています。

<Child onNowButtonClick={this.handleNowButtonClick} time={this.state.now} />

ReactのすごいところはsetState関数を呼び出すと関連する箇所が自動で書き換わることです。プログラマはコンポーネントを定義し、render関数を書き、setState関数を呼ぶだけ。たったこれだけでWebアプリケーションがきれいに動きます。

データの更新を伴うサンプル

最後のサンプルとして、データの更新を伴う画面のコードを載せておきます。画面イメージは次のようになります。

このサンプルはHTMLも変わっていますので全文を載せます。手軽に見栄えを良くするためにBootstrapを使っています。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>ReactによるCRUDアプリ</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <style>
    body {
        padding-top: 20px;
    }
  </style>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">
// テーブルの各行となるコンポーネント
var Rows = React.createClass({
    onDataRemove: function(pIndex) {
        this.props.onDataRemove({ index: pIndex });
    },
    render: function() {
        // 各行のタグを連結
        var rows = this.props.data.map(function(e, idx) {
            return (
                <tr key={e.id}>
                    <td>{e.title}</td>
                    <td>{e.content}</td>
                    <td>
                        <button onClick={this.onDataRemove.bind(this, idx)} className="btn btn-danger">
                            <i className="glyphicon glyphicon-trash" />
                        </button>
                    </td>
                </tr>
            );
        }.bind(this));
        // tableタグを作成
        return (
            <table className="table table-striped">
                <thead>
                    <th>タイトル</th>
                    <th>内容</th>
                    <th> </th>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});
// 入力フォームコンポーネント
var Form = React.createClass({
    onAddButtonClick: function(e) {
        // React.findDOMNode関数で入力項目を得ることが出来る
        var title = React.findDOMNode(this.refs.title).value;
        var content = React.findDOMNode(this.refs.content).value;

        // データ追加をイベント通知
        this.props.onDataAdd({ id: (new Date()).getTime(), title: title, content: content });

        e.preventDefault(); // デフォルトの動作をキャンセル
    },
    render: function() {
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="title">タイトル</label>
                    <input ref="title" type="text" className="form-control" id="title" />
                </div>
                <div className="form-group">
                    <label htmlFor="content">内容</label>
                    <textarea ref="content" className="form-control" id="content" />
                </div>
                <button onClick={this.onAddButtonClick} className="btn btn-primary">追加</button>
            </form>
        );
    }
});
// ルートコンポーネント
var Root = React.createClass({
    getInitialState: function() {
        return {
            data: []
        };
    },
    handleDataAdd: function(e) {
        var data = this.state.data;
        data.push(e);
        this.setState({ data: data });
    },
    handleDataRemove: function(e) {
        var data = this.state.data;
        data.splice(e.index, 1);
        this.setState({ data: data });
    },
    render: function() {
        return (
            <div className="container">
                <Form onDataAdd={this.handleDataAdd} />
                <hr/>
                <Rows data={this.state.data} onDataRemove={this.handleDataRemove} />
            </div>
        );
    }
});
// ルートコンポーネントを画面に描画
React.render(<Root />, document.getElementById('content'));
  </script>
</body>

少し長くなりましたが、各コンポーネントの役割分担がはっきりしている上にHTMLとJavaScriptが１つのコンポーネントの中にまとまっているため、コードの見通しが良く読みやすいと思います。

またJSXのおかげでDOM操作のコードが一切現れていない点に注目して下さい。render関数にテンプレートを書いておけば、DOMを意識する必要がなくなります。

画面は常にデータに対して描画されます。ずれることはありません。またユーザの入力はsetState関数でデータに反映させることで、Reactが文字通りreact（反応）して必要な部分だけが再描画されます。

つまりReactを手にしたプログラマはデータ操作だけに集中してプログラムすれば良い、ということになります。Reactの真髄はここにあります。

実戦投入するときには

本エントリのコードはあくまでサンプルですので、実際にReactを実戦投入するときに、考慮すべきことがあります。

JSXの事前コンパイル

本エントリのコードはポータビリティを重視したため、JSXをブラウザでコンパイルしています。しかし実戦では事前にJSXをコンパイルし出力されたJavaScriptをHTMLから参照するようにするべきです。

事前コンパイルにはいくつかの方法がありますが、この解説はまたの機会に譲ることにします。

サーバサイドレンダリング

素直にReactを使っていると、HTMLの多くがJavaScriptが実行されるまで描画されないため、体感的にページの描画が遅くなります。そこでReactでは初期画面をサーバサイドでもレンダリング出来る仕組みが備わっています。

サーバサイドレンダリングの詳しい解説もまたの機会に譲ることにします。

Reactの注意点

Reactを通さずDOMを操作するのは厳禁！

これは、例えばjQueryを使ってDOMを追加／削除／変更することは厳禁！ということです。また、jQueryを通してイベントハンドラを設定することも厳禁です。これはReactが採用している「バーチャルDOM」という仕組みへの配慮です。

DOM操作というのは低速な処理です。そこでReactは、DOMを更新しなければならないときに、バーチャルDOMを使って差分を算出し、実際のDOMは最低限必要な箇所のみ更新する、ということをやっているのです。

ですので、Reactを通さずにDOMを更新してしまうと、バーチャルDOMと実際のDOMに齟齬が出来てしまい、Reactが正しくDOMを更新出来なくなってしまいます。

jQueryに慣れていればいるほど、この制限は辛いものになるでしょう。しかし一度Reactに慣れてしまうと、jQueryの手続き的なDOM操作がとても面倒かつ危険なものに思えてきます。ぜひReactを使ってみてパラダイムシフトを体感していただきたいと思います。

まとめ

覚えることが少なくとっつきやすいReact。実績も充分（何せFacebookで使われている！）です。JavaScriptにHTMLを埋め込むのが気持ち悪いと感じる方もいると思いますが、そこを乗り越えればものすごく便利に使えるライブラリです。

SPA（Single Page Application）タイプのWebアプリケーションを作るときは、ぜひ採用を検討してみて下さい。

　メニューボタンを作りたい

CSS Menu Generetor

CSS Menu Builder

CSS3 Button Generator

　グラデーションを作りたい

CSS Gradient Generator

Ultimate CSS Gradient Generator

　吹き出しボックスを作りたい

CSS ARROW PLEASE

　角丸を作りたい

CSS Border Radius Generator

　フォームデザインを作りたい

Live Tools – Form Builder

　いろいろまとめてやりたい

CSS3.0 Maker

いかがでしたか？今日は CSS デザイン時に使えるジェネレーターを独断と偏見で選んでみました。みなさんのデザイン制作の一助にしていただければ幸いです。

今日はよく使う .htaccess の処理をまとめてみます。

 URLをwwwありに統一

RewriteEngine on
RewriteCond %{HTTP_HOST} ^hoge\.jp
RewriteRule (.*) http://www.hoge.jp/$1 [R=301,L]

 URLをwwwなしに統一

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.hoge\.jp
RewriteRule (.*) http://hoge.jp/$1 [R=301,L]

 http → httpsリダイレクト(301)

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://hoge.jp/$1 [R=301,L]

 co.jp → jpリダイレクト(301)

RewriteEngine On
RewriteCond %{HTTP_HOST} ^hoge.co.jp
RewriteRule ^(.*) http://hoge.jp/$1 [R=301,L]

 Basic認証

#vim .htaccess
--------------------------
AuthUserFile     /var/www/html/.htpasswd   //絶対パス
AuthName     "IDとパスを入れてね"  //メッセージ表示
AuthType     Basic
require     valid-user
--------------------------

#htpasswd -c /var/www/html/.htpasswd hogeuser  //ユーザー名を末尾に入れる
任意のパスワードを2回入力

UserAgentにより振り分け

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android)  //iPhoneとAndroidからのアクセスを振り分け
RewriteRule ^$ /iphone/ [R]   //上記のユーザーは /iphone/ のコンテンツを見せる

 CGI実行許可

RewriteEngine on
Options +ExecCGI
AddType text/html cgi
AddHandler cgi-script cgi

いかがでしたか？簡単ではありますが、よく使う .htaccess の処理をまとめてみました。ちょっと備忘録的になりましたが、みなさんの一助になれば幸いです。

やり方は簡単です。まずはプラグイン設定画面から facebook_like を有効にします。

次に以下のファイルを開きます。

wp-content/plugins/wp-social-bookmarking-light/modules/services.php

facebook_like 関数の中の data-href= に任意のフェイスブックページ URL を入れます（15行目、16行目）

    function facebook_like()
    {
        $options = wp_social_bookmarking_light_options();
        $layout = $options['facebook_like']['layout'];
        $action = $options['facebook_like']['action'];
        $share = $options['facebook_like']['share'] ? 'true' : 'false';
        $width = $options['facebook_like']['width'];
        $locale = $options['facebook']['locale'];
        $version = $options['facebook']['version'];
        $fb_root = $options['facebook']['fb_root'] ? '<div id="fb-root"></div>' : '';
       
        if($version == "html5"){
            return $this->link_raw( $fb_root
                                    .'<div class="fb-like" '
                                    //.'data-href="'.$this->url.'" '  コメントアウトして下記入力                               
                                      .'data-href="https://www.facebook.com/pages/%E6%R3/3501101347" '
                                    .'data-layout="'.$layout.'" '
                                    .'data-action="'.$action.'" '
                                    .($width != "" ? 'data-width="'.$width.'" ' : '')
                                    .'data-share="'.$share.'" '
                                    .'data-show_faces="false" >'
                                    .'</div>');
        }

すると、いいね！の対象が、指定したフェイスブックページに変更されます↓

いかがでしたか？今日はソーシャルボタンプラグインのいいね！の対象をフェイスブックページへ変更する方法をご案内しました。WP Social Bookmarking Light はもっともメジャーなプラグインだと思いますので、プラグインをお使いの方に今回の記事が参考になれば幸いです。

ローカルで使う場合は上記公式サイトの Download から落として解凍してください。

サーバー上ですぐに使う場合は以下コマンドを実行して /css などお使いのディレクトリにファイルを入れてください。バージョンは新しくなっているかもしれないので、適宜バージョンの番号は変えてください。

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip
# unzip font-awesome-4.3.0.zip

fonts ディレクトリと css ファイルだけをドキュメントルートにコピーしてください。以下のような構成になっていれば問題ありません。

/var/www/html/fonts
/var/www/html/css/font-awesome.css
/var/www/html/css/font-awesome.min.css   //minファイルが不要であれば消してください

次は html ファイルの head タグで以下のようにしてください。

<head>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> //不要なら消し(ry
</head>

これでアイコンフォントを使えるようになりました。早速使ってみましょう。基本的な使い方は タグの中の class に使いたいアイコンを書きます。

<i class="fa fa-twitter fa-lg"></i></a>

// fa は fontawesome のクラスを表す必須記述
// fa-twitter はアイコン名　ここに使いたいアイコン名を入れて使う
// fa-lg はアイコンのサイズ指定　サイズは以下の中から指定可能

なし  ：100%
fa-lg : 133%
fa-2x : 200%
fa-3x : 300%
fa-4x : 400%
fa-5x : 500%

上記サンプルだとこのようにツイッターのアイコンが出ました。

その他のアイコンについては公式サイトのアイコン一覧を見て、指定してくださいね。

いかがでしたか？今日は画像を使わずにアイコンを導入できる Font Awesome の使い方をご紹介しました。2015年6月現在で 519個 のアイコンが使えます。アイコンフォントを提供しているサービスは他にもあるのですが、今のところ一番数が多いのはこの Font Awesome だと思います。みなさんも簡単に使えるアイコンフォントでサイトを飾ってみてくださいね。

みなさんは Jenkins を使う目的は何ですか？おそらく大多数の方は git pull → ビルド→ サーバーへデプロイ  というサイクルで使用されているのではないでしょうか。

Jenkins にはプラグインが数百とあるので他にもできることはたくさんあるのですが、レポートを出す機能を使うことでプロダクトコードの品質を高める一助になります。

 そもそもカバレッジとか静的解析レポートってなに？

カバレッジレポートというのは全体のコードに対してテストがどれくらい完了したか、テスト進捗を表すものです。
静的解析というのはソース中にバグを発生させるようなコードや、非効率な書き方がないかなどを調べて、コードを強化するためのものです。

• Cobertura (コベルトゥーラ)     ：　カバレッジレポート
• FindBugs              　        ：　静的解析レポート（バグチェック中心）
• CheckStyle                      ：　静的解析レポート（コーディング規約チェック中心）

Cobertura 画面

FindBugs 画面

ChechkStyle 画面

 早速 Jenkins のレポート機能を追加する

3つのレポートですが、Jenkins からプラグインを入れればすぐに使えるというわけではありません。まずは Mavenプロジェクトの pom.xml に以下を追記して各プラグインをインストールします。

pom.xml  ※各プラグインのバージョンは適宜変えてください

    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>cobertura-maven-plugin</artifactId>
                <configuration>
                    <formats>
                        <format>html</format>
                        <format>xml</format>
                    </formats>
                    <instrumentation>
                    </instrumentation>
                </configuration>
            </plugin>
        </plugins>
        <pluginManagement>
            <plugins>
                <plugin>
                    <groupId>org.codehaus.mojo</groupId>
                    <artifactId>cobertura-maven-plugin</artifactId>
                    <version>2.6</version>
                    <configuration>
                        <executions>
                            <execution>
                                <phase>package</phase>
                                <goals>
                                    <goal>cobertura</goal>
                                </goals>
                            </execution>
                        </executions>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-checkstyle-plugin</artifactId>
                    <version>2.14</version>
                </plugin>
                <plugin>
                    <groupId>org.codehaus.mojo</groupId>
                    <artifactId>findbugs-maven-plugin</artifactId>
                    <version>3.0.0</version>
                    <executions>
                        <execution>
                            <phase>compile</phase>
                            <goals>
                                <goal>findbugs</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
    <reporting>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>findbugs-maven-plugin</artifactId>
                <configuration>
                    <effort>Max</effort>
                    <xmlOutput>true</xmlOutput>
                </configuration>
            </plugin>
            <plugin>
              <groupId>org.apache.maven.plugins</groupId>
              <artifactId>maven-checkstyle-plugin</artifactId>
              <version>2.14</version>
              <reportSets>
                <reportSet>
                  <reports>
                    <report>checkstyle</report>
                  </reports>
                </reportSet>
              </reportSets>
            </plugin>
        </plugins>
    </reporting>

次に Jenkins の管理画面から各プラグインをインストールします。

Jenkinsトップ＞Jenkinsの管理＞プラグインの管理＞利用可能タブ＞フィルター

以下を検索してインストール

• cobertura
• findbugs
• checkstyle

 各レポート機能を有効にする

1．プロジェクトの中の「設定」からビルド方法を指定する

• ビルド＞ゴールとオプションに以下を入力
  clean cobertura:cobertura

2．プロジェクトの中の「設定」から以下を変更する

• Checkstyle警告の集計にチェック入れる
• FindBugs警告の集計にチェックを入れる
• ビルド後の処理>Cobertura カバレッジ・レポートの集計>Cobertura XMLレポート パターンに以下を入力
  **/target/site/cobertura/coverage.xml

以上でプロジェクトがビルドされるとレポートを見るリンクが現れて、ビルドに対する各レポート結果が見れるようになります。

いかがでしたか？今日は Jenkins の便利なレポート機能について導入方法をご紹介しました。個人的にオススメは FindBugs です。日本語で自分のコードの欠点がすぐに確認できるのは楽しいです。みなさんもプロダクト品質向上の一助にレポート機能を追加してみてください。

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 についても書いてみたいと思います。