ちら裏メモ

TOP 　＞　カメラを使用する

作成日：2024年09月23日

カメラを使用する

どうも、にゃん太です

ファイルメーカーでは使用デバイスに接続したカメラで撮影する事ができます。

今回のメモでは、手軽なカメラの使用方法からちょっとした応用までを書いていきます

FileMakerGoでカメラから撮影する

iOSデバイスであるiPhoneやiPadではカメラが標準搭載されており、ファイルメーカーではそれを簡単に利用して写真を撮影する事が可能です

方法は簡単で、まずは撮影した写真を保存するオブジェクトフィールドを作成します

次に、レイアウト上に作成したオブジェクトフィールド、カメラ撮影用のボタンを配置します

最後に、カメラ撮影用のボタンに割り当てるスクリプトを作成します

スクリプト
# ##################################################
# カメラで撮影した写真をオブジェクトフィールドに保存
# ##################################################

エラー処理 [オン]
デバイスから挿入 [カメラ::撮影画像の保管場所; タイプ: カメラ; カメラ: バック; 解像度: 最大]
If [Get ( 最終エラー ) ≠ 0]
    カスタムダイアログを表示 ["中止"; "撮影はキャンセルされました"]
End If

これだけで写真撮影してフィールドに画像を保存する事ができます

FileMakerGoでバーコードを読み取る

iOSデバイスのカメラを利用して、バーコードを読み取る事も可能です

今度は読み取ったバーコード情報を入れるテキストフィールドを作成します

次に、レイアウト上に作成したテキストフィールド、バーコード読み取り用のボタンを配置します

最後に、バーコード読み取り用のボタンに割り当てるスクリプトを作成します

スクリプト
# ##################################################
# バーコードの読み取り結果をテキストフィールドに保存
# ##################################################

エラー処理 [オン]
デバイスから挿入 [カメラ::バーコード情報の保管場所; タイプ: バーコード; カメラ: バック; 解像度: 最大]
If [Get ( 最終エラー ) ≠ 0]
    カスタムダイアログを表示 ["中止"; "撮影はキャンセルされました"]
End If

これでバーコード情報を取得する事ができます

尚、読み取り可能なバーコードの種類は下図の通りです

FileMakerProでカメラから撮影する

これまでの処理はFileMakerGo限定での処理でした

ではPCのFileMakerProでは撮影できないのか、と言えばWEBビューアを使用すれば可能です

まず、撮影した画像の保存先は先ほど作成したオブジェクトフィールドとします

次に、レイアウト上に撮影用のWEBビューアと撮影した画像を表示するオブジェクトフィールド、カメラ撮影用のボタンを配置します

オブジェクトフィールドは「次の場合にオブジェクトを隠す」に条件を入れ、撮影中は非表示になる様に設計しておきます

WEBビューアは下記の通り設定します

WEBビューア
"data:text/html,
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='content-language' content='ja'>
  <meta name='viewport' content='width=device-width,initial-scale=1'>
  <style type='text/css'>
* {
    margin: 0;
    padding: 0;
    user-select: none;
}
body {
    background: #C0EDFE;
}
#cameraBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 70px;
}
video, canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100svh - 70px);
}
#camera-canvas {
    z-index: 2;
}
#buttons {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
}
#buttons button {
    margin: 0 10px;
    height: 50px;
    color: #FFF;
    font-size: 20px;
    border: none;
    border-radius: 25px;
}
#takePhotograph {
    display: none;
    width: calc(50% - 20px);
    background: #06A;
}
#cancelPhotograph {
    display: none;
    width: calc(50% - 20px);
    background: #FAA;
}
#start {
    width: calc(100% - 20px);
    background: #066;
}
    </style>
</head>
<body>
    <section id='cameraBox'>
        <input type='hidden' id='frame' value=''>
        <video id='video' autoplay muted playsinline></video>
        <canvas id='camera-canvas'></canvas>
    </section>
    <section id='buttons'>
        <button id='takePhotograph'>撮影</button>
        <button id='cancelPhotograph'>中止</button>
        <button id='start'>カメラ起動</button>
    </section>
