機械翻訳について
  1. Visual Builder Studioを使用したレスポンシブ・アプリケーションの構築
  2. アプリケーション開発
  3. コンポーネントの使用
  4. ページへのコンポーネントの追加
  5. ページへのCameraコンポーネントの追加

ページへのCameraコンポーネントの追加

インストールされているデバイスのカメラ機能にアプリケーションがアクセスできるようにするには、カメラ・コンポーネントをアプリケーションのページに追加して、ユーザーがデバイス・カメラから写真またはビデオを撮影できるようにします。

カメラ・キャプチャは、メディア・キャプチャを実際にサポートしている物理デバイスでのみ機能します。 他のデバイス(デスクトップなど)では、ユーザーがデバイス・ストレージからファイルを選択できる通常のファイル・ピッカーとして機能します。

  1. ページ・デザイナでページを開き、コンポーネント・パレットからページ・キャンバスにcameraコンポーネントをドラッグします:
  2. プロパティ・ペインの一般タブで、ユースケースのコンポーネント・プロパティを構成します:
    1. カメラ・キャプチャプロパティを使用して、ユーザー・デバイスでカメラを優先カメラ・モードで起動します:
      • ユーザーが選択した写真またはビデオを撮影できるようにするには、「正面(セルフィ)」を選択します。 このオプションでは、ユーザー・デバイスの前面カメラが直接起動されます。
      • ユーザーが自分の環境の写真またはビデオを撮影できるようにするには、「背面」を選択します。 このオプションを選択すると、ユーザー・デバイス上でリア・フェイス・カメラが直接起動します。
      • 優先カメラ・モードのデバイスのデフォルト動作を有効にするには、「デフォルト」を選択します。 このオプションを選択すると、ユーザー・デバイスのカメラがデフォルトのカメラ・モードで直接起動されます。iOSデバイスの場合は、背面カメラが開きます。
      • たとえば、ユーザーに選択肢を提供するには、写真ライブラリから選択するか、写真またはビデオを撮影します(カメラを直接起動するのではなく)。「なし」を選択します。
    2. 「受入れ」プロパティをデバイスから受け入れるファイル・タイプに設定: 写真、ビデオ、またはその両方。 デフォルトでは、カメラの起動後に写真またはビデオを撮影するオプションをユーザーに提供するために、「写真」と「ビデオ」の両方が選択されています。
    3. オプショナル: cameraコンポーネントは、「写真/ビデオの撮影」ボタンを使用するように事前構成されています。 このボタンは、クリック可能なコントロールとして機能し、カメラ・コンポーネントをアクティブにしたり、ドラッグ・アンド・ドロップをサポートするデバイスのファイル・ドロップ・ゾーンとして機能します。 このボタンはカスタマイズすることも、他のトリガー・コンポーネントに置き換えることもできます。
      デフォルトの写真/ビデオの撮影トリガー・ボタンを置き換えるには、トリガーの横にある+をクリックし、優先コンポーネントからオプションを選択します:
      camera-component-properties-slots.pngの説明は以下のとおりです
      「図camera-component-properties-slots.pngの説明」

      • ユーザーがファイルをアップロードするためにクリックするアップロード・ボタンを追加するには、「アップロード・ボタン」を選択します。
      • 他のコンポーネントでさらにカスタマイズできる基本的なドロップ・ゾーン/トリガーを作成するには、「カスタム・ドロップ・ゾーン」を選択します。
      • ユーザーがイメージをアップロードするためにクリックするイメージのプレースホルダーを追加するには、「イメージ」を選択します。

      元の写真/ビデオの撮影トリガー・ボタンは必ず削除してください:
      デフォルトの写真/ビデオの撮影ボタンが強調表示された削除アイコンを示すアイコン

  3. プロパティ・ペインの「イベント」タブで、ユーザーがカメラ・コンポーネントを選択したときにアクション・チェーンをトリガーするようにカメラ・コンポーネントのSelected Filesイベントを構成します。 cameraコンポーネント内のボタン・コンポーネントではなく、Camera (ファイル・ピッカー)コンポーネントを選択してください。
    1. 「+イベント・リスナー」をクリックし、「選択されたファイル」を選択します:
      これにより、デバイスから取得したファイルを受信するCameraFilePickerSelectChainアクション・チェーンが作成されます。 次に示すように、(ユーザーが作成したJavaScriptを介して)ファイルをサーバーにアップロードするか、変数に割り当てるようにアクション・チェーンを構成できます。
    2. 「変数の割当」アクションをキャンバスに追加します。 変数プロパティで、Cameraコンポーネントからのデータを保持する変数(Array Data Provider型のFileArrayADPなど)を選択します:

      camera-component-assignvariable.pngの説明は以下のとおりです
      「図camera-component-assignvariable.pngの説明」

      ノート:

      配列内のアイテムのタイプはFile (https://developer.mozilla.org/en-US/docs/Web/API/File)です。 各ファイル自体は、名前、サイズ、タイプなどのプロパティを持つイメージまたはビデオのブロブです。 VB Studioでは、ファイルはObjectタイプのArrayとしてアクション・チェーンに渡されます。 別の変数に割り当てる場合は、タイプがカスタム・タイプに変更されないことが重要です。そうしないと、Blobデータが失われる可能性があります。
    3. 値プロパティにマウス・ポインタを重ねて選択変数 変数ピッカーを開くをクリックし、Cameraコンポーネント・データを含むアクション・チェーンのfiles入力パラメータを選択します:
    4. 「ページ・デザイナ」タブをクリックして、デバイスから取得したファイルの配列がCameraFilePickerSelectChainアクション・チェーンにマップされていることを確認します:
  4. 「プレビュー」をクリックして、カメラの機能をテストします。