<dpz-midokoro>
    <raw ref="raw" content={ content } />

    <script>
        const self = this;
        $.getJSON("/api/dpz/getStackContent/Midokoro", function(data) {
            self.content = data.body;
            self.update();
        });
    </script>
</dpz-midokoro>

<dpz-headline-today>
    <p>
        <ul>
            <virtual each={ item, i in items } no-reorder>
                <li if={ i < 6 }>
                    <span>{ moment(item.pubDate).format('HH:mm') }</span>
                    <a href="{ item.permalink }" if="{ moment().isSameOrAfter(item.pubDate) }">
                        { item.title }
                    </a>
                    <p if="{ !moment().isSameOrAfter(item.pubDate) }" style="margin-left: 3.5em; display: block; margin-bottom: 0;">
                        { item.title }
                    </p>
                </li>
            </virtual>
            <virtual if={ items.length > 6 }>
                <p>ほか{ items.length - 6 }本</p>
            </virtual>
        </ul>
    </p>

    <script>
        this.items = [];
        const self = this;
        $.getJSON("/api/dpz/headline/today", function(data) {
            self.items = data;
            self.update();
        });
    </script>
</dpz-headline-today>

<dpz-midokoro-sub>
    <raw content={ content } />

    <script>
        const self = this;
        $.getJSON("/api/dpz/getStackContent/MidokoroSubPC", function(data) {
            self.content = data.body;
            self.update();
        });
    </script>
</dpz-midokoro-sub>

<dpz-headline>
    <virtual each={ item, i in items } no-reorder>
        <headline-item-blog
            if={ item.isBlog }
            permalink={ item.permalink }
            permalink_noschema={ item.permalink_noschema }
            title={ item.title }
            description={ item.description }
            thumbnail={ item.thumbnail }
            avator={ item.avator }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-tanoshisa
            if={ item.isTanoshisa }
            permalink={ item.permalink }
            permalink_noschema={ item.permalink_noschema }
            title_image={ item.title_image }
            title={ item.title }
            description={ item.description }
            main_image={ item.main_image }
            avator={ item.avator }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-special
            if={ item.isPost && !item.isSmallPost }
            corner={ item.corner }
            permalink={ item.permalink }
            permalink_noschema={ item.permalink_noschema }
            title_image={ item.title_image }
            title={ item.title }
            description={ item.description }
            main_image={ item.main_image }
            avator={ item.avator }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-youtube
            if={ item.isYouTube }
            permalink={ item.permalink }
            title={ item.title }
            description={ item.description }
            main_image={ item.main_image }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-repost
            if={ item.isRepost }
            permalink={ item.permalink }
            corner={ item.corner }
            title={ item.title }
            description={ item.description }
            main_image={ item.main_image }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-small
            if={ item.isSmallPost }
            permalink={ item.permalink }
            title={ item.title }
            corner={ item.corner }
            description={ item.description }
            thumbnail={ item.thumbnail }
            author={ item.author }
            rel={ item.rel }
            pubdate={ item.pubDate } />
        <headline-item-adsense-1
                if={i+1 === 5}/>
        <headline-item-adsense-2
                if={i+1 === 10}/>
        <headline-item-adsense-3
                if={i+1 === 15}/>
        <headline-item-adsense-4
                if={i+1 === 20}/>
        <headline-item-adsense-5
                if={i+1 === 25}/>
        <headline-item-adsense-6
                if={i+1 === 30}/>
    </virtual>
    <p class="loadmore"><a href="#" onclick={ loadMore }>もっと見る</a></p>
    <p class="backnumber"><a href="/kiji">バックナンバー</a></p>

    <script>
        const self = this;
        let page = 1;

        loadMore(e) {
            e.preventDefault();
            page = page + 1;
            $.getJSON("/api/dpz/headline/page/" + page, function(data) {
                self.items = [...self.items, ...data];
                self.update();
            });
        }

        $.getJSON("/api/dpz/headline", function(data) {
            self.items = data;
            self.update();
        });
    </script>
</dpz-headline>

<headline-item-adsense-1>
    <!-- /21785324946/dpz_pc_top_mid_01_728x90 -->
    <div id='div-gpt-ad-1551279008810-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279008810-0'); });
        </script>
    </div>
</headline-item-adsense-1>

<headline-item-adsense-2>
    <!-- /21785324946/dpz_pc_top_mid_02_728x90 -->
    <div id='div-gpt-ad-1551279038946-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279038946-0'); });
        </script>
    </div>
</headline-item-adsense-2>

<headline-item-adsense-3>
    <!-- /21785324946/dpz_pc_top_mid_03_728x90 -->
    <div id='div-gpt-ad-1551279145837-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279145837-0'); });
        </script>
    </div>
</headline-item-adsense-3>

