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

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

ただいまの
回答率

90.47%

  • PHP

    20810questions

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

  • JavaScript

    16980questions

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

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4167questions

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

  • CakePHP

    2355questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

画面の要素をコピーして別画面に表示したい

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,616

k499778

score 501

以下の投稿の続きです。
【jQuery】.html()を使って自要素も含めたHTMLコンテンツの取得方法が知りたい

現在HTML,jQuery(JavaScript),PHP,cakePHP3を使ってアプリケーションを作っています。
仕様としては、画面の要素をコピーしてそれを『順番を変えて』別画面に表示する。というものです。

イメージ説明

「別画面へ」押下時
        ↓
イメージ説明

以下のコードだとその仕様を実装できるのですが、なぜか現場ではそれが実現できません。
ざっくり処理の流れとしては、
1.outerHTMLを使ってHTML文字列を取得し、
2.それをパラメータとしてPOST送信でコントローラに渡し、
3.最後にsetメソッドで別画面に順番を変えて表示しています。

そこで質問としては、結論から言うと
・なぜ現場ではできないのか知りたい。そのできない原因の可能性を推測でいいので教えていただきたい。
あるいは
・以下のコードで厳しそうなら他のやり方を教えていただきたい。
です。

画像のような動きを実現できているコードは以下です。

hoge.ctp

<ul id="hoge">
    <li class='a'>
      <div>1番目</div><input type="text" value="1番目">
      <div>1番目</div><input type="text" value="1番目">
      <div>1番目</div><input type="text" value="1番目">
    </li>
    <li class='b'><div>2番目</div><input type="text" value="2番目"></li>
    <li class='c'><div>3番目</div><input type="text" value="3番目"></li>
</ul>
<a href="javascript:document.frm1.submit()" onclick="hoge()">別画面へ</a>
  <form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/fuga" target="_blank">
    <input type="hidden" name="firstHTML" value="">
    <input type="hidden" name="secondHTML" value="">
    <input type="hidden" name="thirdHTML" value="">
  </form>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function hoge(){

  var firstHTML = $('.a')[0].outerHTML;
  var secondHTML = $('.b')[0].outerHTML;
  var thirdHTML = $('.c')[0].outerHTML;

  $("input[name='firstHTML']").val(firstHTML);
  $("input[name='secondHTML']").val(secondHTML);
  $("input[name='thirdHTML']").val(thirdHTML);

}
</script>

SampleController.php

<?php
namespace App\Controller;

use App\Controller\AppController;

class SampleController extends AppController
{

  public function hoge()
  {

  }

  public function fuga()
  {

    // 現場ではこのように確認したが、HTMLは出力されずテキスト部分のみ出力された。
    // $this->autoRender = false;
    // var_dump($this->request->data);

    $this->set('htmlData', $this->request->data);

  }
}

fuga.ctp

<ul id="hoge">
<?= $htmlData['firstHTML'] ?>
<?= $htmlData['thirdHTML'] ?>
<?= $htmlData['secondHTML'] ?>
</ul>

現場でも同じやり方をしているのですが、なぜかできません。
どのようにできないかというと、別画面にHTML文字列を渡せずに中のテキストノード(ここで言う1番目、2番目、3番目)を渡しており、それが表示されているようなのです。

実際どこでおかしくなっているか検証しました。
javascriptのouterHTMLの段階、val()でinputタグに詰めこんでいる段階では、ちゃんとHTML文字列になっていて、
PHPのdataメソッドで受け取った段階、dataメソッドの中身をvar_dump()で確かめるとテキスト部分だけになっているのです。

このコードと現場のコードで変わっているところと言えば、
現場のコードは、コピー元の要素がやたら多く、HTML文字列がやたら長いということです。

ただPOST送信なので、ある程度のデータ量にも耐えられると思いますし、文字列の多さが原因であったとしてもテキストだけになってしまう理由がわかりません。

もし何かわかる方や推測できる方がいらっしゃいましたらアドバイスいただけると幸いです。

また他のやり方で実現する方法を知っている方がいらっしゃれば教えていただきたいです。

長くなりましたがよろしくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

原因解決のヒントになれば、というレベルの投稿です・・・。

dataメソッドの中身をprin_r()で確かめる

との事で、実際にどこに出力しているかわかりませんが、
単純に、print_r()、で出力すると、HTMLタグが仮に入っていても、普通にHTMLと解釈されてしまい、タグ部分は表示されていないのではないでしょうか?

var_dumpを使うとか、print_r()出力をhtmlspecialcharsして、前後<pre>タグで囲むとか、

とりあえず、正しいデータの中身をみてみてはいかがでしょうか。


 サラッと検証してみました!

ちなみに、ほぼ、アップされているソースと同じですが、単純なPHPのみ使用なので、若干モディファイしてあります。
hoge.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="content-language" content="ja"/>
    <title>TEST</title>
    <!-- jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<ul id="hoge">
    <li class='a'>
      <div>1番目</div><input type="text" value="1番目">
      <div>1番目</div><input type="text" value="1番目">
      <div>1番目</div><input type="text" value="1番目">
    </li>
    <li class='b'><div>2番目</div><input type="text" value="2番目"></li>
    <li class='c'><div>3番目</div><input type="text" value="3番目"></li>
