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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

281閲覧

HTML・JavaScriptにおけるイベント受渡し

on10_10ykhcarol

総合スコア8

Cordova

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2017/11/08 21:34

HTML・JavaScriptを使用してモバイルアプリ開発を最近始めました。開発環境はmonacaクラウドを使用しています。 関連書籍を購入し参照しながら、アプリ開発をしていますが、想定通りの結果を得られない箇所があり、対処方法を確認したく質問しました。

<問題点1>
下記記載したコーディングの通りデバックを行うと、「下記記載した④page2.html」というページに遷移した際にオブジェクトとして用意していたものが誤表示されてしまいます。具体的には①app.jsで定義した取得した変数の文字が表示されてしまいます。

<問題点2>
「スキャン開始」というページに遷移した際にどのボタンを押しても次の処理に進まない

<①app.js>
"use strict";
var loadingDialog = null;
ons.ready(function() {
ons.createAlertDialog('loading.html').then(function(alert) {
loadingDialog = alert;
});
});
module.factory('Product', function() {
var Product = function(params) {
XXXXXXXXXXXXX ←URLから取得した情報を変数に格納
};
return Product;
});

module.controller('AppController', function($scope, Product, $http) {
$scope.scan = function() {
(省略)
});

<②index.html>

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap(); ons.disableAutoStatusBarFill(); $(document).on('pageinit', '#page1',function(){ (省略) }); $(document).on('pageinit', '#page2',function(){ (省略) }); </script> </head> <body> <ons-navigator var="myNavigator" page="page1.html"> </ons-navigator> </body> </html>

<③page1.html>
<ons-page id="page1">
<ons-toolbar>

<div class="center">XXXXX</div> </ons-toolbar> <div style="text-align: center"> <br> <ons-button onclick="myNavigator.pushPage('page2.html')"> XXXXX </ons-button> </div> </ons-page>

<④page2.html>

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> var module = ons.bootstrap(); ons.disableAutoStatusBarFill(); </script> <script src="app.js"></script> </head> <body ng-controller="AppController"> <ons-page id="page2"> <ons-tabbar> <ons-tab page="scanner.html" active="true" icon="fa-barcode" no-reload></ons-tab> </ons-tabbar> <ons-template id="scanner.html"> <ons-navigator var="navi"> <ons-page> <ons-toolbar> <div class="center">XXXXX</div> </ons-toolbar> <div class="scanner-wrapper"> <p class="scanner-label">XXXX</p> <div class="scanner-eye-catch"> <ons-icon icon="fa-barcode" size="100px"></ons-icon> </div> <ons-button class="scanner-button" modifier="large--cta" ng-click="scan()">XXXX</ons-button> </div> </ons-page> </ons-navigator> </ons-template>

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

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

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

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

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

yuki-saito

2017/11/08 23:29

ソースコードは```で囲ってください。編集する時に<code>というボタンがあるかと思います。それを押してもらえれば分かります!
guest

回答1

0

ベストアンサー

この質問だけだと色々分からないこともあるのですが
とりあえずpage2.html<!DOCTYPE>html headなどから書く必要はないかと思います。

<問題点1>
具体的には①app.jsで定義した取得した変数の文字が表示されてしまいます。

どういう文字がpage2.htmlのどこに出るのか分かりませんが
とりあえず冒頭の指摘から直していけば進んでいくとは思います。
キャプチャなども付けると分かりやすいかと思います。

<問題点2>
「スキャン開始」というページに遷移した際にどのボタンを押しても次の処理に進まない

これは恐らくons-buttonng-clickでscan functionを実行してしまっているからではないでしょうか。

指定するならば ng-click="scan"となります。

投稿2017/11/08 23:43

yuki-saito

総合スコア928

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問