<headline-item-adsense-4>
    <!-- /21785324946/dpz_pc_top_mid_04_728x90 -->
    <div id='div-gpt-ad-1551279219496-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279219496-0'); });
        </script>
    </div>
</headline-item-adsense-4>

<headline-item-adsense-5>
    <!-- /21785324946/dpz_pc_top_mid_05_728x90 -->
    <div id='div-gpt-ad-1551279260645-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279260645-0'); });
        </script>
    </div>
</headline-item-adsense-5>

<headline-item-adsense-6>
    <!-- /21785324946/dpz_pc_top_mid_06_728x90 -->
    <div id='div-gpt-ad-1551279294112-0' style='height:90px; width:728px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279294112-0'); });
        </script>
    </div>
</headline-item-adsense-6>


<headline-item-special>
    <section class="unit new">
        <div class="corner">{ opts.corner }</div>
        <div class="module">
            <div class="module_inner">
                <a class="main_link" href="{ opts.permalink }" rel="{ opts.rel }">
                    <h1>
                        { opts.title }
                    </h1>
                    <h2 class="ttl_img">
                        <img loading="lazy" if={ opts.main_image } is="lazyload-image" src="{ opts.main_image }" border="0" alt="">
                    </h2>
                </a>
                <div class="detail pkg">
                    <p class="writer">
                        <img loading="lazy" if={ opts.avator } src="{ opts.avator }" alt="{ opts.author }" title="{ opts.author }">
                    </p>
                    <div class="lead_area">
                        <p class="lead">
                            <a href="{ opts.permalink }" rel="{ opts.rel }">
                                <span class="text">{ opts.description }<span if={ opts.author }>({ opts.author })</span></span>
                                <span class="data" if={ opts.pubdate }>({ moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                            </a>
                        </p>
                        <ul class="sns_list lazyul">
                            <li class="twitter">
                                <a href="https://twitter.com/intent/tweet?text={ opts.title }&url={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">ツイート</a>
                            </li>
                            <li class="fb">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">シェア</a>
                            </li>
                            <li class="b-hatena">
                                <a href="https://b.hatena.ne.jp/add?mode=confirm&url={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">ブックマーク</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</headline-item-special>

<headline-item-blog>
    <div class="unit_point pptv">
        <div class="module">
            <div class="module_inner pkg">
                <a class="img_area dpq" href="{ opts.permalink }" rel="{ opts.rel }" if={ opts.thumbnail }><img loading="lazy" src="{ opts.thumbnail }" alt="{ opts.title }" title="{ opts.title }" width="94"></a>
                <div class="lead_area dpq">
                    <p class="ttl"><a href="/dpq"><span>編集部日記</span></a></p>
                    <ul>
                        <li>
                            <a href="{ opts.permalink }" rel="{ opts.rel }">
                                <span class="text" if={ opts.title }>{ opts.title }</span>
                                <span class="lead" if={ opts.description }>{ opts.description }</span>
                                <span class="writer" if={ opts.author }>({ opts.author })</span>
                                <span class="data" if={ opts.pubdate }>({ moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</headline-item-blog>

<headline-item-tanoshisa>
    <section class="unit post">
        <div class="corner">
            <a href="/tanoshisa"><img loading="lazy" src="/img_top/tanoshisa_topside2.jpg" alt="日曜たのしさ一万尺" title="日曜たのしさ一万尺">日曜日のたのしさを一万尺にも二万尺にも倍増させる投稿コーナー「日曜たのしさ一万尺」</a>
        </div>
        <div class="module">
            <div class="module_inner">
                <a class="main_link" href="{ opts.permalink }" rel="{ opts.rel }">
                    <h1>
                        { opts.title }
                    </h1>
                    <h2 class="ttl_img">
                        <img loading="lazy" if={ opts.main_image } is="lazyload-image" src="{ opts.main_image }" border="0" alt="">
                    </h2>
                </a>
                <div class="detail pkg">
                    <p class="writer">
                        <img loading="lazy" if={ opts.avator } src="{ opts.avator }" alt="{ opts.author }" title="{ opts.author }">
                    </p>
                    <div class="lead_area">
                        <p class="lead">
                            <a href="{ opts.permalink }" rel="{ opts.rel }">
                                <span class="text">{ opts.description }<span if={ opts.author }>({ opts.author })</span></span>
                                <span class="data" if={ opts.pubdate }>({ moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                            </a>
                        </p>
                        <ul class="sns_list lazyul">
                            <li class="twitter">
                                <a href="https://twitter.com/intent/tweet?text={ opts.title }&url={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">ツイート</a>
                            </li>
                            <li class="fb">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">シェア</a>
                            </li>
                            <li class="b-hatena">
                                <a href="https://b.hatena.ne.jp/add?mode=confirm&url={ opts.permalink }" target="_blank" onclick="window.open(this.href,'newwindow', 'width=500,height=400'); return false;">ブックマーク</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</headline-item-tanoshisa>

<headline-item-youtube>
    <div class="unit_point pptv">
        <div class="module">
            <div class="module_inner">
                <a if={ opts.main_image } class="img_area tvpopup" href="{ opts.permalink }" rel="{ opts.rel }">
                    <img loading="lazy" src="{ opts.main_image }" height="70" width="94" alt="サムネイル" title="サムネイル" />
                </a>
                <div class="lead_area">
                    <p class="ttl"><a href="{ opts.permalink }"><span class="pptv_logo">プープーテレビ</span><span>１分くらいの動画を毎日更新！</span></a></p>
                    <ul>
                        <li>
                            <a class="tvpopup" href="{ opts.permalink }" rel="{ opts.rel }">
                                <span class="text">{ opts.title }<span if={ opts.author }>({ opts.author })</span></span>
                                <span class="data" if={ opts.pubdate }>({ moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</headline-item-youtube>

<headline-item-repost>
    <div class="unit_point re-air">
        <div class="module">
            <div class="module_inner">
                <a if={ opts.main_image } class="img_area" href="{ opts.permalink }" rel="{ opts.rel }">
                    <img loading="lazy" src="{ opts.main_image }" height="70" width="94" alt="サムネイル" title="サムネイル" />
                </a>
                <div class="lead_area">
                    <p class="ttl">{ opts.corner }：</p>
                    <ul>
                        <li>
                            <a href="{ opts.permalink }" rel="{ opts.rel }">
                                <span class="text">{ opts.title }<span if={ opts.author }>({ opts.author })</span></span>
                                <span class="data" if={ opts.pubdate }>(初出 { moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</headline-item-repost>

<headline-item-small>
    <div class="unit_point re-air">
        <div class="module">
            <div class="module_inner">
                <a if={ opts.thumbnail } class="img_area" href="{ opts.permalink }" rel="{ opts.rel }">
                    <img loading="lazy" src="{ opts.thumbnail }" width="90" alt="サムネイル" title="サムネイル" />
                </a>
                <div class="lead_area">
                    <p class="ttl">{ opts.corner }</p>
                    <ul>
                        <li>
                            <a href="{ opts.permalink }" rel="{ opts.rel }">
                            <span class="text">{ opts.title }</span>
                            </a>
                            <span class="data">{ opts.description }<span if={ opts.author }>({ opts.author })</span></span>
                            <span class="data" if={ opts.pubdate }>({ moment(opts.pubdate).format('YYYY.MM.DD HH:mm') })</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</headline-item-small>

<dpz-sidebar>
    <!-- /21785324946/dpz_pc_sidebar_01_300x250 -->
    <div id='div-gpt-ad-1551278312370-0' style='height:250px; width:300px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551278312370-0'); });
        </script>
    </div>
    <!-- 新着記事 -->
    <dpz-recentposts></dpz-recentposts>
    <!-- //新着記事 -->

    <div class="unit detail">
        <div class="module">
            <p class="mitekite_sub">
                <!-- /21785324946/dpz_pc_sidebar_04_300x250 -->
            <div id='div-gpt-ad-1551279180343-0' style='height:250px; width:300px;'>
                <script>
                    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551279180343-0'); });
                </script>
            </div>
            </p>
        </div>
    </div>

    <!-- 検索 -->
    <dpz-searchword></dpz-searchword>

    <!-- //検索 -->
    <!-- 今大人気の記事 -->
    <div id="_popIn_recommend_side"></div>
    <!-- /21785324946/dpz_pc_sidebar_02_300x250 -->
    <div id='div-gpt-ad-1551278372995-0' style='height:250px; width:300px;'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1551278372995-0'); });
        </script>
    </div>
    <script>
        window.addEventListener("load", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    </script>
    <!-- 広告企画 -->
    <dpz-adposts></dpz-adposts>
    <!-- //広告企画 -->
    <!-- メルマガ（うっかりデイリー） -->
    <dpz-subscribe if={ opts.subscribe }></dpz-subscribe>
    <!-- //メルマガ（うっかりデイリー） -->
    <!-- イベント情報 -->
    <dpz-eventinfo></dpz-eventinfo>
    <!-- //イベント情報 -->
    <dpz-freebox></dpz-freebox>
    <!-- お知らせ -->
    <dpz-blogposts></dpz-blogposts>
    <!-- //お知らせ -->
    <div class="unit unit_none_bkgd detail ">
        <div class="module">
            <p class="random"><a href="javascript:void(0);" onclick="javascript:window.open('/component/jigoku_pop.htm', 'mugen', 'width=240, height=479, menubar=no, toolbar=no, scrollbars=yes, resizable=no, status=no');return false;">ランダムリンク</a></p>
            <p class="pptv_sub"><a href="/puputv">プープーテレビ</a></p>
            <p class="okaimono banner_plan"><a href="/okaimono"><img src="/application/themes/dpz2018/img/okaimono-banner.jpg" alt="無性にほしくなるお買い物記事リスト"></a></p>
        </div>
    </div>
    <dpz-amazonsearch></dpz-amazonsearch>
    <!-- 書評 -->
    <dpz-bookreview></dpz-bookreview>
    <!-- //書評 -->
    <!-- //よりぬきDPZ -->
    <!-- 傑作選 -->
    <dpz-selection></dpz-selection>
    <!-- //傑作選 -->
    <!-- 投稿コーナー -->
    <dpz-posted></dpz-posted>
    <!-- //投稿コーナー -->
    <!-- デイリーの本 -->
    <dpz-books></dpz-books>
    <!-- //デイリーの本 -->
    <!-- はげます会 -->
    <div class="hagemasu-sidebar-widget">
        <div class="widget-area-main">
            <div class="widget-main-logo-wrap"><img loading="lazy" class="widget-main-logo-img" src="/application/themes/dpzsupport/img/logo-dpz-hagemasu.png" alt="デイリーポータルZをはげます会" width="264"></div>
            <p class="widget-main-join-text">有料ファンクラブ</p>
            <div class="widget-main-btns"><a class="widget-main-btn" href="https://dailyportalz.jp/hagemasu_goannai">はげます会とは？</a><a class="widget-main-btn" href="https://dailyportalz.jp/hagemasu">ログイン</a></div>
        </div>
        <dpz-chiramise></dpz-chiramise>
        <dpz-hagemasuposts></dpz-hagemasuposts>
        <dpz-hagemasu></dpz-hagemasu>
    </div>
    <!-- //はげます会 -->
    <!-- 懐かしの記事 -->
    <div class="unit_sub nostalgic" id="nostalgic">
        <div class="module">
            <h3><span>懐かしの記事</span></h3>
            <div class="module _inner">
                <div class="module_box">
                    <div class="top-tag">
                          <div id="logly-lift-4295861"></div>
                                                  <script charset="UTF-8">
                                                    (function(){
                                                      var _lgy_lw = document.createElement("script");
                                                      _lgy_lw.type = "text/javascript";
                                                      _lgy_lw.charset = "UTF-8";
                                                      _lgy_lw.async = true;
                                                      _lgy_lw.src= "https://l.logly.co.jp/lift_widget.js?adspot_id=4295861";
                                                      var _lgy_lw_0 = document.getElementsByTagName("script")[0];
                                                      _lgy_lw_0.parentNode.insertBefore(_lgy_lw, _lgy_lw_0);
                                                    })();
                                                    </script>
                    </div>
                    <div class="kiji-tag">
                        <div id="logly-lift-4295399"></div><script charset="UTF-8">
                                                  (function(){
                                                    var _lgy_lw = document.createElement("script");
                                                    _lgy_lw.type = "text/javascript";
                                                    _lgy_lw.charset = "UTF-8";
                                                    _lgy_lw.async = true;
                                                    _lgy_lw.src= "https://l.logly.co.jp/lift_widget.js?adspot_id=4295399";
                                                    var _lgy_lw_0 = document.getElementsByTagName("script")[0];
                                                    _lgy_lw_0.parentNode.insertBefore(_lgy_lw, _lgy_lw_0);
                                                  })();</script>
                    </div>
                </div>
            </div>
        </div>
        <script>
        this.on('mount', function() {
            if(CCM_CID == 1) {
                $('.kiji-tag').css({
                'display' : 'none'
                })
                } else {
                $('.top-tag').css({
                'display' : 'none'
                })
            }
        });

        </script>
    </div>
    <!-- sns -->
    <!-- <div class="unit_sub_sns"> -->
    <!--    <div class="fb-page" data-href="https://www.facebook.com/dailyportalz" data-tabs="timeline" data-width="300" data-height="420" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/dailyportalz"><a href="https://www.facebook.com/dailyportalz">デイリーポータルZ</a></blockquote></div></div> -->
    <!-- </div> -->
    <div class="unit_sub_sns">
        <a class="twitter-timeline" href="https://twitter.com/dailyportalz" data-aria-polite="assertive" data-height="600">@dailyportalzさんのツイート</a>
    </div>
    <!-- //sns -->

    <!-- ライター紹介 -->
    <dpz-writers>
        <div class="unit_sub writer">
            <div class="module">
                <h3><span>ライター紹介</span></h3>
                <div class="module _inner">
                    <div class="module_box">
                        <p class="link"><a href="/writer">ライター 一覧</a></p>
                        <p class="more"><a href="/writer/boshu">ライター募集はこちら</a></p>
                    </div>
                </div>
            </div>
        </div>
    </dpz-writers>
    <!-- //ライター紹介 -->

    <div id="_popIn_infeed"></div>

    <!-- /21766077787/dailyportalz/dpz_pc_adx_sidebar_sticky -->
    <div id='div-dpz-pc-sidebar-sticky' >
        <script>
            googletag.cmd.push(function() { googletag.display('div-dpz-pc-sidebar-sticky'); });
        </script>
    </div>

    this.on('mount',function(){
        let isFixed = false;
        document.addEventListener("scroll", function(event) {
            const vh = window.innerHeight || document.documentElement.clientHeight;
            const bodyRect = document.body.getBoundingClientRect();
            const content = document.querySelector('#contents');
            const contentRect = content.getBoundingClientRect();
            const sidebar = document.querySelector('#sub_contents');
            const sidebarRect = sidebar.getBoundingClientRect();
            const sidebarBottom = contentRect.top - bodyRect.top + sidebar.offsetHeight - vh + 120;

            if (contentRect.bottom > sidebarBottom) {
                if (isFixed && sidebarBottom > window.scrollY) {
                    sidebar.classList.remove('sticky');
                    isFixed = false;
                }
                if (!isFixed && sidebarRect.bottom < vh) {
                    sidebar.classList.add('sticky');
                    isFixed = true
                }
            }
        }, {passive: true});
    });
</dpz-sidebar>

<dpz-sharepost>
    <div class="unit_sub sub_sns">
        <div class="module">
            <h3><span>この記事を送る</span></h3>
            <div class="module_box">
                <ul class="social_button">
                    <li class="tw">
                        <a href="https://twitter.com/intent/tweet?text={ opts.title }&url={ opts.permalink }&hashtags=DPZ" target="_blank">ツイート</a>
                    </li>
                    <li class="fb">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={ opts.permalink }" target="_blank">シェア</a>
                    </li>
                    <li class="hb">
                        <a href="https://b.hatena.ne.jp/add?mode=confirm&url={ opts.permalink }" target="_blank">ブックマーク</a>
                    </li>
                    <li class="favorite">
                        <a href="#" class="fav-btn">
                            <img src="/application/themes/dpz2018/img/long_off.png" height="20px" class="notRated">
                            <img src="/application/themes/dpz2018/img/long_on.png" height="20px" class="isRated" style="display:none;">
                        </a>
                        <span class="help" style="display:none">お気に入り機能ははげます会会員専用機能です。<a href="/hagemasu_goannai">詳細はこちら</a></span>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <script>
        this.on('mount', function() {
            if (opts.rating) {
                if (opts.rating.isRated) {
                    $('.sub_sns .favorite a').addClass('rated');
                    $('.sub_sns .favorite a .isRated').show();
                    $('.sub_sns .favorite a .notRated').hide();
                }
                if (opts.rating.isRegistered) {
                    $('.sub_sns .favorite a').on('click', function(e) {
                        e.preventDefault();
                        $.ajax({
                            method: "POST",
                            url: opts.rating.link
                        }).done(function(data) {
                            console.log(data);
                            if ($('.sub_sns .favorite a').hasClass('rated')){
                                $('.sub_sns .favorite a').removeClass('rated');
                                $('.sub_sns .favorite a .isRated').hide();
                                $('.sub_sns .favorite a .notRated').show();
                            }else{
                                $('.sub_sns .favorite a').addClass('rated');
                                $('.sub_sns .favorite a .isRated').show();
                                $('.sub_sns .favorite a .notRated').hide();
                            }
                        }).fail(function(data) {
                            console.log(data);
                            $('.sub_sns .favorite a').removeClass('rated');
                            $('.sub_sns .favorite a .isRated').hide();
                            $('.sub_sns .favorite a .notRated').show();
                        });
                    });
                } else {
                    $('.sub_sns .favorite>a').on('click', function(e) {
                        e.preventDefault();
                        $('.sub_sns .favorite .help').show();
                    });
                }
            }
        });
    </script>
</dpz-sharepost>

<dpz-recentposts>
    <div class="unit_sub brand_new">
        <div class="module">
            <h3><span>新着記事</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <ul>
                        <li each={ items } no-reorder>
                            <img loading="lazy" if={ thumbnail } src={ thumbnail } alt={ title } width="60" height="60">
                            <div class="lead_area">
                                <p class="lead">
                                    <span class="text">{ title } ({ author })</span>
                                    <span class="data" if={ pubDate }>({ moment(pubDate).format('MM.DD HH:mm') })</span>
                                </p>
                            </div>
                            <a href={ permalink } rel={ rel }></a>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="more"><a href="/kiji">バックナンバー</a></p>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/headline/recent", function(data) {
            self.items = data.slice(0, 30);
            self.update();
        });
    </script>
</dpz-recentposts>

<dpz-blogposts>
    <div class="unit_sub info_sub">
        <div class="module">
            <h3><span>お知らせ</span></h3>
            <div class="module_box blog">
                <ul>
                    <li each={ items } no-reorder>
                        <a href={ permalink } rel={ rel }>
                            <span class="text">{ title }</span>
                            <span class="data" if={ pubDate }>({ moment(pubDate).format('MM.DD HH:mm') })</span>
                        </a>
                    </li>
                </ul>
            </div>
            <p class="more"><a href="/dpq">編集部日記</a></p>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/blogPosts", function(data) {
            self.items = data;
            self.update();
        });
    </script>
</dpz-blogposts>

<dpz-adposts>
    <div class="unit_sub ad_plan">
        <div class="module">
            <h3><span>広告企画</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <raw content={ content } />
                </div>
            </div>
            <p class="more"><a href="/about/collabo">広告企画のごあんない</a></p>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/getStackContent/SidebarAd", function(data) {
            self.content = data.body;
            self.update();
        });
    </script>
</dpz-adposts>

<dpz-kodashipost>
    <div class="unit_sub kodashi">
        <div class="module">
            <h3><span>小出し記事</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <ul>
                        <li each={ item, i in items } no-reorder>
                            <img loading="lazy" if={ item.thumbnail } src={ item.thumbnail } alt={ item.title } width="60" height="60">
                            <div class="lead_area">
                                <p class="lead">
                                    <span class="text">{ item.title } ({ item.author })</span>
                                    <span class="data" if={ item.pubDate }>({ moment(item.pubDate).format('MM.DD HH:mm') })</span>
                                </p>
                            </div>
                            <a href="{ item.permalink }" rel="{ item.rel }"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/kodashiPosts", function(data) {
            self.items = data.slice(0, 5);
            self.update();
        });
    </script>
