読者です 読者をやめる 読者になる 読者になる

cordova開発環境を作るときのメモ(私用)

はじめに

まだ勉強段階だが、cordovaでの開発環境を作るときの流れをメモしておく
自分が今時点で使っているものは以下
・cordova(ハイブリッドアプリフレームワーク)
・angular.js(jsフレームワーク)
・onsenui(uiフレームワーク)
・grunt(開発ツール)

シングルwebアプリケーションの開発となるので以下と重複するところはあるのだが、若干違う部分もあるので

新規プロジェクトでシングルページアプリを作るさいの環境構築メモ(私用) - とりあえずphpとか

cordovaのインストール

mkdir myproject
cd myproject
npm install cordova@3.5

これでcordovaのバージョン3.5をローカルにインストールされる。cordovaのバージョンがけっこうあがっているようなので自分はローカルにインストールすることにしている。

cordovaプロジェクトの作成

./node_modules/cordova/bin/cordova create myproject com.example.myproject MyProject

angular.js、onsenuiのインストール

npm install bower

vi .bowerrc
{"directory": "./www/js/lib"}
./node_modules/bower/bin/bower install onsenui
./node_modules/bower/bin/bower install angular-route

vi .bowerrc
{"directory": "./watch/www/css/lib"}
./node_modules/bower/bin/bower install onsenui

これはちょっと無駄になっているので検討中なのだが、cordovaではjsとcssをそれぞれwww以下のjsフォルダ、cssフォルダに配置しなくてはならない。一度bowerでダウンロードしてきたフォルダをjs、cssフォルダへコピーすればいいだけなのかもしれないが振り分け作業が面倒で同じファイルを2カ所に配置しています。

アプリケーション作成のひな形を作る

こちらは完全に個人的な構成になってしまうのだが、、、angular.jsを使って開発するメリットでファイルを分割できるというのがあるので参考になればと思います。
僕がやってるディレクトリ構成については別途まとめてみたいと思います

touch ./myproject/www/css/app.css &&
mkdir ./myproject/www/js/config &&
mkdir ./myproject/www/js/controllers &&
mkdir ./myproject/www/js/service &&
mkdir ./myproject/www/js/views
vi ./www/js/main.js
var myApp = angular.module(
    "myApp",
    ["onsen", "ngRoute"]
);

index.htmlを編集(entryポイントとなるhtml)

<!DOCTYPE html>
<html lagn="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    
    <link rel="stylesheet" type="text/css" href="css/lib/onsenui/build/css/onsenui.css" />
    <link rel="stylesheet" type="text/css" href="css/lib/onsenui/build/css/onsen-css-components.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />

    <script src="cordova.js"></script>
    <script src="js/lib/angular/angular.js"></script>
    <script src="js/lib/angular-route/angular-route.js"></script>
    <script src="js/lib/onsenui/build/js/onsenui.js"></script>
    <script src="js/app.js"></script>
    <meta name="msapplication-tap-highlight" content="no" />
    <title>MyProject/title>
  </head>

  <body ng-app="myApp">
    <div ng-view></div>
  </body>
</html>
vi ./www/js/config/route.js

myApp.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: "js/views/index.html",
        controller: "ControllerIndex"
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
});

vi ./www/js/controllers/index.js
myApp.controller("ControllerIndex", function($scope) {
});

vi ./www/js/views/index.html
//適当 または とりあえず空でもok

gruntと必要なプラグインのインストール、Gruntfile.jsの準備

npm install grunt &&
npm install grunt-cli &&
npm install grunt-contrib-concat &&
npm install grunt-contrib-watch &&
npm install grunt-angular-templates

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        // 複数ファイルを1ファイルにまとめる設定(この例だとapp.jsというファイルにまとめられる)
        concat: {
            'www/js/app.js': [
                //以下のファイルがまとめられる
                'www/js/main.js',
                'www/js/views/*.js',
                'www/js/service/*.js',
                'www/js/config/*.js',
                'www/js/controllers/*.js'
            ]
        },
        // angularjsでhtmlとjavascriptファイルを分離するための設定
        ngtemplates: {
            myApp: {
                src: [
                    'www/js/views/*.html',
                ],
                dest: 'www/js/views/templates.js'
            }
        },
        // ファイルを監視して編集があったら自動でまとめるための設定
        watch: {
            js: {
                files: [
                    'www/js/*/*.js',
                    'www/js/main.js',
                    'www/js/views/*.html',
                ],
                tasks: [
                    'concat',
                    'ngtemplates'
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-angular-templates');
    grunt.loadNpmTasks('grunt-contrib-watch');

};

ビルドから実行まで(とりあえずブラウザでの確認まで)

// 監視スクリプト起動(監視スクリプト使用する場合)
./node_modules/grunt-cli/bin/grunt watch

// 監視スクリプト使用しない場合
./node_modules/grunt-cli/bin/grunt ngtemplates &&
./node_modules/grunt-cli/bin/grunt concat

// ビルド
../node_modules/cordova/bin/cordova build &&
../node_modules/cordova/bin/cordova serve

angular.jsで開発する場合のディレクトリ構成については1度まとめられたらと思います

以上です