UI部品 基本編
生年月日や入社日、帳票の発行日など年月を表示したい場面は多くあります。
テーブルには西暦でデータが保管されているけれど、元号の表記が必要なこともあるかと思います。
今回はセルに直接入力した値のほか、テーブルデータを連結したリストビューの項目にも使える、日付を和暦表示にする方法をご紹介します。
プロジェクトファイル (作成バージョン:8.0.41.0) | jpcalendar-before.fgcp jpcalendar-after.fgcp(実装済みプロジェクトファイル) |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
ナビゲーションウィンドウのテーブル欄には「社員マスタ」というテーブルが存在します。
このテーブルは社員一覧画面を想定したリストビューでの演習で使用します。
前述の通り、今回ご紹介する和暦表示の方法はテーブルに保管されている日付データ以外だけでなく、セルに直接入力している値にも使用できるのでご安心ください。
手順1-2.ページを確認
ナビゲーションウィンドウから「和暦表示の基本」ページを開きます。
ページには「基本の日付」と書かれ太枠に囲まれたセルが1つと、その下に細い枠線に囲まれたセルが6つ存在します。
この状態でデバッグ実行した場合、細枠のセルの値は「43586」と表示されます。
今回の演習を通し、枠の左側に書いてあるような形式で日付を表示する方法を学べます。
同じくナビゲーションウィンドウ内にある「社員一覧」ページには社員マスタが連結されたリストビューが配置されています。
このリストビューにはいくつか空欄のままの列があり、そこに日付に関する項目を和暦形式で表示します。
2.日付の表示形式を変更する
和暦表示の基本ページを使って、日付項目の表示形式を6つの異なるパターンに設定します。
基本となる値はJ3セルに入っている「2019/05/01」です。
表示形式を変更するセルの値は、エディタ上では「=J3」から変わらないため、設定した内容を確認したい場合はプロジェクトをリボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンからデバッグ実行してください。
手順2-1.年月日表示(yyyy年M月d日)
まずはスラッシュで区切られた表記から年月日の表記に変更します。
J5セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「日付」を選択し、種類を「2001年3月14日」に変更します。
プロジェクトをデバッグ実行すると、J5セルの値は「2019年5月1日」に変わっています。
手順2-2.和暦表示(令和y年M月d日)
西暦表示から和暦の年月日表示に変更します。
J7セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「日付」を選択し、カレンダーの種類を「和暦」に変更します。
するとウィンドウの項目が一部変化するので、種類を「令和1年5月1日」を選びます。
プロジェクトをデバッグ実行すると、J7セルの値は「令和1年5月1日」に変わっています。
手順2-3.和暦の元年表示(令和y年M月d日)
西暦表示から和暦の年月日表示に変更し、さらにその元号の1年目だった場合は元年と表示されるよう設定します。
J9セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「日付」を選択し、カレンダーの種類を「和暦」に変更します。
するとウィンドウの項目が一部変化するので、種類を「令和1年5月1日」を選びます。
最後に、カレンダーの種類の下にある1年を元年と表記するにチェックを入れます。
プロジェクトをデバッグ実行すると、J9セルの値は「令和元年5月1日」に変わっています。
手順2-4.和暦で年のみを表示(令和y年)
西暦表示から和暦の「年のみ」が表示されるよう変更します。
J11セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「[$-411]ggge年」と直接入力します。
プロジェクトをデバッグ実行すると、J11セルの値は「令和1年」に変わっています。
手順2-5.和暦で年のみを表示(元年対応)(令和y年)
西暦表示から和暦の「年のみ」が表示されるよう変更し、その年が「1年」だった場合は「元年」と表示されるように設定します。
J13セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「[$-ja-JP-x-gannen]ggge年」と直接入力します。
プロジェクトをデバッグ実行すると、J13セルの値は「令和元年」に変わっています。
手順2-6.元号のみを表示(令和・平成など)
西暦表示されている日付から元号のみを表示するように設定します。
J15セルを右クリックし、セルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「ggg」と直接入力します。
プロジェクトをデバッグ実行すると、J15セルの値は「令和」に変わっています。
3.リストビュー上の日付の表示形式を変更する
社員一覧ページを使って、リストビュー上に配置された日付項目の表示形式を変更します。
手順3-1.リストビューの確認
社員一覧ページに配置されているリストビューには、既にいくつかの項目がセットされています。
そのうち日付形式の項目は「生年月日」と「入社日」の2つです。
空欄となっている列には、既に見出しが入力されています。
今回はその見出しに沿う形式で日付の表示を変更する方法を解説します。
手順3-2.和暦の元年表示(令和y年M月d日)
見出しに「生年月日(和暦)」と書かれた列の値を和暦で表示されるよう設定します。
ナビゲーションウィンドウのテーブル欄にある社員マスタを展開し、生年月日フィールドをリストビュー範囲内のP5セルにドラッグ&ドロップします。
P5セルに[生年月日]と表示されたら、P5セルを右クリックしセルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「日付」を選択し、カレンダーの種類を「和暦」に変更します。
するとウィンドウの項目が一部変化するので、種類を「令和1年5月1日」を選びます。
最後に、カレンダーの種類の下にある1年を元年と表記するにチェックを入れます。
プロジェクトをデバッグ実行すると、P列の値は「令和元年5月1日」のように元号+月+日の形式に変わっています。
手順3-3.日付から年だけを表示(yyyy年)
見出しに「入社年」と書かれた列の値に、社員マスタの入社日フィールドから年だけを「○年」表記で表示するよう設定します。
Forguncyの場合、テーブルに保管されている日付/時刻型の項目はナビゲーションウィンドウのテーブル欄から展開することで「年」「年度」「四半期」「月」「日」だけを抽出して使用することができます。
この際、関数の使用などの操作は必要ありません。
今回はその方法を使い、ナビゲーションウィンドウのテーブル欄にある社員マスタを展開し、入社日フィールドを展開して「年」の項目をリストビュー範囲内のAB5セルにドラッグ&ドロップします。
AB5セルに「[入社日].年」と表示されたら、AB5セルを右クリックしセルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「0年」と直接入力します。
プロジェクトをデバッグ実行すると、AB列の値は「2024年」のような表示に変わっています。
手順3-4.日付から年だけを和暦で表示(元年対応)(令和y年)
見出しに「入社年(和暦)」と書かれた列の値に、社員マスタの項目入社日から、年だけを和暦で表示されるように設定します。
表示するのは年だけですが、和暦で表示したい場合テーブルに存在するデータであっても手順3-3で紹介した、ナビゲーションウィンドウを展開して年の項目をドラッグ&ドロップする方法は使えないので注意してください。
ナビゲーションウィンドウのテーブル欄にある社員マスタを展開し、入社日フィールドをリストビュー範囲内のAF5セルにドラッグ&ドロップします。
AF5セルに「[入社日]」と表示されたら、AF5セルを右クリックしセルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「[$-ja-JP-x-gannen]ggge年」と直接入力します。
プロジェクトをデバッグ実行すると、AF5セルの値は「令和元年」のような形式に変わっています。
手順3-5.日付から年月だけを和暦で表示(元年対応)(令和y年M月)
見出しに「入社年月(和暦)」と書かれた列の値に、社員マスタの項目入社日から、元号+年+月の形式で表示されるように設定します。
ナビゲーションウィンドウのテーブル欄にある社員マスタを展開し、入社日フィールドをリストビュー範囲内のAL5セルにドラッグ&ドロップします。
AL5セルに「[入社日]」と表示されたら、AL5セルを右クリックしセルの書式設定…をクリックします。
セルの書式設定ウィンドウが開くので、分類から「ユーザー定義」を選択し、種類に「[$-ja-JP-x-gannen]ggge年M月」と直接入力します。
プロジェクトをデバッグ実行すると、AL5セルの値は「令和元年1月」のような形式に変わっています。
4.デバッグを実行する
全ての設定が完了したので、改めてデバッグ実行してページを確認します。
ページが複数ある場合、スタートページの設定をしていなければデバッグ実行時にエディタで開かれているページが表示されます。
デバッグを行うには、リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
和暦表示の基本ページを開いた状態でデバッグ実行すると、見出しにある通りの表示形式になった日付がそれぞれの欄に表示されます。
社員一覧ページを開いた状態でデバッグ実行すると、リストビューに表示されているデータ全行がこれまでの操作で指定した形式で表示されます。
リストビュー上のデータの並べ替えやフィルター
リストビューに表示されているデータは、Excelのオートフィルターのような感覚で昇順/降順に並べ替えたり絞り込んだりすることができます。
詳細については下記のヘルプを参考にしてください。
>列ヘッダーを使用したフィルター(Forguncyヘルプ)
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
>開発スタートガイド – Forguncyで機能的なUIを作成する