Skip to content

hifiveのUIライブラリ紹介「タイルコンテナ」

hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。

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

使い方

まずHTMLの構造はタイル表示になります。

そして全体を覆っているクラスに対して h5.ui.components.tileContainer.tileContainerController を適用します。

後はデザインですが、例えば次のようにします。

これだけでドラッグ&ドロップでタイルを移動できる機能ができあがります。


動作デモはこちらで確認できます。ダッシュボード系サービスなどで使ってみてください。

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

banner_02

さくっとフロントエンド開発をはじめよう。ワンライナーHTTPサーバまとめ

Webフロントエンド開発を行っていると、手元の環境でさくっとHTTPサーバを立ち上げたいと思うことがあるかと思います。専用のソフトウェアを使うのも良いですが、ダウンロードするのさえ億劫です。

そこで各種言語、ワンライナーで実行できるHTTPサーバをまとめて紹介します。今回はライブラリなどを用意せずに実行できるものに限っています。

Ruby

まずはRubyから。2つ方法があります。

ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd).start'
# または
ruby -run -ehttpd . -p8000

個人的には上の方法が好みで、aliasでwebsコマンドとして登録しています。でも下の方がシンプルで分かりやすいですね。

Python

Python 2系の場合、

python -m SimpleHTTPServer 8000

が有名ですが、3系の場合

python -m http.server 8000

と実行するようになっています。

PHP

PHPは5.4以上からビルトインWebサーバが入っています。

php -S 127.0.0.1:8000

IIS Express

恐らくVisual Studioなどをインストールすると追加でインストールされるIIS Expressですが、コマンドプロンプトから利用ができます。

C:\> "C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:C:\MyWeb /port:8000

pathはWebのルート、portがポート番号です。その場で使うだけであれば便利ですね。

その他の言語

node.js、Perlについてはライブラリをインストールすれば使えますが、デフォルトのままでは方法がなさそうでした。


個人的によく使うのはRuby/Pythonのワンライナーですが、PHPも-Sオプションだけなので手軽に使えそうです。いずれもデフォルトでは入っていないWindowsであればIIS Expressを使った方法をコマンドプロンプトファイルにしておくと便利そうです。

皆さんの開発環境でも使ってみてください。

banner_02

hifiveのUIライブラリの紹介「右クリックメニュー」

hifiveで提供しているUIライブラリの一つ、右クリックメニュー(コンテクストメニュー)の使い方を紹介します。

まずはサンプルです。

任意のDOM以下に対して右クリックメニューを有効にしたり、メニュー内容の切り替えもできます。

動作しているサンプルはこちらで確認できます。

複雑な処理も可能ですが、今回は簡単に実装できる方法を紹介します。

必要なライブラリ

今回のメニュー表示はhifive本体の他、次のライブラリが必要になります。

作り方

まずHTMLですが次のように記述します。この .contextMenuBox 以下に対して右クリックメニューが有効になります。そして、メニューとして表示する内容は対象になるDOM以下に記述します。今回は .contextMenu 以下の内容になります。

そして、JavaScriptは次のように記述します。h5.ui.ContextMenuController を指定するだけで完了です。これで .contextMenuBox に対して右クリックメニューが有効になります。

さらにメニューを選択した際のイベントを管理したい場合はコントローラ内で次のように記述します。DOMが取れますので自由に処理ができるでしょう。

さらに複数のDOMについて管理したり、メニューの内容をダイナミックに変更したりするサンプルは右クリックメニューをご覧ください。ごく簡単に右クリックメニューが実現できますので、UI/UXの向上に役立ててください。

右クリックメニュー

banner_02

Web上で使える通知ライブラリ

Webアプリケーションなどでフォーム入力を行ったり、Ajaxを使った処理の結果を表示することは多々あるでしょう。しかし、ページをスクロールしていたりすることがあるため、適切な場所がどこか分からないことがあります。

そんな時にはフローティングで使える通知ライブラリが便利です。エラーやウォーニング、サクセスなど多数のパターンに対応したライブラリを紹介します。

Notify.js

jQueryプラグインとして使える通知ライブラリです。メッセージの種類によって背景色が変化します。基本は右上ですが、ページの上下左右を指定したり、特定のDOMの横に表示することもできます。

Notie – A Javascript Notification Plugin

画面上部に幅100%で表示されますのでインパクトが強いです。さらに確認のボタンを出したり、インプットフィールドを追加することもできます。デザインはフラットです。

