Clik here to view.
業務システムで使えるグリッドライブラリ×8選
Webベースの業務システムを作っている際に必要になるのがデータの一覧画面です。多くのデータを一覧でき、かつスクロールした際にもデータの確認が容易であることなどが求められます。 今回はそんなデータを表示するのに最適なOSSのグリッドライブラリを紹介します。一部のライブラリは編集機能も備えており、さながら表計算ソフトウェアのようになっています。 Sensei Grid...
View ArticleClik here to view.
UIを気にしないで済むデータバインドの使い方
最近Reactが盛り上がっています。特に大きな要因として、UIの描画を気にせず、Virtual DOM側に実際の描画は任せられるというのが挙げられます。 Virtual DOMの方式ではありませんが、hifiveでもデータを変更すると描画が変わる、データバインドという機能が提供されています。今回はそんなデータバインドの使い方をステップを踏みつつ紹介します。 基本のHTML...
View ArticleClik here to view.
UIを気にしないで済むデータバインドの使い方（リアルタイム反映編）
前回のデータバインドを使ったHello World表示に続いて、今回はさらにデータの入力との連携も行ってみたいと思います。なお前回終了時のコードは以下になります。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport"...
View ArticleClik here to view.
UIを気にしないで済むデータバインドの使い方（独自メソッド編）
全体のデータ修正とそのリアルタイム反映に加えて、今回はモデルのメソッドを使ってみたいと思います。 例えばTwitterなどでは入力している文字数が分かるようになっています。同じように文字数を出してみましょう。 前回までのHTMLは次のようになっています。 <!doctype html> <html lang="ja"> <head> <meta...
View ArticleClik here to view.
Pitaliumを使ってスクリーンショットベースのユニットテストを書こう（準備編）
Webブラウザを操作する系統のユニットテストは作るのがとても大変で、その後のメンテナンスコストも大きいのが問題です。SeleniumIDEを使ってブラウザの操作をスクリプト化し、テストに組み込むのが一般的に行われていますが、画面やシステムの変更が発生するとテストはすべて破棄しなければならないくらい再利用性が低いです。...
View ArticleClik here to view.
Pitaliumを使ってスクリーンショットベースのユニットテストを書こう（デモ編）
Seleniumを使ったWebブラウザを自動操作するタイプのテストでは、画面遷移が正しく行われた結果、必要なテキストやDOMが存在することは確認できます。しかしデザインを変更した結果、DOM構造が崩れてしまっているかどうかについては分かりません。...
View ArticleClik here to view.
Pitaliumを使ってスクリーンショットベースのユニットテストを書こう（実用編）
Pitaliumを使うとSeleniumのテストが画面の表示結果ベースでの確認になるので、DOMやテキストのように一つ一つ指定して確認する必要がありません。さらにスクリーンショットを保存しますので、画面のデザイン崩れについても確認ができます。 今回はそんなPitaliumをさらに活用できるテクニックについて紹介します。 IDを指定してDOM比較...
View ArticleClik here to view.
Webサーバの負荷・ロードテストツール（1）「 ab（Apache Bench）」
今回から何回かに分けて、Webサーバ用の負荷テストツールを紹介していきたいと思います。今回は有名どころのabです。 Apache標準搭載の ab(Apache Bench)とはapacheをインストールすると標準で利用できる性能測定ツールで、コマンドラインから利用します。 はじめに（ご注意ください！）...
View ArticleClik here to view.
オープンソースカンファレンス北海道に出展しました
6月13日（土）、東札幌の札幌コンベンションセンターにて開催されたオープンソースカンファレンス北海道にhifiveとして出展しました！ 数多くの方にご来場いただき、hifiveを知っていただくきっかけになりました。ぜひhifiveを使ってHTML5アプリケーションを開発して貰えればと思います。 こちらは準備中の様子。 懇親会も大いに盛り上がりました！...
View ArticleClik here to view.
Webサーバの負荷・ロードテストツール（2）「Locust」
LocustはPythonで制作されたWebサーバの負荷テストツールの一つで、MasterとSlaveによる分散テストも可能なツールとなっています。 はじめに（ご注意ください！） 今回紹介するテストツールは、DOS攻撃にも利用出来てしまいます。テストを行う時は、サーバのURLが正しいか注意し、他人のサーバに間違ってもアクセスしないようにくれぐれもご注意願います。 インストール...
View ArticleClik here to view.
PitaliumをGradleからつかってみよう！
Pitalium(ピタリウム)とは、hifiveのテスト支援ツールとして開発されているWebアプリ開発における画面系のリグレッションテストに対応するライブラリです。JUnitから利用できるライブラリですので、Javaにおけるユニットテストに慣れていれば、すぐに扱うことができるでしょうライセンスはオープンソース（Apache License 2.0）になります。今回は簡単にその動作を見ていきましょう。...
View ArticleClik here to view.
Pitaliumを使ってAndroidのリグレッションテスト
今回は、前回の「PitaliumをGradleからつかってみよう！」を利用して、Androidでのテストを行ってみようと思います。 今まで、スマートフォンでのテストを躊躇していたエンジニアの方にチャレンジして頂きたい内容となっています。是非、ご覧下さい。 AndroidのPitaliumテストにはAppiumを利用します。...
View ArticleClik here to view.
Pitaliumを使ってSafariでリグレッションテストを実行
Windows環境しかないのですが、Safariでのデバッグは可能でしょうか。いえ、現状ではMac OSXが必要です。残念なことに、すでにApple社はWindows版のSafariを提供していません。...
View ArticleClik here to view.
Pitaliumを使った実際のワークフローについて
Pitaliumはスクリーンショットを利用して画面の差分比較ができるのがPitaliumの最大の特徴です。そのためにはまず基準となるスクリーンショットが必要になり、それをテスト実行モードで切り替えることで実現しています。今回は実際に差分比較を行うためのワークフローを見ていきましょう。 なお、利用しているのはTODO管理になります。 実行モードについて...
View ArticleClik here to view.
Dockerを使って素早くSelenium Grid環境を構築しよう
Pitaliumを使う際にはSelenium Gridを構築する必要があります。中央集約的にSelenium Hubというサーバを立てて、そこにぶら下がる形でSelenium Nodeを立てていきます。 Selenium Hubを立てても良いのですが、管理を簡易化するためにDockerを使った方法を紹介します。 Docker Toolboxを使おう...
View ArticleClik here to view.
Pitaliumをつかってみた〜 DockerとJenkinsでデバッグ 〜
前回までの記事で、すでにPitaliumを利用したデバッグ環境ができあがっていると思います。今回は、Jenkinsを利用して、PitaliumのCI（継続的インテグレーション）周りを見ていきましょう。尚、今回のサーバー構成とそのプロセスは次のような形を想定しています。 server-composition 本テストではJenkins、Selenium...
View ArticleClik here to view.
Pitaliumをつかってみた 〜 サーバ周りのお話し 〜
今回はSelenium HubとNodeについてです。概ね想定できる設定について、主な設定箇所と注意するべきポイントをまとめてみました。どのような環境で構築したら良いのか、テスト環境構築方針を考慮する参考にして下さい。 HubとNodeが同一サーバで稼働している場合 この場合、明示的にHubとNodeを分けてサーバを起動させる必要はありません。 local-only...
View ArticleClik here to view.
Pitaliumでページ読み込み完了まで待つには？
Seleniumを使ったテストの中で厄介なのが画面遷移を伴う操作で、画面の読み込み完了判定を行う時ではないでしょうか。StackOverflowでも同様の質問があがっており、その際に解答に上がっていたのは、 IWait<IWebDriver> wait = new OpenQA.Selenium.Support.UI.WebDriverWait(driver,...
View ArticleClik here to view.
Enterprise HTML5 Developers Meetup #2 が開催されました！
12月01日、Enterprise HTML5 Developers Meetup #2が21cafe@渋谷にて開催されました。多くの開発者の方にご参加いただき、盛り上がりました。 今回は全部で3つのセッションがありました。 Edison/Node.js/MQTT/BaaSによるIoTの始め方 MOONGIFT 中津川さん Edison/node.js/MQTT/BaaSによるIoT事始め from...
View ArticleClik here to view.
開発者ツールを巡る旅（その1）「Google Chrome DevTools」
フロントエンド開発において欠かせない存在になっているのがWebブラウザに付随する開発者ツールです。Google Chrome、Firefox、Safari、IEと各ブラウザに実装されていますが、その使い勝手や機能は細かく違っています。 そこで各ブラウザにおける操作性や機能の違いを掘り下げて紹介します。最初になる今回は最も利用者が多いと思われるGoogle Chromeです。 Google...
View Article