私のブログサイトが再びBlazorに戻った理由

はじめに

ブログサイトの開発過程において、管理者はまさに険しい道のりを乗り越えてきました。当初の構想から実践に至るまで、MVC、Razor Pages、Vue、Go、Blazor など、さまざまな開発技術に取り組んできました。この長い過程で、サイトのバージョンは約10回も改訂され、各バージョンには管理者の心血と探求が凝縮されています。この挑戦に満ちた道のりは、Dotnet9ブログサイト制作時に蓄積した資料を共有します - 码坊に詳しく記録されています。

現在、熟考と実践の末、ブログサイトは再び Blazor に回帰し、静的 SSR 技術を採用するとともに、スタイリッシュで実用的な Ant Design デザインスタイルを取り入れました。これらの改良により、サイトのアクセス速度は飛躍的に向上し、まるで新たな活力が注入されたかのようです。現在、サイトは無事に公開されています。

URL: https://dotnet9.com

オープンソースの力

ここで、以下のオープンソースプロジェクトに感謝します。

Known: https://known.org.cn/

これは、Blazor 技術を基に精巧に作られた、オープンソースのエンタープライズ開発フレームワークです。ローコード、クロスプラットフォーム、すぐに使える優れた特性により、従来の開発の限界を打ち破り、まさに「一度書けば、あらゆる場所で実行できる」効率的なモードを実現します。その中核的価値は効率性と柔軟性にあり、ソフトウェア開発のパラダイムに新たな変革をもたらします。まるで魔法の鍵のように、開発者がデジタルトランスフォーメーションの扉を容易に開き、さまざまな課題に落ち着いて対処し、ビジネスの持続的な成長を促進し、新たな章を開くのを助けます。

当サイトのソースコードもオープンソースです。

リポジトリ: https://github.com/dotnet9/CodeWF

码坊は .NET 9 Blazor を使用して開発されたウェブサイトです。技術記事、オープンソースプロジェクトの紹介、オンラインツールを提供しています。码坊 — 記事で知恵を、ツールで力を。

サイトの技術

サイトは Known のオープンソースプロジェクト KnownCMS を基に構築されています。

KnownCMS は Blazor ベースのコンテンツ管理システムで、フロントエンドは Blazor 静的コンポーネント、バックエンドは Known フレームワークを使用しています。

管理者のサイトはブログ記事の表示とオンラインツールの使用のみであり、記事の編集は普段から Typora と VS Code を併用しています。サイトの中核データファイルは Assets.Dotnet9 リポジトリに保存されています。そのため、管理者は当面不要なバックエンド管理関連機能を削除し、プロジェクトのソースコードは3つのプロジェクトのみとなっています。

AntBlazor: 管理者はこのプロジェクトをほとんど変更していません。基本的に Known が提供する Ant Design スタイルの Blazor 静的コンポーネントのラッパーで、フォーム、ラベル、ボタンなどの基本コンポーネントを含みます。
CodeWF: Razor クラスライブラリ。主にサイトのドキュメントやブログ記事ページのカプセル化を実装します。まだオンラインになっていないツールもありますが、後でこのライブラリのアーキテクチャに従って別のライブラリを作成し、オンラインツールを記述する予定です。
WebSite: サイトのエントリプロジェクト。CodeWF と AntBlazor プロジェクトを統合し、もちろん一部のページ（ホーム、アバウト、タイムラインなど）のカプセル化や Web API コントローラーも含みます。

AntBlazor	CodeWF	WebSite

豆知識: 静的 SSR とは？

静的 SSR は Blazor Server や Blazor Client (WASM) とは明確に異なります。マイクロソフトのドキュメントによると:

静的 SSR は、受信 HTTP リクエストをサーバーが処理する際に、コンポーネントをサーバー側で実行する独自の動作モードです。この過程で、Blazor はコンポーネントを巧妙に HTML としてレンダリングし、それを応答コンテンツに含めます。応答が送信されると、サーバー側のコンポーネントとそれに対応するレンダラーの状態は自動的に破棄され、最終的にブラウザには純粋な HTML のみが残ります。

このモードの利点は多岐にわたります。まず、ホスティングコストを大幅に削減し、サイト運営者の経済的負担を軽減します。次に、優れたスケーラビリティを備え、小規模なユーザーアクセスから大規模なトラフィックの急増まで、柔軟に対応できます。これは、コンポーネントの状態を維持するためにサーバーリソースを継続的に必要とせず、サーバーリソースを大量に節約できるためです。さらに、ブラウザとサーバー間の持続的な接続の制約から解放され、同時にブラウザで WebAssembly を読み込む必要もなくなり、パフォーマンスがさらに最適化されます。

よりわかりやすく言えば、静的 SSR と Blazor Server はどちらもサーバーサイドレンダリングの範疇に属しますが、インタラクティブ機能において違いがあります。静的 SSR モードでは、フロントエンドの HTML コントロールは Blazor Server のように C# のイベントメソッドをマッピングできませんが、それでも JavaScript 関数を使ってインタラクションを実現できます。例えば、button の click イベントを JS 関数にマッピングして処理できます。幸いなことに、C# のエンティティバインディングやサービスインジェクションなどの重要な機能は静的 SSR でも正常に使用できます。この特性により、静的 SSR は SEO（検索エンジン最適化：一連の技術的手段を通じてウェブサイトの検索エンジンランキングを向上させ、サイトトラフィックを増加させること。その核心は、サイトコンテンツが検索エンジンに効果的にクロールされ、より多くのトラフィックを得られるようにすることです）を必要とするフロントエンドサイトに最適です。以下は静的 SSR コンポーネントの定義例（記事詳細基本情報コンポーネント UPostCount.raozr）です。

