C#アプリケーション

コンテンツパネルと吹き出し - Spectre Console シリーズ

Tim Corey

7分51秒

Spectre.Consoleは、.NET開発者が視覚的にリッチなコンソールアプリケーションを作成できるようにするNuGetパッケージです。 Spectre Console シリーズでは、Tim Corey が、インタラクティブなプロンプト、テーブル、進捗表示などの機能を使用して、プレーンなコンソールウィンドウをよりプロフェッショナルなものに変える方法を紹介します。

この記事では、Tim Corey 氏のビデオ "Content Panels and Callouts - Spectre Console Series" を見ながら、Spectre Console Panel 機能を詳しく見ていきます。Tim の例を使用して、パネルを作成し、その機能を調べ、さまざまなスタイルでデータを表示する方法を見ていきます。

基本的な Spectre コンソールパネルを作成する

Timはビデオ（0:00）の冒頭で、Spectre.Consoleを使用すると、C#コンソールアプリを視覚的に魅力的で有益なアプリケーションに変えることができることを思い出させてくれます。このレッスン(0:15)では、パネルを作成します。パネルは、必要に応じて、単純な吹き出しやミニテーブルとしても機能します。

0:34では、TimがVisual Studioで例を書いています。パネルの新しいインスタンスを作成する方法を示しています：

var panel = new("Tim Corey");
AnsiConsole.Write(panel);

var panel = new("Tim Corey");
AnsiConsole.Write(panel);

Dim panel = New Panel("Tim Corey")
AnsiConsole.Write(panel)

Dim panel = New Panel("Tim Corey")
AnsiConsole.Write(panel)

彼は、AnsiConsole.Write() がレンダリング可能なオブジェクトを受け入れること、そして Panel は IRenderable を実装しているため、それはすぐに適合することを指摘しています（0:47）。 1:02のコードを実行すると、"Tim Corey "というテキストを囲むシンプルなボックスが表示されます。この小さなスペースでさえ、メモを呼び出したり、プロンプトを強調表示したり、ユーザー入力を他のコンソール出力から切り離したりするのに便利です。

パネルの機能を探る：ボーダーとパディング

Timは次に、パネルの機能のデモンストレーションに移ります。 1:22で、彼はボーダーのスタイルを微調整している：

panel.Border = BoxBorder.Rounded;

panel.Border = BoxBorder.Rounded;

panel.Border = BoxBorder.Rounded

panel.Border = BoxBorder.Rounded

これは、パネルに丸みを帯びたボーダーを与えるもので、さまざまなスタイルがあります。彼は、カスタムの色分けされたテーマや青と緑のアクセントに合わせるためのダブルボーダーやその他のオプションも選ぶことができると述べています。

1:42で、Timはパネル内のパディングを調整しています：

panel.Padding = new(2, 0);

panel.Padding = new(2, 0);

panel.Padding = New Padding(2, 0)

panel.Padding = New Padding(2, 0)

彼は、コンソールのパディングはウェブ上のピクセルとは異なり、文字幅と改行に基づいていることを説明しています（2:16）。 5のような大きな数字は、利用可能な領域の多くを埋める大きなパネルを作成します。彼はスペースを数えながら、パディングがどのように機能するかを示している（2:35）。

コンテンツ周りのスペースを微調整できるこの機能により、varテーブルや棒グラフ、その他のデータを表示する場合でも、レイアウトに合ったパネルをデザインすることができます。

ヘッダーを追加してスタイルをカスタマイズする

3:37 Timはパネルにヘッダーを追加した：

panel.Header("My Name");

panel.Header("My Name");

panel.Header("My Name")

panel.Header("My Name")

彼が3:51でコードを実行すると、タイトルが境界線に表示されます。しかし、それはコンテンツと正反対です。彼はパディングを変更することで、これを修正した（4:04）：

panel.Padding = new (1, 0);

panel.Padding = new (1, 0);

panel.Padding = New Padding(1, 0)

panel.Padding = New Padding(1, 0)

これは、ヘッダーとテキストの間に少しスペースを作ります。 Tim は 4:16 に見出しとスペースを使用することでタスクの進行状況、ライブディスプレイ、または進行バーを伴う長時間実行タスクを表示する際にパネルを明確にラベルすることができる点を指摘しています。

パネル内でリストを表示する

