hifive開発者ブログ

画像編集というとローカルOSで行ったり、サーバサイドで行うような処理に感じますが、最近ではWebブラウザ側でも十分に行えるようになっています。そのために使われるのがHTML5で標準になったCanvasです。

今回はこのCanvasを使ってクライアントサイドでの画像編集を実現するJavaScriptライブラリを紹介します。

grafijs/grafi

画像のネガポジ反転、ぼかし、シャープ、グレースケール加工などをメソッドを実行するだけで実現します。一部の機能はサポートされていないことがあります。 grafi.solarize(img) のような形でメソッドを実行するだけです。

grafijs/grafi

alexmic/filtrr: Instagram-like image filters in pure JavaScript.

Instagram風の画像加工が行えるライブラリです。多数のエフェクトがあらかじめ作成されており、それに合わせて実行するだけです。画像を手軽に良い感じに加工してくれるライブラリとして重宝するでしょう。

alexmic/filtrr: Instagram-like image filters in pure JavaScript.

jseidelin/pixastic: JavaScript Image Processing Library

一枚の画像に対する処理はもちろん、複数の画像を重ねて表示するような処理もできます。エッジ検出やノイズを載せるような複雑な処理もできます。

jseidelin/pixastic: JavaScript Image Processing Library

rendro/vintageJS: Add a retro/vintage effect to images using the HTML5 canvas element

画像をビンテージ風に加工してくれるエフェクトライブラリです。パラメータで細かく指定もできます。

rendro/vintageJS: Add a retro/vintage effect to images using the HTML5 canvas element

knt5/fur-shader: Make everything fluffy (mofumofu)

画像に短い毛を生やしつつ揺らすことでモフモフ感を出すライブラリです。普通の画像とはまた違った楽しさが生まれます。

knt5/fur-shader: Make everything fluffy (mofumofu)

Specro/Philter: Philter is a JS plugin giving you the power to control CSS filters with HTML attributes.

CSSのフィルタを使って画像加工をします。マウスオーバーと組み合わせたり、徐々に変化させることで写真をより印象づけられます。

Specro/Philter: Philter is a JS plugin giving you the power to control CSS filters with HTML attributes.

errozero/glitchatron: Glitch Art Generator

グリッチと呼ばれるデータが壊れた雰囲気の加工ができるライブラリです。使いどころは限られますが、パラメータで何度も加工を繰り返せるのは利点です。

errozero/glitchatron: Glitch Art Generator

karlhorky/gray: Make an image grayscale in all browsers

様々な手段で画像をグレースケール化します。CSSだけ、JavaScript、画像のタグ、スプライト画像への適用などです。JavaScriptでの画像なので、グレースケール化を解除するのも簡単です。

karlhorky/gray: Make an image grayscale in all browsers

arahaya/ImageFilters.js: A Javascript Image filter library for the HTML5 canvas tag.

画像に対して40種類以上の多彩なフィルタリングができます。各パラメータも細かく指定できますので、細かく調整ができます。

arahaya/ImageFilters.js: A Javascript Image filter library for the HTML5 canvas tag.

これらのWebブラウザベースの画像加工ではCanvas APIやCSS3のフィルタが使われています。それらをJavaScriptから操作することでクライアントサイドだけで、何度も繰り返し適用できるエフェクトが実現できます。

サーバサイドで行う場合、オリジナルと加工後の画像を保存しておく必要がありますが、Webブラウザベースであればパラメータだけ保存しておけばよくなるでしょう。ぜひ活用してください。

Webアプリケーションの機能デモなどを一覧で表示する際にはスクリーンショットを使うのが一般的です。しかし画像になってしまうため、動きがあるデモであったり、クリックイベントなどがあっても今ひとつ分かりづらいのではないでしょうか。

そこでWebサイトをそのまま使ってサムネイル表示する方法が紹介されていますので、簡単に試してみたいと思います。

iframeを使う

コツとしてはiframeを使って、サムネイル化したいWebサイトをsrcに指定します。

そして、スタイル設定を使ってサイズを指定します。

これだけでは1440×900で表示されるだけなので、CSS3のtransformを使ってサイズを縮めます。

このように指定することで25%表示になります。

操作もできる

これの面白い点としてはクリックはもちろん、小さいですが入力も行うことができるということです。

使えない場合

iframeによる埋め込みを許可していないサイトでは使えませんのでご注意ください。