</dpz-kodashipost>

<dpz-eventinfo>
    <div class="unit_sub event">
        <div class="module">
            <h3><span>イベント情報</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <ul>
                        <li class="banner">
                            <raw content={ content } />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/getStackContent/SidebarEvent", function (data) {
        self.content = data.body;
        self.update();
    });
    </script>
</dpz-eventinfo>

<dpz-bookreview>
    <div class="unit_sub review">
        <div class="module">
            <h3><span>書評</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <raw content={ content } />
                </div>
            </div>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/getStackContent/SidebarBookReview", function (data) {
        self.content = data.body;
        self.update();
    });
    </script>
</dpz-bookreview>

<dpz-selection>
    <div class="unit_sub selection">
        <div class="module">
            <h3><span>傑作選</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <ul>
                        <li each={ items } no-reorder>
                            <div class="lead_area">
                                <p class="lead">
                                    <span class="text">{ title }</span>
                                    <span class="data" if={ pubDate }>({ moment(pubDate).format('MM.DD HH:mm') })</span>
                                </p>
                            </div>
                            <a href="{ permalink }" rel="{ rel }"></a>
                        </li>
                    </ul>
                </div>
                <p class="more"><a href="/selection/popular">人気まとめ</a></p>
            </div>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/recentPosts/selection", function(data) {
            self.items = data.slice(0, 4);
            self.update();
        });
    </script>
