サイト制作に関するメモ書き

HOME > スマートフォン > ハイブリッドアプリの開発環境「Monaca」を使ってみる

ハイブリッドアプリの開発環境「Monaca」を使ってみる

HTML+JavaScriptでアプリを作成できるMonacaを使ってみました。

Monacaへの登録

公式サイトにアクセスして、「今すぐ試す(無料)」をクリックします。

started-with-monaca01

メールアドレスとパスワードを入力して登録をクリック。

started-with-monaca02

確認メールが届くので、メールに記載されているURLをクリックすると登録完了です。
そのまま自動でMonaca IDEのダッシュボードに移動します。

started-with-monaca03

 

Monacaデバッガーのインストール

次にiPhoneやAndroidにMonacaデバッガーをインストールします。
App StoreやGoogle playから検索して、インストールして下さい。

インストール後アプリを立ち上げて、先ほど登録したメールアドレスとパスワードを入力してログインします。
以下のようにHello Worldアプリが確認できればOKです。

started-with-monaca04

 

Monaca IDEを使ってみる

Monaca IDEに戻って、画面上部中央の「新規プロジェクト」をクリックします。

started-with-monaca05

用途に合わせて色々なテンプレートが用意されているので、テンプレートを選択します。

started-with-monaca06

今回は「Onsen UI最小限のテンプレート」を選択しました。

started-with-monaca07

プロジェクト名を入力して、プロジェクトを作成するをクリックします。

started-with-monaca08

新しくプロジェクトが作成されました。
右側の開くをクリックします。

started-with-monaca09

開発画面が表示されました。
上のタブのindex.htmlを選択してみます。

started-with-monaca10

index.htmlの編集画面と、右側にプレビュー画面が表示されました。

started-with-monaca11

ここで一旦、先ほどインストールしたMonacaデバッガーを確認してみます。
最初からあったHello Worldアプリの他に、今作成したプロジェクト名が表示されていると思うので選択してみます。

started-with-monaca12

開発環境のプレビュー画面と同じ表示が確認できました。
開発を進めて保存すると、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 で行えます。

started-with-monaca13

Monacaデバッガーに戻ると画面が更新されていますので、「写真を撮影します」をタップしてみます。

started-with-monaca14

カメラアプリを起動することができました。
そのまま撮影を行い、「写真を使用」をタップすると、#picture部分に表示されるのが確認できました。
 

今回少し触ってみただけですが、アプリでもよく使いそうなカメラの機能が簡単に実装できました。
他にも色々とできるので、また色々試してみたいと思います。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP