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

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

ただいまの
回答率

90.33%

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    579questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    334questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

ons-tabbarとons-carouselの併用

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,109

degu

score 8

お世話になります。MonacaでOnsen UIおよびAngularJSを利用し、アプリを開発しています。

主に回答いただきたい内容

下記2点だけでも回答がいただけると幸いです。
・エラーコードの意味
・Android ver4.1.2では<ons-tabbar position="top">は無効か?
(→Elementsで確認したところタブメニューが下部に配置されているように見える。)

実現したいこと

よくニュース系のアプリなどで見かける仕様で、
画面上部にタブバーがあり、タブをタップするとメインコンテンツ部分が該当する内容を表示、
またスワイプでも同様の動きを実現したいと思っています。

発生している障害

iOSおよび、Android ver6.0については問題なく動作しているのですが、
Android ver4.1.2で同様のアプリを動かすと、タブバーは表示されず、メインコンテンツ部分は、何も表示されていない状況です。

発生しているエラー

Uncanght TypeError: Cannot call method 'stopALL' of undefined

・Possible Unhandled Promise Rejection:

再現コード

かなり複雑な入れ子になっていて申し訳ありません。。。

<ons-page ng-controller="ResultTopController">

    <ons-toolbar>
        <div class="center">{{Max}}問中{{ok}}正解!</div>
        <div class="right">
            <ons-toolbar-button
            modifier="quiet" 
            ng-click="app.myNavigator.resetToPage('home.html');"
            >TOPへ</ons-toolbar-button>
        </div>
    </ons-toolbar>

    <ons-tabbar position="top" var="tab" id="tab">
        <ons-tab
         label="全て"
         icon="fa-square"
         page="test.html"
         id="tab-1"
         active>
        </ons-tab>
         <ons-tab
          icon="fa-times"
          label="誤り"
          page="test2.html"
          id="tab-2">
        </ons-tab>
    </ons-tabbar>

    <ons-page style="top:49px;">

    <ons-page>
        <ons-carousel
                    auto-scroll
                    fullscreen
                    swipeable
                    var="carousel"
                    id="carousel">
            <ons-carousel-item>
                <ons-page>
                <ons-list modifier="inset">
                    <ons-list-item
                        ng-repeat="R in resultlist"
                        ng-click="showDetailPage(job)">
                        <h2 class="Result-h2">問題 {{R.index}}</h2>
                        <img src="{{R.ans}}" style="width:auto; max-height:70px">
                        <table>
                            <tr>
                                <td class="Result-td">
                                    <span class="Result-td-first" style="color: #440000">解答:&emsp;</span>{{R.answer}}.{{R.ansname}}
                                </td>
                            </tr>
                            <tr>
                                <td class="Result-td">
                                    <span class="Result-td-first" style="color: #000044">選択:&emsp;</span>{{R.xcode}}.{{R.xname}}
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td><pre class="quiz">{{R.quiz}}</pre></td>
                            </tr>
                        </table>
                        
                    </ons-list-item>
                </ons-list>
                </ons-page>
            </ons-carousel-item>
            
            <ons-carousel-item>
            <ons-page>
            <ons-list modifier="inset">
                <ons-list-item
                    ng-repeat="NG in resultlistNg"
                    ng-click="showDetailPage(job)">
                    <h2 class="Result-h2">問題 {{NG.index}}</h2>
                    <img src="{{NG.ans}}" style="width:auto; max-height:70px">
                    <table>
                        <tr>
                            <td class="Result-td">
                                <span class="Result-td-first" style="color: #440000">解答:&emsp;</span>{{NG.answer}}.{{NG.ansname}}
                            </td>
                        </tr>
                        <tr>
                            <td class="Result-td">
                                <span class="Result-td-first" style="color: #000044">選択:&emsp;</span>{{NG.xcode}}.{{NG.xname}}
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td><pre class="quiz">{{NG.quiz}}</pre></td>
                        </tr>
                    </table>
                </ons-list-item>
            </ons-list>
            </ons-page>
            </ons-carousel-item>
        </ons-carousel>
    </ons-page>
</ons-page>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

■エラーコードの意味
・Uncanght TypeError: Cannot call method 'stopALL' of undefined
→直訳すると、undefinedからメソッド「stopALL」が呼び出せないという意味です。本来は何らかの親オブジェクトがあり、その親オブジェクトが持つメソッド「stopALL」を呼び出そうとしているのですが、何らかの原因により親オブジェクトがundefinedになってしまっているため、メソッドstopALLが呼び出せずにエラーになっています。
onsenui.jsにstopALLというメソッドがありますね。もしご自分でstopALLというメソッドを持つオブジェクトをコーディングしていないのであれば、十中八九OnsenUIのどこかでエラーが発生しているものと思われます。

・Possible Unhandled Promise Rejection:
→開発言語はReactですか?私は見たことが無いのですがReactでのエラーということで以下に情報があります。Promise関連のエラーのようですね。
参考

二つ目のエラーはrejectということで何らかのエラーが発生してしまった後の例外処理関連と思われますので、一つ目のエラーが恐らく真の原因に近いのではないかと予想します。
ただし、原因を追いかけるのは困難極まりますので、追求するのは難しいかもしれません(原因が分かっても、OnsenUIの不具合だったとしたら自分では修正できない)

■Android ver4.1.2では<ons-tabbar position="top">は無効か? 
JavaScript側でエラーが発生しているために予期せぬ表示となってしまうということはあり得ます。今回OnsenUIでエラーが発生しているとしたら、position="top"を処理する前に処理が停止してしまっていて、結果的にタブバーが下部に表示されてしまっている可能性はあります。同様に、メインページ部分についてもResultTopControllerが初期化される前やresultlistに値がセットされる前にエラーになってしまっているとしたら何も表示されないという事象になる可能性はあります。
見た目については、まずはJavaScriptのエラーを片付けてから再度確認の必要がありそうです。

