経緯

Monacaとは、Web上のIDEで、HTML5のマルチプラットフォームなアプリを作れるサービスです。 ja.monaca.io

さくっとプロトタイプを作るのにはとても向いていますが、無料プランではいろいろ制限がついています。

作りこんでいくと、テキストエディタが貧弱に思えてきたり、Cordovaプラグインをいろいろ入れたくなったり、急にログインできなくなって焦ったりします。 GitHubにも公開したいですしね。

そこで、ローカルのCordova開発環境を構築します。

ただ、この記事は開発環境を整備したあとに書いているので、必要な手順を忘れている可能性があります。

ここで説明する環境はMacです。WindowsでAndroidアプリを開発するのには使えると思いますが、iOSアプリを開発できるのかはわかりません。

手順

1. Monacaプロジェクトをエクスポート

Monaca クラウド IDE上で、 ファイル > プロジェクトをエクスポート を選び、プロジェクトをダウンロードします。

2. Node.jsのインストール

Node.jsが入ってなければ入れましょう。（Windowsならchocoとか？）

brew install node

3. ローカルCordovaプロジェクトの作成

Cordovaプロジェクトの操作には、便利ラッパーである、 http://taco.tools/ を使います。基本的に、Cordova-CLIで使えるコマンドはTACOでも使えます。

# TACO-CLIをインストールします。
npm install -g taco-cli

# 任意のディレクトリでプロジェクトを作成します。
taco create myAwesomeApp

cd myAwesomeApp

# Androidのプラットフォームを追加します。
taco platform add android

# 依存するツールをインストールします。
taco install-reqs android

# ビルドします。
taco build android

# エミュレータで実行します。
taco emulate android

こんな画面が出れば成功じゃないでしょうか。

f:id:sujoyu:20160616112304p:plain

Androidの依存ツールのインストールに失敗する場合

TACOは開発されてまだ日が浅く、安定版ではないようなので、手動でインストールします。この記事なんか良いんじゃないでしょうか。

Cordovaでハイブリッドアプリの開発環境を整えるまで – APOC

4. MonacaプロジェクトでインストールしたCordovaプラグインのインストール

Monaca上で、ファイル > Cordovaプラグインの管理 を選択し、インストールしたCordovaプラグインの一覧を表示します。

f:id:sujoyu:20160616114038p:plain

Monaca Plugin を除くプラグインをローカルにインストールします。White List は最初から入ってるかもしれません。

「Cordova pulgin <プラグイン名>」という感じでググるとGitHubページがひっかかるので、そこを見ながらインストールします。

taco plugin add <プラグイン識別名> --save

加えて、deviceプラグインが必須なので、インストールします。

taco plugin add cordova-plugin-device --save

5. Monacaプロジェクトでインストールしたbowerライブラリのインストール

Monaca上で、ファイル > JS/CSS コンポーネントの追加と削除 を選択します。

f:id:sujoyu:20160616115357p:plain

このリストの名前がそのままbowerライブラリ名です。

cd /path/to/myAwesomeApp

# npmプロジェクトを作成
npm init
# いろいろ聞かれるが、適当にEnter押してスルーしてもOK。

# bowerのインストール
npm install bower --save

# bowerプロジェクトの作成
bower init
# いろいろ聞かれるが、適当にEnter押してスルーしてもOK。

# 上で確認したbowerライブラリをインストール
bower install <ライブラリ名> --save

6. wwwディレクトリのコピー

1. でダウンロードしたプロジェクトから、www ディレクトリをそのまま myAwesomeApp ディレクトリ下にコピーします。

7. Webpackのインストール

js / CSSライブラリの依存関係を解決する為に、Webpackを入れます。

npm install webpack --save

8. webpack.config.jsの作成

webpackのプラグインをインストールします。

npm install bower-webpack-plugin script-loader style-loader css-loader --save

webpackの設定ファイルを作ります。

myAwesomeApp/webpack.config.js

var path = require("path");
var BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: "./source/entry.js",
    output: {
        path: "./www/js/",
        filename: "loader.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
        ]
    },
    resolve: {
        root: [path.join(__dirname, "bower_components")],
        moduleDirectories: ["bower_components"],
        extensions: ["", ".js"],
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
};

9. loader.js の作成

webpackのエントリポイントとなるjsを作ります。 5. でリストアップしたbowerライブラリをrequireします。

myAwesomeApp/source/entry.js

window.jQuery = window.$ = require("jquery");    // module.exportsに対応している例
require("script!foobar");    // module.exportsに対応していない例
require("script!<bowerライブラリ名>");

※ お行儀は悪いですが、とりあえず動かすのが目標ということで...

requireし終わったら、シェルで以下を実行します。

cd /path/to/myAwesomeApp
webpack

www/js/loader.js が作成されているのを確認します。

10. index.htmlの編集

www/index.htmlに以下の行を追加します。

<script src="cordova.js"></script>
<script src="js/loader.js"></script>

以下の行を削除します。

<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">

11. app.jsの編集

app.jsではないかもしれませんが、index.htmlで読み込んでるjsでons.ready()を使っている箇所を、以下のように書き換えます。

ons.ready(function() {
  // メインの処理
});

↓

if(typeof device === 'undefined'){
  $(document).on("deviceready", onDeviceReady);
} else {
  onDeviceReady();
}

function onDeviceReady() {
  $(function() {
    // メインの処理
  });
}

12. 動かしてみる

エミュレータで動かしてみます。

taco emulate android

13. ブラウザのコンソールでデバッグする

以下のようにすることで、ブラウザ上で動かすことができます。ブラウザの開発者ツールでアプリを解析できます。

taco platform add browser
taco run browser

終わりに

おそらく、この通りにやっても動かないんじゃないかと思います。主にwebpackでライブラリをロードするのが面倒で。個別のライブラリをwebpackでどのようにロードすればいいのか、統一的な方法があるのかわかっていません。

ここまで動いたら、次はgulpのタスクでwebpackを実行するようにしたりとか、 www/loader.jsをやめて、個別のスクリプトからrequireするようにしたりとか、してみたらいいんじゃないでしょうか。

かなり設定が違うので参考になるかわかりませんが、動いているプロジェクトはこちらです。

github.com

マルチプラットフォームアプリﾑｽﾞｶｼｲ

とある地味なブログ

プログラミングとお絵かきに関する雑記。

MonacaクラウドのプロジェクトをローカルのCordovaプロジェクトに移行する

経緯

手順