1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【OutSystems】OutSystemsで画像サイズを変換する3つのForgeを比較してみた

Posted at

はじめに

この記事ではOutSystemsで画像サイズを変換できるForgeを3つ比較し、それぞれの使い方や特徴を紹介します。

OutSystemsの標準部品では画像のサイズ変更はできませんが、以下のように実務で画像サイズを変更したいケースがあります。

  • プロフィール画像をアップロードする際にサイズを合わせたい
  • サムネイルを自動生成したい
  • 大きすぎる画像をそのまま保存するとパフォーマンスに影響する

そのため、Forgeを利用してOutSystemsでも画像サイズを変換する方法を紹介します。

動作環境

  • OutSystems(バージョン11)
  • ImageMagick(バージョン1.0.0)
  • MediaToolkit(バージョン1.3.2)
  • Image Utility(バージョン1.0.1)

今回紹介する画像サイズ変換可能なForge一覧

今回は画像サイズ変換が可能なForgeを3つ紹介します。

  • ImageMagick
  • MediaToolkit
  • Image Utility

各Forgeについて

画像サイズ変換可能な各Forgeについて概要と導入方法、メリット/デメリットについてまとめます。

ImageMagick

■ 概要

ImageMagick(Magick.NETラッパー)を使って多くの画像フォーマットを取り扱える画像操作ライブラリをOutSystems上で使えるようにしたコンポーネントです。多数の主要ファイル形式に対応しています。

■ 導入方法

例としてImage Entity に保存された画像を指定されたサイズに変換して取得するアクション「GetImageByImageMagick」を作成します。

  • 引数:
    • In_Id - 取得対象画像の Image Entity のID
    • In_Size - 変換する画像サイズ( Height, Width ( Record ) )
  • 戻り値:
    • Out_Image - サイズ変換後の画像

実装方法は下記の通りです。

  1. ImageMagick(Forge)をインストールします
  2. 実装モジュールに Dependencies から ImageMagick の参照を追加します
    今回はサイズ変更を行うため、ResizeImageアクションを選択します。
  3. GetImageByImageMagickアクションを作成し、引数と戻り値を定義してロジックを作成していきます
  4. Aggregate で Image Entity から指定の画像を取得します
  5. ResizeImage(ImageMagickのアクション)を呼び出します
    SourceImage - 元画像のデータ
    Height - 変換後の縦幅
    Width - 変換後の横幅
  6. サイズ変換後の画像を戻り値に格納します

image.png

■ メリット/デメリット

  • メリット

    • アスペクト比無視(IgnoreAspectRatio)が可能で、強制的な変形処理に対応
  • デメリット

    • 出力画質や拡大可否の細かい制御はできない
    • 設定項目が少なく、柔軟な指定が難しい

MediaToolkit

■ 概要

MediaToolkit は画像・動画・音声などのメディアファイルを処理できるライブラリセットです。
画像のサイズ変更以外にも画像形式(BMP、JPG、PNG など)の変換、画像のメタデータ取得等の様々な機能が提供されています。

■ 導入方法

例としてImage Entity に保存された画像を指定されたサイズに変換して取得するアクション「GetImageByMediaToolkit」を作成します。

  • 引数:
    • In_Id - 取得対象画像の Image Entity のID
    • In_Size - 変換する画像サイズ( Height, Width ( Record ) )
  • 戻り値:
    • Out_Image - サイズ変換後の画像

実装方法は下記の通りです。

  1. MediaToolkit(Forge)をインストールします
  2. 実装モジュールに Dependencies から MediaToolkit の参照を追加します
    今回はサイズ変更を行うため、ResizeImageアクションを選択します。
  3. GetImageByMediaToolkitアクションを作成し、引数と戻り値を定義してロジックを作成していきます
  4. Aggregate で Image Entity から指定の画像を取得します
  5. ResizeImage(MediaToolkitのアクション)を呼び出します
    OriginalImageData - 元画像のデータ
    Width - 変換後の横幅
    Height - 変換後の縦幅
  6. サイズ変換後の画像を戻り値に格納します
    image.png