<script type='text/javascript'>

/*カメラデバイス使用可否の判定結果*/
var possibility;
if('mediaDevices' in navigator){
    possibility = true;
}else{
    alert('ブラウザがカメラ情報取得に対応していません');
    possibility = false;
};

/*画面のサイズ用*/
var w;
var h;

/*撮影情報処理用*/
var media;
var stream;
const video = document.getElementById('video');

/*カメラ撮影を停止する*/
function stopCamera(){
    FileMaker.PerformScriptWithOption('stopCamera', '');
    document.getElementById('takePhotograph').style.display = 'none';
    document.getElementById('cancelPhotograph').style.display = 'none';
    document.getElementById('start').style.display = 'block';
    if(possibility){
        try{
            video.srcObject.getTracks().forEach(track => track.stop());
            video.srcObject = null;
        }catch(error){
        }
    }
};

/*カメラ撮影を開始する*/
const cvs = document.getElementById('camera-canvas');
const ctx = cvs.getContext('2d');
const canvasUpdate = () => {
    w = document.getElementById('cameraBox').clientWidth;
    h = document.getElementById('cameraBox').clientHeight;
    cvs.width = w;
    cvs.height = h;
    ctx.drawImage(video, 0, 0, w, h);
    requestAnimationFrame(canvasUpdate);
};

/*カメラを有効にする*/
function startCamera(){
    FileMaker.PerformScriptWithOption('startCamera', '');
    document.getElementById('takePhotograph').style.display = 'block';
    document.getElementById('cancelPhotograph').style.display = 'block';
    document.getElementById('start').style.display = 'none';
    const constraints = { audio: true, video: { facingMode: 'user' } };
    media = navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
        video.srcObject = stream;
        video.onloadeddata = function(){
            video.play();
            canvasUpdate();
        }
    }).catch((e) => {
        alert('ブラウザがカメラに対応していません');
        possibility = false;
    });
};

/*カメラの最新情報を画像保存する*/
function takePhoto(){
    stopCamera();
    let photo = cvs.toDataURL('image/png');
    FileMaker.PerformScriptWithOption('takePhoto', photo, 0);
};

/*撮影ボタン*/
document.getElementById('takePhotograph').onclick = function(){
    takePhoto();
};

/*中止ボタン*/
document.getElementById('cancelPhotograph').onclick = function(){
    stopCamera();
};

/*カメラ起動ボタン*/
document.getElementById('start').onclick = function(){
    startCamera();
};
</script>
</body>
</html>"

尚、javascriptからスクリプトを実行させる必要があるため、下図の様に「JavaScriptによるFileMakerスクリプトの実行を許可」にチェックを入れておきます

また、スクリプトは下記の通り設定します

startCamera

# ################################################## # 撮影を開始したらオブジェクトフィールドを隠す # ################################################## 変数を設定 [$$camera; 値: 1] ウインドウ内容の再表示 []

stopCamera

# ################################################## # 撮影を中止したらオブジェクトフィールドを空にして表示 # ################################################## フィールドを設定 [カメラ::撮影画像の保管場所: ""] 変数を設定 [$$camera; 値: ""] ウインドウ内容の再表示 []

takePhoto
# ##################################################
# 撮影画像をオブジェクトフィールドに保存
# ##################################################

フィールドを設定 [カメラ::撮影画像の保管場所: Base64Decode ( Middle ( Get ( スクリプト引数 ); 22; Length ( Get ( スクリプト引数 ) ) - 21 ); "photo.png" )]
フィールドへ移動 []
変数を設定 [$$camera; 値: ""]
ウインドウ内容の再表示 []

これで、PCからでもカメラ撮影が可能になります

以上で今日のメモ書きは終了です

内容はいかがでしたか？

もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください

ご連絡フォーム

概要連絡内容メールアドレス