Simulating Website Thumbnails using Iframes — Mediumでは他にもオンマウスで外れるぼかしをつけたり、読み込みが終わるまでは別な画像を表示するテクニックが紹介されています。なお、transform自体はIE9以降でサポートされていますので、幅広いブラウザで使える手法と言えそうです。

ぜひお試しください！

hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。

今回はモーダルを複数回表示する方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。

使い方

まずpopup.jsとpopup.cssを読み込みます。

次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。さらに表示されたダイアログにもイベントがあるので、ejsでテンプレートを定義しておきます。

JavaScriptの実装は次のようになります。全部で3つに分かれています。まず一番最初のポップアップを表示する処理です。

この処理では sample.showPopup を実行しています。この処理は次のようになります。表示したポップアップの数を記録しておいて、それによって表示位置をずらしています。

最後にポップアップ内のイベントハンドリング処理です。

実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。

ポップアップ

大画面モニタやRatinaディスプレイの普及により、拡大しても画像が劣化しないベクターグラフィックス（SVG）の利用が増えています。そんなSVGをJavaScriptで簡単に利用できるライブラリをまとめて紹介します。

Snap.svg

Snap.svgはベクターグラフィックに特化し、アニメーション機能も備え、より高度にグラフィックスを操作できるライブラリです。Snap.svgは最新のブラウザ用に設計されていますのでマスキング、クリッピング、パターン、フルグラデーション、グループ機能など最新のSVGの機能をサポートしています。Snap.svgを導入することで、より自在にSVGを扱えるようになるのではないでしょうか。

Snap.svg

jQueryライクな操作 svg.js

svg.jsはjQueryライクに操作できるSVGライブラリです。圧縮時は約53kb程度と軽量になっています。このサイズでベクターグラフィックスのすべての機能とイベントによる描画、アニメーションなどを備えています。jQueryに慣れていれば、SVGが簡単に扱えることでしょう。

svg.js – A lightweight JavaScript library for manipulating and animating svg

SVGとCANVAS、WEBGLを利用したい時に Two.js

Two.jsはSVGの他、CanvasやWebGLを利用できるライブラリです。ベクターグラフィックをWebで使用する際の描画方法を選択するのですが、記述方法はそれぞれの描画APIをラップしているので、同様のコードで記述できます。これにより、ブラウザによって使い分ける必要がないので、クロスブラウザ対策として非常に有効なライブラリとなるでしょう。

Two.js

SVGでキーフレームアニメーション BonsaiJS

BonsaiJSはSVGレンダラーを搭載した、キーフレームアニメーションをサポートするライブラリです。パスやグループ、フィルター処理、画像描画にも対応し、モーフィングも可能です。Flashのキーフレームアニメーションの代替えを考えている場合は、利用を検討しても良さそうです。

BonsaiJS – A Graphics Library

まとめ

JavaScriptでSVGグラフィックを利用するにはSVG DOMを利用しますが、そのままでは複雑な要素・プロパティ・メソッドなどを操作する必要があるためコードが煩雑または冗長化してしまいます。今回ご紹介したようなライブラリを利用することでコードが簡素になるばかりではなく、メンテナンス性があがります。ぜひ利用を検討して下さい。

hifiveのUIライブラリにお絵かきボードがあります。こちらは写真に情報を追加したり、白紙の上に自分でイラストを書けるという機能ですが、もう一つの機能にMagnifier（拡大表示機能）があります。

実際のデモは下の画像になります。また、JSFiddle上で試すこともできます。

HTMLについて

HTMLはビューワーをDOMで定義するだけです。

JavaScriptについて

JavaScript側では h5.ui.components.artboard.controller.ArtboardViewerController と h5.ui.components.artboard.controller.MagnifierController を使います。それぞれ表示するクラスを定義します（今回は ‘.loadView’）。

さらに __ready イベントにてデータを読み込みます。データはSVGで定義します。

データを読み込んだら拡大表示処理を行います。拡大率、拡大するサイズを指定します。

全体のコードは次のようになります。

動いているデモをJSFiddle上で試すことができます。ぜひお試しください。

お絵かきボード

カンバンと言うとトヨタで実践されてきたワークフローですが、IT業界ではタスク管理を可視化したボードの意味で使われます。特にアジャイルやスクラム開発と組み合わせて使われることが多いようです。

