最初のアプリを作る

新しいプロジェクトの作成
Monacaでのはじめてのアプリを開発するため、まずプロジェクトを作成しましょう。
プロジェクトは空のテンプレートをもとに、次の手順で作成します。
1.「新しいプロジェクトを作る」ボタンをクリック
2.「最小限のテンプレート」を選択
3.「作成」ボタンをクリック
新規プロジェクトの作成
画面の作成
次にカメラを起動させる画面を作成していきます。
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のコードからモバイル端末の機能を利用する際に必要となります。
1.メニューの「設定」＞「Cordovaプラグインの管理」
2.「カメラ」プラグインを有効化します。
カメラプラグインの有効化
アプリの実行
ここまでの手順で、カメラアプリは完成です。完成したカメラアプリを端末で確認していきましょう。
確認する方法としては、次の方法があります。
1.作成したプロジェクトをAndroidまたはiOS用にビルドして確認する方法
2.iOS・Androidストア上で提供されている「Monacaデバッガー」で確認する方法
ここでは1.の方法としてAndroid用ビルドする方法と2.の「Monacaデバッガー」で確認する方法を解説します。
Android ビルド
Android用にプロジェクトをビルドする手順は、次の手順です。
1.メニューの「ビルド」＞「Androidアプリのビルド」
2.ビルドを開始する
Androidビルドの開始
Monaca デバッガー
次のアプリストアリンクから、Monacaデバッガーをインストールします。
Monaca Debugger - Apps on Google Play
GooglePlay
‎Monaca
App Store
 アプリにログインすると今回作成したプロジェクトが表示されます。そのプロジェクトをクリックするとカメラアプリが起動します。

前

Monaca とは

次

Monaca リリース情報

最終更新 13d ago

リンクのコピー

概要

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

画面の作成

カメラの起動処理

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

アプリの実行

Android ビルド

Monaca デバッガー