hifive開発者ブログ

2017/12/19

WebAssemblyをRustで試す

Webでより高速なWebアプリケーションを実行するための仕組みとして注目されているのがWebAssemblyです。バイナリファイルであり、あらかじめコンパイルされていることでソースコードを簡単に見られてしまうJavaScriptの欠点を補うことができます。

現在、CやC++で書くことが多いWebAssemblyですが、Rustも着実に対応が進んでいます。ついに Rust単体でWebAssemblyをコンパイルする（Emscripten無し）にあるようにRustだけでWebAssembly向けにコンパイルができるようになりました。

今回はそちらのレビューになります。

RustはC/C++に比べると分かりやすい言語だと思います。型推測もあり、スクリプト言語のように書けます。今回はJavaScriptとの速度比較用に、以下のようなコードにしてみました。時間をかけるため、あえてループを繰り返しています。

	#[no_mangle]
	pub fn sum(a: i32) -> i32 {
	let mut total = 0;
	for x in 0..a {
	total += x;
	for y in 0..a {
	total += y;
	}
	}
	total
	}

view raw

index.rs

hosted with ❤ by GitHub

これをコンパイルします。

rustc +nightly –target wasm32-unknown-unknown -O main.rs –crate-type=cdylib

view raw

index.sh

hosted with ❤ by GitHub

その結果 main.wasm というファイルが生成されます。

呼び出し方

WebAssemblyは script タグで呼び出せる訳ではありません。Ajaxで取得する必要があります。以下の処理で sum という関数が使えるようになります。

	var sum = null;
	fetch('main.wasm')
	.then((response) => response.arrayBuffer())
	.then((bytes) => WebAssembly.instantiate(bytes, {}))
	.then((results) => {
	const instance = results.instance;
	sum = instance.exports.sum;
	});

view raw

index.rs

hosted with ❤ by GitHub

sum 自体は Native Code と判断されます。実行は普通の関数と変わりません。

	> sum(10)
	<- 495

view raw

index.txt

hosted with ❤ by GitHub

JavaScriptとの速度比較

JavaScriptでは以下のようなコードで試しました。

	total = 0;
	for (var x = 0; x < i; x++) {
	total += x;
	for (var y = 0; y < i; y++) {
	total += y;
	}
	}
	console.log(total);

view raw

index.js

hosted with ❤ by GitHub

それぞれ3回繰り返した平均値です（単位は ms）。

回数	Rust	JavaScript
100	190	513
1,000	165	3979
2,000	163	36593
5,000	172	337251
10,000	209	1427188

WebAssemblyの実行結果は回数に殆ど関係しませんでした。10,000回繰り返した時にも275/176/177msといった数字で、もっと回数の少ない時と変わりません。逆にJavaScriptは処理回数によってリニアに処理時間が延びている印象です。

WebAssemblyの欠点

現状のWebAssemblyはDOMやWeb API、GCに対応していません。そのため利用範囲が限られてしまうでしょう。将来的にはこれらのAPIにも対応が予定されています。

Rust自体は学習しやすい言語だと思います。それによって現状のWebを高速化できるので今後に期待した技術です。現状についてはJavaScriptから呼び出される補助的な技術ですが、将来的にはC/C++/Rustをはじめ、多くの言語でWebアプリケーションが開発できるようになるでしょう。

プログラミング言語 Rust

2017/12/15

hifiveのUIコンポーネント紹介「タブ切り替え」

by moongift

hifiveは業務システム開発用とあって、Bootstrapと組み合わせて使われることが多いのですが、Bootstrap側の制限が動作に影響を及ぼしてしまうことがあります。その一つとして今回はタブ切り替えを行うUIをhifive風に実装する方法を紹介します。

今回のデモはこちらにあります。

使い方

HTMLの記述

HTML側の記述は次のようになります。特徴としてはBootstrap標準ではidを使わなければならないところをクラスだけで指定しているところが異なります。

	<div class="tabbable">
	<ul class="nav nav-tabs">
	<li class="active"><a href="#" data-tab-name="tab1" data-toggle="tab">Section 1</a></li>
	<li><a href="#" data-tab-name="tab2" data-toggle="tab">Section 2</a></li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane active" data-tab-name="tab1">
	<p>I'm in Section 1.</p>
	</div>
	<div class="tab-pane" data-tab-name="tab2">
	<p>Howdy, I'm in Section 2.</p>
	</div>
	</div>
	</div>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptの記述

