最近は業務システムの開発においてもスマートフォンやタブレットを対象とすることがあります。そうした端末は屋外で使うことも想定されていますので、その際には地図を使うこともあるでしょう。
Google MapsやBing Mapをそのまま利用する方も多いと思いますが、今回はそれらを利用するための地図用ライブラリをまとめてみました。そのまま利用するよりも簡単に実装できるものもありますので、デザイナーやJavaScriptが苦手な方にも利用していただけるでしょう。
今回紹介する各ライブラリのライセンスにおいては、MITやBSDなどオープン系のライセンスもありますが、ライブラリで利用するGoogleMAPやBingMAPの利用については、Google,Bingのライセンスに準拠する事になりますので、特に商用利用や利用頻度によって、利用料金が発生することに注意して下さい。
jQueryでGoogle Mapsをコントロール Maplace.js
Maplace.jsは、Google Maps用のjQueryプラグインです。jQueryに慣れていれば特に（慣れていなくとも）、こちらの方が手軽に実装できるではないでしょうか。以下は、サンプルのコードです。このように、利用においては簡単に設置が可能です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // JavaScript部分 | |
| <script> | |
| new Maplace({ | |
| locations: LocsA, | |
| map_div: '#gmap-dropdown', | |
| controls_title: 'Choose a location:' | |
| }).Load(); | |
| </script> | |
| <!– HTML部分 –> | |
| <div id="gmap-dropdown"></div> |
実行結果
その他、ポリラインや、距離測定、ルートマップ、ヒートマップなどの表示も可能です。今までGoogle MapのAPIを利用していた方も一度チェックしてみて下さい。
Maplace.js – A Google Maps javascript plugin for jQuery.
Google Mapsをもっと手軽に扱う gmaps.js
こちらも、Google Maps用のライブラリです。Maplaceのように、特に他のライブラリには依存しません。以下は、ベーシックな表示方法です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| #map { | |
| width: 400px; | |
| height: 400px; | |
| } | |
| </style> | |
| <div id="map"></div> | |
| <a href="http://maps.google.com/maps/api/js?sensor=true"> | |
| http://maps.google.com/maps/api/js?sensor=true | |
| </a> | |
| <a href="http://gmaps.js">http://gmaps.js</a> | |
| <script> | |
| var map = new GMaps({ | |
| el: '#map', | |
| lat: -12.043333, | |
| lng: -77.028333 | |
| }); | |
| </script> |
上記コードの実行結果です。
その他、ルート表示、ジオフェンス表示、ストリートビューなども設定できます。単純に地図だけを表示したい場合に限らず、利用範囲の広いマップ表示プラグインです。
gmaps.js — Google Maps API with less pain and more fun
軽量マップライブラリ Leaflet
LeafletはOpen Street Mapを利用した、軽量な地図ライブラリです。サイズは130KB未満と非常に小さいのですが、その分他のライブラリと比べ機能は制限されます。それだけでも実用は十分とは思いますが、足りない機能はプラグインで補うことも可能になっています。これにより、サイト自体のサイズを最小限に押さえることができるでしょう。プラグインも豊富で、殆どの機能はそろっているようです。
Leaflet – a JavaScript library for interactive maps
地図デザインをカスタマイズできる Mapbox
Mapboxは自分でマップカラーやマーカーなどのデザインをカスタマイズして、それをサイトで利用できるサービスです。オリジナルなマップが欲しい場合は、とても良い選択となるでしょう。利用にはサインアップが必要で、その中でカスタマイズをしていきます。マップの表示は、JavaScriptのライブラリが豊富に揃っていますので、特に困ることはなさそうです。また、iOSとAndroidのSDKもあるので、モバイル開発でも利用できます。
地図データはOpen Street Map の一択ですが、アカウントには無料の利用枠がありますので確認してはいかがでしょうか。
Mapbox | Design and publish beautiful maps
機能も豊富でハイパフォーマンスなマップライブラリ OpenLayers 3
非常にサンプルが豊富なライブラリです。マップライブラリとして必要な機能は殆どが揃っているのではないでしょうか。地図データはBing MAP、Open Street MAPなどが利用できます。
3DのMAPライブラリ Cesium
WebGLで描画する3D地球儀のマップライブラリです。Apache2.0ライセンスの下、オープンソースのJavaScriptライブラリとなっています。地図データはBing MAP、Open Street Mapが利用出来ます。
地球儀上に様々なデータが表示可能ですので、データを用意してヒートマップやグラフ表示として利用することもできます。オリジナルの3Dのモデルを表示させたり、カメラコントロールも可能ですので、インタラクティブな見せ方ができるでしょう。
Cesium – WebGL Virtual Globe and Map Engine
最後に
昨今のサイトでは地図を表示するのが当たり前のように利用されています。実際、Google Maps や Bing Map など公式のライブラリでも手軽に導入でいるようになっていますが、今回紹介したライブラリを利用することで、より手軽に、かつ他の便利な機能なども利用できるようになります。地図の利用を考えている方はぜひお試しください。
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回は日付ピッカーです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。テキストボックスをクリックすると日本語で日付ピッカーが表示されて、任意の日付を選択するとテキストボックスに入力されます。
実装方法について
読み込むべきライブラリはjQuery/jQuery UI/hifiveになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– スタイルシート –> | |
| <link rel="stylesheet" type="text/css" href="https://code.htmlhifive.com/h5.css"> | |
| <link rel="stylesheet" type="text/css" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css"> | |
| <!– JavaScript –> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script> | |
| <script type="text/javascript" src="https://code.htmlhifive.com/ejs-h5mod.js"></script> | |
| <script type="text/javascript" src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script> | |
| <script type="text/javascript" src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script> |
そしてHTMLは次のようになります。テキストボックスをひとつ配置します。idは任意の文字列です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"> | |
| <input type="text" id="datepicker" value="" /> | |
| </div> |
JavaScriptからの呼び出し方です。最初に日付ピッカーの設定を作成します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let data = { | |
| closeText: '閉じる', prevText: '<前', nextText: '次>', | |
| currentText: '今日', weekHeader: '週', dateFormat: 'yy/mm/dd', | |
| firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: '年', | |
| monthNames: [], monthNamesShort: [], dayNames: [], | |
| dayNamesShort: [], dayNamesMin: [] | |
| }; | |
| // 日付の作成（1〜12月） | |
| for (let i = 1; i <= 12; i++) { | |
| data.monthNames.push(`${i}月`); | |
| data.monthNamesShort.push(`${i}月`); | |
| } | |
| // 曜日の作成（日〜土曜日） | |
| let weekdays = ['日','月','火','水','木','金','土']; | |
| for (let index in weekdays) { | |
| data.dayNames.push(`${weekdays[index]}曜日`); | |
| data.dayNamesShort.push(weekdays[index]); | |
| data.dayNamesMin.push(weekdays[index]); | |
| } | |
| $.datepicker.regional['ja'] = data; | |
| $.datepicker.setDefaults($.datepicker.regional['ja']); |
後は hifive の __ready イベントの中で日付ピッカーを呼び出します。これで完了です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var controller = { | |
| __name: 'DatepickerController', | |
| __ready: function() { | |
| $('#datepicker').datepicker(); | |
| } | |
| }; | |
| // コントローラの作成と要素へのバインド. | |
| h5.core.controller('#container', controller); | |
| }); |
日付ピッカーについては通常のjQueryで使うように利用できます。
今回の実装デモはJSFiddleにて公開しています。実装時の参考にしてください。
JavaScriptで常に問題になるのが非同期処理ではないでしょうか。かつてのコールバック地獄であったり、現在のPromiseによる処理など常に非同期処理に起因しています。そこで苦労されている方も多いでしょう。
例えばAjaxを使う際など、関数の戻り値としてPromiseを返すことがあります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function ajax() { | |
| return $.ajax({ | |
| url: '/' | |
| }); | |
| } | |
| function main() { | |
| let p = ajax(); | |
| } |
このような形の場合、返り値を受け取った側では必然的に一つネストが発生します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function main() { | |
| let p = ajax(); | |
| p.then(function(results) { | |
| // Ajaxの処理成功時 | |
| }) | |
| } |
コールバック時ほどではありませんが、ネストが深くなるのを嫌がる人は多いでしょう。そこで使えるのが次のような実装です。ネストが一段低くなっているのが分かるでしょうか。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function main(results) { | |
| if (!results) | |
| let p = ajax(); | |
| if (typeof p == 'object' && typeof p.then == 'function') { | |
| p.then(function(results) { | |
| main(results); | |
| return; | |
| }) | |
| } | |
| // Ajaxの処理成功時 | |
| } |
ajax関数の返値がPromiseオブジェクトであれば（then関数が定義されていれば）、処理を実行して結果を自分自身（main関数）に渡します。2回目に実行されたmain関数ではresultsが入っていますのでajax関数は実行しません。その結果、ajax関数の結果（results）をネストを深くすることなく利用できます。
hifiveで実装するには
実はhifiveにおいてコントローラ側で処理を実行する際には常にこのように実装されています。関数の引数がPromiseであれば、まず処理を実行して結果を再度自分自身に渡します。こうすることで無闇にネストが深くなるのを防いでいます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (h5.async.isPromise(data)) { | |
| data.done(this.own(function(d) { | |
| this.setData(d); | |
| })); | |
| return; | |
| } |
JavaScriptを使った開発で嫌がられるのが非同期処理に伴うネストが深いコードになります。ちょっとした工夫で防げますのでぜひ活用してください。
はじめに(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の読み方はセナあるいはセンナです。こちらのサイトによると、F1レーサーではなく、下剤に使われる漢方薬の元の植物の名前からとられています。
Senna.jsは他と比べると外部ライブラリへの依存がなく、非常に軽量なSPA用JavaScriptライブラリとなります。仕組みとしては、XMLHttpRequestを介して、履歴APIページを更新せずにURLを更新することができます。公式サイトには3種類のサンプルが公開されています。
ライセンスはBSD Licenseです。
pager.js
jQueryとKnockoutJSをもとにしたSPA専用JavaScriptライブラリーがpager.jsです。pager.jsを使うには、Node.js、Grunt、QUnit、PhantomJS、RequireJSが必要です（via Getting Started）。
そして、pager.jsはcssのフレームワークと合わせて使うこともできます。デモはこちらで確認できます。
ライセンスは、MIT Licenseです。
sonnyJS
sonnyJSはミニマルシングルページアプリケーションエンジン・HTMLプリプロセッサです。特徴としてはテンプレートのネストと継承、ダイナミック同期テンプレートルーティング、クロスウィンドウ通信などがあげられます。
デモページのリンクも切れており、GitHubの更新も止まっておりますが、SPA専用JavaScriptライブラリとして、まだまだ開発に活用することができます。
RomanSPA
RomanSPAは、ASP.NET MVCとJavascript SPAの良いところを合わせたフレームワークです。HttpContextBase拡張メソッドを使い、ビューとモデル・キャッシングをキャッシングする方法をRomanSPAでは用いてます。こちらも2年前から開発が止まってしまっていますが、使いどころはまだまだありそうです。
Durandal.js
読み方はデュランダルです。jQuery、KnockoutをRequireJSを利用して開発されています。特徴は豊富な機能で、MVCモデルでもMVPモデルでもMVVMモデルでも対応できてしまいます。また、内部でRequire.jsを使用しているので、モジュラリティが高く、多様なライブラリを使用できます。
ライセンスは、MIT Licenseです。
今後Webアプリケーションの開発を行う上でSPAは無視できない要素になってきます。今回紹介したようなライブラリを使い、効率的な開発を行ってください。
前回の表示件数の変更に続いて、ページネーションの追加方法です。ページネーションができると見たいデータだけを絞り込んで表示できます。
実際に動いているデモはこちらにあります。動かしているところは下記の画像になります。
HTMLにページネーション情報を追加する
まずHTMLにページを移動するボタンと現在、トータルのページ数を表示するHTMLを追加します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row"> | |
| <div class="col-md-12"> | |
| <button id="prev"><</button> | |
| <span id="page"></span>/ | |
| <span id="total_page"></span> | |
| <button id="next">></button> | |
| </div> | |
| </div> |
ページネーション情報を表示する
実際にページネーションを表示するJavaScriptは次のようになります。1ページ目を表示している時には前のページに移動するボタンを無効にして、最後のページまで移動した時には次のページに移動しないようにします。使うのは this._dataSearcher.getCurrentPage() と this._dataSearcher.getTotalPages() になります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| update_page: function() { | |
| var currentPage = this._dataSearcher.getCurrentPage(); | |
| $("#prev").attr('disabled', currentPage == 1); | |
| this.$find('#page').text(currentPage); | |
| var totalPage = this._dataSearcher.getTotalPages(); | |
| $("#next").attr('disabled', currentPage == totalPage); | |
| this.$find('#total_page').text(totalPage); | |
| }, |
後はこの update_page を適時呼び出します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| datagrid.util.delay(1000, this.own(function() { | |
| this._gridController.search({}); | |
| this.update_page(); // 追加 | |
| })); |
表示件数を変更した際にも呼び出します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#paging change': function(context, $el) { | |
| context.event.preventDefault(); | |
| this._dataSearcher.setPageSize(parseInt($el.val())); | |
| this.update_page(); | |
| }, |
ページ移動のイベントを追加する
最後にページを移動する際の処理を追加します。これは this._dataSearcher.movePage を使います。まず前のページへの移動です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#prev click': function(context, $el) { | |
| this._dataSearcher.movePage(this._dataSearcher.getCurrentPage() – 1); | |
| this.update_page(); | |
| }, |
次に次のページへの移動です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#next click': function(context, $el) { | |
| this._dataSearcher.movePage(this._dataSearcher.getCurrentPage() + 1); | |
| this.update_page(); | |
| } |
これでページネーション機能が実装されました。
例えば最初のページへの移動であれば this._dataSearcher.movePage に 1 を与えるだけですし、最後のページへの移動は this._dataSearcher.getTotalPages() を与えるだけです。ごく簡単にグリッドに対してページネーションが使えるようになります。
実際に動いているデモはこちらにあります。ぜひ試してみてください。
電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。
今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。
Laker compendium
動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。
Laker compendium – Designing digital publications in HTML5
Turn.js
ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。
blasten/turn.js: The page flip effect for HTML5
Monocle
ePubファイルではなく、HTMLベースの電子書籍を表示するソフトウェアです。ページをめくるようにスライドさせてページを変更できます。特にスマートフォンなどでコンテンツの可読性を上げるのに役立ってくれそうです。
joseph/Monocle: A silky, tactile browser-based ebook JavaScript library.
20thingsilearned
Webブラウザやインターネットの仕組みについて学べる絵本風電子書籍です。中身をカスタマイズすればでオリジナルの絵本を作成することもできるでしょう。ページ送り、目次、ページのサムネイル、共有など機能も十分に備わっています。
rePublish
ePubファイルを読み込んで表示するライブラリです。DRMには対応していないので注意してください。閲覧機能はあまりありませんが、Web上でePubファイルを読めるのはメリットが大きいでしょう。
blaine/rePublish: Pure-JavaScript ePub Reader
Treesaver.js
テキスト、画像、動画などを組み込んだ電子雑誌の作成できるフレームワークです。コンテンツは作成後、コンパイルして電子雑誌化するのが特徴となっています。ビューワーとしての機能もソーシャルサービスでの共有やインデックス、印刷など豊富です。
Treesaver/treesaver: JavaScript library for creating column and page-based layouts
Magaka
HTML/JavaScript/CSSを使った電子雑誌を作成するためのフレームワークです。ダブルタップで一覧を表示するという機能があります。テキストの場合はBRHTMLというHTMLの簡易記法を使います。
Magaka – Digital magazines with your face.
Epub.js
ePubファイル（DRMなし）を読み込んで表示します。文字サイズの変更、目次表示などができます。フォントも読み込まれるので表示はePubとさほど変わらないレベルで再現されます。
futurepress/epub.js: Enhanced eBooks in the browser.
BiB/i
電子書籍をWebサイトに埋め込んで表示するのに適したリーダーです。縦書きに対応しているのは貴重でしょう。マンガタイプのリーダーとして利用できます。
satorumurmur/bibi: BiB/i | EPUB Reader on your website.
BookBlock
絵本のような電子書籍向きのJavaScriptライブラリです。フリップ操作が気持ちよく感じられるはずです。電子書籍風に使うこともできますし、カルーセル表示もサポートしています。
電子書籍にすればスマートフォンやタブレットでも可読性の高い形に仕上がります。社内ヘルプであったり、開発標準的なドキュメントもWebブラウザで読むより、電子書籍の形になっている方が扱いやすいのではないでしょうか。ぜひ使ってみてください。
大量のデータを表示する際に要望に上がってくるのがデータの表示件数を変更する機能です。ページネーションと組み合わせて使いますが、今回はまずデータ件数の変更について紹介します。
実際に動いているデモはこちらにあります。また、動いている画像は下記になります。
データの表示件数を指定する
まずHTML側でデータの表示件数を指定できるようにします。今回は次のようなドロップダウンを用意しました。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="form-group"> | |
| <label for="exampleInputEmail1">件数</label> | |
| <select class="form-control" id="paging"> | |
| <option>5</option> | |
| <option selected>10</option> | |
| <option>20</option> | |
| <option>50</option> | |
| </select> | |
| </div> |
データサーチャーを用意する
hifiveのグリッドライブラリにおいてデータの表示件数を制御するのは gridController.dataSearcher になります。次のように用意します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var scrollGridController = { | |
| _dataSearcher: null, | |
| __ready: function() { | |
| : | |
| this._dataSearcher = this._gridController.getDataSearcher(); | |
| : | |
| } | |
| } |
さらに初期化の変数を変更します。pagingをtrueにし、pageSizeが初期化時の表示件数になります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var initParam = { | |
| searcher: { | |
| type: 'all', | |
| paging: { | |
| enable: true, | |
| pageSize: 10 | |
| } | |
| }, | |
| : | |
| } |
動的に表示件数を変更する
そしてドロップダウンで件数を指定した際に、動的にグリッドの表示件数を変更します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#paging change': function(context, $el) { | |
| context.event.preventDefault(); | |
| this._dataSearcher.setPageSize(parseInt($el.val())); | |
| } |
このように、件数を数値で渡すのがポイントです。実際の表示はgridControllerが行ってくれます。
データはすでにコントローラ内部にありますので、件数変更は素早く行われます。次回はページネーションの実装を紹介します。
グリッドを使ってデータを一覧表示した際に出てくるニーズとして、一覧表の中でデータを修正したいというのがあります。一括修正であったり、インラインで一項目ずつその場で修正できて欲しいと言った要望があるでしょう。
hifiveのデータグリッドでも幾つかのデータ入力に対応していますので、今回はそれを紹介します。
cellFormatterの利用
入力をコントロールに変更する場合は cellFormatter を使います。現在、以下の4つをサポートしています。
テキスト入力
テキスト入力の場合、inputメソッドを使います。引数はtype属性に使われるので、datetimeやpasswordなどを指定することができます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| position: { | |
| formatter: cellFormatter.input('text'), | |
| changeHandler: changeHandler.edit() | |
| }, |
チェックボックス
チェックボックスはcheckboxメソッドを使います。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| check: { | |
| formatter: cellFormatter.checkbox('check'), | |
| }, |
ラジオボタン
ラジオボタンはradioメソッドを使います。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| radio: { | |
| formatter: cellFormatter.radio(), | |
| }, |
ドロップダウン
ドロップダウンリストはselectを使います。引数はオプション項目になります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| select: { | |
| formatter: cellFormatter.select(['Option1', 'Option2', 'Option3']), | |
| changeHandler: changeHandler.edit() | |
| } |
デモをJSFiddleに置いてあります。グリッド表示がどのように変わるか、チェックしてください。
業務システムでは一覧表がよく使われます。多くはテーブルタグを使って実現しますが、使っている内により細かな機能が望まれるようになります。例えば表をソートしたり、インラインで編集するような機能です。
今回はそんなユーザニーズに応えられる高機能な表計算ライブラリを紹介します。
Handsontable Community Edition
セルをマージしたり枠の色を変更する、選択行のハイライトなどとても多機能です。ヘッダーや左列の固定もサポートしています。コミュニティエディションはMIT Licenseですが、有償版も用意されています。
SlickGrid
ヘッダーを固定したスクロール、画像やチェックなどの表示形式に対応、スライダーを使った入力、カレンダー、集計など様々な機能があります。各行にチェックボックスをつけて選択すると言った操作も可能です。ライセンスはMIT Licenseです。
mleibman/SlickGrid: A lightning fast JavaScript grid/spreadsheet
jExcel
ページ内に埋め込んで使うのが前提になっている表計算ライブラリです。入力値のフォーマットを指定したり、チェックボックスやドロップダウン、カレンダーを使った入力も可能です。一つのページ内に複数埋め込むこともできます。
editableTableWidget
Bootstrapに対応した表計算ライブラリです。jQueryと組み合わせられるのでカスタマイズしやすいでしょう。社内の管理画面などでBootstrapを使っている場合、editableTableWidgetを使うと便利そうです。
Tiny editable jQuery Bootstrap spreadsheet from MindMup
ライブラリによってサポートされている機能が異なりますので、自社のニーズに合わせて選定してください。また、扱い勝手もそれぞれのライブラリによって異なりますので、選定されたフレームワークに合わせて選ぶと良いでしょう。
hifiveのチャートライブラリの使い方を紹介します。今回はグラフを移動させるデモです。
ベースはチャートライブラリの使い方（1）「基本編」 | hifive開発者ブログのグラフになります。
実行しているところは下記の通りです。こちらのURLにてサンプルを試せます。
HTMLのボタンを追加
HTMLを次のように修正します。進む、戻るのボタンを追加します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="chart"></div> | |
| <p> | |
| <button id="go"> | |
| 進む | |
| </button> | |
| <button id="back"> | |
| 戻る | |
| </button> | |
| </p> |
ダミーデータ生成部分を修正
任意のデータ数生成できるように修正します。これは実運用時には不要でしょう。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // size 変数を追加 | |
| function createChartDummyData(median, vibration, size) { | |
| size = size || 200; // デフォルトは200 | |
| var ret = []; | |
| for (var i = 0; i < size; i++) { | |
| ret.push({ | |
| val: median + (Math.random() – 0.5) * vibration * 2 | |
| }); | |
| } | |
| return ret; | |
| } |
進むボタンを押した時の処理
進むボタンを押した時には、グラフを1つ進めます。その際、一番右端かどうかの判定を行って、端であればデータを追加します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "#go click": function() { | |
| var movedNum = this._chartController.go(1); | |
| if (movedNum === 1) { | |
| return; | |
| } | |
| // 追加データ生成 | |
| addData = [{name: 'series_1', data: createChartDummyData(400, 100, 1)[0]}]; | |
| // データ追加 | |
| this._chartController.addData(addData); | |
| }, |
戻るボタンを押した時の処理
戻るボタンを押した時にはグラフを一つ戻します。この時、左端であればグラフは動きません。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "#back click": function() { | |
| this._chartController.back(1); | |
| }, |
注意点としてはデータを追加する際にデータ系列名（name）を初期表示時と同じにしておくということです。
例えばこの進むボタンを押した時の処理をsetIntervalで繰り返すようにすると刻々と描画が更新されるグラフができあがります。
ぜひサンプルをお試しください！
hifive開発者ブログ 