Listly用語集

ウェブブラウザでデータをナビゲートする際、さまざまな要素に遭遇します。目的のデータに到達するためにナビゲートする必要がある要素を確認して、適切なテンプレートを見つけるために使用してください :)

1. ウェブブラウザとウェブサイト構造

ウェブブラウザ構成(寸法)2

① アドレスバー (Address Bar)

アドレスバーは、現在の場所のURL（アドレス）を表示する入力フィールドです。通常、ウィンドウの上部に配置されており、ほとんどのウェブサイトで別のページに移動するたびにURLが変わります。

② 拡張機能 (Extensions)

Chrome、Edge、Whaleなどのウェブブラウザでは、機能を追加する拡張機能をインストールできます。**リストリー (Listly) も、ブラウザを介して表示されるウェブページからデータを抽出する拡張機能です。**ブラウザ拡張機能は手動でインストールする必要があり、インストールされた拡張機能は右上隅にアイコンとして表示されます。

③ ヘッダー (Header)

ページの上部セクションを指します。通常、中央にロゴがあり、メニュー（ナビゲーション）と検索バーが配置されています。

④ セクション (Section)

ウェブドキュメントのコンテンツエリアを指します。ウェブページのほとんどのデータは、このエリア内に配置されています。

⑤ アサイド (Aside)

ウェブドキュメントの左、右、または下部に表示されるサイドバーエリア。アサイドセクションは必須要素ではありません。広告や一般的なリンクコレクションなど、メインコンテンツに影響を与えないコンテンツに使用されます。

⑥ iframe

ウェブドキュメントに外部ドキュメントを読み込む方法。肉眼ではすぐには見えませんが、データ抽出のためにリストリー (Listly) アイコンをクリックした後に暗く表示されると認識できます。別の抽出プロセスが必要です。

関連記事：iFrameから抽出する方法

⑦ フッター (Footer)

ウェブドキュメントの下部に配置され、著作権表示、サイトポリシー、サイトマップ、連絡先情報を表示します。表示される情報はページを移動しても変わらず、一部のウェブページにはフッターがまったくありません。

2. マウスアクション

① クリック (Click)

クリック

画面上のオブジェクトを選択するためにボタンを押すアクションです。左ボタンを押すことをクリック、右ボタンを押すことを右クリックと呼びます。通常の情報はクリックでアクセスし、右クリックは特定のボタンのソースコードなどの隠しプロパティを確認するために使用されます。

② スクロール (Scroll)

スクロール

マウスホイールを上下に回すアクションです。このドキュメントでは、ホイールを下方向に回すこと（スクロールダウン）のみを言及しています。

③ ロールオーバー、マウスオーバー (Rollover, Mouseover)

ロールオーバー

マウスポインタをオブジェクトの上に置くと、画像が変わったり新しいテキスト情報が表示されたりする効果です。クリックせずに機能します。

3. 情報の読み込み方法

① 無限スクロール (Infinite Scroll)

無限スクロール

準備されたコンテンツの最後に到達すると、次のセットの情報を取得する読み込み方法です。次のページに移動するためのボタンやページ番号を表示せずに、無限にスクロールできる場合は、無限スクロールを使用しているサイトです。

⚠️ このようなページでスクロールせずに抽出すると、情報がまだ読み込まれていないため、十分なデータを取得できません。リストリー データボード (Listly Databoard) の「設定 (Setting)」で自動スクロール設定を使用すると、データをより便利に抽出できます。

関連記事：自動スクロール (Auto Scroll)

② さらに読み込むボタン (Load More Button)

さらに読み込むボタン

「さらに読み込むボタン (Load More button)」は、下部のボタンをクリックして追加情報を読み込む方法です。これらのページからデータを抽出する場合、リストリー データボード (Listly Databoard) の「設定 (Setting)」の自動クリック設定にさらに読み込むボタンの固有属性値を入力することで、データを自動的に読み込むことができます。

関連記事：自動クリック (Auto Click)

③ ページネーション (Pagination)

