Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptライブラリ「Wijmo(ウィジモ) 5」で1レコード複数行表示のグリッドを実現

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第13回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、グレープシティが提供するJavaScriptライブラリWijmo(ウィジモ)について、サンプルとともに利用例を紹介します。今回はWijmoの上位エディション「Wijmo Enterprise」で利用できるグリッド部品MultiRowを紹介します。1レコードを複数行に分けて表示でき、柔軟なグリッド表示を実現します。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

 Wijmoの上位エディション「Wijmo Enterprise」では、Wijmo 5で利用できる追加のUI部品が提供されます。今回紹介するMultiRowコントロールもその一つで、Wijmoのグリッド部品FlexGridに、1レコードを複数行に分けて表示する機能を追加したものです。MultiRowはFlexGridのサブクラスなので、Excelライクなショートカットキー操作や、Excel/PDFファイルへのエクスポートといったFlexGridの基本的な機能を備えつつ、より柔軟なグリッドレイアウト機能を提供します。

図1 MultiRowコントロールの例(Wijmoサンプルより)
図1 MultiRowコントロールの例(Wijmoサンプルより)

 本記事では、MultiRowコントロールの利用方法を説明していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • 標準のFlexGridより凝ったグリッド配置をしたい方

必要な環境

 Wijmo 5はECMAScript 5に対応するブラウザーをサポートします。詳細はWijmoのWebサイトで案内されています。

 Wijmo 5はそれ単体で利用できるほか、Angular(AngularJS 1/Angular 2以降)、KnockoutJS、React、Vue.js(1/2)といったJavaScriptフレームワークと組み合わせて利用できます。本記事ではAngular(バージョン5)とWijmoを組み合わせて利用します。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Wijmo 5 5.20173.380 体験版
    • Angular バージョン5
    • Node.js v8.9.4 64bit版
    • Microsoft Edge 41.16299.15.0

 Angularの開発ではTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

 本記事のサンプルコードは、AngularのコマンドラインツールAngular CLIで作成したプロジェクトにWijmo 5を組み込んで作成します。手順の詳細はグレープシティのブログで説明されていますが、本記事では以下のように手順を変更しています。

 まず、使用するWijmoのバージョンを更新します。具体的には、Wijmoをインストールするときに実行するコマンドを、リスト1のようにします。

リスト1 Wijmoをインストールするコマンド
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJS-5.20173.380.tgz

 プロジェクトに含めるwijmo.min.csswijmo.culture.ja.min.jsのバージョンも変更します。上記リンクから本記事のサンプルで利用しているファイルをダウンロードできます。

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します(--openオプションを指定すると、ブラウザーが自動的に起動してページを表示します)。

まずMultiRowを表示してみる

 最初に、MultiRowを表示する基本的な実装方法を、図2のサンプルで説明します。MultiRowでは苗字と名前、性別と誕生日のように、複数の項目を1列に表示できます。

図2 MultiRowを表示するサンプル(P001-basic)
図2 MultiRowを表示するサンプル(P001-basic)

 まず、ルートモジュール定義ファイルapp.module.tsの(1)でMultiRowを含むWjGridMultirowModuleモジュールを参照して、(2)でインポートするように設定します。

リスト2 MultiRowのモジュール設定(P001-basic/src/app/app.module.ts)
// MultiRowのモジュールを参照 ...(1)
import { WjGridMultirowModule } from "wijmo/wijmo.angular2.grid.multirow";
(略)
@NgModule({
  imports: [
    BrowserModule,
    WjGridMultirowModule // MultiRowのモジュールをインポート ...(2)
  ],
(略)
})

 ルートコンポーネントのテンプレートファイルapp.component.htmlに、Angular対応のMultiRow(WjMultiRowクラス)に対応する<wj-multi-row>タグを記述します。itemsSource属性には表示するデータ、layoutDefinition属性にはレイアウト定義を指定します。

リスト3 テンプレートにMultiRowのタグを記述(P001-basic/src/app/app.component.html)
<wj-multi-row [itemsSource]="data" [layoutDefinition] = "layoutDef">
</wj-multi-row>

 コンポーネント実装app.component.tsに、itemsSource属性、layoutDefinition属性の値を、リスト4のように記述します。

