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

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

ただいまの
回答率

90.34%

  • PHP

    21325questions

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

  • HTML

    9562questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6194questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ページ内にボタンが設置されているが、サーバー内にはそのコードが見当たらない場合の見つけ方について

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 323

bah91929

score 8

いつもお世話になっております。

スマホ版 https://gameoukoku.jp/lp1/a.html

のページ下部に「個人情報 へすすむ >」という青いボタンを設置しています。

HTMLを見ると、<button class="mfp_next ui-btn ui-shadow ui-corner-all">個人情報 へすすむ ></button>
と出ていますが、エックスサーバー(ファイル a.html)内ではそのコードが確認出来ません。
メールフォームプロというシステムを入れていますが、どこにそのコード部分があるのでしょうか?
教えていただけますと幸いです。

イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+6

「メールフォームプロ」なるものが、どんなシステムなのか知らないのですが。。。

そのボタンは、下記のjavascript内で、動的に生成しているものかと思われます。

<script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>

質問の書き方の話ですが、
見て欲しいコード(htmlも)は、スクショではなく、きちんと文字列で掲載した方が良いですよ!


【追記】

どうやって気づいたか、について・・・

WEBサイトのページで、表示されているHTMLのコードを確認する2つの方法の「差」を
覚えておくと便利です。

①ブラウザの開発ツールを使って、確認
②見ているページで、「右クリック」⇒「ソースを表示」で確認(だいたい別タブとかで開きます)

この2つを比較すると、ソースが異なっていることがあります。
それは、
①は、
ページを開いてから、クライアント側(ブラウザ内)で行われた処理も含めて、ほぼリアルタイムでソースとして表示される
のに対し、
②は、
ページを開いた直後の最初のソースしか表示しない
からです。

今回の場合で言えば、
①には、該当ボタンのソースがありますが、 ②では、見つかりません。
つまり、
「ページを開いた後に、クライアント側(ブラウザ内)で行われた処理によって、このボタンが生成された」
という判断ができます。

クライアント側(ブラウザ内)で、HTMLを変更できるような処理といえば、だいたいjavascriptです。
あとは、どこに記述されたjavascriptで、この処理がおこなわれているのか、を見つけられれば良いわけです。

逆に、①にも②にも該当ボタンのソースが記述されていれば、「ボタンはサーバー側で生成されてブラウザに表示された」ということになりますので、htmlファイルの該当ボタンのコードが「あるべき近辺」に、別ファイルを読み込むような記述があるとか、プログラムコードが直接記述されているとか。。「何か」が絶対にある筈なのです。


ここからは、今回どんな感じで探していったか、という細かい話。。。

javascriptが犯人っぽいので、htmlファイルの中から、<scrip>タグを探します。

<head>内に2か所

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 


<body>の後ろの方に1か所

<script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>

<head>内で読み込んでいるjquery-1.10.2.min.jsは、jqueryを使う為のベースとなるファイルです。
jquery.mobile-1.4.0.min.jsは、名前からjqueryの拡張ライブラリだと分かります。
これらは、「メールフォームプロ用」のファイルではありませんし、これではないだろうな、と判断できます。

残るは、<body>の後ろの方で読み込まれているmailformpro/mailformpro.cgiです。
名前からして、「メールフォームプロ」のファイルっぽいですね!

一応、中身も見てみたりします。

javascriptで、htmlのパーツを操作する場合、class属性やid属性の値を用いて行うことが多いのですが、特にシステムとして提供されているものは、ある程度分かりやすく「それっぽいid」「それっぽいclass」になっていることが多いです。

<form>タグには、それっぽい id="mailformpro" があります。

そして、質問対象となっている htmlには見当たらない、「ボタン」も

<button class="mfp_next ui-btn ui-shadow ui-corner-all">個人情報 へすすむ ></button>


それっぽいクラス mfp_next が居ます。

あとは、mailformpro/mailformpro.cgiの中で、mfp_nextを検索してみたりして、
javascriptをある程度読むことができるのであれば、「ボタンを作る処理」があるのが分かります。
(これには、プログラムというものに対する「慣れ」のようなものも、必要かもしれないですが...^^;)