‎naoxink.hol.es/notifIt/

横や上からスライドしながら表示されます。表示する大きさは自由に設定ができます。アニメーションすることで、より注意を引きつけられるでしょう。

messenger

基本は右下に出るタイプとなっています。小さなアイコンとメッセージという組み合わせで、シンプルな表示となっています。

humane.js

基本は右下にさりげないアニメーションとともに表示されます。その他画面中央や上に出すと言った指定もできます。

HTML iOS Notifications

iOS風の通知表示が特徴です。プッシュ通知風にメッセージが出ます。

alertify.js – browser dialogs never looked so good

上からスライドしながら表示されたり、右下にバナーを出したりできます。アラートやプロンプトの代わりに使うこともできるでしょう。

noty – a jQuery Notification Plugin

jQueryプラグインの通知ライブラリです。アニメーションしながら表示されます。デザインはテキストとアイコン表示となっています。アニメーションがこっています。

Notifier.js Examples

アイコン+メッセージという形の通知が表示できます。表示場所は上下左右に細かく指定できます。


通知を上手に使うと、JavaScriptの特性である非同期処理と絡めてメッセージングができるようになります。ユーザがすでに別な場所まで移動してしまっていたとしても、常時画面上部などに表示できるのでユーザビリティが高くなるでしょう。

banner_02

hifiveのUIライブラリ紹介「ArrowBox(その2)」

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

今回はクリックした場所にツールチップを出す方法を紹介します。(前回の記事も合わせてご覧ください。)

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

使い方

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

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。そして、 this.__arrowClassを追加してあります。このクラスはツールチップの独自のクラス名としておきます。このクラス名があるかどうかで、ツールチップが表示済みかどうかを判定します。

そして、ボタンをクリックした時のイベントを作成します。この時の処理は2つあり、まずすでに表示しているツールチップがあれば、それを消します。

そして後半でツールチップを表示します。この時、ポジションを指定することで表示場所が指定できます。ポジションは context.event.pageX/context.event.pageYで取得できます。

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

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


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

banner_02

HTML5 Enterprise Seminar 2017レポート(5)「HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は日本マイクロソフト株式会社 エバンジェリスト物江 修 氏による「HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発」の内容を紹介します。


本日様々な方に語ってもらっていました、HTML5を使ってスマートフォンアプリを開発していこうという話をします。この話の中でApache Cordovaというソフトウェアを使うのですが、さらにそれを快適に使うためのVisual StudioのCordova開発環境、そして検証環境についてお話しします。

まずApache Cordovaについてです。Apache CordovaとはHTMLとJavaScriptを使ってスマートフォンやタブレットアプリを開発できるフレームワークになります。Webブラウザで実行するのに比べて、プラットフォームが持っているリソース(例えば予定表やカメラ、連絡先、バイブレーションなど)へアクセスできるようになります。そして作成したソフトウェアはスマートフォンアプリになりますので、アプリストアから配布できるようになります。

さらに大きなメリットとしてシングルコード、一つのコードでAndroidやiOSといった複数のプラットフォームに対応させることができます。通常、AndroidであればJava、iOSであればObjective-CやSwiftを使ってそれぞれのプラットフォーム向けに言語を分けなければなりませんが、Apache Cordovaであれば使い慣れたWeb技術だけで両プラットフォームに対応したアプリが開発できます。

Apache Cordovaは元々PhoneGapと呼ばれていました。ニトビソフトウェアという会社がオープンソースで開発していましたが、2010年Adobe社が買収しました。PhoneGapは今もAdobe社が保有していますが、そのソースコードをApache財団に提供し、Apache Cordovaとして開発が続けられています。Cordovaを使うとiOS/Android/Windowsなどのアプリケーションが開発できます。

PhoneGapではいわゆるハイブリッドアプリと呼ばれる仕組みになっています。WebViewを使ったHTML/JavaScriptで作られたWebアプリケーションをネイティブコードでラッピングし、動作します。さらにプラグインと呼ばれるネイティブコードが書かれた仕組みを使うことによってプラットフォームの持つ様々なリソースにアクセスすることができます。昔はパッケージドアプリと呼ばれる、アプリ内にあるファイルしか呼び出せなかったのですが、最近ではホスティッドアプリというWebサイトで提供されているコードも使えるようになっています。これによってメンテナンスをWebサイト側だけにまとめられるようになっています。

