画面上でデータをライブ修正 - Spectre Console シリーズ

ライブ表示の紹介

Timはまず、Spectre.Consoleについて説明し、それがどのようにコンソールアプリを視覚的に魅力的にするかについて説明します。 このシリーズでは、各レッスンが短い例題となっており、説明の中にソースコードがリンクされています。

このレッスンでは、リアルタイム更新のために画面上の既存のデータを修正するライブ表示機能の使い方に焦点を当てていると説明しています。 ティムはまた、視聴者が購読し、iamtimcorey.com を訪問して、より多くのトレーニングリソースを得ることを奨励しています。

データのための新しいテーブルを作成する

Timは、タイトル、レッスン、時間の列を持つ新しいテーブルをすでに作成したことを示しています。 このテーブルは、APIから引き出されたコース情報をレンダリングするために使用されます。

また、コース名、レッスン数、コースの長さ(時間単位)を強くタイプしたプロパティを持つCourseInfoと呼ばれるレコードタイプを紹介しています。 これは、APIの構造を反映し、強くタイプされた方法でテキストを簡単に出力することができます。

後で合計を表示できるように、表はフッターを表示するようにしました。 ティムは、このレイアウトは、美しいコンソール・アプリケーションのためにSpectreがサポートしている多くの任意ウィジェットの1つであると述べている。

ライブ表示の開始

Tim は、AnsiConsole.Live(table).StartAsync(...) メソッドを使用してライブ表示を開始します。 彼は、長時間実行されるタスクを待つ必要がない場合は、非同期のStart()関数もあると指摘している。

彼は自分のコードを非同期コンテキストでラップし、新しい行が到着するとコンソールを更新できるようにしています。これは、画面をクリアすることなく出力を再描画する現在の端末の機能を示しています。

データを取得して進行状況を表示する

ライブコンテキスト内で、Timは、サンプルAPIが31のコースをリストしているため、1から31までのintインデックスを使用してforループを記述します。 各インデックスについて、ヘルパークラスのメソッドを呼び出してAPIデータを取得する。

このヘルパーは生のJSON文字列を強く型付けされたCourseInfoオブジェクトに変換します。 Timは、表示の進捗がライブでどのように起こるかを示すために、APIを一括で呼び出すのではなく、一度に1つのコースを意図的に呼び出しています - コンソール環境で長時間実行されるタスクをシミュレートする素晴らしい例です。

彼は、もしリクエストが1つだけなら、URLの/iを削除することもできたが、"時間をかけて入ってくるものを示すために "複数の呼び出しを行なっていると述べている。

行を追加し、出力を更新する

返された各CourseInfoインスタンスで、Timはtable.AddRow(...)を呼び出し、コースのタイトル、レッスン数、時間単位での長さを持つ新しい行を作成します。 彼は、$フォーマットで文字列補間を使用し、文字列でない値を変換するために必要に応じて.ToString()を呼び出します。

これは、Spectre がどのように動的に行を更新できるかを示すために、各パスの新しい行でテーブルをレンダリングします。 また、変換について明示することで、型の不一致のような潜在的な問題をキャッチすることも実演しています。

カスタムフッターとランニングトータル

次のTimは、カラムにカスタムフッターを追加する方法を示しています。 彼は、table.Columns[0].Footerを設定して、これまでにダウンロードされたコースのカウントを表示します。 2つ目と3つ目の列も同様ですが、今回はすべてのコースのレッスン数と合計時間を合計します。

こうすることで、ユーザーは、レッスンの回数と累積時間を一目で確認することができます。 これは、Spectreのコントロールを使用して、ライブデータと一緒に値の合計を表示する実例です。

ティムはウィンドウを簡単に"固定解除"し、数字が大きくなるにつれて完全なレイアウトを見ることができるようにしました。 フッターは、ボーダー、マークアップ、テーマと同様に、Spectreが提供する組み込みスタイルの一部であると説明しています。

各アクションの後にコンテキストをリフレッシュする

ティムは、ライブ表示に関する"重要なこと"を強調しています。 これにより、端末が実際に新しいデータで出力を再描画することが保証されます。 これがないと、ライブセッションが終了するまで、行やフッター、あるいは異なる色が表示されません。

デバッグと例外処理

彼が最初にコードを実行したとき、ティムはIndex Out of Range例外にぶつかりました。 彼は、列のインデックスを数え間違えて（0,2,3ではなく0,1,2です）、それを修正しました。

これは、Spectre.Console であっても、エラーを検出し、インデックスと引数が正しいことを確認する必要があることを優しく思い出させるものです。

ライブ表示を実際に見る

Timは修正されたコードを実行し、行が追加され、合計が更新され、フッターに合計値が表示される様子をライブで表示します。

1,652レッスン"、"403.5時間"、"全31コース"のデータが流れ込んできます。 これはまさに、Spectre Console のライブ表示を現在のターミナル内のダッシュボードのように感じさせるアクションです。

フッターだけに集中する

変更を見やすくするため、ティムは行を追加するコードをコメントアウトし、フッターだけが更新されるようにしています。 これは、データをスクロールしなくても、ライブで合計を追跡できることを示しています。

また、Spectreは数字が大きくなると（例えば9から10へ）列幅を自動的に調整することにも言及している。 これは、ライブラリの幅とフォーマットの自動検出の小さいながらも強力な例です。

Beyond Tables - 任意のウィジェットとテーマ

ティム氏は、ライブ表示は表に限らないと説明する。 パネル、ユーザー入力のプロンプト、あるいは棒グラフのような任意のウィジェットに適用できます。 テキストを更新したり、異なる色を強調したり、カスタムカラーコードを適用したり、スピナーを追加したりすることができます。

彼は、テーマに合わせて青、緑、灰色などのスタイルを変更でき、ネストされたレイアウトやウィジェットを扱うこともできると述べています。 この柔軟性こそが、Spectreが他のエコシステムのリッチなコンソールツール（中にはPythonで書かれたものもある）に"大きくインスパイアされ"ながら、.NET向けに調整されている理由です。

非同期 vs. 同期のライブ表示開始

Timは、彼がなぜasyncバージョンを使用したかを明らかにしています：APIコールを待っていたからです。 更新が非同期でない場合は、awaitなしでStart()を呼び出すことができます。

この選択は、長時間実行するタスクでも応答性を維持する美しいコンソールアプリケーションを構築するのに役立ちます。

結論

ビデオで、Tim はコンソール内でデータを更新、合計、リフレッシュできる Spectre Console ライブディスプレイの構築方法を紹介しました。

これは、ユーザーの入力を促したり、ウィジェットを追加したり、さまざまな色やカスタムの色分けされたテーマでダッシュボードを構築したりするための素晴らしい基盤となります。 テキストを簡単に出力し、マークアップを使用し、パネルやツリーのようなコントロールを作成できるSpectreの機能と組み合わせることで、ターミナル内でダイナミックな.NETアプリを構築できます。

Tim のデモでは、Spectre.Console を使用すると、ダッシュボードだけでなく、ライブ更新テーブル、スピナー、その他のウィジェットも作成できることを示しています。 これは、プレーンなコンソールをリアルタイムのインタラクティブなツールに変える実践的な例であり、ユーザーに"ハッピーコーディング"と伝える良い方法です。