Q&A
恐らくこちらのカレンダーのことだと思いますが、サーバー側でHTMLがレンダリング(生成)され、結果がクライアント(ブラウザ側)に返却されている為、クライアント側でソースを確認することはできません。
https://test-store-info.yahoo.co.jp/store/w/390.html
前提・実現したいこと
ヤフーショッピングのデフォルトのカレンダー機能についてどのような仕組みを使って表示されているのか解析したくて検証ツールでhtmlを確認したところ、何らかの処理が実行されて月日などがテキストで出力された後のhtmlが表記されています。
処理が実行される前の、サーバーに保存されている元のhtmlの中身を確認する方法があればご教示いただけますと幸いです。
該当のソースコード
例えば↓こちらのヤフーショッピングのショップさんのストアカレンダーの該当箇所は以下の通りです。（文字数制限の関係で一部省略しています。）
https://store.shopping.yahoo.co.jp/yakinoriya26/
このhtmlには月や曜日がテキストで出力されていますが、ソースコードが書き換わる前の元のソースが知りたいです。
html
1<div class="mdBusinessDaysCalendar"> 2 <div class="elHeader"> 3 <h2 class="elHeaderTitle">営業日カレンダー</h2> 4 </div> 5 <p class="elLegend" aria-label="凡例：グレー表示">定休日</p> 6 <div class="elCalendars"> 7 <table class="elCalendar"> 8 <caption class="elCalendarCaption">2021年11月</caption> 9 <thead> 10 <tr class="elCalendarHeadRow"> 11 <th class="elCalendarHeadData" scope="col">日</th> 12 <th class="elCalendarHeadData" scope="col">月</th> 13 <th class="elCalendarHeadData" scope="col">火</th> 14 <th class="elCalendarHeadData" scope="col">水</th> 15 <th class="elCalendarHeadData" scope="col">木</th> 16 <th class="elCalendarHeadData" scope="col">金</th> 17 <th class="elCalendarHeadData" scope="col">土</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr class="elCalendarBodyRow"> 22 <td class="elCalendarBodyData"> 23 <span class="elCalendarBodyDay"></span> 24 </td> 25 <td class="elCalendarBodyData"> 26 <span class="elCalendarBodyDay">1</span> 27 </td> 28 <td class="elCalendarBodyData"> 29 <span class="elCalendarBodyDay">2</span> 30 </td> 31 <td class="elCalendarBodyData"> 32 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">3</span> 33 </td> 34 <td class="elCalendarBodyData"> 35 <span class="elCalendarBodyDay">4</span> 36 </td> 37 <td class="elCalendarBodyData"> 38 <span class="elCalendarBodyDay">5</span> 39 </td> 40 <td class="elCalendarBodyData"> 41 <span class="elCalendarBodyDay">6</span> 42 </td> 43 </tr> 44 <tr class="elCalendarBodyRow"> 45 <td class="elCalendarBodyData"> 46 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">7</span> 47 </td> 48 <td class="elCalendarBodyData"> 49 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">8</span> 50 </td> 51 <td class="elCalendarBodyData"> 52 <span class="elCalendarBodyDay">9</span> 53 </td> 54 <td class="elCalendarBodyData"> 55 <span class="elCalendarBodyDay">10</span> 56 </td> 57 <td class="elCalendarBodyData"> 58 <span class="elCalendarBodyDay">11</span> 59 </td> 60 <td class="elCalendarBodyData"> 61 <span class="elCalendarBodyDay">12</span> 62 </td> 63 <td class="elCalendarBodyData"> 64 <span class="elCalendarBodyDay">13</span> 65 </td> 66 </tr> 67 <tr class="elCalendarBodyRow"> 68 <td class="elCalendarBodyData"> 69 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">14</span> 70 </td> 71 <td class="elCalendarBodyData"> 72 <span class="elCalendarBodyDay">15</span> 73 </td> 74 <td class="elCalendarBodyData"> 75 <span class="elCalendarBodyDay">16</span> 76 </td> 77 <td class="elCalendarBodyData"> 78 <span class="elCalendarBodyDay">17</span> 79 </td> 80 <td class="elCalendarBodyData"> 81 <span class="elCalendarBodyDay">18</span> 82 </td> 83 <td class="elCalendarBodyData"> 84 <span class="elCalendarBodyDay">19</span> 85 </td> 86 <td class="elCalendarBodyData"> 87 <span class="elCalendarBodyDay">20</span> 88 </td> 89 </tr> 90 <tr class="elCalendarBodyRow"> 91 <td class="elCalendarBodyData"> 92 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">21</span> 93 </td> 94 <td class="elCalendarBodyData"> 95 <span class="elCalendarBodyDay">22</span> 96 </td> 97 <td class="elCalendarBodyData"> 98 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">23</span> 99 </td> 100 <td class="elCalendarBodyData"> 101 <span class="elCalendarBodyDay">24</span> 102 </td> 103 <td class="elCalendarBodyData"> 104 <span class="elCalendarBodyDay">25</span> 105 </td> 106 <td class="elCalendarBodyData"> 107 <span class="elCalendarBodyDay">26</span> 108 </td> 109 <td class="elCalendarBodyData"> 110 <span class="elCalendarBodyDay">27</span> 111 </td> 112 </tr> 113 <tr class="elCalendarBodyRow"> 114 <td class="elCalendarBodyData"> 115 <span class="elCalendarBodyDay isHoliday" aria-label="定休日">28</span> 116 </td> 117 <td class="elCalendarBodyData"> 118 <span class="elCalendarBodyDay">29</span> 119 </td> 120 <td class="elCalendarBodyData"> 121 <span class="elCalendarBodyDay">30</span> 122 </td> 123 <td class="elCalendarBodyData"> 124 <span class="elCalendarBodyDay"></span> 125 </td> 126 <td class="elCalendarBodyData"> 127 <span class="elCalendarBodyDay"></span> 128 </td> 129 <td class="elCalendarBodyData"> 130 <span class="elCalendarBodyDay"></span> 131 </td> 132 <td class="elCalendarBodyData"> 133 <span class="elCalendarBodyDay"></span> 134 </td> 135 </tr> 136 </tbody> 137</table> 138 </div> 139</div>
試したこと
サーバーhtml確認などで検索しましたが、方法を見つけられませんでした。
補足情報（FW/ツールのバージョンなど）
検証ツールはGoogleChromを利用していますが、他のツールでも可能な方法があればアドバイスいただけると助かります。
よろしくお願いいたします。
はい、そちらのカレンダーです。
クライアント側ではソースを確認する方法はないのですね。
ご回答ありがとうございました！
あと、前回の質問について問題が解決していましたらクローズして頂けると助かります。
https://teratail.com/questions/366954
ベストアンサーを選択しないとクローズしないのですね、先ほど完了しました。
対応ありがとうございました！
回答2件
0
目的が分かりませんが、Chromeなら右クリック「このページのソースを表示」
投稿2021/11/20 01:37
総合スコア80875
ん？「レンダリング前」？
JavaScriptで動的に要素が作られる前の話ではなく？
ご回答ありがとうございます。
Chromeで右クリックしてコピーした内容が該当のソースコードに掲載した内容です。
レンダリング前という表現が的確ではないのかもしれません。
おっしゃるとおり、JavaScriptで動的に要素が作られる前のことです。
でしたら、回答の方法のものがJavaScript動作関係ない生のソースコードが得られます。
ご回答の方法がJavaScript動作に関係のないソースコードなのですね、ありがとうございます。
0
自己解決
cx20さんにコメント頂きました
「サーバー側でHTMLがレンダリング(生成)され、結果がクライアント(ブラウザ側)に返却されている為、クライアント側でソースを確認することはできません。」が答えかと思いますので、この質問をクロージングします。
投稿2021/12/18 08:14
総合スコア5
あなたの回答
tips
プレビュー
