Forguncy 10 オンラインヘルプ
アプリの拡張 / プラグイン / プラグイン(要ダウンロード) / セル型 / 画像編集
このトピックで
    画像編集
    このトピックで

    「画像編集」プラグインを使用すると、既存の画像にテキストや図形を追加することができます。

    ダウンロードリンク

    ※利用しているバージョンによって対応するプラグインが異なります。以下より該当するバージョンをお選びください。

    Forguncy Builder / Forguncy Serverのバージョン プラグイン

    10.0.10.0以降の10.x.x.x

    ImageEditor_10_0_10_0.zip

    配置領域

    リストビューの行テンプレート 不可

    使い方

    1. 任意のセルの領域に画像編集型セルを割り当てます。

      任意のセル領域を選択して、[ホーム]→[セル型]のドロップダウンリストから[画像編集]を選択します。

    2. 画像編集型セルの詳細を設定します。

      右ペイン下部の[セル型]タブをクリックして、画像編集の設定を行います。

      画像の選択

      [画像の選択]をクリックして最初に表示する画像ファイルを選択します。アプリケーション実行中に利用者に編集したい画像をアップロードさせることも可能です。

      [インポート]をクリックして画像ファイルをインポートして選択することもできます。

      保存時のコマンド

      編集内容を保存する時(メニューバーに表示されている保存ボタンをクリック句した時)に実行するコマンドを設定します。

      編集メニューの表示設定 メニューバーに表示される編集メニュー(トリミング、反転、回転、描画、図形、アイコン、テキスト)の表示する内容を設定します。すべて非表示にすることはできません。最低でも1つは表示する必要があります。
      操作メニューの表示設定 メニューバーに表示される操作メニュー(アップロード、ダウンロード、保存)の表示する内容を設定します。
      既定値の設定

      一部の操作メニュー(描画、図形、アイコン、テキスト)に対する既定値を設定することができます。

      • [描画 太さ] 最小値:5、最大値:30、既定値:5
      • [図形 太さ] 最小値:2、最大値:300、既定値:6
      • [テキスト サイズ] 最小値:10で、最大値:100で、既定値:50
      • 描画、図形の線、アイコン、テキストの色 既定値:#000000
      テーマ ダークまたはライトに設定します。既定値はライトです。
      メニューバーの表示位置 メニューバーの表示位置を上、下、左、右に設定できます。既定値は下です。
      メニューの既定値 最初に選択される編集メニューを設定できます。既定値は描画です。
      保存時に画像サイズを自動圧縮 チェックすると、設定した品質で保存時に画像を自動圧縮します。既定値は無効です。
      コマンドで利用可能な操作 特定の条件を満たした場合に右ペインの「セル型」タブに「コマンドで利用可能な操作」プロパティが追加されます。

      以下の操作名が記載されているボックスをページ上のセルに向かってドラッグ&ドロップすることで[セル型の操作]コマンドが設定されたボタンが生成されます。ドラッグ&ドロップの先がボタン型セルだった場合、ボタン型セル内で設定されているコマンドの一番最後にセル型の操作コマンドが追加されます。

      設定方法の詳細についてはセル型の操作を参照してください。

      操作 条件 詳細
      編集画像の選択 なし

      コマンドを実行すると編集する画像を選択するウィンドウを表示します。

      ダウンロード なし

      コマンドを実行すると表示されている画像をpng形式でダウンロードします。

      確定して一時保存 なし

      コマンドを実行すると画像を保存します。

      保存すると画像がForguncyサーバーの一時フォルダにアップロードされ、画像編集型セルの値はファイル名になります。ページ遷移、ログアウトした後や、他のユーザーでも画像を閲覧できるようにするためにはデータベースに保存する必要があります。画像編集型セルにデータベースのフィールドをデータ連結してご利用ください。

       

    3. [ホーム]リボンタブにあるデバッグの[開始]ボタンをクリックし、アプリケーションの動作を確認します。

      以下の操作があります。

      アイコン 操作名称 説明
      拡大 をクリックして画像を拡大します。
      縮小 をクリックして画像を縮小します。
      移動 をクリックすると、マウスポインターがになり、画像をドラッグ&ドロップして表示できます。 基本的には、スクロールバーが表示されるときに画像の表示位置を調整するために使用します。
      履歴 画像の操作履歴を確認できます。操作を選択して元に戻すことができます。
      元に戻す 一つ前の操作に戻ります。
      やり直し もとに戻した操作をやり直します。
      リセット 画像をリセットします。
      削除 指定操作を削除します。
      すべて削除 すべての操作を削除します。
      トリミング 画像をトリミングします。カスタム、四角、3:2、4:3、5:4、7:5、および16:9などへの設定がサポートされています。
      反転 画像を反転します。x軸、y軸の反転をサポートします。画像をリセットできます。
      回転 画像を回転します。 30度に画像を回転します。 最大回転は360度です。
      描画 曲線と直線を描画します。 色、線を調整できます。 範囲は最小値が5で、最大値が30で、単位がpxで、既定値が黒(#000000)です。
      図形

      四角形、園、および三角形をサポートします。塗りつぶしも枠線の色も設定できます。

      塗りつぶしは既定値がなしで、枠線の色は既定値が黒(#000000)です。

      枠線の色は最小値が2であり、最大値が300であり、単位がpxであります。

      アイコン

      矢印、矢印-2、矢印-3、星-1、星-2、六角形、ピン、ハート、吹き出し、およびカスタムアイコンなどのアイコンがあります。

      色は変更でき、既定値が黒 (#000000)です。

      テキスト

      太字、イタリック、および下線などの設定があります。

      左、右、および中心なの揃え設定があります。

      テキストサイズは最小値が10で、最大値が100で、単位がpxです。最大値を超えてもオーケーです。

      色の設定もサポートされます。既定値は黒 (#000000)です。ダブルクリックしてテキストを追加します。

      編集画像の選択

      ローカルから編集する画像を選択します。

      .jfif、.bmp、.gif、.svg、.png、.jpeg、.jpg、.ico、.webpなどの形式をサポートしています。

      ダウンロード 現在表示されている画像をpng形式でダウンロードします。
      確定して一時保存

      内容を保存し画像がForguncyサーバーの一時フォルダにアップロードされ、画像編集型セルの値はファイル名になります。ページ遷移、ログアウトした後や、他のユーザーでも画像を閲覧できるようにするためにはデータベースに保存する必要があります。画像編集型セルにデータベースのフィールドをデータ連結してご利用ください。

      [テーブルデータの更新]コマンドの[コマンド実行前にセルのデータ入力検証を行う]プロパティが有効の場合、この操作を行わなければデータベースへの保存の際に以下の警告メッセージが表示されます。

    参考:

    ページ設定で「ページ離脱時に変更データを確認する」にチェックを入れると、ページ離脱時に画像編集の未確定データを確認するようになります。機能の詳細については入力途中でのページ離脱防止を参照してください。

     

    関連トピック