hifive開発者ブログ

2016/12/21

Mozillaさんとの共催ハンズオンが開催されました

12月17日（日）にMozillaさんとの共催ハンズオン「Firefox 開発ツールハンズオン #3 with hifive」が開催されました。hifiveを使って日報アプリを作りつつ、さらにFirefoxを使ってデバッグを行ってみるというハンズオンです。

前半は日報アプリ作成

前半はhifiveの説明と、日報アプリ作成でした。資料はすべてhifivemania/hifive-ff-handsonにアップされています。内容としては次のようになります。

後半はデバッグ実践

後半はFirefoxを使ってデバッグを行うハンズオンでした。ブレークポイントに加えて条件付きブレークポイント、ウォッチ式などについて実際に試しながら学べる内容になっています。

内容は次のようになります。

日報アプリを作る（その6）「デバッガーを使おう」

最後はもくもく会

最後はもくもく会として、作成したWebアプリケーションを拡張したり、各自目的のWebアプリケーションを開発していました。こちらからトピックを幾つか出しています。内容は先日出版したプロ直伝業務システム開発のためのHTML5攻略ガイドからピックアップしています。

午後いっぱいを使った長時間のハンズオンでしたが、皆さん満足いただけたようで良かったです。今後もハンズオンを積極的に行っていきますので、ぜひご参加ください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

2016/12/13

Selenium Conf ’16 こぼれ話：テストのバグを見つけてドローンを当てよう！

by sisikawa

この記事はSelenium/Appiumアドベントカレンダー2016の13日目の記事です。

石川@hifive開発チームです。

先日、SeleniumConf’16に参加してきました。
（私のチームでPitaliumというSeleniumベースのテストライブラリを開発しており、Selenium周りの情報収集が主な目的です。）

http://2016.seleniumconf.co.uk/

SeleniumConfはSeleniumのコミッター・ユーザのためのカンファレンスで、
ワークショップ（1日目）やセッション（2,3日目）が催されます。
今回はセッションの紹介ではなく、カンファレンスで見かけた小ネタをご紹介します。

会場内には「休憩所兼スポンサー展示コーナー」のような部屋があり、
セッションの合間も参加者の方々は紅茶を飲みながら盛んに議論を交わしていました。
そんなスポンサー展示コーナーの一角で、おもしろいパネルを発見。

テストのバグを見つけてドローンを当てよう！

パネルにはこう書かれています。

（意訳）
なぜこのテストは失敗するのでしょうか？
Seleniumスクリプトのエラーを見つけられた方の中から抽選でドローンをプレゼント！

このパネルはSeleniumConfのメインスポンサーであるSauceLabs社が、参加者向けにプレゼント企画を行っているものでした。

スクリプトは下記のとおりです。皆さんはどこにエラーが隠れているか、わかりますか？

	import java.net.URL;

	import org.openqa.selenium.WebDriver;
	import org.openqa.selenium.WebElement;
	import org.openqa.selenium.remote.DesiredCapabilities;
	import org.openqa.selenium.remote.RemoteWebDriver;

	public class SampleSauceTest {
	public static final String URL = "http://Username:Access_Key@example.com:80/wd/hub";

	public static void main(String[] args) throws Exception {
	DesiredCapabilities capabilities = DesiredCapabilities.chrome();
	capabilities.setCapability("platform", "Windows 10");
	capabilities.setCapability("version", "48.0");

	WebDriver driver = new RemoteWebDriver(new URL(URL), capabilities);

	driver.get("https://example.com");
	WebElement freeTrialButton = driver.findElement("signup");
	freeTrialButton.click();

	driver.quit();
	}
	}

view raw

SampleSauceTest.java

hosted with ❤ by GitHub

https://gist.github.com/meganetaaan/713df708b371fe3ea321d628523f2eaa#file-samplesaucetest-java

↓

正解発表です！
答えはテストコードをコンパイルしようとするとすぐに分かります。
実はこのJavaコード、実行はおろかコンパイルさえ通りません。