そしてJavaScriptはタブをクリックした際のイベントを取得して、コンテンツの表示/非表示を切り替えます。

	$(function() {
	var tabbableController = {
	__name: 'TabbableController',
	__ready: function() {
	},
	'.nav-tabs a click': function(context) {
	context.event.preventDefault();
	var cur = $(context.event.currentTarget);
	var tabName = cur.attr('data-tab-name');
	var target = this.$find('[data-tab-name="' + tabName + '"]');
	this.$find('.nav-tabs > *').removeClass('active');
	cur.closest('.nav-tabs > *').addClass('active');
	this.$find('.tab-pane').removeClass('active');
	this.$find('.tab-pane').filter(target).addClass('active');
	}
	};
	$('.tabbable').each(function() {
	h5.core.controller(this, tabbableController);
	});
	});

view raw

index.js

hosted with ❤ by GitHub

さらにタブのグループ毎にコントローラを適用することで、各タブを独立させた状態で扱えるようになります。

	$('.tabbable').each(function() {
	h5.core.controller(this, tabbableController);
	});

view raw

index.js

hosted with ❤ by GitHub

この方法であればBootstrapのJavaScriptを使わずにタブ機能が実装できます。Bootstrapは便利なライブラリですが制約も多くなっていますので、カスタマイズしやすい形を目指すのであればこうした実装がお勧めです。

タブ切り替え

2017/12/12

Webシステムの印刷が容易、多機能になるライブラリまとめ

by moongift

Webに限りませんが、業務システムで常に問題になるのが印刷です。多くの場合、PDFを生成して印刷しますが、それもコードが難解で分かりづらくなってしまいます。

今回はWebシステムにおいて使える印刷ライブラリを紹介します。印刷機能をより便利に、使いやすいものにしてくれることでしょう。

Print.js

表示されているHTMLではなく、全く異なるコンテンツを印刷できます。PDFを印刷したり、画像一つだけを印刷すると言ったこともできます。テキストを追加することも可能です。

Print.js – Javascript library for HTML elements, PDF and image files printing.

Gutenberg

印刷をより細かく制御するためのCSSを提供しています。クラスを使って指定することで、文字の大きさや改ページなどを決まった場所で行えるようになります。より印刷に適した表示に整えられるはずです。

BafS/Gutenberg: Modern framework to print the web correctly.

jQuery-printPage-plugin

異なるコンテンツを印刷できるjQueryプラグインです。iframeにコンテンツを流し込んで、それを印刷する仕組みになっています。URLを指定してその内容を印刷することもできます。

posabsolute/jQuery-printPage-plugin: A plugin that print any linked pages without loading a popup

PrettyPrintGmail

Gmailの印刷をスマートにしてくれます。ヘッダーのコンテンツが削除されるので印刷スペースが増えたり、カラー印刷になったりすることで余計なインク消費を防げるようになります。

ShivanKaul/PrettyPrintGmail: 🖨 Pretty print emails. Chrome Extension.

Inky-Linky

印刷時にリンクの上にQRコードを追加してくれるライブラリです。紙ではリンクが使えませんので、URLを手入力するのではなく、QRコードから行えるようになります。

rooreynolds/inky-linky: Inky-Linky: a bookmarklet that turns links on a web page into QR Codes in the margins, ready for printing.

IE Print Protector

レガシーなIEにおいて印刷機能をサポートしてくれます。例えばsectionタグのようなIEが使えないタグを適切にサポートすることで印刷が乱れるのを防いでくれます。

Google Code Archive – Long-term storage for Google Code Project Hosting.

これらのライブラリを使えばちょっとした画面の印刷が手軽になります。余計な情報がたくさん表示されていたり、逆に必要な情報が入らなかったりするのを防げるようになるでしょう。引いては紙資源の節約にもつながるはずです。

2017/12/08

Web/HTML5勉強会 in 横浜を開催しました

by moongift

