最初のアプリを作る

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

前へMonaca とは次へアプリをテストする

最終更新 2 年前

役に立ちましたか？

最初のアプリを作る

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

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

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>

カメラプラグインの有効化

モバイル端末のカメラ機能を利用するため、プラグインのインストールを行います。

プラグインは、JavaScriptのコードからモバイル端末の機能を利用する際に必要となります。

メニューの「設定」＞「Cordovaプラグインの管理」
「カメラ」プラグインを有効化します。

アプリの実行

ここまでの手順で、カメラアプリは完成です。完成したカメラアプリを端末で確認していきましょう。

確認する方法としては、次の方法があります。

作成したプロジェクトをAndroidまたはiOS用にビルドして確認する方法
iOS・Androidストア上で提供されている「Monacaデバッガー」で確認する方法

ここでは1.の方法としてAndroid用ビルドする方法と2.の「Monacaデバッガー」で確認する方法を解説します。

Android ビルド

Android用にプロジェクトをビルドする手順は、次の手順です。

メニューの「ビルド」＞「Androidアプリのビルド」
ビルドを開始する

Monaca デバッガー

次のアプリストアリンクから、Monacaデバッガーをインストールします。

アプリにログインすると今回作成したプロジェクトが表示されます。そのプロジェクトをクリックするとカメラアプリが起動します。