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

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

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

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

AngularJS

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

受付中

ionic で @ionic-native/fcmパッケージを使用すると、実機デバッグ時に画面が真っ白で停止する

miichan
miichan

総合スコア1

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

AngularJS

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

1回答

0評価

0クリップ

528閲覧

投稿2020/08/21 02:47

前提・実現したいこと

このサイトを参考にして、FCMをつかってpush通知を実装したかったのですが
Androidの実機デバッグで、Android Studioのビルドまでエラーがなく進みました。
実機でアプリが立ち上がると、画面が真っ白のまま進みません。
Chromeのコンソールにつないでエラーを確認したところ下記のエラーが出ました。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at /home-home-module.js:186
at Module../node_modules/@ionic-native/fcm/index.js (/home-home-module.js:268)
at webpack_require (runtime.js:85)
at Module../src/app/services/push-notification/push-notification.service.ts (/home-home-module.js:564)
at webpack_require (runtime.js:85)
at Module../src/app/home/home.page.ts (/home-home-module.js:388)
at webpack_require (runtime.js:85)
at Module../src/app/home/home.module.ts (/home-home-module.js:319)
at webpack_require (runtime.js:85)
at main.js:548
at resolvePromise (polyfills.js:3846)
at resolvePromise (polyfills.js:3805)
at polyfills.js:3907
at ZoneDelegate.invokeTask (polyfills.js:3441)
at Object.onInvokeTask (vendor.js:64367)
at ZoneDelegate.invokeTask (polyfills.js:3440)
at Zone.runTask (polyfills.js:3208)
at drainMicroTaskQueue (polyfills.js:3621)

該当のソースコード

home.module.ts

TypeScript

import { IonicModule } from '@ionic/angular'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HomePage } from './home.page'; import { FCM } from '@ionic-native/fcm'; @NgModule({ imports: [ IonicModule, CommonModule, FormsModule, FCM, RouterModule.forChild([{ path: '', component: HomePage }]) ], declarations: [HomePage] }) export class HomePageModule {}

home.page.ts

