今日もいつも通りプログラムを書いていく訳だが、先ずは今まで蔑ろにしていたタイピング練習を正面切って取り組むことにした。タッチタイピングは普段からしているが如何せんスピードが遅い（2打鍵/秒）し、タイポも多い。タイピングは集中して取り組まないとこれ以上上達する兆しが見られないから毎日30分は練習しようと思う。
タイピング練習に最適なサイトは幾つかあるが私は下記のサイトを利用している。
タイピングの対象（自分で作れる）が豊富だし、何よりマイペースに続けられる点が気に入っている。朝イチでするとそれ以降のホームポジションが安定するので自分にオススメ。
さて、今日も昨日の続きでデバッグをしていた。500エラーは見慣れたものだがちょっと引っ掛かったところがあるから下記にメモしておく。先ずはこれ。JSPでJSTLのil8nタグを使っている。
<div class="field">
<label for="createdDate">Date</label>
<input type="date" name="createdDate" value="<fmt:formatDate value='${idea.createdDate}' pattern='yyyy / MM / dd' />"/>
</div>フォーム画面（Edit）を作成していたが、日付の項目には予め前回作成時の日付をフォーマットして入れておくことにする。それで上記のコードを書いた。これで何かを編集する際は一々当日の日付を入力する必要がなくなる。しかし、このコードではそのままpostしたら500エラー（IllegalArgumentException）が出てしまう。そこで試したのが下記のコード。
<div class="field">
<label for="createdDate">Date</label>
<input type="date" name="createdDate" value="<fmt:formatDate value='${idea.createdDate}' pattern='yyyy-MM-dd' />"/>
</div>さっきのコードとの違いは年月日をハイフン（-）で繋いでいる点だ。実はこのフォームの送信先であるサーブレットではjava.sql.Dateの形式に変換するためにDate.valueOf()を使用していた。このメソッドはyyyy-[m]m-[d]dの形式にしか対応していないからエラーが発生したという訳である。もしスラッシュ（/）を表示時に使いたければサーブレットでyyyy / [m]m / [d]dをyyyy-[m]m-[d]dの形式に変換してあげる必要がある。試してはないがjava.text.SimpleDateFormatクラスを使えば良さそう。
そんなこんなで多分バグは消えた。
デバッグ飽きたから息抜きにドレーピング。 pic.twitter.com/Ct3NJestEG
— Kiki Keiten (@kikikeiten) November 26, 2020
息抜きも大切ね。
さて、こうやって毎日ブログを書いているんだけど、無責任にも全ての情報ソースの確認はしていない。もし間違えた情報があった時に善意の第三者が居れば教えてほしいなという完全なる他力本願の思いで今まで閉鎖していたコメント欄を解放することにした。にしてもWordPressのコメントフォームはダサすぎて目眩がする。これが長い間コメント欄を閉鎖していた理由であるが思い切ってコーディングすることを決意。
下記がコメント周りの追加CSSコード。WordPressのテーマによってクラス名は異なるけどコメント周辺に関してはそんなに変わらないと思う。本当はキャレットを太くしたかったんだけどCSSでは無理そうだった。JavaScriptでエディタから作らないと駄目かもだから今度に回す。
// メールアドレス、URL、タイトルを削除
.comment-form-email, .comment-form-url, .comment-notes, .p-commentArea__title {
display: none;
}
// コメントエリアを背景色と同じに
.p-commentArea {
background: var(--color_bg);
padding: 1em;
// フォーム
button, input, select, textarea {
color: #29fe13;
border: 0px solid #e6e6e6;
font-size: 14px;
font-weight: normal;
background-color: rgba(0, 0, 0, 0.8);
padding: .5em 1em;
font-family: Menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// フォームをフォーカスした時
&:focus {
outline: none;
}
}
// ラベル
.comment-respond {
font-size: 1em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
label {
color: transparent;
}
[for="comment"]:before {
font-family: "Font Awesome 5 Free";
color: #29fe13;
content: '\f0eb';
}
[for="author"]:before {
font-family: "Font Awesome 5 Free";
color: #ff8272;
content: '\f5b7';
}
// 送信ボタン
#submit {
line-height: 2;
color: var(--color_text);
border: 1px solid var(--color_text);
transition: .25s;
background-color: var(--color_main);
&:hover {
opacity: 1;
border: 1px solid var(--color_link);
}
}
}
// コメントフォーム
.comment-body {
p {
background-color: #000;
color: #29fe13;
font-family: Menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: .2em 0em;
}
}
// 返信ボタン
.comment-reply-link {
padding: .4em .5em;
border: .5px solid var(--color_main);
color: var(--color_text);
font-size: 12px;
background-color: var(--color_main);
font-family: Menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: .25s;
&:hover {
border: .5px solid var(--color_link);
}
}
// 返信者の氏名
.comment-author, .fn, time:not(.c-postTimes__modified, .c-postTimes__posted) {
font-family: Menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// 返信ツリーの線
.c-commentList .children {
border-left: solid .5px #ff8272;
}日付のフォーマットはRFC 2822を採用。
せっかくコメントフォーム開いたからコメントが来るといいな。障壁を減らすためにメールアドレスの入力欄も試験的に撤廃してみたからどしどしマサカリを飛ばしてきて欲しい。
ブログのコメント欄カッコよくした。ただ、誰も書き込まないんだけどね……。自己満足だな。 pic.twitter.com/IVTj1oYJXH
— Kiki Keiten (@kikikeiten) November 26, 2020