Fluent.Ribbonのソースコードをビルド

C#などマネージドWPFアプリ用のライブラリであるFluent.Ribbonのソースコードをビルドしようとしました。このFluent.Ribbonのソースコードのビルド方法についての投稿です。

Fluent.Ribbonにバグ修正や機能拡張のプルリクエストをしようと思い、Fluent.Ribbonのソースコードをビルドを試みていました。そこで少しだけはまったことがあったので、Fluent.Ribbonのソースコードのビルド方法の紹介です。

Fluent.Ribbon

Fluent.Ribbonとは、マイクロソフト オフィスなどで利用されているリボンUIをWPFアプリ上で実現するときのに便利なライブラリです。

リボンUIの概要

リボンUIの特徴として、

  • タブ:上部にあるタブ形式のツールバー
  • コンテキストタブ:タブは、常時表示するものと、コンテキスト(現在選択したいるもの)に依存して表示するものがある
  • バックステージ:一番左の色のついたタブ(多くの場合ファイル タブ)は、バックステージと呼び、左側にメニューが表示される特別のUI
  • ステータスバー:下部にあるステータスを表示する領域
  • クイックアクセスツールバー:ウィンドウ左上に表示される小さなツールバー
  • キーボード操作:タブやタブ上のコントロールはキーボードで操作するためのKeyTipナビゲーション
  • ツールチップ:コントロールやメニュー項目の各コマンドは、説明のためのリッチなツールチップを表示可能

などが挙げられます。

リボンUIが具体的にどんなものかは、以下のアニメーション画像を見てもらうとわかりやすいと思います。

Fluent.RibbonのShowcase画像(公式サイトより引用)

Fluent.Ribbonライブラリーを利用すると、このようなリボンUIが、容易に作成できます。Fluent.RibbonライブラリーはUIフレームワークはWPF用です。実行フレームワークは .NET Framework 4.5.2以降と .NET Core 3.1以降の両方をサポートしています。そのため、今どきのWPFアプリで問題なく利用できます。

Fulent.Ribbonは、WPFアプリから利用するときは、nugetパッケージとしてFluent.Ribbonで検索して、プロジェクトの参照パッケージとして追加すれば利用できます。

Fluent.Ribbonに関連する代表的なサイトは以下の通りです。

なお、上記のサイトはすべて英語です。Fluent.Ribbonについては、日本語の紹介サイトもいくつかありますので、WEB検索すれば見つかると思います。

Fluent.Ribbonのレポジトリ

上記で紹介したとおり、Fluent.RibbonのプロジェクトサイトはGitHubに公開プロジェクトとしてあり、そこにソースコードが含まれるレポジトリーも存在します。

GitHubの公開レポジトリーのため、レポジトリーをクローンするか、スナップショットのZipファイルをダウンロードすることにより、ローカルPCでソースコードを確認したり、ビルドしたりできます。

Fluent.Ribbonのソースコードのソリューションとプロジェクト

