時間	内容
18時40分	開場
19時00分	開始
19時00分	マイクロソフト社による講演
19時25分	hifive、およびハンズオンについて by hifiveチーム
19時45分	ハンズオン開始
21時半	ハンズオン終了

費用

無料

必要なもの

ノートPC。Windows/Mac OSX/Linuxいずれも可
ノートPCの電源アダプタ
名刺

対象者

Web開発者など普段からWebアプリケーション開発に携わっている方
業務システム開発者、企業内エンジニアなどHTML5を使った業務アプリケーション開発に興味のある方
HTML5など、最近のWebアプリケーション開発に関する知識を身に着けたい方

Lets’ hifiveハンズオン！

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

2016/08/19

hifiveのUIライブラリの紹介「ボックス切り替え」

by moongift

hifiveで提供しているUIライブラリの一つ、ボックス切り替えの使い方を紹介します。

まずは動作しているサンプルです。

このようにDOMをクリックすると、上下左右から新しいDOMがスライドして差し替わります。なお、古いDOMはアニメーションが完了した段階で消去されます。

動いているデモはこちらで確認できます。

必要なライブラリ

ボックス切り替えを行うにはhifive本体の他に以下のライブラリが必要です。

ボックス切り替えの実装

まずベースのJavaScriptは次のようになります。hifiveの基本的なコントローラの仕組みに replaceBoxController オプションが追加されています。

	$(function() {
	var outerBoxController = {
	__name: 'OuterBoxController',
	replaceBoxController: h5.ui.container.ReplaceBoxController,
	__meta: {
	replaceBoxController: {
	rootElement: '> .replaceBox'
	},
	},
	__init: function(context) {
	},
	};
	});
	h5.core.controller(".outerBox", outerBoxController);
	});

view raw

gistfile1.js

hosted with ❤ by GitHub

後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 this.__count は表示上のものになります。

	'> .replaceBox click': function() {
	// 新しいHTMLを生成
	this.__count += 1;
	var count = this.__count;
	var element = $('<div>'+count+'</div>');

	// アニメーションの仕方を取得
	var input = this.$find('select')[0];
	var transition = input.options[input.selectedIndex].value;

	// 処理の実行
	this.replaceBoxController.replace(element, {transition: transition});
	},

view raw

replacebox.js

hosted with ❤ by GitHub

これでボックス切り替えが実行できます。指定できるアニメーションは以下のパターンがあります。それぞれどういったアニメーションをするかはデモで確認してみてください。

slideLeft
slideRight
slideUp
slideDown
pushLeft
pushRight
pushUp
pushDown
openLeft
openRight
openUp
openDown
fade

なお、アニメーション完了時のイベントを取りたい場合は次のように書きます。

 this.replaceBoxController.replace(element, {
   completeCallback: function(old, current) {
     // 完了時のイベント
     // oldに古いDOM情報が入ります。
   },
   transition: transition
 });

view raw

replace.js

hosted with ❤ by GitHub

アニメーションをうまく使えばシングルページアプリケーションやスマートフォン/タブレット向けのWebアプリケーションでも使えるでしょう。より詳しいデモはボックス切り替えにありますのでご覧ください。

ボックス切り替え

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

2016/08/19

Webブラウザ上で使えるMarkdownエディタまとめ

by moongift

ここ最近、ドキュメントを作成するのに使うマークアップ言語としてMarkdownが人気です。少し前まで他にもフォーマットがありましたが、今はほぼMarkdown一色ではないでしょうか。

Webシステムの中でもMarkdownを採用し、ユーザにMarkdown記法に沿って入力してもらうものも増えています。そんな時にはツールバーをはじめ、Markdown記法をサポートするツールがあると便利です。そこで今回はWebブラウザ上で使えるMarkdownエディタを紹介します。

Editor

Editorはツールバーが表示され、Markdownの各入力フォーマットをクリックだけで入力できるようにしてくれます。見た目はMarkdownのままですが、目のアイコンをクリックするとHTML表示に変わります。

woofmark

woofmarkはWYSIWYGなエディタですが、HTML/Markdown/WYSIWYGを切り替えて表示できるようになっています。Markdownだけでなく通常のHTMLも同時にサポートしているので、カラフルな表示も行えるようになっています。

ProseMirror

入力は普通に行いつつ、テキストを選択すると太字/斜体/リンクなどのメニューが表示されます。リストや画像の挿入は段落ごとに指定できるようになっています。表示はWYSIWYGで、Markdownだとほぼ感じられません。

esarea – Chrome ウェブストア

esa.ioライクなMarkdown入力が任意のテキストエリアで使えるようになるGoogle Chrome機能拡張です。特定のサービスに依らずMarkdown記法が使いたいという時にインストールしておくと便利でしょう。

PageDown-Bootstrap Demo Page

BootstrapにMarkdown記法をサポートしたテキストエリアを表示するライブラリです。ボタンをクリックするとMarkdown記法が挿入されます。プレビュー機能は備えていません。

Personal Editor

MarkdownとXHTMLを切り替えて表示できるWYSIWYGエディタです。Markdownで記述して、その内容をXHTMLで表示できます。

EpicEditor – An embeddable JavaScript Markdown editor

入力補助機能はない、シンプルなMarkdownエディタです。プレビュー表示をサポートしており、右下に出るアイコンをクリックすると切り替わります。また、フルスクリーン機能もあります。Markdownに慣れた人たちに対して、よりコンテンツを書きやすくするのに使えるでしょう。

Markdownは様々なサービスで使われているので、対エンジニアであれば積極的に使っていきたい記法です。業務担当者であっても今回紹介したようなツールを組み合わせることで、入力の手間が大幅に減るのではないでしょうか。

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

2016/07/22

hifiveのUIライブラリの紹介「マグネットコンテナ」

by moongift

hifiveで提供しているUIライブラリの一つ、マグネットコンテナの使い方を紹介します。

まずはサンプルです。

動作するデモはこちらにあります。DOMがドラッグ可能になっており、他のDOMの近くに持っていくと吸い付くようになっています。さらにくっついた時にハイライトする仕組みです。

必要なライブラリ

マグネットコンテナを実現するにはhifive本体の他に次のライブラリが必要になります。

HTMLの記述

まずHTMLを記述します。今回はdiv要素を並べており、後で色と配置を指定します。

	<div class="magnet-wrapper">
	<div class="sample red"></div>
	<div class="sample blue"></div>
	<div class="sample green"></div>
	<div class="sample yellow"></div>
	<div class="sample purple"></div>
	<div class="sample gray"></div>
	</div>

view raw

contexst.js

hosted with ❤ by GitHub

色と配置の指定

次にスタイルシートで色と配置を指定します。すべてfloatで、positionもabsoluteになっています。後は各divごとにtop/leftで配置を指定しています。

	.magnet-wrapper {
	position: relative;
	}

	.sample {
	width: 120px;
	height: 120px;
	float: left;
	cursor: pointer;
	position: absolute;
	}

	.red {
	background-color: #F3C0AB;
	top: 0;
	left: 0;
	}

	.blue {
	background-color: #99CFE5;
	top: 200px;
	left: 200px;
	}

	.green {
	background-color: #98DE8D;
	top: 200px;
	left: 400px;
	}

	.yellow {
	background-color: #FFF599;
	top: 0px;
	left: 400px;
	}

	.purple {
	background-color: #D27EB3;
	top: 0px;
	left: 200px;
	}

	.gray {
	background-color: #E3E3E3;
	top: 200px;
	left: 0px;
	}

view raw

style.css

hosted with ❤ by GitHub

JavaScriptのコード

では実際のコントローラのコードですが、これはとても簡単です。

	$(function() {
	h5.core.controller('.magnet-wrapper', h5.ui.components.MagnetContainer.MagnetController)
	});

view raw

index.js

hosted with ❤ by GitHub

これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。

細かな動作の指定を行う場合についてはマグネットコンテナサンプルを参考にしてください。簡易的に実現するのであればこちらのデモをご覧ください。

マグネットコンテナサンプル

2016/07/20

hifiveのUIライブラリ紹介「カルーセル」

by moongift

hifiveはHTML5アプリケーション用のフレームワークですが、業務要件でありがちな各種UIについてもライブラリを提供しています。

今回はその中からカルーセルについて紹介します。

hifive カルーセル

実際の動きを紹介します。

使い方ですが、まずHTMLは次のように定義します。

	<div class="carousel-wrapper">
	<div class="item red">
	<p>アイテム1</p>
	</div>
	<div class="item blue">
	<p>アイテム2</p>
	</div>
	<div class="item green">
	<p>アイテム3</p>
	</div>
	<div class="item yellow">
	<p>アイテム4</p>
	</div>
	<div class="item purple">
	<p>アイテム5</p>
	</div>
	<div class="item gray">
	<p>アイテム6</p>
	</div>
	</div>

view raw

index.html

hosted with ❤ by GitHub

さらにCSSが次のようになります。

	ul.carousel>li {
	display: block;
	}

	.carousel-wrapper {
	width: 800px;
	height: 200px;
	margin: 20px 0 20px 0;
	padding: 5px;
	text-align: center;
	vertical-align: center;
	cursor: pointer;
	}

	.carousel-wrapper .item {
	width: 120px;
	height: 160px;
	line-height: 160px;
	}

	.red {
	background-color: #F3C0AB;
	}
	: // 他の色は省略

view raw

index.css

hosted with ❤ by GitHub

最後にJavaScriptはこれだけです。

	$(function() {
	h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController);
	});

view raw

index.js

hosted with ❤ by GitHub

これで .carousel-wrapper に対してカルーセルが適用されます。

カルーセルはマウスやタップ操作でドラッグできます。複数の類似項目から選択してもらう場合などのUIに使えるのではないでしょうか。ぜひお試しください。

hifive UI Library Top Page

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

2016/07/20

Webアクセシビリティを高めるためのライブラリまとめ

by moongift

インターネットが幅広く普及してきたことによって、あらゆる人たちに対して等しく情報が提供できなければなりません。政府、自治体系であればユニバーサルデザインが求められるようになっており、Webサイトにおいても多くのデバイスに対して見やすく、正しく情報が届けられるような機能、デザイン性が求められています。

今回はそんなWebアクセシビリティを高めるために使えるライブラリを紹介します。

tota11y – an accessibility visualization toolkit

ブックマークレットとして提供されており、実行するとメニューが表示されます。そしてヘッダー情報であったり、リンクテキスト、画像のaltなどの一見すると見られない情報が表に出てきます。

Hurtak/toggle-css-bookmarklet: Toggle css with one click

スタイルシートの有効、無効を切り替えられるブックマークレットです。HTML構造だけが表示されますのでスクリーンリーダーであったり、適切な情報配信といった意味において適切な情報構成かどうかが確認できます。

jaz303/ColorScope.js: Javascript bookmarklet for live, on-page simulation of various forms of color-blindness

色覚異常を再現するブックマークレットです。実行すると色彩を大きく変えることができます。その結果、赤が認識できない場合であったり、色味をなくした時の表示が適切であるか判断できます。

HTML_CodeSniffer

アクセシビリティ仕様WCAGに合わせてHTMLが組まれているかどうかをチェックできます。エラーについては修正を行い、ウォーニングは改善を行っていくことでアクセシビリティの高いサイトに仕上げることができます。

RightWebPage download | SourceForge.net

RightWebPageはWebページの適正さをチェックするソフトウェアですが、その中にアクセシビリティがあります。一つのWebページの他、リンクを辿ってサイト全体をチェックすることもできます。

いかがでしょうか。ツールとしてはブックマークレットが多いようです。その分、インストールも不要で任意のサイトでWebアクセシビリティがチェックできるのが利点でしょう。ぜひ自社サイトやクライアントのサイトで試してみてください。

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

2016/07/06

コンポーネントの充実したデザインフレームワーク8選

by moongift

昨今、スピード重視の開発を実現する上で欠かせなくなったデザインフレームワーク。デザインフレームワークとは、ボタンやフォームのデザインなどが定義されたライブラリのことです。

デザインフレームワークと一言で言っても、シンプルなデザインセットから動的なコンポーネントを導入できるものまで様々あります。今回は自分で作るには骨の折れるコンポーネント（例えば、グリッドや、ドロップダウンなど）を画面に簡単に配置できるもの8個紹介します。

Bootstrap

Bootstrapもっともメジャーなデザインフレームワークです。開発はTwitter社で、日本語のでのリファレンスが多いことから初心者にもやさしいフレームワークであるといえます。

Twitterでも使われていることからどのようなデザインのフレームワークかは想像しやすいかと思われます。例えば、Bootstrapを使えば画像のようなデザインを当てることができます。

Bootstrapで使える主なコンポーネントは以下の通りです。

これ以外にも様々なコンポーネントが用意されています。

なお、コンポーネントをJavaScriptで簡単にカスタマイズすることもできます。機能は非常に充実していますが、機能が多い分、他のフレームワークに比べると少し重たいというデメリットがあります。スマートフォンなどで早く画面を表示したいといった場合は他のデザインフレームワークを検討しましょう。

Foundation

ZURB社の作っているBoostrapの次にメジャーと言っていいフレームワークがFoundationです。テンプレートが充実しており、それらにコンテンツを流し込むだけで簡単に作成できるのが特徴です。

例えば、下の画像のように様々なレイアウトでページをデザインすることができます。

Foundationで主に使えるコンポーネントは以下の通りです。

また、パニーニと呼ばれる機能で条件分岐するなど、他のフレームワークにはない機能も多数あります。

Bootstrapと同程度に高機能ですので、デザインや利用するコンポーネント次第ではFoundationを使うのも良いでしょう。

Pure

Yahooの開発したデザインフレームワークです。特徴は何と言ってもその軽さです。ファイルの重さはver0.6.0で369KBです（参考までにbootstrapはフルで1.2MB）。

デザインはフラットでシンプルです。

主に使えるコンポーネントとしては、

などがあります。

なお、Pure CSS Componentsを使えば、JavaScriptを使うことなく、CSSのみで、カルーセル、モーダルウィンドウなども実現できます。

BootstrapやFoundationほどの機能が必要ない場合はPureを活用してもいいでしょう。

Cutestrap

Pure同様、Bootstrapの重たさを問題視して作られた軽量（442 KB）のデザインフレームワークです。

デザインはCutestrapの公式ページそのものを見れば分かるように、とてもシンプルです。

主に使えるコンポーネントとして、

フォーム装飾
グリット
タイポグラフィ

などがあります。非常にシンプルなため、JavaScriptでのカスタマイズはBootstrapと同じくらい簡単にできます。

最低限のフォームやグリッド機能を使ってページ作成をしたい場合、Cutestrapがオススメです。

Material UI

Google Material Designが提供しているUIパーツをReactのコンポーネントとして配布しているプロジェクトがMaterial UIです。Reactを使っているページであれば簡単に導入できるフレームワークです（なお、導入方法については公式ドキュメントを参考にしてください）。

こちらのページのように、Material UIを使えばGoogleの推奨するマテリアルデザインを踏襲したページが簡単に作成できます。

Material UIで主に使えるコンポーネントとして、

などがあります。

Reactを使う場合には、Material UIがオススメです。

Uikit

UIkitはjQuery、 normalize.cssをベースに作成されたデザインフレームワークです。画像のようなマテリアルデザインのページを作成できます。

Uikitで主に使えるコンポーネントは以下の通りです。

jQueryの知識があればカスタマイズは簡単にできます。ユーザインタフェース関連のコンポーネントが充実しているので、BootstrapよりもUIを重要視している方にオススメです。

Basis

Bootstrapで不満な箇所を改善する目的で作成したFlexboxベースの軽量レスポンシブCSSフレームワークです。他のフレームワークでもグリッドシステムというのは導入されていますが、他と異なりfloatではなくFlexboxになっています。そのためfloatで作られたグリッドシステムと異なり、カラム落ちしません。

Basisを使えば、上の画像のような一体感のあるページも簡単に作成することができます。

Basisで主に使えるコンポーネントは以下の通りです。

などです。

グリッドでページを作る際、カラム数が安定しなさそうなページを作りたい場合にはBasisが活用できそうです。