そんなカンバンをWebブラウザ上で再現できるソフトウェアを紹介します。そのまま使うのはもちろん、自社システムへの組み込みも考えられるでしょう。

anydown/kanbandown

Markdownで書かれたリストをカンバンに変換して表示します。カンバンの各タスクはドラッグ&ドロップで移動できます。そうするとMarkdown側の内容が変更される仕組みです。つまり相互に関連し合っています。

anydown/kanbandown

mikiakira/php-simple-kanban: A web app that was inspired by Trello and cloned only the “Kanban” function with PHP

カンバンサービスで有名なTrelloを模したサービスです。バッグエンドはPHPで作られています。カンバンのボードは幾つでも作成できます。

mikiakira/php-simple-kanban: A web app that was inspired by Trello and cloned only the “Kanban” function with PHP

i-break-codes/scrum-board: JavaScript Scrum App to manage tasks with ease

スクラム開発に合わせたカンバンになっています。タスクをダブルクリックするとリンクやテキストなどを編集できるようになっています。

i-break-codes/scrum-board: JavaScript Scrum App to manage tasks with ease

antoinejaussoin/retro-board: Retrospective Board

Reactを使って作られたカンバンシステムです。タスクをいいね（または悪いね）して評価できるようになっています。

antoinejaussoin/retro-board: Retrospective Board

sprintly/sprintly-kanban: A Kanban Board for Sprintly

こちらもReactを使って作られています。ボタンが追加され、色分けできるなど、より多機能なカンバンシステムになっています。

sprintly/sprintly-kanban: A Kanban Board for Sprintly

kiswa/TaskBoard: A Kanban-inspired app for keeping track of things that need to get done. (Don’t forget to read the Wiki page!)

タスクにコメントをつけたり、添付ファイルを付けられるなど、かなり高機能な作りになっています。管理者としてログインし、ボードの設定を変更したりできます。

kiswa/TaskBoard: A Kanban-inspired app for keeping track of things that need to get done. (Don’t forget to read the Wiki page!)

wekan/wekan: The open-source Trello-like kanban (built with Meteor)

Trelloのクローンとして開発がスタートしています。チェックリストを追加したり、担当者を割り当てるなどプロジェクト管理で役立つ機能があります。Sandstormというプラットフォーム上で動作します。

wekan/wekan: The open-source Trello-like kanban (built with Meteor)

volpe28v/kanban-list: 「かんばん」風のタスク管理アプリ

カンバンを使ったシンプルなタスク管理アプリです。ドラッグ&ドロップで状態の変更、チェックで完了といった機能しかありません。それだけにすぐに使い方を覚えられるので、とりあえずカンバンが何なのか試したいという時に便利ではないでしょうか。

volpe28v/kanban-list: 「かんばん」風のタスク管理アプリ

カンバン風のUIを実現するためにはWebアプリケーションのようにAjaxでデータを送って管理する仕組みであったり、HTML5のドラッグ&ドロップを扱う必要があります。簡単な仕組みですが、HTML5を手軽に体験するのにぴったりなコンセプトと言えそうです。

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

今回はドラッグ&ドロップです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。

HTMLについて

まずHTMLですが、次のようにドラッグするDOM（#draggable）とドロップされるDOM（#droppable）を定義します。

各要素についてスタイルシートを付けます。

JavaScriptについて

全体像は次のようになります。

初期化処理

初期化処理ではDOM要素に対してドラッグ&ドロップの有効化、そしてコールバックの指定を行います。that.ownWithOrgを使うことでコントロール化したhifiveのメソッドで受けられるようになります。

要素がドロップされた時のコールバック

ドロップされた際にはクラスを追加して、文字を変更します。

要素が外れた時のコールバック

要素が外れた際にはクラスを外して、文字を元に戻します。

このように実装することでhifiveとjQuery UIのドラッグ&ドロップをシームレスに連携させられるようになります。タブレットやスマートフォンで使うと便利な機能なのでぜひ参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

HTML5ではvideoタグによって動画の再生がサポートされていますが、デフォルトのままではOSに依存した動画プレイヤーで再生されるだけです。これはあまり使い勝手がよくないと感じている方も多いでしょう。字幕をつけたり、再生速度を変更したり、さらに音量調整も手軽に行いたいはずです。

