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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Monaca

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

Q&A

解決済

1回答

2297閲覧

monaca デバッガーのchrome Appが起動できません。

退会済みユーザー

退会済みユーザー

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Monaca

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

0グッド

0クリップ

投稿2017/01/19 02:47

###前提・実現したいこと
monacaガイドブック「クラウドでできる HTML5ハイブリッドアプリ開発」を見ながら作成しています。
AngularJSは初挑戦で第9章「AngularJS入門」をやっています。
デバッガーについてなのですが
Android実機で起動するのは確認できていますが
chromeのデベロッパーツールでJavaScriptなどを検証したいので
chromeのアプリで実行したいです。

###発生している問題・エラーメッセージ
※monacaのマニュアル「Chrome 向け Monaca デバッガー」
https://docs.monaca.io/ja/manual/debugger/
を参考にしました。
ですが起動しません(白画面)

エラーメッセージ loader.js:1451 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". at new Function (<anonymous>) at loader.js:1451 index.html:9 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-0hPf0TaFBeDjotvJORvLiDSJMY5K7Jb3923qDA+CE5A='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback. loader.js:1442 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.0/$injector/nomod?p0=myApp at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:2526 at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15797 at ensure (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15052) at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15565 at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:29890 at forEach (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:3170) at loadModules (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:29562) at createInjector (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1443:727) at doBootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12103) at bootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12632) http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=myApp&p1=Error%3A%2…mcigdgihhdebimgcgjllioffamoh%2Fwww%2Fcomponents%2Floader.js%3A1442%3A12632) at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:2526 at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15797 at ensure (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15052) at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:15565 at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:29890 at forEach (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:3170) at loadModules (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:29562) at createInjector (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1443:727) at doBootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12103) at bootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12632) http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=myApp&p1=Error%3A%2…mcigdgihhdebimgcgjllioffamoh%2Fwww%2Fcomponents%2Floader.js%3A1442%3A12632) at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:2526 at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:30381 at forEach (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:3170) at loadModules (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:29562) at createInjector (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1443:727) at doBootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12103) at bootstrap (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:12632) at angularInit (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1442:11386) at chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1449:6394 at HTMLDocument.trigger (chrome-extension://clbnmcigdgihhdebimgcgjllioffamoh/www/components/loader.js:1447:1139) (anonymous) @ loader.js:1442 (anonymous) @ loader.js:1442 forEach @ loader.js:1442 loadModules @ loader.js:1442 createInjector @ loader.js:1443 doBootstrap @ loader.js:1442 bootstrap @ loader.js:1442 angularInit @ loader.js:1442 (anonymous) @ loader.js:1449 trigger @ loader.js:1447 eventHandler @ loader.js:1442

###該当のソースコード
サンプルソースをダウンロードしてそのまま実行しましたが同様でした。
https://ja.monaca.io/book/support/
第9章 9-2
白馬の野の花便り

###試したこと
jsファイルを外部ファイル化して実行しても
var app = ons.bootstrap("myApp", []);

indexTest.js:5 Uncaught ReferenceError: ons is not defined

と出てしまい、コンポーネントの問題かなぁというところで行き詰ってます。

###補足情報(言語/FW/ツール等のバージョンなど)
monaca クラウド のBasicプラン(無料)です

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

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

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

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

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

guest

回答1

0

ベストアンサー

詳細は分かりかねますが、まずデバッガーで動作確認ができるということは恐らくコードやコンポーネントの問題では無いと思われます。エラーメッセージの一行目にセキュリティポリシーという文字が見えます。Chromeの環境設定を変更する必要があるかもしれません。
例えばクラウドIDEではなくローカルIDEを試すことはできませんでしょうか。
chromeのデベロッパーツールでJavaScriptなどを検証、の意図が良く分からないのですが、解決できなさそうであればchromeアプリの生成を諦める方針も検討しなければならないかもしれません。

なおjsファイルを外部ファイル化した際のエラーは、onsオブジェクトが作成される前に呼び出そうとしてしまったエラーですので、今回の問題に直結はしていないと考えられます。(そのエラーを解決しても同様の問題となると思われます。)
OnsenUIの初期化順序は私もよく把握できていませんが、外部ファイル化して読み込むのであれば

var app = angular.module("myApp", ['onsen'])

と書いてみると上手くいくかもしれません。上記はangularJSでmyAppというモジュールを定義した際にOnsenUIの依存性を注入したものです。
ons.bootstrapは上記のような定義を一度に実施してくれるようなのですが、挙動が良く分からず私は使用していません。

angularJS + OnsenUIは初期化の動作が鬼門ですので基本的には動くコードの真似をする方針がお勧めです。

投稿2017/01/23 04:57

akabee

総合スコア1947

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

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

退会済みユーザー

退会済みユーザー

2017/02/07 02:14

angularJSの書き方のほう理解いたしました。 chromeのほうは単純なアプリであれば表示されるようになりましたが エラーは相変わらずでしたのでひとまず諦めました。 ですがangularJSとOnsenUIがすこしづつ理解できてきて なんとかアプリ作りも進んでいます。 ご丁寧なコメントありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問