11月20日、横浜のアトラシアン社にてWeb/HTML5勉強会 in 横浜を開催しました。横浜界隈でHTML5やインターネットサービスにコミットしている各社が揃い、その取り組みを発表するものです。今回は以下の4社に登壇いただきました（発表順）。

今日から始めるVISUAL TESTING FOR HTML5 by 新日鉄住金ソリューションズhifiveチーム

hifiveチームの石川はビジュアルテスティングや、その周辺サービスなどについて発表しました。ビジュアルテスティングは画面のスクリーンショットを使って、正しいとした結果と差異があるかどうかでテストの成否を決めるものです。完全一致のみ、その差異の率を指定するもの、さらに一部を除外などといった検出法があります。

周辺ツールも増えており、クラウドサービスも登場しています。自社でシステムを立ち上げて自由度高くビジュアルテスティングを行うことも、クラウドサービスで素早く導入することもできるようになっています。

エンタープライズでのチーム開発環境の秘訣 by アトラシアン

アトラシアンの長沢さんからは大規模プロジェクトにおける情報HUBの重要性が紹介されました。アトラシアンの各種サービスはカンバンを中心に情報が集まるようになっています。ドキュメントからタスクを起こし、ソースコードのコミットやデプロイによって自動的にステータスが変わるようになっています。

メールやチャットなど様々なコミュニケーションツールがある中で、情報HUBによって一元管理されるのが必須になっています。かつ、各システムが自動連携することによって何度も繰り返し入力する手間が省けたり、更新洩れが防げるようになります。

HTML5とIoT by カヤック

カヤックの君塚さんからはカヤック社でのIoT事例の紹介がありました。IoT案件では動作するブラウザが限られたり、カヤック社の案件ではキャンペーン系の短い期間度動作すればいいものが多いため、先進的な機能を積極的に取り入れられているそうです。

プレゼンではスマートフォンを動かすことでサーボモーターが動くデモが紹介されていました。PCとArduinoを連携させ、HTML5で受け取ったスマートフォンの動きをArduinoに伝えています。モノが動くというのはインパクトが強く、参加者の目を引いていました。

継続する自動テスト by ヒューマンクレスト

ヒューマンクレスト社の浅黄さんからはデバイステストについて紹介がありました。ブラウザのテストは自動化が進められていますが、スマートフォンデバイスにおいては実機が必要なのが現状で、社内に百台以上のデバイスが並べられているそうです。

ブラウザレベルのUIに関係するテストは作成、運用コストが高いテストであり、網羅的に行うのは難しいと言います。ユニットテストなどをきちんと作り込んだ上で、必要な部分に対してのみ適用することで効率的なテスト運用が実現できるとのことです。

この後、参加者の皆さん交えて懇親会が行われました。今回は初回ということもあり、手探り感の強かったイベントでしたが、参加者は様々なナレッジが吸収できたと好評いただきました。横浜開催となると、会社帰りの参加が可能になります。興味がある方は hifive の connpassにてグループ参加しておいてもらえると、新しいイベント開催時にメールが送信されます。今後も繰り返し開催していきますので、ぜひご参加ください。

hifive – connpass

2017/11/24

Web決済を変えるWeb Paymentsについて

by moongift

現在W3Cで仕様の策定が進められているのが決済系のAPIになります。Web Paymentsという仕様でまとめられており、以下の4つが存在します。

Payment Request API
Payment Handler API
Payment Method Identifiers
Basic Card Payment

この内、ユーザ側が利用することになるのがPayment Request APIになります。これは単に決済入力フォームの置き換えになります。

実際に動作しているところは動画で見ると分かりやすいでしょう。

これで分かる点として、決済処理を開始した時にネイティブのフォームが表示されます。そしてあらかじめ入力してあった決済方法（クレジットカードなど）や配送先情報などが利用できます。入力の手間が省けるようになるので、ユーザビリティが高まります。

