<link href="style.css" type="text/css" rel="stylesheet">
<script src="script.js" type="application/javascript" async></script>
<ins data-zucks-frame-id="_9a8e8fb01f" data-disclosure-label="[広告]"></ins>
<script>
  (adsbyzucks = (window.adsbyzucks || [])).push({});
</script>

(function () {
  'use strict';

  var slice = Array.prototype.slice;

  // サポートブラウザ:
  // - Android4以上のChrome
  // - iOS9以上のSafari
  // (注意) iOS8以前のSafariはSyntax Errorが発生し、広告は表示されない

  function getHTMLTemplate() {
    // 広告のHTMLを変更する場合はこのテンプレートを修正する
    // サポートしているassetsのマクロ
    // {IMAGE_SRC} :       広告画像URL
    // {TITLE}:            広告タイトル
    // {BODY_TEXT}:        広告の本文
    // {PRODUCT_NAME}:     サービス・商品名
    // {ADVERTISER_NAME}:  広告主名
    // {LANDING_URL}:      広告タップ時の遷移先URL
    // {DISCLOSURE}:       PR表記 この項目は広告タグの `data-disclosure-label` attributeで設定する
    // @see: https://github.com/zucks/ZucksAdNetworkDocuments/blob/master/webapi/Zucks-Ad-Network-Native-api-specification-v2.md#response-body
    // (注意) リンクボタン設置時のテキスト は未サポート
    return `
      <a href="{LANDING_URL}" target="_blank">
        <div>
          <div>
            <img class="zucks-native-image" src="{IMAGE_SRC}" />
          </div>
          <div class="zucks-native-description">
            <p class="zucks-native-title">{TITLE}</p>
            <div class="zucks-native-row">
              <div class="zucks-native-text">
                <div>{BODY_TEXT}</div>
              </div>
            </div>
            <div class="zucks-native-row zucks-native-sponsored">
              <div>
                <p>{PRODUCT_NAME}</p>
              </div>
              <div>
                <p>{ADVERTISER_NAME}</p>
              </div>
              <div>
                <p>{DISCLOSURE}</p>
              </div>
            </div>
          </div>
        </div>
      </a>`;
  }

  function getFillerHTML() {
    // フィラーが必要な場合は、ここでフィラーのHTMLを返すように修正する
    return '';
  }

  function renderHTML(element, assets) {
    var disclosureAttribute = 'data-disclosure-label';
    var defaultDisclosure = '[PR]';
    var nativeHTML;
    var disclosure = '';
    if (assets.status === 'ok') {
      disclosure = element.getAttribute(disclosureAttribute) || defaultDisclosure;
      nativeHTML = getHTMLTemplate()
        .replace(/{IMAGE_SRC}/g, assets.image_src)
        .replace(/{TITLE}/g, assets.title)
        .replace(/{BODY_TEXT}/g, assets.body_text)
        .replace(/{PRODUCT_NAME}/g, assets.product_name)
        .replace(/{ADVERTISER_NAME}/g, assets.advertiser_name)
        .replace(/{LANDING_URL}/g, assets.landing_url)
        .replace(/{DISCLOSURE}/g, disclosure);
    } else {
      nativeHTML = getFillerHTML();
    }

    element.innerHTML = `
      <div class="zucks-native">
        ${nativeHTML}
        <img style="display: none" src="${assets.imp_url}&i=1" />
      </div>`;
  }

  function renderAd(frameIdAttribute, element) {
    var frameid = element.getAttribute(frameIdAttribute);
    var url = `https://sh.zucks.net/opt/native/api/v2?frameid=${frameid}`;
    var xhr = new XMLHttpRequest();

    element.style.textDecoration = 'none';
    xhr.open('GET', url, true);
    xhr.withCredentials = true;
    xhr.onload = function () {
      if (xhr.status === 200) {
        try {
          renderHTML(element, JSON.parse(xhr.responseText));
        } catch (e) {
          element.innerHTML = getFillerHTML();
        }
      } else {
        element.innerHTML = getFillerHTML();
      }
    };
    xhr.send();
  }

  class AdRenderer {
    push() {
      var frameIdAttribute = 'data-zucks-frame-id';
      var renderAdBindFrameId = renderAd.bind(undefined, frameIdAttribute);
      slice.call(document.getElementsByTagName('ins'))
        .filter(function (element) {
          return element.hasAttribute(frameIdAttribute) && !element.hasChildNodes();
        })
        .forEach(renderAdBindFrameId);
    }
  }

  if (window.adsbyzucks === undefined
      || window.adsbyzucks === null
      || Array.isArray(window.adsbyzucks)) {
    window.adsbyzucks = new AdRenderer();
    window.adsbyzucks.push();
  }
}());

.zucks-native {
  white-space: nowrap;
  font-size: 0;
}
.zucks-native a > div > div {
  display: inline-block;
}
.zucks-native .zucks-native-description {
    height: 50px;
}
.zucks-native p {
    margin: 0px;
}
.zucks-native .zucks-native-image {
    float:left;
    width: 50px;
    margin-right: 5px;
}
.zucks-native :-webkit-any-link {
    text-decoration: none !important;
}
.zucks-native .zucks-native-title {
    font-weight:bold;
    font-size: 11px;
    text-decoration: underline;
    color: #000;
    word-wrap: break-word;
    display: inline-block;
    float: left;
    height: 18px;
}
.zucks-native .zucks-native-row {
    display: table;
    width: 100%;
}
.zucks-native .zucks-native-row > div {
    display: table-cell;
}
.zucks-native-text {
    font-size: 10px;
    color: #666;
    float: left;
    margin-right: 5px;
    height:17px;
}
.zucks-native .zucks-native-text > div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height:1.2;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    white-space: normal;
}
.zucks-native .zucks-native-sponsored {
    color: #999;
    font-size: 8px;
    table-layout: fixed;
}
.zucks-native .zucks-native-sponsored > div {
    vertical-align: bottom;
}
.zucks-native .zucks-native-sponsored p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height: 15px;
}