今回は指定しませんでしたが、ResizeImageアクションに以下のオプションを指定すれば画像サイズ変換のカスタマイズができます。
ResizeMode - 画像の縦横サイズを指定のコンテナ(出力サイズ)にどのように合わせるか
AllowUpscale - 元の画像よりも大きく引き伸ばしてよいかどうか
ImageQuality - 画像の出力画質(圧縮率)を制御

■ メリット/デメリット

  • メリット

    • リサイズ方法が豊富(Pad / Stretch / Crop / Max / Min / BoxPad)で柔軟性が高い
    • アップスケール可否を指定できるため、意図しない拡大を防げる
    • 出力画質を数値でコントロール可能(0〜100)
  • デメリット

    • 設定項目が多く、やや複雑
    • 単純な用途(ただ小さくしたいだけ)にはオーバースペックになる

Image Utility

■ 概要

Image Utility はシンプルに画像リサイズしたい方向けの軽量コンポーネントです。

■ 導入方法

例としてImage Entity に保存された画像を指定されたサイズに変換して取得するアクション「GetImageByImageUtility」を作成します。

  • 引数:
    • In_Id - 取得対象画像の Image Entity のID
    • In_Size - 変換する画像サイズ( Height, Width ( Record ) )
  • 戻り値:
    • Out_Image - サイズ変換後の画像

実装方法は下記の通りです。

  1. Image Utility(Forge)をインストールします
  2. 実装モジュールに Dependencies から Image_Utility の参照を追加します
    今回はサイズ変更を行うため、ResizeImageアクションを選択します。
  3. GetImageByImageUtilityアクションを作成し、引数と戻り値を定義してロジックを作成していきます
  4. Aggregate で Image Entity から指定の画像を取得します
  5. ResizeImage(Image Utilityのアクション)を呼び出します
    Image - 元画像のデータ
    Resize - サイズ変更の単位を縮尺率(%)かピクセル(Pixel)から選択
    Vertical - 変換後の縦幅
    Horizontal - 変換後の横幅
  6. サイズ変換後の画像を戻り値に格納します

image.png

■ メリット/デメリット

  • メリット

    • ピクセル指定とパーセンテージ指定の両方でリサイズ可能
    • シンプルで扱いやすく、軽量
  • デメリット

    • 単純リサイズしかできない

まとめ

それぞれのForgeの特徴を比較表にまとめました。

機能/Forge ImageMagick Image Utility MediaToolkit
ピクセル指定での画像サイズ変換
パーセンテージ指定での画像サイズ変換 × ×
リサイズ方法指定
(※IgnoreAspectRatio オプションあり)

(0: Pad、1: Stretch、2: Crop、3: Max、4: Min、5: BoxPad)
アスペクト比を無視/強制変形(IgnoreAspectRatio 的な動き) ○(IgnoreAspectRatio オプション) × —(Stretch モードなどで比率無視挙動は可能)
拡大(アップスケール)可否指定 ○(Upscale 指定可能、デフォルト false)
出力画質指定(0-100) ○(0−100 で指定可能、未指定時は元の画質を使用)

また、処理速度については以下の通りです。
Personal環境で同じ画像(幅:5464ピクセル、高さ:8192ピクセル)を使用し、各Forgeで3回ずつリサイズ(幅:500ピクセル、高さ:800ピクセル)して比較したところ、Image Utilityが最も処理時間が短い結果となりました。

おわりに

シンプルな用途なら Image Utility、柔軟なコントロールが必要なら MediaToolkit を選ぶのがおすすめです。
ただし、実際に利用する際は以下観点等を踏まえた上でどのForgeを利用するか判断してください。

  • ライセンスと利用規約の確認
    Forge上には具体的なライセンス名が明示されていないこともあるので、その場合は提供元に確認するのが安全です。

  • 提供元(開発者・企業)の信頼性
    個人が開発したものは、継続的なサポートやアップデートが期待できないことが多いです。

  • 更新頻度と最終更新日
    メンテナンスされていない場合は、将来的にセキュリティリスクやバグの温床となる可能性があります。

  • パフォーマンス
    汎用的なコンポーネントは、柔軟性と引き換えにパフォーマンスが犠牲になっていることがあります。

参考リンク

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?