UiPathのカスタムアクティビティ開発で、リソースの外部化とローカライズを行う(XAML版)

さて、[前回](https://qiita.com/masatomix/items/96d997608c02ca37a0d9)は、リソースの外部化やローカライズを行って UiPath Studioで動くカスタムアクティビティnupkgを多言語対応したのでした。

さいごにXAML内の文言のローカライズが残っているので、今回はそれをやっていきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/73777/73be7cac-9b34-4de4-ed7b-24123837b0c9.png)

この文字列のローカライズです。

## やってみる
ではXAMLのローカライズですが、前回も書きましたがXAMLについては [C#でアプリを多言語対応した際に行ったことまとめ](https://qiita.com/YSRKEN/items/a96bcec8dfb0a8340a5f) ここが非常に参考になりました。


### ソースコード
まず対応前の初期状態は、こちら。
https://github.com/masatomix/UiPath_Path/releases/tag/localization_xaml_init
ココから開始します。該当のコミットをCheckoutしてもらえばそのまま開発を開始できます

[前回](https://qiita.com/masatomix/items/96d997608c02ca37a0d9)のローカライズまで完了している状態なので、気になる方は前回記事をご参照ください。

で、修正した結果の今回の成果物はこちら。
https://github.com/masatomix/UiPath_Path/releases/tag/localization_xaml_finish
該当のコミットをCheckoutしてもらえば、そのまま今回の成果物を確認できます。

さき書いてしまうと、差分はこんなかんじになっています。
https://github.com/masatomix/UiPath_Path/compare/localization_xaml_init...localization_xaml_finish



### リソースファイルへの追記
まずは、コードのローカライズと同様、リソースファイルへ CombineDesigner_Label という項目を追加します。


Resources.resx

| 名前      | 値|
|:-----------------|:------------------|
CombineDesigner_Label|pathArray|


Resources.ja.resx

| 名前      | 値|
|:-----------------|:------------------|
CombineDesigner_Label|Pathの配列|


### XAMLへの追記
つづいて CombineDesigner.xaml に固定的に書かれている文字列を、リソースファイルを参照するように下記のとおり書き換えます。

```xml#CombineDesigner.xaml

<sap:ActivityDesigner x:Class="Utils.PathUtils.CombineDesigner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:System;assembly=mscorlib"
    xmlns:properties="clr-namespace:Utils.Properties"   // この行を追記
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
    xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation" >

    <sap:ActivityDesigner.Resources>
        <ResourceDictionary>
            <sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
        </ResourceDictionary>
    </sap:ActivityDesigner.Resources>
    <sap:ActivityDesigner.Icon>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <DrawingGroup>
                            <DrawingGroup.Transform>
                                <MatrixTransform Matrix="1,0,0,1,0,0"/>
                            </DrawingGroup.Transform>
                            <DrawingGroup.Children>
                                <ImageDrawing ImageSource="../images/folder_wrench.png" Rect="0,0,16,16"/>
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </sap:ActivityDesigner.Icon>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="7*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 下記に書き換える
        <Label Content="pathArray" />
        -->
        <Label Content="{x:Static properties:Resources.CombineDesigner_Label}" />
        <sapv:ExpressionTextBox 
        Expression="{Binding ModelItem.PathArray, 
            ConverterParameter=In, 
            Converter={StaticResource ArgumentToExpressionConverter}, 
            Mode=TwoWay}"
        ExpressionType="{x:Type s:String[]}"
        HintText="Enter a string array"
        OwnerActivity="{Binding ModelItem}"
        MaxLines="1" Grid.Column="1" />
    </Grid>
</sap:ActivityDesigner>
```

コード中の

```
{x:Static properties:Resources.CombineDesigner_Label}
```

コレがリソースファイルのキー値を指定しているわけですね。

XAMLは簡単です。以上です。



### 確認
さあビルドして、nupkgをUiPath Studio 2018.3 へインストールします。結果は、

英語モードだと、、下記の通りデフォルトのリソースファイルが使われています。。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73777/cac9bdb5-e48e-032d-c378-c7f23a5a5ed5.png)






そして、日本語モードだと下記の通り、日本語リソースファイルが使われています。。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/73777/26fb6936-f68d-8a54-5669-61e7eea59e7c.png)

できましたね。。以上で完了です。

## まとめ

UiPath のカスタムアクティビティについて、開発のはじめからアプリの多言語対応まで、、一通りやってみました。以下、その道のりというか、記事の目次。。。

- [カスタムアクティビティの作成方法](https://qiita.com/masatomix/items/1f63513e80313a99faeb)
- [カスタムアクティビティの作成方法(GUI構築)](https://qiita.com/masatomix/items/e75598f73b0e019044ac) 
- [カスタムアクティビティのnupkgの作り方](https://qiita.com/masatomix/items/d62683a158da6d35f24d)
- [カスタムアクティビティ開発で、外部ライブラリを使用する](https://qiita.com/masatomix/items/61024a6b9294a1707d23)
- [カスタムアクティビティの配置場所について](https://qiita.com/masatomix/items/b8988fcc2bd7046825f2)
- [カスタムアクティビティ開発で、見た目のカスタマイズを行う](https://qiita.com/masatomix/items/f3c5a36755860dba63ca)
- [カスタムアクティビティ開発で、リソースの外部化とローカライズを行う](https://qiita.com/masatomix/items/96d997608c02ca37a0d9)
- [カスタムアクティビティ開発で、リソースの外部化とローカライズを行う(XAML版)](https://qiita.com/masatomix/items/b747d1532529f9a2977d) 今回の記事


いや、なかなか長かったですね、、。所感としては、ドキュメントなさ過ぎ、、って印象。.NET開発に慣れてるヒトなら、当たり前の事ばかりだったのかもしれませんが、、なかなかしんどかったです。しかもソースコードが公開されてないので、まねしたいアクティビティがあっても中身を見ることができない。。遠いむかし[Eclipseのプラグイン開発やってた](https://www.masatom.in/pukiwiki/Eclipse/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%B3%AB%C8%AF%A4%CETIPS%BD%B8/)んですが、そのとき一番役に立ったのはEclipse自体のソースコードでした。。


UiPath 社は [UiPath Go!](https://go.uipath.com/) っていうマーケットプレイスを展開するらしいんですが、アクティビティ開発のドキュメントがもっと充実してるといいのになー、、なんて思いました。




お疲れ様でした。

## 関連リンク
- [今回の完成版のソース](https://github.com/masatomix/UiPath_Path/releases/tag/localization_xaml_finish)
- [本アクティビティのマスターブランチ](https://github.com/masatomix/UiPath_Path)
- [nugetのダウンロードリンク kino.UiPath.Utils.Activities](https://www.nuget.org/packages/kino.UiPath.Utils.Activities/)
- [UiPath Go!: String & Path Utilities](https://go.uipath.com/component/string-path-utilities) UiPath Go! に公開しました。。