hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の日付に対してラベルをつける方法です。
動作している様子は次のようになります。また、こちらでデモを確認できます。
作り方
HTMLの記述
HTML側ではラベルに使う文字列と、イベントを実行するボタンを配置します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"></div> | |
| <p> | |
| <input type="text" id="txtContentDate" size="40" /> | |
| <input type="button" id="btnSetTextDate" value="設定"> | |
| </p> |
JavaScriptの実装
JavaScript側の実装です。this.calendarController.setTooltip を使って、日付と表示するラベルを指定します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#btnSetTextDate click': function(){ | |
| var dates = this.calendarController.getSelectedDate(); | |
| var data = this.$find('#txtContentDate').val(); | |
| for (var i=0; i<dates.length; i++) { | |
| this.calendarController.setTooltip(dates[i], data); | |
| } | |
| } |
全体のJavaScriptは次のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var mainController = { | |
| __name : 'h5.ui.container.MainController', | |
| calendarController: h5.ui.components.Calendar, | |
| __meta : { | |
| calendarController: { | |
| rootElement: '#container' | |
| }, | |
| }, | |
| __init: function(){ | |
| this.$find(".select:first").attr("checked", true); | |
| }, | |
| '#btnSetTextDate click': function(){ | |
| var dates = this.calendarController.getSelectedDate(); | |
| var data = this.$find('#txtContentDate').val(); | |
| for (var i=0; i<dates.length; i++) { | |
| this.calendarController.setTooltip(dates[i], data); | |
| } | |
| } | |
| }; | |
| h5.core.controller('body', mainController); | |
| }); |
覚えておくべき日付を説明とともに表示したり、データベースから日付データをカレンダーに載せるような使い方が考えられます。カレンダーは業務システムでもよく使われますのでhifiveのカレンダーコンポーネントを使いこなしてください。
Webアプリケーションにおいて、ファイルを操作したいというニーズが発生するのは少なくありません。ローカルで扱うようにWebサーバ上にあるファイルを扱えると便利です。
今回はそんな時に使えるライブラリを紹介します。ユーザ体験を向上させるのに使えるでしょう。
File Manager
ファイル検索機能、ファイルの新規作成/コピー/移動/削除、GitやSubversionなどのコマンドを実行できます。依存性がなく、単体で動作します。ユーザ管理機能を備えていますので、ユーザ毎のフォルダを作成することもできます。
File Manager
jQuery File Browser demo
jQueryプラグインとして作られています。フォルダやファイルによってアイコンが違うようになっています。ファイルが実際に存在しなくとも、Web上で仮想的にフォルダ/ファイル表示を行うのに使えます。
Cloud Commander
Webベースとしては珍しい二画面ファイラーとなっています。キーボードショートカットも多数用意されていますので、プログラマなどがファイルを素早く操作するのに向いています。
tshannon / freehold — Bitbucket
ファイルサーバをWeb化するソフトウェアです。ファイル管理だけでなく、マインドマップ機能もあります。また、Dropbox風のクライアントソフトウェアがあり、それを使うことでファイルの同期も可能です。
tshannon / freehold — Bitbucket
AJAX File Browser Demo
Ajaxによるファイルブラウザです。UIはエクスプローラーライクになっています。ダブルクリックすると関連するアプリケーションで開きます。コンテクストメニューも実装されており、本格的なファイル管理が可能です。
ebidel/filer.js: A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.
アイコンとリスト表示がサポートされています。画像やHTMLであればプレビュー機能が実装されています。HTML5のFile APIを体験できるソフトウェアになっています。
フォルダやファイル操作を実装するのは大変ですが、ライブラリを使うことでUIを簡単に実現できます。後はAjaxなどでデータをサーバに送り、実際にそのようにファイルを動かせば良いでしょう。もちろんデータベースを仮想的にファイルシステム風に見せるのも良さそうです。
Pitaliumはスクリーンショットを比較することでデザインの乱れや予期せぬ表示になるのを発見できます。肝になるのは画像の比較になるでしょう。
今回はPitalium同様に画像比較を行うライブラリを紹介します。
jQuery Images Compare
二つの画像を重ねて表示し、スライダを使って表示範囲を変更できるライブラリです。色が変わっていたり、加工前/加工後の画像を並べて比較する際に利用できます。
sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images
jQuery CompareWYW
jQuery CompareWYWも二つの画像を重ねて表示するタイプのライブラリです。jQueryプラグインなので利用できる場面が多いかと思います。この手のライブラリの肝としては、画像サイズが全く同じであるという点が挙げられます。
CSS and jQuery Image Comparison Slider | CodyHouse
モバイルにも対応したスライダーです。スライダーのツマミが大きいためか、片方に寄せきることはできません。使い方に関する解説記事もあります。
CSS and jQuery Image Comparison Slider | CodyHouse
reg-cli
node.jsで動きます。二つの画像の差分となる画像を生成します。見た目では殆ど分からないような違いを発見するのに役立つでしょう。
reg-viz/reg-cli: 📷 Visual regression test tool.
Resemble.js
Webブラウザ上で二つの画像の比較ができます。どこが異なっているのか、差分となる画像が生成されるのですぐに分かるでしょう。
Huddle/Resemble.js: Image analysis and comparison
js-imagediff
二つの画像を比較して差分になる画像を生成します。違う部分だけを抽出したり、背景の透明部分を無視する、画像サイズの違う場合も比較できるといった特徴があります。
一言で画像比較といっても様々なやり方があります。見いだしたい情報によって最適な比較方法があるでしょう。Pitaliumにおいても様々な比較を通じてスクリーンショットが異なる部分を抽出できます。
ぜひこれらのライブラリを使って最適な画像比較方法を用意してください。
画像の切り替え処理によく使われるのがカルーセルです。横並べにした画像を差し替えながら表示したり、ユーザのクリック操作で切り替えられるものもあります。スマートフォン対応のものはタッチ操作で動かせるようになっています。
今回はそんなカルーセルライブラリをまとめて紹介します。
Glide.js | Simple, responsive and fast jquery carousel slider
左右のDOMが若干斜めになっているのが特徴的です。切り替わる際には斜めのままスライドして中央で水平な向きに変わるアニメーションとなっています。ここは好き嫌いが分かれそうです。レスポンシブ対応になっています。
Glide.js | Simple, responsive and fast jquery carousel slider
Siema – Lightweight and simple carousel with no dependencies
とてもシンプルなカルーセルです。imgタグを並べておいて、それをJavaScriptのイベントで差し替えます。スライドを動的に追加したり、削除もできるようになっています。依存ライブラリがないのが大きなポイントです。
Siema – Lightweight and simple carousel with no dependencies
Unslider, the simplest carousel slider for jQuery
横向きの切り替えだけでなく、縦にも切り替えられるようになっています。さらにスライドの切り替え時に縦横に動くだけでなく、フェードイン/アウトさせることもできます。ループする、しないなど細かく制御できます。
Unslider, the simplest carousel slider for jQuery
jCarousel – Riding carousels with jQuery
jQueryプラグインのカルーセルです。JavaScriptでのスライド切り替えだけでなく、CSS3を使うこともできます。コンテンツはあらかじめ用意する他、Ajaxで取得も可能です。デザインはレスポンシブです。
jCarousel – Riding carousels with jQuery
Swiper – Most Modern Mobile Touch Slider
モバイル対応が特徴となっていますが、スライドの切り替わるアニメーションにも注目して欲しいソフトウェアです。エフェクトが3Dで切り替わるのが格好良いです。前後のスライドは斜めになっていますが、中央へ移動する際のアニメーションも滑らかです。
Swiper – Most Modern Mobile Touch Slider
slick – the last carousel you’ll ever need
一つ一つ切り替える他、まとめて複数のスライドを切り替える機能もあります。さらに幅や高さが異なるスライドが混在する場合にも利用できます。中央にあるスライドだけ若干大きく表示することもできます。画像の遅延読み込みもできるなど、とても多機能なカルーセルです。
slick – the last carousel you’ll ever need
Smoothslides Demo
現在のスライドが若干動きながら表示されるのが効果的なカルーセルです。スライドよりも写真を表示するのに向いているでしょう。どのようにアニメーションするか（ズームや右への動きなど）指定できます。
Sly
横または縦方向のカルーセルが作れます。パララックスにも対応しており、スライドと背景の動きをずらしながら表示するという効果的な表現もできます。
カルーセルは製品の説明であったり、チュートリアルなど様々な場面で利用できます。ライブラリによって特徴が異なるので、それぞれ把握しておくとぴったり利用できる場面が見つかるでしょう。
ぜひ皆さんのプロジェクトでお役立てください。
Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。
そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。
SideeX (An Extended Version of Selenium IDE)
最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。
SideeX (An Extended Version of Selenium IDE)
Selenium Code Builder
Seleniumのテストコード（Ruby/Python）を出力できるレコーダーです。表示値の検証もできます。If/Whileといった構文を入れることもできますが、再生機能はないようです。
arakawamoriyuki/selenium-code-builder: chrome extension
UI Recorder
Node.jsベースになっており、実行するとGoogle Chromeが立ち上がります。そして、操作を行って終了するとmochaベースのテストコードが生成されます。操作中にJavaScriptを実行できるなど、カスタマイズ性は高いです。
UI Recorder | UI Recorder is a UI test case recorder like Selenium IDE.
Kantu Browser Automation
Google Chrome用の機能拡張です。操作を記録して再生できます。テストコードの出力はできませんが、JSON/XMLによるエクスポートに対応しています。JSONからテストを自動生成するのであればKantu Browser Automationがベースにできそうです。
Kantu Browser Automation – Chrome ウェブストア
Selenium IDE
元祖のSelenium IDEです。最新版のFirefoxでは動作しませんが、Firefox ESR版を使えば2018年06月26日までサポートされることになります。それまでにSideeXがSelenium IDEレベルの機能を実装してくれるのがベストでしょう。
Selenium IDE :: Firefox 向けアドオン
Selenium IDEがなくなったことで、類似ソフトウェアが続々と出てきています。まだSelenium IDEをまるっと置き換えることはできませんが、幾つかのニーズには応えられるレベルかと思います。ぜひ試してみてください。
HTML5の新しいAPIの中でも特に先進的なAPIがWeb Bluetoothです。Google Chrome60以降、Androidのブラウザでも56以降でしかサポートされていないAPIになります。しかしWebブラウザがBluetooth通信をサポートする各種デバイスと通信できることで様々な使い道が考えられます。
今回はそんなWeb Bluetoothの簡単な使い方を紹介します。
コードについて
Web Bluetoothを扱う場合にはPromise処理が連続して行われます。例えば今回はバッテリーレベルを取得します。
まずWeb Bluetoothをサポートしているかどうかは navigator.bluetooth の有無で判定します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| navigator.bluetooth |
次にバッテリーサービス（battery_service）をサポートしているデバイスを探します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| navigator.bluetooth.requestDevice({ | |
| filters: [{ | |
| services: ['battery_service'] | |
| }]}) |
この時点でGoogle ChromeにBluetoothデバイスを一覧するダイアログが表示されます。この中から接続したいデバイスを選択します。
接続がうまくいくとデバイス情報が返ってきますので、接続の認証処理を行います。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(device => { | |
| return device.gatt.connect(); | |
| }) |
接続がうまくいったら、バッテリーサービスを取得します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(server => { | |
| return server.getPrimaryService('battery_service'); | |
| }) |
さらにバッテリーサービスからデータを読み書きするためのキャラクタリステックを取得します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(service => { | |
| return service.getCharacteristic('battery_level'); | |
| }) |
キャラクタリステックが取得できたら、そのデータを読み取ります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(characteristic => { | |
| return characteristic.readValue(); | |
| }) |
最後に読み取ったデータを数値に変換して完了です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .then(value => { | |
| let batteryLevel = value.getUint8(0); | |
| console.log(`> バッテリーレベルは${batteryLevel}%です`); | |
| }) |
そうするとログメッセージが表示されます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| > バッテリーレベルは46%です |
エラーが出た場合にはcatchメソッドを用意しておけば、そこがコールされます。データの読み取りについてはとても簡単にできます。Bluetoothには提供するサービス（プロファイル）が多数あり、それによって実装方法も異なってきますので注意してください。
バッテリーサービスについてはWeb Bluetooth / Battery Level Sampleにて確認できます。また、AndroidアプリのBLE Peripheral Simulatorを使うことで可変できるバッテリー情報を送信できます。お試しください。
9月23日、東京電機大学にてHTML5 Conference 2017が開催されました。1,600人以上の技術者が集まり、多くのセッションが開かれるHTML5に関する日本最大の開発者向けカンファレンスになります。
今回、その最後のスペシャルセッション（ライトニングトーク大会）にてhifive/Pitalium両方のお話をさせてもらいました。
5分でわかるVISUAL TESTING FOR HTML5
まずはhifive開発チームの石川よりPitaliumを含むビジュアルテスティングの話をしました。ビジュアルテスティングというのはその名の通り、見た目のテストになります。HTML5であれば特にWebブラウザに表示されている内容を比較する（以前を真として今回をテストする）ものになります。
ビジュアルテスティングを行うツールはPitaliumだけでなく、 Applitools Eyes/SI Toolkit for Web Testing/reg-suitなどがあります。それぞれ異なる特徴がありますので、ぜひお試しください。
エンプラ開発の辛みとその解決策
続いて、hifiveエヴァンジェリストの中津川よりhifiveの紹介とエンタープライズにおけるシステム開発の悩みを紹介しました。すでにサポートが終了したブラウザでさえ、現場では今なお現役として使われています。そうした中でもHTML5を使った高度なビジュアル化が求められています。
そうした時に使えるのがhifiveです。特に企業では5〜10年システムが動き続けるのが当たり前であり、そうした環境下においても安心して使ってもらえるようになっています。こちらもぜひお試しください。
HTML5 CoferenceはWeb技術が多数集まり、枯れたものから最新のテクノロジーまで様々な技術が紹介されます。Webの進化はとても早いので、こういった場でキャッチアップするのが大切です。皆さんもぜひ参加してください。
Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('button').on('click', function(e) { | |
| // 何かの処理 | |
| }); |
こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はイベントの動的な追加および削除の方法について紹介します。
サンプルコード
まずは基本的な処理について紹介します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function ObservableArray() { | |
| this.name = 'Init'; | |
| }; | |
| ObservableArray.prototype.updateName = function(name) { | |
| this.dispatchEvent({ | |
| type: 'changeBefore', | |
| data: this, | |
| }); | |
| this.name = name; | |
| this.dispatchEvent({ | |
| type: 'change', | |
| data: this, | |
| }); | |
| h5.mixin.eventDispatcher.mix(ObservableArray.prototype); | |
| } |
次にイベント処理を定義します。これを関数にしておくのがコツです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var observableArray = new ObservableArray; | |
| function logger(e) { | |
| console.log(e); | |
| $('#result').val(`${$('#result').val()}\n,change event. Name is ${e.data.name}`); | |
| } | |
| // この処理の内容がイベント通知に使われます | |
| $('#update').on('click', function(e) { | |
| observableArray.updateName($('#value').val()); | |
| }); |
そしてこの関数をイベント通知に追加します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#add').on('click', function(e) { | |
| listner = observableArray.addEventListener('change', logger); | |
| console.log(listner) | |
| }); |
逆に削除する時にも関数を指定します。そのため処理を無名関数ではなく、関数化しておく必要があります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#delete').on('click', function(e) { | |
| observableArray.removeEventListener('change', logger); | |
| }); |
addEventListenerを使ってイベントを購読し、removeEventListenerを使ってイベントの購読を解除します。その際、関数を指定する必要がありますので購読に使った関数をオブジェクトとして指定できる状態になっていなければなりません。無名関数では難しいのでご注意ください。
今回のコードはJSFiddleにアップロードされていますので実装時に参照してください。
Pitaliumではスクリーンショットを撮影して、二つの画像を比較することで更新された部分があるかどうかをチェックします。しかし画像だけでの比較の場合、バナーであったりソーシャル系の情報は利用したユーザやタイミングによって情報が異なるために毎回差分が出てしまいます。
そこで使いたいのがチェック対象外にする設定です。この手の仕組みとして良く行われるのが除外領域を黒く塗りつぶすといった方法なのですが、Pitaliumでは除外したい部分の透明度を変更すればOKです。
準備するもの
必要なライブラリは以下の通りです。
これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。
テストコード
テストコードは次のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import java.io.*; | |
| import javax.imageio.ImageIO; | |
| import java.awt.image.BufferedImage; | |
| import com.htmlhifive.pitalium.core.*; | |
| import com.htmlhifive.pitalium.image.util.*; | |
| import com.htmlhifive.pitalium.image.model.*; | |
| class Diff { | |
| public static void main(String args[]){ | |
| try { | |
| // 正とする画像 | |
| BufferedImage Image1 = ImageIO.read(new File(args[0])); | |
| // 比較対象の画像 | |
| BufferedImage Image2 = ImageIO.read(new File(args[1])); | |
| // 比較実行 | |
| ImageComparedResult result = ImageUtils.compare( | |
| Image1, null, Image2, null, | |
| new CompareOption[] { | |
| new CompareOption( | |
| CompareOptionType.IGNORE_CLEAR_PIXELS | |
| ) | |
| } | |
| ); | |
| // 結果の確認 | |
| if (result.isFailed()) { | |
| // 違いがある場合 | |
| // 差分を書き出し | |
| DiffPoints diffPoints = (DiffPoints) result; | |
| final BufferedImage diffImage = ImageUtils.getDiffImage( | |
| Image1, | |
| Image2, | |
| diffPoints | |
| ); | |
| // ファイルに書き出し | |
| ImageIO.write(diffImage, "png", new File(args[2])); | |
| } | |
| } catch(IOException e) { | |
| System.err.println(e.getMessage()); | |
| } | |
| } | |
| } |
注意点としては比較時のオプションです。 CompareOptionType.IGNORE_CLEAR_PIXELS を使います。
コンパイル
コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ javac -cp ".:./pitalium-1.2.1.jar" diff.java |
実行
実行時には slf4j をクラスパスに追加して実行する必要があります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ java -cp ".:./pitalium-1.2.1.jar:./slf4j-simple-1.7.25.jar:./slf4j-api-1.7.25.jar" \ | |
| Diff diff1.png diff2.png diff3.png |
今回のファイルは以下の二つです。
二つ目の画像の右側のアイコンだけ透明度を変更しています。
実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。右の部分は色が明らかに違いますが、差分から除外されているのが分かるかと思います。
このようにして二つの画像から一部を除いた比較も簡単にできます。ぜひ皆さんの開発に役立ててください。
PitaliumはWebブラウザを自動操作し、撮影したスクリーンショットを使って前回撮影した時と差分がないかチェックするテストツールです。DOM比較などに比べて手軽に使え、デザイン崩れもチェックできます。
そんなPitaliumの画像比較処理だけを取り出す方法を紹介します。
準備するもの
必要なライブラリは以下の通りです。
これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。
コードについて
参考のコードは次のようになります。二つの画像をCLIの引数として受け取り、差分があった場合はPNGとして差分を出力します。このファイルを diff.java とします。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import java.io.*; | |
| import javax.imageio.ImageIO; | |
| import java.awt.image.BufferedImage; | |
| import com.htmlhifive.pitalium.core.*; | |
| import com.htmlhifive.pitalium.image.util.*; | |
| import com.htmlhifive.pitalium.image.model.*; | |
| class Diff { | |
| public static void main(String args[]){ | |
| try { | |
| // 正とする画像 | |
| BufferedImage Image1 = ImageIO.read(new File(args[0])); | |
| // 比較対象の画像 | |
| BufferedImage Image2 = ImageIO.read(new File(args[1])); | |
| // 比較実行 | |
| ImageComparedResult result = ImageUtils.compare( | |
| Image1, null, Image2, null, | |
| new CompareOption[] { | |
| new CompareOption( | |
| CompareOptionType.DEFAULT, | |
| new DefaultComparisonParameters() | |
| ) | |
| } | |
| ); | |
| // 結果の確認 | |
| if (result.isFailed()) { | |
| // 違いがある場合 | |
| // 差分を書き出し | |
| DiffPoints diffPoints = (DiffPoints) result; | |
| final BufferedImage diffImage = ImageUtils.getDiffImage( | |
| Image1, | |
| Image2, | |
| diffPoints | |
| ); | |
| // ファイルに書き出し | |
| ImageIO.write(diffImage, "png", new File(args[2])); | |
| } | |
| } catch(IOException e) { | |
| System.err.println(e.getMessage()); | |
| } | |
| } | |
| } |
コンパイル
コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ javac -cp ".:./pitalium-1.2.1.jar" diff.java |
実行
実行時には slf4j をクラスパスに追加して実行する必要があります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ java -cp ".:./pitalium-1.2.1.jar:./slf4j-simple-1.7.25.jar:./slf4j-api-1.7.25.jar" \ | |
| Diff diff1.png diff2.png diff3.png |
今回のファイルは以下の二つです。
実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。
このようにしてPitalium独自の画像出力機能だけを利用できます。スクリーンショット以外の用途でも使えると思いますので、皆さんの開発に役立ててください。
hifive開発者ブログ 