ということで、今回の回答に辿り着いたのでした。。。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/25 13:40

    早速のご回答ありがとうございます。
    コードを文字列で記入しようとすると、文字数制限に引っかかってしまいました。
    こちらの質問が初心者で申し訳ございません。
    <script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>
    で動的に生成との事ありがとうございます。
    こちら、どのようにして上記コードがボタンを生成しているとお気づきになられましたでしょうか?
    教えていただけますと幸いです。

    キャンセル

  • 2018/07/25 15:35

    文字数制限でしたか・・なるほど。削るにもどこを削っていいかわからない場合もありますよね^^;

    どうやって見つけたか、は回答に追記しました!

    キャンセル

  • 2018/07/26 09:04

    非常に分かりやすい回答ありがとうございます!
    今回の案件だけでなく、今後にもつながる学びとなりました。
    なお、mailformpro/mailformpro.cgiの中には<button class="mfp_next ui-btn ui-shadow ui-corner-all">個人情報 へすすむ ></button>に該当しそうなものを見つけることができませんでした。

    キャンセル

+2

<div class="mfp_phase" summary="個人情報">~</div>で囲まれた部分が「個人情報」
<div class="mfp_phase" summary="買取希望商品入力">~</div>で囲まれた部分が「買取希望商品入力」
として○○へすすむ、○○へもどるの項目部分になります。

この機能を使うにはconfig.cgiの
段階的入力機能(phase.js)の行が有効化されている必要があります。
先頭の#が無い状態が有効です。
SYNCK GRAPHICA_メールフォームプロ_段階的入力機能

アドオンフォルダのphase.jsで仕組みが、
コンフィグフォルダのlang.ja.jsで「へすすむ」「へもどる」が定義されています。

何をしたいかによりますが、わからない部分は基本的にいじらない方が良いです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/26 12:11

    dit.様
    ご回答誠にありがとうございます。
    コンフィグフォルダのlang.ja.jsで「へすすむ」「へもどる」が定義されています。
    →確かにございました!
    'ButtonNext': '$1 へすすむ &gt;',
    とあり、なぜ$1で「個人情報」などのsummaryが取得できるのか、または取得するための記述がどこにあるのかは分かっておりません。
    →また、こちらどのようにして、この中に「へすすむ」「へもどる」が定義されているとお気づきになられたのでしょうか?
    ご多忙のところ大変恐縮ですが、ご回答くださいますと幸いでございます。

    キャンセル

  • 2018/07/26 14:46

    元々何度かメールフォームプロを使用したことがあり、「段階的入力」で「○○へすすむ(もどる)」という機能が実装できることを知っていました。
    ver4.2.3のファイルが残っていたので中身を確認しました。

    config.cgiで機能のON/OFFができるので、add-onsフォルダのphase.jsが実装部分だということがわかります。
    このphase.jsの中でてっとり早く「summary」を検索し、前後の記述を確認。
    summaryを取得してボタン(というかli)を生成しているようでしたが、「へもどる」「へすすむ」の言葉は使われていません。

    メールフォームプロで言語設定ができることも経験から知っていたため、直接JSに日本語を書かずにどこかで書き換えているな と考えました。

    メールフォームプロをダウンロードした時の説明PDFに「言語設定について」の説明があります。
    configフォルダのlang.ja.cgiとlang.ja.jsが言語設定ファイルだとわかりました。
    とりあえず両方見てみたら、.jsの方に「へすすむ」「へもどる」があった という感じです。
    きちんと確認してませんが、おそらくモジュール用(.cgi)とアドオン用(.js)です。

    ちなみに、'Phase': 'Step.$1',でsummaryが無かった場合のStep.1、2…
    'PhaseConfirm': '確認画面',で最終の確認画面の言葉を設定しているようです。

    なぜ$1で「個人情報」などのsummaryが取得できるのか という問いには、phase.jsでそう記述されているから と答えておきます。

    キャンセル

  • 2018/07/26 16:15

    丁寧で分かりやすいご回答ありがとうございます。
    当方のphase.jsを確認したところ、summaryの記述が見つかり、$1の表記も見つかりました。
    謎が解けてスッキリしました。
    ありがとうございました1

    キャンセル

0

非常に分かりやすい回答ありがとうございます!
今回の案件だけでなく、今後にもつながる学びとなりました。
なお、mailformpro/mailformpro.cgiの中には<button class="mfp_next ui-btn ui-shadow ui-corner-all">個人情報 へすすむ ></button>に該当しそうなものを見つけることができませんでした。
イメージ説明
require './config.cgi';
require './librarys/core.cgi';
require "./configs/$config{'lang'}.cgi";
の該当cgiも見たんですが…
こんなことってありますでしょうか?笑
//////////////////////////////////////
mix-peach様
イメージ説明