そこでHTML5/JavaScriptで作られた動画プレイヤーを紹介します。Webサイトはもちろん、Webシステムの中に組み込んで使うこともできるでしょう。

thiagopnts/kaleidoscope: An embeddable, lightweight 360º video/image viewer

ちょっと特殊な全天球（360度）動画と画像の閲覧に最適なビューワーとなっています。デスクトップであればマウスで視点を変更できます。スマートフォンの場合はジャイロセンサーを使っているので、デバイスを動かすと視点が変更できます。

スマートフォンでも動かすため、デフォルトの動画機能で再生せずに一度データをバッファリングして埋め込みで再生できるようになっているのもポイントです。

thiagopnts/kaleidoscope: An embeddable, lightweight 360º video/image viewer

clappr/clappr: An extensible media player for the web.

拡張をサポートした動画プレイヤーです。画質の変更、360度動画、外部動画（YouTubeなど）再生、Chromecast、再生速度変更、再生開始場所指定など様々な機能が提供されています。ベースをClapprとして、カスタマイズして導入することもできるでしょう。

デザインはシンプルなので、どのようなサイトやシステムであっても導入しやすいかと思います。

clappr/clappr: An extensible media player for the web.

ableplayer/ableplayer: fully accessible cross-browser HTML5 media player.

動画だけでなく、音楽ファイルの再生にも対応しています。オーディオは一つだけでなく複数トラックの再生も可能です。字幕の表示であったり、指定箇所からの再生もできます。APIも公開されているので拡張も容易です。

SRTだけでなく、VTTという字幕フォーマットにも対応しています。機能が豊富なので、様々なパターンに対応できるでしょう。

ableplayer/ableplayer: fully accessible cross-browser HTML5 media player.

flimshaw/Valiant360: An in-browser 360 degree panorama video player.

360度の全天球動画を再生する動画プレイヤーですが、実装としてWebGLを使っているのが特徴です。WebGLなのでGPUを使ったレンダリングが行えています。ブラウザは限定されますが、IE11以降であれば再生できます。

flimshaw/Valiant360: An in-browser 360 degree panorama video player.

jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery

jQueryプラグインとして作られている動画、オーディオプレイヤーです。jQueryベースなので扱い勝手が良いケースは多そうです。HTML5だけでなく、FlashやRTMPもサポートしています。もちろんプラグインもあり、それもjQueryで書けます。

jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery

videojs/video.js: Video.js – open source HTML5 & Flash video player

動画プレイヤーのJavaScriptとしては最も多機能でよく知られたソフトウェアだと思います。スキンのカスタマイズ、プラグインによる拡張がサポートされています。テーマやアイコンを追加することで自分たちのサイトに最適化された動画プレイヤーが作れるはずです。

videojs/video.js: Video.js – open source HTML5 & Flash video player

最近では動画コンテンツも増えています。そんな中では動画プレイヤーのUIにもこだわりが必要になります。機能面においても他サイトで当たり前になっている機能が提供されていないとユーザはストレスを感じるでしょう。

動画を上手に活用していくためにも今回紹介したようなソフトウェアをうまく利用してください。

今回はタブ表示です。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。

HTMLについて

HTMLですが、各タブ（リスト）のリンク先にタブのIDを指定しています。

JavaScriptについて

JavaScriptの実装は次のようになります。

初期化処理について

初期化処理ではタブの表示処理を行います。

タブがクリックされた時の処理

タブがクリックされた際にコールバックが受け取れます。Ajax処理などを行ったりするのに使えます。

このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。多くの情報を表示する際にタブは便利な機能なので、実装時の参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

HTML5でWebの表現力は一気に拡大しています。もちろんJavaScriptでも多数のAPIが追加されており、リッチなWebシステムを構築するのに必須機能が揃ってきています。今回は多数あるHTML5 APIの中で、業務システム周りで使えるものをピックアップして紹介します。

## File API

従来のJavaScriptではローカルファイルへアクセスできませんでした。HTML5で追加されたFile APIによって、ファイル選択ダイアログであったり、ドラッグ&ドロップされたファイルを読み込めるようになりました。

CSVファイルを読み込んだり、画像を読み込んで加工すると言った処理もできるようになっています。また、読み込んだ内容をAjaxでサーバに送ることで、ファイルのドラッグ&ドロップでアップロード処理を行うと言った処理も可能になります。

[File – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/File)

## Geolocation API