続いてApache Cordovaの開発に際してVisual Studioがなぜ良いのかという話をしていきたいと思います。Visual Studioはマイクロソフトがリリースしている統合開発環境になります。かつてはWindowsプラットフォーム上で動作するアプリやドライバー、Webシステムなどを開発するのに用いられてきましたが、現在はiOSやAndroidアプリ開発などマルチプラットフォームで動作するソフトウェアを開発できるようになっています。さらに最近では.NET Coreをオープンソース化したことで、macOSやLinux上でも.NETアプリが実行できるようになっています。

そしてCordovaに対してですが、Visual Studio向けにTools for Apache Cordovaを提供しています。これはCordovaビルド環境、プロジェクトテンプレート、シミュレータ、macOS用リモートエージェントなどが合わさったツールになります。つまりTools for Apache Cordovaを使えばCordova向けの開発がほぼまかなえるようになっています。

一番大きいのはCordovaビルド環境ではないでしょうか。通常はNode.jsやJava、Android SDK、Cordovaのインストールが必要になります。さらにそれぞれのライブラリについて、アップデートを管理しなければなりません。Visual Studioを使うと、これらのインストールをGUI上でまとめて行ってくれるようになります。アップデートの管理もVisual Studio上でまとめて行えます。

どういったものがビルドできるかと言いますと、Android 2.33+(4.4推奨)、iOS6以上、Windows8/8.1、Windows Phone 8/8.1、Windows 10となっています。ビルドはAndroidまたはWindowsアプリ、デバッグについてはAndroid 4.4以上、Windows 10、Windows 8/8.1(Phone含む)に対して行えます。最新の環境に対応していると言えます。iOSについてはmacOSでしかビルドできないという問題はありますが、Cordova向けの開発では一つの環境に対してきちんとデバッグを行っておけば、他の環境に対しても殆ど問題になることはありません。

エミュレータについては、AndroidはHyper-Vを使ったエミュレーション機能に対応しており、実際の端末に近いテストが行えます。もっと軽い動作確認用としてはRippleという仕組みを使ったエミュレータも用意しています。iOS向けにはリモートエージェントをmacOSにインストールすると、Visual StudioからmacOS上のiOSシミュレータに信号を送ってコントロールできるようになります。従ってmacOSにWindowsの仮想環境をインストールしている場合、一台でVisual Studioを使った開発が実現できるようになります。

後はHTML、JavaScriptさらにプラグインに関しては優れたコード補完が組み込まれています。JavaScriptは大文字小文字を区別しますし、存在しないプロパティに対してアクセスしてもエラーにはなりません。そうしたミスを防ぐためにもコード補完が役立ちます。

さらにCordovaアプリからスマートフォンやタブレットのハードウェアリソースにアクセスするためにはプラグインを使います。このプラグインを使うためにはXMLを編集する必要があるのですが、Visual StudioだとGUIで設定ができます。かつプラグインのIDやGitリポジトリから取得できるので開発生産性が高く、ミスが少ないのが利点です。

そしてここから実際の開発を行うデモを紹介してくれました。今回は特に既存のSPA(シングルページアプリケーション)からスマートフォンアプリにどう変換するかについて重点が置かれていました。

Visual Studioを使うと既存のWeb資源を簡単にスマートフォンアプリに展開できますのでぜひ試してみてください。

最後に検証環境について紹介します。まずChromiumをベースにしたRippleという環境があります。さらにHyper-Vを使ったエミュレータで、こちらはハードウェアをエミュレートするのでより高度な検証が可能です。さらにアシアル株式会社が提供するMonacaではMonacaデバッガーというアプリがあります。Monacaではビルド環境をクラウドで提供しており、WindowsでもiOSアプリの開発、ビルドができるようになっています。Monacaデバッガーでは開発者ライセンスを持っていなくとも、Visual Studioで作ったコードを実機で動かせるようになります。さらにWindows Phone用のエミュレータも用意されています。このエミュレータではSDカードへのアクセス、位置情報、ネットワークの状態、バッテリーなど様々な状態を変更してテストを行えるようになっています。

初期では2種類しかインストールされていませんが、Visual Studioエミュレータ for Androidというソフトウェアを起動すると、様々なエミュレータが表示されます。Androidのバージョンや機種ごとにダウンロードして試すことができます。