なぜならこの一文がWebDriverのインタフェースに反しているからです。

    WebElement freeTrialButton = driver.findElement("signup");

WebDriver#findElement()は文字通り「DOM要素を見つける」メソッドですが、
呼び出しの際はidを指定するのか、cssセレクタを与えるか、など、
「要素を検索する方法（location strategy）」を明示しなくてはいけません。

参考： https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html#findElement-org.openqa.selenium.By-

問題文の場合は、「By」クラスのオブジェクトをfindElementの引数に与えることで
検索方法を明示します。

    WebElement freeTrialButton = driver.findElement(By.id("signup"));

さてこの企画、カンファレンスを締めくくる「コミッターパネル討論」の冒頭で抽選が行われました。
抽選の様子はセッションの動画をご覧ください。

ちなみに85人が回答して70人が正解したそうです（私も正解しましたが、抽選には落ちました…）。
さらに、不正解だった15人の中から抽選で「Seleniumオンライントレーニング1年分」が
プレゼントされていました。
個人的にはこちらのほうがうれしいですね！

上記のクロージングセッションの他にも、実はSeleniumConfのセッションは全て動画が公開されていますので、ぜひチェックしてみてください。
https://www.youtube.com/channel/UCtqHXVoR7QSJARfhZ4dts1g/

以上、今回は小ネタのご紹介でしたが、今週末に開催されるSelenium勉強会にて、カンファレンス全体のレポートをします。

第4回日本Seleniumユーザーコミュニティ勉強会 – connpass
「誰でも枠」は既に定員が埋まっていますが、キャンセル待ちを狙えば間に合うかもしれませんね。
あとは「勉強会＆懇親会枠」が現在1名空いています。カンファレンスの裏話など興味ある方はぜひお話しましょう！

なお、勉強会に参加できない方も、SeleniumConfの発表資料は後日公開予定ですので楽しみにお待ちください！

hifive – HTML5企業Webシステムのための開発プラットフォーム

2016/11/08

OSC 2016 Tokyo/Fallに出展&登壇しました

by moongift

11月05、06日と開催されたオープンソースカンファレンス2016 Tokyo/Fallに今年も出展しました。多くのエンジニアの方がブースへ訪れてくれました。

今回は先日出版したプロ直伝業務システム開発のためのHTML5攻略ガイドをhifiveについてツイートしてくれた方にプレゼントするという企画を行いました。多くの方に書籍をお渡しでき、HTML5を使ったシステム開発に興味を持っていただきました。

さらに今回はセミナーを行っています。hifiveを含め、HTML5による業務システム開発の実例と問題点、さらにその回避策を紹介しました。

Webシステムのメリットは、Webブラウザさえあれば統一された機能がマルチデバイスに対して提供できることです。さらにHTML5によってネイティブアプリのような表現、機能、操作性、さらにパフォーマンスが発揮できるようになっています。HTML5は開発技術基盤の統一が実現できます。

とは言え、すべてのブラウザで同じ動作をするかと言われればそうではありません。動作の違いはもちろん、デザインの違いもあります。そうした点を踏まえて開発する必要があります。

最近のWebブラウザはバージョンアップがとても速くなっています。そのため、今は良くとも数ヶ月語に動作が異なったりする可能性はゼロではありません。それを防ぐためにはテストをしっかりやる他ありません。テストによっていち早く問題の発生を知るのです。私たちはそのためのフレームワークとしてPitaliumを提供しています。

フロントエンド開発の進化は速く、数年後にはトレンドが変わってしまっていることも多々あります。そのため、10年以上の稼働が求められる業務システム開発にはトレンドのフロントエンドフレームワークは向かないかもしれません。我々が開発しているhifiveはWeb業務システムをターゲットとしているので、中長期的な利用が前提になっています。

HTML5を活用することでスマートフォンやタブレットでも快適に動作するWebアプリケーションが開発できるようになります。さらにSVGやCanvasを使ってグラフやチャートなど高度な表現もできるようになります。

