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

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

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

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

Monaca

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

Q&A

解決済

1回答

2714閲覧

monacaデバッガーでAndroidだけエラー

ocha

総合スコア11

AngularJS

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

Monaca

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

0グッド

0クリップ

投稿2017/06/07 02:05

こんにちは

こちらの記事を参考にmonacaでスワイプするとタブも同時に切り替えるなどの実装を行いました。

monacaデバッガーで確認した所、
Iphoneでは上手く行くのですが、Androidでは下記のようなエラーがでてしまい、ons.ready内のものが反応しないという状態になり、スワイプすると同時にタブの切り替えが出来なくなりました。

エラー内容

Uncaught ReferenceError:Set is not defined www/lib/onsenui/js/onsenui.min.js:3

テンプレートは
Onsen UI V2 Angular 1 Minumumを使用しており、
プラグインはInAppBrowserとCrosswalk WebView Engineを追加しました。

index.html

<!DOCTYPE HTML> <html ng-app="app"> <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 src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> //ons.bootstrap(); var app = angular.module('app', ['onsen', 'ngSanitize']); app.factory("SharedStateService", function () { return { title: 'SharedStateService', email: 'SharedStateService', postid: 'SharedStateService', content: 'SharedStateService', comment: {} }; }); app.controller('app_Ctrl', function($scope, $timeout, $http,$httpParamSerializerJQLike,SharedStateService,$templateCache,$sce) { $scope.testData = ''; $scope.tabHeight = {}; $scope.viewdata = SharedStateService; //wodpressのjsonp $http.jsonp('example.com/jsonp.php?callback=JSON_CALLBACK&posts_per_page=50') .success(function(data) { $scope.testData = data; //alert('取得成功'); $timeout(function() { // タブの更新 tab.refresh(); // カルーセルの高さを設定 $scope.tabHeight = { height: document.getElementsByTagName('ons-carousel-item')[0].clientHeight + 'px' }; }); }).error(function() { //alert('取得失敗'); }); // jsonデータの取得 $http.get('belongData.json').success(function(data) { // 1番目のタブを選択した状態にする data['belongs'][0]['isActive'] = true; // 取得したデータを格納 $scope.belongData = data; $timeout(function() { // タブの更新 tab.refresh(); }); }).error(function() { alert('取得失敗'); }); // 詳細ページ用 $scope.test = function(kazu) { SharedStateService.postid = kazu.id; SharedStateService.title = kazu.title; SharedStateService.content = $sce.trustAsHtml(kazu.content); SharedStateService.comment = kazu.comment; myNavigator.pushPage('detail.html'); }; // コメントを送る $scope.comment = function(com){ v_content = document.getElementById('comment_content').value; $http({ method: 'POST', headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}, transformRequest: $httpParamSerializerJQLike, url: 'http://example.com/wp-json/wp/v2/comments', data: {author_name:'名無し',author_email:'example@example.co.jp',post:SharedStateService.postid,content:v_content} }) // 成功時の処理 .success(function(data, status, headers, config){ alert('コメントを投稿しました'); }) // 失敗時の処理 .error(function(data, status, headers, config){ alert('コメントの投稿に失敗しました'); }); }; // タブをクリックしたとき $scope.changeTab = function(index) { //tab.setActiveCarouselItemIndex(index); tab.setActiveIndex(index); } // タブのスクロール位置の設定 $scope.tabPoint = { left: '0px' }; // 特定の場合クラス付与 $scope.isMe = function(ban){ return "layout_" + ban.layout; }; ons.ready(function() { // カルーセルに変更があったとき tab.on('overscroll',function(e){ var lastmenu = $scope.belongData['belongs'].length - 1; if(e.activeIndex == lastmenu){ tab.setActiveIndex(0); } else if(e.activeIndex == 0){ tab.setActiveIndex(lastmenu); } }); tab.on('postchange', function(e) { // タブ部分の移動可能な範囲 var difference = document.getElementsByClassName('tab-switch_inner')[0].clientWidth - document.getElementsByClassName('tab-switch')[0].clientWidth; // タブのスクロール位置 var scrollPoint = (difference / ($scope.belongData['belongs'].length - 1) * e.activeIndex); //menu var menuslide = document.getElementsByClassName('tab-switch_inner')[0]; menuslide.style.position = "relative"; $timeout(function() { // activeの解除と設定 $scope.belongData['belongs'][e.lastActiveIndex]['isActive'] = false; $scope.belongData['belongs'][e.activeIndex]['isActive'] = true; // タブのスクロール位置の設定 $scope.tabPoint = { left: -scrollPoint + 'px' }; // タブの高さ変更 $scope.tabHeight = { height: document.getElementsByTagName('ons-carousel-item')[e.activeIndex].clientHeight + 'px' }; }); }); }); }); </script> </head> <body ng-controller="app_Ctrl"> <ons-navigator var="myNavigator"> <ons-page> <ons-toolbar> <div class="center" style="background-image:url('header.png');background-size:100% 100%;";></div> </ons-toolbar> <div class="contents"> <div class="tab-switch"> <div class="tab-switch_inner" ng-style="tabPoint"> <div class="tab-switch_item" ng-repeat="belong in belongData.belongs" ng-click="changeTab($index)" ng-class="{active: belong.isActive}">{{belong.name}}</div> </div> </div> <ons-carousel var="tab" swipeable auto-scroll ng-style="tabHeight"> <ons-carousel-item ng-repeat="belong in belongData.belongs"> <ons-list> <div id="list_header_{{$index}}" class="list_header">注目!</div> <ons-list-item ng-repeat="data in testData.res | filter:{ category: belong.name }" ng-class="isMe(belong)"> <div class="thumbs thumbs_{{$index}}" ng-click="test(data)"> <img src="{{data.thumb}}" alt="画像"> <span class="dataname" id="data_title_{{$index}}">{{data.title}}</span> <div ng-repeat="com in data.comment"> {{com.comment_content}} </div> </div> </ons-list-item> </ons-list> </ons-carousel-item> </ons-carousel> </div> </ons-page> <ons-bottom-toolbar> <div class="footer"> <a href="index.html" class="footer-active">index</a> <a href="sono2.html">sono2</a> <a href="sono3.html">sono3</a> </div> </ons-bottom-toolbar> </ons-navigator> </body> </html>

