ウェブアプリケーションで画像を使う方法

このチュートリアルでは、Webアプリケーションにおける Imageこのチュートリアルでは、ウェブアプリケーションでのコンポーネントの使用方法について説明します。

Look & Feel

• Upload- ボタンを押し、ファイルシステムから画像を選択することで、画像を事前に定義することができます。

• Image alt[string]- altタグやalt説明とも呼ばれるaltテキストは、ユーザーの画面上で画像が読み込まれなかった場合に、ウェブページ上の画像の代わりに表示される文章です。このテキストは、画面読み上げツールで視覚障害のある読者に画像を説明するのに役立ち、検索エンジンがウェブサイトをより良くクロールしてランク付けすることを可能にします。
• Width[string]- 画像の幅をデフォルトで指定します。
• Height[string]- 画像の高さをデフォルトで指定します。
• Visible[boolean]- は、画像が表示されているかどうかを定義します。
• Name[string]- コンポーネントの名前です。

関連する業務プロセス

HTMLにおけるImageは、画像オブジェクトそのものへの参照である。したがって、Imageは常にリンクで動作し、画像データを利用するためには、そのリンクを取得する必要があります。

このチュートリアルでは、ウェブアプリケーションでのコンポーネントの使い方を説明します。 BPsは、Webアプリケーションでの利用を想定してあらかじめ生成されています。

• Image Get Properties- 画像のプロパティを取得します。
  • Component ID[string]- コンポーネントの識別子です。
  • Width[string]- 画像の幅を指定します。
  • Height[string]- 画像の高さ
  • Image URL[string]- 画像のURL-address。
  • Tooltip[string]- ホバー時に表示されるツールチップの文字列。
  • Visible[boolean]- は、画像が表示されているかどうかを定義します。
  • Loading[boolean]- の場合、画像を "読み込み中" 状態にします。 true;

• Image Set Properties- 選択されたイメージのすべてのプロパティをリセットし、代わりに指定されたものを設定します。
  • Component ID[string]- コンポーネントの識別子を指定します。
  • Width[string]- 画像の幅を指定します。
  • Height[string]- 画像の高さ
  • Image URL[string]- 画像のURL-address;;
  • Tooltip[string]- ホバー時に表示されるツールチップの文字列。
  • Visible[boolean]- は、画像が表示されているかどうかを定義します。
  • Loading[boolean]- の場合、画像を "読み込み中" 状態にします。 true;

• Image Update Properties- は、イメージのプロパティを更新します。
  • Component ID[string]- コンポーネントの識別子を指定します。
  • Width[string]- 画像の幅を指定します。
  • Height[string]- 画像の高さ
  • Image URL[string]- 画像のURL-address。
  • Tooltip[string]- ホバー時に表示されるツールチップの文字列。
  • Visible[boolean]- は、画像が表示されているかどうかを定義します。
  • Loading[boolean]- の場合、画像を "読み込み中" 状態にします。 true;

利用例

ユーザープロファイルのアバターを読み込む例を考えてみましょう。Webインターフェースは、画像とBPをトリガーするボタンで構成され、以下のような感じです。

からBPが起動します。 onClickをトリガーにします。ユーザーのデバイスのファイルシステムからファイルをピックアップするために Select Filesブロックが使用される(Max files = 1, File types = Image).ファイルが正常に選択された場合，配列要素に index=0が選択されます。

配列の結果であるファイル要素を Files配列の結果であるファイル要素をウェブアプリケーションサーバにアップロードし、 さらに使用する必要があります (Server request POST /_files/)。リクエストに成功した場合は、ブロックの出力にあるファイルオブジェクトがServer request POST /_files/ブロックの出力にあるファイルオブジェクトは、 ブロックの入力に渡されます。 Expand fileブロックの入力に渡され、その ID.

URLを取得するためには、ファイル IDを取得し、その値を文字列に変換します (To String).相対的なファイルパスは次のようになります。 /api/_files/<ID>/download/.したがって、画像をアップロードするには、ファイル パスを Image URLプロパティに渡す必要があります。 Image Update Propertiesブロックのプロパティに渡す必要があります。

公開アプリケーションは以下の例です。