位置情報を取得するAPIです。一般的なPCにはGPSモジュールは入っていませんので、IPアドレス、WiFi、Bluetoothなど様々な情報を使って位置情報を特定します。一度だけ取得することも、継続的に取得し続けることもできます。精度はそこそこといったところなので、あまり厳密性を求めるような運用は難しいでしょう。

位置情報を使えば付近の情報を取得したり、駅名や住所の入力を省けるようになります。スマートフォンなど文字入力が面倒な場合において特に有効です。

[Geolocation の利用 – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation)

## クリップボードAPI

いわゆるクリップボードの操作が可能になるAPIです。文字列をコピーするだけでなく、HTMLやリンクなども対象になります。さらにファイルをコピーすることでアクセスできるようにもなります。

ユーザに任意の文字列をコピーしてもらうのに使ったり、画像やHTMLなどを含んだコンテンツをコピーしてもらうのに使えます。

[ClipboardEvent – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/ClipboardEvent)

## localStorage

キーバリュー型でデータの保存、取り出しができるストレージです。Cookieに似ていますが、もっと容量は大きな仕組みです。KVSなので、検索などの機能はありません。恒久的なデータ保存場所として使うのが便利です。

[Window.localStorage – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)

## History API

JavaScriptで画面を書き換えるようなWebアプリケーションの場合、History APIを使うことでブラウザの履歴として管理できるようになります。ハッシュまたはパーマネントURLを書き換える形になります。

History APIでパーマネントURLを使う場合、そのURLに対してダイレクトにアクセスしたとしてもきちんと表示されるようになっている必要があります。

[ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history)

## WebSocket API

サーバとクライアントで同期的にメッセージを送受信できる仕組みがWebSocketです。特定のチャンネルを購読したり、逆にブロードバンドにメッセージを流すこともできます。ソケットとついている通り、HTTPとは異なるプロトコルを使います。

そのためWebSocket用のサーバを別途用意したりする必要があります。その際セッションデータなどを連携させるなど実装には工夫が必要になるでしょう。

[WebSockets – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API)

—-

APIは他にもたくさんあります。WebGLであったり、Web NotificationといったAPIもあります。Webシステムをより便利にするためにHTML5 APIを活用してください。

今回はDOMのソートです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各要素をドラッグして上下に移動したり、別なカラムにドロップできます。

HTMLについて

少し長いですがHTMLは次のようになります。portlet クラスごとに移動できます。

スタイルシートについて

スタイルシートはカラム部分の設定などになります。

JavaScriptについて

JavaScriptは次のようになります。まずは概要です。

初期化処理

hifiveのコントローラが初期化された段階でソートの設定を行います。ここではドロップした時のイベント（stop）だけ指定しています。

ドロップ時のコールバック

次にドロップを止めた時のイベントです。

このように実装することでhifiveとjQuery UIのソート機能をシームレスに連携させられるようになります。ダッシュボードであったり、ユーザが自分でコンテンツを自由に設定できるページを作るのに使えるのでぜひ参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

JavaScriptは非同期で処理を行う言語です。そして、オブジェクト自身を意味する this が頻繁に使われます。しかし、非同期処理の後はthisが思ったものではなくなっていたりして、困った経験があるのではないでしょうか。

例えば次のような処理です。

これは普通ですが、非同期処理に変更します。

この時の this は Windowオブジェクトになるので、nameはありません。このようにスコープが変わってしまうと this の値も変化します。

その解決策として、次のように実行してみます。

setTimeoutを使っているのは変わりませんが、関数をそのまま渡すのではなく、 .call(this) を追加します。そうすると、this.nameはhifiveという値が取れるようになります。callの引数に渡す値が、その関数内でのthisとして使えるようになります。

via Function.prototype.call() – JavaScript | MDN

このようにして、thisのスコープを変えることでプログラミングしやすくなります。

own/ownWithOrgの使い方

hifiveではcall(this)ではなく、ownメソッドを提供しています。例えばコントローラの中で、次のように使います。

さらにhifiveのコントローラだけでなく、本来のthisを使いたい場合にはownWithOrgがあります。

このようにして this による混乱を抑えられるようになります。

サンプルコードをJSFiddleにアップロードしています。各処理における this の値の違いについて確認してみてください。

今回はバリデーションです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。入力して送信ボタンを押すとバリデーションが実行されます。

