フッターコンテンツにスキップ
Iron Academy Logo
C#アプリケーション
C#アプリケーション

その他のカテゴリー

カスタム待機スピナー - スペクターコンソールシリーズ

Tim Corey
6 分 12 秒

Spectre Console は .NET ライブラリで、豊富な出力、カラー、フォーマットを備えた美しいコンソールアプリケーションを作成できます。 Tim Corey 氏は、"Build a Custom Waiting Spinner - Spectre Console Series"ビデオの冒頭で、Spectre Console がプレーンな C# コンソールアプリケーションをより視覚的に魅力的で有益なツールに変えることを思い出させてくれます。 このレッスンでは、Timは、コンソールプログラムのステータスと進捗インジケータをわかりやすくする、小さいけれど強力な機能であるカスタムローディングスピナーを実装する方法を紹介します。

ティムは0:16で、プロジェクトのソースコードがビデオの下にリンクされていることを説明しています。 彼は、視聴者が自分の環境でどのように機能するかを理解するために、設定を変更したり機能を追加したりして、自分でテストして実験することを奨励しています。 これは、WindowsターミナルやPowerShellのように、Unicode文字に対する動作が若干異なるターミナルをサポートしたい場合に特に役立ちます。

組み込みのスピナーを使用する

ティムは、わかりやすい例から始めます。 0:37で、彼はAnsiConsole.Statusを使ってコードを書き、バックグラウンドでいくつかの作業が実行されている間、既知のスピナースタイルを表示します。 彼はSpinner.Known.Aestheticを選択しますが、SpectreはSpinner.Knownリストに多くのオプションを提供していることを指摘します。Timは、スピナーの隣に表示する文字列 "Loading "を追加し、ユーザーが何が起こっているかを知ることができるようにしています。

ステータス・ブロックの中に、TimはThread.Sleep(10000)を挿入します。 これは、コンソールにスピナーの動作を長く表示させるものです。 彼は1:23で、タスクが完了するとスピナーが自動的に消えると説明している。 これは、Spectre がコンソールアプリケーションでステータスや進捗状況を表示する際に推奨しているデフォルトのパターンです。

カスタムスピナーへ進む

1:41で、ティムは"よし、カスタムのスピナーを作ろう"と言って、ビルトインのオプションを超える方法を示しています。 彼は、自分のプロジェクトやブランドの色、あるいは処理するデータの種類に合うように、スピナーの書式やスタイルを設定したい場合があると説明します。 独自のスピナークラスを書くことで、フレーム、タイミング、Unicode文字を使用するかどうかを制御できます。

スピナークラスの作成

Timは、TestSpinner.csという名前の新しいファイルを作成します。 2:05で、彼はクラスをパブリックにし、Spectreの抽象Spinnerクラスを継承するように設定している。 彼は、Visual Studioの"抽象クラスを実装する"機能を使用して、必要なメンバーを生成します。 ここでは、デフォルトを使用する代わりに、速度、フレーム、Unicode設定などの独自の値を提供します。

Timは2:18で、これらがgetのみのプロパティであることを強調している。 この形式は、スピナー定義をコンパクトに保ち、後のメンテナンスや更新を容易にします。

フレームあたりの速度を制御する

2:30に、TimはtimingプロパティをTimeSpan.FromMilliseconds(200)に設定する。 これは、スピナーが1秒間に約5フレームで動くことを意味します。 彼は、スピナーを速くしたり遅くしたりしたい場合は、別の値を選択できると説明しています。 この設定を調整することで、コマンドやプロセスの実行内容に応じて、ローディングアニメーションの操作感を簡単に改善できます。

ユニコード文字の取り扱い

3:00、ティムは重要な問題を取り上げる:ユニコードです。 Visual Studioの内蔵コンソールでプロジェクトを実行する場合、Unicode文字が正しくレンダリングされず、エラーやシンボルの欠落が発生する可能性があることを指摘しています。 しかし、WindowsターミナルやPowerShellで同じプロジェクトを実行すると、Unicodeや絵文字は通常問題なく表示される。彼のデモでは、この問題を避けるためにプロパティをfalseに設定しているが、ターミナルがサポートしている場合はtrueに設定できることを指摘している。

このため、アプリにカラフルなシンボルや矢印、絵文字ベースの進捗インジケータを追加するのも簡単です。フレームを✅、ᔄ、または任意の文字でフォーマットして、より豊かな情報を提供することもできます。

フレームの定義

