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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Monaca

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

Q&A

解決済

4回答

6681閲覧

monacaアプリからローカルサーバーに飛ぶ際に、「monacaアプリの変数の値」をローカルサーバーに渡したい。

t33

総合スコア33

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Monaca

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

0グッド

1クリップ

投稿2016/11/17 14:21

編集2016/11/20 16:51

【質問内容】
表題の件を達成したかったのですが調査を進めた結果、変数そのものを渡すことは出来ないということが分かりました。
そこで代替案として「Ajaxを使用してPOSTで値を渡したい」のですがうまくいきません。
初心者で大変申し訳ありませんがご教授頂けないでしょうか。
よろしくお願い致します。

・ローカルサーバーはXAMPPを使用しています。
・コンソールに「Ajax_success」と出るのでAjaxは動いているのではないかと思います。。
・InAppBrowserでWebページに飛びます(APIを想定してはいません)←修正依頼を対応しました。


【monacaアプリのindex.html】

javascript

1$.ajax({ 2 type: "POST", 3 url: 'http://192.157.13.5/testajax.php', 4 data: { 5 'test': 2 6 }, 7 success: function(j_data){ 8 console.log("Ajax_success!!");//成功していたらコンソールに文字列を表示する 9 } 10}); 11//ページ遷移 12var ref = cordova.InAppBrowser.open('http://192.157.13.5/testajax.php');//ローカルサーバーのtestajax.phpに飛ぶ

【ローカルサーバーのtestajax.php】

PHP

1$data = $_POST['test']; 2echo $data;

【エラー内容】

Notice: Undefined index:test

【まとめ】
「Ajaxを使用してPOSTで値を渡す」ことは「InAppBrowser」を使用する場合出来ないということが分かりました。
そこで他の方法として「GETで値を渡す」方法を試したところうまくいきました。

【monacaアプリのindex.html】
2次元配列を「GET」で渡して「ローカルサーバー」に飛ぶ処理

javascript

1//2次元配列の作成 2var sendData = new Array(); 3sendData[0] = new Array(); 4sendData[1] = new Array(); 5sendData[2] = new Array(); 6 7//2次元配列にテストデータを入れる 8sendData[0][0] = "key0"; 9sendData[1][0] = "key1"; 10sendData[2][0] = "key2"; 11 12sendData[0][1] = "a"; 13sendData[1][1] = "b"; 14sendData[2][1] = "c"; 15 16//console.log("what is sendData:"+sendData); 17 18//配列をJSONオブジェクト化 19var json_obj = JSON.stringify(sendData); 20//console.log("what is json_obj"+json_obj); 21 22//ページ遷移 23cordova.InAppBrowser.open( 'http://192.157.13.5/testajax.php?data=' + encodeURIComponent( json_obj ),'clearcache=yes','clearsessioncache=yes' );//ローカルサーバーのtestajax.phpにGETで配列の情報を付けて飛ぶ 24

【ローカルサーバーのtestajax.php】
GETで受け取ったURIからデータを取得し配列に入れる処理。(渡したい値を再設定する処理)
「decodeURIComponent」してから「JSON.parse」で配列にしています。

javascript

1<script type="text/javascript" charset="UTF-8"> 2 3var decode_obj =""; 4//2次元配列の作成 5var getData = new Array(); 6getData[0] = new Array(); 7getData[1] = new Array(); 8getData[2] = new Array(); 9 10 11 12if (1 < window.location.search.length) { 13 // 最初の6文字 (?data=) を除いた文字列を取得する 14 //monaca index.htmlのencodeURIComponent( json_obj ) と queryが同一文字列となる 15 16 var query = window.location.search.substring(6);//JSONオブジェクト化した2次元配列をエンコードしたものと同じもの 17 //document.write("what is query:"+query+"<br>"); 18 19 decode_obj = decodeURIComponent( query );//JSONオブジェクト化した2次元配列 20 //document.write("what is decode_obj:"+decode_obj+"<br>"); 21 22 getData = JSON.parse( decode_obj );//2次元配列 23 //document.write("what is getData:"+getData+"<br>"); 24} 25</script> 26 27

【追記2】
XAMPPを使った環境の場合、GETメソッドで大量にデータを送信するとエラーが出て送信できないことがあります。
これは「LimitRequestLine」をいじることで回避できます。
LimitRequestLineについて
試しに「LimitRequestLine」の値を100000にしてみましたが、問題なく動作しました。
(あまり値が大きくなりすぎるとセキュリティ的によくないと思いますので、許容できる範囲がいいのではないかと思います。)

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

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

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

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

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

fromageblanc

2016/11/18 09:06

http://192.157.13.5/testajax.php がウェブページなのか、APIなのかどちらを想定しているかを明記したほうがよいですよ。ちなみにInAppBrowser.openはブラウザですのでWebページが開くだけです。
t33

2016/11/18 09:49

ご指摘ありがとうございます。修正致しました。
kei344

2016/11/20 16:54

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
t33

2016/11/21 15:39

気付きませんでした。ありがとうございます。「解決済」に致します。
guest

回答4

0

ベストアンサー

Cordova は触った事も無いですがパラメータは ref.executeScript で後から渡せるようです。

【Cordova 子Windowにパラメータを渡す - 調べたことメモ】
http://xshima2.blog.fc2.com/blog-entry-118.html

【Monacaドキュメント | Monaca】
http://docs.s.monaca.mobi/3.5/ja/reference/phonegap_3.5/ja/inappbrowser/#executescript

ref.executeScript(details, callback);

【Inappbrowser - Apache Cordova】
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/#inappbrowserexecutescript


PHP側はPOSTで受け取るわけではないので構造を考え直す(JavaScript主体でデータのやり取りをすることになる)必要がありますが、とりあえず現在の状況でエラーが出ているのを解消するには下記のように記述することになると思われます。

PHP

1if ( isset( $_POST['test'] ) ) { 2 $data = $_POST[ 'test' ]; 3 echo htmlspecialchars( $data, ENT_QUOTES, 'UTF-8' ); 4}

追記:

JavaScript

1$.ajax({ 2 type: "POST", 3 url: 'http://192.157.13.5/testajax.php', 4 data: { 5 'test': 2 6 }, 7 success: function(j_data){ 8 console.log("Ajax_success!!");//成功していたらコンソールに文字列を表示する 9 } 10}); 11// ↑ これと ↓ これは違うページが返ってきますよ。上はPOSTを受け取った結果が、下はPOSTを受け取らなかったページが帰ってきます。 12cordova.InAppBrowser.open('http://192.157.13.5/testajax.php');

投稿2016/11/17 17:13

編集2016/11/17 18:38
kei344

総合スコア69366

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

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

t33

2016/11/17 19:14 編集

ご教授ありがとうございます。 PHP側のエラーに関しては、お教え頂いた内容で回避することが出来ました。 又、Cordovaの情報を拝見したのですが、自分の理解が追いつかなかった為しっかり見たいと思います。 POSTがうまくいかない場合はCordovaでパラメータを渡すようにしたいのですが、あまり自信がありません。 頑張って挑戦してみたいと思いますが、もしうまくいかなかった場合は再度ご教授頂けるとうれしいです。 あつかましい話で大変恐縮ではございますが、何卒よろしくお願い致します。
kei344

2016/11/17 19:52

あぁ、やはり伝わらなかったようですね・・・。 「POSTしてページを開く」がしたいのだと思います。 ・それを Ajax でPOSTを投げる ・cordova.InAppBrowser.open ページを開いたらさっきのPOSTが投げられた状態で開く と思っていませんか? 上記のような動作にはなりません。 PHPは呼び出されたものに値を返したら終了します。2回呼んでも1回ずつ値を返して1回ずつ終了します。 cordova.InAppBrowser.open はPOSTして開くということがそもそも出来ないようです。そのため、ref.executeScript で開いているページにスクリプトを挿入することでページを操作する方法を提示しました。 --- 別の方法としては、GETで値を渡す方法です。 var json_obj = JSON.stringify( [ 'a', 'b', 'c', 'd' ] ); cordova.InAppBrowser.open( 'http://192.157.13.5/testajax.php?data=' + encodeURIComponent( json_obj ) ); 受け取る方法↓ 【JavaScriptでGETの値を取得する方法】 http://so-zou.jp/web-app/tech/programming/javascript/sample/get.htm decodeURIComponent した 値を JSON.parse() します。
t33

2016/11/18 09:43 編集

現在お教え頂きました「GETで値を渡す方法」を試しております。 GETで値を渡すことは出来たのですが、「受け取る方法」がどうしても分かりませんでした。 「decodeURIComponent した 値を JSON.parse() します。」について具体的な方法を大変お手数ではございますが教えて頂けないでしょうか。 連想配列で渡したかったので渡すデータが少し変わっています。 var sendData = {}; sendData.test0 = "0"; sendData.test1 = "1"; sendData.test2 = "2"; var json_obj = JSON.stringify(sendData); cordova.InAppBrowser.open( 'http://192.157.13.5/testajax.php?data=' + encodeURIComponent( json_obj ),'clearcache=yes','clearsessioncache=yes' );
kei344

2016/11/18 18:49

前回のコメントでURLを提示しました。それを御覧になった上で質問しているのであれば、説明しようがありません。
t33

2016/11/19 18:24

kei344さんのおかげで無事解決出来ました。本当にありがとうございました! 初めはお教え頂いた内容が全く分からなかったのですが、1つ1つ丁寧に調べていくことで解決出来ました。追ってまとめたいと思います。
guest

0

エラーが出るのは

javascript

1var ref = cordova.InAppBrowser.open('http://192.157.13.5/testajax.php');

この行で出ているのでは?


Notice: Undefined index:test

このエラーを返すのは、

php

1$data = $_POST['test'];

の行です。
なので、$.ajax でアクセスされていることは間違いない。

Notice: Undefined index:test

は、POSTでアクセスしていないか、POSTでアクセスされていても、$_POST['test'] が渡されていないかどちらかです。

InAppBrowser プラグイン
http://s.docs.monaca.io/ja/reference/cordova_5.2/inappbrowser/

window.open のようにURLをオープンする機能なのですから、openが実行された時、特に何も設定していない限り、GETでのアクセスになるはず。だから、ここでエラーになっているはずという見立て。


index.php

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 $.ajax({ 12 type: "POST", 13 url: './testajax.php', 14 cache: false, 15 data: { 16 'test': 2 17 }, 18 success: function (data) { 19 console.log(data); 20 } 21 }); 22 }); 23 </script> 24 </body> 25</html>

testajax.php

php

1<?php 2 3$test = filter_input(INPUT_POST, 'test'); 4echo $test;

上記ソースコードの実行結果 こちらの環境では 2 となります。

イメージ説明

投稿2016/11/17 14:59

編集2016/11/17 17:17
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

t33

2016/11/17 15:03

誤っていたら申し訳ないのですがエラーはご指摘の箇所は出ていないと思います。 試しに「ローカルサーバーのtestajax.php」を echo "test"; としたところエラーが表示されず、testと表示されました。
退会済みユーザー

退会済みユーザー

2016/11/17 15:05

> 誤っていたら申し訳ないのですがエラーはご指摘の箇所は出ていないと思います。 根拠は? 例えば、 // var ref = cordova.InAppBrowser.open('http://192.157.13.5/testajax.php'); こんな風にしてもエラーが表示されるとかいうならわかりますが。
t33

2016/11/17 15:32 編集

すみません、単純に僕の認識違いだと思われます。 分かりやすい説明ありがとうございます!
退会済みユーザー

退会済みユーザー

2016/11/17 15:37

デバッグをうまくやるには、事実と推測を混同しないことです。 思い込みは役に立ちませんよ。
t33

2016/11/17 15:43 編集

いい経験になりましたありがとうございます。 初心者で解決方法が全く検討もつきません。。 お聞きしてばかりで大変申し訳ないのですが こういった場合、どのようなアプローチがあるのでしょうか。 ヒントだけでも頂けるとうれしいです。
退会済みユーザー

退会済みユーザー

2016/11/17 15:44

どこでエラーが発生しているのかをつき止めること。 javascript なら、行の先頭に // を記述すればコメントになってコードは実行されないのだから、 // var ref = cordova.InAppBrowser.open('http://192.157.13.5/testajax.php'); こうすれば、この行は実行されなくなります。 色々とコメントの場所を変えて、実行結果がどう変わるのかを比べてみれば、ここが悪さしているんだなとわかります。
t33

2016/11/17 17:12 編集

$.ajax({ type: "POST", url: 'http://192.157.13.5/testajax.php', cache: false, data: { 'test': 2 }, success: function(data){ console.log(data); } }); ご指摘部分を削除してみたのですが、monacaのデバックコンソールにtestと表示されました。
退会済みユーザー

退会済みユーザー

2016/11/17 16:02

時間はかかるけど、「すべてのソースコードについて説明できるように」を普段から意識しておくと身につきやすいかと思いますよ。そのためにはリファレンスを読まなくてはいけませんし、試行錯誤が必要になると思います。 「よくわからないけど、動いたのでOK」という意識だと、詰んでしまいます。
t33

2016/11/17 16:21 編集

時間がかかるとは思いますが精進致します。。 // var ref = cordova.InAppBrowser.open('http://192.157.13.5/testajax.php'); この部分がダメということは分かったのですが、その後どうすればよいのか検討がつきません。
退会済みユーザー

退会済みユーザー

2016/11/17 16:23

それを聞かれても困りますね・・・ どんなんプログラムを作りたいのかって話なので、$.ajaxをなんのために書いたのかという話ですから。
t33

2016/11/17 16:31

monacaアプリからローカルサーバーに飛ぶ際に、Ajaxを使用してPOSTで値を渡したいのですが。。
t33

2016/11/17 17:13 編集

$.ajax({ type: "POST", url: 'http://192.157.13.5/testajax.php', cache: false, data: { 'test': 2 }, success: function(data){ console.log(data); } }); としたときにデバックコンソールに「test」と表示されてしまいます。 自分なりに色々調べてみたのですがなぜ「2」と表示されないのか分かりません。 お聞きしてばかりで申し訳ないのですがご教授頂けないでしょうか。
t33

2016/11/17 18:18 編集

Kosuke_Shibuyaさんの環境で試して頂いたこと感謝の気持ちで一杯です。ありがとうございます。 お教え頂きましたスクリプトをコピーして試してみたところ2つ変化が起こりました。 ①monacaデバックコンソールに「test」⇒「2」と正しく表示されました。 ②Notice: Undefined index:testというエラーが表示されなくなりました。(ただtestajax.phpにて「2」という表示はされないで何も表示されませんでした。) しかしながらtestajax.phpで2と表示する為に自分なりに調べてみたのですが、解決方法が分かりませんでした。。
退会済みユーザー

退会済みユーザー

2016/11/17 18:24

いろんなケースを考えてみたけど、test と表示されるようなケースは思いつきません。さすがに目の前でそれを確認しない限り、原因の特定は困難だと思います。
t33

2016/11/17 18:40 編集

なるほど、レアケースなのですね。。 原因特定は困難だとしても教えて頂いた方法でデバックコンソールに「2」と表示できたので一歩前進出来ました。 後はPOST出来れば目的が達成出来るのですが・・・なんともな状況です。
guest

0

cache:falseを加えてみてはどうでしょうか?
$.ajax({
cache: false,

投稿2016/11/17 14:30

kaji

総合スコア648

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

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

t33

2016/11/17 14:39 編集

$.ajax({ type: "POST", url: 'http://192.157.13.5/testajax.php', cache: false, data: { 'test': 2 }, success: function(data){ console.log(data); } }); としたのですが同様のエラーが出てしまいます。。
kaji

2016/11/17 14:55

ajaxは成功してるけど、 ページ遷移の部分でエラーが出てるのではないでしょうか? ページ遷移の部分が必要なのかわかりませんが消してみてはどうでしょうか?
t33

2016/11/17 15:16

ページ遷移の部分は必要なんです。。 今回はローカルサーバーでテストしているのですが、本当は外部サーバーにPOSTをしたいと考えています。
kaji

2016/11/17 15:22

ajaxとページ遷移によるリダイレクトで2回httpアクセスが発生してることは把握されていますか? ajaxによるhttpアクセスではエラーは出てませんが、 リダイレクトによるhttpアクセスでエラーが出ていると思われます。
t33

2016/11/17 15:35 編集

なるほど、そんなことが起こっているとは。。 全く把握しておりませんでした。 ごめんなさい、初心者で解決方法が全く思いつきません。。 こういった場合どのような解決方法があるかヒントだけでもいいのでお教え頂けないでしょうか。
kaji

2016/11/17 15:39

上に書いた通り、最後の ページ遷移の一行を消してみれば良いと思います。
t33

2016/11/17 16:04 編集

お教え頂いた通り削除したら、monacaコンソールに「test」と表示されました
t33

2016/11/17 18:43

Kosuke_Shibuyaさんに教えて頂いた方法を試したところ2と表示されました。 後はPOST出来ればなのですが。
kaji

2016/11/18 00:54

postはできてますよ。 \xampp\apache\logs\phperror.log あたりにPOSTのログが残ってませんか?
t33

2016/11/18 05:39

ごめんなさい少し字足らずでした。 POSTは出来ているとして、ローカルサーバーでPOSTの値を受け取ることが出来ていません。。 phperror.logがなかったので「error.log」を見たのですがそれっぽいログがありませんでした。(間違っていたらすみません) 関係ないかもしれませんが「access.log」を見たところ"POST /testajax.php HTTP/1.1" 200 8 "のような記述がありました。
kaji

2016/11/18 05:53

errorでなくaccess.logですね。失礼しました。 POSTの値について 2をmonacaで送信してサーバで受け取り、再度サーバからmonacaへ送って monacaで2を確認できているわけですよね? POSTの値をサーバで保存したいとかいう意味ですか?
t33

2016/11/18 06:26 編集

POSTの値をサーバーで使用したいのですが、POSTが受け取れない状況で困っていました。 お教え頂いた情報から結論を申し上げますとPOSTは出来ますが、POSTの値をサーバーで受け取れないという事実が分かりました。(cordova.InAppBrowser.openではPOSTを受け取れないとのことです) POSTは諦めて、現在はkei344さんにご教授頂いている方法を試している状態です。
kaji

2016/11/18 08:54

kei344さんの"cordova.InAppBrowser.open ページを開いたらさっきのPOSTが投げられた状態で開くと思っていませんか?"の部分が理解できてないのかもしれません。 サーバサイドはアプリと違って値を保持してくれません。 $_POSTに入れた値が2回目アクセスしたときに空になっているだけで、 ajaxでアクセスした1回目には値は入ってます。 何がやりたいかにもよりますがkei344さんが言われているとおりajaxをわざわざ使わずに GETだけでやりたいことが実現できるような気がします。
t33

2016/11/19 19:40

GETで無事実現出来ました。本当にありがとうございました!
guest

0

successをこうすれば2が返ってきてることがわかると思いますが

success: function(data){ console.log(data); }

投稿2016/11/17 14:26

yambejp

総合スコア114585

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

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

t33

2016/11/17 14:32

2と表示されるのですが、testajax.php内で同様のエラーが出てしまいます。。
t33

2016/11/17 17:17 編集

恐らくですがキャッシュが読込まれた為2と表示されたのですが、キャッシュを読込まないように設定したらtestと表示します。なぜ2と表示されないのかが分かりません。。
t33

2016/11/17 18:42

Kosuke_Shibuyaさんに教えて頂いた方法を試したところ2と表示されました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問