</dpz-selection>

<dpz-posted>
    <div class="unit_none_bkgd">
        <p class="banner_plan"><a href="https://dailyportalz.jp/dpq/genko-bosyu"><img src="/application/themes/dpz2018/img/genkobosyu300.jpg" alt="原稿募集　あなたの力作を受付中。優秀作は記事掲載。"></a></p>
    </div>
    <div class="unit_sub posted">
        <div class="module">
            <h3><span>投稿コーナー</span></h3>
            <div class="module_inner">
                <div class="module_box">
                    <p class="banner_plan"><a href="https://dailyportalz.jp/dpq/call-for-super-short-articles"><img src="/application/themes/dpz2018/img/konetabosyu.png" alt="コネタも募集中"></a></p>
                    <ul>
                        <li each={ item, i in items } no-reorder>
                            <img loading="lazy" if={ item.main_image && i < 1 } src={ item.main_image } alt={ item.title } width="276">
                            <div class="lead_area">
                                <p class="lead">
                                    <span class="text">{ item.title }</span>
                                    <span class="data" if={ item.pubDate }>({ moment(item.pubDate).format('MM.DD HH:mm') })</span>
                                </p>
                            </div>
                            <a href="{ item.permalink }" rel="{ item.rel }"></a>
                        </li>
                    </ul>
                </div>
                <p class="more"><a href="https://dailyportalz.jp/b/tanoshisa/">企画いちらん</a></p>
            </div>
        </div>
    </div>

    <script>
        const self = this;
        $.getJSON("/api/dpz/userPosts", function(data) {
            self.items = data.slice(0, 4);
            self.update();
        });
    </script>