残りの「へすすむ>」は、「lang.ja.js」ファイルの「'ButtonNext': '$1 へすすむ &gt;',」かと存じます。
$1でsummary属性の値?(個人情報など)を取得していると思われますが、summary属性の値?を$1で取得するという記述が他にあるという事でよろしいでしょうか?笑

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/26 09:55

    ファイルの拡張子が、cgiなので、プログラム言語でjavascript処理部分を動的に作成しているのでしょうね。ファイルの先頭をみる限り、perl かな・・?(申し訳ないですがperlは詳しくないのです・・)

    ただ、ファイル名から判断するに、
    config.cgi は基本設定
    core.cgi はメインの処理
    configs/$config{'lang'}.cgi  は言語関連の設定
    とかが入っているのかな、と推察します。多言語化対応するためのものに見えますが、詳しくはシステム提供元に問い合わせるのが早いですねw

    プログラム言語で書かれたファイルは、サーバー側でそのプログラムの処理が行われた結果が、webブラウザ上に表示されますので、実際のファイルの中身とブラウザで該当のURLにアクセスした場合に表示されるものとで、中身がまるっと違うのはよくある話です。
    サーバーのmailformpro/mailformpro.cgiのファイルには全く書かれていませんが、ブラウザでそのURLを開くと、javascriptの処理が記述されており、その中にはボタンを作っている処理が含まれていますよ。(1888行目あたり)

    ところでボタンの該当部分を探し当てて、何かを変えたかったのですか??

    キャンセル

  • 2018/07/26 10:25

    ご返信ありがとうございます。
    「個人情報へすすむ>」というボタンがあり、個人情報へすすむ>というテキストが書かれているのに、そのテキストがサーバー内で見つからないのが気持ち悪くて^^;
    jsで動的に処理されているのではというお話はmix-peach様のお言葉で理解できましたが、「個人情報へすすむ>」という文言がどこかのファイルにあるはずだと思いまして。

    キャンセル

  • 2018/07/26 11:25

    なるほどw 「見つからなくて気持ち悪い」という気分は分かりますw

    では、もうちょっと細かいお話です。(きちんと処理を追ってみたわけではないので、ざっくりです)

    WEBブラウザ上から確認できる mailformpro/mailformpro.cgi は、
    スマホ用に、フォームが縦長になるのを避ける為かと思いますが、1つのHTMLのページに書かれている沢山の入力欄を、何段階かに分けて進めている「風」に見せる処理が入っているようです。

    その段階のまとまりの単位として扱われているのが、<div class="mfp_phase" ></div> で囲われた部分です。div.mfp_phaseの1つが1段階分になります。
    で、このdiv.mfp_phase には summary属性が付いているのですが、これがこのまとまりの「名前」を表しているようです。
    これを使って、次のまとまりの「名前」を判別し、「● へすすむ>」の「●」部分にあてはめて「個人情報へすすむ>」というボタンが作成されています。

    つまり、「個人情報」と「へすすむ>」は別々のところで設定されているわけです。
    「個人情報」という文字列は、サーバー側に置いてあるファイルだと、a.html にしか見つからないかと思われます。
    残りの「へすすむ>」の部分は、先ほど確認されていた*.cgiファイルが置いてあったところの、
    configs/ の下に jp.cgi とか。。こう「日本語用」っぽいファイル名のファイルはないですか?
    もしあれば、そのファイルのどこかに、進むボタンのテキストとして「へすすむ &gt;」が設定されているのではないかなと。。
    (cgiの中身については、あくまでファイル名を見る限りの想像なので、間違ってたらすみません^^;)

    キャンセル

  • 2018/07/26 11:56

    毎度、本当に分かりやすいご回答ありがとうございます!
    残りの「へすすむ>」の該当箇所が見つかりました。
    画像を添付してお見せしたいのともう1つご質問させていただければ幸いですので、
    「自己解決」欄に追記する形で書かせていただければと存じます。

    キャンセル

  • 2018/07/27 09:40

    summary属性の値を$1で取得する と書くとちょっと語弊がありそうな・・?

    取得したsummaryの値で、$1を「置換」してボタンの表示文字列を作っています。

    webブラウザから確認できるjavascriptの中だと、

    summary属性値を取得している部分が1838行目~1850行目

    var labelTEXT = tObj[i].getAttribute('summary') || mfpLang['Phase'].replace('$1',mfpPhase.length);
    ~中略~
    mfpPhaseLabel.push(labelTEXT);

    で、「●へすすむ」ボタンを作っているのが、1886~1993行目あたりで、
    summary属性値での文字列置換処理は、その中の1889行目のここです。

    elm.innerHTML = mfpLang['ButtonNext'].replace('$1',mfpPhaseLabel[i+1]);

    キャンセル

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

  • PHP

    21325questions

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

  • HTML

    9562questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6194questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • トップ
  • PHPに関する質問
  • ページ内にボタンが設置されているが、サーバー内にはそのコードが見当たらない場合の見つけ方について