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

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

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

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

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

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

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

【追記】

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

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

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

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

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

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

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

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

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

<head>内に2か所 ```html <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には見当たらない、「ボタン」も

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

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

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

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

投稿2018/07/25 04:00

編集2018/07/25 06:34

mix-peach

総合スコア1910

bah91929

2018/07/25 04:40

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

mix-peach

2018/07/25 06:35

文字数制限でしたか・・なるほど。削るにもどこを削っていいかわからない場合もありますよね^^; どうやって見つけたか、は回答に追記しました！

bah91929

2018/07/26 00:04

行動規範の内容に同意します

<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 01:22

編集2018/07/26 01:26

dit.

総合スコア3235

bah91929

2018/07/26 03:11

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

dit.

2018/07/26 05: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でそう記述されているから　と答えておきます。

bah91929

2018/07/26 07:15

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

行動規範の内容に同意します

非常に分かりやすい回答ありがとうございます！
今回の案件だけでなく、今後にもつながる学びとなりました。
なお、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 へすすむ >',」かと存じます。
$1でsummary属性の値？（個人情報など）を取得していると思われますが、summary属性の値？を$1で取得するという記述が他にあるという事でよろしいでしょうか？笑

投稿2018/07/25 08:48

編集2018/07/26 03:08

bah91929

総合スコア19

mix-peach

2018/07/26 00:55

ファイルの拡張子が、cgiなので、プログラム言語でjavascript処理部分を動的に作成しているのでしょうね。ファイルの先頭をみる限り、perl　かな・・？（申し訳ないですがperlは詳しくないのです・・）ただ、ファイル名から判断するに、 config.cgi　は基本設定 core.cgi　はメインの処理 configs/$config{'lang'}.cgi 　は言語関連の設定とかが入っているのかな、と推察します。多言語化対応するためのものに見えますが、詳しくはシステム提供元に問い合わせるのが早いですねｗプログラム言語で書かれたファイルは、サーバー側でそのプログラムの処理が行われた結果が、webブラウザ上に表示されますので、実際のファイルの中身とブラウザで該当のURLにアクセスした場合に表示されるものとで、中身がまるっと違うのはよくある話です。サーバーのmailformpro/mailformpro.cgiのファイルには全く書かれていませんが、ブラウザでそのURLを開くと、javascriptの処理が記述されており、その中にはボタンを作っている処理が含まれていますよ。（1888行目あたり）ところでボタンの該当部分を探し当てて、何かを変えたかったのですか？？

bah91929

2018/07/26 01:25

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

mix-peach

2018/07/26 02:25

なるほどｗ　「見つからなくて気持ち悪い」という気分は分かりますｗでは、もうちょっと細かいお話です。（きちんと処理を追ってみたわけではないので、ざっくりです） WEBブラウザ上から確認できる　mailformpro/mailformpro.cgi　は、スマホ用に、フォームが縦長になるのを避ける為かと思いますが、１つのHTMLのページに書かれている沢山の入力欄を、何段階かに分けて進めている「風」に見せる処理が入っているようです。その段階のまとまりの単位として扱われているのが、<div class="mfp_phase" ></div>　で囲われた部分です。div.mfp_phaseの１つが1段階分になります。で、このdiv.mfp_phase には　summary属性が付いているのですが、これがこのまとまりの「名前」を表しているようです。これを使って、次のまとまりの「名前」を判別し、「● へすすむ>」の「●」部分にあてはめて「個人情報へすすむ＞」というボタンが作成されています。つまり、「個人情報」と「へすすむ＞」は別々のところで設定されているわけです。「個人情報」という文字列は、サーバー側に置いてあるファイルだと、a.html にしか見つからないかと思われます。残りの「へすすむ>」の部分は、先ほど確認されていた*.cgiファイルが置いてあったところの、 configs/　の下に　jp.cgi　とか。。こう「日本語用」っぽいファイル名のファイルはないですか？もしあれば、そのファイルのどこかに、進むボタンのテキストとして「へすすむ >」が設定されているのではないかなと。。（cgiの中身については、あくまでファイル名を見る限りの想像なので、間違ってたらすみません^^;）

bah91929

2018/07/26 02:56

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

mix-peach

2018/07/27 00: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]);

行動規範の内容に同意します

あなたの回答