ちなみに、再現コード下部のons-carouselを含むons-pageがtest.htmlでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/08 12:54

    akabee様
    お世話になります。こちらでも回答をいただきありがとうございます!
    丁寧かつ分かりやすいご説明、非常にありがたいです。

    ■エラーの内容
    こちらに関してはやはりそうですか...
    ログ上にも[www/lib/onsenui/js/onsenui.min.js:11]と表示されていたので、onsenUIで何かが起こっているんですね。
    ちなみに出来る限りの切り分けをしてみたのですが、Android 4.1.2(手元に左記のverしかないため、その他は未検証)でpushPageを呼び出すと発生しているようです。

    ■Android ver4.1.2では<ons-tabbar position="top">は無効か?
    こちらに関しても冷静にまずシンプルな構造で切り分けをすべきでした。お手数をおかけし申し訳ありません。
    で、「Monaca」→「新規プロジェクトの作成」→「Onsen UI Vw2 Angular 1 Tabbar」からテストプロジェクトを作成し、position="top"を試してみました。
    結果としましては、やはりAndoroid 4.1.2では画面上部にタブバーが表示されませんでした。
    そのため、こちらもOnsenUI側のバグと判断し、自前でdivを組み合わせてタブバーを作成したところです。


    メインコンテンツ部分が何も表示されない件についても上記のテストプロジェクトで試験してみたところ、「Uncaught TypeError: Cannot call method 'stopAll' of undefined」が出力されていても問題なく画面に表示されたので、何か別の原因があると判断して調査を進めようかと思っております。
    何か思い当たる節がございましたらご教授いただけたら幸いです。

    >ちなみに、再現コード下部のons-carouselを含むons-pageがtest.htmlでしょうか?
    こちらについて、test.htmlは完全なるダミーhtmlでございます。
    理由は、ons-tabを利用した際のイベントを受け取るためです。page=""属性に値を指定しないと、イベントを受け取らないためと
    <ons-carousel-item>下の<ons-page>をons-loading-placeholder属性にて指定していたのですが、この場合、scopeの内容を読み取れなかったため、仕方なく再現コードのような構造になっている次第です。

    キャンセル

  • 2017/03/08 14:02

    改めてサポートOSのバージョンを確認してみましたがAndroid 4.4以上とありますね。やっぱりサポート外ということなのかもしれません。。。
    https://github.com/OnsenUI/OnsenUI

    引き続き、私自身はAndroid 4.1.2が手元にありませんので再現はさせられませんが・・

    >Android 4.1.2(手元に左記のverしかないため、その他は未検証)でpushPageを呼び出すと発生しているようです。
    ons-navigatorを利用されているというのは予想外です。教えて下さい。エラーになるのは再現コードからpushPageしたときですか。再現コードにpushPageしたときですか。後者であればpushPageが原因ではなく再現コードの初期化時に発生している可能性もあります。

    >結果としましては、やはりAndoroid 4.1.2では画面上部にタブバーが表示されませんでした。
    ons-tabに設定しているのがダミーということですのでその状態で上手く動作することが開発元でサポートされているのか確認が必要ですね。ons-tabがダミーでなければどうでしょうか。
    テストプロジェクトではダミーを利用されていないのであればやはり対応外なのでしょうか・・・

    >「Uncaught TypeError: Cannot call method 'stopAll' of undefined」が出力されていても問題なく画面に表示されたので、何か別の原因があると判断して調査を進めようかと思っております。
    ここはまだ判断するには切り分けが十分ではないのではないでしょうか?シンプルな構成ではメインページが表示されたと思いますが、表示されるまでのステップを一つずつ、元の構成でどこまで問題なく実行できているのか確認が必要と思います。具体的にはメインページはresultlistとresultlistNgで表示を行っていると思いますので、それらの値が受け取れているのか、受け取れていないのか、受け取れているのに表示ができないのか等。。。

    >この場合、scopeの内容を読み取れなかったため、仕方なく再現コードのような構造になっている
    このあたり、闇が深そうですね・・・

    キャンセル

  • 2017/03/08 17:58

    akabee様
    迅速な回答誠にありがとうございます。

    まず結論から申し上げますと、本現象は解決いたしました。
    以下の内容が重要なヒントとなりました。本当にありがとうございます。
    ①Android 4.1.2 はOnsenUIのサポート外であること。
    ②メインコンテンツ部分に値は受け取れているか否か、受け取れているのに表示ができていないのか?

    ②については、「受け取れているが、表示ができていない」という状態でした。
    おそらくですが、サポート対象外であるために、ons-list-item内に入れ子にしている要素たちが改行されず、横長に配置され、画面上では見えないという状況でした。
    そのため、ons-list-itemをそのままdivに変更したところ理想の結果となりました。


    以下インラインでお答え致します。
    >エラーになるのは再現コードからpushPageしたときですか。再現コードにpushPageしたときですか。
    これは後者となります。
    ただこちらについては、再現コード以外であっても全く同じエラーが発生します。(monacaのpushPageを用いたテンプレートプロジェクトでも同様)

    >ons-tabがダミーでなければどうでしょうか。
    テストプロジェクトについてはダミーは用いていません。これは私としても完全に対応外だと感じております。。。

    今回、細かいところまでご確認していただき本当にありがとうございました。
    切り分けるべきポイントまでご教授いただき今後の私自身の成長に非常に役立たせていただきました。
    本当にありがとうございました!

    キャンセル

  • 2017/03/08 22:03

    解決したようでよかったです。ひとつずつ確認していくことが大切ですね。

    キャンセル

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

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    579questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    334questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。