処理としては、次のようになります。 PaymentRequest のインスタンスを作成し、 show メソッドを実行するとネイティブに処理が移ります。

	// 支払い方法の設定
	var supportedInstruments = [{
	supportedMethods: ['basic-card']
	data: {
	supportedNetworks: [
	'visa', 'mastercard', 'amex', 'discover',
	'diners', 'jcb', 'unionpay'
	]
	}
	}];

	// 支払い情報について
	var details = {
	displayItems: [{
	label: '元値',
	amount: { currency: 'JPY', value: '6500' }
	}, {
	label: '割引',
	amount: { currency: 'JPY', value: '-1000' }
	}],
	total: {
	label: '合計',
	amount: { currency: 'JPY', value : '5500' }
	}
	};

	var request = new PaymentRequest(supportedInstruments, details);
	request.show()

view raw

index.js

hosted with ❤ by GitHub

そしてこの処理はPromiseになりますので、 then で結果を受け取れます。

	request.show()
	.then(result => {
	return fetch('/pay', {
	method: 'POST',
	credentials: 'include',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(result.toJSON())
	})
	});

view raw

index.js

hosted with ❤ by GitHub

この時のresultですが、クレジットカード情報や配送先情報、配送オプションなどの情報が入ってきます。クレジットカード番号がそのまま入ってきてしまうので、今後のPCIDSS対応を考えると、ちょっと使いづらいかも知れません。PCIDSSへの対応をきちんと行っている企業であれば（大手のEコマースサービスなど）積極的に使っていきたいAPIになるでしょう。

今後、クレジットカード番号を取得しない形式での決済処理などにも対応していく予定のようです。決済システムを構築する上で、見逃せない技術になっていくはずです。

via Payment Request API で簡単・高速な決済を実現する | Web | Google Developers

2017/11/21

コンボボックスの有効/無効を切り替える

by moongift

入力のサジェストができるコンボボックスコントローラで、入力の有効/無効を切り替える方法です。

実際のデモはJSFiddle上で試せます。

作り方

HTMLの実装

HTML側ではコンボボックスの有効、無効を切り替えるためのボタンを追加します。

	<p>
	Combobox: <input type="text" name="accountcode">
	</p>

	<p>
	<div>
	<input type="button" name="disable" value="disable" />
	<input type="button" name="enable" value="enable" />
	</div>
	</p>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptの実装

JavaScript側では、this._accountComboBoxController の enable/disableを実行して有効/無効を切り替えます。

	'input[name="disable"] click': function() {
	this._accountComboBoxController.disable();
	},

	'input[name="enable"] click': function() {
	this._accountComboBoxController.enable();
	},

view raw

index.js

hosted with ❤ by GitHub

JavaScript全体のコードは次のようになりなす。

	(function($) {
	var comboboxController = {
	__name: 'ComboboxController',
	/** コンボボックスコントローラ */
	_accountComboBoxController: h5.ui.components.combobox.ComboBoxController,
	__meta: {
	_accountComboBoxController: {
	rootElement: 'input[name="accountcode"]'
	}
	},
	__ready: function() {
	var data = [];
	for (var i = 0; i < 500; i++) {
	data.push({
	value: ("0000"+i).slice(-5)
	})
	}
	this._accountComboBoxController.init({
	data: data
	});
	},
	'input[name="disable"] click': function() {
	this._accountComboBoxController.disable();
	},

	'input[name="enable"] click': function() {
	this._accountComboBoxController.enable();
	},
	};
	h5.core.expose(comboboxController);
	})(jQuery);

	$(function() {
	h5.core.controller('body', ComboboxController);
	});

view raw

index.js

hosted with ❤ by GitHub

今回のデモはこちらにあります。入力を制限する際に使ってください。

2017/11/16

HTML5 Enterprise Application Conference 2017を開催します！

by moongift

〜HTML5で実現する業務アプリケーションのモダン化＆マルチデバイス化〜

企業が利用・提供する業務アプリケーションに関わるテクノロジーが日々進化し、情報システム部門に求められている課題は、デジタルトランスフォーメーションを代表として、いっそうテクノロジーを活用した業務革新が求められるようになってきました。

一方で、既存の業務システムのセキュリティや保守サポートのレベルを落とすわけにもいかず、情シス部門の人員が増えるわけでもなく、どのように新しい時代の情シスへと変革していけば良いのでしょうか。

本カンファレンスでは、HTML5を使用した業務アプリケーション開発の最先端にいる各社がスポンサーとなり、HTML5によるモダナイゼーションやマルチデバイス対応に関する最新動向や開発事例をご紹介する予定です。

