SpreadJS｜強化されたフィルタリング機能を使ってみる

今回のブログではSpreadJS V11Jで強化されたフィルタリング／ソート機能を中心にご紹介いたします。今回のバージョンアップでは、フィルタダイアログに条件フィルタや日付のツリー表示を行う機能が追加され、よりExcelライクなアプリケーションの開発が可能になりました。記事の内容を参考にぜひご活用ください。

実装方法

はじめに実装方法を説明します。以下のようにデータ範囲を指定してrowFilterメソッドを利用することで、僅か3行のコードで利用開始できます。

//  スプレッドシートの範囲を選択します
var range = new GC.Spread.Sheets.Range(1, 0, 12, 5);

// 行フィルターを設定します
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);

範囲を指定する際、ヘッダーとなる行を含めずに対象のデータのみ選択するのがポイントです。

各機能の特徴

ここでは強化されたポイントを詳しく説明します。

1）フィルタリング機能

V11Jのフィルタリング機能では、V10J以前のSpread.Sheetsで利用できたフィルターや並び替え機能／検索ボックスに加えて、4種類の条件フィルタが追加となりました。

上の手順に従い行フィルターを設置すると、列にセットされてあるデータの判別を自動的に行い、4種類の中から適切なフィルターを表示します。

種類	表示される条件
色フィルター	背景色、前景色の設定がある場合
テキストフィルター	値がテキストの場合
数値フィルター	値が数値の場合
日付フィルター	値が日付の場合

オートフィルターオプション

Microsoft Excelと同様にオートフィルターオプションが搭載されており、値を入力して条件の絞り込みを行うことが可能です。Excelの操作に慣れたユーザーが、同様の操作でアプリケーションを活用することができます。（以下は、Spread.Sheetsで開発した画面です）

2）ソート機能

ソートの対象範囲に複数の色が設定されているときに、背景色（セルの色）と前景色（フォント）を判別して表示します。使用時の動作ですが、選択した色を基準にソートが行われ、他の色は並べ替えが行われません。

3）日付のツリー表示

Excelと同様、フィルタダイアログへ日付のツリー表示を行う機能を搭載しました。

サンプル

今回のブログで説明した内容を基にしたサンプルをご用意しました。実際に操作してお試しください。

※上記に埋め込んだサンプルでは、フィルタの設定画面が正しく表示されません。正しい動作はこちらのリンクからサンプルをブラウザの全画面に表示してご確認ください。
https://spread-sheets-filter.stackblitz.io

いかがでしたでしょうか？今回のブログでフィルタリング機能の特徴をマスターして頂けたことと思います。特徴を押さえて、便利に活用頂けたら幸いです。なお、弊社のWebサイトではSpreadJSの新機能をまとめたページをご用意しておりますので、併せてご覧ください！

FlexGridのソートアイコンをカスタマイズする

2018年11月29日にリリースしたComponentOne 2018J v3では、WPF／UWP／XamarinのFlexGridで、ソート時に列ヘッダーに表示されるアイコン（ソートアイコン）をカスタマイズできるようになりました。

ソートアイコンは矢印（↑、↓）、山型（∧、∨）、三角形（▲、▼）の3種類をデフォルトのテンプレートで用意しておりカンタンに使用できます。

以下は昇順と降順のソートアイコンを矢印に設定するコードです。FlexGridのSortAscendingIconTemplateとSortDescendingIconTemplateにそれぞれC1IconTemplate.ArrowUpとC1IconTemplate.ArrowDownを設定するだけです。

WPF

using C1.WPF;
using C1.WPF.FlexGrid;

grid.SortAscendingIconTemplate = C1IconTemplate.ArrowUp;
grid.SortDescendingIconTemplate = C1IconTemplate.ArrowDown;

UWP

using C1.Xaml;
using C1.Xaml.FlexGrid;

grid.SortAscendingIconTemplate = C1IconTemplate.ArrowUp;
grid.SortDescendingIconTemplate = C1IconTemplate.ArrowDown;

Xamarin

using C1.Xamarin.Forms.Core;
using C1.Xamarin.Forms.Grid;

grid.SortAscendingIconTemplate = C1IconTemplate.ArrowUp;
grid.SortDescendingIconTemplate = C1IconTemplate.ArrowDown;

ComponentOne 2018J v3では、この他にも様々な機能追加が行われています。こちらの記事を参照ください。

2018年11月 - GrapeCity.devlog月間ランキング

先月のGrapeCity.devlog月間ランキングでご紹介した「Web TECH FORUM 2018」はいよいよ今週末の12月7日に開催です。ご参加される方は、会場までお気をつけてお越しください。
なお、開催後にレポートを公開いたしますので楽しみにお待ちください。

こちらに続き、12月17日に開催の「ECHO Tokyo 2018」も大変ご好評をいただいております。ありがとうございます！
昨年のレポートはこちらから。

さて、今月のGrapeCity.devlogの人気記事を紹介いたします。

【11月】ブログ人気記事TOP5を発表！

