ソースの見方を教えてください

質問

以下のページの各教室へのリンクの部分がソースを見ても出てこないのは何故でしょうか？

http://www.kobetsu.co.jp/map/

また、Chromeの要素を検証で見ると当該部分のソースが見れるのですが、何故でしょうか？
別ファイルにJavaScriptで記載してるとかそういうことなのでしょうか？

色々なサイトを見ながらHTMLを独学中です。
初歩的な質問で恐縮ですが、ご教示のほど何卒宜しくお願い申し上げます。

回答No.3

b0a0a · ベストアンサー

JavaScriptでこのような処理をするのは間違っていません
JavaScriptが絶対に動かない環境まで考慮するのなら
その前にFlashやCSS、ページ幅等を気にしないとおかしく現実的ではありません
それに最近では検索エンジンは大方のスクリプトを実行できるのでクロールもされます

それから、Chromeのコンソールで表示されるソースは「現在」のドキュメントソースです
どこを見ればJavaScriptで書き出していることがわかるかという問いですが、
そりゃあもう元ソースに無いものが現れているという時点で99.9％JavaScriptによるものでしょう

具体的にどうやれば辿っていけるのか私が実際にやった例を挙げると、
まずJavaScriptで書き出されていると思われる部分
今回だと「東京23区内」とか書かれている右の辺りを右クリックして要素を検証します
そうしてソースと比較するか、カンで、
<div id="index_13_0" class="loading"></div>
の中に新しく要素が作られていることがわかります
つまり"index_13_0"というidをターゲットにして埋め込んでいるのかなと推測できます

次にsourcesタブを開き、「Ctrl+Shift+F」を押して検索ウィンドウを開きます
「Ctrl+F」ではダメです、今見えている対象ではなく全ソースから検索する場合は必ずShiftも押してください
そうして「index_13_0」と入れ検索してみます
JavaScriptファイルにヒットして欲しいのですがhtmlしかヒットしません
もしかすると数値の部分は可変で
「"index_"+i」のような処理になっているのかと推測し、
次に「index_」と入れ検索してみます
またhtmlにしかヒットしません

ここで、他にスクリプトからターゲットにできて、各場所で共通な部分として、あとはClassがあることがわかります
そうして今度は「loading」で検索してみます
たくさん候補がでますが、自分のところのデータ管理スクリプトを他ドメインにおいておくことは考えにくいので、「kobetsu.co.jp」ドメインでスクリプトファイルのものだけに注目します
そうすると「map.php.js」というのが目に付くと思います
それを開くと２行めと６行目がヒットしています

jQueryプラグイン用の記述がされていて、
２行目は「loading」Classをもつ要素に「Loading...」と表示させ、
６行目で各要素に何かやっていることがわかります
そして６行目をクリックすると該当部分は
$(".loading").each(function(){
$(this).load("query/list.php?q="+$(this).attr("id"));
});
となっています
これはAjaxで、「query/list.php?q=(各要素のid)」から取得したデータを各要素に書き出す処理です

これで一応わかったわけですが、ついでにNetworkタブを開きます
そして「コンソールを出したまま」一旦ページを再読み込みさせます
次に「Ctrl+F」を押して検索ウィンドウを開きます
そして「list.php」と入れて検索します
そうするとヒットするので
「東京23区内」の内容だと思われる「list.php?q=index_13_0」をクリックします
そうしてResponseタブにすると期待していたデータが出てきます

大体こういった流れです、一番の味噌は「Ctrl+Shift+F」です

お礼

ありがとうございます。
大変勉強になりました。

回答No.2

ORUKA1951

firefoxでしたら、見たい部分を選択して、コンテキストメニュー(右ボタン)で「選択した部分のソースを見る」で、
　またFirebug ( https://addons.mozilla.jp/firefox/details/1843 )で、HTMLソースを見ると、それに適用されているスタイルシートも同時にわかるでしょう。--HTMLやCSSを適当に編集して変化も確認できます。javascriptもわかります。
・JSView( https://addons.mozilla.jp/firefox/details/2076 )
・Web Developer ( https://addons.mozilla.jp/firefox/details/60 )
・Html Validator ( https://addons.mozilla.jp/firefox/details/249 )
・Open With ( https://addons.mozilla.jp/firefox/details/11097 )
など、開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるものを使えば、サイトの構成を知ることができるでしょう。

　javascriptでこのような重要なリンクを書き出すのはとてもまずいです。javascriptを停止、あるいは利用できないユーザーエージェントには理解できませんし、検索エンジンもクロールできません。

お礼

ありがとうございます。

回答No.1

b0a0a

JavaScriptで書き出しているんですよ

お礼

ありがとうございます。
重ね重ね恐縮でございますが、どこを見ればJavaScriptで書き出していることが分かりますか？