.NETエンジニアの休日 〜デスクトップに某動画サイト風コメントを流すアプリを作ってみた〜

デスクトップに某動画サイト風のコメントを流したい

◇ この記事について

掲題のアプリを作ってみようという悪ノリをある日思い立ったので、作ってみました。
この記事では、そのアプリケーション（以下、コメントアプリと呼びます）ついてご紹介します。

どんなアプリなのかを一言で説明すると、
指定したオプション通りのデザイン・内容のコメントをデスクトップ上に流してくれるコマンドラインアプリケーション
です。

◇ こんな風に動きます

緑色・大きめの文字サイズを指定し、「これはサンプルのコメントです。」という文言を連続で流させている様子です。
コメントが画面の右側から現れ、左へ流れていきます。

完成品はGitHubで公開しているので、ソースコードや詳細な機能、使い方はそちらをご参照ください。
こちらの記事では、想定ユースケースや技術面の肝（と言うほど大層なものでもないけど）を解説します。

想定ユースケース

◇ 1. 各種チャットツールと連動させる

SlackやTeamsといった各種チャットツールとWebSocketで連動させれば、「自分宛てに来たメッセージをデスクトップ上にでかでかと流して気付きやすくする」 といった使い方をすることが可能です。
※ただし、「チャットツールとWebSocketで接続しつつコメントアプリを実行するためのアプリ」を別途作成する必要はあります。

◇ 2. プレゼン中に視聴者からのコメントがリアルタイムで画面上に流れる仕組みを構築する

別のアプリの作成だけでなくサーバー側の準備（何かしらのキューイングの仕組み等）も必要となりますが、 「視聴者からのコメントを受け取ってコメントアプリを実行し、そのコメントをリアルタイムで画面上に流す」 といったことも可能となります。
視聴者へ向けた一方通行のプレゼンに留まらない、双方向なやり取りを加えた一風変わったプレゼンができるようになるかもしれません。

技術面の肝

◇ そもそもどんなフレームワークで作っている？

根本のフレームワークは .NET（C#） であり、UIフレームワークは WPF です。
WPFを使うと、クライアントアプリケーション（形式はEXE）をサクサク作ることができます。
実のところ、このコメントアプリを実行した際に画面上に流れるコメントはただのクライアントアプリケーションです。
ですが、実装にひと工夫入れるだけで、クライアントアプリケーションっぽくない独自の挙動をさせることができます。

◇ クライアントアプリケーションなのになぜこの挙動を実現できる？

「Windowsのクライアントアプリケーション」と聞いたときに真っ先に思い浮かぶのは、以下のような形式かと思います。

• 画面の最上部にバー（＝タイトルバー）が付いており、そのバーの左端にアイコンとアプリ名が記載されている。
• タイトルバーの右端に、×ボタンや最大化・最小化ボタンが付いている。
• 起動中のクライアントアプリケーションのアイコンがタスクバー上にも表示される。
• タイトルバーをドラッグ＆ドロップすることで、画面を移動させることができる。
  (etc...)

標準的なクライアントアプリケーションは上記のような挙動となりますが、これらはUIを構成する部品のパラメーターやソースの実装で柔軟に制御することが可能です。
コメントアプリでは、以下のような制御を明示的に加えています。

• タイトルバーを非表示にさせる。
• クライアントアプリケーションの背景を透過させる。
• 起動中であってもアプリケーションをタスクバー上に表示させない。
• クライアントアプリケーションの画面を常に最前面に表示させ続ける。
• 画面の位置を実装で制御し、自動的に画面の右端から左端へ流れるように動かす。

タイトルバーを非表示にさせるにはどうすれば良い？

これは画面用のXamlファイル（コメントアプリの場合はMainWindow.xaml）上にパラメーターを1つ足すだけで簡単に実現することができます。
タイトルバーを非表示にさせたい画面のWindowオブジェクトに WindowStyle="None" と足せばOKです。

MainWindow.xaml

<Window (省略)
        WindowStyle="None"
        (省略)>
    (省略)
</Window>

クライアントアプリケーションの背景を透過させるにはどうすれば良い？

これも同じく、画面用のXamlファイル上にパラメーターを足すだけで簡単に実現することができます。
足すパラメーターは以下の2つです。
AllowsTransparency="True"
Background="Transparent"

MainWindow.xaml

<Window (省略)
        AllowsTransparency="True"
        Background="Transparent"
        (省略)>
    (省略)
</Window>

起動中であってもアプリケーションをタスクバー上に表示させないようにするにはどうすれば良い？

またまた同じく、これも画面用のXamlファイル上にパラメーターを1つ足すだけで簡単に実現することができます。
タイトルバーを非表示にさせたい画面のWindowオブジェクトに ShowInTaskbar="False" と足せばOKです。

MainWindow.xaml

<Window (省略)
        ShowInTaskbar="False"
        (省略)>
    (省略)
</Window>

クライアントアプリケーションの画面を常に最前面に表示させ続けるにはどうすれば良い？

またまた同じく、これも画面用のXamlファイル上にパラメーターを1つ足すだけで簡単に実現することができます。
タイトルバーを非表示にさせたい画面のWindowオブジェクトに Topmost="True" と足せばOKです。

MainWindow.xaml

<Window (省略)
        Topmost="True"
        (省略)>
    (省略)
</Window>

画面の位置を実装で制御し、自動的に画面の右端から左端へ流れるように動かすにはどうすれば良い？

画面用のXamlに紐付くC#のソースコード（コードビハインドと呼ばれるやつです）に "画面の位置を時間経過と共に動かすための関数" を用意し、それを実行する形で実現しています。

MainWindow.xaml.cs

        // ↓これがコメントを移動させる処理を担う関数です。
        private void moveComment()
        {
            // ↓コードビハインド内で書かれる『this』は画面そのもののオブジェクトを指します。
            // 画面の横位置を指す『Left』を小さくすることで、コメントが右から左へ移動します。
            this.Left = this.Left - _speed;  // 右辺の『_speed』には、実際には1度の移動処理で動かすピクセル数が入ります。

            // ↓コメントが画面外に飛び出し終わったら、アプリケーションを終了させます。
            // まだ画面内に留まっている場合は、自身（moveComment）を再実行してコメントを再度移動させます。
            if (this.Left + this.ActualWidth < 0)
            {
                this.Close();
            }
            else
            {
                Thread.Sleep(20);  // 次の移動処理まで20ms待機
                moveComment();
            }
        }

これを応用すれば、「ユーザーがアプリ画面にマウスカーソルを合わせた瞬間に逃げるアプリ」なんていうおふざけアプリも実装することも可能です。

以上の要素を取り込むことで、Windowsのデスクトップ上で某動画サイト風のコメントを流すアプリケーションを作ることが可能となります。
.NETやWPFを活用すれば、その他にも様々なトリッキーな動きをするアプリケーションを作ることができます。皆様も気が向いたら休日におふざけアプリを作ってみてはいかがでしょうか。

本記事は「パーソルプロセス＆テクノロジー株式会社のAdvent Calendar 2022」の17日目の記事でした。気になった方はぜひ他の記事もご覧ください！