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

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

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

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

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

2604閲覧

ons-tabbarとons-carouselの併用

degu

総合スコア14

AngularJS

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

Onsen UI

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

Monaca

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

0グッド

1クリップ

投稿2017/03/07 05:51

お世話になります。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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

■エラーコードの意味
・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 00:30

akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

degu

2017/03/08 03: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の内容を読み取れなかったため、仕方なく再現コードのような構造になっている次第です。
akabee

2017/03/08 05: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の内容を読み取れなかったため、仕方なく再現コードのような構造になっている このあたり、闇が深そうですね・・・
degu

2017/03/08 08:58

akabee様 迅速な回答誠にありがとうございます。 まず結論から申し上げますと、本現象は解決いたしました。 以下の内容が重要なヒントとなりました。本当にありがとうございます。 ①Android 4.1.2 はOnsenUIのサポート外であること。 ②メインコンテンツ部分に値は受け取れているか否か、受け取れているのに表示ができていないのか? ②については、「受け取れているが、表示ができていない」という状態でした。 おそらくですが、サポート対象外であるために、ons-list-item内に入れ子にしている要素たちが改行されず、横長に配置され、画面上では見えないという状況でした。 そのため、ons-list-itemをそのままdivに変更したところ理想の結果となりました。 以下インラインでお答え致します。 >エラーになるのは再現コードからpushPageしたときですか。再現コードにpushPageしたときですか。 これは後者となります。 ただこちらについては、再現コード以外であっても全く同じエラーが発生します。(monacaのpushPageを用いたテンプレートプロジェクトでも同様) >ons-tabがダミーでなければどうでしょうか。 テストプロジェクトについてはダミーは用いていません。これは私としても完全に対応外だと感じております。。。 今回、細かいところまでご確認していただき本当にありがとうございました。 切り分けるべきポイントまでご教授いただき今後の私自身の成長に非常に役立たせていただきました。 本当にありがとうございました!
akabee

2017/03/08 13:03

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問