Slide 1

Slide 1 text

Github Copilotのチャット履歴ビューワーを作りました ~WPF、dotnet10もあるよ~ 2025/11/29 CLR/H #111 .NET 10 リリース記念! LT しみみん@KatsuYuzu やってること dotnet ASP.NET XAML TypeScript Angular 1

Slide 2

Slide 2 text

Github Copilotのチャット履歴ビューワーを作りました https://github.com/KatsuYuzu/CopilotChatViewer 2

Slide 3

Slide 3 text

何に使うか AIとやりとりした内容を、あとから見返したい AIとやりとりした内容を、プレゼン資料に使いたい チャット履歴ビューワー → 内容をHTML形式でコピーできます 🧑‍💻 こんにちは 🤖 こんにちは。私は GitHub Copilot です。プログラミングに関するご質問や コードの修正など、お手伝いできることがあれば教えてください。 🧑‍💻 こんばんわ 🤖 こんばんわ。何かプログラミングについてご相談がありますか?お気軽に ご質問ください。 会社でのGitHub Copilotの導入や布教で資料を作成するときにめっちゃ便利でした 3

Slide 4

Slide 4 text

機能 一覧 チャット履歴ファイルを自動で検出 し、左ペインに一覧表示します。 検索 任意のキーワードで一覧を絞り込め ます。 チャット内容の表示 選択した履歴の内容を、右ペインに ユーザー・AIのアイコン付き吹き出 しで表示します。 HTMLコピー クリップボードにHTML形式でコピー できます。 4

Slide 5

Slide 5 text

機能 HTMLコピー
.chat-container { display: flex; flex-direction: column; gap: 8px; } .msg-row { display: flex; } .msg-bubble { padding: 12px 16px; border-radius: 16px; font-family: 'Segoe UI', sans-serif; font-size: 15px; box-shadow: 0 2px 8px #0001; word-break: break-word; } .user { border-radius: 16px; background: #e6f3ff; margin-left: auto; } .copilot { border-radius: 16px; background: #fffbe6; margin-right: auto; } .icon { font-size: 20px; vertical-align: middle; margin-right: 8px; } .msg-row.user { justify-content: flex-end; } .msg-row.copilot { justify-content: flex-start; }
🧑 💻こんにちは
🤖こんにちは。私は GitHub Copilot です。プログラミングに関するご質問やコードの修正など、お手伝いできることがあれば教えてください。
🧑 💻こんばんわ
🤖こんばんわ。何かプログラミングについてご相談がありますか?お気軽にご質問ください。
🧑‍💻 こんにちは 🤖 こんにちは。私は GitHub Copilot です。プログラミングに関するご質問やコー ドの修正など、お手伝いできることがあれば教えてください。 🧑‍💻 こんばんわ 🤖 こんばんわ。何かプログラミングについてご相談がありますか?お気軽にご質 問ください。 マークダウンで作成している資料にそのままペーストして使ってください! 5

Slide 6

Slide 6 text

開発・技術情報 https://github.com/KatsuYuzu/CopilotChatViewer WPF(Windows Presentation Foundation, XAML) MVVMパターン(CommunityToolkit.Mvvm) dotnet9 partial プロパティ source generatorとの親和性に革命が起きてます! Fluent UI スタイル(プレビュー) dotnet10 Fluent UI スタイル(プレビュー) WPF での Fluent UI スタイルのサポートを向上させるために、.NET 10 ではさまざまな バグ修正が行われています。 Fluent UI スタイルのサポートはまだ進行中です。 6

Slide 7

Slide 7 text

CommunityToolkit.Mvvm × partial プロパティ dotnet8まで(※C#12まで) [ObservableProperty] private string? _name; 自動生成プロパティと競合しないように命名 dotnet9から [ObservableProperty] public partial string? Name { get; private set; } partial のおかげで競合しない CommunityToolkit.Mvvmのsource generatorで自動生成されるプロパティ public partial string? Name { get => field; private set { if (!global::System.Collections.Generic.EqualityComparer.Default.Equals(field, value)) { OnNameChanging(value); OnNameChanging(default, value); OnPropertyChanging(global::CommunityToolkit.Mvvm.ComponentModel.__Internals.__KnownINotifyPropertyChangingArgs.Name); field = value; OnNameChanged(value); OnNameChanged(default, value); OnPropertyChanged(global::CommunityToolkit.Mvvm.ComponentModel.__Internals.__KnownINotifyPropertyChangedArgs.Name); } } } 7

Slide 8

Slide 8 text

Fluent UI スタイル リソースの読み込み テーマの適用 #pragma warning disable WPF0001 Application.Current.ThemeMode = ThemeMode.System; // light, dark #pragma warning restore WPF0001 ※まだプレビューの機能なので警告の抑制が必要 https://learn.microsoft.com/ja- jp/dotnet/desktop/wpf/whats- new/net90#fluent-theme 8

Slide 9

Slide 9 text

Github Copilotのチャット履歴ビューワーを作りました https://github.com/KatsuYuzu/CopilotChatViewer 9

Slide 10

Slide 10 text

付録:この資料はMarpで作られています MarpとはMarkdownからスライドを作成するツールです。 特徴 VSCode拡張が利用できます PDF/PowerPointなどに出力可能です CSSで自由にデザインできます 独自のテーマを作成できます 基本的な書き方 --- marp: true --- # スライド1 --- # スライド2 10