@inject IOptions<SiteOption>
  SiteOption
  <div class="counts">
    @if (Post?.Lastmod != null) {
    <span>更新日 @(Post?.Lastmod?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
    } else {
    <span>作成日 @(Post?.Date?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
    }
    <span style="margin:0 5px;">|</span>
    <span class="author"
      >@(string.IsNullOrWhiteSpace(Post?.Author) ? SiteOption.Value.Owner :
      Post!.Author)</span
    >
    @if (ShowEdit) {
    <span style="margin:0 5px;">|</span>
    <a
      href="@ConstantUtil.GetPostGitHubPath(SiteOption.Value.RemoteAssetsRepository, Post)"
      target="_blank"
      >編集・コメントする</a
    >
    }
  </div>

  @code { [Parameter] public BlogPost Post { get; set; } [Parameter] public bool
  ShowEdit { get; set; } = true; }</SiteOption
>

表示結果は以下の通りです。

サイト機能の説明

ホーム

URL: https://dotnet9.com

多くのサイトと同様に、最初にサイトのキャッチコピー「码坊: .NET 9 Web API + Blazor で開発。技術記事、オープンソースプロジェクトの紹介、オンラインツールがあり、効率的なプログラミングを支援します。」を表示し、その後におすすめ記事ブロック、さらに後ほどおすすめツールブロック（開発中）を表示し、最後にフレンドリーリンク、フッターなどを表示します。

ドキュメント

ここでは管理者の一部のオープンソースプロジェクトを紹介しています。

URL: https://dotnet9.com/project

以下は一部のプロジェクト概要です。

CodeWF

これは当サイトのソースコードリポジトリです。詳細はリンクをご覧ください。

CodeWF.EventBus

プロセス内イベント配信用（外部依存なし）で、機能は MediatR に似ています。詳細はリンクをご覧ください。

CodeWF.EventBus.Socket

CodeWF.EventBus.Socket は、軽量で Socket ベースの分散イベントバスシステムであり、分散アーキテクチャにおけるイベント通信を簡素化することを目的としています。プロセス間でパブリッシュ/サブスクライブパターンによる通信を可能にし、外部メッセージキューサービスに依存しません。詳細はリンクをご覧ください。

CodeWF.NetWeaver

CodeWF.NetWeaver は、AOT をサポートする簡潔で強力な C# ライブラリで、TCP および UDP パケットのパッキングとアンパッキング操作を処理します。詳細はリンクをご覧ください。

CodeWF.Toolbox

CodeWF Toolbox は Avalonia で開発されたクロスプラットフォームツールボックスで、Prism をモジュラー開発フレームワークとして使用し、AOT 公開をサポートしています。Avalonia プロジェクトの学習に適しています。詳細はリンクをご覧ください。

CodeWF.Tools

ここではよく使われるユーティリティクラスを収集・共有しています。詳細はリンクをご覧ください。

Assets.Dotnet9

これは当サイトの中核データリポジトリです。詳細はリンクをご覧ください。

ブログ

URL: https://dotnet9.com/post

ブログページは標準的な技術ブログのスタイルで、左、中央、右の3カラムに分かれています。左サイドバーは記事のカテゴリ一覧で、クリックすると中央に記事リストがページネーション表示され、右側にはサイト統計や管理者のおすすめなどが表示されます。

リスト内の記事をクリックすると記事の詳細が表示されます。ここで、VleaStwo (Lee) 様が提供してくださった TOC（目次）機能に感謝します。この機能により、ユーザーは記事の重要な内容を素早く見つけ、読解効率を向上させることができます。

すべての記事を編集できます

記事に誤字脱字、誤解を招く表現、または補足事項がある場合は、ページ右上の「編集・コメントする」をクリックして PR を送信してください。よろしくお願いいたします。

最新の PR#4 は記事「.NET クロスプラットフォームクライアントフレームワーク - Avalonia UI」に対するものです。

ユーザー hjkl950217 (長空 X) に感謝します。

まとめ

サイトの開発過程において、管理者は絶えず探求と試行を重ね、多くのチュートリアルやオープンソースプロジェクトから学びました。非常に有益であり、助けてくださった友人や先生方に深く感謝いたします。

また、VleaStwo 様は Masa Blazor ブランチを立ち上げられました。興味のある方はぜひ PR やディスカッションにご参加ください。

最後に、関連リンクを掲載します。ご覧いただき、交流いただければ幸いです。

当サイトのソースコード (Ant Design スタイル): https://github.com/dotnet9/codewf
VleaStwo 様のブランチ (Masa Blazor スタイル): https://github.com/VleaStwo/CodeWF
Known: https://known.org.cn
Ant Design Blazor: https://antblazor.com/
Masa Blazor: https://masastack.com/blazor

私のブログサイトが再びBlazorに戻った理由

はじめに

オープンソースの力

サイトの技術

サイト機能の説明

ホーム

ドキュメント

ブログ

まとめ

関連読書

Winformでもこんなデータ表示ができる

Winformの画面も綺麗にできる？

ThingsGateway(一) ModbusTcpプロトコルデバイスの収集

箱から出してすぐに使える、C# と Blazor に基づくフロントエンドとバックエンドを分離した高速開発フレームワーク