HTMLについて

HTMLは次のようになります。通常のHTMLと変わりません。

CSSについて

CSSはエラー時の色をつけるクラスなどを追加しています。

JavaScriptについて

JavaScriptは長いので、幾つかに分けて紹介します。まず、hifiveのコントローラ化が完了した際の__readyイベントにてバリデーションの設定を行います。

この際、入力チェックを行う際などのイベントハンドラも設定もします。this.ownWithOrgを使うことでhifiveのコントローラ自身を渡せるようになります。

後は各イベントハンドラの実装になります。

最後にチェックボックス、ラジオボタンのバリデーションについて別途実装します。

hifiveでもvalidation機能を提供していますが、使い慣れた方を採用するケースもあるでしょう。そうした時にはコールバックの管理などはhifiveで行うことで、よりメンテナンスしやすいバリデーション実装ができるようになります。

実際に動作するデモはJSFiddleにアップロードしてあります。お試しください。

今回はモーダルウィンドウです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。ボタンを押すとモーダルウィンドウが表示されて、情報を入力すると一覧が更新されます。

HTMLについて

HTMLは主に3つの分かれて構成されます。まずモーダルとして表示する部分があります。これは最初表示されません。

次にデータの一覧を表示するテーブルがあります。

そして一覧部分のテンプレートがあります。

JavaScriptについて

JavaScriptの実装ですが、今回はコントローラとロジックに分かれています。それぞれ目的は次のようになります。

コントローラ
UI側のクリックなどをハンドリング
ロジック
ユーザ作成処理などを担当（今回はモック）

まずロジックから紹介します。

ロジックの実装

今回のロジックは DialogLogic としています。今回はモックですが、本来であればAjaxを使ってデータを保存したりします。

コントローラの実装

コントローラは次のような実装になります。まず全体像を紹介します。

コントローラが作成された際のイベント

__ready イベントでは次のように実装します。ポイントとしてはボタンを押した際のコールバック先をhifiveのコントローラとしていることです。

登録ボタンを押した時のイベント

登録ボタンを押した時には単にモーダルを開くだけです。

ダイアログの”Create User”ボタンがクリックされた時のコールバック

モーダルでユーザ作成のボタンが押された際にはロジック側の createUser を呼び出し、その後HTMLに入力された内容を反映します。そして最後にモーダルを閉じて完了です。

ダイアログを閉じる際のイベント

モーダルを閉じるのはjQuery UIのdialogの機能をそのまま使います。

ダイアログ内のフォームをクリアする

最後にフォームの内容をクリアする処理です。

このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。モーダルウィンドウの表示はよくある機能なので、実装時の参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はまず基本的な構造を紹介します。次のように書きます。重要なのは h5.cls.RootClass.extend になります。そして、 _super （親クラス）を引数として、オブジェクトを返却します。

オブジェクトには基本的なキーとして name/field/accessor/method があります。それぞれクラス名、フィールド名、プロパティ、メソッドの4つになります。

フィールドの利用

例えばフィールドは次のようになります。_ではじめるのがルールです。

プロパティの利用

プロパティは次のようになります。こちらは_を使いません。

メソッドの利用

メソッドは初期で読み込まれるconstructor以外は自由に定義できます。クラスのインスタンスを作成する際に値を送ることもできます。

インスタンス生成

そしてクラスのcreateメソッドを使ってインスタンスを生成します。

後はこのインスタンスを使って自由にメソッドを呼び出せます。

外部に公開する

最後に外部（グローバル）に公開する場合です。これは h5.u.obj.expose を使います。例えば以下の例では hoge.fuga.SampleClass でアクセスできます。

クラスを使ったサンプルをJSFiddleにアップしてあります。ごく基本的な機能だけですが、実装時の参考にしてください。

これから何回かに分けてクラスの使い方を紹介します。JavaやC#相当まではいきませんが、クラスを使うことでより生産性の高いコードが書けるようになるはずです。

クラスの作成と使用 – hifive

大きなシステムが機能やサービスごとに分割して開発されるように、フロントエンドにおいても一つのコントローラですべてを管理するのではなく、複数のコントローラに分けて実装する方が効率的です。

今回はhifiveで複数のコントローラを分ける実装方法について紹介します。

実装例はJSFiddleにあります。参考にしてください。

概要