Timは次に、文字列のリストをパネルに入れる方法を示します。 4:26では、前のレッスンから名前のリストを持ってきて、それを1つの文字列に結合する方法を示しています：

string panelInfo = string.Join('\n', names);
var panel = new Panel(panelInfo)
    .Header("Default Names");

string panelInfo = string.Join('\n', names);
var panel = new Panel(panelInfo)
    .Header("Default Names");

Dim panelInfo As String = String.Join(vbLf, names)
Dim panel = New Panel(panelInfo) _
    .Header("Default Names")

Dim panelInfo As String = String.Join(vbLf, names)
Dim panel = New Panel(panelInfo) _
    .Header("Default Names")

これは、リストを改行付きの1つの文字列に折りたたむものです（5:02）。実行"（5:28）は、パネル内にリストを整然と表示し、各項目をそれぞれの行に表示する。このテクニックを使えば、データやオブジェクトのプロパティを、強く型付けされた方法で、しかしテキストとして表示することができる。

Timはまた、リッチテキストマークアップを使って特定の項目にカスタムカラーを追加できることも強調しています（5:44）。例えば：

"[red]Bilbo Baggins[/]"

"[red]Bilbo Baggins[/]"

"[red]Bilbo Baggins[/]"

"[red]Bilbo Baggins[/]"

これは、Spectre コンソールパネルが、プレーンな文字列だけでなく、テーマ、太字テキスト、色分けされた項目などのスタイル付きコンテンツをどのように処理できるかを示しています。

マークアップとレンダリング可能なオブジェクトでコンテンツを中央に配置する

6:19で、ティムはコンテンツの中央揃え方法についての質問に答えている。プレーンな文字列では中心にはなりません。代わりに、レンダリング可能なオブジェクトを使用する必要があります。彼は実演する(6:34)：

Panel panel = new(new Markup(panelInfo).Centered());

Panel panel = new(new Markup(panelInfo).Centered());

Dim panel As New Panel(New Markup(panelInfo).Centered())

Dim panel As New Panel(New Markup(panelInfo).Centered())

これは文字列をMarkupに変換し、.Centered()を呼び出し、パネルに割り当てます。コードを実行すると（7:01）、すべての名前が中央に表示されます。これは、コンテンツを利用可能なスペースに水平に配置したい新しいテーブル、新しい棒グラフ、または任意のインタラクティブコントロールを作成している場合に特に便利です。

Timはまた、パネルがIRenderableであり、テーブルや他のパネルの中にネストすることができることを指摘しています（7:07）。これにより、例えば、プロンプト、varテーブル、棒グラフを並べたパネルや、異なるタスクのファイル進行状況を表示するパネルのような、複合的な表示を構築することが可能になります。

コンソールアプリケーションのビルディングブロックとしてのパネル

つまり、Spectre.Console がレンダリング可能なオブジェクトを期待する場所であれば、テーブルの内側、ライブディスプレイの内側、その他のレイアウトの中など、どこにでもパネルを挿入することができます。この柔軟性により、インタラクティブプロンプト、進行バー、カスタムカラーコーディングされたテーマなどの Spectre.Console コンポーネントとパネルを組み合わせて、磨かれた .NET コンソールアプリケーションを作成することができます。

ティムのビデオからの主な要点

Spectre コンソールパネルは、コンソールアプリケーションでコンテンツをハイライトしたり、ユーザー入力を促したり、データをフレーム化したりするシンプルかつ強力な方法です。
パネルは、丸みを帯びたもの、二重のもの、カスタムヘッダー、スペースをコントロールするためのパディングなど、さまざまなスタイルをサポートしています。
リストを表示したり、カスタムカラーテーマのためにリッチテキストマークアップを使用したり、Markup.Centered()を使用してコンテンツを中央に配置することもできます。
パネルはレンダリング可能なオブジェクトなので、テーブルの中に入れ子にしたり、プログレス表示や棒グラフと組み合わせたり、複雑なインタラクティブ・レイアウトを構築することができます。
NuGetパッケージをインストールし、.NETまたはVisual Studioプロジェクト内で強く型付けされたAPIを使用するだけで、これらすべてを利用できます。

Tim Corey 氏の video に従えば、Spectre.Console パネルを自信を持って使い始めることができ、ヘッダー、カスタムテーマ、きちんとフォーマットされた出力など、洗練されたデータリッチなコンソール体験を、コンソールの世界から離れることなく作成することができます。