Angularでは、Pipeという機能を用いて、日付や数値などの値を見やすい書式に変換して表示することができます。
しかし、次のような複雑な書式はAngular標準のPipeでは表現できません。
- 和暦（「平成」、「平」、「H」など）
- 年度と四半期（2017/1/1→「2016年度 第4四半期」）
- 百万単位の数値（1,234,567→「1.235（百万）」）
Wijmoを使用してカスタムPipeを作成すると、Angular Pipeの文法に従って、簡単に上記のような複雑な書式で値を表示することができるようになります。
カスタムPipeを作成する
まず、Wijmoを使ったAngularアプリケーションを作成します。作成方法の詳細は、下記のブログを参照してください。
wijmo-format.pipe.tsファイルを作成して、カスタムPipeを作成します。
import { Pipe, PipeTransform } from '@angular/core'; import { Globalize } from 'wijmo/wijmo'; @Pipe({name: 'wijmoFormat'}) export class WijmoFormatPipe implements PipeTransform { transform(value: any, format: string): string { return Globalize.format(value, format); } }
app.module.tsでカスタムPipeをインポートします。
import { WijmoFormatPipe } from './wijmo-format.pipe'; @NgModule({ declarations: [ AppComponent, WijmoFormatPipe ], ：
カスタムPipeを使用する
次に、app.component.htmlでカスタムPipeを使用して、「{{ 値 | wijmoFormat:"書式" }}」という形式のコードを記述します。
<td>和暦</td> <td>{{ date | wijmoFormat:"gggy年M月d日（ddd）" }}</td> ： <td>年度、四半期</td> <td>{{ date | wijmoFormat:"EEEE年度 第U四半期" }}</td> ： <td>千単位の数値</td> <td>{{ number | wijmoFormat:"n3," }}（千）</td> ： <td>百万単位の数値</td> <td>{{ number | wijmoFormat:"n3,," }}（百万）</td> ： <td>16進数</td> <td>{{ number | wijmoFormat:"x8" }}</td>
app.component.tsで表示する値を定義します。
export class AppComponent { date = new Date(2017, 0, 1); number = 1234567; }
実行結果
アプリケーションを実行すると、次のサンプルのように、和暦や年度などの複雑な書式で値を表示できることが確認できます。
（補足1）会計年度／四半期について
会計年度および四半期の計算方法は、国によって異なります。具体的には、日本では4月から会計年度が開始されますが、アメリカでは10月から会計年度が開始されます。
例として、2017/1/1は、日本では「2016年度 第4四半期」ですが、アメリカでは「2017年度 第2四半期」になります。
Wijmoでは、上記のような国（カルチャー）のルールに従って会計年度／四半期を計算して表示することができます。この計算方法（会計年度が開始される月）をカスタマイズすることも可能です。
（補足2）和暦の元号について
Wijmoでは、新しい元号（年号）を追加して、和暦を表示することが可能です。新しい元号の追加方法は、下記の情報を参照してください。
さいごに
今回ご紹介した他にも、Wijmoは様々な書式に対応しています。製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。