CodeZine(コードジン)

特集ページ一覧

カメラプラグインを使って、Apache Cordovaのサンプルアプリを作ってみよう

Apache Cordovaで本格スマホアプリに挑戦しよう 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/04/27 14:00

目次

Webリソースの概要

 プロジェクトを作成した初期状態ではリスト5のようにWebリソース(wwwフォルダ)はなっています。

 Apache Cordovaではこのフォルダに開発したJavaScriptなどを追加していきます。

リスト5 プロジェクトを作成した状態のwwwフォルダの構成
www/
├── css
│   └── index.css
├── img
│   └── logo.png
├── index.html
└── js
    └── index.js

 初期状態では、js/index.jsについては一部コメントなどを削除していますが、リスト6のようになっています(Visual Studio 2015で作成した場合は、script/index.jsで内容も多少異なります)。

リスト6 初期状態のJavaScriptプログラム
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false); // (1) Apache Cordovaの準備が整った状態のイベントを取得
    },
    // deviceready Event Handler
    onDeviceReady: function() {   // (2) 準備が整った時に実行されるメソッド
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        // : (省略)
        console.log('Received Event: ' + id);
    }
};

app.initialize();

 ここで、(1)のようにdevicereadyイベントを取得して、そのイベント取得後にすべての処理を開始しています。Apache Cordovaでは通常のブラウザ上で実行されるWebアプリと違い、図4に示すようにネイティブ側でも初期処理が行われます。これらの初期処理の完了通知がdevicereadyイベントです。このイベント通知の後でないと、先ほど導入したカメラ機能などは使えません。従って、必ずこのイベント取得後に処理を行うようにします。

図4 Cordovaの起動ステータスの変化
図4 Cordovaの起動ステータスの変化

 このdevicereadyイベント以外にも、よく利用するイベントに表1のイベントがあります。

表1 よく利用するCordovaでのイベント
イベントの種類 イベント名 説明
バックグラウンドイベント pause アプリがホームボタンや他のアプリなど起動などによりバックグラウンドになったときのイベント
フォアグラウンドイベント resume アプリがバックグラウンドから、フォアグラウンドになったときのイベント
バックボタンイベント backbutton デバイス側のバックボタンが押された時のイベント

 これ以外にもイベントはありますが、これらのイベントは実際のアプリ開発ではよく利用しますので、最低現、これらは覚えておくとよいでしょう。

 それ以外のイベントはこちらを参照してください。

HTMLファイル作成時の注意点

 続いて、サンプルアプリの実装を行っていきます。まず、HTMLをリスト7のように作成します。今回は、1つのHTMLで完結しているので、画面遷移などはありません。実際のアプリでは複数の画面があり、それらの画面を遷移する必要があります。aタグなどを用いてhtmlファイル自体を分ける事も可能ですが、アプリという性質上、毎回、初期化処理や必要なリソースを読みこむ必要が生じてしまいますので、SPA(シングルページアプリケーション)として作成する方が好ましいでしょう。SPAアプリを作る方法はいくつかありますが、Apache CordovaとAngularJSの組み合わせは非常に実績が多い組み合わせです。筆者によるAngularJSの解説記事「AngularJSではじめるJavaScriptフレームワーク開発スタイル」なども参考にしていただけると幸いです。

リスト7 HTMLファイル(www/index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta charset="UTF-8">   <!-- (1) 文字コードの指定  -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="vendors/jquery-2.2.1.min.js"></script>                <!--  (2) jQueryの追加 -->
<script type="text/javascript" src="vendors/bootstrap/js/bootstrap.min.js"></script>      <!-- (3) Bootstrapの追加 -->
<link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.min.css">
<title>Sample Camera App</title>
</head>
<body>
<div id="device-not-ready">                    <!-- (4) 初期化前の表示 -->
    <span>デバイスはまだ準備中です</span>
</div>
<div id="device-ready" style="display: none">  <!-- (5) 初期化後の表示 -->
    <div>デバイスの準備が整いました</div>

    <button class="btn btn-primary btn-block" id="camera-call">カメラを起動</button> <!--  (6) カメラの起動ボタン -->

    <img id="image" src=""> <!-- (7)カメラで撮った写真の画像ファイル -->
</div>
<script type="text/javascript" src="cordova.js"></script>   <!-- (8) cordovaの初期化JavaScriptファイル -->
<script type="text/javascript" src="js/index.js"></script>  <!-- (9) 実際のアプリ機能が実装されるJavaScriptファイル -->
</body>
</html>

 気を付けるべきポイントとしては、(1)のように文字コードの指定は忘れないようにしてください。iOSの場合にはこの指定がないと文字化けするようです。

 Webリソースはサーバから読みこまれているわけではないので、HTTPヘッダのContentType情報が取得できるわけではありません。

 端末側ではHTMLに文字コードの指定がないと正しい判断はできませんので注意してください。

 また、今回は(2)、(3)のようにjQueryとBootstrapを使用します。今回は、それほど複雑なアプリではありませんのでjQueryを使いますが、通常のアプリを作るときにも何らかのJavaScriptのフレームワークを使う事が多くなると思います。これらのファイルも端末から読みこまれますので、wwwフォルダ内部においてください。

 (4)がCordovaの初期化(devicereadyイベント取得前)の表示部分で、(5)が初期化終了後の表示部分です。(6)カメラの起動ボタンと、(7)画像の表示はその内部に配置しています。ここまでは、通常のHTMLとほぼ同様ですので、非常に分かりやすいと思います。

 続いて、(8)のcordova.jsですが、こちらはwwwフォルダにはありません。実は、このwwwフォルダは図5に示すようにアプリのビルド時などのタイミングで各プラットフォーム毎のWebリソースフォルダにコピーされたあとに実際のアプリとして配置されます。cordova.jsは各プラットフォーム毎に内容が異なりますので、そのコピー先のフォルダにはあります。

図5 build/prepare時などでのwwwフォルダのコピー
図5 build/prepare時などでのwwwフォルダのコピー

 そして、最後に(9)は今回のサンプルアプリの機能を実装するためのJavaScriptファイルです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5