質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • Cordova

    450questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Cordovaにて環境ごとに変数を切り替えたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 264

psuke

score 118

 前提・実現したいこと

Cordovaを用いてiPhone/Android両対応のネイティブアプリを開発しています。
VueやAngularなどのフレームワークは使用せず、純粋なJavascriptとjQueryのみによる実装です。
Railsで開発しているバックエンドAPIにAjaxにて通信する処理が多数含まれます。

バックエンド側はStaging環境とProduction環境の2つを用意していることから、
Cordova(フロントエンド)側についても同様にStaging用とProduction用の2種類を用意したいと考えています。
Vueなどを使用していれば、環境ごとのConfigファイルを用意して接続先情報を切り替えることができますが、
純粋なJavascriptのみで開発しているCordovaの場合、どのように環境変数を切り替えてBuildをすれば良いのでしょうか。
いろいろと調査をしておりますが、有益な情報が見つけられておりません。
参考になる情報をお持ちの方がいらっしゃれば、ご教示いただけないでしょうか。

 補足情報(FW/ツールのバージョンなど)

Cordova 7.1.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

本件自己解決しましたので、どなたかのお役に立てばと思い記入します。
Cordovaのフックという機能を用いて実現できました。

1 以下のファイルを作成(自分はフォルダから新たに作成しました)
これが環境ごとに切り替える(置換する)文字列となります。

project_root¥build¥config¥project.json
{
  "stage": {
    "api_server_url" : "'https://server_for_staging.com'" 
  },
  "production": {
    "api_server_url" : "'https://server_for_production.com'" 
  }
}


2 config.xmlに以下を追加。

<hook src="www/js/changeEnvVariables_afterPrepare.js" type="after_prepare" />

3 project_root¥www¥js¥changeEnvVariables_afterPrepare.jsというファイルを作成。
コードの中央部分にある"../platforms/ios/www/js/index.js"が置換対象のファイルなので、
他にjsファイルがあればそれも追記する。

#!/usr/bin/env node
// this plugin replaces arbitrary text in arbitrary files
//
// Look for the string CONFIGURE HERE for areas that need configuration
//
var fs = require('fs');
var path = require('path');
var rootdir = process.argv[2];
function replace_string_in_file(filename, to_replace, replace_with) {
  var data = fs.readFileSync(filename, 'utf8');
  var result = data.replace(to_replace, replace_with);
  fs.writeFileSync(filename, result, 'utf8');
  console.log(to_replace, replace_with);
}
var target = "stage";
if (process.env.TARGET) {
  target = process.env.TARGET;
}
if (rootdir) {
  var ourconfigfile = path.join(rootdir, "config", "project.json");
  var configobj = JSON.parse(fs.readFileSync(ourconfigfile, 'utf8'));
  // CONFIGURE HERE
  // with the names of the files that contain tokens you want
  // replaced. Replace files that have been copied via the prepare step.
  var filestoreplace = [
    "../platforms/ios/www/js/index.js",
    "../platforms/android/assets/www/js/index.js",
  ];
  filestoreplace.forEach(function(val, index, array) {
    var fullfilename = path.join(rootdir, val);
    if (fs.existsSync(fullfilename)) {
      // CONFIGURE HERE
      // with the names of the token values. For example,
      // below we are looking for the token
      // /*REP*/ 'api.example.com' /*REP*/ and will replace
      // that token
      replace_string_in_file(fullfilename,
      "api_server_url",
      configobj[target].api_server_url);
      // ... any other configuration options
    } else {
      // console.log("missing: "+fullfilename);
    }
  });
}

4 置換対象のjsファイルにて、当該箇所を以下の通り修正。私はajaxの中でurlを記載していたので、
その部分を修正しました。

(修正前)

url: 'https://server_for_staging.com'

(修正後)

url: api_server_url

上記の修正を行ったのち、以下のコマンドでビルドするとそれぞれの環境に応じたURLに置換されています。

TARGET=stage cordova build ios
TARGET=production cordova build ios

仕組みとしては以下の通りです。

  1. www¥jsフォルダ以下のjsファイルがビルドされ、platforms¥iosおよびandroidの下にコピーされる。
  2. ビルド後に、config.xmlに記載されたフックが起動され、changeEnvVariables_afterPrepare.jsが実行される。
  3. コピーされたplatforms¥iosおよびandroid以下のjsファイルを対象に、api_server_urlという文字列が、それぞれの環境のURLに置換される。

とりあえずなんとか動かすところまでの検証のみなので、誤り部分があるかもしれませんが、自分の備忘録も兼ねて投稿しておきます。

参考URL:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
http://intown.biz/2014/05/13/build-configurations-in-cordova-using-hooks/
https://qiita.com/KNaito/items/65587f5d51974e8b4adf

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Cordova

    450questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。