HTML5というオープンテクノロジーの切り口で、ベンダーに依存せず、効率のよいツールやフレームワークを用いて内製等の課題を解決していくことで、IT産業の今まであり方に一石を投じるようなエッセンスを皆様にお伝えできればと思います。

申し込みはこちらから！

「動かないコンピュータ」を10数年担当した

「日経コンピュータ」元編集長がご登壇！

基調講演には、「ソフトを他人に作らせる日本、自分で作る米国」「社長が知りたいIT 50の本当」の著者であり、「日経コンピュータ」の人気連載「動かないコンピュータ」を10数年担当された「日経コンピュータ」元編集長の谷島宣之様をお招きし、日本の情報システム部門がこれから直面していくであろう課題や、いままではとは異なる業務内容について解説いただきます。今までの情報システム部門に求められていた「守り」の業務と、これから求められる「攻め」の業務をクリアにし、かつ、これからどのように解決していくか糸口をお伝えいたします。

情報システム部門や実際に開発に携わっている皆様にとって、貴重な1日になること間違いなしの特別カンファレンスです。皆様のお申込み・ご来場を心よりお待ちしております。

HTML5とは？

HTML5とは、2014年にHTMLのバージョン5として勧告されたものです。前のバージョンにあたる「HTML4.01」の勧告から15年ぶりに改定されました。
HTML5は、最新版のIE11を除く旧バージョンのIEがサポート終了になったことや、スマートフォンブラウザに表示されず、2020年にサポートが終了するAdobe Flashコンテンツの代替としてWebアプリケーションを構築する際に用いられるケースが増えてきました。

HTML5ベースで業務システムを構築することで、単に見栄えや操作感に優れたWebシステムを作れるというだけでなく、「マルチデバイス対応が容易」「配布コストを軽減できる」「ベンダーロックインを回避可能」といった様々なメリットが得られます。

これからのユーザー企業にとって、業務システムをパートナー企業と一緒に開発・運用を進めていくための技術として私たちはHTML5を推奨しています。

HTML5の大きな特徴

Webアプリケーションのためのweb標準
ドラッグ＆ドロップができ、リアルタイムに反応を返すことが可能です。HTML5をベースに、CSS、JavaScriptを組み合わせてより効率良く実現できるような構造となっています。
異なる環境下でも動作
HTML5で作られたアプリケーションは、異なるプラットフォームやOSでも同様に表示し動作することが可能です。これは、素早く多くの環境にサービスを提供出来ることでもあり、システム開発側だけでなく、利用者にとっても大いなメリットとなります。
オープンシステム
今までシステム開発は、OSや特定のベンダーの製品にのみ対応した開発が行われてきました。しかしながら、HTML5のようなオープンシステムは、OSやデバイス、特定のベンダーのプラットフォームにも縛られることなくアプリケーションを展開することが可能です。
とりわけWebブラウザに関して言えば、HTML5というオープンシステムに準拠していることが競争の前提となってきています。今までとは異なり、独自仕様を競う競争ではなく、より高速に・安定して・拡張性に優れ・使い易さがWebアプリケーション開発に期待されるようになってきています。

AGENDA