Visual Studioを使いますとApache Cordovaを使ったスマートフォンアプリが簡単に行えるようになります。Apache Cordovaは本日見てきた様々なセッションの中で語られていたHTML5を使ったアプリケーションをWebブラウザだけではなく、スマートフォンのアプリとして幅広く使えるようになります。例えば業務アプリなど、スマートフォン向けのちょっとしたアプリを作る際にも、高度なプログラミング言語を覚える必要なく、すでに知っているWeb技術で開発できるようになります。


本セッションの資料はSlideShareで公開されています。こちらもぜひご覧ください。

banner_02

Enterprise HTML5 Seminar 2017レポート(4)「IT企業/IT技術者のためのHTML5 さらなる優位性の築き方」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は特定非営利活動法人 LPI-Japan 和田 真輝様による「IT企業/IT技術者のためのHTML5 さらなる優位性の築き方」の内容を紹介します。


昨年我々が開催したHTML5ビジネスサミット2016というイベントがあります。ここではSAP社に登壇いただいたのですが、彼らのコンセプトはデザインシンキングになります。SAP社は利用ユーザ企業の考え、行動から学んでデザインに取り入れていこうという考え方をしています。ユーザに対してどうやって高いユーザ体験を提供できるのか、そういった観点からHTML5を導入しています。

次に話を少し変えまして、業務システムにおいてHTML5のどういった機能が役立つのかを紹介します。一つ目はワンソースでマルチデバイスに、二つ目はオフライン時にはService Workers、最後にGPS情報の活用になります。

現在業務の世界ではモバイルデバイスの利用が当たり前になっています。2018年には1,070万のモバイルデバイスが業務で活用されていると言われています。そのような中ではデスクトップだけでなくスマートフォン、タブレットにもワンソースでサービスを提供できなければいけません。

モバイルデバイスの利用が増加するのに伴って、それを使ったモバイルワークも増加していきます。昨今政府がテレワークという単語を使うのですが、これはリモートワークのことだけでなく、サテライトオフィスやモバイルワークも含まれています。そのような中、別な階や場所を移動したら無線が使えなくなってしまったというと不便きわまりないでしょう。Service Workersではクライアント側でキャッシュする仕組みなので、オフライン時にも仕事が続けられるでしょう。

html5%e3%82%a8%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%97%e3%83%a9%e3%82%a4%e3%82%ba%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc7

最後にモバイルデバイスを使った業務として役立つのはモバイルデバイスに付属したセンサーや機能を使ったものです。例えば位置情報を扱うためのGPSがあります。配送車やルートサービスなどのGPSと業務システムが連携していれば、急な呼び出しに対しても一番最適な担当者が訪問できたり、ログを取っておくことでルートの確認ができるようになります。

次にパフォーマンスの観点でお話をします。例えばAmazonでは100ms反応を速くするだけで利益が1%増えると言われています。それはコンシューマ向けに限らず、今後業務システムにおいてもデザインシンキングの考えに基づくのであれば、必ずパフォーマンスが問題になってきます。お勧めは下記のGoogleの方が紹介してくれる手法です。

https://www.youtube.com/watch?v=GNAENzKdciQ&list=PLAwxTw4SYaPmKmNX-INgcxQWf30KuWa_A

JavaScriptはインタプリタなプログラミング言語なので、実行速度が遅いんじゃないかと言われることがよくあります。しかし、JITコンパイラですので遅くはありません。速度を比較したグラフによれば、Javaよりも圧倒的に高速です。
html5%e3%82%a8%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%97%e3%83%a9%e3%82%a4%e3%82%ba%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc10

では次に企業においてどういった人材が求められているのかを紹介します。今のシステムというのはクライアントとサーバの構成で成り立っています。そうした中、サーバサイドだけ、クライアントサイドだけでなく、両方できるような人材が優位性を生むようになっています。

そこで役立つのがHTML5プロフェッショナル認定制度ではないかと思います。Level1とLevel2があり、前者は「マルチデバイスに対応したWebコンテンツをHTML5を使って企画・制作できる」、後者は「最新のAPIを駆使したWebアプリケーションを設計・開発できる」のを目的としています。HTML5認定の評価として、今後取得したい資格の一位に選ばれています。

html5%e3%82%a8%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%97%e3%83%a9%e3%82%a4%e3%82%ba%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc14

 

banner_02