</dpz-posted>

<dpz-books>
    <div class="unit_sub dpz_book">
        <div class="module">
             <h3><span>関連書籍</span></h3>
             <div class="module_inner">
                <div class="module_box">
                    <raw content={ content } />
                </div>
            </div>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/getStackContent/SidebarBooks", function (data) {
        self.content = data.body;
        self.update();
    });
    </script>
</dpz-books>

<dpz-searchword>
    <div class="unit sub_search">
        <div class="module">
            <form id="cse-search-box" action="//google.com/cse" accept-charset="UTF-8">
                <input type="hidden" name="cx" value="partner-pub-7606411586889028:8688168104" />
                <ul>
                    <li class="text">
                    <h4 class="searchTitle">サイト内検索</h4>
                        <input type="text" id="text" name="q" maxlength="200" value={ search } onfocus="if (this.value != 'サイト内検索') this.value = '';" />
                        <input type="image" name="sa" value="Search" src="/application/themes/dpz2018/img/search_btn.gif" onmouseover="this.src='/application/themes/dpz2018/img/search_btn_on.gif' " alt="検索する" align="top"/>
                        <img loading="lazy" src="//www.google.com/cse/images/google_custom_search_smwide.gif">
                        <h4 class="searchTitle">よく検索されているワード</h4>
                        <div id="queries" class="queries">
                            <virtual each={ query, i in queries } no-reorder>
                                <a href="#" class="query">{ query }</a>
                            </virtual>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/searchWords", function (data) {
        self.search = data.word;
        self.queries = data.words;
        self.update();
    });

    this.on('mount', function() {
        $('#queries .query').on('click', function (e) {
            e.preventDefault();
            $('#cse-search-box input[name=q]').val(this.innerText);
            $('#cse-search-box').submit();
        });
    });
    </script>