ご教授頂けたら幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Crosswalk プラグインのバージョンが古すぎて Crosswalk ブラウザに Set オブジェクトが入っていないのがエラーの原因です。
Crosswalk プラグインのバージョンを最新のものに上げると解決すると思います。
よろしくお願いします。

具体的には以下の画面から「Crosswalk Version」を設定します。
イメージ説明

投稿2017/06/07 02:25

編集2017/06/07 03:10
asial-matagawa

総合スコア164

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

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

ocha

2017/06/07 05:16

ご解答ありがとうございます。 Crosswalk Versionを最新の23.53.589.4にしましたが、変わらずに同じエラがーでてしまいます。 ちなみにデバッグで使用しているAndroidのバージョンは4.4.2です。
asial-matagawa

2017/06/07 09:56

失礼しました。 Monaca デバッガーでは「Monaca デバッガー内部に組み込まれた Crosswalk ブラウザ」が使用されるため、新しいバージョンの Crosswalk プラグインを追加しても新しい Crosswalk ブラウザは有効になりません。 追加した Crosswalk プラグインを Monaca デバッガーで利用するには、「カスタムビルド版の Monaca デバッガー」をビルドする必要があります。 以下の記事が参考になると思います。 http://blog.asial.co.jp/1444 ---------------- また、Monaca デバッガー自体のバージョンが古い可能性がありますので、上記の手順をお試しいただく前に Monaca デバッガーの更新を行っていただいてもよろしいでしょうか? ---------------- なお、Onsen UI のサポート対象環境は Android 4.4.4 以上のため、Android 4.4.2 の場合は保証対象外となります。 https://github.com/OnsenUI/OnsenUI#browser-support よろしくお願いいたします。
ocha

2017/06/13 07:42

詳しいご回答ありがとうございます。 実験用の端末では上記のご回答でも上手くいかなったのですが、 Android6以上の端末で試した所きちんと動くことが確認できました。 今後のことも考えて6以上でデバッグしていきたいと思います。 ご協力ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問