お世話になっております。
標題の通りなのですが、日付フィールドの値の表示を
「2017-01-12」から「平成29年1月12日」へ表示することは可能でしょうか。
ご教授いただければ幸いです。
Nao さん
JavaScript で対応可能です。
簡単に和暦変換できるライブラリ (koyomi) がありますのでそれを使います。
なお、和暦にすると横幅が長くなりますので、日付項目の横サイズを長くする必要があります。
１．下記から koyomi.min.js を取得して、「JavaScript / CSSでカスタマイズ」 にアップロード
https://github.com/yukik/koyomi/tree/master/public
・koyomi.min.js
元号の切り替わりを年とするか、日にするかでパラメータを変更します。
詳細は、https://github.com/yukik/koyomi/blob/master/docs/format.md
年区切り
koyomi.format(‘2017-01-13’, ‘GGN年M月D日’);
日区切り
koyomi.format(‘2017-01-13’, ‘ggn年M月D日’);
２．下記をファイルを作成して、「JavaScript / CSSでカスタマイズ」 にアップロード
(function() {
"use strict";
kintone.events.on("app.record.detail.show", function(event) {
var record = event.record;
if (record['日付']['value']) {
var wareki = koyomi.format(record['日付']['value'], 'ggn年M月D日');
var el1 = kintone.app.record.getFieldElement('日付');
var el2 = el1.getElementsByTagName('span');
el2[0].innerText = wareki;
}
return event;
});
})();
rex0220様
早速のご回答ありがとうございます。
上記を設定して出来ました。ありがとうございます。
こちらは詳細画面のみに適用されているのですが、
一覧画面やカスタマイズビューにも適用することは可能でしょうか？
度々の質問で恐縮でございますが、ご教授いただければ幸いでございます。
一覧の場合は、下記のようなコードで対応できます。
value-nnnnnn は、日付項目に付与された番号をデバックツールなどで調べて変更してください。
ただし、一覧画面編集を行うと元に戻りますので、タイマー処理で定期的に実行するなどの工夫が必要になります。
カスタマイズビューも、日付項目を変換するだけなので、同様にできると思います。
kintone.events.on("app.record.index.show", function(event) {
var el1 = document.querySelectorAll('.recordlist-cell-gaia.recordlist-date-gaia.value-nnnnnn div span');
for (var i = 0; i < el1.length; i++) {
if (el1[i].innerText) {
el1[i].innerText = koyomi.format(el1[i].innerText, 'ggn年M月D日');
}
}
return event;
});
rex0220様
お返事が遅くなり、申し訳ございません。
無事、上記2コードで一覧と詳細画面にて和暦の表示が出来ました。
カスタムビューについては、調べながら進行中です。
この件についてですが、Firefox、Chromeでは問題なく表示されるのですが、
Internet Explorer11では、表示できなく、Edgeでは、西暦2017年1月20日と左記の形式で表示されるのですが、
上記4ブラウザで同様に和暦で表示することは可能でしょうか。
度々の質問で恐縮でございますが、ご教授いただければ幸いでございます。
ざっと調べたところkoyomi とブラウザ間でいくつか問題があるようです。
・IE11 では、koyomi で使用している Number.isNaN が未定義でした。
・ggn フォーマットが IE と EDGE でうまく処理されないようです。
とりあえず、暫定対策してみました。
・Number.isNaN が未定義の場合、設定
・GGN フォーマットに変更（年単位の区切りになります）
(function() {
"use strict";
// IE Number.isNaN 対策
if(!Number.isNaN)
Number.isNaN = isNaN;
kintone.events.on("app.record.detail.show", function(event) {
var record = event.record;
if (record['日付']['value']) {
var wareki = koyomi.format(record['日付']['value'], 'GGN年M月D日');
var el1 = kintone.app.record.getFieldElement('日付');
var el2 = el1.getElementsByTagName('span');
el2[0].innerText = wareki;
}
return event;
});
kintone.events.on("app.record.index.show", function(event) {
var el1 = document.querySelectorAll('.recordlist-cell-gaia.recordlist-date-gaia.value-nnnnnn div span');
for (var i = 0; i < el1.length; i++) {
if (el1[i].innerText) {
el1[i].innerText = koyomi.format(el1[i].innerText, 'GGN年M月D日');
}
}
return event;
});
})();
rex0220様
素晴らしく早いご回答ありがとうございます。
上記コードで、問題なく表示ができました。
今後ともご指導の程、宜しくお願いします。
はじめまして
横から大変失礼致します。
この内容は1年以上経過しておりますが、kintoneを触り始めて
日が浅いですが、この投稿記事は大変参考にさせていただきました。
そこで、些細な質問ですが、
(function() {
“use strict”;
kintone.events.on(“app.record.detail.show”, function(event) {
var record = event.record;
if (record[‘日付’][‘value’]) {
の[‘日付’]はフィールドコードに対応しているかと思いますが、
複数の日付フィールドを作成した場合、フィールドコードは初期状態であれば、
日付、日付_0、日付_1、日付_2と増えていきますが、
ここを日付_2とした場合、日付_2のみが和暦に変換されるというつもりでしたが、
実行すると、フィールドコードが日付と日付_2の2箇所が変換され、それ以外は通常の
西暦表示でした。
対応している日付_2が変換されるのはわかりますが、日付も変換されるのは
なぜでしょうか？
また日付、日付_0、日付_1、日付_2全てを和暦に変換させる場合は
record[‘日付’,‘日付_0’,‘日付_1’,‘日付_2’][‘value’]
の構文では間違いでしょうか？
変換されないので間違いかと思いますが、ご教示いただければ幸いです。
C-POWER さん
現象から推測すると、日付と日付_2を指定した JavaScript が２つ指定されているのではないかと思われます。
ソースが２つアップロードされていないか確認してみてください。
複数の項目を処理するには、ループ処理します。
下記は切り貼りしただけですので、検証してください。
kintone.events.on("app.record.detail.show", function(event) {
var record = event.record;
["日付","日付_0","日付_1","日付_2"].forEach(function(fcode) {
if (record[fcode]['value']) {
var wareki = koyomi.format(record[fcode]['value'], 'GGN年M月D日');
var el1 = kintone.app.record.getFieldElement(fcode);
var el2 = el1.getElementsByTagName('span');
el2[0].innerText = wareki;
}
});
return event;
});
早速の対応ありがとうございます。
JavaScript が２つ指定されていたのは、
別のアプリに関しては
kintoneシステムと別アプリに日付と日付_2を指定した JavaScriptが
はいっていましたので、kintoneシステムのみにしたところ改善されました。
ソースコードを早速検証してみました。
やはり、これだけではうまく起動しませんでした。
色々試行錯誤しておりますが、java初心者では手詰まり感もあるかと
感じております。
[“日付”,“日付_0”,“日付_1”,“日付_2”].forEach(function(fcode) {で
日付、日付_0・・・・といった配列データををfcodeという引数に代入して
というところまでは何となくわかりますが、
}
});
return event;
});
の入れ子で失敗しているのかがわかりません。
和暦変換は、
(function() {
“use strict”;・・・・のコードがうまくいけば、良いかと思いますが、
koyomi.min.jsも調整しなくてはいけないでしょうか？
また、“日付”,“日付_0”,“日付_1”,"日付_2"と特定された日付フィールドが和暦になると思いますが、
全ての日付フィールドを和暦にするには、配列データを工夫しないといけなさそうですか？
とりあえずの暫定対応として、JavaScript を項目ごとに４つ指定してはいかがですか？
少し格好悪いですが４つでも動くと思います。
配列処理で１本化するのは、JavaScript を勉強しながら対応してもいいと思います。
多少面倒でも「はじめようJavaScript第1回 JavaScriptとは」のチュートリアルから順番に試した方が漏れなくべ勉強できると思います。
全ての日付フィールドを和暦にするのは、レコード内の全項目をループ処理して日付項目を抽出して、あとは和暦処理します。
rex2000様
お世話になります。
”とりあえずの暫定対応として、JavaScript を項目ごとに４つ指定してはいかがですか？
少し格好悪いですが４つでも動くと思います。”
ひとつのファイルで配列処理をまかなうことばかり頭がいっていて、複数ファイルでの運用は思いつきませんでした。
おっしゃるとおり、複数のjsファイルをアップロードしてチェックしましたら和暦に変換されました。
おっしゃられるように、「はじめようJavaScript第1回 JavaScriptとは」で勉強したほうがよいですね。
kintoneの研修会に参加したときも、ここを見て勉強すると良いと言われていました。
先ずは暫定対応で行ってみます。色々とご対応頂き有難うございました。
rex2000様
お世話になります。
和暦変換プラグインの件ですが、レコード印刷をしようとすると、西暦表示になりますが、
これは、rex2000様が
2017年01月13日 18:35
2017年01月20日 10:37
に投稿された内容に関係しているのでしょうか？
レコード印刷時にも和暦表示になればと思っています。
ただkintoneのレコード印刷は見栄えがよくないので、
連携サービスのプリントクリエーター導入を視野に入れております。
プリントクリエーターが帳票印刷時に和暦になればよいかと考えております。
印刷時にも変換する場合は、レコード印刷画面表示イベントでも処理しましょう。
kintone.events.on(["app.record.detail.show","app.record.print.show"], function(event) {
プリントクリエーターの場合は、項目に和暦の値が設定しておく必要があります。
文字列で和暦項目を追加して、レコード追加・変更時のイベント処理で、和暦変換結果を和暦項目に追加してください。