monaca Onsen UI V2 Vue Navigation（単一ファイルコンポーネント）にてMonaca バックエンド用の JavaScript APIを使いたい

monaca Onsen UI V2 Vue Navigation （単一ファイルコンポーネント）でアプリを作成しております。

Monaca バックエンド用の JavaScript API にてログイン処理を行いたいのですが
ログイン処理が正常に行えません。
以下記載の.done も .fail も通りません。

使用、記載方法に問題があるでしょうか？
ご教授いただけましたら助かります。
よろしくお願いいたします。

Home.vue

export default {
  data () {
    return {
      pageTitle: "",
    };
  },

  created(){
    this.initApp();
  },

  methods: {
      initApp(){
           monaca.cloud.User.login(monaca_user, monaca_pass)
           .done(function(result){
               this.$ons.notification.alert({message: '成功', title: 'テスト'});
           })
           .fail(function(err){
               this.$ons.notification.alert({message: '失敗', title: 'コレとって！'});
           });
      },
  }

以下の記載が Monaca Docs にあるので

バックエンド API にアクセスする場合には、jQuery の読み込み、および、ホワイトリストへの cloud.monaca.mobi の登録 ( 各 OS の設定ファイル上に ) を行います。詳細は、Android の場合はこちらまたは iOS の場合はこちらをご確認ください。

index.html にて jquery の読み込み、ホワイトリストは <access origin="*"/> を記載しております。
また、バックエンドAPI の箇所以外でサーバにリクエストする際は axios 使用しております。

index.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 type=text/javascript src=components/loader.js></script>
<link rel=stylesheet type=text/css href=components/loader.css>
<link href=app.css rel=stylesheet>
</head>
<body>
	<div id=app></div>
	<script type=text/javascript src=vendor.bundle.js></script>
	<script type=text/javascript src=app.bundle.js></script>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>

config.xml（不要そうなところは当記載から削除しております。）

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="com.example.helloworld" version="1.0.0">
  <name>app</name>
  <description>Made with Monaca (http://monaca.mobi)</description>
  <author/>
  <content src="index.html"/>
  <preference name="loglevel" value="DEBUG"/>
  <preference name="AndroidLaunchMode" value="singleTop"/>
  <preference name="BackgroundColor" value="0xffffffff"/>
  <preference name="ErrorUrl" value=""/>
  <preference name="monaca:WebViewEngine" value="crosswalk"/>
  <preference name="monaca:CrosswalkArchitecture" value="arm"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="monaca:DisableCookie" value="false"/>
  <preference name="android-minSdkVersion" value="16"/>
  <feature name="App">
    <param name="android-package" value="org.apache.cordova.App"/>
  </feature>
  <preference name="AllowInlineMediaPlayback" value="false"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="BackupWebStorage" value="cloud"/>
  <preference name="EnableViewportScale" value="false"/>
  <preference name="FadeSplashScreen" value="true"/>
  <preference name="FadeSplashScreenDuration" value="250"/>
  <preference name="KeyboardDisplayRequiresUserAction" value="true"/>
  <preference name="MediaPlaybackRequiresUserAction" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SuppressesIncrementalRendering" value="false"/>
  <preference name="TopActivityIndicator" value="gray"/>
  <preference name="GapBetweenPages" value="0"/>
  <preference name="PageLength" value="0"/>
  <preference name="PaginationBreakingMode" value="page"/>
  <preference name="PaginationMode" value="unpaginated"/>
  <feature name="LocalStorage">
    <param name="ios-package" value="CDVLocalStorage"/>
  </feature>
  <preference name="ios-XCBuildConfiguration-TARGETED_DEVICE_FAMILY" value="1,2"/>

  <platform name="ios">
    <config-file platform="ios" parent="CFBundleLocalizations" target="*-Info.plist">
      <array>
        <string>en</string>
      </array>
    </config-file>
  </platform>

  <platform name="android">
  </platform>

  <platform name="windows">
  </platform>

  <platform name="chrome">
  </platform>

  <access origin="*"/>
</widget>

行動規範の内容に同意します

回答1件

ベストアンサー

https://docs.monaca.io/ja/backend/manual/control_panel/

これをすると反応返ってくるようになりました。
(Monaca バックエンド作成まで(バックエンド設定以下はやらない)で大丈夫でした)

あと、MonacaBackend プラグインも必要かもしれません。

※AndroidアプリであるMonacaDebuggerで反応来るの確認しました(Monacaクラウドでは無反応のままではありますが、DocumentにはAndroid iOSって書いてるから非サポートなのかも)

動いたソース

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10  <script>
11    ons.ready(function() {
12      monaca.cloud.User.login("a", "b")
13      .done(function(result){
14         ons.notification.alert({message: '成功', title: 'テスト'});
15      })
16      .fail(function(err){
17         ons.notification.alert({message: '失敗', title: 'コレとって！'});
18      });
19    });
20  </script>
21</head>
22<body>
23	<br />
24    This is a template for Monaca app.
25</body>
26</html>
27

投稿2017/08/31 15:26

編集2017/09/01 07:11

rururu3

総合スコア5545

s-san.8

2017/08/31 15:39

ご回答ありがとうございます。いつもありがとうございます。 console.log に出力してみました。 created() も initApp() も通っていました。 webpack でまとめているのですが生成された index.html に後から jquery の読み込みを追記しております。本来は jquery を main.js 等で import して Vue.use を行う感じかもしれないですがちょっと参考になる情報が無かった為、上記のようにしております。その辺も問題なのでしょうか？重ねて、いつもありがとうございます。引続き、アドバイスいただけましたら助かります。よろしくお願いいたします。

rururu3

2017/08/31 17:11

monaca cloudで試したら同じような現象になりましたのでいろいろ試したところわかりましたーので回答編集いたします。

s-san.8

2017/09/01 02:41

ご回答ありがとうございます。 Monaca バックエンドの作成はしているのですが上手く行きません。改めてログ出力を行いながら冷静にデバッグしてみました。デバッグ方法を整理させていただくと・ローカルで開発・上記をMonacaクラウドIDE にアップロード・MonacaクラウドIDE上で index.html を編集（jquery の読み込みを追記）・上記、プロジェクトをMonacaデバッガーでデバッグそこで MonacaデバッガーのApp Log を確認しております。 monaca.cloud.User.login の内容を記載すると以下がログに出力されております。 Uncaught TypeError: Cannot read property 'error' of null monaca.cloud.User.login を外すと上記のログは出力されません。 jquery の読み込みだけでも同じく上記のログは出力されません。いつもありがとうございます。引続き、アドバイスをいただけましたら助かります。よろしくお願い致します。

rururu3

2017/09/01 03:01

s-san.8

2017/09/01 04:05

ご回答ありがとうございます。 index.html 内で読み込み箇所を色々変えてみたのですがダメでした。先ほどのエラーですが、出力行の記載が漏れてました。ご指摘いただいてる components/loader.js でエラーが出てるようです。 Uncaught TypeError: Cannot read property 'error' of null www/components/loader.js : 554 components/loader.js で読み込む場合は components/loader.js 内で document.write する感じでしょうか？上記のエラー箇所から、もし記載場所のご指摘等、いただけましたら助かります。本当にいつも助かります。ありがとうございます。

rururu3

2017/09/01 05:27

components/loader.jsはJS/CSSコンポーネントからいじって自動的に更新されます。そこでエラーとなると、一度JS/CSSコンポーネントで全削除して再度追加していったほうがいいかもしれません

s-san.8

2017/09/01 06:47

ご回答ありがとうございます。 JS/CSSコンポーネント知りませんでした。ここから足せるんですね。Cordovaプラグインはいくつか追加していたのに気づきませんでした。ただ、JS/CSSコンポーネントで以下を追加してみましたが jQuery (Monaca Version) バージョン:2.0.3 同じ現象でした。ご案内いただいている通り一度、削除、設定のしなおし等を行ってみます。いつも本当にありがとうございます。

rururu3

2017/09/01 07:07

同じ現象にならないので、想像して解答してお手数おかけしてすいません。ちょっと、私が動いた環境などを解答に書いておきますので、まずはそれで表示されるか見てみるのがいいかもしれませんね。

s-san.8

2017/09/01 07:41

ご案内ありがとうございます。何から何まで申し訳ないです。一度、試させていただきます。今後ともよろしくお願いいたします。ありがとうございました。

s-san.8

2017/09/01 09:51

rururu3 様 monaca に問合せを行っていたのですが MonacaバックエンドAPI は MonacaクラウドIDE で作成されたプロジェクトのみ動作保証をしているとのことでタイトルにもある通り今回、私の方では「Onsen UI V2 Vue Navigation（単一ファイルコンポーネント）」でプロジェクトを作成しておりますので Monaca Localkit にて開発をしております。ですので動作保証外とのことでした。教えていただいた通り、当構成の最小構成からもう一度確認してみます。既にご存知かもしれませんが、ご報告まで失礼いたします。

rururu3

2017/09/01 10:44

そんな罠があったんですね。知りませんでした・・・・教えていただきありがとうございます！となると、ニフティのmbaas使うのも手かもしれませんね。

s-san.8

2017/09/01 16:49

はい。 monaca からの回答の後、mbaas を使う方向で調査中です！色々、ありがとうございます。今後ともよろしくお願いいたします。

行動規範の内容に同意します