🦔
Chromeで別小窓に和暦日付を表示するブックマークレット
同じようなネタばかり、書いていますが、シロウトなので単にITリテラシーが無いからです…
０．初めに
-
普段は、西暦しか使わないが、たまに和暦が必要で今「令和何年？」となる
-
JavaScriptの和暦表示記事をQiitaで見かけた
JavaScriptが令和に対応。Intl.DateTimeFormatで日付を和暦(元号)表記に変換する
【JavaScript】外部ライブラリに頼らないDateフォーマット (日付編)Intl.DateTimeFormat】
-
基本的に「今日は和暦で何年？」のみで大丈夫だが、たまに過去日付の和暦も見たかった。
⇒こんな感じにしたかった
-
ブックマークレットなら簡単そうだったので作った
１．作ったもの、使ったもの
- 元々のJavaScript
var hhh='<html lang="ja">'+
'<head>'+
'<title>和暦</title>'+
' <meta charset="UTF-8">'+
' <title>Document</title>'+
'</head>'+
'<body>'+
' <input type="date" id="today">'+
' <div id="seireki"></div>'+
' <div id="wareki"></div>'+
' <script>'+
' var date = new Date();'+
''+
' var yyyy = date.getFullYear();'+
' var mm = ("0"+(date.getMonth()+1)).slice(-2);'+
' var dd = ("0"+date.getDate()).slice(-2); document.getElementById("today").value=yyyy+"-"+mm+"-"+dd;'+
'let selectElement = document.querySelector("#today");'+
'let sei = document.querySelector("#seireki");'+
'let wa = document.querySelector("#wareki"); '+
'let week = [ "(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)" ];'+
'let wd = date.getDay();'+
'let options = {era: "long"};'+
'sei.innerHTML = new Intl.DateTimeFormat("ja-JP-u-ca-japanese", options).format(date)+" "+week[wd];'+
'options = {year: "numeric",month: "long",day: "numeric"};'+
'wa.innerHTML = new Intl.DateTimeFormat("ja-JP", options).format(date)+" "+week[wd]; '+
' '+
'selectElement.addEventListener("change", (event) => {'+
'let date = new Date(event.target.value); '+
'let wd = date.getDay();'+
'let options = {era: "long"};'+
'sei.innerHTML = new Intl.DateTimeFormat("ja-JP-u-ca-japanese", options).format(date)+" "+week[wd];'+
'options = {year: "numeric",month: "long",day: "numeric"};'+
'wa.innerHTML = new Intl.DateTimeFormat("ja-JP", options).format(date)+" "+week[wd]; '+
'});'+
' </script> '+
'</body>'+
'</html>';
var win = window.open('','','width=280,height=120');
win.document.write(hhh);
-
ブックマークレットに変換するためのWEBサービス
-
変換後のJavaScript
javascript:var%20hhh%3D'%3Chtml%20lang%3D%22ja%22%3E'%2B%20'%3Chead%3E'%2B%20'%3Ctitle%3E%E5%92%8C%E6%9A%A6%3C%2Ftitle%3E'%2B%20'%20%3Cmeta%20charset%3D%22UTF-8%22%3E'%2B%20'%20%3Ctitle%3EDocument%3C%2Ftitle%3E'%2B%20'%3C%2Fhead%3E'%2B%20'%3Cbody%3E'%2B%20'%20%3Cinput%20type%3D%22date%22%20id%3D%22today%22%3E'%2B%20'%20%3Cdiv%20id%3D%22seireki%22%3E%3C%2Fdiv%3E'%2B%20'%20%3Cdiv%20id%3D%22wareki%22%3E%3C%2Fdiv%3E'%2B%20'%20%3Cscript%3E'%2B%20'%20var%20date%3Dnew%20Date()%3B'%2B%20''%2B%20'%20var%20yyyy%3Ddate.getFullYear()%3B'%2B%20'%20var%20mm%3D(%220%22%2B(date.getMonth()%2B1)).slice(-2)%3B'%2B%20'%20var%20dd%3D(%220%22%2Bdate.getDate()).slice(-2)%3Bdocument.getElementById(%22today%22).value%3Dyyyy%2B%22-%22%2Bmm%2B%22-%22%2Bdd%3B'%2B%20'let%20selectElement%3Ddocument.querySelector(%22%23today%22)%3B'%2B%20'let%20sei%3Ddocument.querySelector(%22%23seireki%22)%3B'%2B%20'let%20wa%3Ddocument.querySelector(%22%23wareki%22)%3B'%2B%20'let%20week%3D%5B%20%22(%E6%97%A5)%22%2C%22(%E6%9C%88)%22%2C%22(%E7%81%AB)%22%2C%22(%E6%B0%B4)%22%2C%22(%E6%9C%A8)%22%2C%22(%E9%87%91)%22%2C%22(%E5%9C%9F)%22%20%5D%3B'%2B%20'let%20wd%3Ddate.getDay()%3B'%2B%20'let%20options%3D%7Bera%3A%20%22long%22%7D%3B'%2B%20'sei.innerHTML%3Dnew%20Intl.DateTimeFormat(%22ja-JP-u-ca-japanese%22%2Coptions).format(date)%2B%22%20%22%2Bweek%5Bwd%5D%3B'%2B%20'options%3D%7Byear%3A%20%22numeric%22%2Cmonth%3A%20%22long%22%2Cday%3A%20%22numeric%22%7D%3B'%2B%20'wa.innerHTML%3Dnew%20Intl.DateTimeFormat(%22ja-JP%22%2Coptions).format(date)%2B%22%20%22%2Bweek%5Bwd%5D%3B'%2B%20'%20'%2B%20'selectElement.addEventListener(%22change%22%2C(event)%3D%3E%7B'%2B%20'let%20date%3Dnew%20Date(event.target.value)%3B'%2B%20'let%20wd%3Ddate.getDay()%3B'%2B%20'let%20options%3D%7Bera%3A%20%22long%22%7D%3B'%2B%20'sei.innerHTML%3Dnew%20Intl.DateTimeFormat(%22ja-JP-u-ca-japanese%22%2Coptions).format(date)%2B%22%20%22%2Bweek%5Bwd%5D%3B'%2B%20'options%3D%7Byear%3A%20%22numeric%22%2Cmonth%3A%20%22long%22%2Cday%3A%20%22numeric%22%7D%3B'%2B%20'wa.innerHTML%3Dnew%20Intl.DateTimeFormat(%22ja-JP%22%2Coptions).format(date)%2B%22%20%22%2Bweek%5Bwd%5D%3B'%2B%20'%7D)%3B'%2B%20'%20%3C%2Fscript%3E%20'%2B%20'%3C%2Fbody%3E'%2B%20'%3C%2Fhtml%3E'%3Bvar%20win%3Dwindow.open(''%2C''%2C'width%3D280%2Cheight%3D120')%3Bwin.document.write(hhh)%3Bvoid(0);
２．終わりに
- 過去日付の和暦変換できるので意外と便利
- ブックマークレットは簡単で初心者でも作れる
- ブラウザで同期されるので、他のPCでもすぐ使える
- 中身がわかるので、セキュリティの心配もない
おしまい
Discussion