ガレコレ [Garage Collection]
［トップページ］
News,blog & history 
【HTML5&CSS3&JavaScript】
JavaScriptでダイアログを表示するのに、次の３つのメソッドが用意されています。
--
// 警告ダイアログ
alert("表示テキスト");
// 確認ダイアログ
$srt = confirm("表示テキスト");
// 文字入力ダイアログ
$str = prompt("表示テキスト","入力フィールド内テキスト");
--
prompt()を利用しても、入力フィールドは１つだけです。１つのダイアログで、ユーザ名とパスワードのように２つの入力フィールドがあるダイアログは用意されていません。その場合、prompt()を２回発動させるのが定番です。
試験的に、showModalDialog()なるメソッドもありましたが、廃止されて使えません。
HTML5.1では、<dialog></dialog>が用意されています。しかし、現在対応しているのは、Google ChromeとOperaだけで、Firefoxは試験対応、SafariとEdgeとIEは未対応でした。現時点では、使えませんね。
ならば、勝手に都合の良いダイアログを<div></div>で作っちゃいましょう。勘のいい方なら気づかれたでしょうが、style.displayの切り替えで、表示／非表示を利用します。
ダイアログを常に中央ちょっと高めに表示するのに、ちょっとしたテクニックを使用しています。
<style>
#id_dialog {
position:fixed;
margin-left:-142px;
margin-top :-152px;
top :50%;
left:50%;
width :240px;
height:260px;
padding:0px 16px;
border:solid 6px orange;
}
</style>
P.S. ダイアログ<div></div>を最前面で表示させるのに、一番下に記述しなければならないのかと思ったら、必要ありませんでした。多分、position:fixed;が、position:static;（初期値）より、前面になるというルールですね。
P.S.2 ダイアログの枠線が、浮き上がり(outset)だと、Safari、Chrome、Opera以外は、濁色になってしまいます。直線(solid)にして、影を付けることにしました。角丸(border-radius)も影(box-shadow)も、IE11を含むすべてのブラウザで、ＯＫ。
--
border:outset 6px orange;
↓
border:solid 6px orange;
border-radius:24px;
box-shadow:3px 3px 6px;
--
P.S.3 先のセッションテストに、このダイアログを組み込んでみます。最終的には、『子猫の手 [Network Communication Note]』で利用します。
P.S.4 無いものは、ある材料で作るのがプログラミングの醍醐味。ようやく、Web環境でプログラム言語が整い、何でもプログラミングできるようになってきた感じがします。でも、流行りは、スマホアプリですね。勉強すれば、出来る難易度なのですが、先立つものがないとね。
--
// 警告ダイアログ
alert("表示テキスト");
// 確認ダイアログ
$srt = confirm("表示テキスト");
// 文字入力ダイアログ
$str = prompt("表示テキスト","入力フィールド内テキスト");
--
prompt()を利用しても、入力フィールドは１つだけです。１つのダイアログで、ユーザ名とパスワードのように２つの入力フィールドがあるダイアログは用意されていません。その場合、prompt()を２回発動させるのが定番です。
試験的に、showModalDialog()なるメソッドもありましたが、廃止されて使えません。
HTML5.1では、<dialog></dialog>が用意されています。しかし、現在対応しているのは、Google ChromeとOperaだけで、Firefoxは試験対応、SafariとEdgeとIEは未対応でした。現時点では、使えませんね。
ならば、勝手に都合の良いダイアログを<div></div>で作っちゃいましょう。勘のいい方なら気づかれたでしょうが、style.displayの切り替えで、表示／非表示を利用します。
ダイアログを常に中央ちょっと高めに表示するのに、ちょっとしたテクニックを使用しています。
<style>
#id_dialog {
position:fixed;
margin-left:-142px;
margin-top :-152px;
top :50%;
left:50%;
width :240px;
height:260px;
padding:0px 16px;
border:solid 6px orange;
}
</style>
P.S. ダイアログ<div></div>を最前面で表示させるのに、一番下に記述しなければならないのかと思ったら、必要ありませんでした。多分、position:fixed;が、position:static;（初期値）より、前面になるというルールですね。
P.S.2 ダイアログの枠線が、浮き上がり(outset)だと、Safari、Chrome、Opera以外は、濁色になってしまいます。直線(solid)にして、影を付けることにしました。角丸(border-radius)も影(box-shadow)も、IE11を含むすべてのブラウザで、ＯＫ。
--
border:outset 6px orange;
↓
border:solid 6px orange;
border-radius:24px;
box-shadow:3px 3px 6px;
--
P.S.3 先のセッションテストに、このダイアログを組み込んでみます。最終的には、『子猫の手 [Network Communication Note]』で利用します。
P.S.4 無いものは、ある材料で作るのがプログラミングの醍醐味。ようやく、Web環境でプログラム言語が整い、何でもプログラミングできるようになってきた感じがします。でも、流行りは、スマホアプリですね。勉強すれば、出来る難易度なのですが、先立つものがないとね。
日付に関する変数と関数をまとめてライブラリにしました。オリジナルのプログラミングですが、ありきたりなものですので、参考にされてもっといいのを作成してみて下さい。
http://neconote.jp/prg/date.js
末尾のリンクに、date.jsライブラリを使用した『カレンダー』の表示例のページを掲載しておきました。ご参考まで。
【date.jsライブラリの利用方法】
１．変数と関数
■日付変数
$week[n]
曜日配列。n=0～6
■元号の日付オブジェクト
$meiji1
明治元年1月1日[旧暦]
（1868年1月25日）
$meiji2
明治2年1月1日[旧暦]
（1869年2月11日）
$meiji3
明治3年1月1日[旧暦]
（1870年2月1日）
$meiji4
明治4年1月1日[旧暦]
（1871年2月19日）
$meiji5
明治5年1月1日[旧暦]
（1872年2月9日）
$meiji6
明治6年1月1日[太陽暦]
$taisho
明治45年7月30日
大正元年7月30日
$showa
大正15年12月25日
昭和元年12月25日
$heisei
平成元年1月8日
■日付関数
_true_date($year,$month,$date)
// 年月日の校正 //
・グローバル変数 $y,$m,$d,$w
_gengo($year,$month[,$date])
// 元号 //
・月単位
・グローバル変数 $gengo,$start_w,$days
・日単位
・グローバル変数 $gengo
・返り値 $gengo
_holiday($year,$month,$date)
// 祝日の判定 //
・グローバル変数 $holiday,$w
・返り値 true/false
■カレンダー表示の関数
_setup_calendar()
// カレンダーの初期設定 //
_calendar($year,$month)
// カレンダーの表示 //
_month_btn(n)
// 表示月の変更 //
・nは、月の増減値
２．カレンダーを表示する場合
(1) HTMLファイルの<body></body>内において、下記を参考に記述して下さい。
<body>
<div id="id_calendar"></div>
</body>
(2) HTMLファイルの<style></style>内と<script></script>内において、下記を参考に記述して下さい。
<head>
<style>
td {text-align:center;}
.sun {color:red;}
.sat {color:blue;}
.today {background:gold;}
</style>
<script src="date.js"></script>
<script>
window.onload = _setup_calendar;
</script>
</head>
P.S. いい出来なので、PHP用に逆移植する予定です。
P.S.2 六曜カレンダーも、以前に作成したのですが、見つかりません。旧暦カレンダーを元に作成するのですが、誤っていると大変なことになりますね。結構難しかった覚えがあり、色々問題があるので、実用化に至りませんでした。
http://neconote.jp/prg/date.js
末尾のリンクに、date.jsライブラリを使用した『カレンダー』の表示例のページを掲載しておきました。ご参考まで。
【date.jsライブラリの利用方法】
１．変数と関数
■日付変数
$week[n]
曜日配列。n=0～6
■元号の日付オブジェクト
$meiji1
明治元年1月1日[旧暦]
（1868年1月25日）
$meiji2
明治2年1月1日[旧暦]
（1869年2月11日）
$meiji3
明治3年1月1日[旧暦]
（1870年2月1日）
$meiji4
明治4年1月1日[旧暦]
（1871年2月19日）
$meiji5
明治5年1月1日[旧暦]
（1872年2月9日）
$meiji6
明治6年1月1日[太陽暦]
$taisho
明治45年7月30日
大正元年7月30日
$showa
大正15年12月25日
昭和元年12月25日
$heisei
平成元年1月8日
■日付関数
_true_date($year,$month,$date)
// 年月日の校正 //
・グローバル変数 $y,$m,$d,$w
_gengo($year,$month[,$date])
// 元号 //
・月単位
・グローバル変数 $gengo,$start_w,$days
・日単位
・グローバル変数 $gengo
・返り値 $gengo
_holiday($year,$month,$date)
// 祝日の判定 //
・グローバル変数 $holiday,$w
・返り値 true/false
■カレンダー表示の関数
_setup_calendar()
// カレンダーの初期設定 //
_calendar($year,$month)
// カレンダーの表示 //
_month_btn(n)
// 表示月の変更 //
・nは、月の増減値
２．カレンダーを表示する場合
(1) HTMLファイルの<body></body>内において、下記を参考に記述して下さい。
<body>
<div id="id_calendar"></div>
</body>
(2) HTMLファイルの<style></style>内と<script></script>内において、下記を参考に記述して下さい。
<head>
<style>
td {text-align:center;}
.sun {color:red;}
.sat {color:blue;}
.today {background:gold;}
</style>
<script src="date.js"></script>
<script>
window.onload = _setup_calendar;
</script>
</head>
P.S. いい出来なので、PHP用に逆移植する予定です。
P.S.2 六曜カレンダーも、以前に作成したのですが、見つかりません。旧暦カレンダーを元に作成するのですが、誤っていると大変なことになりますね。結構難しかった覚えがあり、色々問題があるので、実用化に至りませんでした。
旧 体育の日にちなんで、カレンダーのプログラミング。PHP用のは稼働していますが、JavaScript用はお蔵入りしていました。いい機会なので、移植してみました。
【年号】
■明治
1868年 1月25日（明治元年1月1日［天保暦］）
～1912年 7月30日（明治45年）
・1868年10月23日(慶応4年9月8日［天保暦］)
明治天皇の即位による代始改元
・1868年 1月25日
遡って、慶応4年1月1日［天保暦］を、明治元年1月1日[天保暦]としました。
・1872年12月31日＝明治5年12月2日［天保暦］まで
天保暦（旧暦、太陰太陽暦）が使用されていました。
・1873年 1月 1日（明治6年）＝明治5年12月3日［天保暦］から
太陽暦（新暦）が採用されました。
・1898年 5月11日（明治31年）
［グレゴリオ暦］が採用されました。
・明治と大正の切り替わりの日は、重なっています。
■大正
1912年 7月30日（大正元年）
～1926年12月25日（大正15年）
・大正と昭和の切り替わりの日は、重なっています。
■昭和
1926年12月25日（昭和元年）
～1989年 1月 7日（昭和64年）
■平成
1989年 1月 8日（平成元年）
～
【国民の祝日について】
1948年 7月20日 昭和23年法律第178号
・「元日」1月1日
・「成人の日」1月15日
・「春分の日」春分日
・「天皇誕生日」4月29日
・「憲法記念日」5月3日
・「こどもの日」5月5日
・「秋分の日」秋分日
・「文化の日」11月3日
・「勤労感謝の日」11月23日
1964年10月10日 東京オリンピック開会式
1966年 6月25日 昭和41年法律第86号
・「建国記念の日」追加
・昭和41年政令第376号により2月11日
・「敬老の日」9月15日追加
・「体育の日」10月10日追加
1973年 4月12日 昭和48年法律第10号
・第三条2項 振替休日追加
1985年12月27日 昭和60年法律第103号
・第三条3項 挟み休日追加
1989年 2月17日 平成元年法律第5号
・「天皇誕生日」4月29日→12月23日変更
・「みどりの日」4月29日追加
1995年 3月 8日 平成7年法律第22号
・1996年1月1日から施行
・「海の日(7月20日)」追加
1998年10月21日 平成10年法律第141号
・2000年1月1日から施行
・いわゆるハッピーマンデー法
・「成人の日」1月15日→1月第2月曜日変更
・「体育の日」10月10日→10月第2月曜日に変更
2001年 6月22日 平成13年法律第59号
・2003年1月1日から施行
・「海の日」7月20日→7月第3月曜日変更
・「敬老の日」9月15日→9月第3月曜日変更
2005年 5月20日 平成17年法律第43号
・2007年1月1日から施行
・「みどりの日」4月29日→5月4日変更
・「昭和の日」4月29日追加
2014年 5月30日 平成26年法律第43号
・2016年1月1日から施行
・「山の日」8月11日追加
1959年 3月17日 昭和34年法律第16号
・皇太子明仁親王の結婚の儀の行われる日を休日とする法律
［1959年4月10日］
1989年 2月17日 平成元年法律第4号
・昭和天皇の大喪の礼の行われる日を休日とする法律
［1989年2月24日］
1990年 6月 1日 平成2年法律第24号
・即位礼正殿の儀の行われる日を休日とする法律
［1990年11月12日］
1993年 4月30日 平成5年法律第32号
・皇太子徳仁親王の結婚の儀の行われる日を休日とする法律
［1993年6月9日］
5月6日の振替休日 [GW]
5月3日(金) 5月4日(土) 5月5日(日) 5月6日(月)
5月3日(土) 5月4日(日) 5月5日(月) 5月6日(火)
5月3日(日) 5月4日(月) 5月5日(火) 5月6日(水)
9月22日の国民の休日 [SW]
9月21日(月)敬老の日
9月22日(火)国民の休日
9月23日(水)秋分の日
P.S. 実用的には、_holiday($y,$m,$d)関数で、判断を返すプログラミングになるでしょう。
P.S.1-2 結局、JavaScript部分を、calendar.jsにまとめて、JavaScriptライブラリとしました。本体のHTMLファイルはスッカラカンなのであしからず。
http://neconote.jp/prg/calendar.js
P.S.2 1月1日は、元日［がんじつ］であって、元旦［がんたん］ではありません。
P.S.3 表計算ソフトExcelでは、1900年2月29日が存在しています。他のプログラミング言語におけるUNIXタイムと1日分ずれますので、注意が必要です。
日付 標準（数値）
1900/1/1 1
1900/2/28 59
1900/2/29 60
1900/3/1 61
1900/3/2 62
P.S.3-2 この問題が存在していることは覚えていたのですが、その由来が明治時代の太陽暦にあって、日本事情に合わせてくれていたとばかり思っていたら、ちゃんと1900年の前に法律で閏年を変更していますね。
Microsoftの公式見解では、「Excelの日付システムは、他の表計算ソフトとの互換性を完全に満たすように定義されています。」とのこと。誤りが伝播して、今に至るということです。
P.S.4 分岐ロジックを変更して、分かりやすくしました。
月→年→日→曜
↓変更
月→日→曜→年
【年号】
■明治
1868年 1月25日（明治元年1月1日［天保暦］）
～1912年 7月30日（明治45年）
・1868年10月23日(慶応4年9月8日［天保暦］)
明治天皇の即位による代始改元
・1868年 1月25日
遡って、慶応4年1月1日［天保暦］を、明治元年1月1日[天保暦]としました。
・1872年12月31日＝明治5年12月2日［天保暦］まで
天保暦（旧暦、太陰太陽暦）が使用されていました。
・1873年 1月 1日（明治6年）＝明治5年12月3日［天保暦］から
太陽暦（新暦）が採用されました。
・1898年 5月11日（明治31年）
［グレゴリオ暦］が採用されました。
・明治と大正の切り替わりの日は、重なっています。
■大正
1912年 7月30日（大正元年）
～1926年12月25日（大正15年）
・大正と昭和の切り替わりの日は、重なっています。
■昭和
1926年12月25日（昭和元年）
～1989年 1月 7日（昭和64年）
■平成
1989年 1月 8日（平成元年）
～
【国民の祝日について】
1948年 7月20日 昭和23年法律第178号
・「元日」1月1日
・「成人の日」1月15日
・「春分の日」春分日
・「天皇誕生日」4月29日
・「憲法記念日」5月3日
・「こどもの日」5月5日
・「秋分の日」秋分日
・「文化の日」11月3日
・「勤労感謝の日」11月23日
1964年10月10日 東京オリンピック開会式
1966年 6月25日 昭和41年法律第86号
・「建国記念の日」追加
・昭和41年政令第376号により2月11日
・「敬老の日」9月15日追加
・「体育の日」10月10日追加
1973年 4月12日 昭和48年法律第10号
・第三条2項 振替休日追加
1985年12月27日 昭和60年法律第103号
・第三条3項 挟み休日追加
1989年 2月17日 平成元年法律第5号
・「天皇誕生日」4月29日→12月23日変更
・「みどりの日」4月29日追加
1995年 3月 8日 平成7年法律第22号
・1996年1月1日から施行
・「海の日(7月20日)」追加
1998年10月21日 平成10年法律第141号
・2000年1月1日から施行
・いわゆるハッピーマンデー法
・「成人の日」1月15日→1月第2月曜日変更
・「体育の日」10月10日→10月第2月曜日に変更
2001年 6月22日 平成13年法律第59号
・2003年1月1日から施行
・「海の日」7月20日→7月第3月曜日変更
・「敬老の日」9月15日→9月第3月曜日変更
2005年 5月20日 平成17年法律第43号
・2007年1月1日から施行
・「みどりの日」4月29日→5月4日変更
・「昭和の日」4月29日追加
2014年 5月30日 平成26年法律第43号
・2016年1月1日から施行
・「山の日」8月11日追加
1959年 3月17日 昭和34年法律第16号
・皇太子明仁親王の結婚の儀の行われる日を休日とする法律
［1959年4月10日］
1989年 2月17日 平成元年法律第4号
・昭和天皇の大喪の礼の行われる日を休日とする法律
［1989年2月24日］
1990年 6月 1日 平成2年法律第24号
・即位礼正殿の儀の行われる日を休日とする法律
［1990年11月12日］
1993年 4月30日 平成5年法律第32号
・皇太子徳仁親王の結婚の儀の行われる日を休日とする法律
［1993年6月9日］
5月6日の振替休日 [GW]
5月3日(金) 5月4日(土) 5月5日(日) 5月6日(月)
5月3日(土) 5月4日(日) 5月5日(月) 5月6日(火)
5月3日(日) 5月4日(月) 5月5日(火) 5月6日(水)
9月22日の国民の休日 [SW]
9月21日(月)敬老の日
9月22日(火)国民の休日
9月23日(水)秋分の日
P.S. 実用的には、_holiday($y,$m,$d)関数で、判断を返すプログラミングになるでしょう。
P.S.1-2 結局、JavaScript部分を、calendar.jsにまとめて、JavaScriptライブラリとしました。本体のHTMLファイルはスッカラカンなのであしからず。
http://neconote.jp/prg/calendar.js
P.S.2 1月1日は、元日［がんじつ］であって、元旦［がんたん］ではありません。
P.S.3 表計算ソフトExcelでは、1900年2月29日が存在しています。他のプログラミング言語におけるUNIXタイムと1日分ずれますので、注意が必要です。
日付 標準（数値）
1900/1/1 1
1900/2/28 59
1900/2/29 60
1900/3/1 61
1900/3/2 62
P.S.3-2 この問題が存在していることは覚えていたのですが、その由来が明治時代の太陽暦にあって、日本事情に合わせてくれていたとばかり思っていたら、ちゃんと1900年の前に法律で閏年を変更していますね。
Microsoftの公式見解では、「Excelの日付システムは、他の表計算ソフトとの互換性を完全に満たすように定義されています。」とのこと。誤りが伝播して、今に至るということです。
P.S.4 分岐ロジックを変更して、分かりやすくしました。
月→年→日→曜
↓変更
月→日→曜→年
タイトルをクリックすると、本文が表示されるプログラミング。
--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h3 {cursor:pointer;}
</style>
<script>
function _folding($target){
$target = $target.nextSibling;
if($target.style.display=="none"){
$target.style.display = "block";
}else{
$target.style.display = "none";
}
}
</script>
<title>折り畳み本文付きタイトル</title>
</head>
<body>
<h2>【折り畳み本文付きタイトル】</h2>
<hr>
<h3 onclick="_folding(this);">タイトル１</h3><p> 本文１</p>
<hr>
<h3 onclick="_folding(this);">タイトル２</h3><p style="display:none;"> 本文２</p>
<hr><hr>
</body>
</html>
--
DOM [Document Object Model]を理解できれば、簡単でしょ。thisは今のノード（塊）、.nextSiblingは、次（右隣り）のノードという意味。
注意点としては、</h3>と<p>の間に何も入れないこと。半角スペースや改行もダメ。それらはタグで囲まれていないけど、ノードと見なされるので、指定が狂います。
-- × --
<h3 onclick="_folding(this);">タイトル１</h3>[改行]
<p> 本文１</p>
--
--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h3 {cursor:pointer;}
</style>
<script>
function _folding($target){
$target = $target.nextSibling;
if($target.style.display=="none"){
$target.style.display = "block";
}else{
$target.style.display = "none";
}
}
</script>
<title>折り畳み本文付きタイトル</title>
</head>
<body>
<h2>【折り畳み本文付きタイトル】</h2>
<hr>
<h3 onclick="_folding(this);">タイトル１</h3><p> 本文１</p>
<hr>
<h3 onclick="_folding(this);">タイトル２</h3><p style="display:none;"> 本文２</p>
<hr><hr>
</body>
</html>
--
DOM [Document Object Model]を理解できれば、簡単でしょ。thisは今のノード（塊）、.nextSiblingは、次（右隣り）のノードという意味。
注意点としては、</h3>と<p>の間に何も入れないこと。半角スペースや改行もダメ。それらはタグで囲まれていないけど、ノードと見なされるので、指定が狂います。
-- × --
<h3 onclick="_folding(this);">タイトル１</h3>[改行]
<p> 本文１</p>
--
お問い合わせby Network Communication Note