</ul>
<a href="javascript:document.frm1.submit()" onclick="hoge()">別画面へ</a>
  <form name="frm1" method="POST" action="fuga.php" target="_blank">
    <input type="hidden" name="firstHTML" value="">
    <input type="hidden" name="secondHTML" value="">
    <input type="hidden" name="thirdHTML" value="">
  </form>


<script>
//
function hoge(){
    //
  var firstHTML = $('.a')[0].outerHTML;
  var secondHTML = $('.b')[0].outerHTML;
  var thirdHTML = $('.c')[0].outerHTML;
    //
  $("input[name='firstHTML']").val(firstHTML);
  $("input[name='secondHTML']").val(thirdHTML);
  $("input[name='thirdHTML']").val(secondHTML);
    //
}

</script>

</body>
</html>

fuga.php

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="content-language" content="ja"/>
    <title>FUGA</title>
    <!-- jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<ul id="hoge">
<?php
echo $_POST['firstHTML'];
echo $_POST['secondHTML'];
echo $_POST['thirdHTML'];
 ?>
</ul>

</body>
</html>

これで、問題なく動作してますね、、、

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/09 05:16

    回答ありがとうございます。
    そうですね。タグ部分は表示されてはいませんが、HTML要素が取れていることは確認できていたのでこのようなやり方をとっていました。

    現場では、HTML自体出力されなかったので。
    またdataメソッドの中身をビューに表示するということも致しました。
    しかし、テキスト部分が表示されるだけで、HTMLが表示されませんでした。
    現場ではここまで検証しています。

    ただもう少しわかりやすくするために少し投稿に追記します。

    アドバイスありがとうございます。

    キャンセル

  • 2016/04/09 14:01

    返答ありがとうございます。
    家に帰ってから試してみてまた回答させていただきます。
    ご丁寧な対応感謝です。

    キャンセル

  • 2016/04/09 14:07 編集

    なるほど。今さらっと見ただけですが、コントローラクラスを使わずに実装しているということでしょうか?

    確かにコントローラクラスを経由しておかしくなっているので、そのやり方だといける可能性も見えてきます。

    実際現場ではcakephp3を使っていて、他のctpファイルに遷移するためにはコントローラクラスのアクションを経由しないといけないと思っていたのですが、ctpからctpに直接値を渡すことはできるのでしょうか?

    お忙しいとは思いますが、お答えいただけたら嬉しいです。

    キャンセル

  • 2016/04/09 14:31

    実際に試してみて、動きとしては問題なく、動きました。
    ただ上記の懸念点が残ります。

    キャンセル

  • 2016/04/09 14:47

    すいません、私、あまりcakeには詳しくなく(というかcake使うとブラックボックスが多くなるため、私は実務では使いませんので・・・)、正直分かりかねるというところです。

    キャンセル

  • 2016/04/09 14:57

    そうなんですね。
    ただ丁寧に対応いただき感謝しています。
    ありがとうございます。

    キャンセル

+2

cake側でstrip_tagsしているとは考えにくいんですけどね・・・
$_POSTをvar_dumpしてみたらどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/10 01:16 編集

    回答ありがとうございます。

    自分のコードの$htmlData['firstHTML'] や$_POST['firstHTML'];をvar_dump()すると

    ---
    string(208) "
    1番目

    (テキストボックス)1番目
    1番目

    (テキストボックス)1番目
    1番目

    (テキストボックス)1番目

    ---

    と表示されます。

    ただうまくいっていない現場では、
    fuga.ctpファイル(仮)の該当箇所をvar_dump()すると
    文字列だけ、ここで言う
    ---
    1番目

    1番目

    1番目
    ---

    のような表示のされ方をしていました。

    キャンセル

  • 2016/04/10 02:49

    もしおわかりであれば教えていただきたいのですが、
    このPOST送信でhtmlコンテンツを飛ばすやり方以外に
    この仕様を実現できるいい方法はないでしょうか?
    ある程度の推測や考え方、キーワードだけでもいいのでアドバイスいただけると幸いです。
    いろいろ聞いてしまい、申し訳ありません。

    キャンセル

0

現場で実際にここにあげているソースをまんま適応してみました。
現場のcakePHP3にここの3つのファイルを作成し、実行すると
うまくいきませんでした。

HTMLコンテンツがテキスト部分に変わるという現象が起きました。

差分といえば、namespaceくらいです。
何かここで現場特有の処理、たとえばurl内にタグがあればタグ落ちさせるといったこと。があるのでしょうか。
現状はわかったんですが、解決策は未だ謎に包まれたままです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • PHP

    20810questions

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

  • JavaScript

    16980questions

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

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4167questions

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

  • CakePHP

    2355questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。