https://qwerty.work/tags/js/ Recent content in JS 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/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/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/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/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/chromium-lazyload/ Thu, 14 May 2020 22:45:45 +0900 https://qwerty.work/post/2020/05/chromium-lazyload/ <h2 id="loadinglazyの追加で遅延読み込みができる">loading=&ldquo;lazy&quot;の追加で遅延読み込みができる？！ </h2><p>WEBページの表示を高速するための手段としてよく使われる遅延表示（Lazyload）ですが、以下のサイトの情報によると、最近のGoogle Chromeや新しいEdgeなどのChromium系のブラウザならJavascriptを使わなくても<code>やYouTube動画の埋め込みコードに使われている</code>に<code>loading=&quot;lazy&quot;</code>を追加するだけ遅延表示ができるらいです。Firefoxも同じ使い方で遅延表示ができるみたいです。</p> <div class="link-card"> <a href="https://magnets.jp/web_design/11505/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://magnets.jp/web_design/11505/" alt="https://magnets.jp/web_design/11505/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://magnets.jp/web_design/11505/</span> <span class="link-card-url">https://magnets.jp/web_design/11505/</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/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>