★第1位

---

2018年11月29日（木）にComponentOne（コンポーネントワン）の新バージョン「2018J v3」をリリースしました。
ComponentOneは、業務アプリケーション開発に必要とされるUIコンポーネントが1セットになっており、Windowsデスクトップ、Web、UWP、モバイルといった、多様なアプリケーションの開発が可能です。
新バージョン「2018J v3」では、デスクトップアプリケーション開発用プラットフォームである「Windowsフォーム」を中心に新コントロールの追加や機能強化を行っています。

さらに、デスクトップアプリケーション（Windows Forms、WPF）での継続的インテグレーション（CI）と継続的デリバリー（CD）を想定した開発をAzure DevOpsを利用して実施する方法も公開し、最新環境をサポートしています。

JavaScript UI ライブラリ「Wijmo（ウィジモ）」も同日リリースしています！

★第2位

---

マイクロソフト社は、.NET Frameworkが「元年」の表記に対応することを2018年8月に表明していました。これについて2018年10月の月例パッチでついに実装されたので、早速試してみました。サンプルコード付きでご紹介しています。

また、NET Frameworkの機能を使って弊社の以下のツール製品で「元年」を表示する方法もご紹介しています。

• ActiveReports for .NET
• SPREAD for ASP.NET
• FlexGrid for WinForms

★第3位

---

「アプリケーション開発プラットフォームとしてWPFを採用するメリットは何？」
「既存のWindowsフォームアプリをWPFで置き換える必要はある？」

これらの疑問について、コンポーネント製品の紹介を織り交ぜながらWPFの優位性を解説しています。
WPFを採用したアプリケーション開発を検討されている方はぜひご覧ください。

第4位

---

第5位

---

---

新元号対応まであと数か月。ランキングで分かるとおり、やはり「元号」のキーワードに対して関心の高さがうかがえます。
今回ご紹介している記事のほか、こちらの「Webページのフォームをより便利に！」CodeZine記事でも新元号に対応できる製品のご紹介をしています。

★殿堂入り

---

---

GrapeCity.devlogでは製品・技術に関するブログを毎週投稿しています。
今月も皆さまのお役に立てる情報を提供していきたいと思います。
2018年12月のGrapeCity.devlog月間ランキングは2019年1月にご紹介いたします♪

年末年始休業のお知らせ

グレープシティでは、以下の日程で年末年始休業をいただきます。
休業期間中はソフトウェアアクティベーションの再認証リクエスト、E-mailサポート、営業窓口、出荷業務などのすべてのサービスをお休みさせていただきますので、ご理解を賜りますようお願い申し上げます。

＜年末年始休業期間＞
2018年12月28日（金）～ 2019年1月6日（日）
2019年1月7日（月）より通常営業いたします。

＜ご注文商品の年内納品について＞
2018年12月20日（木）午前12時受注分までとさせていただきます。
余裕を持ったご注文にご協力くださいますよう、よろしくお願い申し上げます。

＜E-mailサポート＞
休業期間中も受信いたしますが、2018年12月28日（金）以降に受信したご質問は、
2019年1月7日（月）の受け付けとなります。

See the Pen InputManJS_CalendarSample by GrapeCity JS Samples (@spreadjssample) on CodePen.

こちらのカレンダーは入力支援JavaScriptライブラリ「InputManJS」のカレンダーコントロールを利用して表現しており、このように独自の休業日を設定することができます。

Excelマクロに関するよくある質問 ー DioDocsでxlsmファイルを読み込めますか？ー

Excel関連製品によくある質問

グレープシティの開発支援ツールはExcel互換機能を搭載するものが多々あります。
SPREAD（スプレッド）がその代表格で、各種プラットフォームに対応したコンポーネントを提供しています。

SPREAD（スプレッド）ｰ Windows Forms／WPF／ASP.NET Web Forms／JavaScript | グレープシティ株式会社

また、長年Excelライクのコンポーネントを開発、提供してきたノウハウを活かし、Salesforceやkintoneなどノンプログラミング環境にExcelライクのUIを提供するプラグイン製品もあります。

一方で、2018年10月にリリースしたDioDocs（ディオドック）は、これらとは異なる方法でExcelにアプローチしています。Excel風の画面を提供することなくExcelファイルを生成、更新することを目的としたAPIライブラリ「DioDocs for Excel」は、コードでExcelのオブジェクト構造を造り上げてファイルに保存します。

Excelを操作する製品で共通して頂戴するお問い合わせのひとつに「マクロ対応」があります。
日本のシステムに深く根を張るExcelが、マクロを抜きに語ることができないことは周知の事実です。 多くの現場で、マクロを使って使いやすくしたExcelシステムが可動し、マクロ有効ファイル（.xlsm）が存在します。

その資産を扱うためExcel対応製品には「マクロ対応」に関する質問が寄せられます。

結論から申し上げるとDioDocsにマクロを作成、更新する機能はありません。
製品の特性上、必要としない機能です。
しかし、.xlsmファイルを扱えないということではありません。