次のプロパティはフレームリストです。3:34で、Timは文字列の配列を返すarrow関数を書いています。 各文字列は、スピナーの1つの"フレーム"です。 彼の例では、大きな "O "といくつかの小さな "o "を使って、線をまたぐ動きをシミュレートしている。

ベースとなるフレームを5回コピー&ペーストし、4:12で各フレームの異なる位置にある"O"を1つ置き換える。 大きな "O "が左から右に動き、ループして最初に戻るというシンプルなアニメーションを作成しました。 Timは4:26で、方向を逆にするためにフレームを追加したり、カラーフォーマットを追加したり(Spectreは[green]text[/text]のようなリッチなマークアップをサポートしています)、コンソールがUnicodeをサポートしていればUnicode文字を試すことができると述べています。

TimのTestSpinnerクラスのコードです:

using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}
using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}

カスタム・スピナーの実装とテスト

クラスが定義されると、ティムはメイン・プログラムに戻る。 4:42では、Spinner.Known.Aestheticをnew TestSpinner()に置き換えている。 これだけです。他のコード変更は必要ありません。 そして、彼は4:52からアプリケーションを実行し、新しいスピナーが動作する様子を見せます。

Spectre Console Custom Waiting Spinner 1 related to カスタム・スピナーの実装とテスト

このテストステップは重要です。 Timは、ユーザーが使用するのと同じ端末でプロジェクトを実行することを推奨しています。そうすることで、エンコーディング、色、タイミングなどの問題を早期に発見することができます。 シェルやフォントが異なると、スピナーの表示に影響を与える可能性があります。

Spectre Console Custom Waiting Spinner 2 related to カスタム・スピナーの実装とテスト

ユニコード、絵文字、および色を追加する

Timは5:00で、Unicodeを有効にすれば、絵文字や特殊文字をフレームとして使用することを妨げるものは何もないと説明している。 Spectre のマークアップを使用して、天気予報のスピナーや緑のプログレスバーを作成したり、アプリケーションに合ったクリエイティブな表示を作成したりすることができます。 これは、ユーザーが明確な視覚的フィードバックを評価するため、開始または実行の継続に時間がかかるコマンドの場合に特に有用です。

また、Spectre Consoleを使用すると、スピナーに色や書式付きテキストを追加するのが簡単になります。 例えば、成功したことを強調するためにスピナーの横に˶[green]Loading...˶[/pipes]と書いたり、必要なときに赤文字でエラーを強調したりすることができます。

パフォーマンスのヒントと設定

5:19で、ティムはカスタム・スピナーに必要な主要なものを要約しています:

  • 時間:各フレームの表示時間。

  • IsUnicode: Unicode/絵文字を使うか、プレーンテキストを使うか。

  • フレーム:アニメートする文字列の配列。

フレーム数が多すぎたり、スピードが遅すぎたりすると、プロセスが非常に長くない限り、ユーザーは最後のフレームを見ることができない可能性があることに注意してください。 ここで適切なオプションを選択すると、スピナーがより効果的になります。コンソールアプリケーション全体を書き直すことなく、フレームを追加したり、タイミングを調整することができます。

まとめ

5:38では、TimがSpinnerクラスを継承し、独自の値を提供することで、コンソールやPowerShellベースのツールのためのカスタムローディングインジケータを素早く構築できることを示しています。 これにより、ユーザーに提供する情報や感触をよりコントロールできるようになります。 5:47で、彼は視聴者にソースコードとドキュメントがビデオの説明にあることを思い出させるので、自分で調べて拡張することができます。

結論

Tim Corey 氏の video に従って、カスタム Spectre Console ローディング スピナーを実装する正確な方法を見てきました。 そして、既知のスピナーを新しいクラスに置き換えるだけで、プロジェクトに追加できます。 Tim はまた、Unicode 文字、絵文字、カラー・マークアップを追加して、コンソール・アプリのステータスや進行状況の表示をより有益で美しくする方法も指摘しています。

Spectre Console の機能を使用することで、より明確なフィードバックを提供し、問題を早期に発見して修正し、ユーザーが楽しめる美しいコンソールアプリケーションを作成することができます。

Hero Worlddot related to カスタム待機スピナー - スペクターコンソールシリーズ
Hero Affiliate related to カスタム待機スピナー - スペクターコンソールシリーズ

好きなことを共有することで収入を増やす

.NET、C#、Java、Python、またはNode.jsを使用する開発者向けのコンテンツを作成しますか?あなたの専門知識を副収入に変えましょう!

アイアンサポートチーム

私たちは週5日、24時間オンラインで対応しています。
チャット
メール
電話してね