hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はモーダルウィンドウです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。ボタンを押すとモーダルウィンドウが表示されて、情報を入力すると一覧が更新されます。
HTMLについて
HTMLは主に3つの分かれて構成されます。まずモーダルとして表示する部分があります。これは最初表示されません。
次にデータの一覧を表示するテーブルがあります。
そして一覧部分のテンプレートがあります。
JavaScriptについて
JavaScriptの実装ですが、今回はコントローラとロジックに分かれています。それぞれ目的は次のようになります。
- コントローラ
UI側のクリックなどをハンドリング - ロジック
ユーザ作成処理などを担当（今回はモック）
まずロジックから紹介します。
ロジックの実装
今回のロジックは DialogLogic としています。今回はモックですが、本来であればAjaxを使ってデータを保存したりします。
コントローラの実装
コントローラは次のような実装になります。まず全体像を紹介します。
コントローラが作成された際のイベント
__ready イベントでは次のように実装します。ポイントとしてはボタンを押した際のコールバック先をhifiveのコントローラとしていることです。
登録ボタンを押した時のイベント
登録ボタンを押した時には単にモーダルを開くだけです。
ダイアログの”Create User”ボタンがクリックされた時のコールバック
モーダルでユーザ作成のボタンが押された際にはロジック側の createUser を呼び出し、その後HTMLに入力された内容を反映します。そして最後にモーダルを閉じて完了です。
ダイアログを閉じる際のイベント
モーダルを閉じるのはjQuery UIのdialogの機能をそのまま使います。
ダイアログ内のフォームをクリアする
最後にフォームの内容をクリアする処理です。
このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。モーダルウィンドウの表示はよくある機能なので、実装時の参考にしてください。
実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はバリデーションです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。入力して送信ボタンを押すとバリデーションが実行されます。
HTMLについて
HTMLは次のようになります。通常のHTMLと変わりません。
CSSについて
CSSはエラー時の色をつけるクラスなどを追加しています。
JavaScriptについて
JavaScriptは長いので、幾つかに分けて紹介します。まず、hifiveのコントローラ化が完了した際の__readyイベントにてバリデーションの設定を行います。
この際、入力チェックを行う際などのイベントハンドラも設定もします。this.ownWithOrgを使うことでhifiveのコントローラ自身を渡せるようになります。
後は各イベントハンドラの実装になります。
最後にチェックボックス、ラジオボタンのバリデーションについて別途実装します。
hifiveでもvalidation機能を提供していますが、使い慣れた方を採用するケースもあるでしょう。そうした時にはコールバックの管理などはhifiveで行うことで、よりメンテナンスしやすいバリデーション実装ができるようになります。
実際に動作するデモは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 の値の違いについて確認してみてください。
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はDOMのソートです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。各要素をドラッグして上下に移動したり、別なカラムにドロップできます。
HTMLについて
少し長いですがHTMLは次のようになります。portlet クラスごとに移動できます。
スタイルシートについて
スタイルシートはカラム部分の設定などになります。
JavaScriptについて
JavaScriptは次のようになります。まずは概要です。
初期化処理
hifiveのコントローラが初期化された段階でソートの設定を行います。ここではドロップした時のイベント（stop）だけ指定しています。
ドロップ時のコールバック
次にドロップを止めた時のイベントです。
このように実装することでhifiveとjQuery UIのソート機能をシームレスに連携させられるようになります。ダッシュボードであったり、ユーザが自分でコンテンツを自由に設定できるページを作るのに使えるのでぜひ参考にしてください。
実際に動作するデモは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を活用してください。
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はタブ表示です。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。
HTMLについて
HTMLですが、各タブ（リスト）のリンク先にタブのIDを指定しています。
JavaScriptについて
JavaScriptの実装は次のようになります。
初期化処理について
初期化処理ではタブの表示処理を行います。
タブがクリックされた時の処理
タブがクリックされた際にコールバックが受け取れます。Ajax処理などを行ったりするのに使えます。
このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。多くの情報を表示する際にタブは便利な機能なので、実装時の参考にしてください。
実際に動作するデモは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にもこだわりが必要になります。機能面においても他サイトで当たり前になっている機能が提供されていないとユーザはストレスを感じるでしょう。
動画を上手に活用していくためにも今回紹介したようなソフトウェアをうまく利用してください。
