Skip to content

フォーム送信をAjaxで実行&画面更新までできるApplicationController(その2)「要素のバインディング」

Ajax処理がごく簡単になるApplicationControllerを紹介します。前回はHTML全体を書き換えていましたが、それでは再送できなかったり、不便なことがあるかも知れません。

そこで今回は名前を指定して画面上の一部を更新する方法を紹介します。

今回のHTMLも前回と基本的に同じです。

そしてApplicationControllerも前回と同じです。たったこれだけでサーバへのAjax送信、インジケータ表示、レスポンスのハンドリングができます。

サーバからのレスポンスですが、text/jsonで返すのが特徴です。そしてHashの中でキーと値で新しいコンテンツを返します。

これで実行するとフォーム内の一部だけを更新するようになります。

実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。

ApplicationControllerを使えばAjax処理が簡単になるでしょう。

フォーム送信をAjaxで実行&画面更新までできるApplicationController(その1)「基本的な使い方」

最近のWebアプリケーションではAjaxを使うのが当たり前になっています。そしてAjaxでフォームデータを送信した後、データをハンドリングして画面を更新したりします。これはよくあるコードであり、最近の開発でよくいうDRY(Don’t repeat yourself)に反すると言えます。

hifiveではそのようなごく基本的なAjax処理についてApplicationControllerでほぼコーディングなしで実装できるようになっています。今回はその基本形の紹介です。

例えば次のようなHTMLがあります。

これは app.jsp に対してnameデータを送信するものと言えます。これに対してhifiveで次のように h5.ui.container.ApplicationController を適用します。

これで実行するとWebブラウザは表示をリフレッシュせず、Ajaxで送信を行います。そして結果をそのままフォーム全体にして適用します。

この時のレスポンスはサーバからHTMLをそのまま返しています。

実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。

インジケータを出すような表示も自動で行ってくれます。ApplicationControllerを使えばAjax実装がごく簡単になるでしょう。

必ず役立つWeb用地図系ライブラリまとめ

最近は業務システムの開発においてもスマートフォンやタブレットを対象とすることがあります。そうした端末は屋外で使うことも想定されていますので、その際には地図を使うこともあるでしょう。

Google MapsやBing Mapをそのまま利用する方も多いと思いますが、今回はそれらを利用するための地図用ライブラリをまとめてみました。そのまま利用するよりも簡単に実装できるものもありますので、デザイナーやJavaScriptが苦手な方にも利用していただけるでしょう。

今回紹介する各ライブラリのライセンスにおいては、MITやBSDなどオープン系のライセンスもありますが、ライブラリで利用するGoogleMAPやBingMAPの利用については、Google,Bingのライセンスに準拠する事になりますので、特に商用利用や利用頻度によって、利用料金が発生することに注意して下さい。

jQueryでGoogle Mapsをコントロール Maplace.js

Maplace
Maplace

Maplace.jsは、Google Maps用のjQueryプラグインです。jQueryに慣れていれば特に(慣れていなくとも)、こちらの方が手軽に実装できるではないでしょうか。以下は、サンプルのコードです。このように、利用においては簡単に設置が可能です。

実行結果

Maplace-exp
Maplace-exp

その他、ポリラインや、距離測定、ルートマップ、ヒートマップなどの表示も可能です。今までGoogle MapのAPIを利用していた方も一度チェックしてみて下さい。

Maplace.js – A Google Maps javascript plugin for jQuery.

Google Mapsをもっと手軽に扱う gmaps.js

gmaps
gmaps

こちらも、Google Maps用のライブラリです。Maplaceのように、特に他のライブラリには依存しません。以下は、ベーシックな表示方法です。

上記コードの実行結果です。

gmaps-exp
gmaps-exp

その他、ルート表示、ジオフェンス表示、ストリートビューなども設定できます。単純に地図だけを表示したい場合に限らず、利用範囲の広いマップ表示プラグインです。

gmaps.js — Google Maps API with less pain and more fun

軽量マップライブラリ Leaflet

leaflet
leaflet

LeafletはOpen Street Mapを利用した、軽量な地図ライブラリです。サイズは130KB未満と非常に小さいのですが、その分他のライブラリと比べ機能は制限されます。それだけでも実用は十分とは思いますが、足りない機能はプラグインで補うことも可能になっています。これにより、サイト自体のサイズを最小限に押さえることができるでしょう。プラグインも豊富で、殆どの機能はそろっているようです。