リスト4 リスト3に対応するコンポーネントの実装(P001-basic/src/app/app.component.ts)
export class AppComponent {
  // 表示するデータ ...(1)
  data = [
    {
      苗字: "阿部", 名前: "博", 性別: "男", 誕生日: new Date("1980/01/01"),
      身長: 170.5, 体重: 55.2, 血液型: "O", 連絡済: true
    },
(略)
  ];
  // MultiRowのレイアウト定義 ...(2)
  layoutDef = [
    // 1列目に苗字と名前を表示するレイアウト定義 ...(3)
    {
      header: "氏名",
      cells: [
        { binding: "苗字", align: "center" },
        { binding: "名前", align: "center" },
      ]
    },
    {
      (2列目のレイアウト定義)
    },
    (以下、3列目以降のレイアウト定義)
  ];
}

 (1)がitemsSource属性に設定するデータで、苗字、名前、性別などを、JavaScriptオブジェクトの配列で指定します。(2)がlayoutDefinition属性に設定するレイアウト定義で、各列の表示内容をJavaScriptオブジェクトの配列で指定します。たとえば(3)では、苗字と名前を縦に並べて一列に表示するように指定しています。このようなMultiRowの1列をグループと呼びます。

layoutDefinition属性でMultiRowのレイアウトを調整する

 layoutDefinition属性に指定するレイアウト定義について、さまざまな表示パターンでMultiRowを表示する図3のサンプルで説明します。

図3 MultiRowのさまざまな表示(P002-layout)
図3 MultiRowのさまざまな表示(P002-layout)

基本的な指定パターン

 もっとも単純なレイアウト定義を、リスト5で説明します。

