全体のデータ修正とそのリアルタイム反映に加えて、今回はモデルのメソッドを使ってみたいと思います。
例えばTwitterなどでは入力している文字数が分かるようになっています。同じように文字数を出してみましょう。
前回までのHTMLは次のようになっています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span><br />
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
</div>
<script>
$(function() {
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
var item = model.create({
id: '1',
text: 'Hello World'
});
h5.core.view.bind($('#container'), item);
// 値を変更
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
// 値を変更した時の処理
$("#edit").on("keyup", function(e) {
item.set('text', e.currentTarget.value);
});
});
</script>
</body>
</html>
入力文字数を出す部分を作る
HTML上で現在の入力文字数を出すようにします。
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
<!-- 追加 -->
(<span data-h5-bind="text_length"></span>)
モデルにメソッドを追加
次にモデルに text_length メソッドを追加します。
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
},
//
// text_lengthの追加（ここから）
//
text_length: {
type: 'integer',
depend: {
on: 'text',
calc: function () {
return this.get("text").length
}
}
}
//
// text_lengthの追加（ここまで）
//
}
});
text_lengthは元々のデータフォーマットには存在しない項目ですが、schemaの中に定義します。型の種類と、関連するデータを指定します（今回はtextです）。そしてcalcオプションで実際の処理内容を指定します。textデータはgetメソッドを使ってデータを取り出します。そしてその文字数をlengthで取得、返却しています。
ここまでできあがると、次のように文字を入力する度に文字数が変わるようにします。
新しいメソッドを自分で追加できるのでリアルタイムバリデーションなどで利用が可能です。次回は項目を増やして配列を管理してみましょう。
前回のデータバインドを使ったHello World表示に続いて、今回はさらにデータの入力との連携も行ってみたいと思います。なお前回終了時のコードは以下になります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span>
</div>
<script>
$(function() {
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
var item = model.create({
id: '1',
text: 'Hello World'
});
h5.core.view.bind($('#container'), item);
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
});
</script>
</body>
</html>
ここで、入力欄を追加します。
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span><br />
<!-- 以下を追加 -->
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
</div>
data-h5-bindを使ってvalueに値を表示する場合は、 data-h5-bind="attr(value):text" といった方法を使います。attr(value)で入力欄のvalue要素を指定します。そしてその時に表示する値を :text という指定で表示します。
次に入力欄を編集した時のイベントをkeyupで受け取ります。そしてその値をitemにセットします。
$("#edit").on("keyup", function(e) {
item.set('text', e.currentTarget.value);
});
これで完了です。HTML全体は次のようになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span><br />
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
</div>
<script>
$(function() {
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
var item = model.create({
id: '1',
text: 'Hello World'
});
h5.core.view.bind($('#container'), item);
// 値を変更
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
// 値を変更した時の処理
$("#edit").on("keyup", function(e) {
item.set('text', e.currentTarget.value);
});
});
</script>
</body>
</html>
実際に動かすと次のようになります。
このようにデータの修正と表示の反映がリアルタイム化できると、データ編集後のAjaxを使ったサーバへの保存処理もそのまま使えるようになります。次回はもう少し複雑な表示を行ってみたいと思います。
データバインドについての詳細はチュートリアル（データバインド編） – hifiveでご覧いただけます。
最近Reactが盛り上がっています。特に大きな要因として、UIの描画を気にせず、Virtual DOM側に実際の描画は任せられるというのが挙げられます。
Virtual DOMの方式ではありませんが、hifiveでもデータを変更すると描画が変わる、データバインドという機能が提供されています。今回はそんなデータバインドの使い方をステップを踏みつつ紹介します。
基本のHTML
今回はJavaScript/スタイルシートともにダウンロードせず、CDN版を使います。一緒に使うjQueryもGoogleのCDN版を使います。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>
モデルを作る
データバインドを行う際にはまず、モデルを定義する必要があります。最も簡単な例としては次のようになります。
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
モデル名とスキーマは必須です。また、ユニークなキーを設定する必要があります（今回はidです）。そして他のフィールドについても型を指定します。
オブジェクトを作る
定義したモデルに従ってオブジェクトを作ります。
var item = model.create({
id: '1',
text: 'Hello World'
});
そしてこれをビューにバインドします。
h5.core.view.bind($('#container'), item);
このようにバインドすると、
<div id="container">
<span data-h5-bind="text"></span>
</div>
といった形で Hello World が表示されます。
データを変更してみる
では次にデータを変更してみます。例えばボタンを設置して、その押した時のアクションでラベルを変更します。
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span>
</div>
そしてJavaScriptは次のように書きます。
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
こうするとボタンを押した時にラベルが変わります。
全体のソースコードは以下になります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span>
</div>
<script>
$(function() {
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
var item = model.create({
id: '1',
text: 'Hello World'
});
h5.core.view.bind($('#container'), item);
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
});
</script>
</body>
</html>
データさえ変更すれば、UI側は自動で変更してくれるのはとても便利です。DOMを変更する場合、変更し忘れであったり、別な場所からもデータを変更してしまう（それを補足できない）といった問題があります。hifiveのデータバインドを使えば、UIとデータの一貫性は保たれますのでコードの品質が保たれるはずです。
データバインドについての詳細はチュートリアル（データバインド編） – hifiveでご覧いただけます。
Webベースの業務システムを作っている際に必要になるのがデータの一覧画面です。多くのデータを一覧でき、かつスクロールした際にもデータの確認が容易であることなどが求められます。
今回はそんなデータを表示するのに最適なOSSのグリッドライブラリを紹介します。一部のライブラリは編集機能も備えており、さながら表計算ソフトウェアのようになっています。
Sensei Grid
シンプルかつ軽量なデータグリッドライブラリです。矢印キーやタブを使ったセルの移動、エンターキーで編集ができます。とてもシンプルなライブラリなので、マスタメンテナンスなどに向いています。（注：2015/06現在「Currently not intended for production use」とのことです。）
kawasima/jagrid
Excel方眼紙を再現できるライブラリです。こだわればかなり精密な帳票デザインも行えます。
mleibman/SlickGrid
表の中にグラフやチェックボックスを埋め込み表示することもできます。そのため、ガントチャート風の表示を行うこともできます。1万行以上のデータを表示しても軽快に動作します。
mmurph211/Grid
上下左右の行/カラムを固定表示したり、行を選択してハイライト表示できるライブラリです。データのソートもサポートしています。シンプルですが多くの業務要件をカバーしているでしょう。
SitePen/dgrid
カラムの動的な追加、ソート、並び替え、セル単位の選択、ページネーション、グルーピングなどの機能があります。ページネーション処理なども動的に変更できるので、利用者によってカスタマイズするといったこともできそうです。
Knockout-Contrib/KoGrid
ソート、グルーピングなどの機能に加えてサーバサイドと連携したページネーションもサポートしています。
jqGrid
jQueryプラグインとして開発されているグリッドライブラリです。ツリーグリッド、検索、サブグリッドなどの高度なグリッド表示もサポートしています。
Sigma Ajax Grid – Ajax editable data grid – DHTML grid control with flexibility and user API.
二つのグリッドを連携させるマスター/詳細グリッドがあります。さらにや矢印キーでの移動、PDFやExcelでのエクスポート、印刷など多彩な機能が揃っています。このライブラリはライセンスがLGPLですが、別途商用ライセンスも設定されているようです（テクニカルサポートなども受けられるようです）。
Sigma Ajax Grid – Ajax editable data grid – DHTML grid control with flexibility and user API.
これらのグリッドライブラリを使えば自社システムはもちろん、クライアント向けWebアプリケーションにおいてもユーザビリティの高い高度な機能が提供できることでしょう。グリッド表示におけるユーザの不満もその殆どが解消するのではないでしょうか。
hifiveでもヘッダーが複雑なグリッド、ページンググリッド、スクロールグリッドといったグリッドをデモしています。ぜひご覧ください。
皆さんのWebシステム開発に活かしてください！
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回は、IDEというよりは”エディタ”に分類されるものかもしれませんが、先日Microsoftがリリースしたマルチプラットフォーム向け開発者用エディタ、Visual Studio Codeを紹介します。
ASP.NET v5とnode.jsサポート
Visual Studio CodeはIDEであるVisual Studioとは異なり、軽量なプログラミングエディタと言った位置づけになります。コンパイルのような機能はなく、ASP.NET v5とnode.jsのみサポートしています。ただしHTML5やJavaScriptの入力補完をサポートしていますので、フロントエンド開発にも利用が可能です。
対象環境はWindows、Mac OSX、Linux
Visual Studio Codeは旧Atom Shell、現Electronを使って開発されているエディタです。同じElectronベースとしてはAtomが知られています。Atomと同じようにJavaScriptで作られたデスクトップアプリで、WindowsのみならずMac OSXやLinuxでも動作します。
HTML、スタイルシート、JavaScriptのハイライト対応
フォルダを開くプロジェクトブラウザ機能があります。HTMLファイルなどはハイライト、補完入力に対応していますので開発速度が増すでしょう。また、JavaScriptファイルはsrc属性に書かれたファイルへジャンプすることも可能です。
Gitでのバージョン管理対応
標準でGitによるバージョン管理をサポートしています。未コミットなファイルを一覧したり、Visual Studio Code上からコミットすることもできます。
ファイルの差分表示も可能です。
プロジェクト内のファイル検索
あらかじめ開いているプロジェクトフォルダ以下のファイル検索ができます。ファイルの中身も検索可能です。
入力補完
入力補完はHTML5/JavaScript/CSSに対応しています。JavaScriptの場合、外部ファイルの自動補完には対応していないようです。
コマンドパレット
コマンドはAtomと同じくコマンド+Shift+Pで呼び出します（Windowsの場合はCtrl + Shift + Pだと思われます）。ここからVisutal Studio Codeの操作がほぼすべて可能です。
エラー検出
コマンドパレットで!と入力するとJavaScriptのエラーが表示されます。変数が定義されていない場合のエラーなどになります。
Visual Studio Codeは軽量で、すぐに立ち上がって開発が可能です。IDEはどうしても重たくなってしまうので、Visual Studio Codeのように高速に動作してくれるプログラミングエディタはフロントエンド開発向きかも知れません。
機能は決して多くありませんが、使い勝手は良さそうです。まだプレビュー版とあって、今後の開発が楽しみなエディタです。
WBSの表示などによく使われるガントチャートUIのライブラリ、これまでに紹介したものは以下の通りです。
今回も続いてガントチャートライブラリの紹介になります。WebベースのガントチャートはJSONでデータを渡し、それを描画するものが多くなっています。つまり既存の業務システムからデータフォーマットを合わせてJSON出力すれば同じような描画が可能ということです。タスク管理系システムやCRMなどと連携させてみると言った使い方も良さそうです。
今回はJSGanttChart、タスクの作成、編集もサポートしたガントチャートライブラリを紹介します。
JSGanttChart
JSGanttChartはjQuery、Backbone.js、Underscore.jsを使ったガントチャートライブラリとなっています。UIは次のようになります。左右のスクロールもサポートされており、多彩な表示が可能となっています。
マウスオーバーすると、該当のタスクがハイライトされます。
タスクの編集機能
表示処理は他に特に機能はありません。続いてタスクの作成、編集を行ってみます。
New Stageをクリックすると新しいタスクを登録する画面が表示されます。
日付はカレンダーで登録できます。
こんな感じでタスクが登録されました。
達成度合いを数値で入力できます。
さらに親タスクを指定したり、バッファーの表示もサポートしています。
データフォーマット
JSGanttChartは多機能な分、データフォーマットが多少複雑です。基本は次のようになります。
var gantt = JSGanttChart.create({
resources: {
programmer: "Peter West",
supervisor: "mc",
cosupervisor: "max"
},
types: {
// 種別を指定
},
elements: [
// タスクを指定
]
});
jQuery("#container").append(gantt.render().el);
種別（types）は次のように定義します。
analysis: {
name: "Analysis",
color: "#C79810" // yellow
},
critical: {
name: "Critical",
color: "#CC0000" // red
},
ラベルと色を順番に指定します。
タスク一覧（elements）は次のようになります。
{
id: "brief",
name: "Project Brief",
predecessors: ["meeting1"],
startDate: "3 October 2011",
endDate: "14 October 2011 16:00",
type: "critical",
slackEndDate: "21 October 2011 16:00",//slackDuration: 4, // or slackEndDate: date
elements: [
{
id: "briefdraft1",
name: "Draft 1",
startDate: "3 October 2011",
endDate: "14 October 2011 16:00",
type: "analysis",
percentageDone: 100,
estimatedHours: 5
},
:
],
percentageDone: 95,
estimatedHours: 10
},
:
各種別ごとに子タスク（elements）を持ちます。その中で開始日、終了日を指定していきます。stackEndDateはバッファーです。
JSGanttChartは複雑な表示ができる分、多少データ構造も複雑になります。とは言え大規模なシステムなどでタスク構造が複雑化する中で分かりやすい表示を行おうと思ったらお勧めのライブラリです。
JavaScriptのテンプレートエンジンが多数出ていますが、そうしたテンプレートエンジンは一般的にJSONデータと組み合わせてHTMLを描画します。その時のJSONデータはAjaxで取得することが多いかと思います。
そんな中でのJSONデータとテンプレートを組み合わせて描画結果を確認するというのはとても面倒です。hifiveではejsをテンプレートエンジンに使っていますが、そのejsとJSONとを組み合わせた描画結果を手軽に確認できる仕組みがテンプレートエディタになります。
テンプレートエディタの使い方
テンプレートエディタは次のような画面構成となっています。
上がテンプレートになるejs、下が結果のプレビューです。テンプレートの修正はリアルタイムに反映されます。
リロードがかかる訳ではないので、ページ半ばでのテンプレート修正もスクロールが行われることなく、その場で修正が反映されます。
ページ中央にあるハンドルはドラッグして表示領域の変更が可能です。
テンプレートの他に、データタブがあります。こちらはJSONデータが表示されています。このJSONデータを修正して、プレビューの表示結果を変更できます。
JSONデータはGETやPOSTを使って外部データの取得を行うことも可能です。実際に使っているWebシステムのURLを指定すると、稼働しているシステムのUI設定がとても楽になるでしょう。
デフォルトのライブラリはBootstrap 3.0となっていますが、jQuery Mobileに切り替えることも可能です。
例えばjQuery Mobileにするとボタンの形状が変わります。
テンプレートエディタを使うとWebシステム開発時のデザイン確認が容易になります。これまでのWebではデータをHTMLに直接描画していましたが、Ajaxを使うようになったことで表示確認が複雑になっています。hifiveはデータはJSON、テンプレートエンジンはejsとなっていますので、テンプレートエディタの結果をそのまま組み込んで利用が可能です。さらにテンプレートエディタはダウンロードして使えますので、自社システムのWebサーバ上に配置も可能です。
テンプレートエディタはIE8以上で動作します。テンプレートエディタ – hifiveにて詳しい説明、使い方を紹介しています。また、こちらではサンプルデータを使った試用も可能なのでぜひお試しください。
業務システムでは担当者にテキスト入力を行ってもらうのは良くあることです。そんな時、単なるテキストエリアでは書きたい内容が書き切れないのではないでしょうか。そこで使われるのがツールバーを備えたWYSIWYGエディタです。
かつてはCKEditorがよく知られていましたが、あまりに多機能であるために動作が重たく、使いこなせないケースがよくありました。そこでもっとシンプルに必要十分な機能を備えたエディタを紹介します。
wysiwygetize
単なるテキストエリアに見えますが、文字を書いたり選択するとフローティングのツールバーが表示されます。画像貼り付けの機能はありませんが、文字装飾と見出し設定ができます。
bootstrap-wysiwyg
Bootstrapと組み合わせて利用します。画像の埋め込み、リンク、文字の配置など十分な機能が備わっています。
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
freshereditor
見た目は通常のテキストですが、編集可能となっています。contentEditableをサポートしています。
Wysihtml editor
HTML5なWYSIWYGエディタです。iframeも使っていません。ブラウザはIE8から対応しています。
Trumbowyg
HTML5対応、セマンティックなエディタです。15KB程度と軽量なのも特徴です。画像の埋め込み、フルスクリーン表示もサポートしています。
Trumbowyg : a lightweight WYSIWYG editor | Alex-D / Alexandre Demode
Quill
多数のAPIを備えているのが特徴です。IE9以降に対応しています。スマートフォンやタブレットからも利用できます。
Quill – A Rich Text Editor with an API
Morrigan WYSIWYG HTML Editor
jQuery UI、iframeを使っています。ブラウザはIE8以上から対応で、すっきりとしたデザインが特徴です。
Scribe
IE9から対応しています。シンプルなインタフェースで、カスタマイズ前提という作りになっています。ミニファイ&Gzipして11.5KBと軽量な作りになっています。
Redactor WYSIWYG html editor
145のAPIメソッド、ドラッグ&ドロップのファイル、画像アップロード機能、テーブルタグや動画埋め込みなどとても多機能なエディタです。
bootstrap-wysihtml5
Bootstrapのデザインを活かしたエディタです。他のテーマにしても親和性が保てるかと思います。ファイルアップロードはありませんが、URLを指定した画像埋め込みは可能です。
いかがでしょうか。最近はごくシンプルに、かつカスタマイズも容易なものが好まれる傾向があります。自社のシステム要件に合わせてカスタマイズすれば利用者の混乱は少なく、余計なデータが入り込むこともないでしょう。
ぜひ活用してください！
システム開発を行っている際に、デバッガーはとても重要な存在です。大抵書いたコードが一発で思った通りに動くことはなく、ブレークポイントやトレースを使って動作の確認を行います。Webアプリケーションにおいてもそれは変わらず、Webブラウザに付属する開発ツールが大いに活躍します。
Google ChromeのDevToolsがよく知られており、好んで使う人も多いでしょう。一方IEにも同様に開発者ツールがあり、バージョンを重ねるごとに機能強化されています。ただ、ChromeのDevToolsに慣れていると、IEの開発者ツールは使い勝手が「ちょっとずつ違っている」のが気になる方も多いのではないでしょうか。また、複数のブラウザでデバッグしているとき、それぞれツールの使い勝手が違うのも困ったものです。
そこでマイクロソフトが開発したのがIEDiagnosticsAdapterというツールです。これはProxyとして動作するソフトウェアで、IEでChromeのRemote debug protocolを使えるようにするソフトウェアになります。つまりIEでGoogle ChromeのDevToolsが使えるのです。
まだリリースされて間もなく、バージョン0.1.3と絶賛開発中のソフトウェアですが、今回はIEDiagnosticsAdapterのファーストインプレッションとして紹介したいと思います。
前回のAngular Ganttに続いてガントチャートライブラリの紹介になります。ガントチャート風表示はExcelなどで行われている方もいますが、曜日ごとに色をかえたり、日程をずらす度にセル全体を入れ替えるのはとても面倒です。開始日、終了日そしてタスク名程度でWebブラウザ上に表示できるのであれば、ライブラリを使ってガントチャートを作る方がメンテナンス性もよく、見やすいものができるでしょう。
今回はjQuery.Gantt、jQueryで作れるガントチャートライブラリを紹介します。
hifive開発者ブログ 