Monacaでクイズアプリを作る（ユーザー名の表示について）

[kagome333]

クイズアプリのmenu.html画面に、ユーザー名を取得して表示させたいと思っています。

前半のサンプルでは上手く表示できているのですが、 https://mbaas.nifcloud.com/doc/current/tutorial/monaca_quiz_01_sample.html

後半のサンプルには、この機能が無い為、付けたいと思っているのですが、上手く出来ません。 https://mbaas.nifcloud.com/doc/current/tutorial/monaca_quiz_02.html

以下のコードが上手く動いてないと思うのですが、原因がよく分かりません。 それぞれ一番下の行に追加しています。 どなたか、ご教授の方、宜しくお願い致します。

quiz.js //ログイン中のユーザー名を取得して画面に表示する function getCurrentUser(){ //ログイン中の会員を取得 var user = ncmb.User.getCurrentUser();

//取得した会員のユーザー名を表示する
$("#current_user").text("ログイン中のユーザー名："　+ user.get("userName"));

}

[goofmint]

コード的には間違っているように見えないのですが、 getCurrentUser という関数は呼ばれているのでしょうか？また ncmb は初期化されているでしょうか。

例えば getCurrentUser という関数の中で console.log(ncmb) と書いて実行した時、開発者ツールで表示されないとしたら、そもそも getCurrentUser が実行されていない、または ncmb が初期化されていないのが原因かと思います。

[kagome333]

有難うございます。 console.log(ncmb)でも、何も表示されませんでした。 おっしゃる通り、getCurrentUserが上手く呼ばれてないように思います。

ncbmｎ初期化は、以下の方法であってますでしょうか？ application_keyとclient_keyはちゃんと入れています。

quiz.js function getCurrentUser(){

var application_key="application_key"; var client_key="client_key"; var ncmb = new NCMB(application_key,client_key);

    var user = ncmb.User.getCurrentUser();

//取得した会員のユーザー名を表示する $("#current_user").text("ログイン中のユーザー名："　+ user.get("userName"));

}

ご教授頂けたら有難いです。

[goofmint]

そもそも getCurrentUser が呼ばれていないとしたら、getCurrentUserを実行してみてはいかがでしょう？

getCurrentUser()

として。

[kagome333]

すみません。 これって、ひょっとして、getCurrentUser()が競合していますか？ quiz.jsの最後の行に追加したので、それが間違いなのかなと考えたのですが、見当違いでしょうか？

// This is a JavaScript file //mobile backendのAPIキーを設定 var ncmb = new NCMB("YOUR_APPLICATION_KEY","YOUR_CLIENTKEY");

//ページの初期化が完了したら実行される $(function (){

//クイズを表示するイベントを登録
$(document.body).on('pageinit', '#answer_page', function() {refreshQuiz();});

//クイズ作成ボタンを表示するイベトを登録
//HTMLに記述したボタンはJSで操作できない
$(document.body).on('pageinit', '#create_quiz_page', function() {displayButton();});

//スコアを表示するイベントを登録★
$(document.body).on('pageinit', '#menu_page', function() {findScore();});

});

//ログイン済みかを確認する function checkCurrentUser(){ //画面遷移時のアニメーションを設定 var options = { animation: 'lift', // アニメーションの種類 onTransitionEnd: function() {} // アニメーションが完了した際によばれるコールバック };

try {
    var currentUser = ncmb.User.getCurrentUser();
    if (currentUser) {
        //ログイン済みであればメニューの表示
        quizNavi.pushPage("menu.html", options);
    } else {
        //未ログインの場合はログイン画面を表示
        quizNavi.pushPage("login.html", options);
    }        
}
catch (error) {
    console.log("error:" + error);
    logout();
}

}

//会員登録・ログインを行う function userLogin(isSignedUp){ //入力フォームからユーザー名とパスワードを取得 var userName = $("#user_name").val(); var password = $("#password").val();

