initial commit

1 files changed, 565 insertions, 0 deletions

diff --git a/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html
new file mode 100644
index 0000000000..42f9db568a
--- /dev/null
+++ b/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html
@@ -0,0 +1,565 @@
+---
+title: Intersection Observer API を使用したタイミング要素の可視性
+slug: Web/API/Intersection_Observer_API/Timing_element_visibility
+tags:
+  - API
+  - Intersection Observer
+  - Intersection Observer API
+  - チュートリアル
+  - 中級
+  - 例
+translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p><a href="/ja/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> は、{{domxref("Document")}} 自体を含む共有祖先ノードまたは要素によって、対象の要素が多かれ少なかれ不明瞭になったときに、非同期的に通知されることを容易にします。 <span class="seoSummary">この記事では、ページのコンテンツ間に多数の広告が散在している模擬ブログを作成し、その後 Intersection Observer API を使用して、各広告がユーザに見える時間を追跡します。表示時間の1分を超える広告は、新しい広告と置き換えられます。</span></p>
+
+<p>この例の多くの側面は実際の使用状況とは一致しません (特に記事はすべて同じテキストを持ち、データベースからは読み込まれません。また、配列から選択された単なるテキストのみの広告がほんの一握りです )、これは API の十分な理解を提供して、あなたのサイトに Intersection Observer API をどのように適用するかを素早く学ぶべきです。</p>
+
+<p>この例で、広告の視認性を追跡するという概念が使用されているのには理由があります。Web 上での広告の Flash やその他のスクリプトの最も一般的な用途の1つは、課金と収入のために各広告が表示される期間を記録することです。Intersection Observer API がなければ、個々の広告の間隔やタイムアウト、またはページを遅くする傾向があるその他の手法を使用して完了します。この API を使用することで、ブラウザによる効率化が図られ、パフォーマンスへの影響が大幅に軽減されます。</p>
+
+<p>始めましょう！</p>
+
+<div id="fullpage_example">
+<h2 id="サイト構造：HTML">サイト構造：HTML</h2>
+
+<p>The site's structure is not too complicated. We'll be using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> to style and lay out the site, so we can be pretty straightforward here:</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header&gt;
+    &lt;h1&gt;A Fake Blog&lt;/h1&gt;
+    &lt;h2&gt;Showing Intersection Observer in action!&lt;/h2&gt;
+  &lt;/header&gt;
+
+  &lt;aside&gt;
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#link1"&gt;A link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link2"&gt;Another link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link3"&gt;One more link&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/nav&gt;
+  &lt;/aside&gt;
+
+  &lt;main&gt;
+  &lt;/main&gt;
+&lt;/div&gt;</pre>
+
+<p>This is the framework for the entire site. At the top is the site's header region, contained within a {{HTMLElement("header")}} block. Below that, we define the site's sidebar as a list of links within an {{HTMLElement("aside")}} block.</p>
+
+<p>Finally comes the main body. We start with an empty {{HTMLElement("main")}} element here. This box will be populated using script later.</p>
+
+<h2 id="CSS_によるサイトのスタイル設定">CSS によるサイトのスタイル設定</h2>
+
+<p>With the structure of the site defined, we turn to the styling for the site. Let's look at the style for each component of the page individually.</p>
+
+<h3 id="基礎">基礎</h3>
+
+<p>We provide styles for the {{HTMLElement("body")}} and {{HTMLElement("main")}} elements to define the site's background as well as the grid the various parts of the site will be placed in.</p>
+
+<pre class="brush: css">body {
+  font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
+  background-color: aliceblue;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr);
+  grid-template-rows: auto minmax(min-content, 1fr);
+  max-width: 700px;
+  margin: 0 auto;
+  background-color: aliceblue;
+}</pre>
+
+<p>The site's {{HTMLElement("body")}} is configured here to use one of a number of common sans-serif fonts, and to use <code>"aliceblue"</code> as the background color. Then the <code>"wrapper"</code> class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads).</p>
+
+<p>The wrapper establishes a CSS grid with two columns and two rows. The first column (sized automatically based on its content) is used for the sidebar and the second column (which will be used for body content) is sized to be at least the width of the contents of the column and at most all remaining available space.</p>
+
+<p>The first row will be used specially for the site header. The rows are sized the same way as the columns: the first one is automatically sized and the one uses the remaining space, but at least enough space to provide room for all elements within it.</p>
+
+<p>The wrapper's width is fixed at 700px so that it will fit in the available space when presented inline on MDN below.</p>
+
+<h3 id="ヘッダー">ヘッダー</h3>
+
+<p>The header is fairly simple, since for this example all it contains is some text. Its style looks like this:</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background-color: aliceblue;
+}</pre>
+
+<p>{{cssxref("grid-row")}} is set to 1, since we want the header to be placed in the top row of the site's grid. More interesting is our use of {{cssxref("grid-column")}} here; here we specify that we want the column to start in the first column and ends in the first column past the last grid line—in other words, the header spans across all of the columns within the grid. Perfect for our needs.</p>
+
+<h3 id="サイドバー">サイドバー</h3>
+
+<p>Our sidebar is used to present links to other pages on the site. None of them work in our example here, but they exist to help with the presentation of a blog-like experience. The sidebar is represented using an {{HTMLElement("aside")}} element, and is styled as follows:</p>
+
+<pre class="brush: css">aside {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: cornsilk;
+  padding: 5px 10px;
+}
+
+aside ul {
+  padding-left: 0;
+}
+
+aside ul li {
+  list-style: none;
+}
+
+aside ul li a {
+  text-decoration: none;
+}</pre>
+
+<p>The most important thing to note here is that the {{cssxref("grid-column")}} is set to 1, to place the sidebar on the left-hand side of the screen. If you change this to -1, it will appear on the right (although some other elements will need some adjustments made to their margins to get the spacing just right). The {{cssxref("grid-row")}} is set to 2, to place it alongside the site body.</p>
+
+<h3 id="コンテンツ本体">コンテンツ本体</h3>
+
+<p>Speaking of the site's body: the main content of the site is kept in a {{HTMLElement("main")}} element. The following style is applied to that:</p>
+
+<pre class="brush: css">main {
+  grid-column: 2;
+  grid-row: 2;
+  margin: 0;
+  margin-left: 16px;
+  font-size: 16px;
+}</pre>
+
+<p>The primary feature here is that the grid position is set to place the body content in column 2, row 2.</p>
+
+<h3 id="記事">記事</h3>
+
+<p>Each article is contained in an {{HTMLElement("article")}} element, styled like this:</p>
+
+<pre class="brush: css">article {
+  background-color: white;
+  padding: 6px;
+}
+
+article:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+article h2 {
+  margin-top: 0;
+}</pre>
+
+<p>This creates article boxes with a white background which float atop the blue background, with a small margin around the article. Every article which isn't the last item in the container has an 8px bottom margin to space things apart.</p>
+
+<h3 id="広告">広告</h3>
+
+<p>Finally, the ads have the following initial styling. Individual ads may customize the style somewhat, as we'll see later.</p>
+
+<pre class="brush: css">.ad {
+  height: 96px;
+  padding: 6px;
+  border-color: #555;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.ad:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.ad h2 {
+  margin-top: 0;
+}
+
+.ad div {
+  position: relative;
+  float: right;
+  padding: 0 4px;
+  height: 20px;
+  width: 120px;
+  font-size: 14px;
+  bottom: 30px;
+  border: 1px solid black;
+  background-color: rgba(255, 255, 255, 0.5);
+}</pre>
+
+<p>There's nothing magic in here. It's fairly basic CSS.</p>
+
+<h2 id="JavaScript_と連携させる">JavaScript と連携させる</h2>
+
+<p>That brings us to the JavaScript code which makes everything work. Let's start with the global variables:</p>
+
+<pre class="brush: js">let contentBox;
+
+let nextArticleID = 1;
+let visibleAds = new Set();
+let previouslyVisibleAds = null;
+
+let adObserver;
+let refreshIntervalID = 0;</pre>
+
+<p>These are used as follows:</p>
+
+<dl>
+ <dt><code>contentBox</code></dt>
+ <dd>A reference to the {{HTMLElement("main")}} element's {{domxref("HTMLElement")}} object in the DOM. This is where we'll insert the articles and ads.</dd>
+ <dt><code>nextArticleID</code></dt>
+ <dd>Each article is given a unique ID number; this variable tracks the next ID to use, starting with 1.</dd>
+ <dt><code>visibleAds</code></dt>
+ <dd>A {{jsxref("Set")}} which we'll use to track the ads currently visible on the screen.</dd>
+ <dt><code>previouslyVisibleAds</code></dt>
+ <dd>Used to temporarily store the list of visible ads while the document is not visible (for example, if the user has tabbed to another page).</dd>
+ <dt><code>adObserver</code></dt>
+ <dd>Will hold our {{domxref("IntersectionObserver")}} used to track the intersection between the ads and the <code>&lt;main&gt;</code> element's bounds.</dd>
+ <dt><code>refreshIntervalID</code></dt>
+ <dd>Used to store the interval ID returned by {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content.</dd>
+</dl>
+
+<h3 id="セットアップ">セットアップ</h3>
+
+<p>To set things up, we run the <code>startup()</code> function below when the page loads:</p>
+
+<pre class="brush: js">window.addEventListener("load", startup, false);
+
+function startup() {
+  contentBox = document.querySelector("main");
+
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: [0.0, 0.75]
+  };
+
+  adObserver = new IntersectionObserver(intersectionCallback,
+                    observerOptions);
+
+  buildContents();
+  refreshIntervalID = window.setInterval(handleRefreshInterval, 1000);
+}</pre>
+
+<p>First, a reference to the content wrapping {{HTMLElement("main")}} element is obtained, so we can insert our content into it. Then we set up an event listener for the {{event("visibilitychange")}} event. This event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser. The Intersection Observer API doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. Therefore, we need to pause our timers while the page is tabbed out; hence this event listener.</p>
+
+<p>Next we set up the options for the {{domxref("IntersectionObserver")}} which will monitor target elements (ads, in our case) for intersection changes relative to the document. The options are configured to watch for intersections with the document's viewport (by setting <code>root</code> to <code>null</code>). We have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. And the <code>threshold</code> is set to an array containing the values 0.0 and 0.75; this will cause our callback to execute whenever a targeted element becomes completely obscured or first starts to become unobscured (intersection ratio 0.0) or passes through 75% visible in either direction (intersection ratio 0.75).</p>
+
+<p>The observer, <code>adObserver</code>, is created by calling <code>IntersectionObserver</code>'s constructor, passing in the callback function, <code>intersectionCallback</code>, and our options.</p>
+
+<p>We then call a function <code>buildContents()</code>, which we'll define later to actually generate and insert into the document the articles and ads we want to present.</p>
+
+<p>Finally, we set up an interval which triggers once a second to handle any necessary refreshing. We need a one second refresh since we're displaying timers in all visible ads for the purposes of this example. You may not need an interval at all, or you might do it differently or using a different time interval.</p>
+
+<h3 id="ドキュメントの可視性の変更の処理">ドキュメントの可視性の変更の処理</h3>
+
+<p>Let's take a look at the handler for the {{event("visibilitychange")}} event. Our script receives this event when the document itself becomes visible or invisible. The most important scenario here is when the user switches tabs. Since Intersection Observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue entirely), we need to use the <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a> to detect these tab switches and disable our timers for the duration.</p>
+
+<pre class="brush: js">function handleVisibilityChange() {
+  if (document.hidden) {
+    if (!previouslyVisibleAds) {
+      previouslyVisibleAds = visibleAds;
+      visibleAds = [];
+      previouslyVisibleAds.forEach(function(adBox) {
+        updateAdTimer(adBox);
+        adBox.dataset.lastViewStarted = 0;
+      });
+    }
+  } else {
+    previouslyVisibleAds.forEach(function(adBox) {
+      adBox.dataset.lastViewStarted = performance.now();
+    });
+    visibleAds = previouslyVisibleAds;
+    previouslyVisibleAds = null;
+  }
+}</pre>
+
+<p>Since the event itself doesn't state whether the document has switched from visible to invisible or vice-versa, the {{domxref("document.hidden")}} property is checked to see if the document is not currently visible. Since it's theoretically possible to get called multiple times, we only proceed if we haven't already paused the timers and saved the visibility states of the existing ads.</p>
+
+<p>To pause the timers, all we need to do is remove the ads from the set of visible ads (<code>visibleAds</code>) and mark them as inactive. To do so, we begin by saving the set of visible ads into a variable known as <code>previouslyVisibleAds</code> to be sure we can restore them when the user tabs back into the document, and we then empty the <code>visibleAds</code> set so they won't be treated as visible. Then, for each of the ads that are being suspended, we call our <code>updateAdTimer()</code> function, which handles updating the ad's total visible time counter, then we set their <code>dataset.lastViewStarted</code> property to 0, which indicates that the tab's timer isn't running.</p>
+
+<p>If the document has just become visible, we reverse this process: first we go through <code>previouslyVisibleAds</code> and set each one's <code>dataset.lastViewStarted</code> to the current document's time (in milliseconds since the document was created) using the {{domxref("Performance.now", "performance.now()")}} method. Then we set <code>visibleAds</code> back to <code>previouslyVisibleAds</code> and set the latter to <code>null</code>. Now the ads are all restarted, and configured to know that they became visible at the current time, so that they will not add up the duration of time the page was tabbed away the next time they're updated.</p>
+
+<h3 id="交差点の変更の処理">交差点の変更の処理</h3>
+
+<p>Once per pass through the browser's event loop, each {{domxref("IntersectionObserver")}} checks to see if any of its target elements have passed through any of the observer's intersection ratio thresholds. For each observer, a list of targets that have done so is compiled, and sent to the observer's callback as an array of {{domxref("IntersectionObserverEntry")}} objects. Our callback, <code>intersectionCallback()</code>, looks like this:</p>
+
+<pre class="brush: js">function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let adBox = entry.target;
+
+    if (entry.isIntersecting) {
+      if (entry.intersectionRatio &gt;= 0.75) {
+        adBox.dataset.lastViewStarted = entry.time;
+        visibleAds.add(adBox);
+      }
+    } else {
+      visibleAds.delete(adBox);
+      if ((entry.intersectionRatio === 0.0) &amp;&amp; (adBox.dataset.totalViewTime &gt;= 60000)) {
+        replaceAd(adBox);
+      }
+    }
+  });
+}</pre>
+
+<p>As previously mentioned, the {{domxref("IntersectionObserver")}} callback receives as input an array of all of the observer's targeted elements which have become either more or less visible than one of the intersection observer ratios. We iterate over each of those entries—which are of type {{domxref("IntersectionObserverEntry")}}. If the target element is intersecting with the root, we know it has just transitioned from the obscured state to the visible state. If it's become at least 75% visible, then we consider the ad visible and we start the timer by setting the ad's <code>dataset.lastViewStarted</code> attribute to the transition time in {{domxref("IntersectionObserverEntry.time", "entry.time")}}, then add the ad to the set <code>visibleAds</code> so we know to process it as time goes by.</p>
+
+<p>If the ad has transitioned to the not-intersecting state, we remove the ad from the set of visible ads. Then we have one special behavior: we look to see if {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}} is 0.0; if it is, that means the element has become totally obscured. If that's the case, and the ad has been visible for at least a minute total, we call a function we'll create called <code>replaceAd()</code> to replace the existing ad with a new one. This way, the user sees a variety of ads over time, but the ads are only replaced while they can't be seen, resulting in a smooth experience.</p>
+
+<h3 id="定期的なアクションの処理">定期的なアクションの処理</h3>
+
+<p>Our interval handler, <code>handleRefreshInterval()</code>, is called about once per second courtesy of the call to {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} made in the <code>startup()</code> function {{anch("Setting up", "described above")}}. Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad.</p>
+
+<pre class="brush: js">function handleRefreshInterval() {
+  let redrawList = [];
+
+  visibleAds.forEach(function(adBox) {
+    let previousTime = adBox.dataset.totalViewTime;
+    updateAdTimer(adBox);
+
+    if (previousTime != adBox.dataset.totalViewTime) {
+      redrawList.push(adBox);
+    }
+  });
+
+  if (redrawList.length) {
+    window.requestAnimationFrame(function(time) {
+      redrawList.forEach(function(adBox) {
+        drawAdTimer(adBox);
+      });
+    });
+  }
+}</pre>
+
+<p>The array <code>redrawList</code> will be used to keep a list of all the ads which need to be redrawn during this refresh cycle, since it may not be exactly the same as the elapsed time due to system activity or because you've set the interval to something other than every 1000 milliseconds.</p>
+
+<p>Then, for each of the visible ads, we save the value of <code>dataset.totalViewTime</code> (the total number of milliseconds the ad has currently been visible, as of the last time it was updated) and then call <code>updateAdTimer()</code> to update the time. If it's changed, then we push the ad onto the <code>redrawList</code> so we know it needs to be updated during the next animation frame.</p>
+
+<p>Finally, if there's at least one element to redraw, we use {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} to schedule a function that will redraw each element in the <code>redrawList</code> during the next animation frame.</p>
+
+<h3 id="広告の視認性タイマーを更新する">広告の視認性タイマーを更新する</h3>
+
+<p>Previously (see {{anch("Handling document visibility changes")}} and {{anch("Handling periodic actions")}}), we've seen that when we need to update an ad's "total visible time" counter, we call a function named <code>updateAdTimer()</code> to do so. This function takes as an input an ad's {{domxref("HTMLDivElement")}} object. Here it is:</p>
+
+<pre class="brush: js">function updateAdTimer(adBox) {
+  let lastStarted = adBox.dataset.lastViewStarted;
+  let currentTime = performance.now();
+
+  if (lastStarted) {
+    let diff = currentTime - lastStarted;
+
+    adBox.dataset.totalViewTime = parseFloat(adBox.dataset.totalViewTime) + diff;
+  }
+
+  adBox.dataset.lastViewStarted = currentTime;
+}</pre>
+
+<p>To track an element's visible time, we use two custom data attributes (see {{htmlattrxref("data-*")}}) on every ad:</p>
+
+<dl>
+ <dt><code>lastViewStarted</code></dt>
+ <dd>The time in milliseconds, relative to the time at which the document was created, at which the ad's visibility count was last updated, or the ad last became visible. 0 if the ad was not visible as of the last time it was checked.</dd>
+ <dt><code>totalViewTime</code></dt>
+ <dd>The total number of milliseconds the ad has been visible.</dd>
+</dl>
+
+<p>These are accessed through each ad's {{domxref("HTMLElement.dataset")}} attribute, which provides a {{domxref("DOMStringMap")}} mapping each custom attribute's name to its value. The values are strings, but we can convert those to numbers easily enough—in fact, JavaScript generally does it automatically, although we'll have one instance where we have to do it ourselves.</p>
+
+<p>We start by fetching the time at which the ad's previous visibility status check time (<code>adBox.dataset.lastViewStarted</code>) into a local variable named <code>lastStarted</code>. We also get the current time-since-creation value using {{domxref("Performance.now", "performance.now()")}} into <code>currentTime</code>.</p>
+
+<p>If <code>lastStarted</code> is non-zero—meaning the timer is currently running, we compute the difference between the current time and the start time to determine the number of milliseconds the timer has been visible since the last time it became visible. This is added to the current value of the ad's <code>totalViewTime</code> to bring the total up to date. Note the use of {{jsxref("parseFloat()")}} here; because these values are strings, JavaScript tries to do a string concatenation instead of addition without it.</p>
+
+<p>Finally, the last-viewed time for the ad is updated to the current time. This is done whether the ad was running when this function was called or not; this causes the ad's timer to always be running when this function returns. This makes sense because this function is only called if the ad is visible, even if it's just now become visible.</p>
+
+<h3 id="広告のタイマーを描画する">広告のタイマーを描画する</h3>
+
+<p>Inside each ad, for demonstration purposes, we draw the current value of its <code>totalViewTime</code>, converted into minutes and seconds. This is handled by passing the ad's element into the <code>drawAdTimer()</code> function:</p>
+
+<pre class="brush: js">function drawAdTimer(adBox) {
+  let timerBox = adBox.querySelector(".timer");
+  let totalSeconds = adBox.dataset.totalViewTime / 1000;
+  let sec = Math.floor(totalSeconds % 60);
+  let min = Math.floor(totalSeconds / 60);
+
+  timerBox.innerText = min + ":" + sec.toString().padStart(2, "0");
+}</pre>
+
+<p>This code finds the ad's timer using its ID, <code>"timer"</code>, and computes the number of seconds elapsed by dividing the ad's <code>totalViewTime</code> by 1000. Then it calculates the number of minutes and seconds elapsed before setting the timer's {{domxref("Node.innerText", "innerText")}} to a string representing that time in the form m:ss. The {{jsxref("String.padStart()")}} method is used to ensure that the number of seconds is padded out to two digits if it's less than 10.</p>
+
+<h3 id="ページコンテンツの構築">ページコンテンツの構築</h3>
+
+<p>The <code>buildContents()</code> function is called by the {{anch("Setting up", "startup code")}} to select and insert into the document the articles and ads to be presented:</p>
+
+<pre class="brush: js">let loremIpsum = "&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing" +
+  " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
+  " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
+  " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
+  " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" +
+  " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," +
+  " cursus nunc.&lt;/p&gt;";
+
+function buildContents() {
+  for (let i=0; i&lt;5; i++) {
+    contentBox.appendChild(createArticle(loremIpsum));
+
+    if (!(i % 2)) {
+      loadRandomAd();
+    }
+  }
+}
+</pre>
+
+<p>The variable <code>loremIpsum</code> contains the text we'll use for the body of all of our articles. Obviously in the real world, you'd have some code to pull articles from a database or the like, but this does the job for our purposes. Every article uses the same text; you could of course change that easily enough.</p>
+
+<p><code>buildContents()</code> creates a page with five articles. Following every odd-numbered article, an ad is "loaded" and inserted into the page. Articles are inserted into the content box (that is, the {{HTMLElement("main")}} element that contains all the site content) after being created using a method called <code>createArticle()</code>, which we'll look at next.</p>
+
+<p>The ads are created using a function called <code>loadRandomAd()</code>, which both creates the ad and inserts it into the page. We'll see later that this same function can also replace an existing ad, but for now, we're simply appending ads to the existing content.</p>
+
+<h3 id="記事を作成する">記事を作成する</h3>
+
+<p>To create the {{HTMLElement("article")}} element for an article (as well as all of its contents), we use the <code>createArticle()</code> function, which takes as input a string which is the full text of the article to add to the page.</p>
+
+<pre class="brush: js">function createArticle(contents) {
+  let articleElem = document.createElement("article");
+  articleElem.id = nextArticleID;
+
+  let titleElem = document.createElement("h2");
+  titleElem.id = nextArticleID;
+  titleElem.innerText = "Article " + nextArticleID + " title";
+  articleElem.appendChild(titleElem);
+
+  articleElem.innerHTML += contents;
+  nextArticleID +=1 ;
+
+  return articleElem;
+}</pre>
+
+<p>First, the <code>&lt;article&gt;</code> element is created and its ID is set to the unique value <code>nextArticleID</code> (which starts at 1 and goes up for each article). Then we create and append an {{HTMLElement("h2")}} element for the article title and then we append the HTML from <code>contents</code> to that. Finally, <code>nextArticleID</code> is incremented (so that the next element gets a new unique ID) and we return the new <code>&lt;article&gt;</code> element to the caller.</p>
+
+<h3 id="広告を作成する">広告を作成する</h3>
+
+<p>The <code>loadRandomAd()</code> function simulates loading an ad and adding it to the page. If you don't pass a value for <code>replaceBox</code>, a new element is created to contain the ad; the ad is then appended to the page. if you specify a <code>replaceBox</code>, that box is treated as an existing ad element; instead of creating a new one, the existing element is changed to contain the new ad's style, content, and other data. This avoids the risk of lengthy layout work being done when you update the ad, which could happen if you first delete the old element then insert a new one.</p>
+
+<pre class="brush: js">function loadRandomAd(replaceBox) {
+  let ads = [
+    {
+      bgcolor: "#cec",
+      title: "Eat Green Beans",
+      body: "Make your mother proud—they're good for you!"
+    },
+    {
+      bgcolor: "aquamarine",
+      title: "MillionsOfFreeBooks.whatever",
+      body: "Read classic literature online free!"
+    },
+    {
+      bgcolor: "lightgrey",
+      title: "3.14 Shades of Gray: A novel",
+      body: "Love really does make the world go round..."
+    },
+    {
+      bgcolor: "#fee",
+      title: "Flexbox Florist",
+      body: "When life's layout gets complicated, send flowers."
+    }
+  ];
+  let adBox, title, body, timerElem;
+
+  let ad = ads[Math.floor(Math.random()*ads.length)];
+
+  if (replaceBox) {
+    adObserver.unobserve(replaceBox);
+    adBox = replaceBox;
+    title = replaceBox.querySelector(".title");
+    body = replaceBox.querySelector(".body");
+    timerElem = replaceBox.querySelector(".timer");
+  } else {
+    adBox = document.createElement("div");
+    adBox.className = "ad";
+    title = document.createElement("h2");
+    body = document.createElement("p");
+    timerElem = document.createElement("div");
+    adBox.appendChild(title);
+    adBox.appendChild(body);
+    adBox.appendChild(timerElem);
+  }
+
+  adBox.style.backgroundColor = ad.bgcolor;
+
+  title.className = "title";
+  body.className = "body";
+  title.innerText = ad.title;
+  body.innerHTML = ad.body;
+
+  adBox.dataset.totalViewTime = 0;
+  adBox.dataset.lastViewStarted = 0;
+
+  timerElem.className="timer";
+  timerElem.innerText = "0:00";
+
+  if (!replaceBox) {
+    contentBox.appendChild(adBox);
+  }
+
+  adObserver.observe(adBox);
+}</pre>
+
+<p>First is the array <code>ads</code>. This array contains the data needed to create each ad. We have four here to choose from at random. In a real-world scenario, of course, the ads would come from a database or, more likely, an advertising service from which you fetch ads using an API. However, our needs are simple: each ad is represented by an object with three properties: a background color (<code>bgcolor</code>), a title (<code>title</code>), and a body text string (<code>body</code>).</p>
+
+<p>Then we define several variables:</p>
+
+<dl>
+ <dt><code>adBox</code></dt>
+ <dd>This will be set to the element that represents the ad. For new ads being appended to the page, this is created using {{domxref("Document.createElement()")}}. When replacing an existing ad, this is set to the specified ad element (<code>replaceBox</code>).</dd>
+ <dt><code>title</code></dt>
+ <dd>Will hold the {{HTMLElement("h2")}} element representing the ad's title.</dd>
+ <dt><code>body</code></dt>
+ <dd>Will hold the {{HTMLElement("p")}} representing the ad's body text.</dd>
+ <dt><code>timerElem</code></dt>
+ <dd>Will hold the {{HTMLElement("div")}} element which contains the time the ad has been visible so far.</dd>
+</dl>
+
+<p>A random ad is selected by computing <code>Math.floor(Math.random() * ads.length)</code>; the result is a value between 0 and one less than the number of ads. The corresponding ad is now known as <code>adBox</code>.</p>
+
+<p>If a value is specified for <code>replaceBox</code>, we use that as the ad element. To do so, we begin by ending observation of the element by calling {{domxref("IntersectionObserver.unobserve()")}}. Then the local variables for each of the elements that comprise an ad: the ad box itself, the title, the body, and the timer box, are all set to the corresponding elements in the existing ad.</p>
+
+<p>If no value is specified for replaceBox, we create a new ad element. The ad's new {{HTMLElement("div")}} element is created and its properties established by setting its class name to <code>"ad"</code>. Next, the ad title element is created, along with the body and the visibility timer; these are an {{HTMLElement("h2")}}, a {{HTMLElement("p")}}, and a {{HTMLElement("div")}} element, respectively. These elements are appended to the <code>adBox</code> element.</p>
+
+<p>After that, the code paths converge once again. The ad's background color is set to the value specified in the new ad's record, and elements' classes and contents are set appropriately as well.</p>
+
+<p>Next, it's time to set up the custom data properties to track the ad's visibility data by setting <code>adBox.dataset.totalViewTime</code> and <code>adBox.dataset.lastViewStarted</code> to 0.</p>
+
+<p>Finally, we set the ID of the <code>&lt;div&gt;</code> which will show the timer we'll present in the ad to show how long it's been visible, giving it the class <code>"timer"</code>. The initial text is set to "0:00", to represent the starting time of 0 minutes and 0 seconds, and it's appended to the ad.</p>
+
+<p>If we're not replacing an existing ad, we need to append the element to the content area of the page using {{domxref("Node.appendChild", "Document.appendChild()")}}. If we're replacing an ad, it's already there, with its contents replaced with the new ad's. Then we call the {{domxref("IntersectionObserver.observe", "observe()")}} method on our Intersection Observer, <code>adObserver</code>, to start watching the ad for changes to its intersection with the viewport. From now on, any time the ad becomes 100% obscured or even a single pixel becomes visible, or the ad passes through 75% visible in one way or another, the {{anch("Handling intersection changes", "observer's callback")}} is executed.</p>
+
+<h3 id="既存の広告を置き換える">既存の広告を置き換える</h3>
+
+<p>Our {{anch("Handling intersection changes", "observer's callback")}} keeps an eye out for ads which become 100% obscured and have a total visible time of at least one minute. When that happens, the <code>replaceAd()</code> function is called with that ad's element as an input, so that the old ad can be replaced with a new one.</p>
+
+<pre class="brush: js">function replaceAd(adBox) {
+  let visibleTime;
+
+  updateAdTimer(adBox);
+
+  visibleTime = adBox.dataset.totalViewTime
+  console.log("  Replacing ad: " + adBox.querySelector("h2").innerText + " - visible for " + visibleTime)
+
+  loadRandomAd(adBox);
+}</pre>
+
+<p><code>replaceAd()</code> begins by calling <code>updateAdTimer()</code> on the existing ad, to ensure that its timer is up-to-date. This ensures that when we read its <code>totalViewTime</code>, we see the exact final value for how long the ad was visible to the user. We then report that data; in this case, by logging it to console, but in the real world, you'd submit the information to an ad service's API or save it into a database.</p>
+
+<p>Then we load a new ad by calling <code>{{anch("Creating an ad", "loadRandomAd()")}}</code>, specifying the ad to be replaced as an input parameter. As we saw previously, <code>loadRandomAd()</code> will replace an existing ad with content and data corresponding to a new ad, if you specify an existing ad's element as an input parameter.</p>
+
+<p>The new ad's element object is returned to the caller in case it's needed.</p>
+</div>
+
+<h2 id="結果">結果</h2>
+
+<p>結果のページは次のようになります。スクロールして試してみて、視認性の変化が各広告のタイマーに与える影響を見てみましょう。 また、1分の視認性と、ドキュメントがバックグラウンドでタブ表示されている間にタイマーが一時停止すると、各広告が置き換えられます。</p>
+
+<p>{{EmbedLiveSample("fullpage_example", 750, 800)}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li><a href="/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Page Visibility API</a></li>
+</ul>