「ページネーション (Pagination)」は、新しいアイテムを読み込むための最も一般的に使用される方法です。番号付きのページボタンが情報リストの下部に配置されており、番号または矢印ボタンをクリックして次のページに移動します。

ページネーション A

ページネーション B

ページネーションは大きく2つのタイプに分かれます。

• A. 静的タイプ：番号リストの位置が固定されており、提示された番号のグループでページを移動できます。

• B. 動的タイプ：現在のページが常に番号リストの中央に配置されます。ページを移動すると、番号リストが横に1つずつシフトします。

これら2つのページネーション方法によって継続的な抽出に必要なアクションテンプレートが異なるため、ナビゲートしているウェブページのページネーション方法を確認してください🙂

関連記事：ページネーション (Pagination)

4. UIコンポーネント

UIコンポーネント

① ボタン (Button)

タスクを実行するためにクリックする最も一般的な要素です。デザインは非常に多様です。

② トグル/スイッチ (Toggle / Switches)

オン/オフなどの設定をオンまたはオフにしたり、2つのオプションのうち1つだけを選択したりするために使用されます。

③ ラジオボタン (Radio Button)

複数の要素から1つの項目のみを選択できるボタンです。

④ チェックボックス (Checkbox)

複数の項目を同時に選択できる要素です。

⑤ ステッパー、スピナー (Stepper, Spinner)

代表的な数値入力UI要素です。値を変更するための上下（または左右）ボタンがあり、一部では直接数字を入力できます。

⑥ ドロップダウン (Dropdown)

ショッピングモールでオプションを表示するために最も一般的に採用されている方法です。ボックスの矢印ボタンをクリックすると、非表示の項目が表示され、項目を選択したり、ドロップダウンリスト外をクリックすると閉じます。

⑦ リンク (Link)

クリックすると現在のページの別の部分またはまったく別のページに移動するテキスト、画像、またはアイコンです。ドキュメント内のほとんどのリンクは、下線付きまたは他のテキストとは異なる色で表示されます。

⑧ カレンダー/日付ピッカー (Calendar / Date Pickers)

日付または日付範囲を選択するためのUI要素です。

5. メニュー

メニューは、コンテンツを分類する最も代表的な方法であり、ウェブページ上の位置または表示方法によって分類されます。

メニュー分類

① GNB（グローバルナビゲーションバー、Global Navigation Bar）

ウェブページに表示されるハイパーリンクの収集エリアを指します。簡単に言えば、ウェブサイトに常に表示されるメニューで、「トップメニュー」または「メインメニュー」とも呼ばれます。通常、ウェブサイトの上部または左側に固定配置されています。

② LNB（ローカルナビゲーションバー、Local Navigation Bar）

サブメニューとも呼ばれ、通常ウェブサイトの左側に配置されます。位置は固定されていますが、入力したメニューによって項目が異なります。

③ タブ (Tab)

ユーザーがクリックすると、下または横のエリアに関連コンテンツを含むページを開くボタンです。通常、ドキュメントファイルフォルダーのタブのように見え、複数のタブが並んでいます。

④ コンテキストメニュー (Context menu)

ユーザーが現在選択している項目に関連するオプションを提供するポップアップ形式のメニューです。特定の要素をクリックまたは右クリックすると呼び出されます。

6. 階層化されたページ

階層化されたページ

① ポップアップ/ダイアログボックス (Popup / Dialog Box)

ユーザーの進行を一時停止するために表示されるウィンドウです。現在開いているブラウザページの上に別のブラウザページとして開き、通常、お知らせ、プロモーション、または通知を紹介するために表示されます。多くの場合、ユーザーの意図や目的に関係なく表示されます。

ポップアップウィンドウは、ブラウザのオプションで強制的に開かないようにすることができます。

② モーダル (Modal)

モーダルウィンドウは、新しいウィンドウを開く代わりに、既存のブラウザページの上にレイヤーを追加します。ページを移動したり、モーダルウィンドウの閉じるボタンをクリックしなくても、周囲のエリアをクリックすると消えます。通常、特定のユーザーアクションによって表示されます。