ローコード開発ツールOutSystemsでNugetライブラリのAsposeApiを使って画像をグレースケールするページを作成してみた

OutSystemsというローコードでWebサイトやモバイルアプリを開発することができるプラットフォームを触らせていただく機会がありました。
勉強していくとC#を使って機能拡張ができるということを知ったので、C#を使ってなにか実装してみることにしました。

## 実装してみたもの
今回は読み込んだ画像をグレースケーリングするというだけのシンプルなものを実装してみました。
C#を使う最大の利点は、Nugetライブラリを使えることにあるのかなと思ったので、AsposeApiというライブラリを使い、グレースケーリング機能を開発してみました。

### 環境
Service Studio 11.54.22
Integration Studio 11.14.20
Visual Studio 2022

### ライブラリ
Aspose.Imaging

## 実装手順
### Extensionを新規作成
Service Studioの任意のアプリで「choose module type」から「Extensions」を選択して、モジュールを作成します。
![image001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/153ff08b-bf5e-0dfc-876a-cc55420a7194.png)
Integration Studioが開かれるので、Actions配下に新規アクションを作成します。
![image002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/8b6385c1-3bea-d59e-0b9a-90be3257a57c.png)
「Parameters」に引数と変数を設定します。
今回は、読み込んだ画像のBinaryDataを引数にして、グレースケーリングした画像のBinaryDataを変数に設定しました。
![image003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/222c72c7-b38f-767a-ec66-dbd37c83c6b9.png)
リボンの一番右側にある「Edit Source Code .NET」をクリックします。
![image004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/24531e1a-ec24-4410-a12b-0573614b151f.png)
### Visual Studioで機能実装
Visual Studioが起動され、Extensionのプロジェクトが開かれます。
プロジェクトソリューションを右クリックし、「Nugetパッケージの管理」をクリックします。
「参照」タブを選択し、「Aspose.Imaging」をインストールします。
![image005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/56405ff6-252d-fd9e-edb8-0a01c7c2d14e.png)
TestExtension.csにプログラミングします。
書いたコードはシンプルで、BinaryDataを読み込んで、Asposeライブラリでグレースケールして、BinaryDataに変換して値を返します。
例外処理とかは今回は割愛しています。
```c:TestExtension.cs
using System.Drawing;
using System.IO;
using Aspose.Imaging;

namespace OutSystems.NssTestExtension
{
    public class CssTestExtension: IssTestExtension {
		/// <summary>
		/// 
		/// </summary>
		/// <param name="ssInputBinaryData"></param>
		/// <param name="ssOutputBinaryData"></param>
		public void MssGenerateGrayScaleImage(byte[] ssInputBinaryData, out byte[] ssOutputBinaryData) {
            using (MemoryStream stream = new MemoryStream(ssInputBinaryData))
            {
                using (RasterCachedImage rasterCachedImage = (RasterCachedImage)Aspose.Imaging.Image.Load(stream))
                {
                    if (!rasterCachedImage.IsCached)
                    {
                        rasterCachedImage.CacheData();
                    }

                    rasterCachedImage.Grayscale();

                    ImageConverter imageConverter = new ImageConverter();
                    byte[] imageBytes = (byte[])imageConverter.ConvertTo(rasterCachedImage.ToBitmap(), typeof(byte[]));

                    ssOutputBinaryData = imageBytes;
                }
            }
            // TODO: Write implementation for action
        } // MssGenerateGrayScaleImage		
	} // CssTestExtension
} // OutSystems.NssTestExtension
```
### Extensionをパブリッシュ
OutSystemsにパブリッシュします。
Integration Studioのリボンの「1-click publish」をクリックします。
エラーが出なければパブリッシュ成功。
![image007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/fcabeac1-b22f-8dbd-34ac-383c04cd1deb.png)
### Service Studioで画面実装
Service Studioで作成したExtensionを読み込みます。
Service Studioのリボンの「Manage Dependencies...」(コンセントのようなアイコン)をクリックします。
![image008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/063ca6ba-dd11-a3a6-714b-9ca452853c78.png)
パブリッシュしたExtensionを選択して、アクションにチェックを入れて「Apply」をクリックします。
![image009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/aef9e53b-6e3d-23f7-d4b3-246ffad8f34a.png)
Logicツリー配下にExtensionが追加されました。
![image010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/1fe201e9-091c-01f4-c2f8-905ab5087f37.png)
画面を実装します。
グレースケーリングするページを適当に作成していきます。
Emptyテンプレートのスクリーンを追加して、画面を読み込むための「upload」ウィジット、クリックイベント用の「button」ウィジット、画像表示用の「image」ウィジットをMainContentに放り込みました。
![image011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/0c023d88-de2e-88de-7ba7-8e7c5dc2bb27.png)
画像のbinary dataを格納する「ImageData」と画像のファイル名を格納する「ImageName」を追加します。
![image012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/08d2d397-6c3c-ba3c-c40b-efea89aaee22.png)
画面に追加したuploadウィジットの「file content」と「file name」にローカル変数を設定します。

ボタンを右クリックして「New Client Action」をクリックして、クリックアクションを作成します。

作成したアクションをダブルクリックすると、アクションのフローチャートの画面に切り替わります。

今回作成したExtensionのアクションをドラッグ＆ドロップします。
Assignウィジットをドラッグ＆ドロップしてExtensionの変数をローカル変数ImageDataに格納します。
![image013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/254a58db-8c7a-4afe-4e19-8d9853eb2b03.png)
画面上の「1-Click Publish」をクリックしてパブリッシュします。
![image014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/d83740e6-9638-bb7a-ce08-3181fcd13981.png)
### 画面をプレビュー
パブリッシュが成功すると、画面上部のボタンが「open in browser」に変わるのでこれをクリックします。
![image015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/c3e95c83-e5e5-13bc-68c9-dab82b61b2cf.png)
ブラウザで作成したページが表示されます。

画像を読み込んでみると、読み込んだ画像が表示されました。
読み込み用の画像は[こちら](https://www.photock.jp/detail/softcream/317/)のフリー素材を使わせてもらいました。
![image016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/3a11ef63-fa69-94d0-84d3-219a7fdc569f.png)
「GrayScale」ボタンをクリックしてみます、少し時間がかかりましたが無事グレースケールされました。
![image017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521137/cccdc202-0b51-892e-d7fa-2394a957a7f3.png)