セミナーについてもツイートやシェアしてもらえれば書籍をプレゼントする企画を行いました。聞いていただいた方々の満足度も高かったようです。これを機会にぜひhifiveやPitaliumを使ってみてください！

2016/11/04

Web業務システム開発者必携！「プロ直伝業務システム開発のためのHTML5攻略ガイド」を出版しました

by moongift

2年前からのITProさんでの連載をまとめて、さらに書き起こしも追加したプロ直伝業務システム開発のためのHTML5攻略ガイドが10月20日より出版開始されました。

業務システムへのHTML5適用を本気で考えていく方向けの書籍で、読者層は次のお二方となっています。

社内システムをHTML5していこうと考えている情報システム担当者

前半ではHTML5とは何か、HTML5によって何が実現するのかと言った内容が書かれています。エンジニアの方でも全く問題ありませんが、システム発注側にあたる情報システム担当者の方でもHTML5の可能性を分かってもらえるように書かれています。

HTML5を使ったシステム開発を行っていくSIer/システム開発会社

後半では実際にHTML5を使って簡単なWebシステムを開発していきます。こちらはシステム開発会社（SIer）の方々がこれからHTML5に取り組んでいくのを想定して書かれています。実際に手を動かすと分かる魅力、技術などがありますので本書に沿ってぜひHTML5開発をはじめてみてください。

目次は次のようになっています。

第1章 HTML5による業務システム開発に踏み出そう、
第2章 HTML5を業務システム開発に適用する利点、
第3章 HTML5を使った実際の開発の進め方、
第4章業務システム開発における実装フェーズの流れ、
第5章業務システム開発におけるコーディングの基本、
第6章 HTML5による実装の実際、
第7章 HTML5の機能をより詳しく知る、
第8章ツールでアプリを洗練する、
第9章可視化部品を使った業務アプリ開発の実際、
付録A hifiveとその特長、
付録B 手軽にHTML5/JavaScript開発を始めるための環境構築法

技術書につき、小さな書店では置いていないかもしれません。大型書店、またはAmazonにてご注文ください！

2016/10/25

hifiveのUIライブラリ紹介「ArrowBox（その1）」

by moongift

hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。

動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。

使い方

HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。

	<div class="sampleDiv sampleDiv1">
	<button class="sample-btn" data-direction="up">上</button>
	<button class="sample-btn" data-direction="right">右</button>
	<button class="sample-btn" data-direction="down">下</button>
	<button class="sample-btn" data-direction="left">左</button>
	</div>
	<script type="text/ejs" id="h5arrowbox">
	<div class="h5arrowbox"></div>
	</script>
	<script type="text/ejs" id="message">
	<div><p>吹き出しサンプル</p><p>吹き出しサンプルです</p><button class="removeArrowBox" style="float:right">OK</button></div>
	</script>

view raw

index.js

hosted with ❤ by GitHub

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。

	(function() {
	var controller = {
	__name: 'PageController',

	_arrowboxController: h5.ui.components.arrowbox.ArrowBoxController,
	__ready: function() {
	},

	};
	h5.core.expose(controller);
	})();

	$(function() {
	h5.core.controller('.sampleDiv', PageController);
	});

view raw

index.js

hosted with ❤ by GitHub