現時点(2021年5月8日)で、Fluent.Ribbonの開発環境は以下の通りです。

  • Visual Studio 2019 (エディションは問いません。ただし、C# / WPFが使える必要があります)
  • ターゲットフレームワーク: .NET Framework 4.5.2 / 4.6.2, .NET Core 3.1, .NET 5.0(windows)

Fluent.Ribbonのソースコードのビルドをするためには、ビルドPC環境に最低限上記のものがインストールされている必要があります。

Fluent.Ribbonは、Visual Studioで開発されているます。そのため、ルートフォルダーにあるソリューションファイル(Fluent.Ribbon.sln)をVisual Studio 2019で開けば、含まれているプロジェクトなどを確認できます。

Fluent.Ribbonのソリューションのプロジェクト構成(2021年5月8日時点)

この時点(2021年5月8日)のソースコードでは、

  • .build
  • Fluent.Ribbon
  • Fluent.Ribbon.Showcase
  • Fulent.Ribbon.Tests

の4つのプロジェクトがあります。

Fluent.Ribbonプロジェクトは、ライブラリー本体のプロジェクトとなります。このプロジェクトの成果物を利用して、Fluent.Ribbonのnugetパッケージが作成されます。

Fluent.Ribbon.Showcaseプロジェクトは、Fluent.Ribbonライブラリーを利用したサンプルアプリとなります。Fluent.Ribbonの動作の確認したり、実装の参考としてソースコードを参照したりできます。

Fluent.Ribbon.Testsプロジェクトは、単体テストのためのプロジェクトです。Fluent.Ribbonでは、AppVeyorを利用した自動ビルド、自動単体テストが実行されています。この自動単体テストをパスすすことがプルリクエスト(PR)でマージしてもらうための最低条件にもなっています。

Fluent.Ribbonのソースコードのビルド

ソリューションを開いた直後では、Fluent.Ribbon.Showcaseプロジェクトがスタートアッププロジェクト(デバックを開始したとき起動されるプロジェクト)となっています。

Fluent.Ribbon.Showcaseプロジェクトをデバッグ起動する

通常、Visual Studioでは、スタートアッププロジェクトのデバッグを開始すると、開始する前に、そのプロジェクト、およびそのプロジェクトに関連するプロジェクトのビルドが自動的に開始されます。ビルドが成功したら自動的にデバック実行が開始されます。

ところが、Fluent.Ribbon.Showcaseプロジェクトがスタートアップ プロジェクトと設定されているFluent.Ribbonソリューションでは、この通常の方法ではビルドが成功しません。下記のようにビルドエラーになります。

ビルドを開始しました…
 1>------ ビルド開始: プロジェクト: Fluent.Ribbon, 構成: Debug Any CPU ------
 NuGet パッケージの復元に失敗しました。警告とエラーの詳細は、[エラー一覧] ウィンドウを参照してください。
 1>Generating XAML files ()
 1>'""' は、内部コマンドまたは外部コマンド、
 1>操作可能なプログラムまたはバッチ ファイルとして認識されていません。
 1>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon\Fluent.Ribbon.csproj(65,5): error MSB3073: コマンド """" はコード 9009 で終了しました。
 1>プロジェクト "Fluent.Ribbon.csproj" のビルドが終了しました -- 失敗。
 2>------ ビルド開始: プロジェクト: Fluent.Ribbon.Showcase, 構成: Debug Any CPU ------
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\MinimalWindowSample.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'urn:fluent-ribbon' にありません。 行 1 位置 22.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\RibbonWindowColorized.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'urn:fluent-ribbon' にありません。 行 1 位置 22.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\RibbonWindowWithBackgroundImage.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'urn:fluent-ribbon' にありません。 行 1 位置 22.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\RibbonWindowWithoutRibbon.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'urn:fluent-ribbon' にありません。 行 1 位置 22.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\RibbonWindowWithoutVisibleRibbon.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'urn:fluent-ribbon' にありません。 行 1 位置 22.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\MahMetroWindow.xaml(33,20): error MC3050: 型 'BackstageTabControl' が見つかりません。型名では大文字と小文字が区別されることに注意してください。 行 33 位置 20.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\TestContent.xaml(70,61): error MC3066: 型参照は 'GalleryItem' という名前のパブリック型を見つけられません。 行 70 位置 61.
 2>C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\TestWindow.xaml(1,22): error MC3074: タグ 'RibbonWindow' は、XML 名前空間 'clr-namespace:Fluent;assembly=Fluent' にありません。 行 1 位置 22.
 2>プロジェクト "Fluent.Ribbon.Showcase.csproj" のビルドが終了しました -- 失敗。
...
 ========== ビルド: 0 正常終了、2 失敗、0 更新不要、0 スキップ ==========

Fluent.RibbonプロジェクトとFluent.Ribbon.Showcaseプロジェクトのビルドは自動的に開始するのですが、両方ともビルドに失敗してしまいます。

.buildプロジェクトをビルドする

ビルドできない、困ったなぁと思いつつ、プロジェクト構成をみると、.buildプロジェクトという、ビルドに関連しそうなプロジェクトがあります。

これを事前にビルドすれば、Fluent.RibbonプロジェクトやFluent.Ribbon.Showcaseプロジェクトがビルドできるようになるのかと思い、.buildプロジェクトを指定してビルドしてみます。

ビルドを開始しました…
 1>------ ビルド開始: プロジェクト: .build, 構成: Debug Any CPU ------
 NuGet パッケージの復元に失敗しました。警告とエラーの詳細は、[エラー一覧] ウィンドウを参照してください。
 1>.build -> C:\gitHub\Fluent.Ribbon\.build\bin\Debug.build.dll
 ========== ビルド: 1 正常終了、0 失敗、0 更新不要、0 スキップ ==========

.buildプロジェクトをビルドしたら、ビルドは成功します。ただし、デバッグメッセージには、「NuGet パッケージの復元に失敗しました。警告とエラーの詳細は、[エラー一覧] ウィンドウを参照してください。」と表示されており、なにかの問題がありそうな雰囲気です。

もう一度Fluent.Ribbon.Showcaseプロジェクトをデバッグ起動する

.buildプロジェクトのビルドが成功したので、もう一度、Fluent.Ribbon.Showcaseプロジェクトをデバッグ起動してみます。

すると、再度、Fluent.RibbonプロジェクトとFluent.Ribbon.Showcaseプロジェクトのビルドが自動的に開始します。しかし、結果は同様で、両方ともビルドに失敗しています。

.buildプロジェクトをデバッグ起動する

次に、試せることは、.buildプロジェクトをデバッグ起動することでした。

デバッグ起動をすると、なにやらVisual Studioとの仕組みとは別のビルドが開始しました。

Creating directory 'C:\gitHub\Fluent.Ribbon\.nuke\temp'…
███╗   ██╗██╗   ██╗██╗  ██╗███████╗
████╗  ██║██║   ██║██║ ██╔╝██╔════╝
██╔██╗ ██║██║   ██║█████╔╝ █████╗
██║╚██╗██║██║   ██║██╔═██╗ ██╔══╝
██║ ╚████║╚██████╔╝██║  ██╗███████╗
╚═╝  ╚═══╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
NUKE Execution Engine version 5.1.1 (Windows,.NETCoreApp,Version=v2.1)
Assertion failed: Could not find git directory for 'C:\gitHub\Fluent.Ribbon'.
> "C:\Program Files\dotnet\dotnet.exe" C:\Users\admin\.nuget\packages\gitversion.tool\5.6.7\tools\netcoreapp3.1\any\gitversion.dll /nocache
Process 'dotnet.exe' exited with code 1.
   > "C:\Program Files\dotnet\dotnet.exe" C:\Users\admin\.nuget\packages\gitversion.tool\5.6.7\tools\netcoreapp3.1\any\gitversion.dll /nocache
   @ C:\gitHub\Fluent.Ribbon\.build\bin\Debug
Error output:
   Cannot find the .git directory 
StackTrace:
   at Nuke.Common.Tooling.ProcessExtensions.AssertZeroExitCode(IProcess process)
   at Nuke.Common.Tools.GitVersion.GitVersionTasks.GitVersion(GitVersionSettings toolSettings)
   at Nuke.Common.Tools.GitVersion.GitVersionTasks.GitVersion(Configure`1 configurator)
   at Nuke.Common.Tools.GitVersion.GitVersionAttribute.GetValue(MemberInfo member, Object instance)
   at Nuke.Common.ValueInjection.ValueInjectionAttributeBase.<>c__DisplayClass0_0.b__0()
IsLocalBuild           : True
Informational   Version: 1.0.0
SemVer          Version: 1.0.0
AssemblySemVer  Version: 1.0.0
MajorMinorPatch Version: 1.0.0
NuGet           Version: 1.0.0
╬════════════
║ Restore
╬═══
> "C:\Program Files\dotnet\dotnet.exe" restore C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.sln
  復元対象のプロジェクトを決定しています…
  C:\gitHub\Fluent.Ribbon\Fluent.Ribbon\Fluent.Ribbon.csproj を復元しました (332 ms)。
  C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Showcase\Fluent.Ribbon.Showcase.csproj を復元しました (344 ms)。
  C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.Tests\Fluent.Ribbon.Tests.csproj を復元しました (552 ms)。 
╬════════════
║ Compile
╬═══
> "C:\Program Files\dotnet\dotnet.exe" build C:\gitHub\Fluent.Ribbon\Fluent.Ribbon.sln --configuration Debug --verbosity Minimal /property:AssemblyVersion=1.0.0 /property:FileVersion=1.0.0 /property:InformationalVersion=1.0.0
.NET 向け Microsoft (R) Build Engine バージョン 16.8.3+39993bd9d
Copyright (C) Microsoft Corporation.All rights reserved. 
  復元対象のプロジェクトを決定しています…
  元対象のすべてのプロジェクトは最新です。
  Generating XAML files ()
  Generating XAML files (net5.0-windows)
  Generating XAML files (netcoreapp3.1)
  Generating XAML files (net462)
  Generating XAML files (net452)
  Fluent.Ribbon -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon\Debug\net5.0-windows\Fluent.dll
  Fluent.Ribbon -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon\Debug\net462\Fluent.dll
  Fluent.Ribbon -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon\Debug\net452\Fluent.dll
  Fluent.Ribbon -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon\Debug\netcoreapp3.1\Fluent.dll
  Fluent.Ribbon.Tests -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Tests\Debug\net462\Fluent.Tests.dll
  Fluent.Ribbon.Tests -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Tests\Debug\net452\Fluent.Tests.dll
  Fluent.Ribbon.Tests -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Tests\Debug\net5.0-windows\Fluent.Tests.dll
  Fluent.Ribbon.Tests -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Tests\Debug\netcoreapp3.1\Fluent.Tests.dll
  Fluent.Ribbon.Showcase -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Showcase\Debug\net462\Fluent.Ribbon.Showcase.exe
  Fluent.Ribbon.Showcase -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Showcase\Debug\net452\Fluent.Ribbon.Showcase.exe
  Fluent.Ribbon.Showcase -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Showcase\Debug\net5.0-windows\Fluent.Ribbon.Showcase.dll
  Fluent.Ribbon.Showcase -> C:\gitHub\Fluent.Ribbon\bin\Fluent.Ribbon.Showcase\Debug\netcoreapp3.1\Fluent.Ribbon.Showcase.dll
ビルドに成功しました。
   0 個の警告
   0 エラー
経過時間 00:00:30.73
Repeating warnings and errors:
Assertion failed: Could not find git directory for 'C:\gitHub\Fluent.Ribbon'.
Process 'dotnet.exe' exited with code 1.
   > "C:\Program Files\dotnet\dotnet.exe" C:\Users\admin\.nuget\packages\gitversion.tool\5.6.7\tools\netcoreapp3.1\any\gitversion.dll /nocache
   @ C:\gitHub\Fluent.Ribbon\.build\bin\Debug
Error output:
   Cannot find the .git directory 
StackTrace:
   at Nuke.Common.Tooling.ProcessExtensions.AssertZeroExitCode(IProcess process)
   at Nuke.Common.Tools.GitVersion.GitVersionTasks.GitVersion(GitVersionSettings toolSettings)
   at Nuke.Common.Tools.GitVersion.GitVersionTasks.GitVersion(Configure`1 configurator)
   at Nuke.Common.Tools.GitVersion.GitVersionAttribute.GetValue(MemberInfo member, Object instance)
   at Nuke.Common.ValueInjection.ValueInjectionAttributeBase.<>c__DisplayClass0_0.b__0()
═══════════════════════════════════════
Target             Status      Duration
───────────────────────────────────────
Restore            Succeeded       0:03
Compile            Succeeded       0:31
───────────────────────────────────────
Total                              0:35
═══════════════════════════════════════
Build succeeded on 2021/05/08 14:43:23. \(^ᴗ^)/
C:\gitHub\Fluent.Ribbon\.build\bin\Debug.build.exe (プロセス 62784) は、コード 0 で終了しました。

途中に警告が出力されていますが、ビルドには成功している模様です。この途中に表示されている警告は、.gitフォルダーが存在しないときに表示されます。そのため、レポジトリーをクローンしているときは、.gitフォルダーが存在するので、表示されません。しかし、Zipファイルでレポジトリーのスナップショットをダウンロードしてきた時は.gitフォルダーが存在しないので表示されるようです。

上記のビルをしたときは、Zipファイルとしてダウンロードしたソースコードであったため、.gitフォルダーは存在していませんでした。そのため、警告が表示されたようです。念のため、gitでクローンしたソースコードでも試したところ、その場合は、上記の警告は表示されませんでした。

もう一度Fluent.Ribbon.Showcaseプロジェクトをデバッグ起動する

.buildプロジェクトのデバッグ起動による独自ビルドが成功したので、もう一度、Fluent.Ribbon.Showcaseプロジェクトをデバッグ起動してみます。

すると、再度、Fluent.RibbonプロジェクトとFluent.Ribbon.Showcaseプロジェクトのビルドは自動的に開始します。今回のは、両方ともビルドが成功します。ビルドが完了した後に、Showcaseアプリは正常に起動します。

その後、Fluent.RibbonプロジェクトやFluent.Ribbon.Showcaseプロジェクトのソースコードを変更したときは、.buildプロジェクトの実行は必要ありませんでした。Visual Studioによる自動のビルドのみでコード変更が反映されたビルドが成功します。

Fluent.Ribbonのソースコードのビルド方法のまとめ

Fluent.Ribbonのソースコードのビルド方法をまとめておきます。

  1. Fluent.Ribbonのソースコードを入手する
    gitクローンでも、Zipファイルダウンロードでもどちらでもよい
  2. ルートフォルダーにあるソリューションファイル(Fluent.Ribbon.sln)をVisual Studioで開く
  3. .buildプロジェクトをビルドする
  4. .buildプロジェクトをデバッグ起動する

上記の作業が終わった後は、Fluent.Ribbonプロジェクトも、Fluent.Ribbon.Showcaseプロジェクトも、Visual Studioから普通にビルドできます。


以上、今回の投稿ではFluent.Ribbonのソースコードをビルドする方法でした。

“Fluent.Ribbonのソースコードをビルド” への1件の返信

コメントを残す