//ログインを実行したあとのコールバックを設定
var callBack_Login = function(error, obj) {
    if (error) {
        //エラーコードの表示
        $("#login_error_msg").text("errorCode:" + error.code + ", errorMessage:" + error.message);
    } else {
        //メニュー画面に遷移
        quizNavi.pushPage("menu.html");
    }
}

//会員登録を実行したあとのコールバックを設定
var callBack_Account = function(error, obj) {
    if (error) {
        //エラーコードの表示
        $("#login_error_msg").text("errorCode:" + error.code + ", errorMessage:" + error.message);
    } else {
        //ログインを実行
       ncmb.User.login(userName, password, callBack_Login);
    }
}

if (isSignedUp === false){
    //ログイン処理を実行し、上で設定されたコールバックが実行される
    ncmb.User.login(userName, password, callBack_Login);
} else {
    //会員のインスタンスを作成
    var user = new ncmb.User();
    var acl = new ncmb.Acl();
    //登録ユーザーに対するアクセス制御(読む、書き)
    acl.setPublicReadAccess(true);
    acl.setPublicWriteAccess(true);

    //ユーザー名とパスワードとスコアをインスタンスに設定
    user.set("userName", userName)
        .set("password", password)
        .set("score", 0)
        .set("acl", acl);//★ACLをセットするコード

    //会員登録を実行し、上で設定されたコールバックが実行される
    user.signUpByAccount(callBack_Account); 
}

}

//ログアウトを実行し、ホーム画面に遷移させる function logout(){ ncmb.User.logout() .then(function(){ // ログアウト後処理 quizNavi.resetToPage("home.html"); }) .catch(function(err){ // エラー処理 console.log("error:" + err.message); //未ログインの場合はログイン画面を表示 quizNavi.pushPage("login.html", options); }); }

//上位5番目までのランキングを表示 function displayRanking(ranking){ for (var i = 0; i < ranking.length; i++){ var topUser = ranking[i]; $("#ranking").append((i+1) + "...userName:" + topUser.get("userName") + ", score:" + topUser.get("score") + "
"); } }

//ログイン中のユーザー名を取得して画面に表示する function getCurrentUser(){ //ログイン中の会員を取得

var user = ncmb.User.getCurrentUser();

//取得した会員のユーザー名を表示する
$("#current_user").text("ログイン中のユーザー名："　+ user.get("userName"));

}

[goofmint]

もし getCurrentUser という関数がすでにあるならば競合します。JavaScriptの場合は単純に関数が上書きされます。 ncmb.User.getCurrentUser() と競合することはないです。

[kagome333]

返信有難うございます。 ですよね、常に上書きされ最新の引数が入りますよね。 （ログイン中のユーザー名：）この文字自体が表示されないという事は、関数が効いていないという事なんですよね～・・・

ページ表示の問題なのかなとも考え、別ページを新規で作成して

でも、何も表示されないと言う・・・

こっちだと上手く表示されるのですがね https://mbaas.nifcloud.com/doc/current/tutorial/monaca_quiz_01_sample.html

分からんです・・・

[goofmint]

checkCurrentUser という関数はどこからか呼ばれていますか？

[kagome333]

返信有難うございます。 最初に表示される、index.html→home.htmlに、

``

スタートする

``

という形で、呼ばれています。

[goofmint]

どのページで表示したいのかが分からないのですが、そのページでは下記が整っているのでしょうか？

1. checkCurrentUserという関数が書かれたJavaScriptファイルが読み込まれている
2. ncmb.js（またはncmb.min.js）が読み込まれている
3. checkCurrentUserが実行されている

ons-button にイベントが設定されているのであれば、新しくユーザ名を表示したいHTMLにもそのボタンがあるのでしょうか？また、ボタンを押した際に checkCurrentUser 関数が実行されているのでしょうか？

[kagome333]

1.checkCurrentUserという関数が書かれたJavaScriptファイルが読み込まれている 読み込まれている 2.ncmb.js（またはncmb.min.js）が読み込まれている 確認します 3.checkCurrentUserが実行されている 関数内をアラートにしたら実行されたので、実行されていると思います。

ons-page、関数等、再度確認してみます。 その上で、再度質問させて頂きたいと思います。