hifiveのUIライブラリ、お絵かきボードの機能で拡大する部分のサイズを変更する方法です。
実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。
HTMLは前回の拡大表示をベースに、拡大する部分を設定できるテキストボックスを追加します。
JavaScriptでは拡大する部分のサイズを設定する処理を次のように書きます。
setSizeに数字を適用するだけなので、拡大/縮小ボタンのような使い方も簡単です。
デモはこちらのJSFiddleになります。ターゲットの画像によってサイズを分けるような使い方も良さそうですね。
Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。
こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はその基本的な実装方法について紹介します。
まずオブジェクトに対して eventDispatcher を追加します。これは Prototype に対して追加します。
次にそのオブジェクトのインスタンスを作ります。
この時点でインスタンスに対して addEventListener / removeEventListener が追加されています。通知を受け取るイベント名を設定し、その後実行する処理内容を記述します。
後は任意のタイミングで dispatchEvent を実行します。typeとしてイベントの名前、後は任意のハッシュキーでデータを送れます。
イベント通知は複数の関数を設定できます。イベント通知、いわゆるPubSub型であればオブジェクト側では処理した後に何の関数を呼び出すかといった意識をする必要がありません。各クラスのメソッドに追加しておくことで、オブジェクト間の通信がスムーズになることでしょう。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
JavaScriptが広く使われていく中でコーディングスタンダードが重要になってきます。一定の基準に基づいて記述していくことで全体の品質を担保できるようになっていきます。
今回は各社、各JavaScriptプロジェクトがリリースしているコーディングスタンダードについてまとめました。
民泊サービスで知られるAirbnbの作っているコーディングスタンダードです。ESLintで候補として表示されるほど標準的なコーディングスタンダードとして知られています。
airbnb/javascript: JavaScript Style Guide
JavaScriptのフレームワークであるDojoの提供しているコーディングスタンダードです。
Dojo Style Guide — The Dojo Toolkit – Reference Guide
GoogleもESLintの標準で候補として表示されます。GoogleはAngularやGWTなど多数のJavaScriptライブラリを開発しています（AngularはTypeScriptベースですが）。その知見を得るためにも使ってみると良さそうです。
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
専用のLintツールとも合わせて提供されているスタイルガイドです。セミコロンは不要としていたり、インデントはスペース2つ、キーワードの後はスペースを付けるなどルールが明確にまとまっています。
jQueryのコーディングスタンダードです。歴史の長いライブラリだけに、その品質を一定化するためにコーディングスタンダードがまとまっています。長期的にJavaScriptをメンテナンスしていくためにも参考にすべきではないでしょうか。
JavaScript Style Guide | Contribute to jQuery
Mozillaの提供するコーディングスタンダードです。なお、これはJavaScriptだけでなくCやPythonなど他の言語を記述する際の規定も含まれています。Mozillaのコードにコントリビュートする上での規約と言えます。
Mozilla コーディングスタイルガイド – Mozilla | MDN
Node.jsのコーディングスタンダードです。正しいコードと間違った書き方がまとまっており、どう書くべきかが分かりやすくなっています。定数の書き方なども指定されているので他の人が見たときにも分かりやすいコードになるでしょう。
有名なところとしてはAirbnb、Google、jQueryになるかと思います。こうしたコーディングスタンダードを自社でまとめると理由付けなどが大変なところもあり、他社のものをベースにしながら自社のオリジナルを出していくのが良いかと思います。
特にESLintなどのLintツールに対応した形でコーディングスタンダードがまとめられると使いやすくなるでしょう。単純な明文化より、チェックするツールと連携しているのが大事です。
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はクラス変数の使い方について紹介します。
ベースになるクラスは id というフィールドを持っていることとします。このidはクラス変数として定義された値を返します。
インスタンスが作られる度に id がインクリメントされていきます。そのため、この HelloClass のインスタンスが呼ばれる度にインスタンスのidの値が変わる仕組みです。
そして、このidはクラス変数として定義していますので、インスタンス全体で共通管理されます。例えばあるインスタンスでidを書き換えてみます。
そうすると、別なインスタンスの値も書き換わります。
この id はクラス内のスコープで管理される変数なので、書き換える仕組みを用意しなければ外部から書き換えられることなく安全に利用できるようになります。目的に応じて使ってみてください。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
変数のスコープを適切に管理すれば、クラス設計とその利用がより簡単になることでしょう。ぜひhifiveのクラスモジュールを使いこなしてください。
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回は親クラスの取得方法について紹介します。
クラスや親クラスとしてAnimalClass、それらを継承するDogClassがあることとします。
DogClassの親クラスを取得するには getParentClass メソッドを実行します。
この返却されるクラスはAnimalClassと同じものになります。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
継承している中で親クラスが何であるかを指定するケースはよくあります。そうした時には getParentClass メソッドを活用してください。
PitaliumはWebブラウザを自動操作し、撮影したスクリーンショットを使って前回撮影した時と差分がないかチェックするテストツールです。DOM比較などに比べて手軽に使え、デザイン崩れもチェックできます。
そんなPitaliumの画像比較処理だけを取り出す方法を紹介します。
必要なライブラリは以下の通りです。
これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。
参考のコードは次のようになります。二つの画像をCLIの引数として受け取り、差分があった場合はPNGとして差分を出力します。このファイルを diff.java とします。
コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。
実行時には slf4j をクラスパスに追加して実行する必要があります。
今回のファイルは以下の二つです。
実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。
このようにしてPitalium独自の画像出力機能だけを利用できます。スクリーンショット以外の用途でも使えると思いますので、皆さんの開発に役立ててください。
Pitalium(hifiveリグレッションテストライブラリ) – hifive
Pitaliumではスクリーンショットを撮影して、二つの画像を比較することで更新された部分があるかどうかをチェックします。しかし画像だけでの比較の場合、バナーであったりソーシャル系の情報は利用したユーザやタイミングによって情報が異なるために毎回差分が出てしまいます。
そこで使いたいのがチェック対象外にする設定です。この手の仕組みとして良く行われるのが除外領域を黒く塗りつぶすといった方法なのですが、Pitaliumでは除外したい部分の透明度を変更すればOKです。
必要なライブラリは以下の通りです。
これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。
テストコードは次のようになります。
注意点としては比較時のオプションです。 CompareOptionType.IGNORE_CLEAR_PIXELS を使います。
コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。
実行時には slf4j をクラスパスに追加して実行する必要があります。
今回のファイルは以下の二つです。
二つ目の画像の右側のアイコンだけ透明度を変更しています。
実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。右の部分は色が明らかに違いますが、差分から除外されているのが分かるかと思います。
このようにして二つの画像から一部を除いた比較も簡単にできます。ぜひ皆さんの開発に役立ててください。
Pitalium(hifiveリグレッションテストライブラリ) – hifive
Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。
こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はイベントの動的な追加および削除の方法について紹介します。
まずは基本的な処理について紹介します。
次にイベント処理を定義します。これを関数にしておくのがコツです。
そしてこの関数をイベント通知に追加します。
逆に削除する時にも関数を指定します。そのため処理を無名関数ではなく、関数化しておく必要があります。
addEventListenerを使ってイベントを購読し、removeEventListenerを使ってイベントの購読を解除します。その際、関数を指定する必要がありますので購読に使った関数をオブジェクトとして指定できる状態になっていなければなりません。無名関数では難しいのでご注意ください。
今回のコードはJSFiddleにアップロードされていますので実装時に参照してください。
イベント：非DOM要素(JavaScriptオブジェクト)でのイベントの使用 – hifive
9月23日、東京電機大学にてHTML5 Conference 2017が開催されました。1,600人以上の技術者が集まり、多くのセッションが開かれるHTML5に関する日本最大の開発者向けカンファレンスになります。
今回、その最後のスペシャルセッション（ライトニングトーク大会）にてhifive/Pitalium両方のお話をさせてもらいました。
まずはhifive開発チームの石川よりPitaliumを含むビジュアルテスティングの話をしました。ビジュアルテスティングというのはその名の通り、見た目のテストになります。HTML5であれば特にWebブラウザに表示されている内容を比較する（以前を真として今回をテストする）ものになります。
ビジュアルテスティングを行うツールはPitaliumだけでなく、 Applitools Eyes/SI Toolkit for Web Testing/reg-suitなどがあります。それぞれ異なる特徴がありますので、ぜひお試しください。
続いて、hifiveエヴァンジェリストの中津川よりhifiveの紹介とエンタープライズにおけるシステム開発の悩みを紹介しました。すでにサポートが終了したブラウザでさえ、現場では今なお現役として使われています。そうした中でもHTML5を使った高度なビジュアル化が求められています。
そうした時に使えるのがhifiveです。特に企業では5〜10年システムが動き続けるのが当たり前であり、そうした環境下においても安心して使ってもらえるようになっています。こちらもぜひお試しください。
HTML5 CoferenceはWeb技術が多数集まり、枯れたものから最新のテクノロジーまで様々な技術が紹介されます。Webの進化はとても早いので、こういった場でキャッチアップするのが大切です。皆さんもぜひ参加してください。
HTML5の新しいAPIの中でも特に先進的なAPIがWeb Bluetoothです。Google Chrome60以降、Androidのブラウザでも56以降でしかサポートされていないAPIになります。しかしWebブラウザがBluetooth通信をサポートする各種デバイスと通信できることで様々な使い道が考えられます。
今回はそんなWeb Bluetoothの簡単な使い方を紹介します。
Web Bluetoothを扱う場合にはPromise処理が連続して行われます。例えば今回はバッテリーレベルを取得します。
まずWeb Bluetoothをサポートしているかどうかは navigator.bluetooth の有無で判定します。
次にバッテリーサービス（battery_service）をサポートしているデバイスを探します。
この時点でGoogle ChromeにBluetoothデバイスを一覧するダイアログが表示されます。この中から接続したいデバイスを選択します。
接続がうまくいくとデバイス情報が返ってきますので、接続の認証処理を行います。
接続がうまくいったら、バッテリーサービスを取得します。
さらにバッテリーサービスからデータを読み書きするためのキャラクタリステックを取得します。
キャラクタリステックが取得できたら、そのデータを読み取ります。
最後に読み取ったデータを数値に変換して完了です。
そうするとログメッセージが表示されます。
エラーが出た場合にはcatchメソッドを用意しておけば、そこがコールされます。データの読み取りについてはとても簡単にできます。Bluetoothには提供するサービス（プロファイル）が多数あり、それによって実装方法も異なってきますので注意してください。
バッテリーサービスについてはWeb Bluetooth / Battery Level Sampleにて確認できます。また、AndroidアプリのBLE Peripheral Simulatorを使うことで可変できるバッテリー情報を送信できます。お試しください。
Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。
そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。
最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。
SideeX (An Extended Version of Selenium IDE)
Seleniumのテストコード（Ruby/Python）を出力できるレコーダーです。表示値の検証もできます。If/Whileといった構文を入れることもできますが、再生機能はないようです。
arakawamoriyuki/selenium-code-builder: chrome extension
Node.jsベースになっており、実行するとGoogle Chromeが立ち上がります。そして、操作を行って終了するとmochaベースのテストコードが生成されます。操作中にJavaScriptを実行できるなど、カスタマイズ性は高いです。
UI Recorder | UI Recorder is a UI test case recorder like Selenium IDE.
Google Chrome用の機能拡張です。操作を記録して再生できます。テストコードの出力はできませんが、JSON/XMLによるエクスポートに対応しています。JSONからテストを自動生成するのであればKantu Browser Automationがベースにできそうです。
Kantu Browser Automation – Chrome ウェブストア
元祖のSelenium IDEです。最新版のFirefoxでは動作しませんが、Firefox ESR版を使えば2018年06月26日までサポートされることになります。それまでにSideeXがSelenium IDEレベルの機能を実装してくれるのがベストでしょう。
Selenium IDE :: Firefox 向けアドオン
Selenium IDEがなくなったことで、類似ソフトウェアが続々と出てきています。まだSelenium IDEをまるっと置き換えることはできませんが、幾つかのニーズには応えられるレベルかと思います。ぜひ試してみてください。
画像の切り替え処理によく使われるのがカルーセルです。横並べにした画像を差し替えながら表示したり、ユーザのクリック操作で切り替えられるものもあります。スマートフォン対応のものはタッチ操作で動かせるようになっています。
今回はそんなカルーセルライブラリをまとめて紹介します。
左右のDOMが若干斜めになっているのが特徴的です。切り替わる際には斜めのままスライドして中央で水平な向きに変わるアニメーションとなっています。ここは好き嫌いが分かれそうです。レスポンシブ対応になっています。
Glide.js | Simple, responsive and fast jquery carousel slider
とてもシンプルなカルーセルです。imgタグを並べておいて、それをJavaScriptのイベントで差し替えます。スライドを動的に追加したり、削除もできるようになっています。依存ライブラリがないのが大きなポイントです。
Siema – Lightweight and simple carousel with no dependencies
横向きの切り替えだけでなく、縦にも切り替えられるようになっています。さらにスライドの切り替え時に縦横に動くだけでなく、フェードイン/アウトさせることもできます。ループする、しないなど細かく制御できます。
Unslider, the simplest carousel slider for jQuery
jQueryプラグインのカルーセルです。JavaScriptでのスライド切り替えだけでなく、CSS3を使うこともできます。コンテンツはあらかじめ用意する他、Ajaxで取得も可能です。デザインはレスポンシブです。
jCarousel – Riding carousels with jQuery
モバイル対応が特徴となっていますが、スライドの切り替わるアニメーションにも注目して欲しいソフトウェアです。エフェクトが3Dで切り替わるのが格好良いです。前後のスライドは斜めになっていますが、中央へ移動する際のアニメーションも滑らかです。
Swiper – Most Modern Mobile Touch Slider
一つ一つ切り替える他、まとめて複数のスライドを切り替える機能もあります。さらに幅や高さが異なるスライドが混在する場合にも利用できます。中央にあるスライドだけ若干大きく表示することもできます。画像の遅延読み込みもできるなど、とても多機能なカルーセルです。
slick – the last carousel you’ll ever need
現在のスライドが若干動きながら表示されるのが効果的なカルーセルです。スライドよりも写真を表示するのに向いているでしょう。どのようにアニメーションするか（ズームや右への動きなど）指定できます。
横または縦方向のカルーセルが作れます。パララックスにも対応しており、スライドと背景の動きをずらしながら表示するという効果的な表現もできます。
カルーセルは製品の説明であったり、チュートリアルなど様々な場面で利用できます。ライブラリによって特徴が異なるので、それぞれ把握しておくとぴったり利用できる場面が見つかるでしょう。
ぜひ皆さんのプロジェクトでお役立てください。
Pitaliumはスクリーンショットを比較することでデザインの乱れや予期せぬ表示になるのを発見できます。肝になるのは画像の比較になるでしょう。
今回はPitalium同様に画像比較を行うライブラリを紹介します。
二つの画像を重ねて表示し、スライダを使って表示範囲を変更できるライブラリです。色が変わっていたり、加工前/加工後の画像を並べて比較する際に利用できます。
sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images
jQuery CompareWYWも二つの画像を重ねて表示するタイプのライブラリです。jQueryプラグインなので利用できる場面が多いかと思います。この手のライブラリの肝としては、画像サイズが全く同じであるという点が挙げられます。
モバイルにも対応したスライダーです。スライダーのツマミが大きいためか、片方に寄せきることはできません。使い方に関する解説記事もあります。
CSS and jQuery Image Comparison Slider | CodyHouse
node.jsで動きます。二つの画像の差分となる画像を生成します。見た目では殆ど分からないような違いを発見するのに役立つでしょう。
reg-viz/reg-cli: 
Visual regression test tool.
Webブラウザ上で二つの画像の比較ができます。どこが異なっているのか、差分となる画像が生成されるのですぐに分かるでしょう。
Huddle/Resemble.js: Image analysis and comparison
二つの画像を比較して差分になる画像を生成します。違う部分だけを抽出したり、背景の透明部分を無視する、画像サイズの違う場合も比較できるといった特徴があります。
一言で画像比較といっても様々なやり方があります。見いだしたい情報によって最適な比較方法があるでしょう。Pitaliumにおいても様々な比較を通じてスクリーンショットが異なる部分を抽出できます。
ぜひこれらのライブラリを使って最適な画像比較方法を用意してください。
Pitalium(hifiveリグレッションテストライブラリ) – hifive
Webアプリケーションにおいて、ファイルを操作したいというニーズが発生するのは少なくありません。ローカルで扱うようにWebサーバ上にあるファイルを扱えると便利です。
今回はそんな時に使えるライブラリを紹介します。ユーザ体験を向上させるのに使えるでしょう。
ファイル検索機能、ファイルの新規作成/コピー/移動/削除、GitやSubversionなどのコマンドを実行できます。依存性がなく、単体で動作します。ユーザ管理機能を備えていますので、ユーザ毎のフォルダを作成することもできます。
File Manager
jQueryプラグインとして作られています。フォルダやファイルによってアイコンが違うようになっています。ファイルが実際に存在しなくとも、Web上で仮想的にフォルダ/ファイル表示を行うのに使えます。
Webベースとしては珍しい二画面ファイラーとなっています。キーボードショートカットも多数用意されていますので、プログラマなどがファイルを素早く操作するのに向いています。
ファイルサーバをWeb化するソフトウェアです。ファイル管理だけでなく、マインドマップ機能もあります。また、Dropbox風のクライアントソフトウェアがあり、それを使うことでファイルの同期も可能です。
tshannon / freehold — Bitbucket
Ajaxによるファイルブラウザです。UIはエクスプローラーライクになっています。ダブルクリックすると関連するアプリケーションで開きます。コンテクストメニューも実装されており、本格的なファイル管理が可能です。
アイコンとリスト表示がサポートされています。画像やHTMLであればプレビュー機能が実装されています。HTML5のFile APIを体験できるソフトウェアになっています。
フォルダやファイル操作を実装するのは大変ですが、ライブラリを使うことでUIを簡単に実現できます。後はAjaxなどでデータをサーバに送り、実際にそのようにファイルを動かせば良いでしょう。もちろんデータベースを仮想的にファイルシステム風に見せるのも良さそうです。
hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の日付に対してラベルをつける方法です。
動作している様子は次のようになります。また、こちらでデモを確認できます。
HTML側ではラベルに使う文字列と、イベントを実行するボタンを配置します。
JavaScript側の実装です。this.calendarController.setTooltip を使って、日付と表示するラベルを指定します。
全体のJavaScriptは次のようになります。
覚えておくべき日付を説明とともに表示したり、データベースから日付データをカレンダーに載せるような使い方が考えられます。カレンダーは業務システムでもよく使われますのでhifiveのカレンダーコンポーネントを使いこなしてください。
HTMLのドロップダウンリストはよく使われるUIコンポーネントです。しかし標準のデザインでは使い勝手が良いとは言えません。一つ選択する際にも長くスクロールしなければならなかったり、複数選択では途中で解除されてしまったりします。
そこで今回はドロップダウンリストを便利にしてくれるライブラリを紹介します。
フィルタリング機能、複数選択対応、選択済みアイテムのハイライト表示、グルーピングなど多機能にしてくれます。左寄せだけでなく、右寄せにもできます。
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
複数選択のドロップダウンリストにチェックボックスが追加されます。常にキーを押しておく必要がなくなるので便利です。
<select> element and displays them at the top of the list
最近選んだ項目を上に表示してくれます。地味な機能ですが、同じフォームを何度も使う機会がある場合に便利です。
複数選択可能なドロップダウンがかなり大きくなります。選択するとグレーアウトし、選択項目が右側に移る仕組みになっています。
ドロップダウンの項目にアイコンと説明書きが付けられます。かなり派手な表示になるので、用途は限られるかも知れませんが便利なライブラリです。
ddSlick – a jQuery plugin for custom drop down with images
クリックすると表示状態を維持してくれるようになり、複数選択もキーボードの補助なしでサポートされます。選択された項目はカンマ区切りで並べて表示されます。
matrushka/Dropp: A replacement for html dropdowns
使い勝手の悪い機能でもJavaScriptの力で一気に便利に変身させられます。業務においても使い勝手の悪いまま使うよりもよっぽど生産性が向上するでしょう。UIが大きく変わるので操作性に慣れる必要がありますが、一度慣れてしまえば手放せないライブラリになりそうです。
ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。
そこで今回は人気のプログラミングエディタ、Visual Studio CodeとESLintを組み合わせた使い方について紹介します。
Visual Studio Codeでは多数のプラグインを提供しています。その中でもESLintで使うのはESLint – Visual Studio Marketplaceになります。これをVisual Studio Codeのプラグインインストーラーからインストールします。
このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。
プロジェクト以下でだけ使う場合には次のようになるでしょう。
幾つかの設定があります。今回は主なものについて紹介します。
後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い波線があるところがチェックに引っかかった部分になります。そして、マウスオーバーで指摘事項が表示されます。
eslint.autoFixOnSave が有効になっていると保存時、自動的にエラーを修正してくれます（修正できないエラーもあります）。
基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージを見て修正していくのですが、Atomのように詳細ページへのリンクがないので分かりづらい指摘の時にどう修正すべきかが分からないかも知れません。
JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Visual Studio Codeを使っている方はぜひESLintを使ってみましょう。
Pitaliumはこれまでjarファイルをダウンロードして自分でセットアップする必要がありましたが、先日Mavenのリポジトリに登録されました！これで導入の手間が大幅に軽減されるはずです。
そこで今回はごく基本的なPitalium導入法に加えて、Dockerを使ってSelenium Hub/Nodeを簡単に組み合わせる方法を紹介します。
まず以下の環境はあることとします。
Dockerはすでにインストールされている前提とします。Selenium Hub/NodeはDockerコンテナイメージのサイズが大きいので、ダウンロードに時間がかかります。そこで、とりあえず実行しておきます。
これでどちらも実行されればSelenium Hub/Nodeが立ち上がって、Chromeが使える状態になります。
最低限のディレクトリ構成は次のようになります。
capabilities.jsonはHubのブラウザ設定を記述しますが、この時点ではChromeのみなので次のようになります。IEやFirefoxなど必要に応じて追加してください。
build.gradleは次のようになります。ここでPitaliumを指定するだけです。
SampleTest.javaは今回は次のように記述しました。03.基本的なテストコードの書き方 – hifiveのままですが、Dockerで立ち上がるChromeは英語版になっていますので、アクセス先を日本語版指定としています。
後はテストを実行するだけです。
しばらく待つと結果が表示されます。
そしてJUnitのファイルも生成されています。
Pitaliumのテストファイルも生成され、スクリーンショットも保存されています。
Dockerコンテナイメージがダウンロードできるまでに若干の時間がかかりますが、それさえ終われば環境を整えるのはとても簡単です。ぜひPitaliumを使ってWebブラウザベースのビジュアルテスティングを推進してください！
外部のWebサイトのスクリーンショットが必要になるケースはよくありますが、その中でもWebサイト全体が撮れるものを紹介します。サムネイルであったり、サイズ指定ができるものは多いですが、高さが不定であるWebサイトをきちんと撮れるものはそう多くないようです。
独自のCSSを追加したり、viewportの設定、撮影したスクリーンショットをFTPやAmaozon S3へアップロードすることも自由に指定できます。画像フォーマットはPNG、JPEGそしてGIFとなっています。
screenshotlayer API | Free, Powerful Screenshot API
Google Chromeを使っているという点がユニークなポイントとして挙げています。Chromeであれば、新しい技術にも追従できるのは利点でしょう。Viewportの指定や撮影を遅延させるといったこともできます。なお、日本語は文字化けするようです。
Website screenshot and thumbnails API | ApiLeap
Retinaにも対応し、独自CSSルールの指定もできます。viewportの指定も可能です。SVGやES6にも対応していますので、Chromeなどのブラウザがレンダリングエンジンに使われているようです。日本語にも対応しています。
フルサイズ、サムネイルの画像が取得でき、結果はJSON/XMLで返ってきます。なお、有効期限が設定されていますので、期限が切れると画像がなくなるようです。
フルサイズの場合は縦のサイズを0と指定すれば良いようです。キャッシュの有効期限はWeb APIを通して指定できます。基本的には画像が返ってきますが、JSONやXMLによるレスポンス取得も可能です。
Free Online Website Screenshot Tool – Snapito by ShrinkTheWeb
日本語にも対応しています。JPEG、PNGといった画像の他、PDFやTIFF、SVGなど様々なフォーマットで取得できます。ブックマークレットはありますが、Web APIでの提供ではないようです。
Web-capture – Online full length web site screenshots for free
レスポンシブWebデザインに対応しています。さらにFlashやWebFontにも対応していますので、幅広いWebサイトでスクリーンショットが保存できます。日本語も利用可能です。
Best Automated Screenshot API | Urlbox.io
日本語も使えます。viewport指定も可能で、ユーザエージェントやデフォルトの言語もカスタマイズできます。さらに撮影タイミングを指定することや、カスタムCSSも指定可能です。
URL2PNG – Screenshots as a Service
他のプログラミング（テストなど）と組み合わせるのを前提としたスクリーンショットAPIを提供しています。DOMを指定して一部分だけ画像取得することもできます。ヘッダーの変更やCookieの指定、JavaScriptの実行など、細かくカスタマイズしたスクリーンショット取得が可能です。
スクリーンショットの利用目的は様々です。Pitaliumのようにビジュアルテストで使ったり、ヘルプドキュメントに利用することもあるでしょう。テストでの利用においては縦長ですべてのコンテンツが撮れなければならないので、今回紹介したようなライブラリが役立つはずです。
hifiveを使って作られたWebアプリケーション（デモ）の紹介です。業務システムでよくあるダッシュボードのサンプルになります。
mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive
ダッシュボードサンプルは以下の技術を使って作られています。
まずGitリポジトリをクローンします。
さらに npm で必要なライブラリをインストールします。
後はWebサーバを立ち上げます。
これで http://localhost:8080 としてダッシュボードが立ち上がります。
ダッシュボードサンプルは主に3つのパートに分かれています。
すべてデータはリアルタイムに書き換えられるようになっています。表示して完了するダッシュボードではなく、表示したまま最新の情報が分かる仕組みです。
このコードを参考にすれば、高機能な管理者向けダッシュボード画面を作れるはずです。hifiveを使っていますのでメンテナンスしやすく、中長期的な運用にも耐えられるでしょう。
mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive