Skip to content

hifiveハンズオンを開催します!

そろそろ業務Webアプリケーションでも使われるようになったHTML5ですが、実際に適用するならば効率的、メンテナンス性の高い仕組みが必要です。私たちの開発するHTML5フレームワークのhifiveはオープンソース、かつWeb業務システムをターゲットに開発されています。

今回のハンズオンではITProにて連載しているHTML5で業務システムを構築しよう – 第9回 HTML5で日報アプリを作るをベースに日報アプリケーションを実際に開発します。メンターとしてhifiveを実際に開発している連載執筆陣があたりますので、詰まったところがあればすぐに確認、解決できます。

このハンズオンを通じてHTML5を使った業務アプリケーションの開発手法はもちろん、新しい機能やテクニックを学べます!

hifiveハンズオン!

好評につき、席を増席しました!

日時

2016年09月01日(木) 18時40分〜

場所

日本マイクロソフト社セミナールーム

タイムスケジュール

時間 内容
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システムのための開発プラットフォーム

banner_02

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

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

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

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

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

必要なライブラリ

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

ボックス切り替えの実装

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

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

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

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

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

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

ボックス切り替え


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

banner_02

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

ここ最近、ドキュメントを作成するのに使うマークアップ言語として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システムのための開発プラットフォーム

banner_02

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

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

まずはサンプルです。

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

必要なライブラリ

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

HTMLの記述

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

色と配置の指定

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

JavaScriptのコード

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

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

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

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

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

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

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

hifive カルーセル

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

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

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

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

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

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

hifive UI Library Top Page

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

banner_02

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

インターネットが幅広く普及してきたことによって、あらゆる人たちに対して等しく情報が提供できなければなりません。政府、自治体系であればユニバーサルデザインが求められるようになっており、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システムのための開発プラットフォーム

banner_02

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

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

デザインフレームワークと一言で言っても、シンプルなデザインセットから動的なコンポーネントを導入できるものまで様々あります。今回は自分で作るには骨の折れるコンポーネント(例えば、グリッドや、ドロップダウンなど)を画面に簡単に配置できるもの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が活用できそうです。

Cascade Framework

使用時の画面イメージは以下のようになります。

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

IE6から対応しているので、レガシーブラウザに対応しなければならない時にCascade Frameworkが良さそうです。


今回はコンポーネントが充実したデザインフレームワークを8つ紹介しました。Boostrapが主流になっていますが、作成したいページの用途や目的にあわせて、フレームワークを使い分けてみてはいかがでしょう。

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

banner_02

フォロー

新しい投稿をメールで受信しましょう。