TypeScript

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Globalization } from '@ionic-native/globalization/ngx'; import { LoadingController } from '@ionic/angular'; import { Storage } from '@ionic/storage'; import { Router } from '@angular/router'; import { PushNotificationService } from './../services/push-notification/push-notification.service'; import { FollowService } from '../services/follow.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'] }) export class HomePage implements OnInit { public postData: any; public locale: string; public appAccessToken: string; constructor( public http: HttpClient, public loadingContrller: LoadingController, public storage: Storage, public router: Router, public followService: FollowService, private pushNotificationService: PushNotificationService, private globalization: Globalization ) { this.locale = "ja"; this.appAccessToken = "alueoweurlwrow7hrurowurouwjlwjr"; } async ngOnInit() { this.pushNotificationService.pushRegister(); this.storage.get('isFirst') .then((t)=>{ t = 'aaaa'; console.log(t); if (t == null) { this.storage.set('isFirst', 'true'); // 端末の言語設定を取得して保存 this.globalization.getPreferredLanguage().then((res) => { // 端末の言語設定があるならばローカルに保存 if(res.value){ this.storage.set('language', res.value); } }).catch((e) => { alert(e); }) // 端末のロケール情報を取得して保存 this.globalization.getLocaleName().then((res) => { // 端末のロケール設定があるならばローカルに保存 if(res.value){ this.storage.set('locale', res.value); } }).catch((e) => { alert(e); }) this.router.navigateByUrl('/login'); } }) .catch((err)=>{ }); } async ionViewDidEnter() { const loading = await this.loadingContrller.create({ message: 'Loading...' }); await loading.present(); this.followService.postList(this.appAccessToken, this.locale) .subscribe(data => { this.postData = data['postData']; console.log(data); loading.dismiss(); }); } }

push-notification.service.ts

TypeScript

import { Injectable } from '@angular/core'; import { ToastController } from '@ionic/angular'; import { Device } from '@ionic-native/device/ngx'; import { HttpClient } from '@angular/common/http'; import { environment } from "@app/environment"; import { FCM } from '@ionic-native/fcm'; @Injectable({ providedIn: 'root' }) export class PushNotificationService { constructor( private toastController: ToastController, private device: Device, private http: HttpClient, private fcm: FCM ) {} pushRegister() { console.log('Initializing HomePage'); this.fcm.getToken().then(token => { alert(token); }); } }

push-notification.service.ts

TypeScript

{ "name": "photo-rc1", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "config": { "ionic_webpack": "./webpack.config.js" }, "private": true, "dependencies": { "@angular/common": "~8.2.11", "@angular/core": "~8.2.11", "@angular/forms": "~8.2.11", "@angular/http": "~7.2.15", "@angular/platform-browser": "~8.2.11", "@angular/platform-browser-dynamic": "~8.2.11", "@angular/router": "~8.2.11", "@capacitor-community/twitter": "^1.0.1", "@capacitor/android": "^2.2.1", "@capacitor/core": "^2.2.1", "@capacitor/ios": "^2.2.1", "@ionic-native/camera": "^5.15.1", "@ionic-native/core": "^5.15.1", "@ionic-native/device": "^5.27.0", "@ionic-native/facebook": "^5.26.0", "@ionic-native/fcm": "^4.20.0", "@ionic-native/file": "^5.23.0", "@ionic-native/globalization": "^5.27.0", "@ionic-native/google-plus": "^5.22.0-beta-1", "@ionic-native/http": "^5.27.0", "@ionic-native/in-app-browser": "^5.27.0", "@ionic-native/splash-screen": "^5.15.1", "@ionic-native/status-bar": "^5.15.1", "@ionic/angular": "^4.11.1", "@ionic/storage": "^2.2.0", "cordova-android": "^8.1.0", "cordova-ios": "^5.1.1", "cordova-plugin-advanced-http": "^3.0.0", "cordova-plugin-camera": "~4.1.0", "cordova-plugin-compat": "^1.2.0", "cordova-plugin-device": "^2.0.3", "cordova-plugin-facebook4": "^6.4.0", "cordova-plugin-fcm-with-dependecy-updated": "^7.1.1", "cordova-plugin-file": "^6.0.2", "cordova-plugin-globalization": "^1.11.0", "cordova-plugin-googleplus": "^8.5.0", "cordova-plugin-inappbrowser": "^4.0.0", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.1.2", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-sqlite-storage": "^3.4.0", "core-js": "^3.3.2", "firebase": "^7.14.4", "rxjs": "~6.5.3", "rxjs-compat": "^6.6.2", "y": "^0.3.2", "zone.js": "^0.10.2" }, "devDependencies": { "@angular-devkit/architect": "~0.803.12", "@angular-devkit/build-angular": "^0.803.12", "@angular-devkit/core": "~8.3.12", "@angular-devkit/schematics": "~8.3.12", "@angular/cli": "8.3.29", "@angular/compiler": "~8.2.11", "@angular/compiler-cli": "~8.2.11", "@angular/language-service": "~8.2.11", "@capacitor/cli": "^2.2.1", "@ionic/angular-toolkit": "^2.0.0", "@ionic/app-scripts": "^3.2.4", "@types/jasmine": "^3.4.4", "@types/jasminewd2": "^2.0.8", "@types/node": "^12.11.1", "codelyzer": "~5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.4.1", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "^2.1.0", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.2", "ts-node": "~8.4.1", "tslint": "~5.20.0", "typescript": "~3.4.3" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-camera": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "cordova-sqlite-storage": {}, "cordova-plugin-file": {}, "cordova-plugin-facebook4": { "APP_ID": "579938932630998", "APP_NAME": "kimono-plus" }, "cordova-plugin-googleplus": { "REVERSED_CLIENT_ID": "com.googleusercontent.apps.429272429043-80mt3u9n8sbajji3pg3hbevrpd5m66l3" }, "cordova-plugin-fcm-with-dependecy-updated": {} }, "platforms": [ "ios", "android" ] } }

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

AngularJS

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