</dpz-searchword>

<dpz-subscribe>
    <div class="unit_sub mailmagazine" id="sidebar_ukkari">
        <div class="module">
            <h3><a href="https://dailyportalz.jp/about/mailmag"><span>メルマガ（うっかりデイリー）</span></a></h3>
            <div class="module_box">
            <p>編集部のリレーコラム、人気記事やイベント情報などをおとどけします。</p>
                <p class="alert is-error"></p>
                <p class="alert is-success"></p>
                <form>
                    <input type="hidden" name="ccm_token" value="" />
                    <input type="email" name="ukkari_email" placeholder="メールアドレス">
                    <button>購読</button>
                </form>
                <p class="more mailBrowsing"><a href="https://dailyportalz.jp/about/mailmag">試し読みはこちら</a></p>
            </div>
        </div>
    </div>

    this.on('mount', function() {
        $(".unit_sub.mailmagazine form input[type=email]").focus(function () {
            $.getJSON('/api/ukkari', function (data) {
                $('.unit_sub.mailmagazine form input[type=hidden]').attr('value', data.token)
            });
        });
        window.dataLayer = window.dataLayer || [];
        $('.unit_sub.mailmagazine form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/api/ukkari',
                method: 'post',
                dataType: 'json',
                data: $(this).serialize()
            }).done(function(msg){
                if (msg.error) {
                    $('.unit_sub.mailmagazine .alert.is-error').text(msg.error).fadeIn();
                }
                if (msg.message) {
                    $('.unit_sub.mailmagazine form').fadeOut();
                    $('.unit_sub.mailmagazine .alert.is-error').fadeOut();
                    $('.unit_sub.mailmagazine .alert.is-success').text(msg.message).fadeIn();
                    dataLayer.push({'event': 'mailMagSubscribed'});
                }
            });
        });
    });
