はじめに
数値をカンマ区切りにしたり通貨記号をつけたり、日付を特定の書式で記述するような機能は、アプリケーション作成には必須です。Ver.5.6までは主としてDataConverterクラスによりサーバーサイドで処理をしていましたが、変更や計算結果更新に対する書式設定が適用されない場合がありました。この書式設定の仕組みをクライアントサイドで指定をするようにして、書式の適用を確実に行います。書式の適用は、HTMLの属性に記述を行います。データベースはもちろん、コンテキストにキャッシュされる内容までは「生データ」として、そこからHTML要素に書き込まれる場合に書式を適用し、逆に編集時には書式を解除して生データとして扱えるようにするのが動作の基本となります。
設定例
| 設定例 | 値が「1923」の場合 | 値が「1923.8765」の場合 | 値が「-1923.8765」の場合 |
|---|---|---|---|
| data-im-format="number(0)" | 1923 | 1924 | -1924 |
| data-im-format="number(2)"
data-im-format-options="useseparator" |
1,923.00 | 1,923.88 | -1,923.88 |
| data-im-format="number(2)"
data-im-format-negative-style="triangle" |
1923.00 | 1923.88 | ▲1923.88 |
| data-im-format="currency(2)"
data-im-format-options="useseparator" |
¥1,923.00 | ¥1,923.88 | ¥-1,923.88 |
| 設定例 | 値が「0」の場合 | 値が「0」でない場合 |
|---|---|---|
| data-im-format="boolean()" | false | true |
| data-im-format="boolean(T,F)" | F | T |
| 設定例 | 値が「2017-07-12 09:05:00」の場合 |
|---|---|
| data-im-format="datetime(middle)" | 2017/07/12 09:05:00 |
| data-im-format="datetime(%m月%d日の%h時%i分)" | 7月12日の9時5分 |
| data-im-format="datetime(%g%M月%D日)" | 平成29年07月12日 |
data-im-format
ターゲット指定によりコンテキストの値を要素に設定する時、その要素にdata-im-format属性があれば、書式化されるようになります。この設定は排他的なので、どれか1つが設定されていることが期待されます。
| 分類 | 属性値 | 書式化の動作 |
|---|---|---|
| 数値 | number(桁数) | 数値に関する書式化を行う。桁数は少数以下の桁数で、省略すると0とみなす |
| currency(桁数) | 通過記号を伴う書式化を行う。桁数は少数以下の桁数で、省略すると0とみなす | |
| boolean(true表現,false表現) | 論理値を表現する。引数にはtrueとfalseの時の表現をそのまま記述する。引数を省略すると、true/falseになる | |
| percent(桁数) | パーセント表現による書式化を行う。桁数は少数以下の桁数で、省略すると0とみなす | |
| 日付
時刻 |
date(書式) | 引数がlong/middle/shortの場合は日付のみを書式化する。それ以外の引数は引数のパターンに従って表示される。日付がない場合は空文字列を表示する |
| time(書式) | 引数がlong/middle/shortの場合は時刻のみを書式化する。それ以外の引数は引数のパターンに従って表示される。時刻がない場合には「00:00:00」とみなす。書式は別表を参照 | |
| datetime(書式) | 引数がlong/middle/shortの場合は日付時刻を書式化する。それ以外の引数は引数のパターンに従って表示される。日付や時刻がない場合には、date、timeの動作通り。書式は別表を参照 |
日付や時刻については、long/middle/shortの場合はロケールに応じた形式で表示します。それ以外のパターン（%とアルファベットの置き換え文字列）については、ロケールに応じるものとそうでないものがあります。引数にパターンを指定した場合は、date/time/datetimeのいずれの指定でも結果は同じになります。
数値に対するオプション設定のための属性
数値に関連したdata-im-format属性を指定した場合、書式化の動作を以下のいくつかの属性で指定することができます。
| 属性名 | 属性値 | 書式化の動作 |
|---|---|---|
| data-im-format-options | useseparator | 数値の整数部で3桁ごとにカンマを入れる |
| blankifzero | 数値が0の時には何も表示しない | |
| data-im-format-negative-color | (CSSのcolorプロパティに設定可能な値) | 負の数場合に文字に設定する色 |
| data-im-format-negative-style | leading-minus | 負の数の記号（通常はマイナス）を数値の前に指定 |
| trailingminus | 負の数の記号（通常はマイナス）を数値の後に指定 | |
| parenthesis | 負の数の場合、数値をカッコで囲む | |
| angle | 負の数の場合、数値を < >で囲む | |
| credit | 負の数の場合、前にCRを付加する | |
| triangle | 負の数の場合、前に▲を付加する | |
| data-im-format-numeral-type | half-width | 数値を一般的なアスキーコードの数字で記述 |
| full-width | 数値を全角の数字で記述する | |
| kanji-numeral-modern | 数値を、数字を示す漢字（一二三…）で記述 | |
| kanji-numeral | 数値を、数字を示す漢字（壱弐参…）で記述 | |
| data-im-format-kanji-separator | every-4th-place | 4桁ごと日本語表記する（例：1億2345万3456） |
| full-notation | 全ての桁において日本語表記する（例：1億2千3百4十5万3千4百5十6） |
日付や時刻に対する引数設定
日付や時刻に関連したdata-im-format属性を指定する場合、引数に以下の文字列を指定できます。「単独使用」の場合には、引数にはその文字列のみを記述します。一方、「組み合わせ」の文字列については、組み合わせて指定をします。一方、更新処理に対応した書式設定は表に示す通り一部に限られます。なお、書式設定に変わらず、ISO8601形式の文字列（2017-10-12 10:04など）を入力することでデータベースへの更新が可能です。
| 指定 | 指定文字列 | 意味 | 表示例 |
|---|---|---|---|
| 単独使用 | short | 短い形式 | 2017/07/23 14:39 |
| middle | よく利用される形式 | 2017/07/23(日) 14:39:06 | |
| long | 長い形式 | 2017年07月23日 日曜日 14時39分06秒 JST | |
| 組み合わせ | %Y | 西暦4桁*1 | 2017 |
| %y | 西暦2桁*1 | 17 | |
| %g | ロカールによる年数 | 平成29年 | |
| %G | ロカールによる年数 | 平成二十九年 | |
| %M | 月2桁*1 | 07 | |
| %m | 月数値*1 | 7 | |
| %t | 英語短縮月名*1 | Jul | |
| %T | 英語月名*1 | July | |
| %b | ロカールによる短縮月名 | ７月 | |
| %B | ロカールによる月名 | 文月 | |
| %D | 日2桁*1 | 12 | |
| %d | 日数値*1 | 12 | |
| %a | 英語短縮曜日名 | Mon | |
| %A | 英語曜日名 | Monday | |
| %w | ロカールによる短縮曜日名 | 月 | |
| %W | ロカールによる曜日名 | 月曜日 | |
| %H | 時2桁*1 | 09 | |
| %h | 時数値*1 | 9 | |
| %K | 12時間制1〜12での時2桁 | 09 | |
| %k | 12時間制1〜12での時数値 | 9 | |
| %J | 12時間制0〜11での時2桁 | 09 | |
| %j | 12時間制0〜11での時数値 | 9 | |
| %I | 分2桁*1 | 05 | |
| %i | 分数値*1 | 5 | |
| %S | 秒2桁*1 | 00 | |
| %s | 秒数値*1 | 0 | |
| %P | AM/PM | AM | |
| %p | am/pm | am | |
| %N | ロカールによる午前午後 | 午前 | |
| %% | パーセント | % | |
| 上記以外 | そのまま表示 | - |
*1：変更処理に対応した書式設定文字列。テキストフィールドに対して、これらの文字を使って書式設定したものが表示されている時、その文字列を変更することで、データベースへの更新が正しくできるもの。