掲示板のURL変更のお知らせ【重要】 への返答
投稿で使用できる特殊コードの説明。(別タブで開きます。)
以下の返答は逆順(新しい順)に並んでいます。
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/10/15 19:09:21
掲示板のプログラムを更新しました。
主な変更点
・一覧画面、投稿の内容の画面(ThreadDetail.aspx)等でウィンドウの横幅が狭い場合のレイアウトを改善しました。
・特にスマホを縦持ちした時、一覧画面は表形式ではなくリスト形式で表示するようにしました。(少し実験的な変更です。)
・他、表示微修正など。
主な変更点
・一覧画面、投稿の内容の画面(ThreadDetail.aspx)等でウィンドウの横幅が狭い場合のレイアウトを改善しました。
・特にスマホを縦持ちした時、一覧画面は表形式ではなくリスト形式で表示するようにしました。(少し実験的な変更です。)
・他、表示微修正など。
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/9/30 19:25:01
掲示板のプログラムを更新しました。
主な変更点
・新規投稿画面・返信画面で横幅が狭い場合のレイアウトを改善しました。
・検索実行後に、検索状態を解除するボタンを追加しました。(従来、検索前に戻る方法がありませんでした。)
主な変更点
・新規投稿画面・返信画面で横幅が狭い場合のレイアウトを改善しました。
・検索実行後に、検索状態を解除するボタンを追加しました。(従来、検索前に戻る方法がありませんでした。)
投稿者 魔界の仮面弁士  (社会人)
投稿日時
2023/9/23 17:50:56
*****************************
⑥投稿時の名前やパスワードを入力する欄のレイアウト
解像度の低いノートPCや、スマホなどのモバイル環境からだと、
ラベルばかりが間延びして、入力ボックスが狭くなりすぎます。
入力ボックスのサイズを優先するとともに、
縦方向へ間延びしないようなレイアウトを希望します。
*****************************
⑦コードタグのマージンが広すぎる
コードタグの margin-bottom:1rem; 指定を、もう少し減らして欲しいです。
以前の掲示板は文章の行間が全くなくギッチリ詰め込まれてた感じがありました。
今回は行間が少し広くなって、文章としては読みやすくなりましたが、
各種コードタグを使った後、その後の文章が離れすぎてしまい、
縦に間延びして読みにくく感じました。
コードタグに下マージンを確保するにしても、もう少し狭い方が
個人的には好みです。各種コードタグ後に改行しなければ間延びを減らせますが、
それはちょっと書きにくいですし…。
🔶コードタグ後に改行する場合🔶
**新掲示板での表示(空行を追加したわけでもないのに、コード直後の文章が離れすぎに感じます)***
**この掲示板上での実際の見え方***
コード後の文1行目
コード後の文2行目
🔶コードタグの後に改行を含めない場合🔶
**新掲示板での表示***
**この掲示板上での実際の見え方***
コード後の文:2行目
======================
⑥投稿時の名前やパスワードを入力する欄のレイアウト
解像度の低いノートPCや、スマホなどのモバイル環境からだと、
ラベルばかりが間延びして、入力ボックスが狭くなりすぎます。
入力ボックスのサイズを優先するとともに、
縦方向へ間延びしないようなレイアウトを希望します。
*****************************
⑦コードタグのマージンが広すぎる
コードタグの margin-bottom:1rem; 指定を、もう少し減らして欲しいです。
以前の掲示板は文章の行間が全くなくギッチリ詰め込まれてた感じがありました。
今回は行間が少し広くなって、文章としては読みやすくなりましたが、
各種コードタグを使った後、その後の文章が離れすぎてしまい、
縦に間延びして読みにくく感じました。
コードタグに下マージンを確保するにしても、もう少し狭い方が
個人的には好みです。各種コードタグ後に改行しなければ間延びを減らせますが、
それはちょっと書きにくいですし…。
🔶コードタグ後に改行する場合🔶
[CODE]Class Module1
Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class[/CODE]
コード後の文1行目
コード後の文2行目
**旧掲示板での表示***Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class[/CODE]
コード後の文1行目
コード後の文2行目
**新掲示板での表示(空行を追加したわけでもないのに、コード直後の文章が離れすぎに感じます)***
**この掲示板上での実際の見え方***
Class Module1
Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class
コード後の文1行目
コード後の文2行目
🔶コードタグの後に改行を含めない場合🔶
[CODE]Class Module1
Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class[/CODE]コード後の文1行目
コード後の文2行目
**旧掲示板での表示***Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class[/CODE]コード後の文1行目
コード後の文2行目
**新掲示板での表示***
**この掲示板上での実際の見え方***
Class Module1
Shared Sub Main()
Console.WriteLine("End")
End Sub
End Class
コード後の文:1行目コード後の文:2行目
======================
投稿者 魔界の仮面弁士  (社会人)
投稿日時
2023/9/11 09:50:00
早速の修正ありがとうございます。分かりやすくなりました。
それ以外で気になった点としては:
⑤フォント指定が変化したことで、罫線文字「┼」や黒丸記号「●」などをCODE タグで使った場合、
今までは全角だったものが半角で表示されることで過去ログの幾つかで、罫線ズレが生じています。
たとえばこのあたりとか。
http://rucio.cloudapp.net/ThreadDetail.aspx?ThreadId=30873#CommentId85774
https://keijiban.umayadia.com/ThreadDetail.aspx?ThreadId=30873#CommentId85774
文字幅プロパティが "Ambiguous" な文字なので、難しい問題なのですけれどね…。
https://diarywind.com/blog/e/box-chasr-width-difference-among-fonts.html
https://eng-blog.iij.ad.jp/archives/12576
互換性維持の観点から、新設された VB タグと C# タグはこのまま変更なしとして、
従来の CODE タグのみ、font-family を MS ゴシック 表記に戻すというのは如何でしょう?
それ以外で気になった点としては:
⑤フォント指定が変化したことで、罫線文字「┼」や黒丸記号「●」などをCODE タグで使った場合、
今までは全角だったものが半角で表示されることで過去ログの幾つかで、罫線ズレが生じています。
たとえばこのあたりとか。
http://rucio.cloudapp.net/ThreadDetail.aspx?ThreadId=30873#CommentId85774
https://keijiban.umayadia.com/ThreadDetail.aspx?ThreadId=30873#CommentId85774
文字幅プロパティが "Ambiguous" な文字なので、難しい問題なのですけれどね…。
https://diarywind.com/blog/e/box-chasr-width-difference-among-fonts.html
https://eng-blog.iij.ad.jp/archives/12576
互換性維持の観点から、新設された VB タグと C# タグはこのまま変更なしとして、
従来の CODE タグのみ、font-family を MS ゴシック 表記に戻すというのは如何でしょう?
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/9/11 07:39:23
魔界の仮面弁士さん、
>Pre.Code { } に対して
>• line-height: 60%; を削除
>• white-space: を pre-wrap から inherit (または initial か unset に変更)
>とすることで、折り返した文字が重なる事象が解消されるようです。
検証ありがとうございます。さっそく反映させました。
>②いいねボタンがクリッカブルであるように見えなかったので、
> cursor:pointer スタイルを追加したり、ホバー時に線の色や背景を着色すると
> 分かりやすくなるのではないでしょうか。
ホバー時に少し動くようにしてみました。どうでしょう。
>Pre.Code { } に対して
>• line-height: 60%; を削除
>• white-space: を pre-wrap から inherit (または initial か unset に変更)
>とすることで、折り返した文字が重なる事象が解消されるようです。
検証ありがとうございます。さっそく反映させました。
>②いいねボタンがクリッカブルであるように見えなかったので、
> cursor:pointer スタイルを追加したり、ホバー時に線の色や背景を着色すると
> 分かりやすくなるのではないでしょうか。
ホバー時に少し動くようにしてみました。どうでしょう。
投稿者 魔界の仮面弁士  (社会人)
投稿日時
2023/9/10 23:52:06
> ④画面幅が狭い環境、とくにスマホ端末で閲覧した場合、
> 折り返し時の行間が狭すぎて、文字が重なってしまう事象が見られました。
Pre.Code { } に対して
• line-height: 60%; を削除
• white-space: を pre-wrap から inherit (または initial か unset に変更)
とすることで、折り返した文字が重なる事象が解消されるようです。
当方で確認した環境は下記のとおりです。多分、Win10 以下でも同じでしょう。
🔹Firefox 117 on Win11 22H2
🔹Edge 116 on Win11 22H2
🔹Chrome 116 on Win11 22H2
🔸IE11 on Win11 22H2 (ドキュメントモード: IE11/既定)
なお IE で white-space スタイルを指定する場合、
inherit なら指定できますが、initial や unset はサポートされません。
(まぁ、今更 IE を考慮する必要は無いと思いますが…)
> 折り返し時の行間が狭すぎて、文字が重なってしまう事象が見られました。
Pre.Code { } に対して
• line-height: 60%; を削除
• white-space: を pre-wrap から inherit (または initial か unset に変更)
とすることで、折り返した文字が重なる事象が解消されるようです。
当方で確認した環境は下記のとおりです。多分、Win10 以下でも同じでしょう。
🔹Firefox 117 on Win11 22H2
🔹Edge 116 on Win11 22H2
🔹Chrome 116 on Win11 22H2
🔸IE11 on Win11 22H2 (ドキュメントモード: IE11/既定)
なお IE で white-space スタイルを指定する場合、
inherit なら指定できますが、initial や unset はサポートされません。
(まぁ、今更 IE を考慮する必要は無いと思いますが…)
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/9/10 23:08:32
魔界の仮面弁士さん、さっそくありがとうございます。
> ①最近の C# 言語構造で記述すると、タグが破損してしまうようです。
> (再現性があるようであれば、これについては別スレッドに記します)
ひとまず手当てしました。
連絡ありがとうございます!
> ①最近の C# 言語構造で記述すると、タグが破損してしまうようです。
> (再現性があるようであれば、これについては別スレッドに記します)
ひとまず手当てしました。
連絡ありがとうございます!
投稿者 魔界の仮面弁士  (社会人)
投稿日時
2023/9/10 20:32:15
新掲示板リリースおめでとうございます!
C# タグと👍ボタンが追加されて、ちょっとワクワクしています。
①最近の C# 言語構造で記述すると、タグが破損してしまうようです。
(再現性があるようであれば、これについては別スレッドに記します)
②いいねボタンがクリッカブルであるように見えなかったので、
cursor:pointer スタイルを追加したり、ホバー時に線の色や背景を着色すると
分かりやすくなるのではないでしょうか。
③削除パスワードを入れずに投降したとき、再投稿時に前回の確認ワードが
そのまま表示されました。ワンタイム認証なので確認ワードの再送は不要かと思います。
また、削除パスワードを入れずに投稿(≠プレビュー)ボタンを押した場合は、
クライアント側でも事前チェックで拒絶していただけると、利用者側で再送の手間を省けると思います。
④画面幅が狭い環境、とくにスマホ端末で閲覧した場合、
折り返し時の行間が狭すぎて、文字が重なってしまう事象が見られました。
参考までに画像を貼っておきます。DPI の関係で、ちょっと見にくいかもしれませんが……。
C# タグと👍ボタンが追加されて、ちょっとワクワクしています。
①最近の C# 言語構造で記述すると、タグが破損してしまうようです。
(再現性があるようであれば、これについては別スレッドに記します)
②いいねボタンがクリッカブルであるように見えなかったので、
cursor:pointer スタイルを追加したり、ホバー時に線の色や背景を着色すると
分かりやすくなるのではないでしょうか。
③削除パスワードを入れずに投降したとき、再投稿時に前回の確認ワードが
そのまま表示されました。ワンタイム認証なので確認ワードの再送は不要かと思います。
また、削除パスワードを入れずに投稿(≠プレビュー)ボタンを押した場合は、
クライアント側でも事前チェックで拒絶していただけると、利用者側で再送の手間を省けると思います。
④画面幅が狭い環境、とくにスマホ端末で閲覧した場合、
折り返し時の行間が狭すぎて、文字が重なってしまう事象が見られました。
参考までに画像を貼っておきます。DPI の関係で、ちょっと見にくいかもしれませんが……。
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/9/10 18:53:41
ちなみに、新しい掲示板は
- ASP.NET Core Razorページを使用して作っています。
- 言語は C# です。旧掲示板は VB だったのですが、ここ数年VBの進化が止まっているためC#で作り直しました。
- Azure で動作しています。
- Linux で動作しています。もちろんWindowsでも動作しますが、Linuxの方が安いのです。
- 互換性とちょっとした出来心でURLに .aspx を付けました。
- ASP.NET Core Razorページを使用して作っています。
- 言語は C# です。旧掲示板は VB だったのですが、ここ数年VBの進化が止まっているためC#で作り直しました。
- Azure で動作しています。
- Linux で動作しています。もちろんWindowsでも動作しますが、Linuxの方が安いのです。
- 互換性とちょっとした出来心でURLに .aspx を付けました。
投稿者 るきお(管理者)  (社会人)
投稿日時
2023/9/10 18:45:50
Visual Basic 中学校の掲示板の URL を変更します。
新URL
https://keijiban.umayadia.com/
当面は現在のURLでも使用できます。移行期間は数か月単位を考えています。
どちらのURLで使用してもデータベースは共通なので、見える書き込みは同じです。
新しい方でエラーになったりなにかおかしかったらごめんなさい。移行期間中に修正していければと思います。
移行する理由は、利用しているAzureのサービスが古くなっており、終了のアナウンスが出ているからです。このまま何もしないと掲示板が強制終了してしまうんです。
https://azure.microsoft.com/ja-jp/updates/app-service-environment-v1-and-v2-retirement-announcement/
この機会に、掲示板のプログラムを作り直し、機能も少し変えました。
- コメントを いいね! できます。(それほど厳密な機能ではないので参考程度です。)
- C# のプログラムも色付きで表示できるようになりました。
https://keijiban.umayadia.com/Usage
サンプル
この下の書き込みは新しい方の掲示板で表示すれば色付きのプログラムとして表示されます。
新URL
https://keijiban.umayadia.com/
当面は現在のURLでも使用できます。移行期間は数か月単位を考えています。
どちらのURLで使用してもデータベースは共通なので、見える書き込みは同じです。
新しい方でエラーになったりなにかおかしかったらごめんなさい。移行期間中に修正していければと思います。
移行する理由は、利用しているAzureのサービスが古くなっており、終了のアナウンスが出ているからです。このまま何もしないと掲示板が強制終了してしまうんです。
https://azure.microsoft.com/ja-jp/updates/app-service-environment-v1-and-v2-retirement-announcement/
この機会に、掲示板のプログラムを作り直し、機能も少し変えました。
- コメントを いいね! できます。(それほど厳密な機能ではないので参考程度です。)
- C# のプログラムも色付きで表示できるようになりました。
https://keijiban.umayadia.com/Usage
サンプル
この下の書き込みは新しい方の掲示板で表示すれば色付きのプログラムとして表示されます。
string value = "";
//string value = null; //← null で試したい場合
if (string.IsNullOrEmpty(value))
{
//これが表示されます。
System.Diagnostics.Debug.WriteLine("文字列はnullか空文字です。");
}
旧掲示板のURLにアクセスすると自動的に新掲示板に飛ばされます。
※旧掲示板は http://rucio.cloudapp.net/ 、新掲示板は https://keijiban.umayadia.com/ から始まるURLです。
たとえば、
http://rucio.cloudapp.net/ThreadDetail.aspx?ThreadId=30915
にアクセスすると、
https://keijiban.umayadia.com/ThreadDetail.aspx?ThreadId=30915
が表示されます。
そのため、現在、事実上旧掲示板の機能にはアクセスできません。
背景と経緯 (いままでの書き込みと重複する部分もあります。)
・旧掲示板が利用している Azure の App Serviceのバージョン1と2 が 2024年8月31日に廃止されます。
https://azure.microsoft.com/ja-jp/updates/app-service-environment-v1-and-v2-retirement-announcement/
・そのため、私は今年9月11日に 新しい環境に新掲示板 を公開し、新旧並立状態にしていました。両方とも同じデータベースを見ているので、どちらにアクセスしても見える投稿やコメントは同じです。
・このままだと、旧掲示板へのリンクはやがて機能しなくなります。少しでもこれを救うために旧掲示板から新掲示板への恒久的リダイレクトの導入を検討していました。恒久的リダイレクトができれば、少なくとも検索エンジンは新しい方の掲示板にリンクを張り替えてくれます(全部なのかはわかりませんが)。
・しかし、旧掲示板の方の環境は、Azure側でホストの容量がいっぱいになっていて、新しいプログラムのデプロイができない状態でした。最終的には一度旧掲示板を削除して空き領域を作ってから恒久的リダイレクト版をデプロイすることを考えていましたが、Azure側の運用がわからないだけに、削除だけ成功して新しいデプロイは失敗するリスクがあると感じていました。
※私は費用節約のため一番安い共有型のホスティング環境を利用していました。また、生来の面倒くさがりで独自ドメインを導入せず、オリジンのドメインをそのまま使っていました。(独自ドメインを導入していれば、DNS的な回避策もあったのですが…)
・そこで私は2週間に1回くらいダメもとで恒久的リダイレクト版のデプロイを実施していたところ、今までは失敗していたのに今日は成功しました。(20分くらいかかりました)。
・なお、現状旧環境には従来版と恒久的リダイレクト版の2つがデプロイされており、スワップ可能な状態(のはず)です。