Leaflet – a JavaScript library for interactive maps

地図デザインをカスタマイズできる Mapbox

mapbox
mapbox

Mapboxは自分でマップカラーやマーカーなどのデザインをカスタマイズして、それをサイトで利用できるサービスです。オリジナルなマップが欲しい場合は、とても良い選択となるでしょう。利用にはサインアップが必要で、その中でカスタマイズをしていきます。マップの表示は、JavaScriptのライブラリが豊富に揃っていますので、特に困ることはなさそうです。また、iOSとAndroidのSDKもあるので、モバイル開発でも利用できます。

地図データはOpen Street Map の一択ですが、アカウントには無料の利用枠がありますので確認してはいかがでしょうか。

Mapbox | Design and publish beautiful maps

機能も豊富でハイパフォーマンスなマップライブラリ OpenLayers 3

OpenLayers
OpenLayers

非常にサンプルが豊富なライブラリです。マップライブラリとして必要な機能は殆どが揃っているのではないでしょうか。地図データはBing MAP、Open Street MAPなどが利用できます。

OpenLayers 3

3DのMAPライブラリ Cesium

cesium-top
cesium-top

WebGLで描画する3D地球儀のマップライブラリです。Apache2.0ライセンスの下、オープンソースのJavaScriptライブラリとなっています。地図データはBing MAP、Open Street Mapが利用出来ます。

cesium-basic
cesium-basic

地球儀上に様々なデータが表示可能ですので、データを用意してヒートマップやグラフ表示として利用することもできます。オリジナルの3Dのモデルを表示させたり、カメラコントロールも可能ですので、インタラクティブな見せ方ができるでしょう。

Cesium – WebGL Virtual Globe and Map Engine

最後に

昨今のサイトでは地図を表示するのが当たり前のように利用されています。実際、Google MapsBing Map など公式のライブラリでも手軽に導入でいるようになっていますが、今回紹介したライブラリを利用することで、より手軽に、かつ他の便利な機能なども利用できるようになります。地図の利用を考えている方はぜひお試しください。

hifiveとjQuery UIを組み合わせる【日付ピッカー】

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

今回は日付ピッカーです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。テキストボックスをクリックすると日本語で日付ピッカーが表示されて、任意の日付を選択するとテキストボックスに入力されます。

実装方法について

読み込むべきライブラリはjQuery/jQuery UI/hifiveになります。

そしてHTMLは次のようになります。テキストボックスをひとつ配置します。idは任意の文字列です。

JavaScriptからの呼び出し方です。最初に日付ピッカーの設定を作成します。

後は hifive の __ready イベントの中で日付ピッカーを呼び出します。これで完了です。

日付ピッカーについては通常のjQueryで使うように利用できます。


今回の実装デモはJSFiddleにて公開しています。実装時の参考にしてください。

非同期処理を同期処理のように扱うには

JavaScriptで常に問題になるのが非同期処理ではないでしょうか。かつてのコールバック地獄であったり、現在のPromiseによる処理など常に非同期処理に起因しています。そこで苦労されている方も多いでしょう。

例えばAjaxを使う際など、関数の戻り値としてPromiseを返すことがあります。

このような形の場合、返り値を受け取った側では必然的に一つネストが発生します。

コールバック時ほどではありませんが、ネストが深くなるのを嫌がる人は多いでしょう。そこで使えるのが次のような実装です。ネストが一段低くなっているのが分かるでしょうか。

ajax関数の返値がPromiseオブジェクトであれば(then関数が定義されていれば)、処理を実行して結果を自分自身(main関数)に渡します。2回目に実行されたmain関数ではresultsが入っていますのでajax関数は実行しません。その結果、ajax関数の結果(results)をネストを深くすることなく利用できます。

hifiveで実装するには

実はhifiveにおいてコントローラ側で処理を実行する際には常にこのように実装されています。関数の引数がPromiseであれば、まず処理を実行して結果を再度自分自身に渡します。こうすることで無闇にネストが深くなるのを防いでいます。


JavaScriptを使った開発で嫌がられるのが非同期処理に伴うネストが深いコードになります。ちょっとした工夫で防げますのでぜひ活用してください。

SPA用JavaScriptライブラリ×5選

はじめに(SPAについて)

