More than 1 year has passed since last update.

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

Last updated at 2023-09-13Posted at 2023-09-13

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」を選択して、モジュールを作成します。

Integration Studioが開かれるので、Actions配下に新規アクションを作成します。

「Parameters」に引数と変数を設定します。
今回は、読み込んだ画像のBinaryDataを引数にして、グレースケーリングした画像のBinaryDataを変数に設定しました。

リボンの一番右側にある「Edit Source Code .NET」をクリックします。

Visual Studioで機能実装

Visual Studioが起動され、Extensionのプロジェクトが開かれます。
プロジェクトソリューションを右クリックし、「Nugetパッケージの管理」をクリックします。
「参照」タブを選択し、「Aspose.Imaging」をインストールします。

TestExtension.csにプログラミングします。
書いたコードはシンプルで、BinaryDataを読み込んで、Asposeライブラリでグレースケールして、BinaryDataに変換して値を返します。
例外処理とかは今回は割愛しています。

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」をクリックします。
エラーが出なければパブリッシュ成功。

Service Studioで画面実装

Service Studioで作成したExtensionを読み込みます。
Service Studioのリボンの「Manage Dependencies...」(コンセントのようなアイコン)をクリックします。

パブリッシュしたExtensionを選択して、アクションにチェックを入れて「Apply」をクリックします。

Logicツリー配下にExtensionが追加されました。

画面を実装します。
グレースケーリングするページを適当に作成していきます。
Emptyテンプレートのスクリーンを追加して、画面を読み込むための「upload」ウィジット、クリックイベント用の「button」ウィジット、画像表示用の「image」ウィジットをMainContentに放り込みました。

画像のbinary dataを格納する「ImageData」と画像のファイル名を格納する「ImageName」を追加します。

画面に追加したuploadウィジットの「file content」と「file name」にローカル変数を設定します。