Clik here to view.
さくっとフロントエンド開発をはじめよう。ワンライナーHTTPサーバまとめ
Webフロントエンド開発を行っていると、手元の環境でさくっとHTTPサーバを立ち上げたいと思うことがあるかと思います。専用のソフトウェアを使うのも良いですが、ダウンロードするのさえ億劫です。 そこで各種言語、ワンライナーで実行できるHTTPサーバをまとめて紹介します。今回はライブラリなどを用意せずに実行できるものに限っています。 Ruby まずはRubyから。2つ方法があります。 ruby...
View ArticleClik here to view.
hifiveのUIライブラリ紹介「タイルコンテナ」
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。 動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。 使い方 まずHTMLの構造はタイル表示になります。 そして全体を覆っているクラスに対して...
View ArticleClik here to view.
FOSSASIAで発表してきました
APAC最大規模のオープンソース・ソフトウェアカンファレンス、FOSSASIAが3月17〜19日、シンガポールにて開催されました。 その2日目、18日にhifiveの登壇をしてきました。...
View ArticleClik here to view.
hifiveのバリデーション機能の設定について
hifive 1.2では入力値の検証（バリデーション）機能が追加されました。これはHTMLタグのdata-*要素に設定する入力値の検証機能です。今回はそのタグに設定する要素について紹介します。 設定パターンは13個 現在の検証として設定できるパターンは13個となっています。例えば requiredであれば、 data-required という指定を行います。 required...
View ArticleClik here to view.
Pitalium Explorerによるスクリーンショット比較方法について
Pitaliumを使うとスクリーンショットベースのテストができます。そしてもしエラーが発生した際にはPitalium Explorerを使って正解時の画像と、失敗時の画像を比べることができます。 今回はその画像の比較方法を紹介します。 Quick flipping...
View ArticleClik here to view.
yieldを使って非同期処理を順番に実行する
JavaScriptはシングルスレッドで動作するので、ネットワーク処理などが非同期で行われるようになっています。そうしないとAjaxを使っている間、何も入力や画面スクロールなども受け付けなくなります。 しかし非同期実行のしわ寄せとして、コールバックが多くなってネストが深くなったり、Promiseでも処理が分かりづらくなります。例えば非同期処理を伴ったループ処理を書こうとすると、次のようになります。...
View ArticleClik here to view.
hifiveのバリデーションを使いこなす
ユーザの入力値を検証するのはWebアプリケーションを開発する上で大事な機能です。従来はユーザの入力をサーバサイドで検証し、入力エラーがあれば再度フォームをエラーメッセージとともに表示するのが一般的でした。しかしこの場合、レンダリングにかかる時間であったり、入力を再現するのが面倒（特にファイル送信など）でした。...
View ArticleClik here to view.
hifiveのバリデーションで複雑な条件を設定する
hifiveの入力値チェック（バリデーション）機能であるFormControllerはHTMLタグに設定するだけで入力値チェック機能を追加できます。必須や数値の桁数チェックなどは簡単に行えますが、ワークフローによってはより複雑なフローが求められることでしょう。 そこで今回はより複雑な入力値チェックを実現する方法について紹介します。 1. 正規表現でチェックする...
View ArticleClik here to view.
HTML5のping属性を使ってみよう
HTML5では多くのAPIが追加されていますが、HTMLにおいてもタグや要素が追加されています。今回はその一つ、Aタグに追加されたping属性についてです。 ping属性は以下のように設定します。 To Google これでAタグをクリックすると http://www.google.co.jp へ遷移するのですが、その際同時に example.com へも...
View ArticleClik here to view.
バリデーションプラグインの紹介
hifiveのバリデーションライブラリ、FormControllerでは表示設定についてプラグインで設定を行います。現在、次のプラグインを提供しています。 composition フォーム全体に対してバリデーションを行い、失敗したすべての項目について指定した箇所にメッセージを表示します。 実際の動作はこちらのデモにて確認できます。バリデーションはボタンを押したタイミングでのみ行われます。 style...
View ArticleClik here to view.
バリデーション結果のオブジェクトValidationResultについて
hifiveでバリデーションの処理を行うとValidationResultが返ってきます。このオブジェクトでバリデーションが成功したか否か、さらに失敗だった場合にその原因を見つけることができます。 今回はValidationResultについて紹介します。 ValidationResultのプロパティ invalidCount数値。バリデーションに引っかかった入力項目の数...
View ArticleClik here to view.
hifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」
今回から何回かに分けて、hifiveのデータグリッドライブラリの使い方を紹介していきます。まず今回は基本形の紹介です。 今回のデータグリッドは次のような特徴を持っています。 ヘッダーが固定表示 データをスクロールしてもヘッダーは固定 ヘッダーでソート 行を選択するとハイライト なお、デモはこちらでご覧いただけます。 HTMLについて...
View ArticleClik here to view.
グリッドに複数選択可能なチェックボックスを追加する
業務でよく使われるグリッド（テーブル）についてはhifiveでも力を入れて取り組んでいます。今回は業務要件でありがちな、行を複数選択する機能について紹介します。 実際に動作している様子は以下の画像になります。 実際の動作はこちらで確認できます。 表示する際の設定 グリッド表示を行うDataGridを初期化する際に二つの変更を行います。まず、カラム表示を追加します。 以下の...
View ArticleClik here to view.
hifiveのデータグリッドライブラリを使いこなす（2）「左カラムを固定化」
業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。 今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。 左カラム固定のデモ 実装すると次のようになります。...
View ArticleClik here to view.
hifiveのデータグリッドライブラリを使いこなす（3）「ページネーション」
業務要件でグリッドを使っているとよくあるページネーション対応。大量のデータを表示する際に、20件ずつ表示するようにして欲しいと言った話を聞いたことは多々あるでしょう。 JavaScriptでページネーションを実現するのは面倒ですが、hifiveのグリッドコントローラを使うと容易に実装できます。 こちらにデモがあります。なお、ベースになるコードは...
View ArticleClik here to view.
hifiveのデータグリッドライブラリを使いこなす（4）「遅延読み込み」
業務システムではデータ件数が膨大な数に上ることが多々あります。そんな時にデータを一気に表示するとデータベースの負荷が高くなったり、DOMレンダリングに時間を要するようになります。 そこで使いたいのが遅延読み込みです。hifiveのグリッドコントローラを使えば遅延読み込みも簡単に実装できます。...
View ArticleClik here to view.
hifiveのデータグリッドライブラリを使いこなす（5）「データ編集」
業務要件でありがちな、データグリッド上でのデータ編集をhifiveのデータグリッド上でサポートする方法を紹介します。 今回のデモはこちらにあります。動作しているところは次の画像の通りです。 ベースとしてhifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」のグリッドを使います。 データを編集可能にする グリッドを編集できる状態にするのは簡単です。初期化する際のパラメータで、...
View ArticleClik here to view.
スクリーンショットを撮影&加工するソフトウェアまとめ
業務システムを作っている中、必要になるのがヘルプドキュメントやマニュアルではないでしょうか。そうしたドキュメントを作る際には画面のスクリーンショットが欠かせません。そして注目して欲しい部分に印をつけたり、他を隠すなど多少の加工が必要です。 今回はそんなスクリーンショットの撮影に加えてちょっとした加工まで行えるソフトウェアを紹介します。 rsms/scrup Mac...
View ArticleClik here to view.
チャートライブラリの使い方（1）「基本編」
今回から何回かに分けてhifiveのチャートライブラリの使い方を紹介します。 まず今回はごく基本的な折れ線グラフを描いてみます。 サンプルはこちらにあります。結果は次のようなグラフになります。 チャートライブラリの読み込み チャートを描く際には通常のhifiveに加えて、以下のライブラリを読み込みます。 graphic-renderer.js chart.js グラフを表示する...
View ArticleClik here to view.
チャートライブラリの使い方（2）「データを塗りつぶす」
前回のデモをベースに今回はデータに塗りつぶし処理を加えてみたいと思います。累積グラフなどを作る際に利用できるでしょう。 サンプルはこちらにあります。実行した際の画像は下記の通りです。 基本になるグラフは前回のものになります。今回はそれに加えた変更ポイントについて紹介します。 系列データの種類を変更 系列データを line から stacked_line...
View Article