昨今注目の技術にSPAという技術があります。SPAとはSingle-Page-Applicationの頭文字です。SPAの利点は、ユーザがアプリケーションを使っている間、Webページ全体をリロードする必要がないためレスポンスが高速ということです。RIA(Rich Internet Application)に変わる技術として注目を集めています。

代表的なJavaScriptのライブラリにAngular.jsや、Backbone.jsなどがありますが、今回はSPA専用のJavaScriptライブラリとして以下の5つを紹介します。

  • Senna.js
  • pager.js
  • sonnyJS
  • RomanSPA
  • durandaljs

Senna.js

senna.jsのキャプチャ画面

Senna.jsの読み方はセナあるいはセンナです。こちらのサイトによると、F1レーサーではなく、下剤に使われる漢方薬の元の植物の名前からとられています。

Senna.jsは他と比べると外部ライブラリへの依存がなく、非常に軽量なSPA用JavaScriptライブラリとなります。仕組みとしては、XMLHttpRequestを介して、履歴APIページを更新せずにURLを更新することができます。公式サイトには3種類のサンプルが公開されています。

ライセンスはBSD Licenseです。

pager.js

pager.jsのキャプチャ画面

jQueryとKnockoutJSをもとにしたSPA専用JavaScriptライブラリーがpager.jsです。pager.jsを使うには、Node.jsGruntQUnitPhantomJSRequireJSが必要です(via Getting Started)。

そして、pager.jsはcssのフレームワークと合わせて使うこともできます。デモはこちらで確認できます。

ライセンスは、MIT Licenseです。

sonnyJS

sonnyJSのキャプチャ画面

sonnyJSはミニマルシングルページアプリケーションエンジン・HTMLプリプロセッサです。特徴としてはテンプレートのネストと継承、ダイナミック同期テンプレートルーティング、クロスウィンドウ通信などがあげられます。

デモページのリンクも切れており、GitHubの更新も止まっておりますが、SPA専用JavaScriptライブラリとして、まだまだ開発に活用することができます。

RomanSPA

RomanSPAは、ASP.NET MVCとJavascript SPAの良いところを合わせたフレームワークです。HttpContextBase拡張メソッドを使い、ビューとモデル・キャッシングをキャッシングする方法をRomanSPAでは用いてます。こちらも2年前から開発が止まってしまっていますが、使いどころはまだまだありそうです。

Durandal.js

durandaljsのキャプチャ画面

読み方はデュランダルです。jQuery、KnockoutをRequireJSを利用して開発されています。特徴は豊富な機能で、MVCモデルでもMVPモデルでもMVVMモデルでも対応できてしまいます。また、内部でRequire.jsを使用しているので、モジュラリティが高く、多様なライブラリを使用できます。

ライセンスは、MIT Licenseです。


今後Webアプリケーションの開発を行う上でSPAは無視できない要素になってきます。今回紹介したようなライブラリを使い、効率的な開発を行ってください。

hifiveのデータグリッドライブラリを使いこなす(8)「ページネーションする」

前回の表示件数の変更に続いて、ページネーションの追加方法です。ページネーションができると見たいデータだけを絞り込んで表示できます。

実際に動いているデモはこちらにあります。動かしているところは下記の画像になります。

HTMLにページネーション情報を追加する

まずHTMLにページを移動するボタンと現在、トータルのページ数を表示するHTMLを追加します。

ページネーション情報を表示する

実際にページネーションを表示するJavaScriptは次のようになります。1ページ目を表示している時には前のページに移動するボタンを無効にして、最後のページまで移動した時には次のページに移動しないようにします。使うのは this._dataSearcher.getCurrentPage() と this._dataSearcher.getTotalPages() になります。

後はこの update_page を適時呼び出します。

表示件数を変更した際にも呼び出します。

ページ移動のイベントを追加する

最後にページを移動する際の処理を追加します。これは this._dataSearcher.movePage を使います。まず前のページへの移動です。

次に次のページへの移動です。

これでページネーション機能が実装されました。


例えば最初のページへの移動であれば this._dataSearcher.movePage に 1 を与えるだけですし、最後のページへの移動は this._dataSearcher.getTotalPages() を与えるだけです。ごく簡単にグリッドに対してページネーションが使えるようになります。

実際に動いているデモはこちらにあります。ぜひ試してみてください。

banner_02