HTML+JavaScriptでアプリを作成できるMonacaを使ってみました。
Monacaへの登録
公式サイトにアクセスして、「今すぐ試す(無料)」をクリックします。
メールアドレスとパスワードを入力して登録をクリック。
確認メールが届くので、メールに記載されているURLをクリックすると登録完了です。
そのまま自動でMonaca IDEのダッシュボードに移動します。
Monacaデバッガーのインストール
次にiPhoneやAndroidにMonacaデバッガーをインストールします。
App StoreやGoogle playから検索して、インストールして下さい。
インストール後アプリを立ち上げて、先ほど登録したメールアドレスとパスワードを入力してログインします。
以下のようにHello Worldアプリが確認できればOKです。
Monaca IDEを使ってみる
Monaca IDEに戻って、画面上部中央の「新規プロジェクト」をクリックします。
用途に合わせて色々なテンプレートが用意されているので、テンプレートを選択します。
今回は「Onsen UI最小限のテンプレート」を選択しました。
プロジェクト名を入力して、プロジェクトを作成するをクリックします。
新しくプロジェクトが作成されました。
右側の開くをクリックします。
開発画面が表示されました。
上のタブのindex.htmlを選択してみます。
index.htmlの編集画面と、右側にプレビュー画面が表示されました。
ここで一旦、先ほどインストールしたMonacaデバッガーを確認してみます。
最初からあったHello Worldアプリの他に、今作成したプロジェクト名が表示されていると思うので選択してみます。
開発環境のプレビュー画面と同じ表示が確認できました。
開発を進めて保存すると、Monacaデバッガー側も更新されて動作の確認がスムーズに行えます。
カメラ機能を使ってみる
今回は試しにカメラ機能を使用してみます。
上記ページのサンプルと同じように記述して保存します。
今回は以下のように記述しました。
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
document.addEventListener ("deviceready", onDeviceReady, false);
//PhoneGapの読み込みが完了した時に実行される関数
function onDeviceReady () {
window.alert ('PhoneGapの読み込みが完了し、Cameraを使う準備が整いました');
}
function snapPicture () {
navigator.camera.getPicture (onSuccess, onFail,
{ quality: 50, destinationType: Camera.DestinationType.DATA_URL});
//成功した際に呼ばれるコールバック関数
function onSuccess (imageData) {
var image = document.getElementById ('picture');
image.src = "data:image/jpeg;base64," + imageData;
}
//失敗した場合に呼ばれるコールバック関数
function onFail (message) {
alert ('エラーです: ' + message);
}
}
</script>
</head>
<body>
</br/></br/>
<ons-button onclick="snapPicture()">写真を撮影します</ons-button></br/></br/>
<img id="picture" src="" width="150" height="150">
</body>
</html>
保存はファイル > 保存 か ctrl + S で行えます。
Monacaデバッガーに戻ると画面が更新されていますので、「写真を撮影します」をタップしてみます。
カメラアプリを起動することができました。
そのまま撮影を行い、「写真を使用」をタップすると、#picture部分に表示されるのが確認できました。
今回少し触ってみただけですが、アプリでもよく使いそうなカメラの機能が簡単に実装できました。
他にも色々とできるので、また色々試してみたいと思います。
【参考サイト】
コメントが承認されるまで時間がかかります。