リスト5 レイアウト定義の例(P002-layout/src/app/app.component.ts)
layoutDef1 = [
  {
    header: "レイアウト例1",
    cells: [
      { binding: "苗字" },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 レイアウト定義の要素を表1に示します。グループヘッダーは、ヘッダーを折りたたんだ時に表示されるヘッダー文字列です。ヘッダーの折りたたみについては後述します。

表1 レイアウト定義の要素
要素名 意味
header グループヘッダー
cells グループに指定するデータ要素の配列
binding cells配列の要素に指定する、データ項目名

 リスト5のように指定すると、cellsに指定された苗字、名前、性別のデータ項目が、縦に並んで表示されます。

図4 リスト5に対応するMultiRowの表示(P002-layout)
図4 リスト5に対応するMultiRowの表示(P002-layout)

colspanの指定でセルを横に並べる

 レイアウト定義にcolspanを指定すると、1つのグループ内で要素を横に並べることができます。指定例をリスト6に示します。

リスト6 colspanでデータを横に並べるレイアウト定義(P002-layout/src/app/app.component.ts)
layoutDef2 = [
  {
    header: "レイアウト例2",
    colspan: 2,
    cells: [
      { binding: "苗字" },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 colspanを2に指定すると、cellsのデータ要素を最大2個だけ横に並べます。この場合は苗字と名前の2個を横に並べて、3個目の性別は2行目に折り返して表示されます。

図5 リスト6に対応するMultiRowの表示(P002-layout)
図5 リスト6に対応するMultiRowの表示(P002-layout)

 リスト7のように、colspanをcells配列の要素に設定することもできます。

リスト7 cells配列要素にcolspanを設定するレイアウト定義(P002-layout/src/app/app.component.ts)
layoutDef3 = [
  {
    header: "レイアウト例3",
    cells: [
      { binding: "苗字", colspan: 2 },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 この場合、colspanに2が設定されている苗字の項目が、横に2列分の幅をとって表示され、名前と性別は折り返した2行目に横並びで表示されます。

図6 リスト7に対応するMultiRowの表示(P002-layout)
図6 リスト7に対応するMultiRowの表示(P002-layout)

セルに属性を設定してレイアウトを調整

 cells配列要素に指定する各データ項目には、レイアウトやフォーマットといった属性が設定できます。例をリスト8に示します。

リスト8 cells配列要素に属性を設定(P002-layout/src/app/app.component.ts)
layoutDef4 = [
  {
    header: "レイアウト例4",
    cells: [
      { binding: "苗字", align: "right" },
      { binding: "誕生日", align: "center", format: "yyyy/M/d" },
      { binding: "体重", align: "left", format: "f1" },
    ]
  }
];

 データ項目に対して、align属性で右/中央/左寄せを、format属性で日時や数字の表示形式を指定しています。体重に指定されたformat属性「f1」は、小終点第1位までを表示する意味です。

図7 リスト8に対応するMultiRowの表示(P002-layout)
図7 リスト8に対応するMultiRowの表示(P002-layout)

 リスト8で利用した属性のほかに、FlexGridの列を表すColumnクラスの属性が設定できます。詳細はドキュメントを参照してください。

参考 レイアウトの動的な切り替え

 layoutDefinition属性にあとから別のレイアウト定義を代入すると、MultiRowのレイアウトを動的に切り替えることができます。図8のサンプルは、ボタン押下でレイアウトが切り替わります。処理の詳細はサンプルコードを参照してください。

図8 MultiRowのレイアウトを切り替えるサンプル(P003-layout-change)
図8 MultiRowのレイアウトを切り替えるサンプル(P003-layout-change)

ヘッダー表示の切り替え

 図9のように、MultiRowのヘッダーは、折りたたむなどして表示を切り替えられます。

図9 MultiRowのヘッダー表示を切り替えるサンプル(P004-header)
図9 MultiRowのヘッダー表示を切り替えるサンプル(P004-header)

 ヘッダー表示を切り替えるには、MultiRowのcollapsedHeaders属性を設定します。図9のサンプルでは、ボタン押下でcollapsedHeaders属性の値を変更しています。設定する値によって、ヘッダー表示が表2のように切り替わります。

表2 collapsedHeaders属性の値とヘッダーの表示内容
collapsedHeaders属性の値 表示内容
false ヘッダーを展開(各データ項目名を表示)
true ヘッダーを折りたたみ(グループのheaderプロパティを表示)
null グループのheaderプロパティと、各データ項目名をヘッダーに両方表示

ExcelやPDFファイルへのエクスポート

 MultiRowの内容を、ExcelやPDFファイルにエクスポートする機能が利用できます。Excelへエクスポートすると、図10のようになります。

図10 MultiRowの内容をExcelファイルにエクスポート(P005-export)
図10 MultiRowの内容をExcelファイルにエクスポート(P005-export)

 図11は、PDFへエクスポートした例です。ExcelとPDFいずれの場合も、レイアウトを維持したままエクスポートされていることがわかります。

図11 MultiRowの内容をPDFファイルにエクスポート(P005-export)
図11 MultiRowの内容をPDFファイルにエクスポート(P005-export)

Excelファイルへのエクスポート

 Excelエクスポート機能を利用するには、JavaScriptでZIPファイルを操作するJSZipライブラリが必要です。まず、プロジェクトのsrcフォルダにJSZipのファイル(jszip.min.js)を配置して、プロジェクト設定ファイル(.angular-cli.json)で、リスト9のようにJSZipを読み込む設定を記述します。

リスト9 JSZipを読み込む設定(P005-export/.angular-cli.json)
"scripts": [
  "wijmo.culture.ja.min.js", // Wijmoの言語ファイル
  "jszip.min.js"             // JSZipのファイル
],

 Excelファイルにエクスポートする処理はリスト10です。FlexGridXlsxConverterのsaveAsyncメソッドに、MultiRowオブジェクトとファイル名を指定して実行します。

リスト10 Excelエクスポート処理(P005-export/src/app/app.component.ts)
exportToExcel() {
  FlexGridXlsxConverter.saveAsync(
    this.multiRow,  // MultiRowオブジェクト
    null,           // オプション(ここでは未指定)
    "saved.xlsx"    // ファイル名
  );
}

 saveAsyncメソッドは、JSZipのバージョンが3.xのときに利用できます。JSZipのバージョンが2.xの場合はsaveメソッドを利用します。詳細はドキュメントを参照してください。

PDFファイルへのエクスポート

 PDFファイルにエクスポートする処理は、リスト11のようになります。

リスト11 PDFエクスポート処理(P005-export/src/app/app.component.ts)
exportToPdf() {
  FlexGridPdfConverter.export(
    this.multiRow,  // MultiRowオブジェクト
    "saved.pdf",    // ファイル名
    {
      embeddedFonts: [ // 埋め込みフォントの指定 ...(1)
        {
          source: "assets/fonts/ipag.ttf",
          name: "ipa-gothic",
          style: "normal",
          weight: "normal"
        }
      ],
      styles: {
        cellStyle: { // セルにフォントを指定 ...(2)
          font: {
            family: "ipa-gothic",
            style: "normal",
            weight: "normal"
          }
        }
      }
    }
  );
}

 FlexGridPdfConverterのexportメソッドに、MultiRowオブジェクトと出力ファイル名、オプションを指定して実行します。日本語を出力するためには、埋め込みフォントの指定が必要です。まず(1)のembeddedFonts属性で、フォントファイル(assets/fonts/ipag.ttf)に「ipa-gothic」という名前を付けます。次に(2)のcellStyle属性で、セルにフォントを指定します。

 なお、リスト10、11のthis.multiRowは、Angularの@ViewChildデコレーターを利用して、画面上のMultiRowに対応するオブジェクトを取得しています。詳細はサンプルコードを参照してください。

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmoのMultiRowコントロールを紹介しました。1レコードを複数行に表示する方法やヘッダー表示の切り替え、ExcelやPDFファイルへのエクスポート方法について説明しました。伝票のように、多数のデータ項目をコンパクトな横幅に収める必要があるケースで便利に使えるコントロールです。

参考資料

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5