最初のアプリを作る
ここではカメラアプリを作成していきます。アプリからカメラを起動し、撮った写真をアプリ内で表示させます。
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用にプロジェクトをビルドする手順は、次の手順です 。
- 1.メニューの「ビルド」＞「Androidアプリのビルド」
- 2.ビルドを開始する
Androidビルドの開始
次のアプリストアリンクから、Monacaデバッガーをインストールします。
アプリにログインすると今回作成したプロジェクトが表示されます。そのプロジェクトをクリックするとカメラアプリが起動します。
最終更新 25d ago