まず大事なのは全体を統括するコントローラの存在です。その中に個々の機能を実装するコントローラが複数存在します。つまり全体を統括するコントローラは機能実装はせず、コントローラ同士をつなぐ役割に徹するのが良いでしょう。

HTMLについて

HTMLは次のようになります。全体として #container があり、その中に子コントローラ用の #container1 、 #container2 があります。

JavaScriptについて

JavaScriptの実装ですが、まず子コントローラを定義します。まずテキストが入力されたタイミングでイベントハンドリングを行うコントローラです。

次に親コントローラから送られてきたメッセージを表示するコントローラです。

最後にこの2つのコントローラをつなぐ親コントローラです。大事なのは __meta の中で子コントローラごとにrootElementとして監視するDOMを指定しておくことです。

実際の処理のハンドリングについては以下のように、まず子コントローラからトリガーを使って親コントローラへ通知します。

親コントローラでは {rootElement} という定義を使って受け取ります。こちらでは子コントローラのメソッドを直接呼び出します。

そして子コントローラで表示処理を行います。

このように実装することでDOMごとにコントローラを分けて権限を管理しつつ、相互にメッセージのやり取りができるようになります。ごく小さなWebアプリケーションであれば一つのコントローラで良いですが、ある程度大きくなるのが予想される場合はあらかじめコントローラ連携を念頭に作るのが良いでしょう。

詳細は13.コントローラの連携 – hifiveを参照してください。

今回はクラスの基本機能でもある継承について紹介します。

ベースになるクラスについて

まずベースになるクラス、AnimalClassについて紹介します。名前と鳴き声を紹介するメソッドがあります。

継承する

このAnimalClassを継承するクラスとして、DogClassとCatClassを作成します。この時、 AnimalClass.extend を使います。コンストラクタは必須のメソッドになります。また、この時点で親のフィールド（voice）にアクセスできます。親のコンストラクタを呼び出す際には
`super.constructor.call(this, params);` を使います。

CatClassも殆ど同じ実装になります。

このように共通化される機能は親クラスに入れられるようになります。

使い方

継承したクラスは通常のクラスと同じように実装できます。

サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

今回はクラスのフィールド、アクセサについて紹介します

フィールドについて

フィールドはインスタンスで用いる変数になります。基本的に外部から直接変更することはありません。defaultValueを使って規定値を設定できます。

アクセサについて

フィールドにアクセスするためのget/setメソッドを提供するのがアクセサです。

アクセサ名をnullで定義した場合、自動的に _p_アクセサ名 でget/setが定義されます。また、getだけを定義した場合は読み取り専用のアクセサになります。

アクセサはフィールドにそのまま値を入れるだけでなく、計算した上で入力/出力できます。

読み取り専用にするために

JavaScriptの 'use strict'; を使うことで読み取り専用のアクセサに書き込みを行おうとしたり、存在しないアクセサへのアクセスをエラーにできます。

適切に開発していくためにも 'use strict'; を使っていくべきでしょう。

今回のコードは JSFiddle にアップロードしてあります。実装時の参考にしてください。

今回は抽象クラスの使い方について紹介します。

ベースになるクラスについて

今回のベースは以前紹介したhifiveのクラスモジュール紹介（その2）「継承」で使ったAnimalClassになります。このAnimalClassは継承して利用するクラスになります。そこで抽象クラスであるという定義として isAbstract: true, を指定します。

こうして定義されたクラスはインスタンスを作ろうとするとエラーになります。

抽象クラスにすることで実装も含めた形で継承前提のクラスが作れるようになります。

今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

今回はインスタンスを動的に拡張する方法について紹介します。よりJavaScriptらしい記述が可能になります。

ベースになるクラスについて

今回のベースは以前紹介したhifiveのクラスモジュール紹介（その3）「フィールド/アクセサ」で使ったHelloClassになります。通常、このHelloClassのインスタンスに対して適当なプロパティを指定するとエラーになります。

これを防ぐために、クラスに isDynamic: true, を定義します。

こうして定義されたクラスはインスタンスのプロパティが自由に拡張できるようになります。

元々JavaScriptではこういったプロパティの追加が自由にできていましたが、よりクラス設計を厳密に行うためにデフォルトでは拡張がオフになっています。とは言え、ダイナミックに項目を追加したいという場合もあると思いますので、その際に使ってみてください。

今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

クラスの作成と使用 – hifive