もっと見る(追加読み込み型) ハイブリッド
初期表示は静的HTML、ボタン押下でJS経由(fetch)により追加項目を読み込みます。
検証シナリオ
翻訳/クロールテスト用モックサイト。検証したいシナリオごとにページを分けています。
ページネーション
一覧を複数ページに分けて表示する方式のバリエーション。クローラーからの見え方の違いを検証します。
ページ遷移型ページネーション 静的
クライアントJSを使わず、ページ番号のURL遷移(?p=)だけで完結する静的なページネーションです。
無限スクロール ハイブリッド
スクロールして一覧末尾が画面に入ったことを検知し、自動的に追加項目を読み込みます。
フォーム
入力を伴う画面のバリエーション。確認・完了画面が、クローラーからどう見えるかを検証します。
問い合わせフォーム(入力→確認→完了、URL遷移型) 静的
入力→確認→完了がそれぞれ別URLに遷移します。確認・完了画面は、直前の送信で作られるサーバー側セッションがないと表示できません。
問い合わせフォーム(入力→確認→完了、URL非遷移型) 動的
入力→確認→完了が同一URLのまま、JSによるDOM書き換えだけで進みます。確認・完了に対応するURLは存在せず、実際のフォーム入力とボタンクリックを再現しないと到達できません。
検索
キーワード検索結果の見え方のバリエーション。検索語やクエリ結果が、クローラーからどう見えるかを検証します。
フリーワード検索(GETパラメータ型) 静的
古典文学の作品名・著者名で検索できます。検索語がURL(?q=)に反映され、結果もサーバーが静的HTMLとして返します。URLを直接発見・再訪問すれば、JSなしで正しい結果を取得できます。
フリーワード検索(GETパラメータ+JS描画型) 動的
見た目・URLの形式(?q=)は上と同じですが、検索結果はJSがfetchで取得して描画します。ブラウザでは正常に見えますが、JSを実行しないクローラーには結果が一切見えません。
その他
JS動的コンテンツ(お知らせ一覧) 動的
フィルタ・一覧とも初期HTMLに存在せず、JS経由(fetch)ですべて描画します。
JS動的コンテンツ(FAQ一覧・span版) 動的
上のお知らせ一覧(div版)と同じ挙動ですが、別データ(FAQ)を使い、タグをspanのままにした対照ケースです。
セッションCookieを配るページ 静的
表示しただけでサーバーがセッションを開始し、応答に Set-Cookie を付けて返します。会員サイト・カート・CSRFトークン付きフォームと同じ振る舞いです。翻訳プロキシが翻訳後の応答でも原本のCookieを訪問者へ転送できているか(落としていないか)を検証します。落とすとフォーム送信やログインが失敗します。
AEON
イオン株式会社の実際のIRサイトを参考にしたシナリオ。E-IR(プロネクサス)が配信する本物のデータをそのまま利用します。
決算資料一覧 動的
E-IR(プロネクサス)の本物のJSONPフィードをクライアント側で直接fetchして描画します。見出しの年度表記はデータの値ではなく、JSがその場で計算して生成します。