</dpz-subscribe>

<dpz-hagemasu>
    <raw content={ content } />

    <script>
    const self = this;
    $.getJSON("/api/dpz/getStackContent/SidebarHagemasu", function (data) {
        self.content = data.body;
        self.update();
    });
    </script>
</dpz-hagemasu>

<dpz-chiramise>
<p class="hp-title widget-area-arrow-list">チラ見せはげます会</p>
    <div class="module">
        <div class="module_inner">
            <div class="module_box">
                <ul>
                    <li each={ items } no-reorder>
                        <a href={ permalink }>
                        <img loading="lazy" if={ thumbnail } src={ thumbnail } alt={ title } width="60" height="60">
                        <div class="lead_area">
                            <p class="lead">
                                <span class="text">{ title } ({ author })</span>
                                <span class="data" if={ pubDate }>({ moment(pubDate).format('MM.DD HH:mm') })</span>
                            </p>
                        </div>
                        </a>
                    </li>
                </ul>
                <p class="hg-link"><a href="/backnumber/chiramise-hagemasu">＞＞チラ見せ一覧</a></p>
            </div>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/chiramisePosts", function (data) {
        self.items = data;
        self.update();
    });
    </script>
</dpz-chiramise>

<dpz-hagemasuposts>
    <p class="hp-title">はげます会更新情報（会員限定）</p>
    <div class="module">
        <div class="module_inner">
            <div class="module_box">
                <ul>
                    <li each={ items } no-reorder>
                        <a href={ permalink }>
                        <img loading="lazy" if={ thumbnail } src={ thumbnail } alt={ title } width="60" height="60">
                        <div class="lead_area">
                            <p class="lead">
                                <span class="text">{ title } ({ author })</span>
                                <span class="data" if={ pubDate }>({ moment(pubDate).format('MM.DD HH:mm') })</span>
                            </p>
                        </div>
                        </a>
                    </li>
                </ul>
                <p class="hg-link"><a href="/hagemasu_goannai">＞＞はげます会へ</a></p>
            </div>
        </div>
    </div>

    <script>
    const self = this;
    $.getJSON("/api/dpz/hagemasuPosts", function (data) {
        self.items = data;
        self.update();
    });
    </script>
