- 1. プラグインなしでもワンアクションのカメラ起動は可能か？
- 2. カメラ起動のプラグインの比較
- 3. Camera Capture and Video Recorder Pluginを導入してみよう
- 4. おわりに
皆さんこんにちは！
今回は、Bubble で写真や動画を撮影できる Camera Capture and Video Recorder Plugin の使い方をご紹介します。
このプラグインは、ワンアクションでカメラを起動し、ブラウザ上で写真や動画を撮影することができます。
1. プラグインなしでもワンアクションのカメラ起動は可能か？
実は Bubble に最初から入っているエレメントである、「Picture Uploader」からカメラを起動することができます。
ただしクリック(タップ)してすぐカメラが起動するわけではなく、まずネイティブのカメラアプリを起動するか、もしくはフォトライブラリからアップロードするかの選択をする必要があります。
この場合、カメラの起動を選択して初めて、カメラアプリが立ち上がることになります。
しかし、カメラをすぐに起動する必要のあるアプリでは、ワンアクションでカメラを起動してほしいですね。
プラグインはいくつかありますが、それぞれ特徴があるため、実際に導入する際にはこれらの特徴を踏まえておく必要があります。
特徴によっては、カメラの起動以外のメリットを持つものもありますので、ぜひご検討ください。
2. カメラ起動のプラグインの比較
Bubble からカメラをワンアクションで起動できるプラグインを３つ比較してみました。
2.1. Mobile Camera Input
Mobile Camera Input は、ネイティブのカメラアプリをワンアクションで起動させることのできるプラグインです。
アップロード時間が他と比べて短いです。
Mobile Camera Input Plugin | Bubble
2.2. Simple Mobile Camera Input
こちらもネイティブのカメラアプリのワンアクション起動を実現するプラグインです。
動画のアップロードはできないので、静止画像の撮影に活用できます。
Simple Mobile Camera Input Plugin | Bubble
2.3. Camera Capture and Video Recorder Plugin
ブラウザ上でカメラを起動させることのできるプラグインです。
ネイティブのカメラアプリを起動させることはできません。
Camera Capture and Video Recorder Plugin | Bubble
3. Camera Capture and Video Recorder Pluginを導入してみよう
今回はこの中から、Camera Capture and Video Recorder Plugin について説明します。
ページのデザインの中に撮影画面を共存させることが可能であるだけでなく、反転撮影や無音撮影といったネイティブのカメラアプリではできない撮影機能もあります。
ブラウザ上での写真・動画のアップロードやカメラを使った認証にも役立ちますし、多様な撮影機能付きの写真加工アプリの開発にも活用できることでしょう。
費用は、一括の場合49ドル、月々７ドルです。
他プラグインと比べ少し高めですが、メリットが多く開発の幅も広がるのでぜひ使ってみてください！
作業の流れはこのようになります。
- プラグインを追加する
- カメラ画面を表示させるエレメントを配置する
- 撮影ボタン・撮影方法を選択するエレメントを追加
- 各エレメントのプロパティを設定する
- 撮影した写真・動画を表示させるエレメントを追加
- ワークフロー作成
3.1. プラグインを追加する
「Plugin」タブから、Add Pluginを選択します。
検索窓から、「Camera Capture and Video Recorder Plugin」を検索して、プラグインを追加します。
3.2 各エレメントを配置する
3.2.1 撮影中の画面を表示させるエレメント
プラグインを追加したことによりInput formsの中にある、Cam Captureというエレメントを使えるようになります。これを選択し、配置します。
プロパティの設定はのちほど設定していきます。
3.2.2 撮影ボタン・撮影方法を選択するエレメント
写真・動画撮影のボタンをそれぞれ作成します。
前後カメラの選択、反転撮影のON/OFFをするエレメントを配置します。ここでは、カメラの前後はドロップダウン、反転するかはチェックボックスで選択することにします。
3.3 配置したエレメントのプロパティを設定する
3.3.1 「写真を撮る」のボタン
「写真を撮る」ボタンのConditionalを、画像のように設定します。
CamCapture選択時に出てくる「is paused」は、撮影したキャプチャ画面がCamCaptureに表示されている状態を指します。
「is saving」はAWSのS3上のバケットにキャプチャした画像を保存している状態を指します。
3.3.2 「動画を撮る」のボタン
「動画を撮る」ボタンのConditionalも設定していきます。
「is recording」は動画の撮影中という状態です。
撮影開始後は停止ボタンとして機能させたいので、動画撮影中は停止ボタンのデザインになるように設定します。
3.3.3 カメラ選択のドロップダウン
前後カメラを選択するドロップダウンのプロパティを設定していきます。
Choices styleをDynamic choices、Type of choicesをtext、Choices sourceをCamCapture A’s facing modes、Option captionをCurrent optionとします。
Choices sourceの選択時にCamCaptureのエレメントを選択すると、このプラグイン特有のオプションが表示されます。～’s facing modesは前後カメラの選択のオプションを指します。
Default valueには、ブラウザを開いた時のデフォルトのカメラを前カメラにしたければ「Front」、後カメラなら「Back」と入力します。
3.3.4 CamCapture（撮影中の画面が表示されるエレメント） のAppearance
設定したAppearanceは以下の通りです。
・Camera to use
前後どちらのカメラを使うかを選択しますが、カメラが片側しかないデバイスでは自動的にカメラが選択されるので、BackとFrontどちらでもよいです。
ここではBackとします。
・Mirror
撮影画面を反転させる条件を設定します（反転撮影が不要の場合は、noとしておきましょう）。
ここには、「Checkbox 画面を反転する is checked」と入力します。
これで、前項で作成したチェックボックスがチェックされているときに撮影画面を反転するよう設定されました。
・Turn on automatically
ブラウザを開いてすぐにカメラを起動させるかどうかを設定します。
ここをyesにすると自動的にカメラが起動しますが、noにした場合は別途ワークフローでの設定が必要になります（Element Actions内のTurn on a CamCaptureを選ぶことで、イベントからカメラを起動することができます）。
ここではyesにしておきます。
・Enable microphone
ビデオ撮影の際のマイクを可能にするかどうかの設定をします。ビデオ撮影の際にマイクからの音も拾いたいのであれば、ここをyesにしておきましょう。
3.3.5 CamCaptureのConditional
続いて、ドロップダウンでBack/Frontを選択した際に、カメラが切り替わる設定をします。
CamCaptureのConditionalタブを開きます。
WhenにはDropdown A’s value is not Backと入力、Camera to useをFrontとします。
ここの設定は、AppearanceタブのCamera to useで設定したBack/Frontと対になっています。AppearanceでFrontにしたのであれば、ConditionalではWhenをDropdown A’s value is not Front、Camera to useはBackにしてください。
3.4 撮影した写真/動画を表示・保存するエレメントを配置する
3.4.1 動画を表示するプラグインを追加
次は撮影した写真と動画を表示するエレメントを配置していきます。
写真はimageが使えますが、動画はデフォルトで入っているVideoのエレメントでは表示できません。
ここではVideo.jsというプラグインを追加します。
3.4.2 エレメントを配置
プラグインを追加すると、エディタのVisual elementsにプラグインと同名のエレメントが選べるようになっているので、これを配置しましょう。
また、それぞれの下部に写真/動画のダウンロードボタンを配置しておきましょう。
3.5 配置したエレメントのプロパティを設定する
3.5.1 Image（撮影した写真を表示するエレメント）
Imageのプロパティを設定します。Dynamic ImageでInsert dynamic dataを選択、CamCapture A’s captured imageと入力しましょう。
3.5.2 Video.js（撮影した動画を表示する場所）
Video.jsのプロパティでは、Dynamic linkでInsert dynamic dataを選択、CamCapture A’s captured videoと入力しましょう。
3.6 各ボタンのワークフローを設定する
3.6.1 「写真を撮る」のボタン
まず、Click here to add an eventからAn element is clickedを選択、ElementはButton 写真を撮るを指定します。
Only whenの欄に「CamCapture A’s is paused is “no”」と入力します。これは、CamCaptureのエレメントが、撮影により一時停止していないという条件です。
また、アクションを追加し、Element ActionsからTake picture with a Cam Captureを選択します。
CamCaptureエレメントにキャプチャした写真を表示させない場合は、Pause on captureのチェックを外しましょう。ここではチェックを入れておきます。
上の工程でPause on captureにチェックを入れた場合、一度写真を撮るとCamCaptureエレメントにキャプチャされた写真が表示されます。ですので、２回目以降に写真を撮る際にこれをクリアし、撮影を再開するワークフローを設定する必要があります。
先ほどと同様、Button 写真を撮る is clickedのイベントを追加し、今度はOnly whenにCamCapture A’s is paused is “yes”の条件を付けます。
これは、写真がキャプチャされ撮影モードが一時停止されている状況を指します。
ここでのアクションは、Element actionsからResume a Camera Captureを選択します。
これで、撮影を再開するワークフローができました。
3.6.2 「写真をダウンロード」のボタン
ボタンクリックのイベントを追加し、Only WhenにはCamCapture A’s captured image is not emptyという条件を入れましょう。
アクションは、NavigationからOpen an external websiteを選択し、DestinationをCamCapture A’s captures image’s URLを入力してください。
※なお、キャプチャしたファイルのURLに遷移後、PCでは自動的にダウンロードされることが多いですが、スマホの場合はキャプチャした写真/動画が表示されるだけでダウンロードされません。ですのでスマホで操作した際には、URLに遷移後、素材を長押しするなどしてユーザー自ら保存する必要があります。
以上のワークフローの設定で、写真のキャプチャからダウンロードまでの動きが完成しました。
3.6.3 「動画を撮る」のボタン
動画を撮るボタンのクリックイベントを作成し、Only WhenにCamCapture A’s is recording is “no”と入力します。
このアクションには、Element Actions内のStart recording CamCaptureを選択してください。
同様に、動画のクリックイベントを作成し、こちらはCamCapture A’s is recording is “yes”の条件を付けます。
このアクションにはStop recording CamCaptureを選択してください。
これで、ボタンを押すと通常時には録画開始、録画中には録画停止が実行されるようになりました。
3.6.4 「動画をダウンロード」のボタン
流れは「写真をダウンロード」と同じです。
ボタンクリックのイベントを追加し、Only WhenにはCamCapture A’s captured image is not emptyという条件を入れましょう。
アクションは写真と同じくOpen an external websiteで、ここでのDestinationはCamCapture A’s captured video’s URLになります。
これで、動画のダウンロードまでのワークフローができました。
プレビューで実際に撮影とダウンロードができるか確認してみましょう！
4. おわりに
Camera Capture and Video Recorder Pluginの使い方は以上になります。
ブラウザ上で写真を撮ることができるので、本人確認などにも使えそうですね。
多機能で便利なプラグインですので、ぜひ皆さんの開発に役立ててみてください！
ここまで読んでいただき、ありがとうございました。
