最初のアプリを作る

ここではカメラアプリを作成していきます。アプリからカメラを起動し、撮った写真をアプリ内で表示させます。

新しいプロジェクトの作成

Monacaでのはじめてのアプリを開発するため、まずプロジェクトを作成しましょう。

プロジェクトは空のテンプレートをもとに、次の手順で作成します。

「新しいプロジェクトを作る」ボタンをクリック
「最小限のテンプレート」を選択
「作成」ボタンをクリック

画面の作成

次にカメラを起動させる画面を作成していきます。

index.html の body タグ内に、カメラをスタートさせる button タグと撮影した画像を表示するimg タグを次のように記述します。

<body>
    <img id="photo" height="400">
    <button id="shoot-button" onclick="shoot()">写真を撮る</button>
</body>

カメラの起動処理

カメラを起動させる処理を作成します。起動処理は、JavaScriptで記述します。

index.html の script タグ内に、次のようにカメラを実行する処理 (shoot関数) を記述します。

<script>
    function shoot() {
        const option = {
            destinationType: Camera.DestinationType.DATA_URL,   // URLに変換
            correctOrientation: true 
        };
          
        // カメラを起動
        navigator.camera.getPicture(onSuccess, onError, option);

        // 成功時に呼び出されるコールバック関数
        function onSuccess(data) {
            document.querySelector("#photo").src = "data:image/jpeg;base64," + data;
        }
        
        // 失敗時に呼び出されるコールバック関数
        function onError(message) {
            alert("Error:" + message);
        }
    }
</script>