</dpz-hagemasuposts>

<dpz-backnumber-bottom>
    <virtual each={ item, i in items } no-reorder>
        <div class="headline-row" if={i === 10}>
            <!-- /21785324946/dpz_pc_article_backnumber_01_left -->
            <div id='div-gpt-ad-1686278167955-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278167955-0'); });</script>
            </div>
            <!-- /21785324946/dpz_pc_article_backnumber_01_right -->
            <div id='div-gpt-ad-1686278191477-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278191477-0'); });</script>
            </div>
        </div>
        <div class="headline-row" if={i === 20}>
            <!-- /21785324946/dpz_pc_article_backnumber_02_left -->
            <div id='div-gpt-ad-1686278219325-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278219325-0'); });</script>
            </div>
            <!-- /21785324946/dpz_pc_article_backnumber_02_right -->
            <div id='div-gpt-ad-1686278248282-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278248282-0'); });</script>
            </div>
        </div>
        <div class="headline-row" if={i === 30}>
            <!-- /21785324946/dpz_pc_article_backnumber_03_left -->
            <div id='div-gpt-ad-1686278268192-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278268192-0'); });</script>
            </div>
            <!-- /21785324946/dpz_pc_article_backnumber_03_right -->
            <div id='div-gpt-ad-1686278292478-0'>
                <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1686278292478-0'); });</script>
            </div>
        </div>
        <div class="headline-row">
            <div class="td-py td-thumb">
                <a href="{ item.permalink }" rel="{ item.rel }">
                    <img loading="lazy" if={ item.thumbnail } src={ item.thumbnail } width="100" height="100" border="0" alt="サムネイル">
                </a>
            </div>
            <div class="td-pl td-py">
                <p class="tx-format">
                    <a class="headline" href="{ item.permalink }" rel="{ item.rel }">{ item.title }</a>
                    { item.description } ({ item.author })
                    [{ item.pubDate }]
                </p>
            </div>
        </div>
    </virtual>

    <script>
        const self = this;
        $.getJSON("/api/dpz/headline/recent", function(data) {
            self.items = data;
            self.update();
            googletag.cmd.push(function() { googletag.pubads().refresh(topPageSlots) });
        });
    </script>
</dpz-backnumber-bottom>

<dpz-freebox>
    <div class="unit_none_bkgd">
        <raw content={ content } />
    </div>
    
    <script>
        const self = this;
        $.getJSON("/api/dpz/getStackContent/SidebarFreeBox", function(data) {
            self.content = data.body;
            self.update();
        });
    </script>
</dpz-freebox>


<dpz-amazonsearch>
    <div class="unit_none_bkgd sub_search_amazon">
        <div class="module">
            <h4 class="searchTitle">Amazon検索</h4>
            <form class="amazon_form" method="get" action="https://www.amazon.co.jp/s/ref=assoc_res_sw_view_all" target="_blank">
                <input type="hidden" value="itscom-22" name="tag">
                <input type="hidden" value="w14" name="link_code">
                <input type="hidden" value="" name="linkID">
                <input type="hidden" value="" name="linkId">
                <input type="hidden" value="UTF-8" name="_encoding">
                <input type="text" name="field-keywords" id="field-keywords" placeholder="Amazonで検索" style="width: 210px;">
                <input id="submit" type="submit" value="検索">
             </form>
        </div>
    </div>

</dpz-amazonsearch>

<raw>
    <div></div>

    this.root.innerHTML = opts.content
    this.on('updated', function() {
        this.root.innerHTML = opts.content
    })
</raw>
