https://qwerty.work/categories/javascript/ Recent content in Javascript on qwerty.work Hugo -- gohugo.io ja-JP Thu, 25 Apr 2024 22:52:36 +0900 https://qwerty.work/post/2024/04/js-browser-display-area/ Thu, 25 Apr 2024 22:52:36 +0900 https://qwerty.work/post/2024/04/js-browser-display-area/ <h2 id="ブラウザ表示領域のサイズと縦横比">ブラウザ表示領域のサイズと縦横比 </h2><h3 id="現在のブラウザ表示領域">現在のブラウザ表示領域 </h3><pre><code>- - - var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var aspectRatio = width + &quot;:&quot; + height; var aspectRatioFraction = width / height; document.getElementById(&quot;size&quot;).textContent = &quot;Width: &quot; + width + &quot;, Height: &quot; + height; document.getElementById(&quot;aspectRatio&quot;).textContent = &quot;Aspect Ratio (width:height): &quot; + width + &quot;:&quot; + height; document.getElementById(&quot;aspectRatioFraction&quot;).textContent = &quot;Aspect Ratio (width/height): &quot; + aspectRatioFraction.toFixed(2); // 2桁までの小数点以下の数字を表示 </code></pre> <h2 id="スクリプト">スクリプト </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">ブラウザ表示領域のサイズと縦横比</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;size&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;aspectRatio&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;aspectRatioFraction&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">innerWidth</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">||</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">clientWidth</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">||</span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">clientWidth</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">innerHeight</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">||</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">clientHeight</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">||</span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">clientHeight</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">aspectRatio</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;:&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">height</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">aspectRatioFraction</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">height</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;size&#34;</span>).<span style="color:#a6e22e">textContent</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Width: &#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;, Height: &#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">height</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;aspectRatio&#34;</span>).<span style="color:#a6e22e">textContent</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Aspect Ratio (width:height): &#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;:&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">height</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;aspectRatioFraction&#34;</span>).<span style="color:#a6e22e">textContent</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Aspect Ratio (width/height): &#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">aspectRatioFraction</span>.<span style="color:#a6e22e">toFixed</span>(<span style="color:#ae81ff">2</span>); <span style="color:#75715e">// 2桁までの小数点以下の数字を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div> https://qwerty.work/post/2023/12/js-automatic-quote-form/ Tue, 12 Dec 2023 13:14:18 +0900 https://qwerty.work/post/2023/12/js-automatic-quote-form/ <h2 id="guiで項目を設置したらコードを出力してくれるサイト">GUIで項目を設置したらコードを出力してくれるサイト </h2><p>普通のJavascriptとHTML/CSSを出力してくれる。</p> <div class="link-card"> <a href="https://www.mitsumori-js.com/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.mitsumori-js.com/" alt="https://www.mitsumori-js.com/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.mitsumori-js.com/</span> <span class="link-card-url">https://www.mitsumori-js.com/</span> </div> </a> </div> <h2 id="vuejsをベースにしたサンプル">Vue.jsをベースにしたサンプル </h2> <div class="link-card"> <a href="https://study.katsumaru.blog/vue/quote.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://study.katsumaru.blog/vue/quote.php" alt="https://study.katsumaru.blog/vue/quote.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://study.katsumaru.blog/vue/quote.php</span> <span class="link-card-url">https://study.katsumaru.blog/vue/quote.php</span> </div> </a> </div> https://qwerty.work/post/2022/09/css-js-content-animation/ Wed, 28 Sep 2022 20:04:10 +0900 https://qwerty.work/post/2022/09/css-js-content-animation/ <p>スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。</p> <h3 id="waypointsjs--animatecss">Waypoints.js &amp; Animate.css </h3><p><a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>と<a class="link" href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener" >Animate.css</a>を併用して実現します。<a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>はjQueryが必要です。</p> <h3 id="waypointsjs">Waypoints.js </h3><p>指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。</p> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/" alt="http://imakewebthings.com/waypoints/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/</span> </div> </a> </div> <p>上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内の<code>jquery.waypoints.js</code>または<code>jquery.waypoints.min.js</code>を読み込んで使用します。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.waypoints.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><h4 id="リファレンス">リファレンス </h4> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/api/waypoint/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/api/waypoint/" alt="http://imakewebthings.com/waypoints/api/waypoint/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/api/waypoint/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/api/waypoint/</span> </div> </a> </div> <h3 id="animatecss">Animate.css </h3><p>HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。</p> <div class="link-card"> <a href="https://animate.style/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://animate.style/" alt="https://animate.style/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://animate.style/</span> <span class="link-card-url">https://animate.style/</span> </div> </a> </div> <p>ダウンロードしたzipファイルを解凍後、<code>animate.css</code>または<code>animate.min.css</code>をHTMLの内で読み込みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;animate.css&#34;</span>&gt; </span></span></code></pre></div><h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/animate-css/animate.css/releases/tag/3.5.1" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/animate-css/animate.css/releases/tag/3.5.1" alt="https://github.com/animate-css/animate.css/releases/tag/3.5.1" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> <span class="link-card-url">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> </div> </a> </div> <h3 id="サンプルソース">サンプルソース </h3><h4 id="html部分">HTML部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ja&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Animate Test&lt;/<span style="color:#f92672">title</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#f92672">body</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: repeating-linear-gradient(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">deg</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ededed</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#dedede</span> <span style="color:#ae81ff">80</span><span style="color:#66d9ef">px</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">boxes</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">80</span><span style="color:#66d9ef">vh</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">box</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#666</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">em</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">4</span><span style="color:#66d9ef">em</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">animated</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*最初は非表示*/</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">opacity</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;boxes&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 01&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 02&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 03&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 04&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 05&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 06&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 07&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 08&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 09&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 10&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;main.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt; </span></span></code></pre></div><h4 id="javascript部分">Javascript部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// animatedクラスの付いた要素にwaypointを登録 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.animated&#39;</span>).<span style="color:#a6e22e">waypoint</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">handler</span>(<span style="color:#a6e22e">direction</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来るとここが実行される </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">direction</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;down&#39;</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * 下方向のスクロール </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始 </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">element</span>).<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;fadeInUp&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * waypointを削除することで、この要素に対しては </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * これ以降handlerが呼ばれなくなる </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">destroy</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来たらhandlerを実行 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offset</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;50%&#39;</span>, </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/09/jmobile-detect-js/ Wed, 28 Sep 2022 18:38:54 +0900 https://qwerty.work/post/2022/09/jmobile-detect-js/ <h3 id="mobile-detectjs">mobile-detect.js </h3><p><a class="link" href="http://hgoebl.github.io/mobile-detect.js/" target="_blank" rel="noopener" >mobile-detect.js</a>は、ユーザーが使っているブラウザがモバイルブラウザかどうかを判定するオープンソースライブラリです。</p> <p>リッチなサイトではメインビジュアル等に動画を設置することがありますが、モバイル端末では通信速度や端末のスペックが十分でない場合も多く、また動画の自動再生（``要素の<code>autoplay</code>属性）も不可能だったり制限したいときがあります。</p> <p>最近のモバイル製品はパソコン並みに画面解像度が高かったりすので、メディアクエリでは対応ができません。このライブラリを使用すれば、<strong>画面解像度が大きくてもモバイルブラウザを判別できる</strong>ため、モバイルブラウザからアクセスだった場合、動画は非表示にして写真を替わりに表示するなどの制御ができます。</p> <h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="http://hgoebl.github.io/mobile-detect.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://hgoebl.github.io/mobile-detect.js/" alt="http://hgoebl.github.io/mobile-detect.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://hgoebl.github.io/mobile-detect.js/</span> <span class="link-card-url">http://hgoebl.github.io/mobile-detect.js/</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><h4 id="ライブラリの読込">ライブラリの読込 </h4><p>Zipをダウンロードして展開。必要なのは<strong>mobile-detect.min.js</strong>だけ。以下のようにHTMLで読み込みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;js/mobile-detect.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><p>CDNから読み込みたいとき</p> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/mobile-detect" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/mobile-detect" alt="https://www.jsdelivr.com/package/npm/mobile-detect" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/mobile-detect</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/mobile-detect</span> </div> </a> </div> <div class="link-card"> <a href="https://cdnjs.com/libraries/mobile-detect" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cdnjs.com/libraries/mobile-detect" alt="https://cdnjs.com/libraries/mobile-detect" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cdnjs.com/libraries/mobile-detect</span> <span class="link-card-url">https://cdnjs.com/libraries/mobile-detect</span> </div> </a> </div> <h4 id="判別で表示を切り替えたいhtml">判別で表示を切り替えたいHTML </h4><p>仮に以下のようなメインビジュアルを表示するHTMLソースがあったとします。ここのMP4動画を<strong>mobile-detect.js</strong>でモバイルブラウザを判別し、CSSを書き換えます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;top__bg&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">video</span> <span style="color:#a6e22e">autoplay</span> <span style="color:#a6e22e">muted</span> <span style="color:#a6e22e">loop</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;top__video&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/top-video.mp4&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">video</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h4 id="判別するjavascript">判別するJavascript </h4><p>モバイルブラウザの場合は<code>display: hidden;</code>で非表示にして、JPEG画像をに差し替えて表示する例。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//モバイルブラウザならtrue、それ以外ならfalse </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">isMobile</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!!</span><span style="color:#66d9ef">new</span> <span style="color:#a6e22e">MobileDetect</span>(window.<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">userAgent</span>).<span style="color:#a6e22e">mobile</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isMobile</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//モバイルブラウザの場合は画像を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.top__bg&#39;</span>).<span style="color:#a6e22e">css</span>({ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;background-image&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;url(video/top-video-still.jpg)&#39;</span>, </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//モバイルブラウザではない場合、動画を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.top__video&#39;</span>).<span style="color:#a6e22e">css</span>({ <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;block&#39;</span> }); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p><code>!!</code>は否定（<code>!</code>）の否定を行っています。<code>MobileDetect</code>の<code>mobile()</code>は、モバイル端末の場合は機種の種類（iPhoneやSonyなど）、そうでない場合は<code>null</code>が戻り値となります。そのため、否定の否定を演算することで、<code>isMobile</code>には<code>true</code>か<code>false</code>が入るように<code>mobile()</code>の戻り値を変換しています。</p> <p>公式サイトでも使用方法あり</p> <div class="link-card"> <a href="https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" alt="https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/hgoebl/mobile-detect.js#id=user-content-usage</span> <span class="link-card-url">https://github.com/hgoebl/mobile-detect.js#id=user-content-usage</span> </div> </a> </div> https://qwerty.work/post/2022/09/js-for-each-while/ Fri, 23 Sep 2022 17:11:58 +0900 https://qwerty.work/post/2022/09/js-for-each-while/ <h2 id="いろいろある方法">いろいろある方法 </h2><p>Javascriptで配列の中身を繰り返し取り出す方法がいろいろあるのでメモ。</p> <h3 id="for-ofを使う方法">for-ofを使う方法 </h3><p>for-ofは配列のループに適していて、似た構文のfor-inはオブジェクトのループに適している。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">name</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">arr</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">name</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of</span> </div> </a> </div> <h3 id="foreach-を使う方法">forEach を使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">element</span> =&gt; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">element</span>)); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">element</span> =&gt; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">element</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>)); </span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getName</span>(<span style="color:#a6e22e">element</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">element</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">element</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">getName</span>); </span></span></code></pre></div> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</span> </div> </a> </div> <h3 id="forループを使う方法">forループを使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="whileループを使う方法">whileループを使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">while</span>(<span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">length</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="jqueryのeach-を使う方法">jQueryの$.each を使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span>(<span style="color:#a6e22e">arr</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">index</span>, <span style="color:#a6e22e">value</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">value</span>); </span></span><span style="display:flex;"><span>}) </span></span></code></pre></div> <div class="link-card"> <a href="https://www.bold.ne.jp/engineer-club/jquery-each" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bold.ne.jp/engineer-club/jquery-each" alt="https://www.bold.ne.jp/engineer-club/jquery-each" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bold.ne.jp/engineer-club/jquery-each</span> <span class="link-card-url">https://www.bold.ne.jp/engineer-club/jquery-each</span> </div> </a> </div> https://qwerty.work/post/2022/09/js-isnan-numberisnan/ Fri, 23 Sep 2022 15:17:42 +0900 https://qwerty.work/post/2022/09/js-isnan-numberisnan/ <h2 id="numberisnanとisnan">Number.isNaN()とisNaN() </h2><p>Javascriptで変数の値が**「数字ではない」**なことを調べるメソッド。<code>isNaN()</code>と<code>Number.isNaN()</code>とがあり、戻り値はそれぞれ異なります。コンソールに主力を実行したときに渡された値が数値ではなかった場合、<strong>NaN</strong>（Not a Number：数字ではない）と表示されます。</p> <h3 id="isnan">isNaN() </h3><p>与えられた値が<strong>NaN</strong>である場合は<code>true</code>を返し, そうでなければ<code>false</code>を返します。</p> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN</span> </div> </a> </div> <h3 id="numberisnan">Number.isNaN() </h3><p>与えられた値が<strong>NaN</strong>であり、かつその<strong>型</strong>が<strong>Number</strong>である場合は<code>true</code>、それ以外の場合は<code>false</code>です。</p> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN</span> </div> </a> </div> <h2 id="判定するソース例">判定するソース例 </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">num</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (Number.isNaN(<span style="color:#a6e22e">num</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;数値を認識できませんでした&#39;</span>); </span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">num</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://qwerty.work/post/2022/09/jquery-target-blank/ Wed, 14 Sep 2022 11:04:31 +0900 https://qwerty.work/post/2022/09/jquery-target-blank/ <h2 id="別ウィンドウで開く開かないで異なる方法">別ウィンドウで開く・開かないで異なる方法 </h2><p>グローバルメニューに設置したメガメニューのリンクを開く際、Javascriptで<code>window.location.href</code>を実行しないとリンクが開かないことがありました。ただ、<code>window.location.href</code>だと、<code>target=&quot;_blank&quot;</code>があるリンクの場合、別ウィンドウが開かず、同じウィンドウで開いてしまいます。調べてみたところ、<code>target=&quot;_blank&quot;</code>があるリンクの場合は<code>window.open</code>を使わないといけないことがわかりました。</p> <h3 id="ソース例">ソース例 </h3><h3 id="同ウィンドで開くとき">同ウィンドで開くとき </h3><p><code>window.location.href</code>を使用する。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;https://example.com&#39;</span>; </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h3 id="別ウィンドで開くとき">別ウィンドで開くとき </h3><p><code>window.open</code>を使用する。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">open</span>(<span style="color:#e6db74">&#39;https://example.com&#39;</span>, <span style="color:#e6db74">&#39;_blank&#39;</span>); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="target_blankを判別して実行する例">target=&quot;_blank&quot;を判別して実行する例 </h2><p>このソースで解決できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">link</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;href&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">linktarget</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;target&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// target=&#34;_blank&#34;の有無を判別 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">linktarget</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;_blank&#39;</span> ) { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">link</span>, <span style="color:#a6e22e">linktarget</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">link</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">blur</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/07/scrolltop-button-js/ Fri, 01 Jul 2022 13:13:15 +0900 https://qwerty.work/post/2022/07/scrolltop-button-js/ <h2 id="パージ右下にトップへ戻るボタンを表示したい">パージ右下にトップへ戻るボタンを表示したい </h2><p>レスポンシブ対応のサイトやランディングページ（LP）を制作するとページが長くなります。そんなときにページ右下に「ページトップに戻る」ボタンを設置したいのですが、ファーストビューから表示はしたくありません。</p> <p>そんなときに見つけたの以下のページ。こちらでは、ある程度ページを下にスクロールしたらボタンを表示するようにでできるサンプルがありました。jQueryとCSSを使用する方法です。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://yuyauver98.me/scroll-show-hide-btn/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://yuyauver98.me/scroll-show-hide-btn/" alt="https://yuyauver98.me/scroll-show-hide-btn/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://yuyauver98.me/scroll-show-hide-btn/</span> <span class="link-card-url">https://yuyauver98.me/scroll-show-hide-btn/</span> </div> </a> </div> <h2 id="単純にコピペではjsが動かなかった">単純にコピペではJSが動かなかった </h2><p>上記のソースをそのままコピペ下だけでは動きませんでした。特に動作を制御するJSがうまく動きませんでした。Javascriptは外部から読み込むようにしたのですが、その際に<code>$(document).ready(function() {</code>～<code> });</code>で囲ってやれば解決できました。</p> <h3 id="js部分のサンプル">JS部分のサンプル </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//下から表示させる要素を指定 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">$pagetop</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.ScrollTop&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>( <span style="color:#e6db74">&#39;scroll&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//スクロール位置を取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">scrollTop</span>() <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">500</span> ) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pagetop</span>.<span style="color:#a6e22e">removeClass</span>(<span style="color:#e6db74">&#39;isActive&#39;</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pagetop</span>.<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;isActive&#39;</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//ページ内リンクスムーススクロール </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;a[href^=&#34;#&#34;]&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#34;href&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">target</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">href</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">href</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#39;html&#39;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">href</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">position</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;html, body&#34;</span>).<span style="color:#a6e22e">animate</span>({<span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">position</span>}, <span style="color:#ae81ff">550</span>, <span style="color:#e6db74">&#34;swing&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2021/12/video-play-pause-button/ Tue, 07 Dec 2021 17:11:05 +0900 https://qwerty.work/post/2021/12/video-play-pause-button/ <h2 id="画面タッチで再生停止をしたい">画面タッチで再生/停止をしたい </h2><p>サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的に<code>controls</code>で再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。</p> <p>そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。</p> <div class="link-card"> <a href="https://qiita.com/ryo2132/items/bac787725c983d0e3f4b" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/ryo2132/items/bac787725c983d0e3f4b" alt="https://qiita.com/ryo2132/items/bac787725c983d0e3f4b" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/ryo2132/items/bac787725c983d0e3f4b</span> <span class="link-card-url">https://qiita.com/ryo2132/items/bac787725c983d0e3f4b</span> </div> </a> </div> <h2 id="ソース例">ソース例 </h2><h3 id="html">HTML </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;video-wrap&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;test.mp4&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;img</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;test-movie.jpg&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/video&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;video-btn&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;video-btn&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="css">CSS </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">video-wrap</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">video-btn</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#34;&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>:<span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>:<span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>:<span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>:<span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>; <span style="color:#75715e">/*コントローラー分下部に余白を*/</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">2</span>; <span style="color:#75715e">/*ボタンが前面になるようにする*/</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p> </p> <h3 id="javascript">Javascript </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">video</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;#video&#39;</span>); </span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">video_btn</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;#video-btn&#39;</span>); </span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">is_playing</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">video_btn</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;click&#39;</span>, () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">is_playing</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">play</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">is_playing</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">pause</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">is_playing</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/ Sat, 04 Dec 2021 22:14:08 +0900 https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/ <h2 id="アンカーポイントがずれてしまう">アンカーポイントがずれてしまう </h2><p>ハッシュタグを使用してアンカーの位置にジャンプしようとしたとき、LazyloadやSlick.jsなどのSliderを使っているせいか、画像表示ページが伸縮するために、意図する位置で表示されないことが起こりました。</p> <p>具体的には画像スライダーのあるページに``でお問合せフォームを設置していて、<code>action</code>には自らのページにハッシュタグを付けており、<code>submit</code>で送信後に戻ってきたときにスクロール位置がずれました。しかも、パソコンとスマホ（iPhone）で停まる位置が異なり、ブラウザを変えてもの同じ挙動でした。そこで、以下のソースで解決できました。jQueryが必要です。</p> <h2 id="解決できたソース">解決できたソース </h2><p>URLに<code>#contact</code>などハッシュタグが含まれていた場合、ページ上部からアンカーまでの位置を取得し、数秒後に画面が伸縮した後に再度、アンカーのポジションを確認して比較します。もし、比較して変化があればその位置に画面をスクロールさせます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//Lazyloadなどでアンカーの高さが変化する場合の対応 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span><span style="color:#66d9ef">try</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">deleyTime</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">600</span>; <span style="color:#75715e">//アンカー位置を再確認するまでの待機時間（ミリ秒） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">adjust</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">50</span>; <span style="color:#75715e">//高さの微調整 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//URLに#タグがあるか確認 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">getHash</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">$this</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">hash</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグは指定されていません。&#39;</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">hash</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//アンカーの位置確認（1回目） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">firstPositionY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">getHash</span>()).<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;最初に取得した &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の高さは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">firstPositionY</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//アンカーの位置確認（2回目） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">secondPositionY</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">$this</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">getHash</span>()).<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//数秒後にアンカーの位置が変わっていたら正しい位置にスクロール </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">deleyTime</span><span style="color:#f92672">/</span><span style="color:#ae81ff">1000</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#39;秒後の &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の高さは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">firstPositionY</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">secondPositionY</span>()){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;html,body&#39;</span>).<span style="color:#a6e22e">animate</span>({ <span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#a6e22e">adjust</span> }, <span style="color:#e6db74">&#39;fast&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の現在位置が変化しているため正しい位置にスクロールしました。&#39;</span>) </span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の現在位置に変化はありません。&#39;</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ,<span style="color:#a6e22e">deleyTime</span>); </span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">catch</span> (<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグが見当たらないため処理を終了しました。&#39;</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p> </p> <p>以下の部分の最後にある<code>'fast'</code>を<code>'slow'</code>や<code>'nomal'</code>にするとスクロールのスピードが変わります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;html,body&#39;</span>).<span style="color:#a6e22e">animate</span>({ <span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#a6e22e">adjust</span> }, <span style="color:#e6db74">&#39;fast&#39;</span>); </span></span></code></pre></div><p> </p> <h2 id="コンソールでログを確認">コンソールでログを確認 </h2><p>上記にソースにある<code>console.log</code>で指定した文字列はブラウザのコンソール画面に出力され、処理の経過状態を確認することができます。以下の画面はEdgeですが、Chromiumベースのブラウザなら、F12を押すことでこの画面を出すことができます。</p> <h4 id="urlにが含まれていなかった時">URLに#～が含まれていなかった時 </h4><p><img alt="Chromium系ブラウザのコンソール" class="gallery-image" data-flex-basis="607px" data-flex-grow="253" height="232" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/images/No-00.jpg" width="587"></p> <h4 id="urlにが含まれていた時">URLに#～が含まれていた時 </h4><p><img alt="Chromium系ブラウザのコンソール" class="gallery-image" data-flex-basis="607px" data-flex-grow="253" height="232" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/images/No-01.jpg" width="587"></p> <h2 id="参考サイトメモ">参考サイトメモ </h2><p>旨く行きませんでしたが、以下のページにあるソースも気になりました。</p> <div class="link-card"> <a href="https://fe-designer.com/article/lazyloadandsmoothscroll/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fe-designer.com/article/lazyloadandsmoothscroll/" alt="https://fe-designer.com/article/lazyloadandsmoothscroll/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fe-designer.com/article/lazyloadandsmoothscroll/</span> <span class="link-card-url">https://fe-designer.com/article/lazyloadandsmoothscroll/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/cferdinandi/smooth-scroll" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/cferdinandi/smooth-scroll" alt="https://github.com/cferdinandi/smooth-scroll" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/cferdinandi/smooth-scroll</span> <span class="link-card-url">https://github.com/cferdinandi/smooth-scroll</span> </div> </a> </div> https://qwerty.work/post/2021/12/js-jquery-ripples/ Thu, 02 Dec 2021 22:57:55 +0900 https://qwerty.work/post/2021/12/js-jquery-ripples/ <p>div.ripples-1, div.ripples-2, div.ripples-3 { background-image: url(&rsquo;/blog/images/noimage-448.png&rsquo;); width: 448px; height: 299px; }</p> <h2 id="画面上に水滴をたらしたようなエフェクト">画面上に水滴をたらしたようなエフェクト </h2><p>ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。</p> <h4 id="公式ページ">公式ページ </h4> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div> <h4 id="基本ソース例">基本ソース例 </h4><p><a class="link" href="https://code.jquery.com/" target="_blank" rel="noopener" >jQuery</a>と<a class="link" href="https://github.com/sirxemic/jquery.ripples/tree/e90bd54ee5d2b23d04a208ad1248456c42abb289/dist" target="_blank" rel="noopener" >jquery.ripples.js</a>を読み込んで、以下の設定を加えるだけで設置完了です。任意の<code>#id</code>や<code>.class</code>などの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面があるかのように波を打ちます。</p> <p>※imgに直接<code>class</code>や<code>id</code>を指定したら動作しませんでした。以下のデモはスタイルシートで<code>background-image</code>に画像を指定しています。</p> <p>↓画像にマウスカーソルを載せてみてください。</p> <p>$(&lsquo;div.ripples-1&rsquo;).ripples();</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-1 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;div.ripples-1&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span> $(&#39;div.ripples-1&#39;).ripples(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h4 id="カスタマイズした例">カスタマイズした例 </h4><p>以下は波紋の大きさや解像度などを指定した例です。</p> <p>↓画像にマウスカーソルを載せてみてください。</p> <p>$(&lsquo;div.ripples-2&rsquo;).ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, });</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-2 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;div.ripples-2&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span>$(&#39;div.ripples-2&#39;).ripples({ </span></span><span style="display:flex;"><span> resolution: 512, //解像度 </span></span><span style="display:flex;"><span> dropRadius: 20, //ドロップサイズ </span></span><span style="display:flex;"><span> perturbance: 0.04, //屈折量 </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h3 id="パラメータの説明">パラメータの説明 </h3><pre><code> 名前 タイプ デフォルト 説明 imageUrl string null **背景画像の指定**。背景として使用する画像のURL。存在しない場合、プラグインはCSSの`background-image`を代わりに使用しようとします。Data-URIも受け入れられます。 dropRadius float 20 **ドロップサイズ。**キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ（ピクセル単位）。 perturbance float 0.03 **屈折量。**基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。 resolution integer 256 **解像度。**レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。 interactive bool true マウスのクリックとマウスの動きで効果をトリガーするかどうか。 crossOrigin string &quot;&quot; 影響を受ける画像に使用するcrossOrigin属性。詳細については、[MDNを](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)参照してください。 </code></pre> <p>（参考ページ：<a class="link" href="https://github.com/sirxemic/jquery.ripples#options" target="_blank" rel="noopener" >https://github.com/sirxemic/jquery.ripples#options</a>）</p> <h4 id="自動で実行する例">自動で実行する例 </h4><p>公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;body&#39;</span>).<span style="color:#a6e22e">ripples</span>(<span style="color:#e6db74">&#34;drop&#34;</span>, <span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">radius</span>, <span style="color:#a6e22e">strength</span>) </span></span></code></pre></div><h4 id="以下が具体的なソース例です">以下が具体的なソース例です。 </h4><p> </p> <p>なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。</p> <p><a class="link" href="https://qwerty.work/test/test-jquery-ripples.php" >デモページ</a></p> <p>$(document).ready(function() {</p> <pre><code> $('.ripples-3').ripples({ resolution: 128, dropRadius: 10, perturbance: 0.04, interactive: false }); // Automatic drops setInterval(function() { var $el = $('.ripples-3'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 20; var strength = 0.04 + Math.random() * 0.04; $el.ripples('drop', x, y, dropRadius, strength); }, 400); </code></pre> <p>});</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-3 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;ripples-3&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span>$(document).ready(function() { </span></span><span style="display:flex;"><span> $(&#39;div.ripples-3&#39;).ripples({ </span></span><span style="display:flex;"><span> resolution: 128, </span></span><span style="display:flex;"><span> dropRadius: 10, </span></span><span style="display:flex;"><span> perturbance: 0.04, </span></span><span style="display:flex;"><span> interactive: false //マウスに反応しないようにする </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>// Automatic drops </span></span><span style="display:flex;"><span>setInterval(function() { </span></span><span style="display:flex;"><span> var $el = $(&#39;div.ripples-3&#39;); </span></span><span style="display:flex;"><span> var x = Math.random() * $el.outerWidth(); </span></span><span style="display:flex;"><span> var y = Math.random() * $el.outerHeight(); </span></span><span style="display:flex;"><span> var dropRadius = 20; </span></span><span style="display:flex;"><span> var strength = 0.04 + Math.random() * 0.04; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $el.ripples(&#39;drop&#39;, x, y, dropRadius, strength); </span></span><span style="display:flex;"><span> }, 400); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h2 id="参考ページ">参考ページ </h2><h4 id="git">Git </h4> <div class="link-card"> <a href="https://github.com/sirxemic/jquery.ripples" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/sirxemic/jquery.ripples" alt="https://github.com/sirxemic/jquery.ripples" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/sirxemic/jquery.ripples</span> <span class="link-card-url">https://github.com/sirxemic/jquery.ripples</span> </div> </a> </div> <h4 id="参考ソース">参考ソース </h4> <div class="link-card"> <a href="https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" alt="https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html</span> <span class="link-card-url">https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html</span> </div> </a> </div> https://qwerty.work/post/2021/11/change-video-javascript/ Thu, 25 Nov 2021 09:43:10 +0900 https://qwerty.work/post/2021/11/change-video-javascript/ <h2 id="スマホとパソコンで動画を切り替えたい">スマホとパソコンで動画を切り替えたい </h2><h3 id="動画の再生開始に影響するファイルサイズ">動画の再生開始に影響するファイルサイズ </h3><p>WEBページの背景に動画を使用するサイトを制作する際に気になるのが、埋め込んだ動画のファイルサイズ。</p> <p><strong>再生時間は15秒から30秒で、ファイルサイズは10MBを基準と考えています。</strong></p> <p><strong>『ファイル容量を小さくしながらも高画質にしたい』<strong>と思いますが、10MB前後を目指すとビットレートを</strong>1Mbps～2Mbps</strong>まで落とさなければなりません。ここまで落とすと当然画質は悪くなるですが、背景イメージとしてはギリギリ許容できる画質で、再生時間が30秒前後で何とか<strong>10MB前後</strong>に収めることができます。</p> <p>パソコンサイトは通信環境が整っている事が多いので問題ないと思うのですが、スマホなど回線速度が遅いとそうはいきません。たかが10MBでも動画の読込に時間がかかり、自動再生による再生開始が遅くなります。</p> <p>スマートフォンやタブレットは画面サイズも小さいので、<a class="link" href="https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options" target="_blank" rel="noopener" >Bootstrap5</a> のグリッドシステムのブレークポイントを基準にして動画の解像度を考えると、横幅576ピクセル～768ピクセル、大きくても992ピクセルに対応できる解像度のものがあればよく、**480p（854×480 SD画質）<strong>または</strong>360p（640×360）**の動画を用意すればいいかと思います。この解像度で、<strong>ビットレート500kbps</strong>まで下げると、<strong>約3MB</strong>くらいまでファイルサイズが落ちます。画質は当然悪くなりますが、スマホの画面での背景動画としてはギリギリ観るに耐えれる範囲かと思います。</p> <h2 id="パソコンとスマホ用に用意した2つの動画ファイル">パソコンとスマホ用に用意した2つの動画ファイル </h2><p>「<a class="link" href="https://qwerty.work/blog/2021/11/responsive-size.php" target="_blank" rel="noopener" >レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値</a>」を参考に、制作中のレスポンシブサイトのブレークポイントを**sm（768px）**としたため、これを境に以下の解像度の異なる動画を用意しました。</p> <ul> <li>パソコン用 &hellip; フルHD（1920×1080） MP4・WebM 約10MB</li> <li>スマーフォン用 &hellip; 480p（854×480 ） MP4・WebM 約３MB</li> </ul> <p>この二つをレスポンシブサイトにvideoタグで動画を埋め込み、アクセスしてきた画面サイズに応じて再生する方法がないかと探してみると、jQueryを使って切り替える方法がありました。</p> <h4 id="jqueryで画面サイズによって切り替える参考">jQueryで画面サイズによって切り替える参考 </h4> <div class="link-card"> <a href="https://shu-naka-blog.com/jquery/responsive_switching/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://shu-naka-blog.com/jquery/responsive_switching/" alt="https://shu-naka-blog.com/jquery/responsive_switching/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://shu-naka-blog.com/jquery/responsive_switching/</span> <span class="link-card-url">https://shu-naka-blog.com/jquery/responsive_switching/</span> </div> </a> </div> <h4 id="ソース例">ソース例 </h4><p>上記ページのソースを参考に、以下のソースでアクセスしてきたデバイスの画面サイズが<strong>768ピクセル</strong>を境に再生する動画を切り替えることができました。<code>class=&quot;switch&quot;</code>を付ければ、複数ので埋め込んだ動画があっても対応できそうです。</p> <ul> <li>動画のファイル名は最後尾を<code>_sp</code>と<code>_pc</code>にします。</li> <li>タグ内に<code>class=&quot;switch&quot;</code>を設定します。</li> <li>この例は動画の遅延読込に <a class="link" href="https://github.com/ApoorvSaxena/lozad.js/" target="_blank" rel="noopener" >Lozad.js</a> を使用しているので、ソース指定に<code>data-src</code>としていますので、Javascript内の<code>src</code>を<code>data-src</code>に変更しています。</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;video</span> <span style="color:#960050;background-color:#1e0010">playsinline</span> <span style="color:#960050;background-color:#1e0010">autoplay</span> <span style="color:#960050;background-color:#1e0010">loop</span> <span style="color:#960050;background-color:#1e0010">muted</span> <span style="color:#a6e22e">preload=</span><span style="color:#e6db74">&#34;auto&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;lozad&#34;</span> <span style="color:#a6e22e">poster=</span><span style="color:#e6db74">&#34;img/poster.png&#34;</span><span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/webm&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_sp.webm&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_sp.mp4&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/webm&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_pc.webm&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_pc.mp4&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/video&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>$(function() { </span></span><span style="display:flex;"><span> // 切り替える対象にclass属性。 </span></span><span style="display:flex;"><span> var $elem = $(&#39;.switch&#39;); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // 切り替えの対象のsrc属性の末尾の文字列。 </span></span><span style="display:flex;"><span> var sp = &#39;_sp.&#39;; </span></span><span style="display:flex;"><span> var pc = &#39;_pc.&#39;; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // 画像を切り替えるウィンドウサイズ。 </span></span><span style="display:flex;"><span> var replaceWidth = 768; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> function imageSwitch() { </span></span><span style="display:flex;"><span> // ウィンドウサイズを取得する。 </span></span><span style="display:flex;"><span> var windowWidth = parseInt($(window).width()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // ページ内にあるすべての`.switch`に適応される。 </span></span><span style="display:flex;"><span> $elem.each(function() { </span></span><span style="display:flex;"><span> var $this = $(this); </span></span><span style="display:flex;"><span> // ウィンドウサイズが768px以上であれば_spを_pcに置換する。 </span></span><span style="display:flex;"><span> if(windowWidth &gt;= replaceWidth) { </span></span><span style="display:flex;"><span> $this.attr(&#39;data-src&#39;, $this.attr(&#39;data-src&#39;).replace(sp, pc)); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // ウィンドウサイズが768px未満であれば_pcを_spに置換する。 </span></span><span style="display:flex;"><span> } else { </span></span><span style="display:flex;"><span> $this.attr(&#39;data-src&#39;, $this.attr(&#39;data-src&#39;).replace(pc, sp)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> imageSwitch(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span><span style="display:flex;"><span>var resizeTimer; </span></span><span style="display:flex;"><span>$(window).on(&#39;resize&#39;, function() { </span></span><span style="display:flex;"><span> clearTimeout(resizeTimer); </span></span><span style="display:flex;"><span> resizeTimer = setTimeout(function() { </span></span><span style="display:flex;"><span> imageSwitch(); </span></span><span style="display:flex;"><span> }, 200); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="studioで使いたいとき">STUDIOで使いたいとき </h2><p>ノーコードでホームページが制作できる<a class="link" href="https://studio.design/ja" target="_blank" rel="noopener" >STUDIO</a>（有料プラン）で制作したサイトのキービジュアルに背景動画を埋め込みたいときのJavascriptソース例。ChatGPTに手伝ってもらったソース。動画の遅延表示させるLozad.jsも併用しています。</p> <h3 id="googleタグマネージャーで使うときのソース例">Googleタグマネージャーで使うときのソース例 </h3><p>Google Tag Manager経由で以下のソースを使用するとうまくいきました。動画ファイルをSTUDIOにアップロードできないので、読み込みたい動画ファイル（MP4とWEBM）は外部のレンタルサーバーにアップロードしてあるものを使用します。STUDIOのBOX要素のIDに<code>mv</code>を設定し、Javascriptで<code>VIDEO</code>タグを挿入し、デバイスの画面幅に合わせてPC用とスマホ用を切り替えます。</p> <p>Googleタグマネージャーのトリガーは「ページビュー」と「履歴の変更」の二つを設定してください。「ページビュー」のみだと、ブラウザの「戻る」ボタンで他のページから飛んできたときに発火しないので、その対策として「履歴の変更」が必要です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.7.1.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">observer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lozad</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">observer</span>.<span style="color:#a6e22e">observe</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画がすでに追加されているかを確認する関数 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">isVideoAdded</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;video&#34;</span>) <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画を追加する処理 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">addVideo</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// すでに動画が追加されている場合は処理を中断 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isVideoAdded</span>()) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画要素の作成 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">video</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;video&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">muted</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">autoplay</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">loop</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;playsinline&#34;</span>, <span style="color:#e6db74">&#34;&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;lozad&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 最初のソース (WEBM) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source1</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 2つ目のソース (MP4) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source2</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画にソースを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source1</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source2</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画をDOMに追加 </span></span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">video</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画の再生処理とエラーキャッチ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">play</span>().<span style="color:#66d9ef">catch</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">&#34;Video play failed:&#34;</span>, <span style="color:#a6e22e">error</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページビューまたは履歴変更時に呼び出す関数 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">addVideo</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// PCとスマホで動画ファイルを切り替える </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;switch&#34; を持つ &lt;source&gt; タグを対象にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$sources</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.switch&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 切り替えの対象のsrc属性の末尾の文字列。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sp</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_sp.&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pc</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_pc.&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画を切り替えるウィンドウサイズ。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">replaceWidth</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">970</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">videoSwitch</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズを取得する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">width</span>()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ページ内にあるすべての`.switch`（&lt;source&gt;タグ）に適応される。 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$sources</span>.<span style="color:#a6e22e">each</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$this</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>); <span style="color:#75715e">// &lt;source&gt;要素 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px以上であれば_spを_pcに置換し、キャッシュバスティングを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">replaceWidth</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">sp</span>, <span style="color:#a6e22e">pc</span>)); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px未満であれば_pcを_spに置換し、キャッシュバスティングを追加 </span></span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">pc</span>, <span style="color:#a6e22e">sp</span>)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// &lt;video&gt;要素全体を再ロードして、srcの変更を反映 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;video&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>).<span style="color:#a6e22e">load</span>(); <span style="color:#75715e">// &lt;video&gt;要素のload()メソッドを呼び出す </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">resizeTimer</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;resize&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">clearTimeout</span>(<span style="color:#a6e22e">resizeTimer</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">resizeTimer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">200</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="どうしてもカスタムコードで使いたいとき">どうしてもカスタムコードで使いたいとき </h3><p>Googleタグマネージャーの使い方がわからないので、STUDIOのカスタムコードに記載して使いたい場合はこちらのソース。発火のトリガーを複数設定しています。ページの遷移やブラウザによっては発火しないケースがあるかもしれません。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.7.1.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">observer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lozad</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">observer</span>.<span style="color:#a6e22e">observe</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画が既に追加されているか確認する関数 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">isVideoAdded</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;video&#34;</span>) <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 共通の処理を関数として定義 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">handleVideoLoad</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画が既に追加されている場合は処理を中断 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isVideoAdded</span>()) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画要素の作成 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">video</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;video&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">muted</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">autoplay</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">loop</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;playsinline&#34;</span>, <span style="color:#e6db74">&#34;&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;lozad&#34; を追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;lozad&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 最初のソース (WEBM) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source1</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 2つ目のソース (MP4) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source2</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画にソースを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source1</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source2</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画をDOMに追加 </span></span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">video</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画の再生処理とエラーキャッチ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">play</span>().<span style="color:#66d9ef">catch</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">&#34;Video play failed:&#34;</span>, <span style="color:#a6e22e">error</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページが完全にロードされた時 </span></span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;load&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページのHTMLが読み込まれた時 </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;DOMContentLoaded&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ブラウザの履歴が変更された時（戻るボタン、進むボタンなど） </span></span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;popstate&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// PCとスマホで動画ファイルを切り替える </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;switch&#34; を持つ &lt;source&gt; タグを対象にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$sources</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.switch&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 切り替えの対象のsrc属性の末尾の文字列。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sp</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_sp.&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pc</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_pc.&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画を切り替えるウィンドウサイズ。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">replaceWidth</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">970</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">videoSwitch</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズを取得する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">width</span>()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ページ内にあるすべての`.switch`（&lt;source&gt;タグ）に適応される。 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$sources</span>.<span style="color:#a6e22e">each</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$this</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>); <span style="color:#75715e">// &lt;source&gt;要素 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px以上であれば_spを_pcに置換 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">replaceWidth</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">sp</span>, <span style="color:#a6e22e">pc</span>)); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px未満であれば_pcを_spに置換 </span></span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">pc</span>, <span style="color:#a6e22e">sp</span>)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// &lt;video&gt;要素全体を再ロードして、srcの変更を反映 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;video&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>).<span style="color:#a6e22e">load</span>(); <span style="color:#75715e">// &lt;video&gt;要素のload()メソッドを呼び出す </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">resizeTimer</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;resize&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">clearTimeout</span>(<span style="color:#a6e22e">resizeTimer</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">resizeTimer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">200</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h2 id="その他参考">その他参考 </h2><p>jQueryに依存しない以下のJavascriptも見つけましたが、設定や設置方法が悪いのか、うまくいきませんでした。</p> <h4 id="画面サイズで切り替える例">画面サイズで切り替える例 </h4> <div class="link-card"> <a href="https://teratail.com/questions/148919" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://teratail.com/questions/148919" alt="https://teratail.com/questions/148919" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://teratail.com/questions/148919</span> <span class="link-card-url">https://teratail.com/questions/148919</span> </div> </a> </div> <h4 id="ユーザーエージェントで切り替える例">ユーザーエージェントで切り替える例 </h4> <div class="link-card"> <a href="https://iwb.jp/video-tag-src-poster-img-javascript/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://iwb.jp/video-tag-src-poster-img-javascript/" alt="https://iwb.jp/video-tag-src-poster-img-javascript/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://iwb.jp/video-tag-src-poster-img-javascript/</span> <span class="link-card-url">https://iwb.jp/video-tag-src-poster-img-javascript/</span> </div> </a> </div> https://qwerty.work/post/2021/11/bootstrap5-modal-sample/ Wed, 10 Nov 2021 13:01:12 +0900 https://qwerty.work/post/2021/11/bootstrap5-modal-sample/ <h2 id="bootstrapだけでモーダルウィンドウが使える">Bootstrapだけでモーダルウィンドウが使える </h2><p>CSSフレームワークとして<strong>Bootstrap5.0</strong>を使ったサイトを制作していて、**『簡単に設置できるモーダルウィンドウがないかな？』**と探していたところ、特殊なJavascriptやjQueryを使わなくても、Bootstrapの標準機能としてモーダルウィンドウが使えるのを知りました。</p> <p>ちなみに、モーダルウィンドウとは画像などをポップアップで表示してくれる<a class="link" href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener" >Lightboox2</a>や<a class="link" href="https://www.digitalia.be/software/slimbox2/" target="_blank" rel="noopener" >Slimbox2</a>みたいに、テキストやHTMLをページ全面にポップアップで表示してくれるものです。</p> <p><strong>Bootstrap5.0</strong>以前のバージョンである<strong>Bootstrap4.5</strong>でもModalは使えるみたいなのですが、4.5はjQueryと少しJavascriptを使わないと実現できません。しかし、Bootstrap5.0の場合はほぼコピペでいける程、設置がめっちゃ簡単です。</p> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/components/modal/" alt="https://getbootstrap.jp/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/components/modal/</span> </div> </a> </div> <h3 id="必要なjsとcss">必要なJSとCSS </h3><p>事前準備として必要なものはBootstrap5の以下の2点です。5.0以下のバージョンの物ではダメです。</p> <ul> <li>bootstrap.css</li> <li>bootstrap.js</li> </ul> <h4 id="cdnから読み込む場合">CDNから読み込む場合 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h2 id="サンプル">サンプル </h2><h3 id="スタンダードな例">スタンダードな例 </h3><p>ページの上からスライドダウンしてフェードインする例。</p> <p>Launch demo modal</p> <pre><code> Modal title Modal body text goes here. Close Save changes </code></pre> <h4 id="ソース">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModal-1&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Launch demo modal </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModal&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalLabel&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLabel&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Modal body text goes here. </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="static-backdrop">Static backdrop </h3><p>モーダルの外側の背景をクリックしてもモーダルが閉じない例。</p> <p>Launch static backdrop modal</p> <pre><code> Modal title Modal body text goes here. Close Understood </code></pre> <h4 id="ソース-1">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#staticBackdrop&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Launch static backdrop modal </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;staticBackdrop&#34;</span> <span style="color:#a6e22e">data-bs-backdrop=</span><span style="color:#e6db74">&#34;static&#34;</span> <span style="color:#a6e22e">data-bs-keyboard=</span><span style="color:#e6db74">&#34;false&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;staticBackdropLabel&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;staticBackdropLabel&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Modal body text goes here. </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Understood<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="scrolling-long-content">Scrolling long content </h3><p>モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールできる例。</p> <pre><code> Modal title What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic. We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby. Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground. Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure. I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by? Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time. We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure. Close Save changes </code></pre> <p>Launch demo modal</p> <h4 id="ソース-2">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLong&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalLongTitle&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLongTitle&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It&#39;s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I&#39;ll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It&#39;s time to bring out the big balloons. You could&#39;ve been the greatest. Passport stamps, she&#39;s cosmopolitan. Your kiss is cosmic, every move is magic.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;re living the life. We&#39;re doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl&#39;s a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She&#39;s got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. &#39;Cause, baby, you&#39;re a firework. Like thunder gonna shake the ground.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Just own the night like the 4th of July! I&#39;m gon&#39; put her in a coma. What you&#39;re waiting for, it&#39;s time for you to show it off. Can&#39;t replace you with a million rings. You open my eyes and I&#39;m ready to go, lead me into the light. And here you are. I&#39;m gon&#39; put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. Yes, we make angels cry, raining down on earth from up above. I&#39;m walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make &#39;em go, &#39;Aah, aah, aah&#39; as you shoot across the sky-y-y! Why don&#39;t you let me stop by?<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Boom, boom, boom. Never made me blink one time. Yeah, you&#39;re lucky if you&#39;re on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You&#39;re original, cannot be replaced. The girl&#39;s a freak, she drive a jeep in Laguna Beach. It&#39;s no big deal, it&#39;s no big deal, it&#39;s no big deal. In another life I would make you stay. I&#39;m ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;d keep all our promises be us against the world. If you get the chance you better keep her. It&#39;s time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don&#39;t let the greatness get you down, oh, oh yeah. Yeah, she&#39;s footloose and so fancy free. I want the jaw droppin&#39;, eye poppin&#39;, head turnin&#39;, body shockin&#39;. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;bd-example&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModalLong&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>Launch demo modal </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p>モーダル本体をスクロールできるスクロール可能にする例。</p> <p>上記のソース内にある<code>を</code>となるように、<code>.modal-dialog</code>に<code>.modal-dialog-scrollable</code>を追加するだけです。</p> <pre><code> Modal title What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure. I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by? Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time. We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic. We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby. Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground. Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool. Close Save changes </code></pre> <p>Launch demo modal</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalScrollable&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalScrollableTitle&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog modal-dialog-scrollable&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalScrollableTitle&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. Yes, we make angels cry, raining down on earth from up above. I&#39;m walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make &#39;em go, &#39;Aah, aah, aah&#39; as you shoot across the sky-y-y! Why don&#39;t you let me stop by?<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Boom, boom, boom. Never made me blink one time. Yeah, you&#39;re lucky if you&#39;re on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You&#39;re original, cannot be replaced. The girl&#39;s a freak, she drive a jeep in Laguna Beach. It&#39;s no big deal, it&#39;s no big deal, it&#39;s no big deal. In another life I would make you stay. I&#39;m ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;d keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. &#39;Cause she&#39;s the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Sipping on Rosé, Silver Lake sun, coming up all lazy. It&#39;s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I&#39;ll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It&#39;s time to bring out the big balloons. You could&#39;ve been the greatest. Passport stamps, she&#39;s cosmopolitan. Your kiss is cosmic, every move is magic.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;re living the life. We&#39;re doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl&#39;s a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She&#39;s got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. &#39;Cause, baby, you&#39;re a firework. Like thunder gonna shake the ground.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Just own the night like the 4th of July! I&#39;m gon&#39; put her in a coma. What you&#39;re waiting for, it&#39;s time for you to show it off. Can&#39;t replace you with a million rings. You open my eyes and I&#39;m ready to go, lead me into the light. And here you are. I&#39;m gon&#39; put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;bd-example&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModalScrollable&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>Launch demo modal </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><h2 id="その他サンプル">その他サンプル </h2><p>以下の公式ページに他のサンプルや使用例が掲載されています。基本的には使い方は同じです。</p> <h4 id="公式リファレンス">公式リファレンス </h4> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/components/modal/" alt="https://getbootstrap.jp/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/components/modal/</span> </div> </a> </div> <div class="link-card"> <a href="https://getbootstrap.com/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.com/docs/5.0/components/modal/" alt="https://getbootstrap.com/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.com/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.com/docs/5.0/components/modal/</span> </div> </a> </div> https://qwerty.work/post/2021/11/jquery-slickjs-slider/ Fri, 05 Nov 2021 13:50:27 +0900 https://qwerty.work/post/2021/11/jquery-slickjs-slider/ <h2 id="画像のスライダー">画像のスライダー </h2><p>画像のスライドを簡単に実現できるJSないかな～と探してみたら、あっさり見つけることができたのでメモ。</p> <h2 id="jqueryに依存するもの">jQueryに依存するもの </h2><h3 id="slockjs">Slock.js </h3><h4 id="slickjsを使った参考例">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move01/6-1-6/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move01/6-1-6/" alt="https://coco-factory.jp/ugokuweb/move01/6-1-6/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> </div> </a> </div> <h4 id="公式サイト">公式サイト </h4> <div class="link-card"> <a href="https://kenwheeler.github.io/slick/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://kenwheeler.github.io/slick/" alt="https://kenwheeler.github.io/slick/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://kenwheeler.github.io/slick/</span> <span class="link-card-url">https://kenwheeler.github.io/slick/</span> </div> </a> </div> <h2 id="jqueryが不要なもの">jQueryが不要なもの </h2><h3 id="swiperjs">Swiper.js </h3><h4 id="slickjsを使った参考例-1">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://www.rectus.co.jp/archives/496" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.rectus.co.jp/archives/496" alt="https://www.rectus.co.jp/archives/496" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.rectus.co.jp/archives/496</span> <span class="link-card-url">https://www.rectus.co.jp/archives/496</span> </div> </a> </div> <div class="link-card"> <a href="https://digipress.info/tech/introducing-swiper-js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://digipress.info/tech/introducing-swiper-js/" alt="https://digipress.info/tech/introducing-swiper-js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://digipress.info/tech/introducing-swiper-js/</span> <span class="link-card-url">https://digipress.info/tech/introducing-swiper-js/</span> </div> </a> </div> <h4 id="公式サイト-1">公式サイト </h4> <div class="link-card"> <a href="https://github.com/nolimits4web/swiper" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/nolimits4web/swiper" alt="https://github.com/nolimits4web/swiper" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/nolimits4web/swiper</span> <span class="link-card-url">https://github.com/nolimits4web/swiper</span> </div> </a> </div> https://qwerty.work/post/2021/11/js-lightbox-text/ Tue, 02 Nov 2021 14:58:54 +0900 https://qwerty.work/post/2021/11/js-lightbox-text/ <h2 id="ligthbox風にテキストを表示したい">Ligthbox風にテキストを表示したい </h2><h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="https://goworkship.com/magazine/open-source-modal-window/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/open-source-modal-window/" alt="https://goworkship.com/magazine/open-source-modal-window/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/open-source-modal-window/</span> <span class="link-card-url">https://goworkship.com/magazine/open-source-modal-window/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.willstyle.co.jp/blog/2254/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.willstyle.co.jp/blog/2254/" alt="https://www.willstyle.co.jp/blog/2254/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.willstyle.co.jp/blog/2254/</span> <span class="link-card-url">https://www.willstyle.co.jp/blog/2254/</span> </div> </a> </div> <h3 id="magnific-popup">Magnific Popup </h3><p>これもjQueryがあれば使えます。フォームのモーダルとかに使えて機能も豊富そうです。機会があれば是非使ってみたいです。</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/" alt="https://dimsemenov.com/plugins/magnific-popup/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/</span> </div> </a> </div> <h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/dimsemenov/Magnific-Popup" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/dimsemenov/Magnific-Popup" alt="https://github.com/dimsemenov/Magnific-Popup" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/dimsemenov/Magnific-Popup</span> <span class="link-card-url">https://github.com/dimsemenov/Magnific-Popup</span> </div> </a> </div> <p>リファレンス参考</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/documentation.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/documentation.html" alt="https://dimsemenov.com/plugins/magnific-popup/documentation.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> </div> </a> </div> https://qwerty.work/post/2021/02/lazy-js-css/ Wed, 17 Feb 2021 19:20:57 +0900 https://qwerty.work/post/2021/02/lazy-js-css/ <h3 id="特定の要素のみを遅延表示させる">特定の要素のみを遅延表示させる </h3><h4 id="参考サイト">参考サイト </h4> <div class="link-card"> <a href="https://teratail.com/questions/113891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://teratail.com/questions/113891" alt="https://teratail.com/questions/113891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://teratail.com/questions/113891</span> <span class="link-card-url">https://teratail.com/questions/113891</span> </div> </a> </div> <div class="link-card"> <a href="https://makibishi.ninja/lazysizes/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://makibishi.ninja/lazysizes/" alt="https://makibishi.ninja/lazysizes/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://makibishi.ninja/lazysizes/</span> <span class="link-card-url">https://makibishi.ninja/lazysizes/</span> </div> </a> </div> <div class="link-card"> <a href="https://techacademy.jp/magazine/25636" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://techacademy.jp/magazine/25636" alt="https://techacademy.jp/magazine/25636" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://techacademy.jp/magazine/25636</span> <span class="link-card-url">https://techacademy.jp/magazine/25636</span> </div> </a> </div> <div class="link-card"> <a href="https://zxcvbnmnbvcxz.com/specified-time-or-more/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://zxcvbnmnbvcxz.com/specified-time-or-more/" alt="https://zxcvbnmnbvcxz.com/specified-time-or-more/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> <span class="link-card-url">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.marukin-ad.co.jp/marulog/?p=1891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.marukin-ad.co.jp/marulog/?p=1891" alt="https://www.marukin-ad.co.jp/marulog/?p=1891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.marukin-ad.co.jp/marulog/?p=1891</span> <span class="link-card-url">https://www.marukin-ad.co.jp/marulog/?p=1891</span> </div> </a> </div> <h3 id="逆に遅延非表示にする場合">逆に遅延非表示にする場合 </h3><h4 id="参考サイト-1">参考サイト </h4> <div class="link-card"> <a href="http://kachibito.net/snippets/settimeout-fadeout" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/snippets/settimeout-fadeout" alt="http://kachibito.net/snippets/settimeout-fadeout" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/snippets/settimeout-fadeout</span> <span class="link-card-url">http://kachibito.net/snippets/settimeout-fadeout</span> </div> </a> </div> https://qwerty.work/post/2021/02/javascript-call-php-function/ Sun, 14 Feb 2021 00:27:04 +0900 https://qwerty.work/post/2021/02/javascript-call-php-function/ <p>PHPのFunctionの一部に<code>stream_get_contents</code>（指定したURLのHTMLソースを取得する関数）を使っていて、それを多用すると、PHPの処理が終わるまでページの表示が停まるので、ページの読込がかなり遅くなります。どうにかならないかな？と考えてみました。</p> <p>**『PHPのファンクションをJavscriptから呼び出せば、非同期で表示できるのでは？』**と思い、やり方を探してヒントになるやり方を見つけたのでメモ。</p> <p>重たい処理はサーバー側のPHPで処理させて、表示の部分だけJSの非同期で処理するといった感じです。</p> <h2 id="サンプル">サンプル </h2><h3 id="jqueryなどを使わずにできるシンプルな方法のサンプル">jQueryなどを使わずにできるシンプルな方法のサンプル </h3><p>これをいじっていけば旨くいけそうですが、AMPページとかには使えそうにないので、AMPページではそうするか考えないといけない感じです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">func</span>(<span style="color:#a6e22e">$a</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">echo</span>( <span style="color:#a6e22e">$a</span> ); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">?&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#66d9ef">async</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">test</span>(){ </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;php_code&#34;</span>).<span style="color:#a6e22e">innerHTML</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;?php func(&#34;hello&#34;);?&gt;&#39;</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">onclick</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;test(); return false;&#34;</span><span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">test</span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/a&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;php_code&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span> </span></span></code></pre></div><p><a class="link" href="https://qwerty.work/test/test-2021-02-14.php" >テストページ</a></p> <p>参考サイト こちらのページにはプレーンなJavascriptのサンプルと、jQueryを使ったサンプルがあります。</p> <div class="link-card"> <a href="https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/" alt="https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/</span> <span class="link-card-url">https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/</span> </div> </a> </div> https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/ Sun, 17 May 2020 17:23:37 +0900 https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/ <h3 id="ページ読み込みスピードを上げるために遅延させたい">ページ読み込みスピードを上げるために遅延させたい </h3><p>最近では不要かもしれませんが、SEO対策の被リンク対応の一つとして<a class="link" href="https://zenback.jp/" target="_blank" rel="noopener" >zenback</a>を導入しているのですが、これを導入することにより、zenbackウィジェットに必要なJSとかjQueryが降ってきます</p> <ul> <li>//w.zenback.jp/v1/?base_uri=***</li> <li>//w.zenback.jp/_p/js/jquery.min.js</li> </ul> <p>ページの最下部に表示しているので、真っ先に<a class="link" href="https://zenback.jp/" target="_blank" rel="noopener" >zenback</a>を読み込む必要ながないので、いくつかのパターンで遅延させることができないかなと思いました。</p> <ul> <li>画面スクロールされたら読み込み開始</li> <li>ページ表示開始の数秒後に読み込み開始</li> <li>zenbackが表示される部分が登場したら読込開始</li> </ul> <p>これのどれか、または全部で遅延できる手段が何かないかなといろいろ探したら、<a class="link" href="https://tagmanager.google.com/" target="_blank" rel="noopener" >Google Tag Manager</a> で簡単にできることが分かったのメモ。</p> <p>jQueryのLazy Loadとか、Javascriptで非同期や遅延読み込むする方法もありますが、<a class="link" href="https://tagmanager.google.com/" target="_blank" rel="noopener" >Google Tag Manager</a> を使う方法が最もシンプルで簡単でいいかもしれません。いろいろな条件でいろいろなタグを組み込めるので最近ハマっています。</p> <h3 id="google-tag-managerで遅延表示させる方法">Google Tag Managerで遅延表示させる方法 </h3><p><a class="link" href="https://tagmanager.google.com/" target="_blank" rel="noopener" >Google Tag Manager</a> がどういう物かの説明は省きます。</p> <h4 id="1-新しいタグをクリック">1. 『新しいタグ』をクリック </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-00.jpg" ><img class="gallery-image" data-flex-basis="491px" data-flex-grow="204" height="342" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-00.jpg" width="700"></a></p> <h4 id="2-タグを追加するため右上の鉛筆マークをクリック">2. タグを追加するため右上の鉛筆マークをクリック </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-01l.jpg" ><img class="gallery-image" data-flex-basis="730px" data-flex-grow="304" height="230" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-01.jpg" width="700"></a></p> <h4 id="3-カスタムhtmlを選択">3. 『カスタムHTML』を選択 </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-02.jpg" ><img class="gallery-image" data-flex-basis="392px" data-flex-grow="163" height="428" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-02.jpg" width="700"></a></p> <h4 id="4-zenbackのタグを貼り付ける">4. zenbackのタグを貼り付ける </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-03l.jpg" ><img class="gallery-image" data-flex-basis="350px" data-flex-grow="145" height="480" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-03.jpg" width="700"></a></p> <p>実際には以下のように改変して貼り付けています。``とJavascriptを分離して、<strong>Javascriptの部分だけを貼り付け</strong>ています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">X</span><span style="color:#f92672">:</span><span style="color:#a6e22e">S</span> <span style="color:#a6e22e">ZenBackWidget</span> <span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">!</span><span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">d</span>,<span style="color:#a6e22e">i</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#f92672">!</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">i</span>)){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">// オリジナル var r=Math.ceil((new Date()*1)*Math.random()); </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>.<span style="color:#a6e22e">getFullYear</span>()<span style="color:#f92672">+</span>(<span style="color:#e6db74">&#39;0&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>.<span style="color:#a6e22e">getMonth</span>()).<span style="color:#a6e22e">slice</span>(<span style="color:#f92672">-</span><span style="color:#ae81ff">2</span>) ; <span style="color:#75715e">//randの値を年月（例 202005）にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">j</span><span style="color:#f92672">=</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;script&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">j</span>.<span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#a6e22e">i</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">j</span>.<span style="color:#66d9ef">async</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span>;<span style="color:#a6e22e">j</span>.<span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//w.zenback.jp/v1/?base_uri=http%3A//qwerty.work&amp;nsid=XXXXXXXXXXXXXXXXXX%3A%3AXXXXXXXXXXXXXXXXXXX&amp;rand=&#34;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">j</span>);}}(document,<span style="color:#e6db74">&#34;zenback-widget-js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">X</span><span style="color:#f92672">:</span><span style="color:#a6e22e">E</span> <span style="color:#a6e22e">ZenBackWidget</span> <span style="color:#f92672">--&gt;</span> </span></span></code></pre></div><p><code>****</code><strong>はウィジェットを表示させる部分に記載</strong>します。**「document.writeをサポートする」<strong>や</strong>「詳細設定」**は特に設定しませんでした。</p> <p>※ページ下部でも記載していますが、このタグが空のままだと失敗しますので、ご注意ください。</p> <h4 id="5-トリガーを追加するため鉛筆マークをクリック">5. トリガーを追加するため鉛筆マークをクリック </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-04l.jpg" ><img class="gallery-image" data-flex-basis="545px" data-flex-grow="227" height="308" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-04.jpg" width="700"></a></p> <h4 id="6-新しいトリガーを作成するので--マークをクリック">6. 新しいトリガーを作成するので + マークをクリック </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-05l.jpg" ><img class="gallery-image" data-flex-basis="1354px" data-flex-grow="564" height="124" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-05.jpg" width="700"></a></p> <h4 id="7-トリガーの名前を付けて鉛筆マークをクリック">7. トリガーの名前を付けて鉛筆マークをクリック </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-06l.jpg" ><img class="gallery-image" data-flex-basis="756px" data-flex-grow="315" height="222" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-06.jpg" width="700"></a></p> <h4 id="8-要素の表示を選択">8. 『要素の表示』を選択 </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-07.jpg" ><img class="gallery-image" data-flex-basis="215px" data-flex-grow="89" height="779" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-07.jpg" width="700"></a></p> <h4 id="9-要素の欄にzanback-widget-loaderと入力して保存">9. 要素の欄に「zanback-widget-loader」と入力して保存<a class="link" href="https://qwerty.work/blog/2020/05/17/No-08l.jpg" ><img class="gallery-image" data-flex-basis="332px" data-flex-grow="138" height="505" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-08.jpg" width="700"></a> </h4><h4 id="10-保存して閉じる">10. 保存して閉じる </h4><p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-09l.jpg" ><img class="gallery-image" data-flex-basis="330px" data-flex-grow="137" height="508" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-09.jpg" width="700"></a></p> <h4 id="11-公開ボタンをクリック">11. 『公開』ボタンをクリック </h4><p>公開しないと設定しただけで終わるので注意。公開ボタンを押すとバージョン名を設定する画面に進みます。</p> <p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-11l.jpg" ><img class="gallery-image" data-flex-basis="1090px" data-flex-grow="454" height="154" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-11.jpg" width="700"></a></p> <h4 id="12-バージョン名を設定して公開して完了">12. バージョン名を設定して『公開』して完了 </h4><p>追加や変更があった場合、バージョン名を設定して公開ボタンを押さないと反映されません。私の場合。バージョン名は<strong>日付にしています</strong>が、**『zenback追加』**とかここは何でもいいです。<strong>最後に『公開』ボタン</strong>を押したら作業は完了です。</p> <p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-12l.jpg" ><img class="gallery-image" data-flex-basis="372px" data-flex-grow="155" height="451" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-12.jpg" width="700"></a></p> <h3 id="ウィジェットが表示されないとき">ウィジェットが表示されないとき </h3><p>最初、タグの登録が終わって、ページ表示テストをしたときzenbackのウィジェットが表示されませんでした。以下のページによると、要素（``）が空だと高さ判定で弾かれ、トリガーが発動しないみたいです。</p> <div class="link-card"> <a href="https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire" alt="https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire</span> <span class="link-card-url">https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire</span> </div> </a> </div> <p>私の場合、仮にタグを以下のように「その他お知らせ」を追加したところうまく表示できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;zenback-widget-loader&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><p>    ↓</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;zenback-widget-loader&#34;</span>&gt;その他お知らせ&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="複数のトリガーを設定しておいた方がいいかも">複数のトリガーを設定しておいた方がいいかも？ </h3><p>今回は参考に<code>zenback-widget-loader</code>という要素が現れたら表示するようにしましたが、検索ロボットが来たときはどうなるだろう？という疑問が残りました。今回の場合、ページ下部までスクロールされれば表示されますが、スクロールされなければ表示されず無い物という扱いになうのではないかと思いました。</p> <p>折角設置しているのに無い物扱いだと意味がないので、今回の**『要素の表示』と『タイマー』を組み合わせ**て、スクロールされなくても3～5秒後には強制表示みたいなことをしておけば安心かもしれません。</p> <h3 id="pagespeed-insightsで100点が出た">PageSpeed Insightsで100点が出た！！ </h3><p>これが効いたのかどうかわかりませんが、この記事を投稿した直後に<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >PageSpeed Insights</a>で計測したら<strong>100点</strong>でした。マグレでも嬉しいです。</p> <p><a class="link" href="https://qwerty.work/blog/2020/05/17/No-14l.jpg" ><img class="gallery-image" data-flex-basis="378px" data-flex-grow="157" height="444" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/zenback-googletagmanager-lazyload/images/No-14.jpg" width="700"></a></p> <h3 id="braveなどでは表示されなくなるので注意">Braveなどでは表示されなくなるので注意！！ </h3><p>Google ChromeやEdgeでは問題ないのですが、Braveなどセキュリティ要素が強いブラウザではzenbackウィジェットが表示されなくなるので注意してください。<a class="link" href="https://tagmanager.google.com/" target="_blank" rel="noopener" >Google Tag Manager</a>のタグの書き方で回避できるかもしれませんが、それはまた今度探そうと思います。</p> https://qwerty.work/post/2020/05/adsense-speedup-lazyload/ Thu, 14 May 2020 23:39:54 +0900 https://qwerty.work/post/2020/05/adsense-speedup-lazyload/ <h2 id="adsenseの表示を速くしたいのであえて遅延表示">AdSenseの表示を速くしたいのであえて遅延表示？！ </h2><p>AdSenseの広告を表示させるとどうしてもページの表示が遅くなります。広告の数が多いほど遅くなります。そのせいで<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>や<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >PageSpeed Insights</a>のスコアが悪くなります。なんとかページの読み込みと表示を速くしたいと、</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/02/dns-prefetch-preconnect-prefetch-prerender-preload.php" target="_blank" rel="noopener" >DNS-PrefetchとかPreloadを使う</a></li> <li>広告の数だけあった<code>https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</code>を一つだけにする</li> <li><a class="link" href="https://qwerty.work/blog/2019/02/js-css-async-javascript.php" target="_blank" rel="noopener" >他のJSやCSSと一緒にまとめてasyncまたはdeferで読み込む</a></li> </ul> <p>など、いろいろ試して少しはページ表示スピードやスコアがよくなったのですが、どうしても納得がいきませんでした。</p> <p>そこで、いろいろ角度で調べていると、**『逆に遅延させるといい』**という方法を見つけました。以下にソースを貼っておきますが、効果ありました！<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >PageSpeed Insights</a>でスコアが安定して90点以上出るようになりました。</p> <p><img class="gallery-image" data-flex-basis="884px" data-flex-grow="368" height="190" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsense-speedup-lazyload/images/No-00.jpg" width="700"></p> <p>    ↓ 遅延表示させたらスコアが上がった！</p> <p><img class="gallery-image" data-flex-basis="884px" data-flex-grow="368" height="190" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsense-speedup-lazyload/images/No-01.jpg" width="700"></p> <h2 id="導入手順">導入手順 </h2><ul> <li>ページのソース内にある ``をすべて削除</li> <li>以下のスクリプトソースを``直前に貼る</li> </ul> <p><code>adsbygoogle.js</code>を遅延読み込みするので、ページソース内に一つでも残っていると効果が無くなります。一つも見逃さないように削除してください。</p> <h2 id="スクリプトソース">スクリプトソース </h2><p>ページが表示された後に<strong>マウス操作</strong>や<strong>ページスクロール</strong>が行なわれたらAdSenseの広告の読み込みが始まるスクリプトですが、何もアクションがないと全く広告が表示されないので、参考にさせていただいたソースに少しを手をくわえ、<strong>何もアクションが無くても3秒後に表示を開始</strong>するようにしました。</p> <p>40行目あたりの<code>window.setTimeout(onLazyLoad,3000)</code>がその部分にあたります。</p> <p>ページ閲覧者の環境やサーバーの負荷状況にもよるとお思いますが、1～2秒の遅延はあまり効果がなく、3秒（3000ミリ秒）以上の設定で試したところ、安定していいスコアが出るようになりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>(<span style="color:#66d9ef">function</span>(window, document) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">main</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// GoogleAdSense読込み </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ad</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#39;script&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ad</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;text/javascript&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ad</span>.<span style="color:#66d9ef">async</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">//ad.dataset.adClient = &#39;ca-pub-7180830494628299&#39;; </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ad</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sc</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#39;script&#39;</span>)[<span style="color:#ae81ff">0</span>]; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">sc</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">insertBefore</span>(<span style="color:#a6e22e">ad</span>, <span style="color:#a6e22e">sc</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 遅延読込み </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">lazyLoad</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onLazyLoad</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">lazyLoad</span> <span style="color:#f92672">===</span> <span style="color:#66d9ef">false</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 複数呼び出し回避 + イベント解除 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lazyLoad</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">removeEventListener</span>(<span style="color:#e6db74">&#39;scroll&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">removeEventListener</span>(<span style="color:#e6db74">&#39;mousemove&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">removeEventListener</span>(<span style="color:#e6db74">&#39;mousedown&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">removeEventListener</span>(<span style="color:#e6db74">&#39;touchstart&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">removeEventListener</span>(<span style="color:#e6db74">&#39;keydown&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">main</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;scroll&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;mousemove&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;mousedown&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;touchstart&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;keydown&#39;</span>, <span style="color:#a6e22e">onLazyLoad</span>); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;load&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ドキュメント途中（更新時 or ページ内リンク） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (window.<span style="color:#a6e22e">pageYOffset</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onLazyLoad</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">//何もアクションがないときは指定秒数後に読み込み開始（ミリ秒） </span></span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">setTimeout</span>(<span style="color:#a6e22e">onLazyLoad</span>,<span style="color:#ae81ff">3000</span>) </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>})(window, document); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">/ Adsense 遅延読み込み --&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="新コードと旧コードの見分け方">新コードと旧コードの見分け方 </h3><p>AdSenseの広告ユニットのコードの新旧は以下のような違いがあると、参考ページにはありました。それによって上記スクリプトの一部を変更する必要があるみたいです。</p> <h4 id="新コード例">新コード例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">client</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ca-pub-XXXXXXXXXXXXXXXX&#34;</span> <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h4 id="旧コード例">旧コード例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>(<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">||</span> []).<span style="color:#a6e22e">push</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">google_ad_client</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;ca-pub-XXXXXXXXXXXXXXXX&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">enable_page_level_ads</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="私の環境の場合">私の環境の場合 </h3><p>自動広告と手動広告の両方があり、以下の2種類のタグがありました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//自動広告 </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">client</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ca-pub-7180830494628299&#34;</span> <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//手動広告 </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ins</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;adsbygoogle&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display:block; text-align:center;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">layout</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;in-article&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">format</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fluid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">client</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ca-pub-7180830494628299&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">slot</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;4445374565&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/ins&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">||</span> []).<span style="color:#a6e22e">push</span>({}); </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>新コードなのか、旧コードなのかよくわからなかったのですが、広告タグにサイト運営者のIDに違いがあったので、</p> <ul> <li><code>data-ad-client</code>　→　新コード</li> <li><code>google_ad_client</code>　→　旧コード</li> </ul> <p>と、見分ければいいのかな？と解釈しました。</p> <p>どちらも<code>data-ad-client</code>しかないので<strong>新コード</strong>になるかと思われます。ですが、これをそれぞれ広告コードの<code>data-ad-client</code>を残したまま、<code>src=&quot;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;</code>を削除して以下のようにしました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//自動広告 </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">client</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ca-pub-7180830494628299&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//手動広告 </span></span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ins</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;adsbygoogle&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display:block; text-align:center;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">layout</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;in-article&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">format</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fluid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">client</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ca-pub-7180830494628299&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">ad</span><span style="color:#f92672">-</span><span style="color:#a6e22e">slot</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;4445374565&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/ins&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">||</span> []).<span style="color:#a6e22e">push</span>({}); </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>スクリプトソース中の<code>ad.dataset.adClient = 'ca-pub-7180830494628299';</code>の部分はコメントアウトしました。自動/手動の広告タグもスクリプトソース中のサイト運営者IDが入っているので、私の環境の場合はスクリプトソース中のコメントアウトはどちらでもいい感じです。</p> <h2 id="参考ページ">参考ページ </h2><h3 id="今回のスクリプトの参考にさせていただいたサイト">今回のスクリプトの参考にさせていただいたサイト </h3> <div class="link-card"> <a href="https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html?m=1" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html?m=1" alt="https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html?m=1" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html?m=1</span> <span class="link-card-url">https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html?m=1</span> </div> </a> </div> <div class="link-card"> <a href="https://www.bugbugnow.net/2019/05/onLazy.js.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bugbugnow.net/2019/05/onLazy.js.html" alt="https://www.bugbugnow.net/2019/05/onLazy.js.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bugbugnow.net/2019/05/onLazy.js.html</span> <span class="link-card-url">https://www.bugbugnow.net/2019/05/onLazy.js.html</span> </div> </a> </div> <div class="link-card"> <a href="https://www.bugbugnow.net/2019/05/dynamically-read-adblock-decision.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bugbugnow.net/2019/05/dynamically-read-adblock-decision.html" alt="https://www.bugbugnow.net/2019/05/dynamically-read-adblock-decision.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bugbugnow.net/2019/05/dynamically-read-adblock-decision.html</span> <span class="link-card-url">https://www.bugbugnow.net/2019/05/dynamically-read-adblock-decision.html</span> </div> </a> </div> <div class="link-card"> <a href="https://m-drive.me/reminder/web/20191106-2094/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://m-drive.me/reminder/web/20191106-2094/" alt="https://m-drive.me/reminder/web/20191106-2094/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://m-drive.me/reminder/web/20191106-2094/</span> <span class="link-card-url">https://m-drive.me/reminder/web/20191106-2094/</span> </div> </a> </div> <h3 id="似たようなスクリプトの参考サイト">似たようなスクリプトの参考サイト </h3> <div class="link-card"> <a href="https://nesla.info/pagespeed-insight-adsense-tag" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://nesla.info/pagespeed-insight-adsense-tag" alt="https://nesla.info/pagespeed-insight-adsense-tag" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://nesla.info/pagespeed-insight-adsense-tag</span> <span class="link-card-url">https://nesla.info/pagespeed-insight-adsense-tag</span> </div> </a> </div> <div class="link-card"> <a href="https://q-az.net/lazy-load-script/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://q-az.net/lazy-load-script/" alt="https://q-az.net/lazy-load-script/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://q-az.net/lazy-load-script/</span> <span class="link-card-url">https://q-az.net/lazy-load-script/</span> </div> </a> </div> <h3 id="lazyloadに関する他の参考サイト">LazyLoadに関する他の参考サイト </h3> <div class="link-card"> <a href="https://webkaru.net/jquery-plugin/lazy-script/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webkaru.net/jquery-plugin/lazy-script/" alt="https://webkaru.net/jquery-plugin/lazy-script/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webkaru.net/jquery-plugin/lazy-script/</span> <span class="link-card-url">https://webkaru.net/jquery-plugin/lazy-script/</span> </div> </a> </div> <div class="link-card"> <a href="https://alaki.co.jp/blog/?p=2527" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://alaki.co.jp/blog/?p=2527" alt="https://alaki.co.jp/blog/?p=2527" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://alaki.co.jp/blog/?p=2527</span> <span class="link-card-url">https://alaki.co.jp/blog/?p=2527</span> </div> </a> </div> <h3 id="googleアドマネージャーを使っている場合の参考">Googleアドマネージャーを使っている場合の参考 </h3> <div class="link-card"> <a href="https://marketing-gorilla.jp/posts/331" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://marketing-gorilla.jp/posts/331" alt="https://marketing-gorilla.jp/posts/331" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://marketing-gorilla.jp/posts/331</span> <span class="link-card-url">https://marketing-gorilla.jp/posts/331</span> </div> </a> </div> <h2 id="あとは収益が上がるのか下がるのかが気になるところ">あとは収益が上がるのか下がるのかが気になるところ </h2><p>ここまでやってスコアは良くなりましたがAdsenseの収益にどう影響が出てくるのか気になるところ。スコアが高くなったから収益も上がって欲しいのですが、上がるとは限らず、逆に下がったら手を加えた意味がありません。当分、観察が必要です。</p> https://qwerty.work/post/2019/02/mokuji-tocjs/ Mon, 25 Feb 2019 21:35:32 +0900 https://qwerty.work/post/2019/02/mokuji-tocjs/ <h3 id="最近よく見かけるページの目次">最近よく見かけるページの「目次」 </h3><p>最近やたらといろんなブログで「目次」を設置しているのを目にします。ページの要約としてパッとわかりやすいと思うのですが、ユーザービリティ向上のためだけではこのブログに設置しようとは思わないのですが、以下のページでSEO対策として有効な手段っぽいことがわかったので、このブログにも設置してみることにしました。</p> <h4 id="seo対策としての目次についての参考ページ">SEO対策としての目次についての参考ページ </h4> <div class="link-card"> <a href="https://seo-lpo-consultant.com/google-search-result-move/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://seo-lpo-consultant.com/google-search-result-move/" alt="https://seo-lpo-consultant.com/google-search-result-move/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://seo-lpo-consultant.com/google-search-result-move/</span> <span class="link-card-url">https://seo-lpo-consultant.com/google-search-result-move/</span> </div> </a> </div> <div class="link-card"> <a href="https://macoblog.com/mokuji-seo-kouka/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://macoblog.com/mokuji-seo-kouka/" alt="https://macoblog.com/mokuji-seo-kouka/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://macoblog.com/mokuji-seo-kouka/</span> <span class="link-card-url">https://macoblog.com/mokuji-seo-kouka/</span> </div> </a> </div> <h3 id="tocjsなら簡単に目次を設置できる">「TOC.js」なら簡単に目次を設置できる </h3><p>「目次」は英語で「Table of contents」と書くので「TOC」。</p> <p>WordPressなら「Table of Contents Plus」というプラグインがあるみたいですが、MovableTypeやその他のCMSでプラインが見当たらない場合に**「toc.js」**を使うのがいいのではないかと思います。</p> <p><img class="gallery-image" data-flex-basis="571px" data-flex-grow="238" height="294" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/02/mokuji-tocjs/images/No-03.jpg" width="700"></p> <p><strong>TOC.jsはjQueryに依存するJavascript</strong>で、これを設置すればページ内のやタグの文字列を読み取り、簡単にアンカーリンク付きの目次を表示してくれます。目次をクリックするとちゃんとその記事の部分にジャンプしてくれます。</p> <p>また、ブログの記事内のみの指定したセクションのタグを対象にするように、<strong>class</strong>や<strong>id</strong>で指定したり、#### まで複数のを指定すると、段落を付けてリスト表示してくれたりと、小回りが利きます。</p> <p>作者の公開ページ</p> <div class="link-card"> <a href="http://projects.jga.me/toc/#toc6" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://projects.jga.me/toc/#toc6" alt="http://projects.jga.me/toc/#toc6" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://projects.jga.me/toc/#toc6</span> <span class="link-card-url">http://projects.jga.me/toc/#toc6</span> </div> </a> </div> <h3 id="tocjsまたはtocminjsをダウンロード">「toc.js」または「toc.min.js」をダウンロード </h3><p>まずは必要な「toc.js」を以下ページ内の<a class="link" href="https://github.com/jgallen23/toc/releases" target="_blank" rel="noopener" >Releaseページ</a>からダウンロードします。</p> <div class="link-card"> <a href="https://github.com/jgallen23/toc" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/jgallen23/toc" alt="https://github.com/jgallen23/toc" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/jgallen23/toc</span> <span class="link-card-url">https://github.com/jgallen23/toc</span> </div> </a> </div> <p><img class="gallery-image" data-flex-basis="369px" data-flex-grow="153" height="455" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/02/mokuji-tocjs/images/No-05.jpg" width="700"></p> <p>現時点での最新バージョンは<strong>1.4.1</strong>なのですが、このバージョンのZIPファイルには「toc.js」または「toc.min.js」が<strong>入っていません</strong>ので注意してください。</p> <p><img class="gallery-image" data-flex-basis="384px" data-flex-grow="160" height="437" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/02/mokuji-tocjs/images/No-02.jpg" width="700"></p> <p>では、どこにあるかというと<strong>0.3.2のZIP</strong>の中にあります。</p> <div class="link-card"> <a href="https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1" alt="https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1</span> <span class="link-card-url">https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1</span> </div> </a> </div> <p><img class="gallery-image" data-flex-basis="444px" data-flex-grow="185" height="378" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/02/mokuji-tocjs/images/No-01.jpg" width="700"></p> <p>ダウンロードしたZIPを解凍したdistフォルダを開くと**「toc.js」<strong>とコード圧縮版の</strong>「toc.min.js」**が出てきます。これを任意のディレクトリにアップロードして使います。</p> <p><img class="gallery-image" data-flex-basis="656px" data-flex-grow="273" height="256" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/02/mokuji-tocjs/images/No-04.jpg" width="700"></p> <h3 id="目次の自動表示を実現するための手順">目次の自動表示を実現するための手順 </h3><p>toc.jsで目次を自動作成して表示するためには以下の準備が必要です。</p> <ul> <li>jQueryの読み込み</li> <li>toc.jsの読み込み</li> <li>toc.jsで出力する目次のセッティング</li> <li>目次を表示する部分にタグを設置</li> <li>目次を整形するCSS</li> </ul> <h4 id="jqueryとtocjsと目次のセッティング">jQueryとtoc.jsと目次のセッティング </h4><p>私の場合、以下のソースをの直前あたりに組み込みました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/js/toc-0.3.2/dist/toc.min.js&#34;</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>( <span style="color:#e6db74">&#39;load&#39;</span>, <span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>(<span style="color:#e6db74">&#39;#toc&#39;</span>).<span style="color:#a6e22e">toc</span>({ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;container&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;section.entry-content&#39;</span>, <span style="color:#75715e">/* 見出しを取得するエリアを指定 */</span> </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;selectors&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;h2, h3&#39;</span>, <span style="color:#75715e">/* 目次として表示したい見出しの指定 */</span> </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;anchorName&#39;</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">i</span>, <span style="color:#a6e22e">heading</span>, <span style="color:#a6e22e">prefix</span>) { <span style="color:#75715e">//アンカーネームのカスタマイズ </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">prefix</span><span style="color:#f92672">+</span><span style="color:#a6e22e">i</span>; </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}, <span style="color:#66d9ef">false</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>Defer対応で**ソースをwindow.addEventListener( &rsquo;load&rsquo;, function(){&hellip;}, false);<strong>で囲む JSを非同期実行させるためにDeferを使っているのですが、Deferを使うとChromeはtoc.jsのサンプルソースで目次を表示できましたが、EdgeとIE11（Internet Explorer 11）では表示できなかったので、Defer対策として</strong>window.addEventListener( &rsquo;load&rsquo;, function(){&hellip;}, false);**で設定のソースを囲っています。私の環境ではこれで表示できました。</p> <p>&lsquo;container&rsquo;でブログ記事の部分を指定 このブログの記事を表示する部分は****で囲われているので、**&lsquo;container&rsquo;<strong>の部分で</strong> &lsquo;section.entry-content&rsquo;**を指定しています。設置するブログに合わせてここを変えてください。</p> <p>&lsquo;selectors&rsquo;で,### を対象にする ブログ記事内のタグを文字列を対象に目次に出力したいときは、**&lsquo;selectors&rsquo;<strong>の部分に</strong>&lsquo;h2, h3&rsquo;**を指定します。もっと詳しくh4,h5も加えてみましたが、h2～h5まで指定すると目次が縦長でウザイことになったので、私の場合h2,h3のみに絞りました。</p> <p>&lsquo;anchorName&rsquo;の部分で日本語環境時の不具合を回避 **&lsquo;anchorName&rsquo;**の部分を指定しないと、目次のアンカーリンクが正常に割り当てられません。その不具合を回避するために、上記のような指定をしています。これを指定すると正常にアンカーリンクが割り当てられ機能します。</p> <h4 id="これ以外に指定できるオプションの参考">これ以外に指定できるオプションの参考 </h4><p>英語ですが公式ページの「Options」に説明があります。</p> <div class="link-card"> <a href="http://projects.jga.me/toc/#toc4" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://projects.jga.me/toc/#toc4" alt="http://projects.jga.me/toc/#toc4" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://projects.jga.me/toc/#toc4</span> <span class="link-card-url">http://projects.jga.me/toc/#toc4</span> </div> </a> </div> <p>日本語で解説した参考ページはこちら↓</p> <div class="link-card"> <a href="https://nelog.jp/jquery-table-of-contents-plugin#toc7" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://nelog.jp/jquery-table-of-contents-plugin#toc7" alt="https://nelog.jp/jquery-table-of-contents-plugin#toc7" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://nelog.jp/jquery-table-of-contents-plugin#toc7</span> <span class="link-card-url">https://nelog.jp/jquery-table-of-contents-plugin#toc7</span> </div> </a> </div> <h4 id="目次を表示したい部分に設置するタグ">目次を表示したい部分に設置するタグ </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;toc&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><p>このタグを目次を表示したいところに設置すれば、ここに目次が表示されます。</p> <h4 id="目次用のスタールシートcss">目次用のスタールシート（CSS） </h4><p>公式ページのサンプルのスタイルシートは目次を画面左に表示しますが、私は記事内に表示したかったので、以下のコードは公式サンプルのコードの不要な部分をコメントアウトしています。また、モバイル表示では目次が邪魔になるので**@media screen**で幅が639pxの時は非表示にするようにしました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#toc { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*top: 0px; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> left: 0px; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> height: 100%; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> position: fixed; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> background: #333; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> box-shadow: inset -5px 0 5px 0px #000; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> width: 150px; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> padding-top: 20px; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> color: #fff;*/</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> #toc <span style="color:#f92672">ul</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">list-style</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc <span style="color:#f92672">li</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc <span style="color:#f92672">a</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*color: #fff;*/</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-decoration</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc .<span style="color:#a6e22e">toc-h2</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-left</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc .<span style="color:#a6e22e">toc-h3</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-left</span>: <span style="color:#ae81ff">30</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc .<span style="color:#a6e22e">toc-h4</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-left</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#toc .<span style="color:#a6e22e">toc-active</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*background: #336699; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> box-shadow: inset -5px 0px 10px -5px #000;*/</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">screen</span> <span style="color:#f92672">and</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">639px</span><span style="color:#f92672">)</span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">section</span>.<span style="color:#a6e22e">mokuji</span><span style="color:#f92672">,</span> #toc { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span></code></pre></div><p>手順に関する参考ページ</p> <div class="link-card"> <a href="https://nelog.jp/jquery-table-of-contents-plugin" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://nelog.jp/jquery-table-of-contents-plugin" alt="https://nelog.jp/jquery-table-of-contents-plugin" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://nelog.jp/jquery-table-of-contents-plugin</span> <span class="link-card-url">https://nelog.jp/jquery-table-of-contents-plugin</span> </div> </a> </div> <div class="link-card"> <a href="https://haniwaman.com/toc/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://haniwaman.com/toc/" alt="https://haniwaman.com/toc/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://haniwaman.com/toc/</span> <span class="link-card-url">https://haniwaman.com/toc/</span> </div> </a> </div> <h3 id="その他の参考ページ">その他の参考ページ </h3><p>将来的に約に立ちそうなのでメモ。</p> <h4 id="wordpressでプラグインを使わずphpで目次を作る参考ページ">WordPressでプラグインを使わずPHPで目次を作る参考ページ </h4> <div class="link-card"> <a href="https://www.iscle.com/web-it/wp/page-mokuji.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.iscle.com/web-it/wp/page-mokuji.html" alt="https://www.iscle.com/web-it/wp/page-mokuji.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.iscle.com/web-it/wp/page-mokuji.html</span> <span class="link-card-url">https://www.iscle.com/web-it/wp/page-mokuji.html</span> </div> </a> </div> <h4 id="jqueryに依存せず目次を作るjsの参考ページ">jQueryに依存せず目次を作るJSの参考ページ </h4> <div class="link-card"> <a href="https://imatomix.com/imatomix/notes/1509715980" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://imatomix.com/imatomix/notes/1509715980" alt="https://imatomix.com/imatomix/notes/1509715980" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://imatomix.com/imatomix/notes/1509715980</span> <span class="link-card-url">https://imatomix.com/imatomix/notes/1509715980</span> </div> </a> </div> <h4 id="目次を自動生成してくれるmovabletypeのプラグイン">目次を自動生成してくれるMovableTypeのプラグイン </h4><p>jQueryに依存しているプラグインで、toc.jsと同じ感じ。</p> <div class="link-card"> <a href="http://www.koikikukan.com/archives/2014/09/01-015555.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.koikikukan.com/archives/2014/09/01-015555.php" alt="http://www.koikikukan.com/archives/2014/09/01-015555.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.koikikukan.com/archives/2014/09/01-015555.php</span> <span class="link-card-url">http://www.koikikukan.com/archives/2014/09/01-015555.php</span> </div> </a> </div> <h4 id="hタグに自動でidを割り当ててくれるmovabletypeのプラグイン">hタグに自動でIDを割り当ててくれるMovableTypeのプラグイン </h4><p>IDを割り振るだけで目次を生成してくれるわけではない。</p> <div class="link-card"> <a href="https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md" alt="https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md</span> <span class="link-card-url">https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md</span> </div> </a> </div> https://qwerty.work/post/2019/02/js-css-async-javascript/ Sat, 09 Feb 2019 20:38:57 +0900 https://qwerty.work/post/2019/02/js-css-async-javascript/ <p>WEBページの表示スピードを高速化させるために、<strong>複数のJSやCSS</strong>を非同期の<code>Async</code>で読み込んだり、<code>Defer</code>で読み込んだりするためのソースをメモ。</p> <h3 id="jsとcssを遅延読み込みするスクリプト">JSとCSSを遅延読み込みするスクリプト </h3><p><strong>jQueryに依存</strong>するスクリプトなので、実行するには事前にjQueryを読み込んでおく必要があります。JSとCSSを混在させてURLを指定すればOK。これを<code>～</code>の間に書いて使うものっぽいですが、私は``の直前に書いて使っています。どちらがいいかは好みです。</p> <p>非同期で使用するなら、jQueryと読み込み順がバラバラになる<code>async</code>を使うとうまくいかなくなります。jQueryの後に順番通りに読み込む<code>defer</code>を使う方がよいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">jQuery</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">//var r=Math.ceil((new Date()*1)*Math.random()); //Zenback用デフォルト </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(); <span style="color:#75715e">//Zenback用 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>.<span style="color:#a6e22e">getFullYear</span>()<span style="color:#f92672">+</span>(<span style="color:#e6db74">&#39;0&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>.<span style="color:#a6e22e">getMonth</span>()).<span style="color:#a6e22e">slice</span>(<span style="color:#f92672">-</span><span style="color:#ae81ff">2</span>) ; <span style="color:#75715e">//randの値を年月（例 201901）にする </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">require_onload</span>( [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//w.zenback.jp/v1/?base_uri=https%3A//qwerty.work&amp;nsid=1234561665775123456%3A%3A123456466455123456&amp;rand=&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">r</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;//jsoon.digitiminimi.com/js/widgetoon.js&#39;</span> </span></span><span style="display:flex;"><span> ] ); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">require_onload</span>( <span style="color:#a6e22e">arg</span> ) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">is_array</span>(<span style="color:#a6e22e">arg</span>)){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">element</span> <span style="color:#f92672">=</span> []; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">arg</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/\.css/</span>) ){ <span style="color:#75715e">//末尾だけ確認したいときは/\.css$/ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_child_css</span>(<span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/\.js|w\.zenback.\jp/</span>) ){ <span style="color:#75715e">//末尾だけ確認したいときは/\.js$/ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_child_js</span>(<span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span>{ <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#39;check url : &#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>]) } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span>{ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">arg</span>.<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/\.css/</span>) ){ <span style="color:#75715e">//末尾だけ確認したいときは/\.css$/ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_child_css</span>(<span style="color:#a6e22e">arg</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">arg</span>.<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/\.js|w\.zenback.\jp/</span>) ){<span style="color:#75715e">//末尾だけ確認したいときは/\.js$/ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_child_js</span>(<span style="color:#a6e22e">arg</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span>{ <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#39;check url : &#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">arg</span>[<span style="color:#a6e22e">i</span>]) } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">add_child_js</span>(<span style="color:#a6e22e">src</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">element</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;script&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">element</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">src</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">element</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">add_child_css</span>(<span style="color:#a6e22e">src</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">css_element</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#39;link&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">css_element</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;text/css&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">css_element</span>.<span style="color:#a6e22e">rel</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;stylesheet&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">css_element</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">src</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">css_element</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">is_array</span>(<span style="color:#a6e22e">obj</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> Object.<span style="color:#a6e22e">prototype</span>.<span style="color:#a6e22e">toString</span>.<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">obj</span>) <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;[object Array]&#39;</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h4 id="参考ページ">参考ページ </h4> <div class="link-card"> <a href="https://pgmemo.tokyo/data/archives/517.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://pgmemo.tokyo/data/archives/517.html" alt="https://pgmemo.tokyo/data/archives/517.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://pgmemo.tokyo/data/archives/517.html</span> <span class="link-card-url">https://pgmemo.tokyo/data/archives/517.html</span> </div> </a> </div> <h3 id="cssを非同期で読み込むスクリプト例">CSSを非同期で読み込むスクリプト例 </h3><p><strong>jQueryに依存していない</strong>ので、単体で使用できます。下の方のエレメントをいじくればJSや<code>DNS-Prefetch</code>などに転用可能です。これも<code>～</code>の間に書くか、``の直近や後ろに書くかは好みです。これはjQueryに依存しないので、非同期読込は<code>async</code>、<code>defer</code>のどちらでも大丈夫です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#66d9ef">async</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;load&#34;</span>,<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">css</span> <span style="color:#f92672">=</span> [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css&#34;</span> </span></span><span style="display:flex;"><span> ]; </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span>(<span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">css</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">html</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;link&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">rel</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;stylesheet&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">css</span>[<span style="color:#a6e22e">i</span>]; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">html</span>.<span style="color:#66d9ef">async</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">html</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h4 id="参考ページ-1">参考ページ </h4> <div class="link-card"> <a href="https://naruhodo.repop.jp/css-js-loader/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://naruhodo.repop.jp/css-js-loader/" alt="https://naruhodo.repop.jp/css-js-loader/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://naruhodo.repop.jp/css-js-loader/</span> <span class="link-card-url">https://naruhodo.repop.jp/css-js-loader/</span> </div> </a> </div> <h3 id="deferとasyncを指定して非同期で読み込むスクリプト">DeferとAsyncを指定して非同期で読み込むスクリプト </h3> <div class="link-card"> <a href="https://github.com/suzunone/PrefetchLoader" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/suzunone/PrefetchLoader" alt="https://github.com/suzunone/PrefetchLoader" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/suzunone/PrefetchLoader</span> <span class="link-card-url">https://github.com/suzunone/PrefetchLoader</span> </div> </a> </div> <h4 id="参考ページ-2">参考ページ </h4> <div class="link-card"> <a href="https://qiita.com/suzunone/items/55277b99893b2a6cf353" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/suzunone/items/55277b99893b2a6cf353" alt="https://qiita.com/suzunone/items/55277b99893b2a6cf353" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> <span class="link-card-url">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> </div> </a> </div> <h3 id="dns-prefetchを非同期で行うスクリプト例">DNS-Prefetchを非同期で行うスクリプト例 </h3><p>JSやCSSから横道逸れますが、半角スペースで接続先を指定する例。<strong>DNS-Prefetch</strong>を非同期で実行するスクリプトですが、エレメントの部分を入れ替えれば、CSSやJSにも使えそうです。<strong>jQueryなし</strong>で使えます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">c</span>){<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">d</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//jsoon.digitiminimi.com/js/widgetoon.js //w.zenback.jp/_p/js/jquery.min.js //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js /include/GoogleAnalytics.js&#34;</span>.<span style="color:#a6e22e">split</span>(<span style="color:#e6db74">&#34; &#34;</span>),<span style="color:#a6e22e">a</span>,<span style="color:#a6e22e">b</span>,<span style="color:#a6e22e">e</span><span style="color:#f92672">=</span><span style="color:#a6e22e">c</span>.<span style="color:#a6e22e">createDocumentFragment</span>();<span style="color:#66d9ef">for</span>(<span style="color:#a6e22e">a</span><span style="color:#f92672">=</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">length</span><span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>;<span style="color:#ae81ff">0</span><span style="color:#f92672">&lt;=</span><span style="color:#a6e22e">a</span>;<span style="color:#a6e22e">a</span><span style="color:#f92672">--</span>)<span style="color:#a6e22e">b</span><span style="color:#f92672">=</span><span style="color:#a6e22e">c</span>.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;link&#34;</span>),<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;rel&#34;</span>,<span style="color:#e6db74">&#34;prefetch&#34;</span>),<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;href&#34;</span>,<span style="color:#a6e22e">d</span>[<span style="color:#a6e22e">a</span>]),<span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;as&#34;</span>,<span style="color:#e6db74">&#34;script&#34;</span>),<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">b</span>);<span style="color:#a6e22e">c</span>.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#34;head&#34;</span>)[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">e</span>) </span></span><span style="display:flex;"><span>})(document); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="その他参考ページ">その他参考ページ </h3> <div class="link-card"> <a href="https://webkaru.net/jquery-plugin/lazy-script/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webkaru.net/jquery-plugin/lazy-script/" alt="https://webkaru.net/jquery-plugin/lazy-script/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webkaru.net/jquery-plugin/lazy-script/</span> <span class="link-card-url">https://webkaru.net/jquery-plugin/lazy-script/</span> </div> </a> </div> <div class="link-card"> <a href="https://firstlayout.net/load-css-asynchronously-with-loadcss/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://firstlayout.net/load-css-asynchronously-with-loadcss/" alt="https://firstlayout.net/load-css-asynchronously-with-loadcss/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://firstlayout.net/load-css-asynchronously-with-loadcss/</span> <span class="link-card-url">https://firstlayout.net/load-css-asynchronously-with-loadcss/</span> </div> </a> </div> <h3 id="css限定もっとシンプルな方法">CSS限定！もっとシンプルな方法 </h3><p>スタイルシート（CSS）限定ですが、Javascript無しのもっとシンプルな方法で非同期読み込みできる方法を見つけましたので参考にメモ。（2020/05/18追記）</p> <div class="link-card"> <a href="https://curio-shiki.com/blog/webpage/what-we-do-for-speed" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://curio-shiki.com/blog/webpage/what-we-do-for-speed" alt="https://curio-shiki.com/blog/webpage/what-we-do-for-speed" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://curio-shiki.com/blog/webpage/what-we-do-for-speed</span> <span class="link-card-url">https://curio-shiki.com/blog/webpage/what-we-do-for-speed</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" alt="https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657</span> <span class="link-card-url">https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657</span> </div> </a> </div> <h4 id="上記の参考ページにあったソース例">上記の参考ページにあったソース例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;preload&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;style&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;print&#34;</span> <span style="color:#a6e22e">onload</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;this.media=&#39;all&#39;&#34;</span>&gt; </span></span></code></pre></div><p>なぜコレが非同期なのかわかりませんし、効果があるのかも謎ですが、今度ためしてみようと思います。</p> <p>以下にもCSS非同期読み込みについてまとめています。( 2021/12/13追記）</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2021/12/css-async-perfomance.php" target="_blank" rel="noopener" >CSSを非同期で読み込むいろいろな方法 - QWERTY.WORK</a></li> </ul> https://qwerty.work/post/2019/01/jquery-defer-async-error/ Mon, 28 Jan 2019 23:58:24 +0900 https://qwerty.work/post/2019/01/jquery-defer-async-error/ <h3 id="jqueryの読込にdeferやasync使ったら動かなくなった">jQueryの読込にDeferやAsync使ったら動かなくなった </h3><p>サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSに<strong>defer</strong>や<strong>async</strong>を付けていたら、<strong>jQuery</strong>に<strong>Defer</strong>を付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#39;/js/jquery.min.js&#39;</span> <span style="color:#960050;background-color:#1e0010">defer</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h3 id="そんなときの対処法">そんなときの対処法 </h3><p>jQueryに依存するスクリプトを**window.onload = function() {&hellip;}**で囲ってみてください。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">スクリプト</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script defer&gt;</span> </span></span></code></pre></div><p>または、**window.addEventListener( &rsquo;load&rsquo;, function(){&hellip;}, false);**で囲ってみてください。</p> <p>特にChromeは動くけど、EdgeやInternet Explorer(IE)で動かないときはこちらが有効でした。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>( <span style="color:#e6db74">&#39;load&#39;</span>, <span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">スクリプト</span> </span></span><span style="display:flex;"><span> }, <span style="color:#66d9ef">false</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><p>のようにスクリプトを囲ってやれば、<strong>Defer</strong>で読み込んでもスクリプトが動くようになります。詳しくは以下のサイトに詳しく例が書いてありましたので参考にしてみてください。</p> <p>それでも動かない場合、<strong><strong>を</strong></strong>、****にする必要なときがあります。</p> <h4 id="参考サイト">参考サイト </h4> <div class="link-card"> <a href="https://norando.net/jqueryplugin-and-defer/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://norando.net/jqueryplugin-and-defer/" alt="https://norando.net/jqueryplugin-and-defer/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://norando.net/jqueryplugin-and-defer/</span> <span class="link-card-url">https://norando.net/jqueryplugin-and-defer/</span> </div> </a> </div> <div class="link-card"> <a href="https://sakura.monte-verita.biz/3981" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://sakura.monte-verita.biz/3981" alt="https://sakura.monte-verita.biz/3981" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://sakura.monte-verita.biz/3981</span> <span class="link-card-url">https://sakura.monte-verita.biz/3981</span> </div> </a> </div> <h3 id="onloadを使って回避する方法もある">Onloadを使って回避する方法もある </h3><p>以下のページには上記と違う方法で回避する方法もありました。私も使ってみたところうまく回避できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span> <span style="color:#a6e22e">onload</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34; </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(function() { </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(&#39;form&#39;).submit(function() { </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(&#39;form&#39;).find(&#39;:submit&#39;).attr(&#39;disabled&#39;, &#39;disabled&#39;); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> }); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> }); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> &#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div> <div class="link-card"> <a href="https://qiita.com/suzunone/items/55277b99893b2a6cf353" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/suzunone/items/55277b99893b2a6cf353" alt="https://qiita.com/suzunone/items/55277b99893b2a6cf353" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> <span class="link-card-url">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> </div> </a> </div> <p>また、指定したJSとCSSをDeferとAsyncを使い分けて読み込む<a class="link" href="https://github.com/suzunone/PrefetchLoader" target="_blank" rel="noopener" >PrefetchLoader.js</a>というスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。</p> <p>ですが、<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>や<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >Pagespeed Insights</a>などで測定すると表示の時間は遅くなりました。見た目は速い感じがするんですが不思議です。今回は適用を見送りましたが、気になるのでまた試してみたいと思います。</p> <h3 id="その他参考サイト">その他参考サイト </h3><p>JSをどこで読み込むかで表示スピードが変わる実験結果が書いてありました。ともて興味深いのでメモ。</p> <div class="link-card"> <a href="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" alt="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/</span> <span class="link-card-url">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/</span> </div> </a> </div> https://qwerty.work/post/2019/01/jquery-ajax-php-async/ Thu, 17 Jan 2019 22:17:56 +0900 https://qwerty.work/post/2019/01/jquery-ajax-php-async/ <h3 id="ソーシャルボタンを自作して表示スピードを高速化">ソーシャルボタンを自作して表示スピードを高速化 </h3><p><strong>Twitter、Facebook、はてな、Pocket</strong>など公式のボタンを使用するとかなりページを表示するスピードが遅くなるため、先日からページ表示を高速化するためにソーシャルボタンの自作にチャレンジしています。</p> <p><img class="gallery-image" data-flex-basis="800px" data-flex-grow="333" height="210" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-01.jpg" width="700"></p> <p>Wordpressであればプラグインで簡単に高速化できのですが、Wordpressではないページで使用するため、どうしても自作するしか高速化する方法がありません。そこで最近行っている自作チャレンジしているメモのブログが以下なんですが、いろいろな方法を試して徐々にページスピードを上げることができました。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-pocket-count-get.php" target="_blank" rel="noopener" >PHPでPocketの公式ボタンからストックされたカウント数だけを取得する</a></li> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-sns-share-button.php" target="_blank" rel="noopener" >PHPでカウント付のSNSシェアボタンを自作してみた</a></li> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-curl-multi-snsbutton.php" target="_blank" rel="noopener" >PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた</a></li> </ul> <p>上から、<strong>Pocket</strong>のストックカウントを取得するだけで<strong>約1.4～2秒</strong>かかり、公式ボタンより遅くなる。</p> <p>↓</p> <p>PHPの関数「<strong>cURL」<strong>を使用して</strong>Twitter、Facebook、はてな、Pocket</strong>のカウント数をAPIから同期で取得してボタンを自作して<strong>約2秒</strong>で表示できた。</p> <p>↓</p> <p>PHPの<strong>cURL</strong>を非同期で実行できる<strong>curl_multi</strong>を使用すると同じことを<strong>約1.5秒</strong>で表示できるようになりました。</p> <h3 id="でも同期でphpを読み込むから15秒遅くなるということ">でも同期でPHPを読み込むから1.5秒遅くなるということ </h3><p>自作のSNSボタンのみの表示を約1.5秒まで縮めることができたのですが、このSNSボタンを表示させたいページに埋め込むと、そのページの表示は1.5秒遅くなるということ。curl_multiでAPIの取得は非同期でやっているけど、そのPHPはページから同期で呼び出すためです。これを非同期で呼び出すことができればページ全体の表示を速くできるのではないかと思います。</p> <h3 id="そこでphpをjavascriptから呼び出す">そこでPHPをJavascriptから呼び出す！ </h3><p>jQueryのAjaxでPHPを非同期で呼び出すことができるそうです。これを使えば、PHP内で各SNSのAPIからカウント数を非同期で取得し、そのPHPをJavascriptから非同期で実行させることがきて<strong>ダブル非同期</strong>。</p> <p>サーバーサイドのPHPとクライアントサイドのJavascriptで負荷を分散してるので、これで更に**速くなるに違いない！**と想像しています。</p> <h3 id="そして作ったソース">そして作ったソース </h3><h4 id="php">PHP </h4><p>PHPではjavascriptのページから$_GETでカウントを取得したいURLを受取り、そのURLを対象に各SNSのAPIからカウント数を取得します。そしてカウント数を組み込んだ自作シャーシャルボタンのHTMLを変数に入れます。ファイル名は仮にget_sns_button.phpとします。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">num_format</span>($count) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//3桁区切りのカンマを削除 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">&#39;,&#39;</span>,<span style="color:#e6db74">&#39;&#39;</span>,$count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//数値に変換 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">intval</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// カウント数が取得できないときは0にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">isset</span>($count) <span style="color:#f92672">?</span> <span style="color:#a6e22e">intval</span>($count) <span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span> ; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fetch_sns_count</span>($targeturl) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 並列通信用マルチハンドルを用意 </span></span></span><span style="display:flex;"><span> $mh <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_init</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIごとにCurl Handleを作る </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Twitter </span></span></span><span style="display:flex;"><span> $ch_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;http://jsoon.digitiminimi.com/twitter/count.json?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_twitter, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_twitter); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Facebook </span></span></span><span style="display:flex;"><span> $ch_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://graph.facebook.com/?id=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_facebook, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Hatena </span></span></span><span style="display:flex;"><span> $ch_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://b.hatena.ne.jp/entry.count?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_hatena, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Pocket </span></span></span><span style="display:flex;"><span> $ch_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/button?v=1&amp;count=horizontal&amp;url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&amp;src=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_pocket, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 複数の通信を非同期で同時実行 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">do</span> { <span style="color:#a6e22e">curl_multi_exec</span>($mh, $running); } <span style="color:#66d9ef">while</span> ( $running ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIから戻ってきた値を変数に入れる </span></span></span><span style="display:flex;"><span> $json_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_twitter); </span></span><span style="display:flex;"><span> $json_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_facebook); </span></span><span style="display:flex;"><span> $count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_hatena); </span></span><span style="display:flex;"><span> $html_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// cURLハンドルセットを閉じる </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_twitter); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_twitter); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_facebook); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_hatena); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_pocket); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_close</span>($mh); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*デバッグ用 </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($json_twitter); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($json_facebook); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($count_hatena); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($html_pocket); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Twitterのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_twitter, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span> $count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_twtter[<span style="color:#e6db74">&#39;count&#39;</span>])); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//facebookのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_facebook, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span> $count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_facebook[<span style="color:#e6db74">&#39;share&#39;</span>][<span style="color:#e6db74">&#39;share_count&#39;</span>]); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Hatenaのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Pocketのカウント数を取り出す </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">//HTML→DOM→XML→JSON→配列に変換 </span></span></span><span style="display:flex;"><span> $dom_pocket <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">DOMDocument</span>(<span style="color:#e6db74">&#39;1.0&#39;</span>, <span style="color:#e6db74">&#39;UTF-8&#39;</span>); </span></span><span style="display:flex;"><span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">preserveWhiteSpace</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">loadHTML</span>($html_pocket); </span></span><span style="display:flex;"><span> $xmlString_pocket <span style="color:#f92672">=</span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">saveXML</span>(); </span></span><span style="display:flex;"><span> $xmlObject_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_string</span>($xmlString_pocket); </span></span><span style="display:flex;"><span> $count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>(<span style="color:#a6e22e">json_encode</span>($xmlObject_pocket), <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_pocket[<span style="color:#e6db74">&#39;body&#39;</span>][<span style="color:#e6db74">&#39;div&#39;</span>][<span style="color:#e6db74">&#39;a&#39;</span>][<span style="color:#e6db74">&#39;span&#39;</span>][<span style="color:#e6db74">&#39;em&#39;</span>])); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//カウント付ソーシャルボタンのHTML </span></span></span><span style="display:flex;"><span>$res <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&lt;ul class=&#34;sns-counter&#34; title=&#34;&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34;&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-tw&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//twitter.com/intent/tweet?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-twitter&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_twtter<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-fb&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//www.facebook.com/sharer/sharer.php?u=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; onclick=&#34;window.open(\&#39;https://www.facebook.com/sharer/sharer.php?u=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;\&#39;, \&#39;new\&#39;, \&#39;width=500,height=300\&#39;);return false;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-facebook-f&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_facebook<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-hb&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//b.hatena.ne.jp/entry/&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fa fa-hatena&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_hatena<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-pk&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//getpocket.com/edit?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-get-pocket&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_pocket<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-line&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//social-plugins.line.me/lineit/share?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-line&#34;&gt;&lt;/i&gt;&lt;span&gt;LINE&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/ul&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $res; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>$targeturl <span style="color:#f92672">=</span> $_GET[<span style="color:#e6db74">&#39;targeturl&#39;</span>]; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">fetch_sns_count</span>($targeturl); </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><h4 id="javascript">Javascript </h4><p>jQueryのAjaxからPHP（get_sns_button.php）を呼び出し、PHPの変数に入ったソーシャルボタンのHTMLをページ内に展開するページのソースです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">html</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ja&#34;</span> <span style="color:#a6e22e">itemscope</span> <span style="color:#a6e22e">itemtype</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://schema.org/WebPage&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">head</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;X-UA-Compatible&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;IE=edge&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;viewport&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;width=device-width,initial-scale=1&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;x-dns-prefetch-control&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;on&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dns-prefetch&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://ajax.cloudflare.com&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dns-prefetch&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">title</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">無題ドキュメント</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/title&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">100</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border</span><span style="color:#f92672">-</span><span style="color:#a6e22e">radius</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">2</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">80</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin</span><span style="color:#f92672">-</span><span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> <span style="color:#a6e22e">span</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span><span style="color:#f92672">-</span><span style="color:#a6e22e">align</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">70</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">size</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">12</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">bold</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">fff</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> <span style="color:#a6e22e">i</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span><span style="color:#f92672">-</span><span style="color:#a6e22e">align</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">fff</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">size</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">14</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">position</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">tw</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">55</span><span style="color:#a6e22e">ACEE</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">fb</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">3</span><span style="color:#a6e22e">A5795</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hb</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">008</span><span style="color:#a6e22e">CE1</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">pk</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">ef4357</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">line</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">1</span><span style="color:#a6e22e">dcd00</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">total</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">000</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hb</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">tw</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">fb</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">pk</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">line</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">total</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">ccc</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">i</span>.<span style="color:#a6e22e">fa</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hatena</span><span style="color:#f92672">:</span><span style="color:#a6e22e">before</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">content</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;B!&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">family</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">Verdana</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">bold</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/head&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#a6e22e">ここにソーシャルボタンが表示される</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sns-counter&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;load&#34;</span>,<span style="color:#66d9ef">function</span>(){ <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">css</span><span style="color:#f92672">=</span>[ <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34;</span> ];<span style="color:#66d9ef">for</span>(<span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">css</span>){ <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">html</span><span style="color:#f92672">=</span>document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;link&#34;</span>);<span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span>;<span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#a6e22e">css</span>[<span style="color:#a6e22e">i</span>];<span style="color:#66d9ef">async</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span>;document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">html</span>);}});<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#a6e22e">ここが非同期でPHPを呼び出す部分</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//ポケットのストック数を取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fetch_sns_count</span>(<span style="color:#a6e22e">url</span>, <span style="color:#a6e22e">selector</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">defer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">jQuery</span>.<span style="color:#a6e22e">Deferred</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>.<span style="color:#a6e22e">ajax</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;get_sns_button.php?targeturl=&lt;?php echo urlencode(&#34;https://&#34;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]); ?&gt;&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dataType</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;text&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">timeout</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10000</span>, <span style="color:#75715e">//10sec </span></span></span><span style="display:flex;"><span> }).<span style="color:#a6e22e">done</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">res</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>( <span style="color:#a6e22e">selector</span> ).<span style="color:#a6e22e">html</span>( <span style="color:#a6e22e">res</span> <span style="color:#f92672">||</span> <span style="color:#ae81ff">0</span> ); </span></span><span style="display:flex;"><span> }).<span style="color:#a6e22e">fail</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>( <span style="color:#a6e22e">selector</span> ).<span style="color:#a6e22e">html</span>(<span style="color:#e6db74">&#39;error;&#39;</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">fetch_sns_count</span>(<span style="color:#e6db74">&#39;&lt;?php echo urlencode(&#34;https://&#34;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]);?&gt;&#39;</span>, <span style="color:#e6db74">&#39;#sns-counter&#39;</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#a6e22e">ここが非同期でPHPを呼び出す部分</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span> </span></span></code></pre></div><h3 id="ん遅くなった">ん？遅くなった？ </h3><p>なぜか遅くなりました。まだ組み込みたいWEBページに埋め込んでいない状態（ショーシャルボタンしかないページ）ですが平均2.2秒。<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>のWaterfallを見ると、確かに非同期で動作は確認できました。</p> <p><img alt="GTmetrix" class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="518" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-00.jpg" width="700"></p> <p>ちょっと実際のWEBページに組み込んでいろいろなパターンをベンチマークしてみないとわからなくなってきました。</p> <h3 id="そこで仮のページに埋め込んでベンチマーク">そこで仮のページに埋め込んでベンチマーク </h3><p><img class="gallery-image" data-flex-basis="393px" data-flex-grow="163" height="427" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-16.jpg" width="700"></p> <p>以下の３パターンであるページにソーシャルボタンを仮のダミーページ内に読み込んだ時のスピードを<a class="link" href="https://gtmetrix.com" target="_blank" rel="noopener" >GTmetrix</a>でベンチマークしてみました。</p> <pre><code>   今回のAjaxから非同期でPHPを呼び出した場合 共有ボタン配信サービスの[AddThis](https://www.addthis.com/jp/)を使った場合 普通に同期でPHPを実行させた場合 １回目 ３．９秒 ４．９秒 ５．７秒 ２回目 ３．６秒 ３．７秒 ４．３秒 ３回目 ３．５秒 ４．３秒 ４．５秒 ４回目 ３．３秒 ６．１秒 ４．２秒 ５回目 ４．０秒 ４．４秒 ４．５秒 平均 ３．６６秒 ４．６８秒 ４．６４秒 </code></pre> <h3 id="やっぱり速かった">やっぱり速かった！ </h3><p>AjaxからPHPを呼び出す場合、非同期なので他の読み込みをしている間に並行してPHPの実行結果を読み込んでいるので全体的にページの表示スピードが速くなりました。しかも何度ベンチマークしても誤差の範囲が狭く表示時間が安定しています。ばらつきがあるのは多分Adsenseやその他のJavascriptやCDNの読込が原因っぽいです。</p> <p><a class="link" href="https://www.addthis.com/jp/" target="_blank" rel="noopener" >AddThis</a>も速いときは速いのですが、遅いときはめっちゃ遅いです。管理が楽なので各SNSのAPIが変更になっても修正に困ることがなさそうなので、メンテナンスのことを考えると多少遅い時があってもアリかなと思いました。GTmetrixのWaterfallのグラフをみるといろんなバックグラウンドでJavascripｔが降ってきているので、そこが不安定な原因かもしれません。</p> <p>普通に同期でPHPを動かした場合は当然PHPの動作分遅いですね。しかも安定してばらつき無く遅いです。</p> <p>ということで、予想通りAjaxから非同期でPHPを読み込む方が速いという結論になりました。</p> <p>もっと速くしようと思ったら、CRONジョブで定期的にカウント数を取得しデータベース化して、キャッシュしておくのがいいかもしれませんが、ちょっと大変そうです。そういうプラグインがWordpressにはあるみたいですが、それはまたいつか試してみようと思います。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://nelog.jp/fetch-pocket-count-by-ajax" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://nelog.jp/fetch-pocket-count-by-ajax" alt="https://nelog.jp/fetch-pocket-count-by-ajax" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://nelog.jp/fetch-pocket-count-by-ajax</span> <span class="link-card-url">https://nelog.jp/fetch-pocket-count-by-ajax</span> </div> </a> </div> <div class="link-card"> <a href="https://php-archive.net/php/ajax-json/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://php-archive.net/php/ajax-json/" alt="https://php-archive.net/php/ajax-json/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://php-archive.net/php/ajax-json/</span> <span class="link-card-url">https://php-archive.net/php/ajax-json/</span> </div> </a> </div> <div class="link-card"> <a href="http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" alt="http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/</span> <span class="link-card-url">http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.addthis.com/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.addthis.com/" alt="https://www.addthis.com/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.addthis.com/</span> <span class="link-card-url">https://www.addthis.com/</span> </div> </a> </div> https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/ Thu, 10 May 2018 22:10:26 +0900 https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/ <p>まさか <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> が原因だったとは…。WEBページのJSが急に動かなくなって困ったのですが解決できたのでメモ。</p> <h3 id="javascriptが動かなくなる不具合は突然に">Javascriptが動かなくなる不具合は突然に </h3><p>このブログを書く昨日まで普通に表示されていたページが今日になって突然おかしなことになりました。</p> <p>おかしいというのは IE で表示したページは自体はレイアウトを保った状態で表示はされるのですが、 Javascript を使って表示される部分だけが表示されないんです。</p> <h4 id="表示されなくなったもの">表示されなくなったもの </h4><ul> <li>Facebook、Twitter、はてな、Pocket、LINEなどのSNSボタン</li> <li>Google AdSenseのバナー</li> <li>jQuery.jsを使ったアコーディオン</li> <li>Echo.js（画像を遅延表示させるLazyRoadみたいなやつ）</li> <li>LightBox.js</li> <li>SyntaxHighlighter（PREタグのソースを装飾するやつ）</li> </ul> <p>などが全部動かなくなりました。</p> <h3 id="ieでは動いていないけどchromeでは一部動いている">IEでは動いていないけどChromeでは一部動いている </h3><p>Internet Explorer 11 では全ての Javascript が動いていないのに対して、Chrome では AdSenseの広告だけは表示されました。</p> <h3 id="ソースを見ると異常あり">ソースを見ると異常あり </h3><p>おかしいな～なんで急に動かなくなるかな～とブラウザでページのソースを見ると以下のように</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#960050;background-color:#1e0010">～</span> </span></span></code></pre></div><p>でないといけないところが、 **タグ全部 **が</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;15304f88fc0274cd53c9f980-text/javascript&#34;</span><span style="color:#960050;background-color:#1e0010">～</span> </span></span></code></pre></div><p>になっていました。</p> <p><a class="link" href="https://qwerty.work/blog/2018/05/10/No-03.jpg" ><img class="gallery-image" data-flex-basis="808px" data-flex-grow="337" height="178" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/images/No-03s.jpg" width="600"></a></p> <p><strong>15304f88fc0274cd53c9f980-</strong> の部分はページを表示する度にランダムで値が変化しました。</p> <h3 id="ftpにあるファイルは正常怪しいファイルもなし">FTPにあるファイルは正常、怪しいファイルもなし </h3><p>**どうなってんだこりゃ～改ざんか！？**とサーバにあるHTMLファイルを開いてみると、ソースは **タグ を書き換えるような PHP や JS がサーバーにあるんじゃないか？と、見慣れないファイルがないか探しましたが怪しいファイルはパッと見で見当たりませんでした。</p> <h3 id="cloudflareのrocket-loaderが怪しい">CloudFlareのRocket Loaderが怪しい </h3><p>サーバーに置いてあるファイルは正常で、ブラウザで表示する際にソースが書き換わっているというこで、怪しいファイルがなくて、他にサーバーとブラウザ間でソースの置換ができるものとしたら <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> しかないけど**まさかね～**なんて考えながらも <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> を疑ってみました。</p> <p>現時点では、ページの表示スピードを高速化させるために無料で使えるCDNサービスの <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare </a>を使用しています。 <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> ではページ内の Javascript を高速化させるための <strong>「ロケットローダー」</strong> という機能があります。この機能を <strong>ON（Automatic）</strong> にすると自動的に <strong>タグ の直前</strong>に以下のように <strong>rocket-loader.js</strong> を呼び出すソースが組み込まれます。</p> <p><a class="link" href="https://qwerty.work/blog/2018/05/10/No-05.jpg" ><img class="gallery-image" data-flex-basis="3789px" data-flex-grow="1578" height="38" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/images/No-05s.jpg" width="600"></a></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://ajax.cloudflare.com/cdn-cgi/scripts/dba9ecf7/cloudflare-static/rocket-loader.min.js&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">cf</span><span style="color:#f92672">-</span><span style="color:#a6e22e">once</span><span style="color:#f92672">=!</span><span style="color:#ae81ff">1</span><span style="color:#a6e22e">bf743e9df871d84cecbddbe</span><span style="color:#f92672">-</span><span style="color:#e6db74">&#34; defer=&#34;</span><span style="color:#960050;background-color:#1e0010">&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>ここがなんだか怪しいぞ、といことで <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare </a>の管理画面から <strong>Rocket Loader</strong> を <strong>OFF</strong> にしてみました。<strong>[Speed]</strong> ページの中間に** [Rocket Loader BETA] **という部分にあります。設定変更したら即座に反映されます。</p> <p><a class="link" href="https://qwerty.work/blog/2018/05/10/No-06.jpg" ><img class="gallery-image" data-flex-basis="402px" data-flex-grow="167" height="358" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/images/No-06s.jpg" width="600"></a></p> <p><a class="link" href="https://qwerty.work/blog/2018/05/10/No-07.jpg" ><img class="gallery-image" data-flex-basis="332px" data-flex-grow="138" height="433" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2018/05/cloudflare-rocket-loader-javascript/images/No-07s.jpg" width="600"></a></p> <h3 id="ページが正常に表示された">ページが正常に表示された！ </h3><p>やっぱり原因は <a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> のRocket Loaderでした。<strong>OFF</strong> にした直後にページの表示を更新したら正常になりました。なんかCDNのサービスを無料で提供しているし、 Rocket Loader は BETA版 だからってテストもせずにリリースするものなんですかね？以下のページのように、過去にも同じようなことがあったようです。<a class="link" href="https://www.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare</a> には気を付けないといけないですね。やれやれ&hellip;。</p> <div class="link-card"> <a href="http://news.7zz.jp/php/4232.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://news.7zz.jp/php/4232.html" alt="http://news.7zz.jp/php/4232.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://news.7zz.jp/php/4232.html</span> <span class="link-card-url">http://news.7zz.jp/php/4232.html</span> </div> </a> </div> https://qwerty.work/post/2018/03/sns-button-compact-javascript/ Mon, 12 Mar 2018 21:03:38 +0900 https://qwerty.work/post/2018/03/sns-button-compact-javascript/ <p>Facebool、Twitter、Google+、はてなブックマーク、Pocket、LINEなどのSNSボタンをページに設置する際、SNSそれぞれのJavascriptコードが必要ですが、複数あるのでページのソースがごちゃごちゃになります。</p> <p>それを簡潔なjavascriptコードでコンパクトにする方法を見つけたのでメモ。</p> <p>コードをまとめることによって重複コードがなくなり、ソースの文字数が減るのでページ表示の高速化になるかと思います。</p> <h3 id="まとめた場合のコード">まとめた場合のコード </h3><p>コードはページのどこに書いてもいいのですが、<strong>の直前</strong>に書くほうがページ表示の高速化につながります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> (<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">w</span>,<span style="color:#a6e22e">d</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">w</span>.<span style="color:#a6e22e">___gcfg</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">lang</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;ja&#34;</span>}; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">s</span>,<span style="color:#a6e22e">e</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#34;script&#34;</span>)[<span style="color:#ae81ff">0</span>], </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span><span style="color:#f92672">=</span><span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">u</span>,<span style="color:#a6e22e">f</span>){<span style="color:#66d9ef">if</span>(<span style="color:#f92672">!</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">f</span>)){<span style="color:#a6e22e">s</span><span style="color:#f92672">=</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;script&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#a6e22e">u</span>;<span style="color:#a6e22e">s</span>.<span style="color:#66d9ef">async</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span>;<span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">f</span>){<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#a6e22e">f</span>;}<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">insertBefore</span>(<span style="color:#a6e22e">s</span>,<span style="color:#a6e22e">e</span>);}}; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//connect.facebook.net/ja_JP/all.js#xfbml=1&#34;</span>,<span style="color:#e6db74">&#34;facebook-jssdk&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//platform.twitter.com/widgets.js&#34;</span>,<span style="color:#e6db74">&#34;twitter-wjs&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;https://apis.google.com/js/plusone.js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//b.st-hatena.com/js/bookmark_button.js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/j/btn.js?v=1&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//media.line.me/js/line-button.js?v=20140411&#34;</span>); </span></span><span style="display:flex;"><span> })(<span style="color:#66d9ef">this</span>, document); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="googleanalyticsも含める場合">GoogleAnalyticsも含める場合 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> (<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">w</span>, <span style="color:#a6e22e">d</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">w</span>.<span style="color:#a6e22e">_gaq</span> <span style="color:#f92672">=</span> [[<span style="color:#e6db74">&#34;_setAccount&#34;</span>, <span style="color:#e6db74">&#34;UA-xxxxxxx-x&#34;</span>],[<span style="color:#e6db74">&#34;_trackPageview&#34;</span>]]; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">w</span>.<span style="color:#a6e22e">___gcfg</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">lang</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ja&#34;</span>}; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">s</span>, <span style="color:#a6e22e">e</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#34;script&#34;</span>)[<span style="color:#ae81ff">0</span>], </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">u</span>, <span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">i</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">s</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;script&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">u</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">s</span>.<span style="color:#66d9ef">async</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">i</span>) {<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">id</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">i</span>;} </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">insertBefore</span>(<span style="color:#a6e22e">s</span>, <span style="color:#a6e22e">e</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }; </span></span><span style="display:flex;"><span> <span style="color:#75715e">//GoogleAnalytics </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>((<span style="color:#e6db74">&#34;https:&#34;</span><span style="color:#f92672">==</span><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">protocol</span><span style="color:#f92672">?</span><span style="color:#e6db74">&#34;//ssl&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;//www&#34;</span>)<span style="color:#f92672">+</span><span style="color:#e6db74">&#34;.google-analytics.com/ga.js&#34;</span>,<span style="color:#e6db74">&#34;ga&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Facebook </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//connect.facebook.net/ja_JP/all.js#xfbml=1&#34;</span>,<span style="color:#e6db74">&#34;facebook-jssdk&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Twitter </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//platform.twitter.com/widgets.js&#34;</span>,<span style="color:#e6db74">&#34;twitter-wjs&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//GooglePlus </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;https://apis.google.com/js/platform.js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Hatena </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//b.st-hatena.com/js/bookmark_button_wo_al.js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Pocket </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/j/btn.js&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//LINE </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>(<span style="color:#e6db74">&#34;//media.line.me/js/line-button.js?v=20140411&#34;</span>);})(<span style="color:#66d9ef">this</span>,document);<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="snsボタンの表示部分">SNSボタンの表示部分 </h3><p>ソーシャルボタンを表示したい部分に書きます。<strong><strong>だけは</strong></strong>直下が望ましいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;fb-root&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;ul&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;li&gt;&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;fb-like&#34;</span> <span style="color:#a6e22e">expr:data-href=</span><span style="color:#e6db74">&#34;data:blog.url&#34;</span> <span style="color:#a6e22e">data-layout=</span><span style="color:#e6db74">&#34;box_count&#34;</span> <span style="color:#a6e22e">data-action=</span><span style="color:#e6db74">&#34;like&#34;</span> <span style="color:#a6e22e">data-show-faces=</span><span style="color:#e6db74">&#34;false&#34;</span> <span style="color:#a6e22e">data-share=</span><span style="color:#e6db74">&#34;false&#34;</span><span style="color:#f92672">/&gt;&lt;/div&gt;&lt;/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;li&gt;&lt;a</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://twitter.com/share&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;twitter-share-button&#34;</span> <span style="color:#a6e22e">data-lang=</span><span style="color:#e6db74">&#34;ja&#34;</span> <span style="color:#a6e22e">data-count=</span><span style="color:#e6db74">&#39;vertical&#39;</span><span style="color:#f92672">&gt;</span>Tweet<span style="color:#f92672">&lt;/a&gt;&lt;/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;li&gt;&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;g-plusone&#34;</span> <span style="color:#a6e22e">data-size=</span><span style="color:#e6db74">&#34;tall&#34;</span> <span style="color:#a6e22e">data-href=</span><span style="color:#e6db74">&#34;ページのURL&#34;</span> <span style="color:#f92672">&gt;&lt;/div&gt;&lt;/li&gt;</span> <span style="color:#f92672">&lt;li&gt;&lt;a</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;http://b.hatena.ne.jp/entry/&lt;?php the_permalink(); ?&gt;&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;hatena-bookmark-button&#34;</span> <span style="color:#a6e22e">data-hatena-bookmark-title=</span><span style="color:#e6db74">&#34;ページのタイトル&#34;</span> <span style="color:#a6e22e">data-hatena-bookmark-layout=</span><span style="color:#e6db74">&#34;vertical-balloon&#34;</span> <span style="color:#a6e22e">title=</span><span style="color:#e6db74">&#34;このエントリーをはてなブックマークに追加&#34;</span><span style="color:#f92672">&gt;&lt;img</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;http://b.st-hatena.com/images/entry-button/button-only.gif&#34;</span> <span style="color:#a6e22e">alt=</span><span style="color:#e6db74">&#34;このエントリーをはてなブックマークに追加&#34;</span> <span style="color:#a6e22e">width=</span><span style="color:#e6db74">&#34;20&#34;</span> <span style="color:#a6e22e">height=</span><span style="color:#e6db74">&#34;20&#34;</span> <span style="color:#a6e22e">style=</span><span style="color:#e6db74">&#34;border: none;&#34;</span> <span style="color:#f92672">/&gt;&lt;/a&gt;&lt;/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;li&gt;&lt;a</span> <span style="color:#a6e22e">data-pocket-label=</span><span style="color:#e6db74">&#34;pocket&#34;</span> <span style="color:#a6e22e">data-pocket-count=</span><span style="color:#e6db74">&#34;vertical&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;pocket-btn&#34;</span> <span style="color:#a6e22e">data-lang=</span><span style="color:#e6db74">&#34;en&#34;</span> <span style="color:#a6e22e">data-save-url=</span><span style="color:#e6db74">&#34;ページのURL&#34;</span><span style="color:#f92672">&gt;&lt;/a&gt;&lt;/li&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;li&gt;&lt;span&gt;&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;line-it-button&#34;</span> <span style="color:#a6e22e">style=</span><span style="color:#e6db74">&#34;display: none;&#34;</span> <span style="color:#a6e22e">data-type=</span><span style="color:#e6db74">&#34;share-a&#34;</span> <span style="color:#a6e22e">data-lang=</span><span style="color:#e6db74">&#34;ja&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js&#34;</span> <span style="color:#a6e22e">async=</span><span style="color:#e6db74">&#34;async&#34;</span> <span style="color:#a6e22e">defer=</span><span style="color:#e6db74">&#34;defer&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;/span&gt;&lt;/li&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/ul&gt;</span> </span></span></code></pre></div><h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://log-file.net/wordpress/speedup-1190" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://log-file.net/wordpress/speedup-1190" alt="https://log-file.net/wordpress/speedup-1190" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://log-file.net/wordpress/speedup-1190</span> <span class="link-card-url">https://log-file.net/wordpress/speedup-1190</span> </div> </a> </div> <div class="link-card"> <a href="http://requlog.com/self-branding/wordpress/facebook-fast-display/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://requlog.com/self-branding/wordpress/facebook-fast-display/" alt="http://requlog.com/self-branding/wordpress/facebook-fast-display/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://requlog.com/self-branding/wordpress/facebook-fast-display/</span> <span class="link-card-url">http://requlog.com/self-branding/wordpress/facebook-fast-display/</span> </div> </a> </div> <div class="link-card"> <a href="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/" alt="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/</span> <span class="link-card-url">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/</span> </div> </a> </div> https://qwerty.work/post/2017/02/particlesjs-particleground/ Sun, 26 Feb 2017 00:41:09 +0900 https://qwerty.work/post/2017/02/particlesjs-particleground/ <p>ドメインの所有者を調べるWhoisサイトの<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>を見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。</p> <p><img class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="444" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/02/particlesjs-particleground/images/No-00.jpg" width="600"></p> <p>「<a class="link" href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener" >particles.js</a>」というやつらしいです。</p> <p>jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>のソースを見ていると以下のソースが気になりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;canvas</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;spiders&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;hidden-xs&#34;</span><span style="color:#f92672">&gt;&lt;/canvas&gt;</span> </span></span></code></pre></div><p>そこで<strong>spiders</strong>を検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。</p> <div class="link-card"> <a href="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" alt="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> <span class="link-card-url">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> </div> </a> </div> <p>ここで<strong>particles.js</strong>ということがわかりました。</p> <h3 id="particlesjs">particles.js </h3> <div class="link-card"> <a href="http://vincentgarreau.com/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://vincentgarreau.com/particles.js/" alt="http://vincentgarreau.com/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://vincentgarreau.com/particles.js/</span> <span class="link-card-url">http://vincentgarreau.com/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/VincentGarreau/particles.js/" alt="https://github.com/VincentGarreau/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/VincentGarreau/particles.js/</span> <span class="link-card-url">https://github.com/VincentGarreau/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://codepen.io/VincentGarreau/pen/pnlso" alt="http://codepen.io/VincentGarreau/pen/pnlso" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://codepen.io/VincentGarreau/pen/pnlso</span> <span class="link-card-url">http://codepen.io/VincentGarreau/pen/pnlso</span> </div> </a> </div> <p><a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>は少し違う動きをしていますが、多分カスタマイズしているんだと思います。</p> <h4 id="カスタマイズの参考">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://liginc.co.jp/191958" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://liginc.co.jp/191958" alt="https://liginc.co.jp/191958" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://liginc.co.jp/191958</span> <span class="link-card-url">https://liginc.co.jp/191958</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" alt="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> <span class="link-card-url">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> </div> </a> </div> <h3 id="particleground">Particleground </h3><p><strong>particles.js</strong>と同じような<strong>Particleground</strong>というのも見つけました。</p> <div class="link-card"> <a href="http://jnicol.github.io/particleground/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jnicol.github.io/particleground/" alt="http://jnicol.github.io/particleground/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jnicol.github.io/particleground/</span> <span class="link-card-url">http://jnicol.github.io/particleground/</span> </div> </a> </div> <h4 id="カスタマイズの参考-1">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://blog.mismithportfolio.com/web/20150129particleground" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.mismithportfolio.com/web/20150129particleground" alt="https://blog.mismithportfolio.com/web/20150129particleground" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.mismithportfolio.com/web/20150129particleground</span> <span class="link-card-url">https://blog.mismithportfolio.com/web/20150129particleground</span> </div> </a> </div> <h3 id="他にも気になるスクリプトのまとめ">他にも気になるスクリプトのまとめ </h3> <div class="link-card"> <a href="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" alt="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> <span class="link-card-url">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> </div> </a> </div> <div class="link-card"> <a href="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qiita.com/syui/items/f0baae5cdb4bfd193e35" alt="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> <span class="link-card-url">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> </div> </a> </div> <div class="link-card"> <a href="https://ics.media/entry/11172/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/11172/" alt="https://ics.media/entry/11172/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/11172/</span> <span class="link-card-url">https://ics.media/entry/11172/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.webcreatorbox.com/tech/javascript-particles" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/tech/javascript-particles" alt="https://www.webcreatorbox.com/tech/javascript-particles" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/tech/javascript-particles</span> <span class="link-card-url">https://www.webcreatorbox.com/tech/javascript-particles</span> </div> </a> </div> <h4 id="水面に波紋が広がるようなもの">水面に波紋が広がるようなもの </h4><p><a class="link" href="https://jquery.com/" target="_blank" rel="noopener" >jQuery</a>のファイルと<a class="link" href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener" >jQuery Ripples</a>のファイルを読み込めばOK。</p> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div> https://qwerty.work/post/2015/06/youtubeechojslazyloading/ Sun, 07 Jun 2015 23:17:57 +0900 https://qwerty.work/post/2015/06/youtubeechojslazyloading/ <h3 id="動画を埋め込むとページの表示が重たいので遅延表示したい">動画を埋め込むとページの表示が重たいので遅延表示したい </h3><p>画像を多量に使用してもページを表示するスピードを下げないために以前から「<a class="link" href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener" >Echo.js</a>」を使用しています。画像の遅延読み込みをするスクリプトで有名なのは「<a class="link" href="http://www.appelsiini.net/projects/lazyload" target="_blank" rel="noopener" >Lazy Load Plugin for jQuery</a>」ですが、「<a class="link" href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener" >Echo.js</a>」は <strong>jQueryに依存せず4KBと非常に軽量</strong>ということもあり気に入ってます。</p> <p>この「<a class="link" href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener" >Echo.js</a>」ですが、<strong>動画も遅延対象</strong>にできるようです。</p> <p>大量のYuoTubeの動画をまとめたブログがあるのですが、ページを表示する時間がかかり、ちょっとのアクセス量でダウン気味になるといったことがありました。これを機に**YouTubeの埋め込みコードの``**を「<a class="link" href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener" >Echo.js</a>」で遅延読み込みさせるようにしました。</p> <h4 id="動画を遅延表示している参考ページ">動画を遅延表示している参考ページ </h4><p>以下のページに複数のYou-Tube動画を埋め込んで遅延表示させています。</p> <ul> <li><a class="link" href="http://qwerty.work/blog/2015/06/cm.php" target="_blank" rel="noopener" >感動して涙が止まらないタイの泣けるCMまとめ</a></li> </ul> <h3 id="ダウンロードページ">ダウンロードページ </h3><p>以下の作者のページから<code>Echo.js</code>をダウンロードできます。</p> <div class="link-card"> <a href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" alt="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/</span> <span class="link-card-url">http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/toddmotto/echo" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/toddmotto/echo" alt="https://github.com/toddmotto/echo" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/toddmotto/echo</span> <span class="link-card-url">https://github.com/toddmotto/echo</span> </div> </a> </div> <p>使用するのは、<code>src</code>の中の<code>echo.js</code>か、<code>dist</code>の中の<code>echo.js</code>か<code>echo.min.js</code>でいずれかを適当なディレクトリに保存します。</p> <h3 id="echojsでyou-tubeのiframeを遅延表示させるための準備">Echo.jsでYou-Tubeのiframeを遅延表示させるための準備 </h3><p>デフォルトのままの<strong>echo.js</strong>は画像の<code>タグしか遅延表示に対応していないので、You-Tubeの埋め込みコードに使用されている</code>も対象に加えるためには<strong>echo.jsに手を加えたないといけません。</strong></p> <p><strong>echo.js</strong>を開いて<strong>75行目あたり</strong>に以下のコードがあります。（ちなみにこの記事を書いた時点はv1.7.0なので現在は内容が異なっているかもしれません。）</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelectorAll</span>(<span style="color:#e6db74">&#39;img[data-echo], [data-echo-background]&#39;</span>); </span></span></code></pre></div><p>これに<code>,iframe[data-echo]</code>を追加して以下のように修正し上書き保存します。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelectorAll</span>(<span style="color:#e6db74">&#39;img[data-echo], [data-echo-background], iframe[data-echo]&#39;</span>); </span></span></code></pre></div><h3 id="遅延させたいソースをdata-echoで指定する">遅延させたいソースを『data-echo』で指定する </h3><p>画像``を遅延させる場合の</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;loading.gif&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">echo</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mainImage.jpg&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p>とするように、iframeのコード内の<code>src=&quot;***&quot;</code>を<code>data-echo=&quot;***&quot;</code>にするだけで遅延の対象となります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">iframe</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;420&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;315&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.youtube.com/embed/_itBsIn_R00&#34;</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/iframe&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//srcをdata-echoに変更するだけ </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">iframe</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;420&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;315&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">echo</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.youtube.com/embed/_itBsIn_R00&#34;</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/iframe&gt;</span> </span></span></code></pre></div><p>読み込みを開始するまでにダミーの画像を表示させたい場合は<code>src=&quot;***&quot;</code>でダミー画像を指定します。ここを省略してダミー画像を表示させないこともできます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">iframe</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;420&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;315&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;loading.gif&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-</span><span style="color:#a6e22e">echo</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.youtube.com/embed/_itBsIn_R00&#34;</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/iframe&gt;</span> </span></span></code></pre></div><h3 id="基本的なコードの使い方">基本的なコードの使い方 </h3><p>当然ですが、遅延読み込みするためには<a class="link" href="http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/" target="_blank" rel="noopener" >Echo.js</a>を読み込んでおく必要があります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;echo.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">echo</span>.<span style="color:#a6e22e">init</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="細かいオプション設定">細かいオプション設定 </h3><p>遅延時間の指定や、読み込みを開始するかを指定する場合は以下のようになります。</p> <p>ここではブラウザの表示部分に対象の画像や動画が<code>50px</code>以上表示されたら<code>250ms</code>遅延させてから表示する設定を例にしています。<code>offset</code>と<code>throttle</code>がその部分です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;echo.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">echo</span>.<span style="color:#a6e22e">init</span>({<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">offset</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;50&#39;</span>,<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">throttle</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;250&#39;</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> });<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p><code>offset</code>は遅延する画像の領域に上から<code>50px</code>までスクロールしたら表示開始するという<strong>表示開始位置設定</strong>。<code>0</code>を指定した場合は、表示領域内に入ったらすぐに表示。この設定を省略した場合もデフォルト値の<code>0</code>となります。</p> <h4 id="その他のオプション例">その他のオプション例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">echo</span>.<span style="color:#a6e22e">init</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offset</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//オフセット値(画像にどれくらい近付いたら読み込むか) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetVertical</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//上下方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetHorizontal</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//左右方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetTop</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//上方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetBottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//下方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetLeft</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//左方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offsetRight</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#75715e">//右方向のオフセット値 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">throttle</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">250</span>, <span style="color:#75715e">//処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">debounce</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>, <span style="color:#75715e">//throttleを有効にするかどうか </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">unload</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>, <span style="color:#75715e">//画像が表示範囲から外れた時に読み込み前に戻すかどうか </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">element</span>, <span style="color:#a6e22e">op</span>) { <span style="color:#75715e">//コールバック </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">element</span>, <span style="color:#e6db74">&#39;has been&#39;</span>, <span style="color:#a6e22e">op</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;ed&#39;</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span>;<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>詳しくは以下の製作者のページを参照してください。ちなみに英文です。</p> <div class="link-card"> <a href="https://github.com/toddmotto/echo/blob/master/README.md" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/toddmotto/echo/blob/master/README.md" alt="https://github.com/toddmotto/echo/blob/master/README.md" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/toddmotto/echo/blob/master/README.md</span> <span class="link-card-url">https://github.com/toddmotto/echo/blob/master/README.md</span> </div> </a> </div> <h2 id="chromium系ならloadinglazy追加するだけ">Chromium系ならloading=&ldquo;lazy&quot;追加するだけ </h2><p>最近のChromium系のブラウザならJavascriptを使うことなく、``に<code>loading=&quot;lazy&quot;</code>を追加するだけ遅延表示ができるらいです。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2020/05/chromium-lazyload.php" target="_blank" rel="noopener" >Chromium系のブラウザなら画像・Youtube動画の遅延読み込みができるらしい</a></li> </ul> https://qwerty.work/post/2014/06/jquery-show-button/ Mon, 23 Jun 2014 22:49:21 +0900 https://qwerty.work/post/2014/06/jquery-show-button/ <p>友人に教えてもらったスパム対策の方法。お問い合わせフォームのチェックボックスにチェックを入れないと送信ボタンを表示しないスクリプトのメモ。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#e6db74">/script&gt; &lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#btn&#39;</span>).<span style="color:#a6e22e">hide</span>();<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#switch&#34;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#btn&#34;</span>).<span style="color:#a6e22e">slideToggle</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">checked</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;form&#34;</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#34;action&#34;</span>,<span style="color:#e6db74">&#34;/apps/mailform/send.cgi&#34;</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> });<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>});<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#e6db74">/script&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;post&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;switch&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;checkbox&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ボタン表示(必須)&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;表示&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ボタンを表示</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;submit&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;送信&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span> </span></span></code></pre></div><p> </p> <p>↓実際にチェック入れたら送信ボタンが右に表示されます。</p> <p>$(function(){ $(&rsquo;#btn&rsquo;).hide(); $(&quot;#switch&quot;).click(function(){ $(&quot;#btn&quot;).slideToggle(this.checked); $(&ldquo;form&rdquo;).attr(&ldquo;action&rdquo;,&ldquo;lib/send.cgi&rdquo;); }); });</p> <p>ボタンを表示</p> <p> </p> <p>チェックボックスにチェックが入っていないと<strong>action=&quot;#&quot;<strong>となっていて、チェックを入れると</strong>action属性</strong>が<strong>lib/send.cgi</strong>に変わるようになっています。自動でフォーム送信するようなボットを使ったスパムに対して有効かもしれません。</p> <h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="http://kachibito.net/snippets/if-checked-show-box" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/snippets/if-checked-show-box" alt="http://kachibito.net/snippets/if-checked-show-box" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/snippets/if-checked-show-box</span> <span class="link-card-url">http://kachibito.net/snippets/if-checked-show-box</span> </div> </a> </div> <div class="link-card"> <a href="http://www.inurokuon.com/nfd/archives/131023.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.inurokuon.com/nfd/archives/131023.html" alt="http://www.inurokuon.com/nfd/archives/131023.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.inurokuon.com/nfd/archives/131023.html</span> <span class="link-card-url">http://www.inurokuon.com/nfd/archives/131023.html</span> </div> </a> </div> https://qwerty.work/post/2014/06/jqueryslidetoggle/ Wed, 04 Jun 2014 15:54:52 +0900 https://qwerty.work/post/2014/06/jqueryslidetoggle/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span> <span style="color:#a6e22e">async</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt;&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span>&gt; </span></span><span style="display:flex;"><span> #accordion-Title { <span style="color:#66d9ef">cursor</span>:<span style="color:#66d9ef">pointer</span>; } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title&#34;</span>&gt;リストタイトル（サンプル）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span></code></pre></div><p>コードはこんな感じでjQueryを読み込み**slideToggle()**を指定するだけ、下のサンプルがちゃんと動けばタイトルをクリックするとリストが現れ、もう一度クリックすると閉じるはず&hellip;。</p> <pre><code>$(function(){ $('.accordion-List').hide(); // $('#accordion-Title').click(function(){ $('+.accordion-List',this).slideToggle(); }); }); #accordion-Title { cursor:pointer;} </code></pre> <h3 id="リストタイトルサンプル">リストタイトル（サンプル） </h3><pre><code> - リスト1 - リスト2 </code></pre> <p>隠れているはずのリストが始めから表示されていたり、クリックしても動作しない場合は失敗です&hellip;。</p> <p> </p> <h2 id="独立した複数のアコーディオンがある場合">独立した複数のアコーディオンがある場合 </h2><p><strong>accordion-List1</strong>,<strong>accordion-List2</strong>など、<strong>id</strong>や<strong>class</strong>を分けないと最初のアコーディオンしか動かないので注意が必要です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span> <span style="color:#a6e22e">async</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt;&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List1&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title1&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List1&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List2&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title2&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List2&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span>&gt; </span></span><span style="display:flex;"><span> #accordion-Title1<span style="color:#f92672">,</span>#accordion-Title2 { <span style="color:#66d9ef">cursor</span>:<span style="color:#66d9ef">pointer</span>; } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title1&#34;</span>&gt;リストタイトル（サンプル1）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List1&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1-1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1-2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title2&#34;</span>&gt;リストタイトル（サンプル2）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List2&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2-1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2-2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span></code></pre></div><p>以下がサンプル</p> <p>$(function(){ $(&rsquo;.accordion-List1&rsquo;).hide(); // $(&rsquo;#accordion-Title1&rsquo;).click(function(){ $(&rsquo;+.accordion-List1&rsquo;,this).slideToggle(); }); }); $(function(){ $(&rsquo;.accordion-List2&rsquo;).hide(); // $(&rsquo;#accordion-Title2&rsquo;).click(function(){ $(&rsquo;+.accordion-List2&rsquo;,this).slideToggle(); }); });</p> <p>#accordion-Title1,#accordion-Title2 { cursor:pointer; }</p> <h3 id="リストタイトルサンプル1">リストタイトル（サンプル1） </h3><pre><code> - リスト1-1 - リスト1-2 </code></pre> <h3 id="リストタイトルサンプル2">リストタイトル（サンプル2） </h3><pre><code> - リスト2-1 - リスト2-2 </code></pre> <p>この方法以外にもたくさんやり方はあるみたいなので、グーグルで「<a class="link" href="https://www.google.co.jp/search?%7bgoogle:acceptedSuggestion%7doq=jQuery&#43;slideToggle&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=jQuery&#43;slideToggle&amp;pws=0" target="_blank" rel="noopener" >jQuery slideToggle</a>」とか「<a class="link" href="https://www.google.co.jp/search?%7bgoogle:acceptedSuggestion%7doq=jQuery&#43;%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3&#43;slideToggle&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=jQuery&#43;%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3&#43;slideToggle&amp;pws=0" target="_blank" rel="noopener" >jQuery アコーディオン slideToggle</a>」と検索してみるといいかもしれません。</p> <h2 id="その他参考">その他参考 </h2> <div class="link-card"> <a href="http://jqueryui.com/accordion/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jqueryui.com/accordion/" alt="http://jqueryui.com/accordion/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jqueryui.com/accordion/</span> <span class="link-card-url">http://jqueryui.com/accordion/</span> </div> </a> </div> https://qwerty.work/post/2013/06/phpjavascripthtml/ Mon, 03 Jun 2013 12:53:45 +0900 https://qwerty.work/post/2013/06/phpjavascripthtml/ <p>ブログの新着記事のリストを表示したいけど、そのページではPHPが使えない。ってときに使えます。また外部のブログのRSSを読み込みたい時に使えます。</p> <p>まず、PHPで最新の投稿記事をブログのRSSから読み込み、動的な内容に合わせてJavascriptを書き出す。そしてHTMLページからJavascriptで呼出し表示します。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//読み込みたいXMLのパス </span></span></span><span style="display:flex;"><span>$rssurl <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;http://qwerty.work/blog/index.xml?&#34;</span><span style="color:#f92672">.</span><span style="color:#a6e22e">date</span>( <span style="color:#e6db74">&#34;YmdHis&#34;</span>, <span style="color:#a6e22e">time</span>() ); </span></span><span style="display:flex;"><span>$rssdata <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_file</span>($rssurl); </span></span><span style="display:flex;"><span><span style="color:#75715e">//表示件数 </span></span></span><span style="display:flex;"><span>$num_of_data <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span>; </span></span><span style="display:flex;"><span>$outdata <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#39;&lt;ul&gt;&#39;</span><span style="color:#ae81ff">\n</span><span style="color:#e6db74">&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> ($i<span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; $i<span style="color:#f92672">&lt;</span>$num_of_data; $i<span style="color:#f92672">++</span>){ </span></span><span style="display:flex;"><span> $pubDate <span style="color:#f92672">=</span> $rssdata<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[$i]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">pubDate</span>; </span></span><span style="display:flex;"><span> $pubDate <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>(<span style="color:#e6db74">&#39;Y-m-d&#39;</span>,<span style="color:#a6e22e">strtotime</span>($pubDate)); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;+&#39;&lt;li&gt;&#39;</span><span style="color:#ae81ff">\n</span><span style="color:#e6db74">&#34;</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;+&#39;&lt;small&gt;&#34;</span><span style="color:#f92672">.</span> $pubDate <span style="color:#f92672">.</span> <span style="color:#e6db74">&#34;&lt;/small&gt;&amp;nbsp;&#34;</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;&lt;a href=</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">&#34;</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> $rssdata<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[$i]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">link</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">&gt;&#34;</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> $rssdata<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[$i]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">title</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;&lt;/a&gt;&#39;</span><span style="color:#ae81ff">\n</span><span style="color:#e6db74">&#34;</span>; </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;+&#39;&lt;/li&gt;&#39;</span><span style="color:#ae81ff">\n</span><span style="color:#e6db74">&#34;</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> $outdata <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#34;+&#39;&lt;/ul&gt;&#39;&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//↓これがないと書き出したスクリプトをJavascriptとして認識してもらえない </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">header</span>(<span style="color:#e6db74">&#34;Content-type: application/x-javascript&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#66d9ef">echo</span> <span style="color:#e6db74">&#34;document.write(</span><span style="color:#e6db74">$outdata</span><span style="color:#e6db74">)&#34;</span>; </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><p>上記を呼び出すと以下の内容のJavascriptが書き出されます。（<a class="link" href="https://qwerty.work/blog/2013/06/03/newBlogList.php" >サンプル</a>）</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//読み込みたいXMLのパス </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$rssurl</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;http://qwerty.work/blog/index.xml?&#34;</span>.<span style="color:#a6e22e">date</span>( <span style="color:#e6db74">&#34;YmdHis&#34;</span>, <span style="color:#a6e22e">time</span>() ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">$rssdata</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_file</span>(<span style="color:#a6e22e">$rssurl</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//表示件数 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$num_of_data</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">$outdata</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#39;&lt;ul&gt;&#39;\n&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#a6e22e">$i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">$i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">$num_of_data</span>; <span style="color:#a6e22e">$i</span><span style="color:#f92672">++</span>){ </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pubDate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$rssdata</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[<span style="color:#a6e22e">$i</span>]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">pubDate</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pubDate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>(<span style="color:#e6db74">&#39;Y-m-d&#39;</span>,<span style="color:#a6e22e">strtotime</span>(<span style="color:#a6e22e">$pubDate</span>)); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;+&#39;&lt;li&gt;&#39;\n&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;+&#39;&lt;small&gt;&#34;</span>. <span style="color:#a6e22e">$pubDate</span> . <span style="color:#e6db74">&#34;&lt;/small&gt; &#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&lt;a href=\&#34;&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#a6e22e">$rssdata</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[<span style="color:#a6e22e">$i</span>]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">link</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;\&#34;&gt;&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#a6e22e">$rssdata</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">channel</span><span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">item</span>[<span style="color:#a6e22e">$i</span>]<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">title</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&lt;/a&gt;&#39;\n&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;+&#39;&lt;/li&gt;&#39;\n&#34;</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$outdata</span> .<span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;+&#39;&lt;/ul&gt;&#39;&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">echo</span> <span style="color:#e6db74">&#34;document.write($outdata)&#34;</span>; </span></span><span style="display:flex;"><span><span style="color:#f92672">?&gt;</span> </span></span></code></pre></div><p>これをHTMLから以下のように読みこんで表示させます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;newBlogList.php&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><p>すると以下のように表示されます。</p> https://qwerty.work/post/2011/03/javascriptsprinklejs/ Sat, 19 Mar 2011 09:26:38 +0900 https://qwerty.work/post/2011/03/javascriptsprinklejs/ <p>どんなことに使えるか想像ができませんが、便利そうなのでメモ。</p> <p>ページ内に別ページのHTMLを表示する場合、iflame、object、SSIなどでを使いますが、<a class="link" href="http://www.sprinklejs.com/" target="_blank" rel="noopener" >sprinkle.js</a>を利用すればiflame、object、SSIを使うことなく別ページのHTMLを読み込みしができるようです。</p> <div class="link-card"> <a href="http://www.sprinklejs.com/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.sprinklejs.com/" alt="http://www.sprinklejs.com/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.sprinklejs.com/</span> <span class="link-card-url">http://www.sprinklejs.com/</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><ul> <li>sprinkle.jsをダウンロードし適当なディレクトリにアップロード</li> <li>使用するページでsprinkle.jsを読み込む</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://yourdomain/sprinkle.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><ul> <li>以下のように読み込みたいファイルを指定</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;読み込みたいファイル&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><p>おぉ、簡単。</p> <p>まだ実験していなけど&hellip;。</p> <p>UTF-8以外のHTMLを読み込むと文字化けするみたいです。</p> <p>サイト外のHTMLは読み込みができないみたいです。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="http://www.skuare.net/2007/11/htmlsprinklejs.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.skuare.net/2007/11/htmlsprinklejs.html" alt="http://www.skuare.net/2007/11/htmlsprinklejs.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.skuare.net/2007/11/htmlsprinklejs.html</span> <span class="link-card-url">http://www.skuare.net/2007/11/htmlsprinklejs.html</span> </div> </a> </div> https://qwerty.work/post/2011/03/lightbox2javascript/ Wed, 09 Mar 2011 11:40:32 +0900 https://qwerty.work/post/2011/03/lightbox2javascript/ <h3 id="ページ内で画像を拡大表示できるやつ">ページ内で画像を拡大表示できるやつ </h3><p>最近いろいろなサイトでみかける画像を ページの前面で表示するやつ。</p> <p>コレ↓（クリックしてみてください）</p> <p><a class="link" href="http://qwerty.work/blog/2011/03/09/takumi.jpg" target="_blank" rel="noopener" ><img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="160" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2011/03/lightbox2javascript/images/takumi-thumb-160x160-59.jpg" width="160"></a> <a class="link" href="http://qwerty.work/blog/2011/03/09/hikari.jpg" target="_blank" rel="noopener" ><img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="160" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2011/03/lightbox2javascript/images/hikari-thumb-160x160-61.jpg" width="160"></a></p> <h3 id="導入方法と手順">導入方法と手順 </h3><p><a class="link" href="http://www.lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener" >Lightbox2</a>というJavascript、導入が難しいのかなと思ったら以外に簡単。</p> <div class="link-card"> <a href="http://www.lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.lokeshdhakar.com/projects/lightbox2/" alt="http://www.lokeshdhakar.com/projects/lightbox2/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.lokeshdhakar.com/projects/lightbox2/</span> <span class="link-card-url">http://www.lokeshdhakar.com/projects/lightbox2/</span> </div> </a> </div> <ul> <li>まず<a class="link" href="http://www.lokeshdhakar.com/projects/lightbox2/#download" target="_blank" rel="noopener" >ダウンロード</a>して解凍</li> <li>解凍後ファイルを任意のディレクトリにアップロード</li> </ul> <p>（例：/js/lightbox/に解凍したjs,css,imageフォルダをアップロード）</p> <ul> <li>使用するページのヘッダーに以下のコード記述</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/js/lightbox/js/prototype.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/js/lightbox/js/scriptaculous.js?load=effects,builder&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/js/lightbox/js/lightbox.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/js/lightbox/css/lightbox.css&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;screen&#34;</span> /&gt; </span></span></code></pre></div><ul> <li>lightbox.js内のアイコン画像のパスを変更</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">fileLoadingImage</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/include/js/lightbox/images/loading.gif&#39;</span><span style="color:#f92672">,</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">fileBottomNavCloseImage</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/include/js/lightbox/images/closelabel.gif&#39;</span><span style="color:#f92672">,</span> </span></span></code></pre></div><ul> <li>light.css内のアイコン画像パスを変更</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">prevLink</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>, <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">prevLink</span><span style="color:#f92672">:</span><span style="color:#a6e22e">visited</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span> { <span style="color:#a6e22e">background</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">url</span>(<span style="color:#960050;background-color:#1e0010">/js/lightbox/images/prevlabel.gif) left 15% no-repeat; }</span> </span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">nextLink</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>, <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">nextLink</span><span style="color:#f92672">:</span><span style="color:#a6e22e">visited</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span> { <span style="color:#a6e22e">background</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">url</span>(<span style="color:#960050;background-color:#1e0010">/js/lightbox/images/nextlabel.gif) right 15% no-repeat; }</span> </span></span></code></pre></div><ul> <li>表示対象画像にリンクするタグ内にrel=&ldquo;lightbox&quot;追記</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;test.jpg&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lightbox&#34;</span>&gt;&lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;thumbnail.jpg&#34;</span> /&gt;&lt;/<span style="color:#f92672">a</span>&gt; </span></span></code></pre></div><p>たったこれだけでリッチなサイトに変身です。</p> <p>写真にグループ名を付けて、同じフォルダ内にある画像を次々めくったり、タイトルをつけたりすることもできます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;test.jpg&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lightbox&#34;</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;タイトル名&#34;</span>&gt;写真を見る&lt;/<span style="color:#f92672">a</span>&gt; </span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image1.jpg&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lightbox[グループ名]&#34;</span>&gt;写真1&lt;/<span style="color:#f92672">a</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image2.jpg&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lightbox[グループ名]&#34;</span>&gt;写真2&lt;/<span style="color:#f92672">a</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image3.jpg&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lightbox[グループ名]&#34;</span>&gt;写真3&lt;/<span style="color:#f92672">a</span>&gt; </span></span></code></pre></div><h3 id="movabletype用のプラグインがある">MovableType用のプラグインがある </h3><p>MovableTypeを使用している方はプラグイン「<a class="link" href="http://blog.webcreativepark.net/2008/05/19-235050.html" target="_blank" rel="noopener" >LightBox2MT</a>」を使用すると、画像挿入時はタグ内にrel=&ldquo;lightbox&quot;を自動的に入れてくれます。</p> <p>ただし、画像をアップロードする際に「画像をポップアップで開く」を選択しているとLightbox2が使えません。</p> <p>プラグインの配布は製作者の以下ブログ内からダウンロードできるので、ダウンロードしたら解凍し、/mt/plugins/内にアップロードするだけで使えます。</p> <div class="link-card"> <a href="http://blog.webcreativepark.net/2008/05/19-235050.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://blog.webcreativepark.net/2008/05/19-235050.html" alt="http://blog.webcreativepark.net/2008/05/19-235050.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://blog.webcreativepark.net/2008/05/19-235050.html</span> <span class="link-card-url">http://blog.webcreativepark.net/2008/05/19-235050.html</span> </div> </a> </div> <h3 id="同じような他のjsの参考">同じような他のJSの参考 </h3> <div class="link-card"> <a href="https://cornel.bopp-art.com/lightcase/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cornel.bopp-art.com/lightcase/" alt="https://cornel.bopp-art.com/lightcase/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cornel.bopp-art.com/lightcase/</span> <span class="link-card-url">https://cornel.bopp-art.com/lightcase/</span> </div> </a> </div> https://qwerty.work/post/2011/03/phpjavascript/ Tue, 01 Mar 2011 11:05:48 +0900 https://qwerty.work/post/2011/03/phpjavascript/ <p>以前に「</p> <p>」の一部で タイトルタグの間の文字列を取得するスクリプトを紹介しましたが、もっと短くできました。</p> <p> </p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getTitle</span>( $url ) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $byte <span style="color:#f92672">=</span> <span style="color:#ae81ff">256</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">while</span>(<span style="color:#66d9ef">empty</span>($matches)){ </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//無限ループにならないようにバイト数を制限 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>($byte <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">10000</span>){ </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">break</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//file_get_contents($url)でも読めるが、バイト数指定で読み込む </span></span></span><span style="display:flex;"><span> $html <span style="color:#f92672">=</span> <span style="color:#a6e22e">file_get_contents</span>($url, <span style="color:#66d9ef">NULL</span>, <span style="color:#66d9ef">NULL</span>, <span style="color:#ae81ff">0</span>, $byte); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">preg_match</span>(<span style="color:#e6db74">&#34;@&lt;title.*?&gt;(.*?)&lt;/title&gt;@i&#34;</span> , $html, $matches); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $byte<span style="color:#f92672">=</span> $byte <span style="color:#f92672">+</span> <span style="color:#ae81ff">256</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $html <span style="color:#f92672">=</span> $matches[<span style="color:#ae81ff">1</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $html <span style="color:#f92672">=</span> <span style="color:#a6e22e">mb_convert_encoding</span>($html, <span style="color:#a6e22e">mb_internal_encoding</span>(), <span style="color:#e6db74">&#34;auto&#34;</span> ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>($html); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">getTitle</span>(<span style="color:#e6db74">&#34;http://qwerty.work&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><p>タイトルタグが見つからなかったり、 タイトルタグよりも前に大量の文字列があると読み込みに時間がかかるので、読み込みのバイト数上限を決め、タイトルが見つかるまで徐々に読み込みバイト数を増やしていくようにしました。</p> <p>↓上記でhttp://qwerty.workのタイトルを取得した結果</p> <p> </p> <p>20011/03/06追記</p> <p>PHPのクラスライブラリPEARのパッケージ（iHTTP_Client）を使った方法が見つかったのでメモ。</p> <p>こっちの方が**高速！**な感じがします&hellip;。</p> <p>※PEARのパッケージ<a class="link" href="http://pear.php.net/package/HTTP_Client" target="_blank" rel="noopener" >HTTP_Client</a>と依存関係にある<a class="link" href="http://pear.php.net/package/HTTP_Request2/" target="_blank" rel="noopener" >HTTP_Request2</a>が必要です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getTitle</span>($targetUrl){ </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">require_once</span> $_SERVER[<span style="color:#e6db74">&#39;DOCUMENT_ROOT&#39;</span>]<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;/lib/PEAR/HTTP_Client/Client.php&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $client <span style="color:#f92672">=&amp;</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">HTTP_Client</span>(); </span></span><span style="display:flex;"><span> $client<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">get</span>($targetUrl); </span></span><span style="display:flex;"><span> $response <span style="color:#f92672">=</span> $client<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">currentResponse</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//余計な改行コードをスペースに変換 </span></span></span><span style="display:flex;"><span> $response <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>( <span style="color:#66d9ef">array</span>( <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">10</span>), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">13</span>), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">9</span>) ), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">32</span>), $response[<span style="color:#e6db74">&#39;body&#39;</span>] ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">preg_match</span>(<span style="color:#e6db74">&#34;/&lt;title.*?&gt;(.*?)&lt;\/title&gt;/&#34;</span>, $response, $title_matches); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $title <span style="color:#f92672">=</span> $title_matches[<span style="color:#ae81ff">1</span>]; </span></span><span style="display:flex;"><span> $title <span style="color:#f92672">=</span> <span style="color:#a6e22e">mb_convert_encoding</span>($title, <span style="color:#a6e22e">mb_internal_encoding</span>(), <span style="color:#e6db74">&#34;auto&#34;</span> ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>($title); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">getTitle</span>(<span style="color:#e6db74">&#34;http://qwerty.work&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><p> </p> <p>ついでにJavascriptでタイトルを取得する方法もメモ。</p> <p>※現在のURLのタイトルしか取得できません。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">write</span>(<span style="color:#e6db74">&#34;このページのタイトルは→「&#34;</span><span style="color:#f92672">+</span>document.<span style="color:#a6e22e">title</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#34;」です。&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;&lt;br&gt;</span> </span></span></code></pre></div><p>結果： document.write(&ldquo;このページのタイトルは→「&quot;+document.title+&quot;」です。&rdquo;);</p> <h3 id="関連記事">関連記事 </h3><ul> <li></li> <li></li> </ul> https://qwerty.work/post/2010/12/activexjavascript/ Thu, 16 Dec 2010 20:47:21 +0900 https://qwerty.work/post/2010/12/activexjavascript/ <p>イントラネットで表示されているページを印刷しようとすると、A4・<strong>縦</strong>で印刷したいのに、デフォルトはA4・<strong>横</strong>になっているため、印刷設定を毎回「<strong>縦</strong>」に変更しなくてはならない事にガマンの限界が&hellip;。</p> <p> </p> <p>イントラネットはWindowsサーバー上IISでASと一部PHPで作っています。</p> <p> </p> <p>印刷設定（用紙設定）はASPやJavascriptの関数があるんかな？</p> <p>といろいろ検索しましたが見つかりませんでした&hellip;。</p> <p> </p> <p>しかし、替わりに見つけたのは**ActtiveXコントロール「ScriptX」**を使った方法！</p> <p>まず以下のページで「Dowload smsx.cab」ボタンを押してダウンロード</p> <div class="link-card"> <a href="http://www.meadroid.com/scriptx/sxdownload.asp" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.meadroid.com/scriptx/sxdownload.asp" alt="http://www.meadroid.com/scriptx/sxdownload.asp" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.meadroid.com/scriptx/sxdownload.asp</span> <span class="link-card-url">http://www.meadroid.com/scriptx/sxdownload.asp</span> </div> </a> </div> <p>任意のディレクトリにアップロード</p> <p>印刷設定を使うページに以下のコードを挿入し、</p> <p>タグでActiveXコントロール読み込む。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- ScriptX 読み込み --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;object</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">factory</span> <span style="color:#a6e22e">style=</span><span style="color:#e6db74">&#34;display:none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">classid=</span><span style="color:#e6db74">&#34;clsid:1663ed61-23eb-11d2-b92f-008048fdd814&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">codebase=</span><span style="color:#e6db74">&#34;http://**smsx.cabを設置した場所のパス**/smsx.cab#Version=6,5,439,72（←バージョンによって書き換える）&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/object&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- ScriptX 読み込み --&gt;</span> </span></span></code></pre></div><p>次にJavascriptファンクションで印刷設定を行う。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">printWindow</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">header</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;ヘッダ名&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">footer</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;フッタ名&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">portrait</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; <span style="color:#75715e">// 用紙方向 true: 縦 false: 横 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">leftMargin</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1.0</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">topMargin</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1.0</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">rightMargin</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1.0</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">bottomMargin</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1.0</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">Print</span>(<span style="color:#66d9ef">false</span>); <span style="color:#75715e">// 印刷実行 ture: 印刷ダイアログなし false: 印刷ダイアログあり </span></span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p>あとはファンクションを呼び出すだけでOK!</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;input</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">value=</span><span style="color:#e6db74">&#34;ScriptXで印刷&#34;</span> <span style="color:#a6e22e">onclick=</span><span style="color:#e6db74">&#34;printWindow();&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p>自分の場合は印刷ページ表示と同時に印刷するので、</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;body</span> <span style="color:#a6e22e">onload=</span><span style="color:#e6db74">&#34;printWindow();&#34;</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><p>としました。</p> <p> </p> <p>※初回使用時は「ActiveXをインストールしますか？」見たいな警告が出ますが、インストールしてしてください。</p> <p> </p> <p>その他</p> <p><strong>ヘッダ・フッタに、現在日・ページ数出力</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">header</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;ヘッダ名 &amp;b 日付: &amp;d&#34;</span>; <span style="color:#75715e">// 現在日出力 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">footer</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;フッタ名 &amp;b &amp;p/&amp;P ページ&#34;</span>; <span style="color:#75715e">// ページ数出力 </span></span></span></code></pre></div><p>これでイントラネットとインターネットでヘッダー・フッター印刷を切り分けられそうなのがいいです。</p> <p>ヘッダーとフッターで使える記号</p> <ul> <li>&amp;w　：　印刷するホームページのタイトル</li> <li>&amp;u　：　印刷するページのアドレス</li> <li>&amp;d　：　現在の日付（xxxx/xx/xx 形式）</li> <li>&amp;D　：　現在の日付（xxxx年xx月xx日 形式）</li> <li>&amp;t　：　現在の時刻（コントロールパネルの「地域」で設定されている形式）</li> <li>&amp;T　：　現在の時刻（xx：xx：xx 形式）</li> <li>&amp;p　：　現在のページ番号</li> <li>&amp;P　：　総ページ数</li> <li>&amp;b　：　右揃えの文字列（「&amp;b」に続けて文字列を入力）</li> <li>&amp;b&amp;b　：　中央揃えの文字列（最初の「&amp;b」に続けて文字列を入力）と右揃えの文字列（2 番目の「&amp;b」に続けて文字列を入力）</li> <li>&amp;&amp;　：　アンパサンド（&amp;）</li> </ul> <p> </p> <p><strong>直接印刷(印刷ダイアログ表示なし）だけを直接使う</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">Print</span>(<span style="color:#66d9ef">true</span>); </span></span></code></pre></div><p> </p> <p><strong>プレビュー画面を表示</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">factory</span>.<span style="color:#a6e22e">printing</span>.<span style="color:#a6e22e">Preview</span>(); </span></span></code></pre></div><p> </p> <p>ActiveXコントロールだけにWindowsサーバー上ブラウザがIEじゃないと動かないとは思うのですが、WindowsサーバーであればIISじゃなくてもApatchでも動き、タグで「smsx.cab」さえ読み込めばPHPでも使えるようなことが書かれたページがありました。</p> <p> </p> <p>有償版もあるようですが、用紙サイズの指定とかもできるみたいです。</p> https://qwerty.work/post/2010/11/syntaxhighlighter/ Mon, 29 Nov 2010 14:49:12 +0900 https://qwerty.work/post/2010/11/syntaxhighlighter/ <h3 id="ソースコードをハイライトしてくれるsyntaxhighlighter">ソースコードをハイライトしてくれる『SyntaxHighlighter』 </h3><p>最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して**『SyntaxHighlighter』**というのを見つけました。</p> <h4 id="サンプル">サンプル </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">pre</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;brush:php&#39;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span> $p <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;サンプル&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> $p; </span></span><span style="display:flex;"><span> <span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><h4 id="作者のページ">作者のページ </h4> <div class="link-card"> <a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://alexgorbatchev.com/SyntaxHighlighter/" alt="http://alexgorbatchev.com/SyntaxHighlighter/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://alexgorbatchev.com/SyntaxHighlighter/</span> <span class="link-card-url">http://alexgorbatchev.com/SyntaxHighlighter/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/syntaxhighlighter" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/syntaxhighlighter" alt="https://github.com/syntaxhighlighter" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/syntaxhighlighter</span> <span class="link-card-url">https://github.com/syntaxhighlighter</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><p>まず<a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/download/" target="_blank" rel="noopener" ><strong>ダウンロード</strong></a>して適当な場所に保存して解凍します。現在の最新は「<a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" rel="noopener" ><strong>SyntaxHighlighter</strong></a>** 3.0.83**」のようです。</p> <h4 id="ダウンロードリンク">ダウンロードリンク </h4><ul> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current" target="_blank" rel="noopener" >http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current</a></li> </ul> <p>仮に**「ルートディレクトリ/js/SyntaxHighlighter」**に保存した場合。</p> <p><code>～</code>内に以下を追加</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--SyntaxHighlighter--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/styles/shCore.css&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 以下は好きなテーマによって変更する --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/styles/shThemeDefault.css&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shCore.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shAutoloader.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 以下は装飾したい言語を追加 --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushCss.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushJScript.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushPhp.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushPlain.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushSql.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushVb.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushXml.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span>// <span style="color:#75715e">&lt;![CDATA[ </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> SyntaxHighlighter.all(); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> // ]]&gt;</span><span style="color:#f92672">&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--SyntaxHighlighter--&gt;</span> </span></span></code></pre></div><p>意外にカンタン&hellip;。</p> <p>その他、</p> <ul> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/" target="_blank" rel="noopener" >テーマ</a></li> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/" target="_blank" rel="noopener" >言語</a></li> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/" target="_blank" rel="noopener" >オプション</a></li> </ul> <p>を指定できるようです。</p> <p>英語の説明ページですが、なんとなくでも理解できました。</p> <p>なんかウレシイ。</p> <h3 id="syntaxhighlighter以外の参考ページ">SyntaxHighlighter以外の参考ページ </h3> <div class="link-card"> <a href="https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" alt="https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/ko-he-8/items/b068e431f23b38608fb7</span> <span class="link-card-url">https://qiita.com/ko-he-8/items/b068e431f23b38608fb7</span> </div> </a> </div> https://qwerty.work/post/2010/10/javascript_5/ Mon, 18 Oct 2010 14:02:36 +0900 https://qwerty.work/post/2010/10/javascript_5/ <p>こんな高機能な無料サンプル見つけたのでメモ。</p> <p> </p> <p>Javascriptだけで動いて、見た目もかっこいいカート</p> <div class="link-card"> <a href="http://simplecartjs.org/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://simplecartjs.org/" alt="http://simplecartjs.org/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://simplecartjs.org/</span> <span class="link-card-url">http://simplecartjs.org/</span> </div> </a> </div> <p>PHPファイル＋jQueryで動くカート</p> <div class="link-card"> <a href="http://conceptlogic.com/jcart/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://conceptlogic.com/jcart/" alt="http://conceptlogic.com/jcart/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://conceptlogic.com/jcart/</span> <span class="link-card-url">http://conceptlogic.com/jcart/</span> </div> </a> </div> <p>PHPファイル1つで動くカート</p> <div class="link-card"> <a href="http://php.lemon-s.com/simpleshop.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://php.lemon-s.com/simpleshop.html" alt="http://php.lemon-s.com/simpleshop.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://php.lemon-s.com/simpleshop.html</span> <span class="link-card-url">http://php.lemon-s.com/simpleshop.html</span> </div> </a> </div> <p>MovableTypeやWordPressのカートプラグイン（有料）</p> <div class="link-card"> <a href="http://skeleton.juxtaposition.jp/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://skeleton.juxtaposition.jp/" alt="http://skeleton.juxtaposition.jp/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://skeleton.juxtaposition.jp/</span> <span class="link-card-url">http://skeleton.juxtaposition.jp/</span> </div> </a> </div> https://qwerty.work/post/2010/10/flashiphone/ Sat, 16 Oct 2010 11:32:58 +0900 https://qwerty.work/post/2010/10/flashiphone/ <p>代替画像の表示でFLASHが表示できないiPhone対策</p> <p>会社のホームページはパソコン用のサイトで、メイン画像がFLASHでできております。</p> <p>iPhoneを持っているのですが、FLASHが表示できないため、</p> <p>なんか替わりの画像が表示できたらなぁ～と方法を検索したら簡単に見つかりました。</p> <p> </p> <p>早速導入してみようということで実践したら、Javascriptのライブラリの設置がいるものの、ちょ～簡単にできた。</p> <p>通常のFLASH画像を設置するよりも簡単じゃないですか！？</p> <p> </p> <p>しかし、またJacascriptが増えてしまった&hellip;。</p> <p> </p> <p>以下を参考にさせていただきました↓</p> <div class="link-card"> <a href="http://www.drk7.jp/MT/archives/001481.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.drk7.jp/MT/archives/001481.html" alt="http://www.drk7.jp/MT/archives/001481.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.drk7.jp/MT/archives/001481.html</span> <span class="link-card-url">http://www.drk7.jp/MT/archives/001481.html</span> </div> </a> </div> https://qwerty.work/post/2010/09/javascript3_1/ Tue, 21 Sep 2010 20:43:04 +0900 https://qwerty.work/post/2010/09/javascript3_1/ <p>配列をうまく使えないので、同じような処理を繰り返しており課題はあるものの</p> <p>なんとかラジオボタンで選択した金額を計算できる自動見積りフォームを作ってみた。</p> <p> </p> <p>170 ){ document.getElementById(&ldquo;display_account&rdquo;).style.top = position_top + &ldquo;px&rdquo;; } } window.onload = function() { var isIE = 0</p> <p>見積金額</p> <pre><code>合計：0 円 消費税：0 円 税込合計：0 円 </code></pre> <h1 id="見積り">見積り </h1><p>下記項目を選択すると自動計算します。</p> <pre><code> 商品 グレード5 グレード4 グレード3 グレード2 グレード1 数量 液晶テレビ 120,000円 40,000円 20,000円 15,000円 10,000円 0 1 2 3 4 5 6 7 8 9 10 エアコン 80,000円 60,000円 40,000円 20,000円 10,000円 0 1 2 3 4 5 6 7 8 9 10 パソコン 60,000円 40,000円 20,000円 10,000円 5,000円 0 1 2 3 4 5 6 7 8 9 10               合計 円           消費税 円           税込合計 円           </code></pre> <p> </p> <p>ソース</p> <p>170 ){</p> <pre><code>document.getElementById(&quot;display_account&quot;).style.top = position_top + &quot;px&quot;; } } window.onload = function() { var isIE = 0 </code></pre> <p>見積金額</p> <pre><code>合計：0 円 消費税：0 円 税込合計：0 円 </code></pre> <h1 id="見積り-1">見積り </h1><p>下記項目を選択すると自動計算します。</p> <p>商品</p> <p>グレード5</p> <p>グレード4</p> <p>グレード3</p> <p>グレード2</p> <p>グレード1</p> <p>数量</p> <p>液晶テレビ</p> <pre><code>120,000円 40,000円 20,000円 15,000円 10,000円 </code></pre> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>エアコン</p> <pre><code>80,000円 60,000円 40,000円 20,000円 10,000円 </code></pre> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>パソコン</p> <pre><code>60,000円 40,000円 20,000円 10,000円 5,000円 </code></pre> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>合計</p> <pre><code>円 </code></pre> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>消費税</p> <pre><code>円 </code></pre> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>税込合計</p> <pre><code>円 </code></pre> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> https://qwerty.work/post/2010/09/javascript2/ Tue, 21 Sep 2010 16:38:49 +0900 https://qwerty.work/post/2010/09/javascript2/ <p><a class="link" href="http://qwerty.work/2010/09/javascript-4.html" target="_blank" rel="noopener" >前回</a>は金額が3桁区切りになっていなかったので、今回は3桁区切りを加えてみた。</p> <p>// // 170 ){ document.getElementById(&ldquo;display_account&rdquo;).style.top = position_top + &ldquo;px&rdquo;; } } window.onload = function() { var isIE = 0 見積金額 合計：0 円 消費税：0 円 税込合計：0 円</p> <h1 id="見積り">見積り </h1><p>下記項目を選択すると自動計算します。</p> <p>商品</p> <p>数量</p> <p>果物</p> <p>選択してください リンゴ（3個入り）1,000円 バナナ 450円 パイナップル　650円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>肉</p> <p>選択してください 牛肉（100g）500円 豚肉（100g）400円 鶏肉（100g）300円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>魚</p> <p>選択してください さけ　110円 さば　120円 いわし　130円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>合計 円</p> <p>消費税 円</p> <p>税込合計 円</p> <h3 id="ソース">ソース </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">onscroll</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account()&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#75715e">&lt;!--</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">keisan</span>(){ </span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">tax</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span>; <span style="color:#75715e">// 消費税率 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">price1</span> <span style="color:#f92672">=</span> eval(document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">goods1</span>.<span style="color:#a6e22e">value</span>) <span style="color:#f92672">*</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">volume1</span> .<span style="color:#a6e22e">selectedIndex</span>; <span style="color:#75715e">// 数量×単価&lt;br /&gt;var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;&lt;br /&gt;var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex; </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">total1</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">price1</span>)<span style="color:#f92672">+</span> parseInt(<span style="color:#a6e22e">price2</span>)<span style="color:#f92672">+</span> parseInt(<span style="color:#a6e22e">price3</span>); <span style="color:#75715e">// 税抜き合計を計算&lt;br /&gt;var tax2 = Math.round((total1 * tax) / 100); //消費税を計算&lt;br /&gt;var total2 = total1 + tax2; //税込み合計を計算 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//表示用の金額を3桁区切りに変換&lt;br /&gt; var data = new Array(total1,tax2,total2); //金額を配列に格納&lt;br /&gt; var len = data.length; //配列の数を取得 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span>(<span style="color:#a6e22e">cnt</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>;<span style="color:#a6e22e">cnt</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">len</span>;<span style="color:#a6e22e">cnt</span><span style="color:#f92672">++</span>){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">span</span> <span style="color:#a6e22e">color</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;red&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;color: red;&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">cnt</span>] <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> String(<span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">cnt</span>]).<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/(\d)(?=(\d\d\d)+(?!\d))/g</span>, <span style="color:#e6db74">&#34;$1,&#34;</span>); <span style="color:#75715e">//ここで正規表現で3桁ごとにカンマで区切る&lt;/span&gt;&lt;br /&gt; } </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//フォームのテキストエリアに表示する金額&lt;br /&gt;document.form1.field_total1.value = data[0]; // 税抜き合計&lt;br /&gt;document.form1.field_tax.value = data[1]; // 消費税&lt;br /&gt;document.form1.field_total2.value = data[2]; // 税込合計 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//右の窓に表示する金額&lt;br /&gt;document.getElementById(&#34;display_account_amount&#34;).innerHTML = data[0]; // 税抜き合計&lt;br /&gt;document.getElementById(&#34;display_account_tax&#34;).innerHTML = data[1]; // 消費税&lt;br /&gt;document.getElementById(&#34;display_account_all&#34;).innerHTML = data[2]; // 税込合計 </span></span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#75715e">// --&gt; &lt;br /&gt;&lt;/script&gt;&lt;br /&gt;&lt;script type=&#34;text/javascript&#34;&gt;&lt;br /&gt;&lt;!--&lt;br /&gt;function display_account() {&lt;br /&gt;var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) &gt; 170 ){&lt;br /&gt;document.getElementById(&#34;display_account&#34;).style.top = position_top + &#34;px&#34;; } } window.onload = function() {&lt;br /&gt;var isIE = 0&lt;=window.navigator.userAgent.indexOf(&#34;MSIE&#34;);&lt;br /&gt;if(isIE &amp;&amp; document.compatMode==&#34;BackCompat&#34;){&lt;br /&gt;document.body.onscroll = display_account;&lt;br /&gt;}else{&lt;br /&gt;document.documentElement.onscroll = display_account;&lt;br /&gt;}&lt;br /&gt;}&lt;br /&gt;//--&gt;&lt;br /&gt;&lt;/script&gt;&lt;br /&gt;&lt;div id=&#34;display_account&#34; style=&#34;position:absolute;top:170px;right:20px;z-index:100;width:200px;&#34;&gt; 見積金額&lt;br /&gt;&lt;br /&gt;合計：&lt;span id=&#34;display_account_amount&#34;&gt;0&lt;/span&gt; 円&lt;br /&gt;&lt;br /&gt;消費税：&lt;span id=&#34;display_account_tax&#34;&gt;0&lt;/span&gt; 円&lt;br /&gt;&lt;br /&gt;税込合計：&lt;span id=&#34;display_account_all&#34;&gt;0&lt;/span&gt; 円&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;h1&gt;見積り&lt;/h1&gt;&lt;br /&gt;&lt;p&gt;下記項目を選択すると自動計算します。&lt;/p&gt;&lt;br /&gt;&lt;form name=&#34;form1&#34; action=&#34;&#34; id=&#34;form1&#34; method=&#34;post&#34;&gt;&lt;br /&gt;&lt;table&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;商品&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;数量&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;果物&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;goods1&#34; onChange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option value=&#34;0&#34; selected=&#34;selected&#34;&gt;選択してください&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;1000&#34;&gt;リンゴ（3個入り）1,000円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;450&#34;&gt;バナナ 450円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;35900&#34;&gt;パイナップル　650円&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume1&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;肉&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;goods2&#34; onChange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option value=&#34;0&#34; selected=&#34;selected&#34;&gt;選択してください&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;500&#34;&gt;牛肉（100g）500円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;400&#34;&gt;豚肉（100g）400円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;300&#34;&gt;鶏肉（100g）300円&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume2&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;魚&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;goods3&#34; onChange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option value=&#34;0&#34; selected=&#34;selected&#34;&gt;選択してください&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;110&#34;&gt;さけ　110円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;120&#34;&gt;さば　120円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;130&#34;&gt;いわし　130円&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume3&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;合計&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_total1&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;消費税&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_tax&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;税込合計&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_total2&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;/table&gt;&lt;br /&gt;&lt;/form&gt;&lt;br /&gt;&lt;/div&gt; </span></span></span></code></pre></div> https://qwerty.work/post/2010/09/javascript3/ Tue, 21 Sep 2010 10:45:15 +0900 https://qwerty.work/post/2010/09/javascript3/ <p>いろいろ探してみて一番よさそうなサンプルを使用して</p> <p>金額の数値をカンマで3桁に区切り、</p> <p>表示できるようやってみた。</p> <p> </p> <p> </p> <p> </p> <p>//3桁カンマ区切り</p> <p> </p> <p>function addFigure() {</p> <p> </p> <p> var str = 1000000000;</p> <p> </p> <p> str = String(str).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, &ldquo;$1,&rdquo;);</p> <p> </p> <p> document.getElementById(&ldquo;price&rdquo;).innerHTML = str;</p> <p>}</p> <p> </p> <p>0</p> <p>   </p> <p>これで「1,000,000,000」と表示されるはず</p> <p>正規表現で数字の間にカンマを置き換えているのですが、</p> <p>正規表現についてはチンプンカンプンです。</p> <p> </p> <p> </p> <p>参考サイト：<a class="link" href="http://www.coppermine.jp/hasunuma/weblog/2010/05/post.html" target="_blank" rel="noopener" >http://www.coppermine.jp/hasunuma/weblog/2010/05/post.html</a></p> https://qwerty.work/post/2010/09/javascript_4/ Mon, 20 Sep 2010 18:21:57 +0900 https://qwerty.work/post/2010/09/javascript_4/ <p>課題はたくさんあるものの、いろいろサンプルを探してJavaScriptの自動見積りフォームを作ってみた。</p> <p>// // 170 ){ document.getElementById(&ldquo;display_account&rdquo;).style.top = position_top + &ldquo;px&rdquo;; } } window.onload = function() { var isIE = 0 見積金額 合計：0 円 消費税：0 円 税込合計：0 円</p> <h1 id="見積り">見積り </h1><p>下記項目を選択すると自動計算します。</p> <p>商品</p> <p>数量</p> <p>果物</p> <p>選択してください リンゴ（3個入り）1,000円 バナナ 450円 パイナップル　650円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>肉</p> <p>選択してください 牛肉（100g）500円 豚肉（100g）400円 鶏肉（100g）300円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>魚</p> <p>選択してください さけ　110円 さば　120円 いわし　130円</p> <p>0 1 2 3 4 5 6 7 8 9 10</p> <p>合計 円</p> <p>消費税 円</p> <p>税込合計 円</p> <p>ソース</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">onscroll</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account()&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#75715e">&lt;!--</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">keisan</span>(){ </span></span><span style="display:flex;"><span><span style="color:#75715e">// 計算開始 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">tax</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span>; <span style="color:#75715e">// 消費税率&lt;br /&gt;&lt;br /&gt; </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">price1</span> <span style="color:#f92672">=</span> eval(document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">goods1</span>.<span style="color:#a6e22e">value</span>) <span style="color:#f92672">*</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">volume1</span> .<span style="color:#a6e22e">selectedIndex</span>; <span style="color:#75715e">// 数量×単価&lt;br /&gt; </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">price2</span> <span style="color:#f92672">=</span> eval(document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">goods2</span>.<span style="color:#a6e22e">value</span>) <span style="color:#f92672">*</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">volume2</span> .<span style="color:#a6e22e">selectedIndex</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">price3</span> <span style="color:#f92672">=</span> eval(document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">goods3</span>.<span style="color:#a6e22e">value</span>) <span style="color:#f92672">*</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">volume3</span> .<span style="color:#a6e22e">selectedIndex</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">total1</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">price1</span>)<span style="color:#f92672">+</span> parseInt(<span style="color:#a6e22e">price2</span>)<span style="color:#f92672">+</span> parseInt(<span style="color:#a6e22e">price3</span>); <span style="color:#75715e">// 合計を計算&lt;br /&gt;var tax2 = Math.round((total1 * tax) / 100); //消費税を計算 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// フォームのテキストエリアに表示する金額&lt;br /&gt; </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">field_total1</span>.<span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">total1</span>; <span style="color:#75715e">// 合計を表示&lt;br /&gt; </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">field_tax</span>.<span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">tax2</span>; <span style="color:#75715e">// 消費税を表示&lt;br /&gt; </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">field_total2</span>.<span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">total1</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">tax2</span>; <span style="color:#75715e">// 税込合計を表示 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//右の窓に表示する金額&lt;br /&gt; </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;display_account_amount&#34;</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">total1</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;display_account_tax&#34;</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">tax2</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;display_account_all&#34;</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">total1</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">tax2</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#75715e">// --&gt; &lt;br /&gt;&lt;/script&gt; </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">display_account</span>() {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">position_top</span> <span style="color:#f92672">=</span> ( document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">scrollTop</span> <span style="color:#f92672">||</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">scrollTop</span> <span style="color:#f92672">||</span> window.<span style="color:#a6e22e">scrollTop</span> ) ; <span style="color:#66d9ef">if</span> ( parseInt(<span style="color:#a6e22e">position_top</span>) <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">170</span> ){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;display_account&#34;</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">position_top</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;px&#34;</span>; } } window.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">isIE</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span><span style="color:#f92672">&lt;=</span>window.<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">userAgent</span>.<span style="color:#a6e22e">indexOf</span>(<span style="color:#e6db74">&#34;MSIE&#34;</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">isIE</span> <span style="color:#f92672">&amp;&amp;</span> document.<span style="color:#a6e22e">compatMode</span><span style="color:#f92672">==</span><span style="color:#e6db74">&#34;BackCompat&#34;</span>){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">onscroll</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">display_account</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>}<span style="color:#66d9ef">else</span>{<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">onscroll</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">display_account</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>}<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>}<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#75715e">//--&gt;&lt;br /&gt;&lt;/script&gt; </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;position:absolute;top:170px;right:20px;z-index:100;width:200px;&#34;</span><span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">見積金額</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#a6e22e">合計</span><span style="color:#960050;background-color:#1e0010">：</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">span</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account_amount&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#ae81ff">0</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/span&gt; 円&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#a6e22e">消費税</span><span style="color:#960050;background-color:#1e0010">：</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">span</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account_tax&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#ae81ff">0</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/span&gt; 円&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#a6e22e">税込合計</span><span style="color:#960050;background-color:#1e0010">：</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">span</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display_account_all&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#ae81ff">0</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/span&gt; 円&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#e6db74">/div&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">見積り</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/h1&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">下記項目を選択すると自動計算します</span><span style="color:#960050;background-color:#1e0010">。</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/p&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;post&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">table</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">tr</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">商品</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/td&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;&amp;</span><span style="color:#a6e22e">nbsp</span>;<span style="color:#f92672">&lt;</span><span style="color:#e6db74">/td&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">数量</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/td&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#e6db74">/tr&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">tr</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">果物</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/td&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">select</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;goods1&#34;</span> <span style="color:#a6e22e">onChange</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;keisan()&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">selected</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;selected&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">選択してください</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/option&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;1000&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">リンゴ</span><span style="color:#960050;background-color:#1e0010">（</span><span style="color:#ae81ff">3</span><span style="color:#a6e22e">個入り</span><span style="color:#960050;background-color:#1e0010">）</span><span style="color:#ae81ff">1</span>,<span style="color:#ae81ff">000</span><span style="color:#a6e22e">円</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/option&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;450&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">バナナ</span> <span style="color:#ae81ff">450</span><span style="color:#a6e22e">円</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/option&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;35900&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">パイナップル</span>　<span style="color:#ae81ff">650</span><span style="color:#a6e22e">円</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/option&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume1&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;肉&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;goods2&#34; onChange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option value=&#34;0&#34; selected=&#34;selected&#34;&gt;選択してください&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;500&#34;&gt;牛肉（100g）500円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;400&#34;&gt;豚肉（100g）400円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;300&#34;&gt;鶏肉（100g）300円&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume2&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;魚&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;goods3&#34; onChange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option value=&#34;0&#34; selected=&#34;selected&#34;&gt;選択してください&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;110&#34;&gt;さけ　110円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;120&#34;&gt;さば　120円&lt;/option&gt;&lt;br /&gt;&lt;option value=&#34;130&#34;&gt;いわし　130円&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;select name=&#34;volume3&#34; onchange=&#34;keisan()&#34;&gt;&lt;br /&gt;&lt;option&gt;0&lt;/option&gt;&lt;br /&gt;&lt;option&gt;1&lt;/option&gt;&lt;br /&gt;&lt;option&gt;2&lt;/option&gt;&lt;br /&gt;&lt;option&gt;3&lt;/option&gt;&lt;br /&gt;&lt;option&gt;4&lt;/option&gt;&lt;br /&gt;&lt;option&gt;5&lt;/option&gt;&lt;br /&gt;&lt;option&gt;6&lt;/option&gt;&lt;br /&gt;&lt;option&gt;7&lt;/option&gt;&lt;br /&gt;&lt;option&gt;8&lt;/option&gt;&lt;br /&gt;&lt;option&gt;9&lt;/option&gt;&lt;br /&gt;&lt;option&gt;10&lt;/option&gt;&lt;br /&gt;&lt;/select&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;合計&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_total1&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;消費税&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_tax&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;tr&gt;&lt;br /&gt;&lt;td&gt;税込合計&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&lt;input type=&#34;text&#34; name=&#34;field_total2&#34; size=&#34;8&#34; value=&#34;0&#34;&gt;&lt;br /&gt;円&lt;/td&gt;&lt;br /&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;br /&gt;&lt;/tr&gt;&lt;br /&gt;&lt;/table&gt;&lt;br /&gt;&lt;/form&gt;&lt;br /&gt;&lt;/div&gt;</span> </span></span></code></pre></div><p>次は金額を3桁区切りにする方法を探ってみたいと思います。</p> <p>JavaScriptは3桁区切りにしてくれる関数が存在しないみたいですね。</p> <p>3桁毎に「,」を挿入する方法と正規表現による置換える方法があるようですが、正規表現による置換えがすっきりしてよさそう。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//3桁カンマ区切り&lt;br /&gt;function addFigure(str) {&lt;br /&gt;&lt;br /&gt;　var num = new String(str).replace(/,/g, &#34;&#34;);&lt;br /&gt;&lt;br /&gt;　while(num != (num = num.replace(/^(-?\d+)(\d{3})/, &#34;$1,$2&#34;)));&lt;br /&gt;&lt;br /&gt;　return num;&lt;br /&gt;&lt;br /&gt;} </span></span></span></code></pre></div><h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="http://ameblo.jp/linking/entry-10046853346.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://ameblo.jp/linking/entry-10046853346.html" alt="http://ameblo.jp/linking/entry-10046853346.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://ameblo.jp/linking/entry-10046853346.html</span> <span class="link-card-url">http://ameblo.jp/linking/entry-10046853346.html</span> </div> </a> </div> https://qwerty.work/post/2009/09/google_ajax_feed_api_1/ Wed, 23 Sep 2009 14:50:10 +0900 https://qwerty.work/post/2009/09/google_ajax_feed_api_1/ <p>前回の「<a class="link" href="http://qwerty.work/blog/2009/06/google-ajax-feed-apiprjavascript.php" target="_blank" rel="noopener" >Google AJAX Feed APIを使ってアメーバブログの「PR:」を除くで記事一覧を表示するJavascript</a> 」ですが、アメーバブログを更新して、最新のRSSをGoogle AJAX Feed APIで読み込んでいるのに、最新の記事一覧をスクリプトで表示することができないということが多々ありました。</p> <p>それは、Googleのキャッシュにあるフィードを読み込んでいるからだそうです。</p> <p>キャッシュをクリアまたはリセットする方法があるのかもしれませんが、読み込むフィードのURLにユニークな値を付加させることで、ページを開くたびに最新の記事一覧を表示することができます。</p> <p>前回のスクリプトにユニークな値として現在日時をURLに付加させてみました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://www.google.com/jsapi?key=●●あなたのAPIキー●●&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">load</span>(<span style="color:#e6db74">&#34;feeds&#34;</span>, <span style="color:#e6db74">&#34;1&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">initialize</span>() </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 現在の日付と時間を取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">date</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">year</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getYear</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">mon</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getMonth</span>() <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">day</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getDate</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">hour</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getHours</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getMinutes</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sec</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">date</span>.<span style="color:#a6e22e">getSeconds</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">query</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">year</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">mon</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">day</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">hour</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">sec</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//現在の最新RSSフィードの取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">feed</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">feeds</span>.<span style="color:#a6e22e">Feed</span>(<span style="color:#e6db74">&#34;http://example.com/blog/rss20.xml?&#34;</span> <span style="color:#a6e22e">query</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//取得するフィード数 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">setNumEntries</span>(<span style="color:#ae81ff">6</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//実際に読む込む </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">load</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">result</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//読み込めたか判別 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">error</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//表示部分を選択 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;feed&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//変数の初期化 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Feedの処理 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&lt;ul&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">entries</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Feedを一つ抽出 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">entry</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">entries</span>[<span style="color:#a6e22e">i</span>]; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">title</span>.<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/^PR:/</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//「PR:」から始まるものがあれば何もしない </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span>{ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#39;&lt;li&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">link</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34; title=&#34;&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">title</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;&#34;&gt;&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">title</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">createDateString</span>(<span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">publishedDate</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#39;&amp;nbsp;(&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;)&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&#39;</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#39;&lt;/ul&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">list</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//日付の表示方法を変更 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">createDateString</span>(<span style="color:#a6e22e">publishedDate</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pdate</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(<span style="color:#a6e22e">publishedDate</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pday</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getDate</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pmonth</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getMonth</span>() <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pyear</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getFullYear</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">phour</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getHours</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pminute</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getMinutes</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">psecond</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getSeconds</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//var strdate = pyear + &#34;年&#34; + pmonth + &#34;月&#34; + pday + &#34;日&#34; + phour + &#34;時&#34; + pminute + &#34;分&#34; + psecond + &#34;秒&#34;; </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pyear</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;-&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">pmonth</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;-&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">pday</span> ; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">strdate</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">setOnLoadCallback</span>(<span style="color:#a6e22e">initialize</span>); </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt; </span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;feed&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Loading</span>...<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span></code></pre></div><p> </p> <p>ちょっと難点なのは、ページを開く度に最新のフィードを読み込むので、表示がもたつきます。</p> <p>なので、「分」のminと「秒」のsecは省いて1時間以内の表示はキャッシュを読み込むくらいにした方がいいかもしれません。</p> https://qwerty.work/post/2009/09/javascript_3/ Thu, 17 Sep 2009 17:12:57 +0900 https://qwerty.work/post/2009/09/javascript_3/ <h3 id="宅配便各社の荷物追跡結果を表示するフォームを作る">宅配便各社の荷物追跡結果を表示するフォームを作る </h3><p>Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみました。</p> <ul> <li>検索窓に伝票番号（お問い合せ番号）を入力</li> <li>宅急便会社を選択</li> <li>ボタンを押す</li> <li>新規ウィンドウに検索結果が表示される</li> </ul> <p>よく荷物検索に使う以下の各社なので、この宅配便の検索をメインに作ります。</p> <ul> <li>クロネコヤマト</li> <li>佐川急便</li> <li>エクスパック</li> </ul> <h3 id="フォームのソース">フォームのソース </h3><ul> <li>サンプルページ：<a class="link" href="http://qwerty.work/nimotsu_search/nimotsu.html" target="_blank" rel="noopener" >http://qwerty.work/nimotsu_search/nimotsu.html</a></li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">html</span> <span style="color:#a6e22e">PUBLIC</span> <span style="color:#e6db74">&#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34;</span> <span style="color:#e6db74">&#34;&lt;a href=&#34;</span><span style="color:#a6e22e">http</span><span style="color:#f92672">:</span><span style="color:#75715e">//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&lt;/a&gt;&#34;&gt;&lt;br /&gt;&lt;html xmlns=&#34;&lt;a href=&#34;http://www.w3.org/1999/xhtml&#34;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&#34;&gt;&lt;br /&gt;&lt;head&gt;&lt;br /&gt;&lt;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&gt;&lt;br /&gt;&lt;title&gt;荷物追跡&lt;/title&gt;&lt;br /&gt;&lt;/head&gt;&lt;br /&gt;&lt;body&gt;&lt;br /&gt;&lt;script type=&#34;text/javascript&#34;&gt;&lt;br /&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">data_in</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">//フォームデータ入力用変数&lt;br /&gt; var denpyou;&lt;br /&gt; var kaisha;&lt;br /&gt; var url;&lt;br /&gt; url = new Array();&lt;br /&gt; //クロネコヤマト&lt;br /&gt; url[1] = &#34;&lt;a href=&#34;http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id&#34;&gt;http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id&lt;/a&gt;=&#34;;&lt;br /&gt; //佐川急便&lt;br /&gt; url[2] = &#34;&lt;a href=&#34;http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo&#34;&gt;http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo&lt;/a&gt;=&#34;;&lt;br /&gt; //日本郵便（ゆうパック・EXPACK・ポスパケット）&lt;br /&gt; url[3] = &#34;&lt;a href=&#34;http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&amp;searchKind=S002&amp;locale=ja&amp;SVID=&amp;reqCodeNo1&#34;&gt;http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&amp;searchKind=S002&amp;locale=ja&amp;SVID=&amp;reqCodeNo1&lt;/a&gt;=&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#75715e">//フォームデータを受け取る&lt;br /&gt; if(document.form1.denpyou.value==&#34;&#34;){&lt;br /&gt; alert(&#34;伝票番号が入力されていません。&#34;);&lt;br /&gt; }&lt;br /&gt; else{&lt;br /&gt; denpyou=document.form1.denpyou.value; &lt;br /&gt; &lt;br /&gt; //ラジオボタンの値を受け取る &lt;br /&gt; for (i=0;i&lt;document.form1.kaisha.length;i++){&lt;br /&gt; if (document.form1.kaisha[i].checked)&lt;br /&gt; kaisha = document.form1.kaisha[i].value;&lt;br /&gt; }&lt;br /&gt; &lt;br /&gt; url = url[kaisha];&lt;br /&gt; &lt;br /&gt; //新しいウィンドウで検索結果を表示&lt;br /&gt; window.open(url+denpyou);&lt;br /&gt; } </span></span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#75715e">/* 半角数字チェック */</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">TextCheck</span>() {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">form1</span>.<span style="color:#a6e22e">denpyou</span>.<span style="color:#a6e22e">value</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">if</span>( <span style="color:#a6e22e">str</span>.<span style="color:#a6e22e">match</span>( <span style="color:#e6db74">/[^0-9.-]+/</span> ) ) {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#34;半角数字、半角ハイフンで入力して下さい。&#34;</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">1</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> }<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">0</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/script&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;form1&#34;</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;post&#34;</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span> <span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">伝票番号</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;denpyou&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">onblur</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;TextCheck();&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#960050;background-color:#1e0010">（</span><span style="color:#a6e22e">半角数字</span><span style="color:#960050;background-color:#1e0010">、</span><span style="color:#a6e22e">半角ハイフン</span><span style="color:#960050;background-color:#1e0010">）</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span> <span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">会社選択</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;1&#34;</span> <span style="color:#a6e22e">checked</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ヤマト運輸</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;2&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">佐川急便</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;radio&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;kaisha&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;3&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ゆうパック</span><span style="color:#960050;background-color:#1e0010">･</span><span style="color:#a6e22e">EXPACK</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;検索結果ページを開く&#34;</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;data_in();&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#e6db74">/form&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#e6db74">/body&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span> </span></span></code></pre></div><h3 id="このページに埋め込んでテスト">このページに埋め込んでテスト </h3><p>実際に使用できます。</p> <p>//</p> <p>伝票番号 （半角数字、半角ハイフン） 会社選択 ヤマト運輸 佐川急便 ゆうパック･EXPACK</p> <h3 id="php版も作りました"> PHP版も作りました </h3><p> PHP版は以下をご参照ください。</p> <ul> <li><a class="link" href="http://qwerty.work/2009/09/php-1.html" target="_blank" rel="noopener" >PHPで宅配便各社の荷物追跡結果ページを表示するフォームを作ってみる。</a></li> </ul> https://qwerty.work/post/2009/07/google_ajax_feed_apirssjavascript/ Wed, 29 Jul 2009 13:45:09 +0900 https://qwerty.work/post/2009/07/google_ajax_feed_apirssjavascript/ <p>前回のページ「」で紹介したスクリプトを一部変更してみた。</p> <p> </p> <p>変更の主な内容は、</p> <p>表示するリストを作成する際に、HTMLタグを変数に入れるように改造しました。（赤文字部分）</p> <p>前回はXMLの要素を操作してリストを作成するようにしていましたが、</p> <p>XMLの操作は苦手なのでHTMLのソースを変数に格納するようにしました。</p> <p>google.load(&ldquo;feeds&rdquo;, &ldquo;1&rdquo;);  </p> <p>function initialize()</p> <p>{  </p> <p> //RSSフィードの取得</p> <p> var feed = new google.feeds.Feed(&quot;●●読み込みたいフィードのURL●●&quot;);  </p> <p> </p> <p> //取得するフィード数</p> <p> feed.setNumEntries(5)  </p> <p> </p> <p> //実際に読む込む</p> <p> feed.load(function(result)</p> <p> {  </p> <p>  </p> <p>  //読み込めたか判別</p> <p>  if (!result.error)</p> <p>  {</p> <p>   //表示部分を選択</p> <p>   var container = document.getElementById(&ldquo;feed&rdquo;);</p> <p>   </p> <p>   //変数の初期化</p> <p>   var list = &ldquo;&rdquo;;</p> <p>   </p> <p>   //Feedの処理</p> <p>    <strong>list = &lsquo;&rsquo;;</strong></p> <p>   for (var i = 0; i list += &lsquo;- &lsquo;;</p> <p>     list += &lsquo;<a class="link" href="" >&rsquo; + entry.title + &lsquo;</a>&rsquo;;</p> <p>     var strdate = createDateString(entry.publishedDate);</p> <p>     list += &lsquo;（&rsquo; + strdate + &lsquo;）&rsquo;;</p> <p>     list += &lsquo;&rsquo;;**</p> <p>    }</p> <p>        }</p> <p>     **list += ' &lsquo;;</p> <p>     container.innerHTML = list;**</p> <p>     }  </p> <p>   });  </p> <p>}</p> <p>//日付の表示方法を変更</p> <p>function createDateString(publishedDate){</p> <p>  var pdate = new Date(publishedDate);</p> <p>  var pday = pdate.getDate();</p> <p>  var pmonth = pdate.getMonth() + 1;</p> <p>  var pyear = pdate.getFullYear();</p> <p>  var phour = pdate.getHours();</p> <p>  var pminute = pdate.getMinutes();</p> <p>  var psecond = pdate.getSeconds(); </p> <p>  //var strdate = pyear + &ldquo;年&rdquo; + pmonth + &ldquo;月&rdquo; + pday + &ldquo;日&rdquo; + phour + &ldquo;時&rdquo; + pminute + &ldquo;分&rdquo; + psecond + &ldquo;秒&rdquo;;</p> <p>  var strdate = pyear + &ldquo;-&rdquo; + pmonth + &ldquo;-&rdquo; + pday ;</p> <p>  return strdate;</p> <p>}</p> <p>google.setOnLoadCallback(initialize); </p> <p>   </p> <p>↓↓実際にうちの社長のアメブロのフィードを読み込んで表示した例↓↓</p> <p>google.load(&ldquo;feeds&rdquo;, &ldquo;1&rdquo;);<br> function initialize() {<br> //RSSフィードの取得 var feed = new google.feeds.Feed(&ldquo;<a class="link" href="http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml%22%29;" target="_blank" rel="noopener" >http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml");</a></p> <p>//取得するフィード数 feed.setNumEntries(5)</p> <p>//実際に読む込む feed.load(function(result) {</p> <p>//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(&ldquo;feed&rdquo;);</p> <p>//変数の初期化 var list = &ldquo;&rdquo;;</p> <p>//Feedの処理 list = &lsquo;&rsquo;; for (var i = 0; i</p> <p> </p> <p>前回同様に</p> <p>RSSに「PR:」が含まれていなければ新着5件を表示しますが、</p> <p>新着5件中1件に「PR:」が含まれていた場合は</p> <p>フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので</p> <p>表示が4件になります。</p> <p>この辺りは改善が必要ですが、また今度にします。</p> <p> </p> <p>参考にしたサイト</p> <div class="link-card"> <a href="http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html" alt="http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html</span> <span class="link-card-url">http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html</span> </div> </a> </div> <p> </p> <p>2009/09/23追記</p> <p>上記を更に改造↓</p> <div class="link-card"> <a href="http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php" alt="http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php</span> <span class="link-card-url">http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php</span> </div> </a> </div> https://qwerty.work/post/2009/07/mt-searchcgiblog_ajax_json_searchjs/ Sun, 05 Jul 2009 01:03:52 +0900 https://qwerty.work/post/2009/07/mt-searchcgiblog_ajax_json_searchjs/ <p>MovableTypeの標準機能のmt-search.cgiによる検索がめちゃくちゃ遅いので、他の検索方法がないか探してみました。</p> <p>結構、この話題は多いみたいで、すぐに見つけることができました。予め書き出された検索用のjsonのテキストファイルをAJAXで検索して表示するというもので、めちゃくちゃレスポンスがいいです。</p> <div class="link-card"> <a href="http://blog.kumacchi.com/2008/07/mtsearchcgi.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://blog.kumacchi.com/2008/07/mtsearchcgi.html" alt="http://blog.kumacchi.com/2008/07/mtsearchcgi.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://blog.kumacchi.com/2008/07/mtsearchcgi.html</span> <span class="link-card-url">http://blog.kumacchi.com/2008/07/mtsearchcgi.html</span> </div> </a> </div> <h2 id="設置方法">設置方法 </h2><ul> <li>prototype.jsを読み込む</li> <li>blog_ajax_json_search.jsを読み込む</li> <li>search_data.txtを書き出すインデックステンプレートをMovabletypeに作成</li> <li>検索窓を設置</li> </ul> <h3 id="1prototypejsを読み込む">1.prototype.jsを読み込む </h3><p>方法は省きますが、jQuery.jsがあるとコンフリクト（衝突）して動かないので対策が必要です。</p> <p>私の場合、prototype.jsはCloudFlareのCDNから読み込んでいます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><p> </p> <p>Googleがよければこちら。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="2blog_ajax_json_searchjsを読む">2.blog_ajax_json_search.jsを読む </h3><p>私の場合、ローカルに保存した物を使用せず、外部から読み込んでいます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://furyu.tea-nifty.com/script/blog_ajax_json_search.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="3search_datatxtを書き出すインデックステンプレートをmovabletypeに作成">3.search_data.txtを書き出すインデックステンプレートをMovabletypeに作成 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf8&#34;?&gt;</span> </span></span><span style="display:flex;"><span>{data: [ </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;MTEntries</span> <span style="color:#a6e22e">lastn=</span><span style="color:#e6db74">&#34;3000&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>{title:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryTitle remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;&#34;,link:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryLink$&gt;&#34;,body:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryBody remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryMore remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;&#34;}, </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/MTEntries&gt;</span> </span></span><span style="display:flex;"><span>{&#34;title&#34;: &#34;&#34;, &#34;link&#34;: &#34;&#34;, &#34;body&#34;: &#34;&#34;} </span></span><span style="display:flex;"><span>] </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p><code>の部分は対象の投稿の上限を指定しています。全投稿を対象にする場合、</code>でもOKです。</p> <p>コメントも検索対象に含めたい場合は以下となります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf8&#34;?&gt;</span> </span></span><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span>data:[ </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;MTEntries</span> <span style="color:#a6e22e">all=</span><span style="color:#e6db74">&#34;1&#34;</span><span style="color:#f92672">&gt;</span>{ </span></span><span style="display:flex;"><span>title:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryTitle remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;&#34; </span></span><span style="display:flex;"><span>,link:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryLink$&gt;&#34; </span></span><span style="display:flex;"><span>,body:&#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryBody remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTEntryMore remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;<span style="color:#f92672">&lt;MTComments&gt;</span>【<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTCommentAuthor remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;】<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTCommentBody remove_html=&#34;1&#34; encode_js=&#34;1&#34;$&gt;<span style="color:#f92672">&lt;/MTComments&gt;</span>&#34; </span></span><span style="display:flex;"><span>},<span style="color:#f92672">&lt;/MTEntries&gt;</span> </span></span><span style="display:flex;"><span>{title:&#34;&#34;,link:&#34;&#34;,body:&#34;&#34;} </span></span><span style="display:flex;"><span>] </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p> </p> <h3 id="4検索窓を設置">4.検索窓を設置 </h3><p><code>/blog/search_data.txt</code>の部分は環境によって階層が違うので、ご自分の環境に合わせてインデックステンプレートから書き出された<code>search_data.txt</code>がある場所のパスに書き換えてください。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;form</span> <span style="color:#a6e22e">action=</span><span style="color:#e6db74">&#34;javascript:blogAjaxJsonSearch( &#39;/blog/search_data.txt&#39;, document.getElementById(&#39;search_box&#39;).value );&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;input</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;search_box&#34;</span> <span style="color:#a6e22e">size=</span><span style="color:#e6db74">&#34;30&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;search&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;input</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;search_button&#34;</span> <span style="color:#a6e22e">onclick=</span><span style="color:#e6db74">&#34;javascript:blogAjaxJsonSearch( </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </span></span></span><span style="display:flex;"><span><span style="color:#e6db74">&#39;/blog/search_data.txt&#39;, document.getElementById(&#39;search_box&#39;).value );&#34;</span> <span style="color:#a6e22e">value=</span><span style="color:#e6db74">&#34;サイト内検索&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/form&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;content&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span></code></pre></div><p>``の部分に検索結果が表示されます。</p> <h2 id="設置例">設置例 </h2><p>↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）</p> <p>&ndash;&gt;</p> <p> </p> <p>↑↑検索結果がここに表示されます。↑↑</p> <p>検索がびっくりするほど速いです。これを作った暴想さんに感謝です。</p> <div class="link-card"> <a href="http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html" alt="http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html</span> <span class="link-card-url">http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html</span> </div> </a> </div> <h2 id="参考ページ">参考ページ </h2> <div class="link-card"> <a href="https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html" alt="https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html</span> <span class="link-card-url">https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html</span> </div> </a> </div> <div class="link-card"> <a href="https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml" alt="https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml</span> <span class="link-card-url">https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml</span> </div> </a> </div> <div class="link-card"> <a href="http://www.55link.com/archives/2006/05/13-2213.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.55link.com/archives/2006/05/13-2213.html" alt="http://www.55link.com/archives/2006/05/13-2213.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.55link.com/archives/2006/05/13-2213.html</span> <span class="link-card-url">http://www.55link.com/archives/2006/05/13-2213.html</span> </div> </a> </div> <h2 id="jqueryで動くflexiblesearchjsというものあった">jQueryで動くflexibleSearch.jsというものあった </h2><p>prototypeを使うblog_ajax_json_search.jsよりも、jQueryで動くflexibleSearch.jsの方が使いやすそうです。また今度試してみようと思います。</p> <div class="link-card"> <a href="https://tinybeans.net/blog/2010/12/21-091505" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://tinybeans.net/blog/2010/12/21-091505" alt="https://tinybeans.net/blog/2010/12/21-091505" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://tinybeans.net/blog/2010/12/21-091505</span> <span class="link-card-url">https://tinybeans.net/blog/2010/12/21-091505</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/tinybeans/jq-plugin-flexibleSearch" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/tinybeans/jq-plugin-flexibleSearch" alt="https://github.com/tinybeans/jq-plugin-flexibleSearch" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/tinybeans/jq-plugin-flexibleSearch</span> <span class="link-card-url">https://github.com/tinybeans/jq-plugin-flexibleSearch</span> </div> </a> </div> <div class="link-card"> <a href="https://webcake.stars.ne.jp/flexible-search-mt.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webcake.stars.ne.jp/flexible-search-mt.html" alt="https://webcake.stars.ne.jp/flexible-search-mt.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webcake.stars.ne.jp/flexible-search-mt.html</span> <span class="link-card-url">https://webcake.stars.ne.jp/flexible-search-mt.html</span> </div> </a> </div> <div class="link-card"> <a href="http://www.skuare.net/2007/11/movable_typeajax.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.skuare.net/2007/11/movable_typeajax.html" alt="http://www.skuare.net/2007/11/movable_typeajax.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.skuare.net/2007/11/movable_typeajax.html</span> <span class="link-card-url">http://www.skuare.net/2007/11/movable_typeajax.html</span> </div> </a> </div> https://qwerty.work/post/2009/07/javascript_2/ Fri, 03 Jul 2009 14:16:13 +0900 https://qwerty.work/post/2009/07/javascript_2/ <p>他のサイトで見たことがあると思いますが、</p> <p>検索に使用したキーワードをハイライトで見やすくする方法です。</p> <ul> <li>Javascript「se_hilite.js」をダウンロードする</li> <li>自分のサイトに「se_hilite.js」をアップロードする</li> <li>スタイルシート（CSS)にハイライトの色を決めて一部追加をする</li> <li>ハイライト表示をしたいページにタグを挿入する</li> </ul> <p>以上のステップで完了。</p> <p>詳細は以下の参考ページを参照してください。</p> <p>参考にしたページ</p> <div class="link-card"> <a href="http://www.magicvox.net/archive/2007/04122238/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.magicvox.net/archive/2007/04122238/" alt="http://www.magicvox.net/archive/2007/04122238/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.magicvox.net/archive/2007/04122238/</span> <span class="link-card-url">http://www.magicvox.net/archive/2007/04122238/</span> </div> </a> </div> https://qwerty.work/post/2009/06/google_ajax_feed_apiprjavascript/ Tue, 30 Jun 2009 11:44:23 +0900 https://qwerty.work/post/2009/06/google_ajax_feed_apiprjavascript/ <p>先日、「<a class="link" href="http://qwerty.work/2009/06/google-ajax-apirssjavascript.html" target="_blank" rel="noopener" >Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript</a>」を使用してアメーバブログのRSSを読み込み、新着5件の一覧表示を行いましたが、アメーバブログ（アメブロ）のRSSは広告（PR:○○～）というのが自動的に入り、これがすごく邪魔で困っていました。</p> <p> </p> <p>そこで今回はif文を加えて「PR:」から始まるフィードは無視（省く）することにしました。</p> <p>スクリプト</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://www.google.com/jsapi?key=●●あなたのAPIキー●●&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">load</span>(<span style="color:#e6db74">&#34;feeds&#34;</span>, <span style="color:#e6db74">&#34;1&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">initialize</span>() </span></span><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#75715e">//RSSフィードの取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">feed</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">feeds</span>.<span style="color:#a6e22e">Feed</span>(<span style="color:#e6db74">&#34;●●読み込みたいフィードのURL&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//取得するフィード数 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">setNumEntries</span>(<span style="color:#ae81ff">5</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//実際に読む込む </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">load</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">result</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//読み込めたか判別 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">error</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//表示部分を選択 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;feed&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//変数の初期化 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Feedの処理 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">entries</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//Feedを一つ抽出 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">entry</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">feed</span>.<span style="color:#a6e22e">entries</span>[<span style="color:#a6e22e">i</span>]; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">title</span>.<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/^PR:/</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//「PR:」から始まるものがあれば何もしない </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span>{ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">div</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;li&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;a&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">createDateString</span>(<span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">publishedDate</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">link</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">entry</span>.<span style="color:#a6e22e">title</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34; (&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;)&#34;</span> ; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">appendChild</span>(document.<span style="color:#a6e22e">createTextNode</span>(<span style="color:#a6e22e">list</span>)); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">div</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">a</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">div</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//日付の表示方法を変更 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">createDateString</span>(<span style="color:#a6e22e">publishedDate</span>){ </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pdate</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(<span style="color:#a6e22e">publishedDate</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pday</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getDate</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pmonth</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getMonth</span>() <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pyear</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getFullYear</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">phour</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getHours</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pminute</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getMinutes</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">psecond</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pdate</span>.<span style="color:#a6e22e">getSeconds</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//var strdate = pyear + &#34;年&#34; + pmonth + &#34;月&#34; + pday + &#34;日&#34; + phour + &#34;時&#34; + pminute + &#34;分&#34; + psecond + &#34;秒&#34;; </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">strdate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pyear</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;-&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">pmonth</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;-&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">pday</span> ; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">strdate</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">setOnLoadCallback</span>(<span style="color:#a6e22e">initialize</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#a6e22e">表示結果表示する部分</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;feed&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#a6e22e">表示結果表示する部分</span><span style="color:#f92672">--&gt;</span> </span></span></code></pre></div><p> </p> <p>ということで、<a class="link" href="http://ameblo.jp/atsugirijason/" target="_blank" rel="noopener" >厚切りジェイソンのブログ</a>の<a class="link" href="http://feedblog.ameba.jp/rss/ameblo/atsugirijason/rss20.xml" target="_blank" rel="noopener" >フィード</a>を読み込んで「PR:」を除いた新着情報を表示してみた。</p> <p>↓↓実行結果↓↓</p> <p>google.load(&ldquo;feeds&rdquo;, &ldquo;1&rdquo;);<br> function initialize() {<br> //RSSフィードの取得 var feed = new google.feeds.Feed(&ldquo;<a class="link" href="http://feedblog.ameba.jp/rss/ameblo/atsugirijason/rss20.xml%22%29;" target="_blank" rel="noopener" >http://feedblog.ameba.jp/rss/ameblo/atsugirijason/rss20.xml");</a></p> <p>//取得するフィード数 feed.setNumEntries(5)</p> <p>//実際に読む込む feed.load(function(result) {</p> <p>//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(&ldquo;feed&rdquo;);</p> <p>//変数の初期化 var list = &ldquo;&rdquo;;</p> <p>//Feedの処理 for (var i = 0; i</p> <p> </p> <p>ただし、RSSに「PR:」が含まれていなければ新着5件を表示しますが、</p> <p>新着5件中1件に「PR:」が含まれていた場合、フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので、表示が4件になってしまいます。</p> <p>それを補うスクリプトは今度チャレンジします。</p> <p> </p> <h3 id="20090923追記">2009/09/23追記 </h3><p>上記を更に改造↓</p> <p>**Google AJAX Feed APIで最新の記事一覧を表示する。</p> <p>**<a class="link" href="http://qwerty.work/2009/09/google-ajax-feed-api-1.php" target="_blank" rel="noopener" >http://qwerty.work/2009/09/google-ajax-feed-api-1.php</a></p> https://qwerty.work/post/2009/06/google_ajax_apirssjavascript/ Thu, 18 Jun 2009 19:28:01 +0900 https://qwerty.work/post/2009/06/google_ajax_apirssjavascript/ <p>フィード（RSS2.0）を読み込むスクリプト</p> <p>google.load(&ldquo;feeds&rdquo;, &ldquo;1&rdquo;);   function initialize() {    //RSSフィードの取得  var feed = new google.feeds.Feed(&quot;●●読み込みたいRSS2.0のURL●●&quot;);       //取得するフィード数  feed.setNumEntries(5)      //実際に読む込む  feed.load(function(result)  {        //読み込めたか判別   if (!result.error)   {    //表示部分を選択    var container = document.getElementById(&ldquo;feed&rdquo;);        //変数の初期化    var list = &ldquo;&rdquo;;        //Feedの処理    for (var i = 0; i</p> <p> </p> <p> </p> <p> </p> <p>ということで、うちの社長ブログのフィードを読んでみた。</p> <p>↓↓結果↓↓</p> <p>google.load(&ldquo;feeds&rdquo;, &ldquo;1&rdquo;);<br> function initialize() {<br> var feed = new google.feeds.Feed(&ldquo;<a class="link" href="http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml%22%29;" target="_blank" rel="noopener" >http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml");</a><br> feed.setNumEntries(5)<br> feed.load(function(result) {<br> if (!result.error) {<br> var container = document.getElementById(&ldquo;feed&rdquo;); var list = &ldquo;&rdquo;;<br> for (var i = 0; i</p> <p> </p> <p> </p> <p>2009/06/30追記</p> <p>アメーバブログ（アメブロ）等のフィードでPRなどが入ってしまい、</p> <p>省略して表示をさせたい場合は「<strong><a class="link" href="http://qwerty.work/2009/06/google-ajax-feed-apiprjavascript.html" target="_blank" rel="noopener" >Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript</a></strong>」をご参照ください。</p> <p> </p> <p>2009/09/23追記</p> <p>上記を更に改造↓</p> <p>**Google AJAX Feed APIで最新の記事一覧を表示する。 **<a class="link" href="http://qwerty.work/2009/09/google-ajax-feed-api-1.html" target="_blank" rel="noopener" >http://qwerty.work/2009/09/google-ajax-feed-api-1.html</a></p> https://qwerty.work/post/2009/06/google_ajax_feed_api/ Mon, 15 Jun 2009 00:29:43 +0900 https://qwerty.work/post/2009/06/google_ajax_feed_api/ <p><a class="link" href="http://blogsearch.google.co.jp/" target="_blank" rel="noopener" >Googleブログ検索</a>でこのサイト<a class="link" href="https://qwerty.work/" target="_blank" rel="noopener" >https://qwerty.work</a>を検索します。</p> <h4 id="実際に検索">↓実際に検索↓ </h4><p><a class="link" href="http://blogsearch.google.co.jp/blogsearch?hl=ja&amp;ie=UTF-8&amp;q=qwerty.work&amp;lr=lang_ja" target="_blank" rel="noopener" >http://blogsearch.google.co.jp/blogsearch?hl=ja&amp;ie=UTF-8&amp;q=qwerty.work&amp;lr=lang_ja</a></p> <h4 id="その検索結果のxml">↓その検索結果のXML↓ </h4><p><a class="link" href="http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&amp;q=link:qwerty.work&amp;lr=lang_ja&amp;ie=utf-8&amp;num=10&amp;output=rss" target="_blank" rel="noopener" >http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&amp;q=link:qwerty.work&amp;lr=lang_ja&amp;ie=utf-8&amp;num=10&amp;output=rss</a> そして、そのXMLを読み込みリストとして表示するスクリプト。</p> <p>残念ながら現時点では被リンクが少なすぎて１件しかない&hellip;。</p> <h4 id="実行結果">↓実行結果↓ </h4><p>// (&rsquo;+entry[&lsquo;dc:publisher&rsquo;]+&rsquo;)&rsquo;; html += &lsquo;&rsquo;+entry[&lsquo;dc:date&rsquo;].substring(0,10)+&rsquo;&rsquo;; html += &lsquo;\n&rsquo;; } html += ' \n&rsquo;; document.getElementById(&ldquo;linkbacks&rdquo;).innerHTML = html; } }); } google.setOnLoadCallback(initialize);</p> <p>// ]]&gt;</p> <p>loading</p> <h4 id="スクリプト">スクリプト </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://www.google.com/jsapi?key=●●あなたのAPIキー●●&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt; &lt;br&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">load</span>(<span style="color:#e6db74">&#34;feeds&#34;</span>, <span style="color:#e6db74">&#34;1&#34;</span>); <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">initialize</span>() {<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">url</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;●●検索対象のURL●●&#34;</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">num</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">100</span>;<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#75715e">// Get Linkbacks from Google Blog Search&lt;br /&gt; var feed = new google.feeds.Feed(&#34;http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&amp;q=link%3A&#34;+encodeURIComponent(url)+&#34;&amp;output=rss&amp;num=&#34;+num+&#34;&amp;lr=lang_ja&amp;ie=utf-8&#34;);&lt;br /&gt; feed.setNumEntries(num);&lt;br /&gt; feed.setResultFormat(google.feeds.Feed.XML_FORMAT);&lt;br /&gt; feed.load(function(result) {&lt;br /&gt; if (!result.error) {&lt;br /&gt; var items = result.xmlDocument.getElementsByTagName(&#39;item&#39;);&lt;br /&gt; var item = null;&lt;br /&gt; var entry = null;&lt;br /&gt; var html = &#39;&lt;ul id=&#34;linkback_list&#34;&gt;\n&#39;;&lt;br /&gt; for (var i = 0; i &lt; items.length; i++) {&lt;br /&gt; entry = [];&lt;br /&gt; // make simple array from item nodes&lt;br /&gt; // You can access values like &#34;entry[&#39;key&#39;]&#34;&lt;br /&gt; for ( var j=0; j&lt;items[i].childNodes.length; j++ ) {&lt;br /&gt; item = items[i].childNodes[j];&lt;br /&gt; entry[item.nodeName] = (item.textContent)?item.textContent:item.text;&lt;br /&gt; }&lt;br /&gt; html += &#39;&lt;li class=&#34;linkback_entries&#34;&gt;&#39;;&lt;br /&gt; html += &#39;&lt;a class=&#34;linkback_links&#34; href=&#34;&#39;+entry[&#39;link&#39;]+&#39;&#34; rel&gt;&#39;+entry[&#39;title&#39;]+&#39;&lt;/a&gt;&#39;;&lt;br /&gt; html += &#39;&lt;span class=&#34;linkback_blogs&#34;&gt;(&#39;+entry[&#39;dc:publisher&#39;]+&#39;)&lt;/sapn&gt;&#39;;&lt;br /&gt; html += &#39;&lt;span class=&#34;linkback_dates&#34;&gt;&#39;+entry[&#39;dc:date&#39;].substring(0,10)+&#39;&lt;/sapn&gt;&#39;;&lt;br /&gt; html += &#39;&lt;/li&gt;\n&#39;;&lt;br /&gt; }&lt;br /&gt; html += &#39;&lt;/ul&gt;\n&#39;;&lt;br /&gt; document.getElementById(&#34;linkbacks&#34;).innerHTML = html;&lt;br /&gt; }&lt;br /&gt; });&lt;br /&gt;}&lt;br /&gt;google.setOnLoadCallback(initialize);&lt;br /&gt; &lt;/script&gt; &lt;br /&gt;&lt;!--結果を表示する部分--&gt;&lt;br /&gt;&lt;hr size=&#34;1&#34; /&gt;&lt;br /&gt;&lt;div id=&#34;linkbacks&#34;&gt;loading&lt;/div&gt; &lt;br /&gt;&lt;hr size=&#34;1&#34; /&gt;&lt;br /&gt;&lt;!--結果を表示する部分--&gt; </span></span></span></code></pre></div><h4 id="参考にしたページ">参考にしたページ </h4> <div class="link-card"> <a href="http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html" alt="http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html</span> <span class="link-card-url">http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html</span> </div> </a> </div> https://qwerty.work/post/2009/05/javascripthtml/ Tue, 19 May 2009 13:23:28 +0900 https://qwerty.work/post/2009/05/javascripthtml/ <p>変数配列に代入されたHTMLソースを</p> <p>タイマーで一定時間ごとにランダムに表示するスクリプト。</p> <p>MozShotと併せて、サイトのサムネイルをランダムに表示する例。</p> <p>表示された画像をクリックすると指定のURLにジャンプできます。</p> <p>変数配列にはタグごと入れるので、特にアフィリエイトのバナー表示に便利です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">src</span>[<span style="color:#ae81ff">0</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;a href=&#34;http://www.google.com&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;https://image.thum.io/get/width/300/crop/200/http://www.google.com&#34; alt=&#34;google&#34; /&gt;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">src</span>[<span style="color:#ae81ff">1</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;a href=&#34;http://www.yahoo.co.jp&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;https://image.thum.io/get/width/300/crop/200/http://www.yahoo.co.jp&#34; alt=&#34;yahoo&#34; /&gt;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">src</span>[<span style="color:#ae81ff">2</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;a href=&#34;http://jp.msn.com&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;https://image.thum.io/get/width/300/crop/200/http://jp.msn.com/&#34; alt=&#34;msn&#34; /&gt;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">onload</span><span style="color:#f92672">=</span><span style="color:#a6e22e">chX</span>; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">chX</span>(){ </span></span><span style="display:flex;"><span><span style="color:#a6e22e">i</span><span style="color:#f92672">=</span>Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>()<span style="color:#f92672">*</span><span style="color:#a6e22e">src</span>.<span style="color:#a6e22e">length</span>); </span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;chimg&#34;</span>).<span style="color:#a6e22e">innerHTML</span><span style="color:#f92672">=</span><span style="color:#a6e22e">src</span>[<span style="color:#a6e22e">i</span>]; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">setTimeout</span>(<span style="color:#e6db74">&#34;chX()&#34;</span>,<span style="color:#ae81ff">1000</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;chimg&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span></code></pre></div><p>↓↓実際に表示したところ</p> <p>//</p> https://qwerty.work/post/2009/05/javascript_1/ Mon, 18 May 2009 21:57:17 +0900 https://qwerty.work/post/2009/05/javascript_1/ <p>変数配列に格納された文字「ルパン三世」を</p> <p>数秒ごとのタイマーによって表示を変更するスクリプト。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">0</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;ル&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">1</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;パ&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">2</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;ン&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">3</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;三&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">4</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;世&#39;</span>; </span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">onload</span><span style="color:#f92672">=</span><span style="color:#a6e22e">chT</span>; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">chT</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span>Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>()<span style="color:#f92672">*</span><span style="color:#a6e22e">tag</span>.<span style="color:#a6e22e">length</span>); </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;chTxt&#34;</span>).<span style="color:#a6e22e">innerHTML</span><span style="color:#f92672">=</span><span style="color:#a6e22e">tag</span>[<span style="color:#a6e22e">i</span>]; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#e6db74">&#34;chT()&#34;</span>,<span style="color:#ae81ff">1000</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;chTxt&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span></code></pre></div><p>// ↓↓実際に表示してみたところ</p> <p>この方法で、アフィリエイトのタグやバナーの画像、写真などに応用ができます。</p> <p>「<a class="link" href="http://qwerty.work/2009/05/javascripthtml.html" target="_blank" rel="noopener" >Javascriptで数秒ごとにHTMLソースをランダムに変更。</a>」をご参照ください。</p> https://qwerty.work/post/2009/05/javascript/ Sun, 17 May 2009 18:07:15 +0900 https://qwerty.work/post/2009/05/javascript/ <p>ページにアクセスするごとに、ランダムに選択されたアフィリエイトのバナーを表示するスクリプト。</p> <p>Javascriptは初心者ですが、とりあえずは表示に成功。</p> <h2 id="bannerjsを以下の内容でルートに作成">「banner.js」を以下の内容でルートに作成。 </h2><p>（例：http://www.example.com/banner.js）</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">tag</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">0</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;a href=&#34;http://www.example.com/&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;http://www.example.com/banner1.jpg&#34; alt=&#34;バナー1&#34; border=&#34;0&#34; /&gt;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">1</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;&lt;a href=&#34;http://www.example.com/&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;http://www.example.com/banner2.jpg&#34; alt=&#34;バナー2&#34; border=&#34;0&#34; /&gt;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">tag</span>[<span style="color:#ae81ff">2</span>]<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;上記同様にバナーのタグを入れる&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#a6e22e">i</span>　<span style="color:#f92672">=</span>　Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>()<span style="color:#f92672">*</span><span style="color:#a6e22e">tag</span>.<span style="color:#a6e22e">length</span>); </span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">write</span>(<span style="color:#a6e22e">tag</span>[<span style="color:#a6e22e">i</span>]); </span></span></code></pre></div><p> </p> <h2 id="htmlファイルのバナーを表示したい箇所に以下のコードを記述">HTMLファイルのバナーを表示したい箇所に以下のコードを記述。 </h2><p>（例えば、http://www.example.com/index.htmlの場合）</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://www.example.com/banner.js&#34;</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p> </p> <p>こでだけでOK。</p> <p>今後の課題は、一定時間ごとに表示したバナーをランダムに変更できるようにしたいと思います。</p> <p> </p> <p>PHPで同じことを行う方法は以下を参照</p> <p><a class="link" href="http://qwerty.work/2009/05/php.html" target="_blank" rel="noopener" >http://qwerty.work/2009/05/php.html</a></p>