そして、ボタンをクリックした時のイベントを作成します。directionはHTMLのdata要素で指定した、up/downまたはright/leftが指定できます。

	var controller = {
	__name: 'PageController',
	:
	'.sample-btn click': function(context, $el) {
	var direction = $el.data('direction');
	var $target = $el.parent();
	var arrowbox = this._arrowboxController.create(this.view.get('message'));
	arrowbox.show({
	target: $target,
	direction: direction
	});
	},

view raw

index.js

hosted with ❤ by GitHub

さらに吹き出しを消すためのイベントも作成します。

	var controller = {
	__name: 'PageController',
	:
	'.removeArrowBox click': function(context, $el) {
	// 吹き出し要素の取得
	var $arrowbox = $el.parents('.h5arrowbox');
	// ArrowBoxインスタンスの取り出し
	var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
	// 吹き出しの削除
	arrowbox.dispose();
	}

view raw

gistfile1.txt

hosted with ❤ by GitHub

このような実装によって、ツールチップが好きな場所に出せるようになります。

動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

2016/10/25

TrueType Fontが配布されているアイコンフォントまとめ

by moongift

Webサービス内でアイコンを挿入する際に、アイコンフォントが使われることの多くなってきました。アイコンフォントとはWebFontのアイコン版のことです。

アイコンフォントを使用することにより、

ベースラインを合わせるのが容易
CSSで拡大縮小・色の変更を容易にできる
iPhoneなどの解像度の高いデバイスでもぼやけることなく表示可能

といったメリットがあります。

そんなアイコンフォントには様々な種類があります。今回は巷に出回っているアイコンフォントについて、特にTrueType Fontが配布されているものを網羅的に紹介したいと思います。なお、紹介したアイコンフォントに関する情報はブログ執筆時のものです。最新の情報についてはリンクしてあるページからご確認ください。

Font Awsome

数
634種類
種類
Webアプリケーション
アクセシビリティ
手
交通機関
性別
ファイルタイプ
回転系
フォームコントローラ
支払系
グラフ系
通貨
エディタ系
方向系
プレイヤー系
ブランド
医療系
ライセンス
原則はMIT License。詳細はこちら

もっとも知名度が高いといっても差し支えないアイコンフォントです。一般的なアイコンからブランド、医療系まで634種類と様々なバリエーションがあります。

フォントの挿入方法は、

<i class="fa fa-camera-retro"></i>

というスタンダードな記載方法で挿入できます。

またサイズ変更は、

<i class="fa fa-camera-retro fa-lg"></i>

とクラスにfa-lgを加えるだけでCSSを触ることなく簡単に変更できます。

そしてダウンロードせずともCDNで利用できるのも魅力です。

アイコンの数、柔軟な変更機能やその知名度や日本語のドキュメントも豊富なことから、使い慣れてない方ならばFont Awsomeがオススメです。

WebHostingHub Glyphs

数
1000種類以上
種類
ビジネス
コミュニケーション
PCおよび携帯
デザイン・ライティング
開発
エンターテイメント
食べ物
ホスティング
メニュー
マルチメディア
スポーツ
ゲーム
シンボル
時間
場所関係
その他
ライセンス
Creative Commons Attribution 3.0

数の面で圧倒的に他に勝っているアイコンフォントです。公式サイトの使い方のページによると、Bootstrapで使うことを勧めています。

<i class="icon-filter"></i>

という風に記載するだけで簡単に挿入できます。Bootstrapを用いたページを作成する際にはお勧めです。

Batch.

数
343種類
ライセンス
2次販売などしなければ自由に使って問題ない

数は厳選されていますので、実際のアイコンを確認しつつ作成するページのイメージに合っているか確認する必要があるでしょう。アイコンは角のない優しいデザインとなっています。

Ligature Symbols

数
239種類
種類
カテゴリーなしか、ロゴ
ライセンス
the SIL Open Font License

製作者がsymbolsetに影響を受けて、Ligature機能を使ったSymbol Web Fontを自作しようという試みの元に作成されたフォントです。意味ある合字（リガチャ）で表示できるように設計してあります。そのため、意味不明な文字や空の文字を使うことで生じるSEO面でのデメリットを回避することができます。作者が日本人ということもあって日本語の環境に対応しています。日本語のドキュメントがあるので海外製のアイコンフォンを避けていた方にオススメです。

typicons

数
336種類
ライセンス
the SIL Open Font License

角のない可愛らしいアイコンが特徴的です。

<span class="typcn typcn-arrow-left"></span>

という風に、クラス名の頭に「typcn-」を指定することでアイコンを挿入することができます。線が太めの分かりやすいデザインなので、小さめな表示で多数のアイコンを使いたい時に使えそうです。

Foundation Icon Fonts 3

数
283種類
種類
一般的
ページ系
矢印
人型
デバイス
エディタ
メディア系
コーマス系
アクセシビリティ
ソーシャル・ブランド系
その他
ライセンス
MIT License

デザインフレームワークの有名なものの一つにFoundationがありますが、Foundationを提供しているZURBによるアイコンフォントになります。

数は他に比べると多くないですが、ソーシャルネットワーク系のブランドアイコンが多いのが特徴的です。Foundationを使う際にはFoundation Icon Fonts 3を使用すると良いでしょう。

Genericons

数
145種類
ライセンス
GPL

WordPressのデフォルトテンプレート「TwentyFourteen」にも使用されているアイコンフォントです。数は145種類とあまり多くないですが、WordPressのデフォルトテンプレート内で使用されていることもあり、TwentyFourteenを使って統一感のあるページを作りたいならば、Genericonsがお勧めです。

Simple Line Icons Webfont

数
160種類
ライセンス
個人および商用で利用可

名前の通りシンプルな線で描かれたアイコンフォントです。シンプルなので小さな画面から大きな画面（作成者によると1660pxまで）問題なく使用できます。洗練されたシンプルなアイコンを使いたい場合は、こちらと次のStroke Gap Iconがお勧めです。

Stroke Gap Icon

数
200種類
ライセンス
個人および商用で利用可

こちらもシンプルなアイコンです。Simple Line Icons Webfontと比べると食べ物系のアイコンがやや多いのが特徴です。

42 Weather Icons

数
42種類
ライセンス
個人および商用で利用可

名前の通り42種類の天気に特化したアイコンです。次に紹介するClimaconsと比較しながら、天気に関するサービスで使われることをお勧めします。

Climacons

数
75種類
ライセンス
個人・商用利用可

こちらも天気関係に特化したアイコンです。42 Weather Iconsアイコンと比較するとやや数が多く線が太いのが特徴的です。

Themify Icons

数
320種類
種類
矢印・方向
ウェブアプリ
コントローラ系
エディタ系
レイアウト系
ブランド
ライセンス
GPL

AppleのiOS7のアイコンに影響を受けて作成されたアイコンフォントです。以下のように指定します。

<span class="ti-download"></span>

WordPressの公式プラグインになっていること、IE7対応な点が魅力です。

Linea Free Iconset

数
730種類以上
種類
基本
音楽
コマース
ソフトウェア
推敲系
矢印
天気
ライセンス
Creative Commons

シンプルなアイコンです。線で描かれたシンプルなアイコンが各種、満遍なく充実しているところが特徴です。

Feather

数
130種類
ライセンス
MIT License

UX/UIデザイナーのCole Bemisが作ったシンプルなアイコンです。なお、ダウンロードの際にはメールアドレスの登録が必要です。

Freebie

数
130種類
ライセンス
MIT License

適度に書き込まれた線描写が特徴的です。昨今はやりのフラットデザインとは少しだけ雰囲気の違ったデザインとなっています。

今回はアイコンフォントについて紹介しました。アイコンはテキストを減らし、ユーザビリティを向上させます（あまり使いすぎるとよくありませんが）最適なウェブフォントを選び、より使いやすいページを作成してください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

2016/10/11

JavaScriptを別な言語で書くためのライブラリまとめ

by moongift

JavaScriptはWebブラウザで動く唯一のプログラミング言語です。そのためWebシステムに関わるプログラマはJavaScriptの習得が必須と言えます。

しかし仕様が慣れないという声や、スクリプト言語が苦手という人もいるでしょう。そうした方に向けて、JavaScript言語を別なプログラミング言語で書けるライブラリを紹介します。

Python

この手のライブラリで多いのがPythonです。Pythonの構文は括弧が少なく分かりやすいこともあってCoffeeScriptにも反映されています。それをさらに進めてほぼPythonの構文を使えるようにしています。

Pyjs

特にリッチなWebアプリケーションを開発するのに向けて開発されています。Web Tool KitのPython版という位置づけで開発が開始しました。

MSHTMLをサポートすることで、Webはもちろんデスクトップも対象としたWebアプリケーションが開発できます。

Transcrypt: Lean and mean Python 3.5 to JavaScript compiler

TranscryptはWebブラウザでそのまま動くのではなく、PythonのコードをJavaScriptに変換するライブラリです。そのため、ビルドツールなどを使ってPythonファイルが更新されたら自動生成するような仕組みを使うのが良さそうです。

Brython

Python3の構文でJavaScriptとして動きます。Ajaxはもちろん、SVGの描画、グラフなどグラフィックスにも強いのが特徴となっています。

Ruby

Pythonと並んで人気のあるスクリプト言語であるRubyもJavaScript化しています。

Opal: Ruby to JavaScript Compiler

RubyからコンパイルしてJavaScriptになります。Ajaxを動かしたり、jQueryの利用もできます。ソースマップにも対応しているので、Rubyの構文ままでデバッグができます。

RubyJS | Home

RubyJSはそのままRubyというよりも、Ruby風に書けるJavaScriptといった方が正しいかも知れません。あまり無茶をしない分、習得してしまえばCoffeeScript風に使いこなせそうです。

HotRuby – Ruby on JavaScript and Flash

JavaScriptによるRuby実装で、RubyVMになります。さらにFlashでも動作するとのことです。最近は更新されていないようです。

Lua

Luaも幾つかの実装があります。

Moonshine – A lightweight Lua VM for the browser

ブラウザで動作するLua VMです。コンパイルされたLuaのバイトコードをJavaScript上で実行します。

Lua.js live demo

LuaのコードをJavaScriptに変換します。すべてJavaScriptで書かれており、scriptタグにてapplication/x-luaと指定してLuaのコードを記述するか、テキストを変換して実行することができます。

その他

その他にも幾つかの言語での実装があります。

GWT

Googleが開発したライブラリで、JavaをJavaScriptに変換して実行します。特にサーバサイドも含めてJavaで記述することで、サーバサイドとクライアントサイドを共通した言語で作り上げることができます。

Grooscript

GroovyのコードをJavaScriptに変換して実行します。Angularもサポートしており、Groovyを使ってより本格的なWebアプリケーションが開発できます。

Scala.js

Scalaの構文を使ってWebアプリケーションが開発できます。ReactやAngularと組み合わせて利用することもできます。パフォーマンスにも気を配っており、実際の本番環境下でも使用することも可能です。

いかがでしょうか。JavaScriptを書くのが嫌だという方でもこれらの言語を使うことでより効率的にWebアプリケーションが開発できそうです。何よりサーバサイドとクライアントサイドの言語を統一できれば、開発効率はぐっと向上することでしょう。もちろん本当の言語に比べてできないこともありますので（ローカルのファイルを扱ったり、ネットワーク周りなど）、検証を行ってください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

2016/10/11

hifiveのUIライブラリ紹介「localCombobox」

by moongift

コンボボックス（select）はHTML標準で提供されます。選択肢が少ないときには問題ありませんが、数百の中から選択するとなると大変です。名前順に並んでいたとしても、ユーザビリティが高いとは言えないでしょう。

そこで使ってみたいのがlocalComboboxです。インクリメンタルな検索機能付きのコンボボックスです。

デモはJSFiddle上で公開しています。実際の動きは次のようになります。

作り方

HTML

HTMLは次のように inputのtype=”text” で定義します。

view raw

index.css

hosted with ❤ by GitHub

また、hifive本体とは別に以下のファイルを読み込みます。

JavaScript

JavaScriptはまず ComboBoxController を読み込みます。rootElementにはHTML側のインプットを指定します。

	var comboboxController = {
	__name: 'ComboboxController',
	/** コンボボックスコントローラ */
	_accountComboBoxController: h5.ui.components.combobox.ComboBoxController,
	__meta: {
	_accountComboBoxController: {
	rootElement: 'input[name="accountcode"]'
	}
	},
	__ready: function() {
	}
	};
	h5.core.expose(comboboxController);