Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111

Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111

## イベントURL
https://clrh.connpass.com/event/367562/

## Github Copilotのチャット履歴ビューワー
https://github.com/KatsuYuzu/CopilotChatViewer

Transcript

1. Github Copilotのチャット履歴ビューワーを作りました ～WPF、dotnet10もあるよ～ 2025/11/29 CLR/H #111 .NET 10 リリース記念！ LT しみみん@KatsuYuzu やってること dotnet ASP.NET XAML TypeScript Angular 1
2. Github Copilotのチャット履歴ビューワーを作りました https://github.com/KatsuYuzu/CopilotChatViewer 2
3. 何に使うか AIとやりとりした内容を、あとから見返したい AIとやりとりした内容を、プレゼン資料に使いたい チャット履歴ビューワー → 内容をHTML形式でコピーできます 🧑‍💻 こんにちは 🤖 こんにちは。私は GitHub Copilot です。プログラミングに関するご質問や コードの修正など、お手伝いできることがあれば教えてください。 🧑‍💻 こんばんわ 🤖 こんばんわ。何かプログラミングについてご相談がありますか？お気軽に ご質問ください。 会社でのGitHub Copilotの導入や布教で資料を作成するときにめっちゃ便利でした 3
4. 機能 一覧 チャット履歴ファイルを自動で検出 し、左ペインに一覧表示します。 検索 任意のキーワードで一覧を絞り込め ます。 チャット内容の表示 選択した履歴の内容を、右ペインに ユーザー・AIのアイコン付き吹き出 しで表示します。 HTMLコピー クリップボードにHTML形式でコピー できます。 4
5. 機能 HTMLコピー <div><style> .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; } </style> <div class="chat-container"> <div class="msg-row user"><div class="msg-bubble user"> <span class="icon">&#129489; &#128187;</span>こんにちは </div></div> <div class="msg-row copilot"><div class="msg-bubble copilot"> <span class="icon">&#129302;</span>こんにちは。私は GitHub Copilot です。プログラミングに関するご質問やコードの修正など、お手伝いできることがあれば教えてください。 </div></div> <div class="msg-row user"><div class="msg-bubble user"> <span class="icon">&#129489; &#128187;</span>こんばんわ </div></div> <div class="msg-row copilot"><div class="msg-bubble copilot"> <span class="icon">&#129302;</span>こんばんわ。何かプログラミングについてご相談がありますか？お気軽にご質問ください。 </div></div> </div></div> 🧑‍💻 こんにちは 🤖 こんにちは。私は GitHub Copilot です。プログラミングに関するご質問やコー ドの修正など、お手伝いできることがあれば教えてください。 🧑‍💻 こんばんわ 🤖 こんばんわ。何かプログラミングについてご相談がありますか？お気軽にご質 問ください。 マークダウンで作成している資料にそのままペーストして使ってください！ 5
6. 開発・技術情報 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
7. 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<string?>.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
8. Fluent UI スタイル リソースの読み込み <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> テーマの適用 #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
9. Github Copilotのチャット履歴ビューワーを作りました https://github.com/KatsuYuzu/CopilotChatViewer 9
10. 付録：この資料はMarpで作られています MarpとはMarkdownからスライドを作成するツールです。 特徴 VSCode拡張が利用できます PDF/PowerPointなどに出力可能です CSSで自由にデザインできます 独自のテーマを作成できます 基本的な書き方 --- marp: true --- # スライド1 --- # スライド2 10