時間	内容
13:40～14:00	受付
14:10～14:50	「日経コンピュータ」元編集長による情シス部門に向けた基調講演業務システム明日　～　内製の勧め業務システムについて企業はこれからどうしていくべきでしょうか。モバイル、AI、IoTなど業務システムに関わるテクノロジーが急変し、企業の経営者は「新しいことがやれるのではないか」と期待をかけています。一方、既存の業務システムは肥大化、老朽化しており、情報システム担当者は日々、システムの保守に追われています。即効性のある対策はありませんが、業務システムの現状と今後、目指す方向、担い手の条件、内製の可能性といったことを考えてみます。谷島宣之様日経BP総研　上席研究員ご略歴 1985年、日経マグロウヒル社(現・日経BP社）入社、「日経コンピュータ」誌の記者に。システム開発プロジェクトの失敗を報じる連載「動かないコンピュータ」を10数年担当。2009年に日経コンピュータ編集長。現在はシンクタンク部門の研究員。著書ソフトを他人に作らせる日本、自分で作る米国社長が知りたいIT 50の本当この度、カンファレンスに御来場いただいた皆様に「社長が知りたいIT50の本当」をご用意いたしました。アンケートにご協力いただいた皆様にプレゼントいたします！
14:50～15:20	開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから近年にみるWebテクノロジのめざましい進歩をきっかけに、業務アプリケーション開発に大きな変化が訪れようとしています。開発支援ツールのメーカー・ベンダーとして業界の変遷に追従しつづけるグレープシティが、最新のJavaScriptライブラリ「Wijmo」と「SpreadJS」の導入事例を参考としながら、昨今に見られるシステム開発の動向と開発スタイルについてご紹介します。グレープシティ株式会社ツール事業部マーケティング部村上功光
15:20～15:50	モバイルファーストな業務システムをHTML5で実現〜Monaca活用事例に学ぶ、モバイルアプリ開発の成功ポイント解説〜モバイルデバイスの急速な普及により、業務システムにおいてもモバイルデバイスを用いた業務改革が求められるようになっています。一方で、モバイルアプリ開発エンジニアや開発ノウハウの不足により失敗するプロジェクトも多々見受けられます。そこで近年注目をされているのがHTML5ハイブリッドアプリ。HTML5ハイブリッドアプリはWeb標準技術であるHTML5を用いてiOS、Android、Windowsのマルチプラットフォームに対応したアプリが開発できる技術です。本セッションでは、これまで国内外で8万以上のアプリ開発に利用されて生きた開発プラットフォームMonacaの活用事例を通じて、業務システムにおけるモバイルアプリ開発の成功ポイントについて解説をいたします。アシアル株式会社取締役　マーケティング・事業開発担当塚田亮一
16:00～16:30	hifiveで実現するエンタープライズHTML5システム開発業務システムの分野でも、より生産性の高いUIを求める声が高まっています。表やグラフをはじめ、3DなどWebでも高度な表現が可能になってきましたが、業務システムでは編集などの機能性も求められます。また、パフォーマンスよく大量のデータを扱えることは勿論、多人数での開発や長期の運用・保守をも考慮する必要があります。複雑・高度化する企業Webシステムに対し、弊社ではHTML5企業Webシステム向けプラットフォーム「hifive/Pitalium」を開発・公開し様々な案件を実行してきました。本セッションでは、その中で得られたノウハウをご紹介します。新日鉄住金ソリューションズ株式会社技術本部システム研究開発センター　イノベーティブアプリケーション研究部 hifive アーキテクト三淵喬
16:30～17:00	サポート終了が迫るFLEXをHTML5/Angularでリニューアル！本年７月、Adobe Systemsは、2020年末に「Flash」の提供を終了し、同ソフトウェアのアップデートと配布を停止すると発表しました。それに伴い、FlashプレイヤーもEOSを迎え、脆弱性対策等も行われなくなります。また、Microsoftも2020年までにWindowsにおけるFlashのサポートを廃止することを決定しています。これにより、過去リッチインターネットアプリケーション（RIA）の開発フレームワークとして、業務システム開発に盛んに利用されたFLEXもサポート終了となります。企業が大量に資産を抱えるFLEXによる業務システムをどのようにして、リニューアルするのか？スタイルズではその解決策として、HTML5/Angularによるリライトサービスをご提供しています。スタイルズが過去実施したFLEX→HTML5/Angularへの大規模リライト事例を混じえて、サービス内容をご紹介します。また、今後情シス部門がパートナーとすべきSI企業の選定ポイントをお伝えします。株式会社スタイルズ代表取締役　梶原稔尚
17:00～17:30	名刺交換・相談会

CONFERENCE DETAIL

カンファレンス名	HTML5 Enterprise Application Conference 2017～ HTML5で実現する業務アプリケーションのモダン化＆マルチデバイス化～
日時	2017年12月6日（水）14時00分～17時30分（受付開始：13時40分）
会場	秋葉原UDXカンファレンス6F type350(A＋B) (東京都千代田区外神田 4-14-1 秋葉原UDX南ウィング6F)
最寄り駅	JR山手線・総武線秋葉原駅電気街口徒歩2分東京メトロ銀座線・日比谷線秋葉原駅徒歩4分
定員	100人
費用	無料(事前申込制）

SPONSER

アシアル株式会社
グレープシティ株式会社
新日鉄住金ソリューションズ株式会社
株式会社株式会社スタイルズ

※講演内容・プログラムは都合により一部変更させていただくことがございます。予めご了承ください。
※お申し込み頂いた個人情報を、本イベントに関連したサービスを、有益かつ適切にお客様、お取引先等に提供するため、株式会社スタイルズが収集した個人情報をイベント共催会社（アシアル株式会社、グレープシティ株式会社、新日鉄住金ソリューションズ株式会社、株式会社スタイルズ）で共同利用いたします。
※入力いただきました個人情報は、株式会社スタイルズおよびイベント共催会社（アシアル株式会社、グレープシティ株式会社、新日鉄住金ソリューションズ株式会社）のプライバシーポリシーに従い、厳重な管理のもと、お取り扱いいたします。

申し込みはこちらから！

2017/11/14

hifiveのUIライブラリ拡大表示で拡大率を変更する

by moongift

hifiveのUIライブラリ、お絵かきボードの機能で拡大率を変更する方法です。

実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。

HTMLについて

HTMLは前回の拡大表示をベースに、拡大率を設定できるテキストボックスを追加します。

	<div class="viewer">
	<div class="loadView"></div>
	</div>
	<div class="controls">
	<label>拡大率：
	<input type="input" name="scale" value="2" size="3" />
	</label>
	<input class="setScale" type="button" value="セット" />
	</div>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptについて

JavaScriptでは拡大率を設定する処理を次のように書きます。

	$(function() {
	var controller = {
	__name: 'PageController',
	artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController,
	magnifierController: h5.ui.components.artboard.controller.MagnifierController,
	:
	'.setScale click': function() {
	var scale = this.$find('[name="scale"]').val();
	this.mag.setScale(scale);
	},
	:
	};
	h5.core.controller('body', controller);
	});

view raw

index.js

hosted with ❤ by GitHub

以上の処理でダイナミックに拡大率の変更ができるようになります。

今回のデモはJSFiddleにアップロードされていますのでぜひご覧ください。必要に応じて拡大率を変えてみてください。

お絵かきボード

2017/11/09

カレンダーコンポーネントで特定の曜日を色分けする

by moongift

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。

動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。

HTMLの記述

HTMLは通常のカレンダーに加えて、曜日とカラーリング設定（スタイルシートのクラス）を指定できるドロップダウンを設定します。

	<div id="container"></div>
	<p>
	<select id="selDowName">
	<option value="sun" selected="">日曜日</option>
	<option value="mon">月曜日</option>
	<option value="tue">火曜日</option>
	<option value="wed">水曜日</option>
	<option value="thu">木曜日</option>
	<option value="fri">金曜日</option>
	<option value="sat">土曜日</option>
	</select>
	<select id="selCssDowName">
	<option selected="">default</option>
	<option>blue</option>
	<option>red</option>
	</select>
	<input type="button" id="btnCssDow" value="適用">
	</p>

view raw

index.html

hosted with ❤ by GitHub

スタイルシートは次のようになります。

	.blue {
	color: white;
	font-weight: bold;
	background: blue;
	}

	.red {
	color: white;
	font-weight: bold;
	background: red;
	}

view raw

index.css

hosted with ❤ by GitHub

JavaScriptの記述

ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。

	// 週間の日のスタイルにCSSでカスタマイズ
	'#btnCssDow click': function() {
	this.calendarController.setCssClassForDow(
	this.$find('#selDowName').val(),
	this.$find("#selCssDowName").val()
	);
	},

view raw

index.css

hosted with ❤ by GitHub

全体のコードは次のようになります。

	$(function(){
	var disableDates = [];
	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);
	},

	// 週間の日のスタイルにCSSでカスタマイズ
	'#btnCssDow click': function() {
	this.calendarController.setCssClassForDow(
	this.$find('#selDowName').val(),
	this.$find("#selCssDowName").val()
	);
	},
	};
	h5.core.controller('body', mainController);
	});