https://qwerty.work/categories/jquery/ Recent content in JQuery on qwerty.work Hugo -- gohugo.io ja-JP Mon, 31 Oct 2022 19:35:21 +0900 https://qwerty.work/post/2022/10/jquery-accordion-menu/ Mon, 31 Oct 2022 19:35:21 +0900 https://qwerty.work/post/2022/10/jquery-accordion-menu/ <h2 id="サンプル">サンプル </h2><p>タイトルをクリックするとアコーデオンでメニューが開閉する割とシンプルなソースのサンプル。</p> <p>.menu dl dt { cursor: pointer; } .menu dl dt, .menu dl dd { border-bottom: #CCC 1px solid; position: relative; } .menu dl dd { border: none; display: none; margin: 0 !important; } .menu dl.open dt::after { content: &ldquo;ー&rdquo;; } .menu dl dt::after { content: &ldquo;＋&rdquo;; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }</p> <p>$(&quot;.menu dt&quot;).on(&ldquo;click&rdquo;,function(){ $(this).parent().toggleClass(&ldquo;open&rdquo;); $(this).next().slideToggle(); });</p> <pre><code>説明① 内容① 説明② 内容② 説明③ 内容③ </code></pre> <h3 id="html">HTML </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;nav</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;menu&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dl&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dt&gt;</span>説明①<span style="color:#f92672">&lt;/dt&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dd&gt;</span>内容①<span style="color:#f92672">&lt;/dd&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/dl&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dl&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dt&gt;</span>説明②<span style="color:#f92672">&lt;/dt&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dd&gt;</span>内容②<span style="color:#f92672">&lt;/dd&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/dl&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dl&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dt&gt;</span>説明③<span style="color:#f92672">&lt;/dt&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;dd&gt;</span>内容③<span style="color:#f92672">&lt;/dd&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/dl&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/nav&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h3 id="css">CSS </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span> <span style="color:#f92672">dt</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span> <span style="color:#f92672">dt</span><span style="color:#f92672">,</span> .<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span> <span style="color:#f92672">dd</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-bottom</span>: <span style="color:#ae81ff">#CCC</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span> <span style="color:#f92672">dd</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span>.<span style="color:#a6e22e">open</span> <span style="color:#f92672">dt</span>::<span style="color:#a6e22e">after</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#34;ー&#34;</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">menu</span> <span style="color:#f92672">dl</span> <span style="color:#f92672">dt</span>::<span style="color:#a6e22e">after</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#34;＋&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translateY(<span style="color:#ae81ff">-50</span><span style="color:#66d9ef">%</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="javascriptjquery">Javascript(jQuery) </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>(<span style="color:#e6db74">&#34;.menu dt&#34;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#34;click&#34;</span>,<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">parent</span>().<span style="color:#a6e22e">toggleClass</span>(<span style="color:#e6db74">&#34;open&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">next</span>().<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="bootstrapで実現したいとき">Bootstrapで実現したいとき </h2><p>jQueryを使わず、Bootstrapでアコーデオンメニューを作成することも可能です。</p> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/components/accordion/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/components/accordion/" alt="https://getbootstrap.jp/docs/5.0/components/accordion/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/components/accordion/</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/components/accordion/</span> </div> </a> </div> <h2 id="vuejsで実現したいとき">Vue.jsで実現したいとき </h2> <div class="link-card"> <a href="https://mykii.blog/nuxt-accordion-slide-toggle/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://mykii.blog/nuxt-accordion-slide-toggle/" alt="https://mykii.blog/nuxt-accordion-slide-toggle/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://mykii.blog/nuxt-accordion-slide-toggle/</span> <span class="link-card-url">https://mykii.blog/nuxt-accordion-slide-toggle/</span> </div> </a> </div> <div class="link-card"> <a href="https://777-webdesigner.net/portfolio2/538/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://777-webdesigner.net/portfolio2/538/" alt="https://777-webdesigner.net/portfolio2/538/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://777-webdesigner.net/portfolio2/538/</span> <span class="link-card-url">https://777-webdesigner.net/portfolio2/538/</span> </div> </a> </div> <div class="link-card"> <a href="https://pote-chil.com/vue-js_accordion/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://pote-chil.com/vue-js_accordion/" alt="https://pote-chil.com/vue-js_accordion/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://pote-chil.com/vue-js_accordion/</span> <span class="link-card-url">https://pote-chil.com/vue-js_accordion/</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/jquery-selector-method/ Tue, 27 Sep 2022 09:58:37 +0900 https://qwerty.work/post/2022/09/jquery-selector-method/ <h2 id="メソッド一覧">メソッド一覧 </h2><p>指定した要素から親要素、子要素、兄弟要素を探したり、要素を検索したりする場合に使います。</p> <pre><code> コード 選択される要素 $('#box').parent() id=&quot;box&quot;の直接の親要素 $('#box').children() id=&quot;box&quot;直下の子要素 $('#box').find('a') id=&quot;box&quot;の子を辿って見つかったすべてのa $('#box').closest('div') id=&quot;box&quot;の親を辿って最初に見つかったdiv $('#box').next() id=&quot;box&quot;と同じ階層にある次の要素 $('#box').prev() id=&quot;box&quot;と同じ階層にある1つ前の要素 $('#box').siblings('.item') id=&quot;box&quot;と同じ階層でitemクラスを持つすべての要素 </code></pre> <h2 id="その他参考">その他参考 </h2><p>フィルタリングなど、他にももっと便利なメソッドがあり、以下のページが参考になります。</p> <div class="link-card"> <a href="https://www.jquerystudy.info/reference/traversing/index.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jquerystudy.info/reference/traversing/index.html" alt="https://www.jquerystudy.info/reference/traversing/index.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jquerystudy.info/reference/traversing/index.html</span> <span class="link-card-url">https://www.jquerystudy.info/reference/traversing/index.html</span> </div> </a> </div> <div class="link-card"> <a href="https://api.jquery.com/category/traversing/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://api.jquery.com/category/traversing/" alt="https://api.jquery.com/category/traversing/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://api.jquery.com/category/traversing/</span> <span class="link-card-url">https://api.jquery.com/category/traversing/</span> </div> </a> </div> https://qwerty.work/post/2022/09/js-for-each-while/ Fri, 23 Sep 2022 17:11:58 +0900 https://qwerty.work/post/2022/09/js-for-each-while/ <h2 id="いろいろある方法">いろいろある方法 </h2><p>Javascriptで配列の中身を繰り返し取り出す方法がいろいろあるのでメモ。</p> <h3 id="for-ofを使う方法">for-ofを使う方法 </h3><p>for-ofは配列のループに適していて、似た構文のfor-inはオブジェクトのループに適している。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">name</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">arr</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">name</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of</span> </div> </a> </div> <h3 id="foreach-を使う方法">forEach を使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">element</span> =&gt; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">element</span>)); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">element</span> =&gt; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">element</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>)); </span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getName</span>(<span style="color:#a6e22e">element</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">element</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">element</span><span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">getName</span>); </span></span></code></pre></div> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" alt="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</span> </div> </a> </div> <h3 id="forループを使う方法">forループを使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="whileループを使う方法">whileループを使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">while</span>(<span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">length</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">arr</span>[<span style="color:#a6e22e">i</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">さん`</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="jqueryのeach-を使う方法">jQueryの$.each を使う方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;ゴジラ&#39;</span>,<span style="color:#e6db74">&#39;ジョーズ&#39;</span>,<span style="color:#e6db74">&#39;ダースベイダー&#39;</span>,<span style="color:#e6db74">&#39;アイアンマン&#39;</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span>(<span style="color:#a6e22e">arr</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">index</span>, <span style="color:#a6e22e">value</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">value</span>); </span></span><span style="display:flex;"><span>}) </span></span></code></pre></div> <div class="link-card"> <a href="https://www.bold.ne.jp/engineer-club/jquery-each" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bold.ne.jp/engineer-club/jquery-each" alt="https://www.bold.ne.jp/engineer-club/jquery-each" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bold.ne.jp/engineer-club/jquery-each</span> <span class="link-card-url">https://www.bold.ne.jp/engineer-club/jquery-each</span> </div> </a> </div> https://qwerty.work/post/2022/09/jquery-target-blank/ Wed, 14 Sep 2022 11:04:31 +0900 https://qwerty.work/post/2022/09/jquery-target-blank/ <h2 id="別ウィンドウで開く開かないで異なる方法">別ウィンドウで開く・開かないで異なる方法 </h2><p>グローバルメニューに設置したメガメニューのリンクを開く際、Javascriptで<code>window.location.href</code>を実行しないとリンクが開かないことがありました。ただ、<code>window.location.href</code>だと、<code>target=&quot;_blank&quot;</code>があるリンクの場合、別ウィンドウが開かず、同じウィンドウで開いてしまいます。調べてみたところ、<code>target=&quot;_blank&quot;</code>があるリンクの場合は<code>window.open</code>を使わないといけないことがわかりました。</p> <h3 id="ソース例">ソース例 </h3><h3 id="同ウィンドで開くとき">同ウィンドで開くとき </h3><p><code>window.location.href</code>を使用する。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;https://example.com&#39;</span>; </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h3 id="別ウィンドで開くとき">別ウィンドで開くとき </h3><p><code>window.open</code>を使用する。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">open</span>(<span style="color:#e6db74">&#39;https://example.com&#39;</span>, <span style="color:#e6db74">&#39;_blank&#39;</span>); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="target_blankを判別して実行する例">target=&quot;_blank&quot;を判別して実行する例 </h2><p>このソースで解決できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu_list a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">link</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;href&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">linktarget</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;target&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// target=&#34;_blank&#34;の有無を判別 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">linktarget</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;_blank&#39;</span> ) { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">link</span>, <span style="color:#a6e22e">linktarget</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">link</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">blur</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/08/jquery-click-event-log/ Tue, 09 Aug 2022 08:43:36 +0900 https://qwerty.work/post/2022/08/jquery-click-event-log/ <h2 id="クリックイベントの内容が知りたい">クリックイベントの内容が知りたい </h2><p>jQueryでクリックやタップで思い通りの動作にならなかった場合、イベントがhoverなのか、clickやmouseoverなのか知りたいとき、このコマンドで取得できるみたいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">_data</span>(<span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;セレクタ&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>), <span style="color:#e6db74">&#34;events&#34;</span>) </span></span></code></pre></div><p>**console.log();**で出力して確認したいときに便利です。例えば、<code>li.menu_list</code>をクリックしたときのイベントを確認したいときは以下のようになります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">_data</span>(<span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;li.menu_list&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>), <span style="color:#e6db74">&#34;events&#34;</span>)); </span></span></code></pre></div><p>以下のページを参考にさせてもらいました。</p> <div class="link-card"> <a href="https://qiita.com/dz_/items/e5da8ed692720a69126c" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/dz_/items/e5da8ed692720a69126c" alt="https://qiita.com/dz_/items/e5da8ed692720a69126c" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/dz_/items/e5da8ed692720a69126c</span> <span class="link-card-url">https://qiita.com/dz_/items/e5da8ed692720a69126c</span> </div> </a> </div> <h2 id="chromeのデベロッパーツールでも確認できる">Chromeのデベロッパーツールでも確認できる </h2><p>コンソールのログ出力をしなくても、Chromeであればデベロッパーツールでもできるみたいです。</p> <div class="link-card"> <a href="https://qiita.com/zaru/items/b7732ebad9b732518359" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/zaru/items/b7732ebad9b732518359" alt="https://qiita.com/zaru/items/b7732ebad9b732518359" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/zaru/items/b7732ebad9b732518359</span> <span class="link-card-url">https://qiita.com/zaru/items/b7732ebad9b732518359</span> </div> </a> </div> https://qwerty.work/post/2022/08/jquery-hover-and-touch/ Mon, 08 Aug 2022 21:46:20 +0900 https://qwerty.work/post/2022/08/jquery-hover-and-touch/ <p>書きなぐりですが、メモ。</p> <h2 id="pcのホバーとiosのタッチは問題なし">PCのホバーとiOSのタッチは問題なし </h2><p>あるサイト制作でアコーディオンメニューを作成し、ホバーとタッチの両方に対応させたく、jQueryでメニュー開閉のスクリプトを書きました。PCの場合はマウスをメニュータイトルにかざすと開閉でき、iPhoneやiOSではタップで開閉できました。ところが&hellip;。</p> <h2 id="windowsタブレットで問題発生">Windowsタブレットで問題発生 </h2><p>クリックしかできないデバイスと、タップしかできないデバイスならこれで良かったのですが&hellip;。タップもクリックもできるデバイスとなると挙動が変わりました。マウスホバーでの開閉はいいのですが、途中でタップに切り替えると、2度タップしないとメニューが開かないようになりました。閉じるのは1回でもOKでした。</p> <h3 id="問題のあるソース例">問題のあるソース例 </h3><p>メニューのタイトル部分<code>- タイトル</code>で、開閉して表示・非表示となる部分が<code>.menu_contents</code>だった場合の例。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//PCの場合はマウスオーバーで開閉 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;li.menu_list&#39;</span>).<span style="color:#a6e22e">not</span>(<span style="color:#e6db74">&#39;.active&#39;</span>).<span style="color:#a6e22e">hover</span>(<span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</span>(); </span></span><span style="display:flex;"><span>}, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">removeClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</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">clickEventType</span> <span style="color:#f92672">=</span> ((window.<span style="color:#a6e22e">ontouchstart</span> <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>) <span style="color:#f92672">?</span> <span style="color:#e6db74">&#39;click&#39;</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;touchend&#39;</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;li.menu_list&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#a6e22e">clickEventType</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 状態が active の場合は閉じる </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">hasClass</span>(<span style="color:#e6db74">&#39;.active&#39;</span>)){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">removeClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 状態が activeなしの場合は開く </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">hasClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="hoverとtoutchの切替えがうまくいっていないのか">hoverとtoutchの切替えがうまくいっていないのか？ </h2><p>仕組みがよくわからないのですが、タップで閉じた後に同じメニューを開くのは何度やってもタップ1回で繰り返し開閉できる。しかし、隣りのメニューをタップすると、2度タップしないと開かない&hellip;。タップした時点で要素を捕まえきれていない感じがします。タップからマウスホバーは問題ありませんでした。</p> <p>想像ですが、2回タップしないといけないのは、指がタッチパネルから離れていてもホバー状態になっていて、1回目のタップでは以前タップした場所をからhoverを解放し、2回目のタップで現在のボタンをクリックしているのではないかと思います。しかし、初回表示時でも2回タップしないとメニューが開きませんでした。つまり、ページ表示時やタップ時にホバーを解除する命令を加えれればうまくいくような気がします。</p> <p>↓このページを見てそう思いました。</p> <div class="link-card"> <a href="https://solutions.vaio.com/1759" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://solutions.vaio.com/1759" alt="https://solutions.vaio.com/1759" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://solutions.vaio.com/1759</span> <span class="link-card-url">https://solutions.vaio.com/1759</span> </div> </a> </div> <h2 id="模索した解決策の候補">模索した解決策の候補 </h2><p>クリックとタップのみでの開閉はPCでもタブレットでもうまくいくため、**『hoverの開閉を諦める』**これしかないかもしれません。どれも試していませんがメモ。</p> <h4 id="hoverをmouseentermouseleaveに変えてみる">hoverをmouseenter、mouseleaveに変えてみる </h4><p>これはダメでした。<strong>click</strong>や<strong>toutchstart</strong>のように<code>on('mouseenter', function(){～</code>のように書けるので、これならイケるかも？と思いましたが、挙動は同じでした。</p> <div class="link-card"> <a href="https://daiblog923.com/jquery-eventtrigger/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://daiblog923.com/jquery-eventtrigger/" alt="https://daiblog923.com/jquery-eventtrigger/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://daiblog923.com/jquery-eventtrigger/</span> <span class="link-card-url">https://daiblog923.com/jquery-eventtrigger/</span> </div> </a> </div> <h4 id="発火方法を細かく分けてみる">発火方法を細かく分けてみる </h4><p>これもダメでした。PCのマウスホバーのみ動作やiOSでのタッチのみの動作はOKでしたが、Windowsタブレットでは2回タップしないとメニューが開きませんでした。</p> <div class="link-card"> <a href="https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/" alt="https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/</span> <span class="link-card-url">https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/</span> </div> </a> </div> <h4 id="cssからhoverのルールを削除して無効化する例">CSSからhoverのルールを削除して無効化する例 </h4><p>タップされたら、一時的にhoverを無効化。<code>ontouchstart</code>でhoverを無効化するという方法がありましたが、hoverを復活したいときはどうするんだろう？</p> <div class="link-card"> <a href="https://techmemo.biz/javascript/touchdevice-hover-disable/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://techmemo.biz/javascript/touchdevice-hover-disable/" alt="https://techmemo.biz/javascript/touchdevice-hover-disable/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://techmemo.biz/javascript/touchdevice-hover-disable/</span> <span class="link-card-url">https://techmemo.biz/javascript/touchdevice-hover-disable/</span> </div> </a> </div> <div class="link-card"> <a href="http://cmz.wp.xdomain.jp/archives/1029" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://cmz.wp.xdomain.jp/archives/1029" alt="http://cmz.wp.xdomain.jp/archives/1029" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://cmz.wp.xdomain.jp/archives/1029</span> <span class="link-card-url">http://cmz.wp.xdomain.jp/archives/1029</span> </div> </a> </div> <p>単純にこれは、hoverの機能を無効化するというより、CSSにある:hoverのルールを削除するだけみたいです。</p> <h4 id="疑似的にhoverを追加削除する方法">疑似的に:hoverを追加削除する方法 </h4> <div class="link-card"> <a href="https://urashita.com/archives/17532" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://urashita.com/archives/17532" alt="https://urashita.com/archives/17532" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://urashita.com/archives/17532</span> <span class="link-card-url">https://urashita.com/archives/17532</span> </div> </a> </div> <div class="link-card"> <a href="https://worklog.be/archives/2860" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://worklog.be/archives/2860" alt="https://worklog.be/archives/2860" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://worklog.be/archives/2860</span> <span class="link-card-url">https://worklog.be/archives/2860</span> </div> </a> </div> <div class="link-card"> <a href="https://tutorialmore.com/questions-2478488.htm" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://tutorialmore.com/questions-2478488.htm" alt="https://tutorialmore.com/questions-2478488.htm" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://tutorialmore.com/questions-2478488.htm</span> <span class="link-card-url">https://tutorialmore.com/questions-2478488.htm</span> </div> </a> </div> <h4 id="指定した要素にjavascript-で-ontouchstart-属性を追加する方法">指定した要素にJavaScript で ontouchstart 属性を追加する方法 </h4> <div class="link-card"> <a href="https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html" alt="https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html</span> <span class="link-card-url">https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html</span> </div> </a> </div> <h4 id="onclick-属性を付与する方法">onclick 属性を付与する方法 </h4><p>ontouchstartと同じかな。</p> <div class="link-card"> <a href="https://analogstd.com/pc/iphone-hover-click-faq/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://analogstd.com/pc/iphone-hover-click-faq/" alt="https://analogstd.com/pc/iphone-hover-click-faq/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://analogstd.com/pc/iphone-hover-click-faq/</span> <span class="link-card-url">https://analogstd.com/pc/iphone-hover-click-faq/</span> </div> </a> </div> <h4 id="mouseenterの替わりにtoutchenterを使用してみる">mouseenterの替わりにtoutchenterを使用してみる </h4> <div class="link-card"> <a href="https://shanabrian.com/web/javascript/event-handler.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://shanabrian.com/web/javascript/event-handler.php" alt="https://shanabrian.com/web/javascript/event-handler.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://shanabrian.com/web/javascript/event-handler.php</span> <span class="link-card-url">https://shanabrian.com/web/javascript/event-handler.php</span> </div> </a> </div> <h4 id="初回イベント時のみ取得できない状況を解消する">初回イベント時のみ取得できない状況を解消する？ </h4><p>これに近い挙動のように感じます。しかし、これはAndoroidアプリ制作上での話みたいで、コマンドがJavascriptではない感じ。以下のページに関連するページのリンクがあるので、進んで行くと『初回の１タップ処理が、何か別の処理に搾取されていると推測できる。』と記載があった。まさにこの挙動だと感じていますが、これをどうやって調べるかが課題。</p> <div class="link-card"> <a href="https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd" alt="https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd</span> <span class="link-card-url">https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd</span> </div> </a> </div> <div class="link-card"> <a href="http://latache-program.blogspot.com/2017/01/android_8.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://latache-program.blogspot.com/2017/01/android_8.html" alt="http://latache-program.blogspot.com/2017/01/android_8.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://latache-program.blogspot.com/2017/01/android_8.html</span> <span class="link-card-url">http://latache-program.blogspot.com/2017/01/android_8.html</span> </div> </a> </div> <h4 id="イベントハンドラの指定方法を変えてみる">イベントハンドラの指定方法を変えてみる </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;li.menu_list&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;toutchstart&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span></code></pre></div><p>ではなく、</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;document&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;toutchstart&#39;</span>, <span style="color:#e6db74">&#39;li.menu_list&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span></code></pre></div><p>とする方法。</p> <p>後日、試してみたところ、<strong>これが当たりでした！</strong></p> <div class="link-card"> <a href="https://pisuke-code.com/jquery-solution-for-event-unfired/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://pisuke-code.com/jquery-solution-for-event-unfired/" alt="https://pisuke-code.com/jquery-solution-for-event-unfired/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://pisuke-code.com/jquery-solution-for-event-unfired/</span> <span class="link-card-url">https://pisuke-code.com/jquery-solution-for-event-unfired/</span> </div> </a> </div> <h4 id="click--touch--pointer-イベントを完全に制御する">click / touch / pointer イベントを完全に制御する </h4><p>『タッチディスプレイを搭載したPC』について言及があったので、これが案外有力そうです。Windowsタブレットで試したところ、タップやクリックの度に取得したイベントが異なっていたので良さそうでした。しかし、私のスキルが追い付いていないため、うまくfunctionを組み立てることができず、使いこなせませんでした。使いこなせる方ならこれが一番いいような気がします。</p> <div class="link-card"> <a href="https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667" alt="https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667</span> <span class="link-card-url">https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667</span> </div> </a> </div> <h4 id="clickとtouchを交互にsettimeoutで入れ替える">clickとtouchを交互にsettimeoutで入れ替える </h4><p>なんか邪道だけどメモ。</p> <div class="link-card"> <a href="https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/" alt="https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/</span> <span class="link-card-url">https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/</span> </div> </a> </div> <h2 id="これ以外で役に立ちそうなついでの対策">これ以外で役に立ちそうなついでの対策 </h2><h3 id="スクロールとタッチイベントの衝突回避">スクロールとタッチイベントの衝突回避 </h3> <div class="link-card"> <a href="https://alaki.co.jp/blog/?p=2546" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://alaki.co.jp/blog/?p=2546" alt="https://alaki.co.jp/blog/?p=2546" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://alaki.co.jp/blog/?p=2546</span> <span class="link-card-url">https://alaki.co.jp/blog/?p=2546</span> </div> </a> </div> <h3 id="何のイベントがどの要素で発生しているかを調べるのに良さそうなコマンド">何のイベントがどの要素で発生しているかを調べるのに良さそうなコマンド </h3> <div class="link-card"> <a href="https://garafu.blogspot.com/2013/09/javascript-webkit.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://garafu.blogspot.com/2013/09/javascript-webkit.html" alt="https://garafu.blogspot.com/2013/09/javascript-webkit.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://garafu.blogspot.com/2013/09/javascript-webkit.html</span> <span class="link-card-url">https://garafu.blogspot.com/2013/09/javascript-webkit.html</span> </div> </a> </div> <h2 id="解決後のソース例">解決後のソース例 </h2><p>結局、何とか解決できました。実際にテストしたソースとは異なりますが、解決に至ったソースを簡単にまとめました。もっと効率よく書きたいところですが、とりあえずメモ。</p> <p>これでPCのマウスホバーによる開閉、Windowsタブレットでのマウスホバーとタップによる開閉、スマホのタッチによる開閉を同時に実装できました。不思議なのはクリックイベントの指定を<code>on('click mouseend touchend'</code>としたことです。この3つのイベントを同時に入れることで何故か理想通りの動きになりました。ここに<code>pointerstart</code>などの<strong>pointer〇〇</strong>を入れると不具合が起こりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//マウスカーソルをかざすと開 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseenter&#39;</span>, <span style="color:#e6db74">&#39;li.menu_list&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// class に active がない場合は開く </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">hasClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</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">addClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</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>(document).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseleave&#39;</span>, <span style="color:#e6db74">&#39;li.menu_list&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// class に active がある場合は開く </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">hasClass</span>(<span style="color:#e6db74">&#39;open&#39;</span>)) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</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>(document).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click mouseend touchend&#39;</span>, <span style="color:#e6db74">&#39;li.menu_list&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// class に active がある場合は閉じる </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">hasClass</span>(<span style="color:#e6db74">&#39;.active&#39;</span>)){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">removeClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// class に active がない場合は開く </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">hasClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</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">addClass</span>(<span style="color:#e6db74">&#39;active&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/08/jquery-link-pause/ Sat, 06 Aug 2022 23:19:46 +0900 https://qwerty.work/post/2022/08/jquery-link-pause/ <h2 id="メガメニューを閉じるときのタップで裏側のリンクが開いてしまう">メガメニューを閉じるときのタップで裏側のリンクが開いてしまう </h2><p>アコーディオンやメガメニューに設定したリンクや閉じるボタンが、コンテンツのリンクと重なっていて、スマホやタブレットでメニューを閉じるときにiPhoneやiPadのSafari上でタップすると、メニューを閉じた後に下のリンクが開いてしまいました。これをどうにか解消するために、良い方法がないかな？と探してみました。</p> <p><code>setTimeout</code>を使って一定時間、マウスポインターを無効にすることで解決できる方法があったのでメモ。</p> <div class="link-card"> <a href="https://dezanari.com/jquery-disable-click-certain-time/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dezanari.com/jquery-disable-click-certain-time/" alt="https://dezanari.com/jquery-disable-click-certain-time/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dezanari.com/jquery-disable-click-certain-time/</span> <span class="link-card-url">https://dezanari.com/jquery-disable-click-certain-time/</span> </div> </a> </div> <h3 id="解決できたソース例">解決できたソース例 </h3><p>上記にあったサンプルでは、スライダーでの利用を想定していますが、私の場合、メガメニューの裏側にあるスライダー（slick-silder）のリンクがボタン裏にあり、それが開いてしまうことを想定しています。「閉じる」ボタンが押されたら、CSSの<code>pointer-events:none;</code>を対象の要素に追加して、スライダーのリンク（aタグ）をクリックできないよう、マウスポインターを2秒間無効にして元に戻すという内容です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.button&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;slick-slide a&#39;</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;pointer-events&#39;</span>, <span style="color:#e6db74">&#39;none&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> (<span style="color:#e6db74">&#39;slick-slide a&#39;</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;pointer-events&#39;</span>, <span style="color:#e6db74">&#39;&#39;</span>); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">2000</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><p>これでうまくいきました。待機時間は0.25～0.5秒（250～500」）くらいでも大丈夫でした。</p> https://qwerty.work/post/2022/07/jquery-menu-link-trouble-shooting/ Wed, 13 Jul 2022 17:27:21 +0900 https://qwerty.work/post/2022/07/jquery-menu-link-trouble-shooting/ <h2 id="メニュー内のリンクをクリックしても反応しない">メニュー内のリンクをクリックしても反応しない </h2><p>先日、jQueryを使用して↓メガメニューを作成しました。</p> <div class="link-card"> <a href="https://qwerty.work/blog/2022/07/jquery-megamenu.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qwerty.work/blog/2022/07/jquery-megamenu.php" alt="https://qwerty.work/blog/2022/07/jquery-megamenu.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qwerty.work/blog/2022/07/jquery-megamenu.php</span> <span class="link-card-url">https://qwerty.work/blog/2022/07/jquery-megamenu.php</span> </div> </a> </div> <p>しかし、メニューを開閉はいいのですが、メニューにあるリンクをクリックしてもアンカーリンクで設定したURLのページに遷移しませんでした。どうもクリックの動作をjQueryで捕まえていて邪魔しているような感じがします。</p> <h2 id="windowlocationhrefで解決">window.location.hrefで解決 </h2><p>以下のページに解決方法がありました。</p> <div class="link-card"> <a href="https://designsupply-web.com/media/programming/2995/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://designsupply-web.com/media/programming/2995/" alt="https://designsupply-web.com/media/programming/2995/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://designsupply-web.com/media/programming/2995/</span> <span class="link-card-url">https://designsupply-web.com/media/programming/2995/</span> </div> </a> </div> <h3 id="原因">原因 </h3><p>原因は<code>event.preventDefault();</code>でした。メガメニュー開閉の二重クリックを防ぐために使っていたこのコードがリンクを無効にしていたようです。</p> <p>例えば以下のようなコード。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;a&#34;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>,<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">event</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">preventDefault</span>(); </span></span><span style="display:flex;"><span> }); </span></span></code></pre></div><p>このような場合、<code>window.location.href = $(this).attr('href');</code>を加えて、JSからジャンプするようにしたら解決できました。</p> <h4 id="解決したソース例">解決したソース例 </h4><p>メガメニュー（.menu_contents）内にあるアンカーリンク（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:#a6e22e">$</span>(<span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">clickEventType</span> <span style="color:#f92672">=</span> ((window.<span style="color:#a6e22e">ontouchstart</span> <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>) <span style="color:#f92672">?</span> <span style="color:#e6db74">&#39;click&#39;</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;touchstart&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents a&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#a6e22e">clickEventType</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;href&#39;</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/07/jqwery-get-element-name/ Tue, 12 Jul 2022 22:22:39 +0900 https://qwerty.work/post/2022/07/jqwery-get-element-name/ <p>jQueryでclickで要素を指定してもうまく動かないことが多々あります。そんなときに、ページで内でクリックされた要素、ID、Classを知りたいときに使えるコードをメモ。</p> <h2 id="サンプルコード">サンプルコード </h2><h3 id="クリックされた場所を取得して表示">クリックされた場所を取得して表示 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;selected&#39;</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">/p&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">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;one&#34;</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;a&#34;</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">/button&gt;</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">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;two&#34;</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;b&#34;</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">/a&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:#a6e22e">$</span>(document).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">event</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#selected&#34;</span>).<span style="color:#a6e22e">html</span>(<span style="color:#e6db74">&#34;clicked: 要素名=&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">nodeName</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;&amp;nbsp;ID=&#34;</span><span style="color:#f92672">+</span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">id</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;&amp;nbsp;Class=&#34;</span> <span style="color:#f92672">+</span><span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">className</span>); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h4 id="参考ページ">参考ページ </h4> <div class="link-card"> <a href="https://js.studio-kingdom.com/jquery/events/event_target" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://js.studio-kingdom.com/jquery/events/event_target" alt="https://js.studio-kingdom.com/jquery/events/event_target" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://js.studio-kingdom.com/jquery/events/event_target</span> <span class="link-card-url">https://js.studio-kingdom.com/jquery/events/event_target</span> </div> </a> </div> https://qwerty.work/post/2022/07/jquery-megamenu/ Wed, 06 Jul 2022 09:27:53 +0900 https://qwerty.work/post/2022/07/jquery-megamenu/ <p>jQueryで実現するメガメニューはたくさんありますが、挙動が合わない、コードが複雑、実装の難易度が高いということがあります。そこで、簡単でいいものを見つけましたのでメモ。</p> <h2 id="少ないコードでできるサンプルコード">少ないコードでできるサンプルコード </h2><h3 id="参考サイト">参考サイト </h3><p>以下のページにあるサンプルコードを試したところ、あっさり実現できました。</p> <div class="link-card"> <a href="https://www.flatflag.nir87.com/megamenu-2106" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.flatflag.nir87.com/megamenu-2106" alt="https://www.flatflag.nir87.com/megamenu-2106" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.flatflag.nir87.com/megamenu-2106</span> <span class="link-card-url">https://www.flatflag.nir87.com/megamenu-2106</span> </div> </a> </div> <h4 id="試しに作ってみたテストページ">試しに作ってみたテストページ </h4><p><a class="link" href="https://qwerty.work/test/test-megamenu.php" target="_blank" rel="noopener" >https://qwerty.work/test/test-megamenu.php</a></p> <h2 id="マウスオーバーとタッチクリックの両対応したいとき">マウスオーバーとタッチ（クリック）の両対応したいとき </h2><p>パソコン用のサイトはマウスホバーで開いてくれるのはいいのですが、スマホやタブレットなど、タッチパネルの場合はタッチまたはクリックで開くようにしなければなりません。私は以下の方法で両対応しました。</p> <h3 id="jsのソース例">JSのソース例 </h3><p>メニューが開いている状態と閉じている状態を<code>flag</code>で判別してjQueryによる開閉動作を行うようにしています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">flag</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;close&#39;</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:#e6db74">&#39;#menu li&#39;</span>).<span style="color:#a6e22e">hover</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">flag</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;open&#39;</span>; </span></span><span style="display:flex;"><span> }, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideUp</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">flag</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;close&#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">clickEventType</span><span style="color:#f92672">=</span>((window.<span style="color:#a6e22e">ontouchstart</span><span style="color:#f92672">!==</span><span style="color:#66d9ef">null</span>)<span style="color:#f92672">?</span><span style="color:#e6db74">&#39;click&#39;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;touchstart&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu li&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#a6e22e">clickEventType</span>,<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">flag</span> <span style="color:#f92672">==</span><span style="color:#e6db74">&#39;close&#39;</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">flag</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;open&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideDown</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">preventDefault</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">flag</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;close&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">stop</span>().<span style="color:#a6e22e">slideUp</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">preventDefault</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><p>クリックで開閉する部分については、以下の書き方でも動きました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_list a&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">preventDefault</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// hide all span </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:#a6e22e">parent</span>().<span style="color:#a6e22e">find</span>(<span style="color:#e6db74">&#39;.menu_contents&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.menu_list .menu_contents&#39;</span>).<span style="color:#a6e22e">not</span>(<span style="color:#a6e22e">$this</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// here is what I want to do </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">toggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span></code></pre></div><h3 id="補足">補足 </h3><h4 id="clickとtouchstartイベントが二重に実行されないようにする">clickとtouchstartイベントが二重に実行されないようにする </h4><p><code>click</code>または<code>touchstart</code>どちらかのイベントで動作させたいとき、以下のように指定することがあります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu li&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click touchstart&#39;</span>,<span style="color:#66d9ef">function</span>(){ </span></span></code></pre></div><p>場合によっては1クリックしかしていないに、<code>click</code>と<code>touchstart</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">clickEventType</span><span style="color:#f92672">=</span>((window.<span style="color:#a6e22e">ontouchstart</span><span style="color:#f92672">!==</span><span style="color:#66d9ef">null</span>)<span style="color:#f92672">?</span><span style="color:#e6db74">&#39;click&#39;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;touchstart&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#menu li&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#a6e22e">clickEventType</span>,<span style="color:#66d9ef">function</span>() { </span></span></code></pre></div><p>この方法は以下のページを参考にしました。</p> <div class="link-card"> <a href="https://sakura.monte-verita.biz/3409" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://sakura.monte-verita.biz/3409" alt="https://sakura.monte-verita.biz/3409" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://sakura.monte-verita.biz/3409</span> <span class="link-card-url">https://sakura.monte-verita.biz/3409</span> </div> </a> </div> <h4 id="eventpreventdefaultで一時停止させる">event.preventDefault();で一時停止させる </h4><p>ワンクリックや1回のタッチしかしていないのに、どうしてもイベントが多重発生してしまう場合に、以下のコードで一時停止させることができました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">preventDefault</span>(); </span></span></code></pre></div><p>または</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">eevent</span>.<span style="color:#a6e22e">stopPropagation</span>(); </span></span></code></pre></div><p>この方法は以下のページを参考にしました。</p> <div class="link-card"> <a href="https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/" alt="https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/</span> <span class="link-card-url">https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/</span> </div> </a> </div> <div class="link-card"> <a href="https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html" alt="https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html</span> <span class="link-card-url">https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html</span> </div> </a> </div> <h2 id="その他のメガメニュー">その他のメガメニュー </h2><h3 id="jquery-menu-aim">jQuery-menu-aim </h3><p>多段で表示できるもの。</p> <div class="link-card"> <a href="https://github.com/kamens/jQuery-menu-aim" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/kamens/jQuery-menu-aim" alt="https://github.com/kamens/jQuery-menu-aim" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/kamens/jQuery-menu-aim</span> <span class="link-card-url">https://github.com/kamens/jQuery-menu-aim</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/nnipsii/items/c707dd721f502b0a732b" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/nnipsii/items/c707dd721f502b0a732b" alt="https://qiita.com/nnipsii/items/c707dd721f502b0a732b" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/nnipsii/items/c707dd721f502b0a732b</span> <span class="link-card-url">https://qiita.com/nnipsii/items/c707dd721f502b0a732b</span> </div> </a> </div> <div class="link-card"> <a href="http://jsfiddle.net/BGSyS/3/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jsfiddle.net/BGSyS/3/" alt="http://jsfiddle.net/BGSyS/3/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jsfiddle.net/BGSyS/3/</span> <span class="link-card-url">http://jsfiddle.net/BGSyS/3/</span> </div> </a> </div> <div class="link-card"> <a href="https://coder-memo.com/drop_menu/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coder-memo.com/drop_menu/" alt="https://coder-memo.com/drop_menu/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coder-memo.com/drop_menu/</span> <span class="link-card-url">https://coder-memo.com/drop_menu/</span> </div> </a> </div> https://qwerty.work/post/2022/07/scrolltop-button-js/ Fri, 01 Jul 2022 13:13:15 +0900 https://qwerty.work/post/2022/07/scrolltop-button-js/ <h2 id="パージ右下にトップへ戻るボタンを表示したい">パージ右下にトップへ戻るボタンを表示したい </h2><p>レスポンシブ対応のサイトやランディングページ（LP）を制作するとページが長くなります。そんなときにページ右下に「ページトップに戻る」ボタンを設置したいのですが、ファーストビューから表示はしたくありません。</p> <p>そんなときに見つけたの以下のページ。こちらでは、ある程度ページを下にスクロールしたらボタンを表示するようにでできるサンプルがありました。jQueryとCSSを使用する方法です。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://yuyauver98.me/scroll-show-hide-btn/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://yuyauver98.me/scroll-show-hide-btn/" alt="https://yuyauver98.me/scroll-show-hide-btn/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://yuyauver98.me/scroll-show-hide-btn/</span> <span class="link-card-url">https://yuyauver98.me/scroll-show-hide-btn/</span> </div> </a> </div> <h2 id="単純にコピペではjsが動かなかった">単純にコピペではJSが動かなかった </h2><p>上記のソースをそのままコピペ下だけでは動きませんでした。特に動作を制御するJSがうまく動きませんでした。Javascriptは外部から読み込むようにしたのですが、その際に<code>$(document).ready(function() {</code>～<code> });</code>で囲ってやれば解決できました。</p> <h3 id="js部分のサンプル">JS部分のサンプル </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//下から表示させる要素を指定 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">$pagetop</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.ScrollTop&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>( <span style="color:#e6db74">&#39;scroll&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//スクロール位置を取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ( <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">scrollTop</span>() <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">500</span> ) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pagetop</span>.<span style="color:#a6e22e">removeClass</span>(<span style="color:#e6db74">&#39;isActive&#39;</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$pagetop</span>.<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;isActive&#39;</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//ページ内リンクスムーススクロール </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;a[href^=&#34;#&#34;]&#39;</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#34;href&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">target</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">href</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">href</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#39;html&#39;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">href</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">position</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;html, body&#34;</span>).<span style="color:#a6e22e">animate</span>({<span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">position</span>}, <span style="color:#ae81ff">550</span>, <span style="color:#e6db74">&#34;swing&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/ Sat, 04 Dec 2021 22:14:08 +0900 https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/ <h2 id="アンカーポイントがずれてしまう">アンカーポイントがずれてしまう </h2><p>ハッシュタグを使用してアンカーの位置にジャンプしようとしたとき、LazyloadやSlick.jsなどのSliderを使っているせいか、画像表示ページが伸縮するために、意図する位置で表示されないことが起こりました。</p> <p>具体的には画像スライダーのあるページに``でお問合せフォームを設置していて、<code>action</code>には自らのページにハッシュタグを付けており、<code>submit</code>で送信後に戻ってきたときにスクロール位置がずれました。しかも、パソコンとスマホ（iPhone）で停まる位置が異なり、ブラウザを変えてもの同じ挙動でした。そこで、以下のソースで解決できました。jQueryが必要です。</p> <h2 id="解決できたソース">解決できたソース </h2><p>URLに<code>#contact</code>などハッシュタグが含まれていた場合、ページ上部からアンカーまでの位置を取得し、数秒後に画面が伸縮した後に再度、アンカーのポジションを確認して比較します。もし、比較して変化があればその位置に画面をスクロールさせます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//Lazyloadなどでアンカーの高さが変化する場合の対応 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span><span style="color:#66d9ef">try</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">deleyTime</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">600</span>; <span style="color:#75715e">//アンカー位置を再確認するまでの待機時間（ミリ秒） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">adjust</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">50</span>; <span style="color:#75715e">//高さの微調整 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//URLに#タグがあるか確認 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">getHash</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">$this</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">hash</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグは指定されていません。&#39;</span>); </span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">hash</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//アンカーの位置確認（1回目） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">firstPositionY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">getHash</span>()).<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;最初に取得した &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の高さは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">firstPositionY</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//アンカーの位置確認（2回目） </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">secondPositionY</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">$this</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">$</span>(<span style="color:#a6e22e">getHash</span>()).<span style="color:#a6e22e">offset</span>().<span style="color:#a6e22e">top</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//数秒後にアンカーの位置が変わっていたら正しい位置にスクロール </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">deleyTime</span><span style="color:#f92672">/</span><span style="color:#ae81ff">1000</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#39;秒後の &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の高さは &#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; です。&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">firstPositionY</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">secondPositionY</span>()){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;html,body&#39;</span>).<span style="color:#a6e22e">animate</span>({ <span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#a6e22e">adjust</span> }, <span style="color:#e6db74">&#39;fast&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の現在位置が変化しているため正しい位置にスクロールしました。&#39;</span>) </span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">getHash</span>()<span style="color:#f92672">+</span><span style="color:#e6db74">&#39; の現在位置に変化はありません。&#39;</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ,<span style="color:#a6e22e">deleyTime</span>); </span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">catch</span> (<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;アンカータグが見当たらないため処理を終了しました。&#39;</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p> </p> <p>以下の部分の最後にある<code>'fast'</code>を<code>'slow'</code>や<code>'nomal'</code>にするとスクロールのスピードが変わります。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;html,body&#39;</span>).<span style="color:#a6e22e">animate</span>({ <span style="color:#a6e22e">scrollTop</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">secondPositionY</span>()<span style="color:#f92672">+</span><span style="color:#a6e22e">adjust</span> }, <span style="color:#e6db74">&#39;fast&#39;</span>); </span></span></code></pre></div><p> </p> <h2 id="コンソールでログを確認">コンソールでログを確認 </h2><p>上記にソースにある<code>console.log</code>で指定した文字列はブラウザのコンソール画面に出力され、処理の経過状態を確認することができます。以下の画面はEdgeですが、Chromiumベースのブラウザなら、F12を押すことでこの画面を出すことができます。</p> <h4 id="urlにが含まれていなかった時">URLに#～が含まれていなかった時 </h4><p><img alt="Chromium系ブラウザのコンソール" class="gallery-image" data-flex-basis="607px" data-flex-grow="253" height="232" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/images/No-00.jpg" width="587"></p> <h4 id="urlにが含まれていた時">URLに#～が含まれていた時 </h4><p><img alt="Chromium系ブラウザのコンソール" class="gallery-image" data-flex-basis="607px" data-flex-grow="253" height="232" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/js-jquery-scroll-adjust/images/No-01.jpg" width="587"></p> <h2 id="参考サイトメモ">参考サイトメモ </h2><p>旨く行きませんでしたが、以下のページにあるソースも気になりました。</p> <div class="link-card"> <a href="https://fe-designer.com/article/lazyloadandsmoothscroll/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fe-designer.com/article/lazyloadandsmoothscroll/" alt="https://fe-designer.com/article/lazyloadandsmoothscroll/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fe-designer.com/article/lazyloadandsmoothscroll/</span> <span class="link-card-url">https://fe-designer.com/article/lazyloadandsmoothscroll/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/cferdinandi/smooth-scroll" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/cferdinandi/smooth-scroll" alt="https://github.com/cferdinandi/smooth-scroll" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/cferdinandi/smooth-scroll</span> <span class="link-card-url">https://github.com/cferdinandi/smooth-scroll</span> </div> </a> </div> https://qwerty.work/post/2021/12/js-jquery-ripples/ Thu, 02 Dec 2021 22:57:55 +0900 https://qwerty.work/post/2021/12/js-jquery-ripples/ <p>div.ripples-1, div.ripples-2, div.ripples-3 { background-image: url(&rsquo;/blog/images/noimage-448.png&rsquo;); width: 448px; height: 299px; }</p> <h2 id="画面上に水滴をたらしたようなエフェクト">画面上に水滴をたらしたようなエフェクト </h2><p>ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。</p> <h4 id="公式ページ">公式ページ </h4> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div> <h4 id="基本ソース例">基本ソース例 </h4><p><a class="link" href="https://code.jquery.com/" target="_blank" rel="noopener" >jQuery</a>と<a class="link" href="https://github.com/sirxemic/jquery.ripples/tree/e90bd54ee5d2b23d04a208ad1248456c42abb289/dist" target="_blank" rel="noopener" >jquery.ripples.js</a>を読み込んで、以下の設定を加えるだけで設置完了です。任意の<code>#id</code>や<code>.class</code>などの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面があるかのように波を打ちます。</p> <p>※imgに直接<code>class</code>や<code>id</code>を指定したら動作しませんでした。以下のデモはスタイルシートで<code>background-image</code>に画像を指定しています。</p> <p>↓画像にマウスカーソルを載せてみてください。</p> <p>$(&lsquo;div.ripples-1&rsquo;).ripples();</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-1 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;div.ripples-1&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span> $(&#39;div.ripples-1&#39;).ripples(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h4 id="カスタマイズした例">カスタマイズした例 </h4><p>以下は波紋の大きさや解像度などを指定した例です。</p> <p>↓画像にマウスカーソルを載せてみてください。</p> <p>$(&lsquo;div.ripples-2&rsquo;).ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, });</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-2 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;div.ripples-2&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span>$(&#39;div.ripples-2&#39;).ripples({ </span></span><span style="display:flex;"><span> resolution: 512, //解像度 </span></span><span style="display:flex;"><span> dropRadius: 20, //ドロップサイズ </span></span><span style="display:flex;"><span> perturbance: 0.04, //屈折量 </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h3 id="パラメータの説明">パラメータの説明 </h3><pre><code> 名前 タイプ デフォルト 説明 imageUrl string null **背景画像の指定**。背景として使用する画像のURL。存在しない場合、プラグインはCSSの`background-image`を代わりに使用しようとします。Data-URIも受け入れられます。 dropRadius float 20 **ドロップサイズ。**キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ（ピクセル単位）。 perturbance float 0.03 **屈折量。**基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。 resolution integer 256 **解像度。**レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。 interactive bool true マウスのクリックとマウスの動きで効果をトリガーするかどうか。 crossOrigin string &quot;&quot; 影響を受ける画像に使用するcrossOrigin属性。詳細については、[MDNを](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)参照してください。 </code></pre> <p>（参考ページ：<a class="link" href="https://github.com/sirxemic/jquery.ripples#options" target="_blank" rel="noopener" >https://github.com/sirxemic/jquery.ripples#options</a>）</p> <h4 id="自動で実行する例">自動で実行する例 </h4><p>公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;body&#39;</span>).<span style="color:#a6e22e">ripples</span>(<span style="color:#e6db74">&#34;drop&#34;</span>, <span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">radius</span>, <span style="color:#a6e22e">strength</span>) </span></span></code></pre></div><h4 id="以下が具体的なソース例です">以下が具体的なソース例です。 </h4><p> </p> <p>なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。</p> <p><a class="link" href="https://qwerty.work/test/test-jquery-ripples.php" >デモページ</a></p> <p>$(document).ready(function() {</p> <pre><code> $('.ripples-3').ripples({ resolution: 128, dropRadius: 10, perturbance: 0.04, interactive: false }); // Automatic drops setInterval(function() { var $el = $('.ripples-3'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 20; var strength = 0.04 + Math.random() * 0.04; $el.ripples('drop', x, y, dropRadius, strength); }, 400); </code></pre> <p>});</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style&gt;</span> </span></span><span style="display:flex;"><span>div.ripples-3 { </span></span><span style="display:flex;"><span> background-image: url(&#39;/blog/images/noimage-448.png&#39;); </span></span><span style="display:flex;"><span> width: 448px; </span></span><span style="display:flex;"><span> height: 299px; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;ripples-3&#34;</span><span style="color:#f92672">&gt;&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;js/jquery.ripples-min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span>$(document).ready(function() { </span></span><span style="display:flex;"><span> $(&#39;div.ripples-3&#39;).ripples({ </span></span><span style="display:flex;"><span> resolution: 128, </span></span><span style="display:flex;"><span> dropRadius: 10, </span></span><span style="display:flex;"><span> perturbance: 0.04, </span></span><span style="display:flex;"><span> interactive: false //マウスに反応しないようにする </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>// Automatic drops </span></span><span style="display:flex;"><span>setInterval(function() { </span></span><span style="display:flex;"><span> var $el = $(&#39;div.ripples-3&#39;); </span></span><span style="display:flex;"><span> var x = Math.random() * $el.outerWidth(); </span></span><span style="display:flex;"><span> var y = Math.random() * $el.outerHeight(); </span></span><span style="display:flex;"><span> var dropRadius = 20; </span></span><span style="display:flex;"><span> var strength = 0.04 + Math.random() * 0.04; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $el.ripples(&#39;drop&#39;, x, y, dropRadius, strength); </span></span><span style="display:flex;"><span> }, 400); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><h2 id="参考ページ">参考ページ </h2><h4 id="git">Git </h4> <div class="link-card"> <a href="https://github.com/sirxemic/jquery.ripples" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/sirxemic/jquery.ripples" alt="https://github.com/sirxemic/jquery.ripples" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/sirxemic/jquery.ripples</span> <span class="link-card-url">https://github.com/sirxemic/jquery.ripples</span> </div> </a> </div> <h4 id="参考ソース">参考ソース </h4> <div class="link-card"> <a href="https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" alt="https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html</span> <span class="link-card-url">https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html</span> </div> </a> </div> https://qwerty.work/post/2021/11/change-video-javascript/ Thu, 25 Nov 2021 09:43:10 +0900 https://qwerty.work/post/2021/11/change-video-javascript/ <h2 id="スマホとパソコンで動画を切り替えたい">スマホとパソコンで動画を切り替えたい </h2><h3 id="動画の再生開始に影響するファイルサイズ">動画の再生開始に影響するファイルサイズ </h3><p>WEBページの背景に動画を使用するサイトを制作する際に気になるのが、埋め込んだ動画のファイルサイズ。</p> <p><strong>再生時間は15秒から30秒で、ファイルサイズは10MBを基準と考えています。</strong></p> <p><strong>『ファイル容量を小さくしながらも高画質にしたい』<strong>と思いますが、10MB前後を目指すとビットレートを</strong>1Mbps～2Mbps</strong>まで落とさなければなりません。ここまで落とすと当然画質は悪くなるですが、背景イメージとしてはギリギリ許容できる画質で、再生時間が30秒前後で何とか<strong>10MB前後</strong>に収めることができます。</p> <p>パソコンサイトは通信環境が整っている事が多いので問題ないと思うのですが、スマホなど回線速度が遅いとそうはいきません。たかが10MBでも動画の読込に時間がかかり、自動再生による再生開始が遅くなります。</p> <p>スマートフォンやタブレットは画面サイズも小さいので、<a class="link" href="https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options" target="_blank" rel="noopener" >Bootstrap5</a> のグリッドシステムのブレークポイントを基準にして動画の解像度を考えると、横幅576ピクセル～768ピクセル、大きくても992ピクセルに対応できる解像度のものがあればよく、**480p（854×480 SD画質）<strong>または</strong>360p（640×360）**の動画を用意すればいいかと思います。この解像度で、<strong>ビットレート500kbps</strong>まで下げると、<strong>約3MB</strong>くらいまでファイルサイズが落ちます。画質は当然悪くなりますが、スマホの画面での背景動画としてはギリギリ観るに耐えれる範囲かと思います。</p> <h2 id="パソコンとスマホ用に用意した2つの動画ファイル">パソコンとスマホ用に用意した2つの動画ファイル </h2><p>「<a class="link" href="https://qwerty.work/blog/2021/11/responsive-size.php" target="_blank" rel="noopener" >レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値</a>」を参考に、制作中のレスポンシブサイトのブレークポイントを**sm（768px）**としたため、これを境に以下の解像度の異なる動画を用意しました。</p> <ul> <li>パソコン用 &hellip; フルHD（1920×1080） MP4・WebM 約10MB</li> <li>スマーフォン用 &hellip; 480p（854×480 ） MP4・WebM 約３MB</li> </ul> <p>この二つをレスポンシブサイトにvideoタグで動画を埋め込み、アクセスしてきた画面サイズに応じて再生する方法がないかと探してみると、jQueryを使って切り替える方法がありました。</p> <h4 id="jqueryで画面サイズによって切り替える参考">jQueryで画面サイズによって切り替える参考 </h4> <div class="link-card"> <a href="https://shu-naka-blog.com/jquery/responsive_switching/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://shu-naka-blog.com/jquery/responsive_switching/" alt="https://shu-naka-blog.com/jquery/responsive_switching/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://shu-naka-blog.com/jquery/responsive_switching/</span> <span class="link-card-url">https://shu-naka-blog.com/jquery/responsive_switching/</span> </div> </a> </div> <h4 id="ソース例">ソース例 </h4><p>上記ページのソースを参考に、以下のソースでアクセスしてきたデバイスの画面サイズが<strong>768ピクセル</strong>を境に再生する動画を切り替えることができました。<code>class=&quot;switch&quot;</code>を付ければ、複数ので埋め込んだ動画があっても対応できそうです。</p> <ul> <li>動画のファイル名は最後尾を<code>_sp</code>と<code>_pc</code>にします。</li> <li>タグ内に<code>class=&quot;switch&quot;</code>を設定します。</li> <li>この例は動画の遅延読込に <a class="link" href="https://github.com/ApoorvSaxena/lozad.js/" target="_blank" rel="noopener" >Lozad.js</a> を使用しているので、ソース指定に<code>data-src</code>としていますので、Javascript内の<code>src</code>を<code>data-src</code>に変更しています。</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;video</span> <span style="color:#960050;background-color:#1e0010">playsinline</span> <span style="color:#960050;background-color:#1e0010">autoplay</span> <span style="color:#960050;background-color:#1e0010">loop</span> <span style="color:#960050;background-color:#1e0010">muted</span> <span style="color:#a6e22e">preload=</span><span style="color:#e6db74">&#34;auto&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;lozad&#34;</span> <span style="color:#a6e22e">poster=</span><span style="color:#e6db74">&#34;img/poster.png&#34;</span><span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/webm&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_sp.webm&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_sp.mp4&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/webm&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_pc.webm&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;source</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">data-src=</span><span style="color:#e6db74">&#34;video_pc.mp4&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;switch&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/video&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.0.min.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>$(function() { </span></span><span style="display:flex;"><span> // 切り替える対象にclass属性。 </span></span><span style="display:flex;"><span> var $elem = $(&#39;.switch&#39;); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // 切り替えの対象のsrc属性の末尾の文字列。 </span></span><span style="display:flex;"><span> var sp = &#39;_sp.&#39;; </span></span><span style="display:flex;"><span> var pc = &#39;_pc.&#39;; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // 画像を切り替えるウィンドウサイズ。 </span></span><span style="display:flex;"><span> var replaceWidth = 768; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> function imageSwitch() { </span></span><span style="display:flex;"><span> // ウィンドウサイズを取得する。 </span></span><span style="display:flex;"><span> var windowWidth = parseInt($(window).width()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // ページ内にあるすべての`.switch`に適応される。 </span></span><span style="display:flex;"><span> $elem.each(function() { </span></span><span style="display:flex;"><span> var $this = $(this); </span></span><span style="display:flex;"><span> // ウィンドウサイズが768px以上であれば_spを_pcに置換する。 </span></span><span style="display:flex;"><span> if(windowWidth &gt;= replaceWidth) { </span></span><span style="display:flex;"><span> $this.attr(&#39;data-src&#39;, $this.attr(&#39;data-src&#39;).replace(sp, pc)); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> // ウィンドウサイズが768px未満であれば_pcを_spに置換する。 </span></span><span style="display:flex;"><span> } else { </span></span><span style="display:flex;"><span> $this.attr(&#39;data-src&#39;, $this.attr(&#39;data-src&#39;).replace(pc, sp)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> imageSwitch(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span><span style="display:flex;"><span>var resizeTimer; </span></span><span style="display:flex;"><span>$(window).on(&#39;resize&#39;, function() { </span></span><span style="display:flex;"><span> clearTimeout(resizeTimer); </span></span><span style="display:flex;"><span> resizeTimer = setTimeout(function() { </span></span><span style="display:flex;"><span> imageSwitch(); </span></span><span style="display:flex;"><span> }, 200); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><h2 id="studioで使いたいとき">STUDIOで使いたいとき </h2><p>ノーコードでホームページが制作できる<a class="link" href="https://studio.design/ja" target="_blank" rel="noopener" >STUDIO</a>（有料プラン）で制作したサイトのキービジュアルに背景動画を埋め込みたいときのJavascriptソース例。ChatGPTに手伝ってもらったソース。動画の遅延表示させるLozad.jsも併用しています。</p> <h3 id="googleタグマネージャーで使うときのソース例">Googleタグマネージャーで使うときのソース例 </h3><p>Google Tag Manager経由で以下のソースを使用するとうまくいきました。動画ファイルをSTUDIOにアップロードできないので、読み込みたい動画ファイル（MP4とWEBM）は外部のレンタルサーバーにアップロードしてあるものを使用します。STUDIOのBOX要素のIDに<code>mv</code>を設定し、Javascriptで<code>VIDEO</code>タグを挿入し、デバイスの画面幅に合わせてPC用とスマホ用を切り替えます。</p> <p>Googleタグマネージャーのトリガーは「ページビュー」と「履歴の変更」の二つを設定してください。「ページビュー」のみだと、ブラウザの「戻る」ボタンで他のページから飛んできたときに発火しないので、その対策として「履歴の変更」が必要です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.7.1.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">observer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lozad</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">observer</span>.<span style="color:#a6e22e">observe</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画がすでに追加されているかを確認する関数 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">isVideoAdded</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;video&#34;</span>) <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画を追加する処理 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">addVideo</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// すでに動画が追加されている場合は処理を中断 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isVideoAdded</span>()) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画要素の作成 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">video</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;video&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">muted</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">autoplay</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">loop</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;playsinline&#34;</span>, <span style="color:#e6db74">&#34;&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;lozad&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 最初のソース (WEBM) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source1</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 2つ目のソース (MP4) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source2</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画にソースを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source1</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source2</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画をDOMに追加 </span></span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">video</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画の再生処理とエラーキャッチ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">play</span>().<span style="color:#66d9ef">catch</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">&#34;Video play failed:&#34;</span>, <span style="color:#a6e22e">error</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページビューまたは履歴変更時に呼び出す関数 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">addVideo</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// PCとスマホで動画ファイルを切り替える </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;switch&#34; を持つ &lt;source&gt; タグを対象にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$sources</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.switch&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 切り替えの対象のsrc属性の末尾の文字列。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sp</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_sp.&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pc</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_pc.&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画を切り替えるウィンドウサイズ。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">replaceWidth</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">970</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">videoSwitch</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズを取得する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">width</span>()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ページ内にあるすべての`.switch`（&lt;source&gt;タグ）に適応される。 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$sources</span>.<span style="color:#a6e22e">each</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$this</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>); <span style="color:#75715e">// &lt;source&gt;要素 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px以上であれば_spを_pcに置換し、キャッシュバスティングを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">replaceWidth</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">sp</span>, <span style="color:#a6e22e">pc</span>)); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px未満であれば_pcを_spに置換し、キャッシュバスティングを追加 </span></span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">pc</span>, <span style="color:#a6e22e">sp</span>)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// &lt;video&gt;要素全体を再ロードして、srcの変更を反映 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;video&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>).<span style="color:#a6e22e">load</span>(); <span style="color:#75715e">// &lt;video&gt;要素のload()メソッドを呼び出す </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">resizeTimer</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;resize&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">clearTimeout</span>(<span style="color:#a6e22e">resizeTimer</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">resizeTimer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">200</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h3 id="どうしてもカスタムコードで使いたいとき">どうしてもカスタムコードで使いたいとき </h3><p>Googleタグマネージャーの使い方がわからないので、STUDIOのカスタムコードに記載して使いたい場合はこちらのソース。発火のトリガーを複数設定しています。ページの遷移やブラウザによっては発火しないケースがあるかもしれません。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.7.1.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">observer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lozad</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">observer</span>.<span style="color:#a6e22e">observe</span>(); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 動画が既に追加されているか確認する関数 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">isVideoAdded</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;video&#34;</span>) <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 共通の処理を関数として定義 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">handleVideoLoad</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画が既に追加されている場合は処理を中断 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isVideoAdded</span>()) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画要素の作成 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">video</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;video&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">muted</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">autoplay</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">loop</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;playsinline&#34;</span>, <span style="color:#e6db74">&#34;&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;lozad&#34; を追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;lozad&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 最初のソース (WEBM) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source1</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.webm&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/webm&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source1</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 2つ目のソース (MP4) に &#34;switch&#34; クラスを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">source2</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;source&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;data-src&#34;</span>, <span style="color:#e6db74">&#34;https://qwerty.work/mv_sp.mp4&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;video/mp4&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">source2</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#34;switch&#34;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画にソースを追加 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source1</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">source2</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画をDOMに追加 </span></span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;mv&#34;</span>).<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">video</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画の再生処理とエラーキャッチ </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">play</span>().<span style="color:#66d9ef">catch</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">error</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">&#34;Video play failed:&#34;</span>, <span style="color:#a6e22e">error</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページが完全にロードされた時 </span></span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;load&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ページのHTMLが読み込まれた時 </span></span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;DOMContentLoaded&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// ブラウザの履歴が変更された時（戻るボタン、進むボタンなど） </span></span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;popstate&#34;</span>, <span style="color:#a6e22e">handleVideoLoad</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// PCとスマホで動画ファイルを切り替える </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// クラス &#34;switch&#34; を持つ &lt;source&gt; タグを対象にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$sources</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.switch&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 切り替えの対象のsrc属性の末尾の文字列。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">sp</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_sp.&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pc</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;_pc.&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動画を切り替えるウィンドウサイズ。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">replaceWidth</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">970</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">videoSwitch</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズを取得する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">width</span>()); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ページ内にあるすべての`.switch`（&lt;source&gt;タグ）に適応される。 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$sources</span>.<span style="color:#a6e22e">each</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">$this</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>); <span style="color:#75715e">// &lt;source&gt;要素 </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px以上であれば_spを_pcに置換 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">windowWidth</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">replaceWidth</span>) { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">sp</span>, <span style="color:#a6e22e">pc</span>)); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// ウィンドウサイズが970px未満であれば_pcを_spに置換 </span></span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;src&#39;</span>, <span style="color:#a6e22e">$this</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;data-src&#39;</span>).<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">pc</span>, <span style="color:#a6e22e">sp</span>)); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// &lt;video&gt;要素全体を再ロードして、srcの変更を反映 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;video&#39;</span>).<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">0</span>).<span style="color:#a6e22e">load</span>(); <span style="color:#75715e">// &lt;video&gt;要素のload()メソッドを呼び出す </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 動的なリサイズは操作後0.2秒経ってから処理を実行する。 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">resizeTimer</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(window).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;resize&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">clearTimeout</span>(<span style="color:#a6e22e">resizeTimer</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">resizeTimer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">videoSwitch</span>(); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">200</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><h2 id="その他参考">その他参考 </h2><p>jQueryに依存しない以下のJavascriptも見つけましたが、設定や設置方法が悪いのか、うまくいきませんでした。</p> <h4 id="画面サイズで切り替える例">画面サイズで切り替える例 </h4> <div class="link-card"> <a href="https://teratail.com/questions/148919" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://teratail.com/questions/148919" alt="https://teratail.com/questions/148919" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://teratail.com/questions/148919</span> <span class="link-card-url">https://teratail.com/questions/148919</span> </div> </a> </div> <h4 id="ユーザーエージェントで切り替える例">ユーザーエージェントで切り替える例 </h4> <div class="link-card"> <a href="https://iwb.jp/video-tag-src-poster-img-javascript/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://iwb.jp/video-tag-src-poster-img-javascript/" alt="https://iwb.jp/video-tag-src-poster-img-javascript/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://iwb.jp/video-tag-src-poster-img-javascript/</span> <span class="link-card-url">https://iwb.jp/video-tag-src-poster-img-javascript/</span> </div> </a> </div> https://qwerty.work/post/2021/11/jquery-lightbox/ Fri, 19 Nov 2021 14:00:20 +0900 https://qwerty.work/post/2021/11/jquery-lightbox/ <h2 id="簡単で便利なlightboxを探す">簡単で便利なLightboxを探す </h2><p>画像ギャラリーの写真を拡大するLightboxで、モバイルに対応していて、設置が簡単で操作性たいいものを探してして見つけたものをメモ。</p> <h3 id="fancybox">Fancybox </h3><p>モバイルにも対応していて、設置が簡単。モーダルで表示したら「前へ」「次へ」と画像を切り替えることができ、Youtube、vimeo、GoogleマップのiFrameにも対応している。jQueryが必要。</p> <div class="link-card"> <a href="https://fancyapps.com/docs/ui/fancybox/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fancyapps.com/docs/ui/fancybox/" alt="https://fancyapps.com/docs/ui/fancybox/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fancyapps.com/docs/ui/fancybox/</span> <span class="link-card-url">https://fancyapps.com/docs/ui/fancybox/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/fancyapps/fancybox" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/fancyapps/fancybox" alt="https://github.com/fancyapps/fancybox" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/fancyapps/fancybox</span> <span class="link-card-url">https://github.com/fancyapps/fancybox</span> </div> </a> </div> <h4 id="cdn">CDN </h4> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/@fancyapps/ui" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/@fancyapps/ui" alt="https://www.jsdelivr.com/package/npm/@fancyapps/ui" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/@fancyapps/ui</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/@fancyapps/ui</span> </div> </a> </div> <h4 id="カスタマイズ参考">カスタマイズ参考 </h4><p>オプション設定例等、参考ページ</p> <div class="link-card"> <a href="https://me2.jp/blog/javascript/jquery_fancybox3_option.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://me2.jp/blog/javascript/jquery_fancybox3_option.html" alt="https://me2.jp/blog/javascript/jquery_fancybox3_option.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://me2.jp/blog/javascript/jquery_fancybox3_option.html</span> <span class="link-card-url">https://me2.jp/blog/javascript/jquery_fancybox3_option.html</span> </div> </a> </div> <h3 id="lightcase">Lightcase </h3><p>これもモバイルやYoutubeに対応しているが、Fancyboxの方が使いやすそう。jQueryが必要。</p> <div class="link-card"> <a href="https://cornel.bopp-art.com/lightcase/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cornel.bopp-art.com/lightcase/" alt="https://cornel.bopp-art.com/lightcase/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cornel.bopp-art.com/lightcase/</span> <span class="link-card-url">https://cornel.bopp-art.com/lightcase/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/cbopp-art/lightcase" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/cbopp-art/lightcase" alt="https://github.com/cbopp-art/lightcase" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/cbopp-art/lightcase</span> <span class="link-card-url">https://github.com/cbopp-art/lightcase</span> </div> </a> </div> <h4 id="cdn-1">CDN </h4> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/lightcase" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/lightcase" alt="https://www.jsdelivr.com/package/npm/lightcase" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/lightcase</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/lightcase</span> </div> </a> </div> <h3 id="slimbox2">Slimbox2 </h3><p>これもjQueryがあれば使えますが、モバイルには対応していません。</p> <div class="link-card"> <a href="https://www.digitalia.be/software/slimbox2/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.digitalia.be/software/slimbox2/" alt="https://www.digitalia.be/software/slimbox2/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.digitalia.be/software/slimbox2/</span> <span class="link-card-url">https://www.digitalia.be/software/slimbox2/</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/11/jquery-slickjs-slider/ Fri, 05 Nov 2021 13:50:27 +0900 https://qwerty.work/post/2021/11/jquery-slickjs-slider/ <h2 id="画像のスライダー">画像のスライダー </h2><p>画像のスライドを簡単に実現できるJSないかな～と探してみたら、あっさり見つけることができたのでメモ。</p> <h2 id="jqueryに依存するもの">jQueryに依存するもの </h2><h3 id="slockjs">Slock.js </h3><h4 id="slickjsを使った参考例">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move01/6-1-6/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move01/6-1-6/" alt="https://coco-factory.jp/ugokuweb/move01/6-1-6/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> </div> </a> </div> <h4 id="公式サイト">公式サイト </h4> <div class="link-card"> <a href="https://kenwheeler.github.io/slick/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://kenwheeler.github.io/slick/" alt="https://kenwheeler.github.io/slick/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://kenwheeler.github.io/slick/</span> <span class="link-card-url">https://kenwheeler.github.io/slick/</span> </div> </a> </div> <h2 id="jqueryが不要なもの">jQueryが不要なもの </h2><h3 id="swiperjs">Swiper.js </h3><h4 id="slickjsを使った参考例-1">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://www.rectus.co.jp/archives/496" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.rectus.co.jp/archives/496" alt="https://www.rectus.co.jp/archives/496" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.rectus.co.jp/archives/496</span> <span class="link-card-url">https://www.rectus.co.jp/archives/496</span> </div> </a> </div> <div class="link-card"> <a href="https://digipress.info/tech/introducing-swiper-js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://digipress.info/tech/introducing-swiper-js/" alt="https://digipress.info/tech/introducing-swiper-js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://digipress.info/tech/introducing-swiper-js/</span> <span class="link-card-url">https://digipress.info/tech/introducing-swiper-js/</span> </div> </a> </div> <h4 id="公式サイト-1">公式サイト </h4> <div class="link-card"> <a href="https://github.com/nolimits4web/swiper" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/nolimits4web/swiper" alt="https://github.com/nolimits4web/swiper" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/nolimits4web/swiper</span> <span class="link-card-url">https://github.com/nolimits4web/swiper</span> </div> </a> </div> https://qwerty.work/post/2021/11/js-lightbox-text/ Tue, 02 Nov 2021 14:58:54 +0900 https://qwerty.work/post/2021/11/js-lightbox-text/ <h2 id="ligthbox風にテキストを表示したい">Ligthbox風にテキストを表示したい </h2><h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="https://goworkship.com/magazine/open-source-modal-window/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/open-source-modal-window/" alt="https://goworkship.com/magazine/open-source-modal-window/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/open-source-modal-window/</span> <span class="link-card-url">https://goworkship.com/magazine/open-source-modal-window/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.willstyle.co.jp/blog/2254/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.willstyle.co.jp/blog/2254/" alt="https://www.willstyle.co.jp/blog/2254/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.willstyle.co.jp/blog/2254/</span> <span class="link-card-url">https://www.willstyle.co.jp/blog/2254/</span> </div> </a> </div> <h3 id="magnific-popup">Magnific Popup </h3><p>これもjQueryがあれば使えます。フォームのモーダルとかに使えて機能も豊富そうです。機会があれば是非使ってみたいです。</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/" alt="https://dimsemenov.com/plugins/magnific-popup/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/</span> </div> </a> </div> <h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/dimsemenov/Magnific-Popup" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/dimsemenov/Magnific-Popup" alt="https://github.com/dimsemenov/Magnific-Popup" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/dimsemenov/Magnific-Popup</span> <span class="link-card-url">https://github.com/dimsemenov/Magnific-Popup</span> </div> </a> </div> <p>リファレンス参考</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/documentation.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/documentation.html" alt="https://dimsemenov.com/plugins/magnific-popup/documentation.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> </div> </a> </div> https://qwerty.work/post/2021/02/lazy-js-css/ Wed, 17 Feb 2021 19:20:57 +0900 https://qwerty.work/post/2021/02/lazy-js-css/ <h3 id="特定の要素のみを遅延表示させる">特定の要素のみを遅延表示させる </h3><h4 id="参考サイト">参考サイト </h4> <div class="link-card"> <a href="https://teratail.com/questions/113891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://teratail.com/questions/113891" alt="https://teratail.com/questions/113891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://teratail.com/questions/113891</span> <span class="link-card-url">https://teratail.com/questions/113891</span> </div> </a> </div> <div class="link-card"> <a href="https://makibishi.ninja/lazysizes/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://makibishi.ninja/lazysizes/" alt="https://makibishi.ninja/lazysizes/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://makibishi.ninja/lazysizes/</span> <span class="link-card-url">https://makibishi.ninja/lazysizes/</span> </div> </a> </div> <div class="link-card"> <a href="https://techacademy.jp/magazine/25636" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://techacademy.jp/magazine/25636" alt="https://techacademy.jp/magazine/25636" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://techacademy.jp/magazine/25636</span> <span class="link-card-url">https://techacademy.jp/magazine/25636</span> </div> </a> </div> <div class="link-card"> <a href="https://zxcvbnmnbvcxz.com/specified-time-or-more/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://zxcvbnmnbvcxz.com/specified-time-or-more/" alt="https://zxcvbnmnbvcxz.com/specified-time-or-more/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> <span class="link-card-url">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.marukin-ad.co.jp/marulog/?p=1891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.marukin-ad.co.jp/marulog/?p=1891" alt="https://www.marukin-ad.co.jp/marulog/?p=1891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.marukin-ad.co.jp/marulog/?p=1891</span> <span class="link-card-url">https://www.marukin-ad.co.jp/marulog/?p=1891</span> </div> </a> </div> <h3 id="逆に遅延非表示にする場合">逆に遅延非表示にする場合 </h3><h4 id="参考サイト-1">参考サイト </h4> <div class="link-card"> <a href="http://kachibito.net/snippets/settimeout-fadeout" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/snippets/settimeout-fadeout" alt="http://kachibito.net/snippets/settimeout-fadeout" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/snippets/settimeout-fadeout</span> <span class="link-card-url">http://kachibito.net/snippets/settimeout-fadeout</span> </div> </a> </div> https://qwerty.work/post/2020/06/position-sticky-jquery-stiky-js/ Mon, 15 Jun 2020 21:16:42 +0900 https://qwerty.work/post/2020/06/position-sticky-jquery-stiky-js/ <p>前置きはともかく方法を真っ先にしりたい方は → <a class="link" href="#koko" ><strong>ここ</strong></a> から見てください。</p> <p>ページをスクロールしても同じところに表示され続けるサイドバーのアドセンス広告を実装する方法をメモ。CCSで簡単に実現するつもりが失敗。代わりにjQueryで実現した方法。</p> <h2 id="発端は超低いアドセンス広告のクリック率">発端は超低いアドセンス広告のクリック率 </h2><p>このブログにはAdSense広告を貼っていますが、悲しいことにクリック率が**平均0.15％**くらいしかありません。1万PVでやっと1.5クリックです。いろいろなアフィリエイトやAdSenseのブログ記事を見ると、クリック率は1～2％が普通みたいで、それから比べる10分の1くらい少ないです。</p> <p>悲しくなってきたので、**クリック率を上げるにはどうしたらいいか？**検索して調べてみると、以下のような問題があるのではないか？というのを沢山見ました。</p> <ul> <li>広告の配置が悪い</li> <li>広告の数が多い</li> <li>広告の種類が悪い</li> </ul> <p>そこで、アドセンス広告の配置を見直すことにしました。このブログは主に**『パソコンの困りごとをどうやって解決したか』<strong>という内容の記事がメインで、検索して訪問される方は</strong>『調べる』**ということを目的に閲覧していると思います。その調べものがメインで来ているのに、広告がいきなりガチャガチャで出てくると印象が悪いと思います。そこがクリック率の低さに繋がっているのではないかと思いました。</p> <p>そこで、印象をよく思っていただいた後にアドセンス広告を出すようしたいと思います。仮に、このブログに訪問者にとって価値がある情報があったとして、以下のように思っていただけたところに広告をだしたいと考えました。</p> <ul> <li>このページに来てある程度目的が達成できた</li> <li>調べたいヒントがここにあった</li> <li>知りたい内容がドンピシャだった</li> </ul> <p>と思ってもらえることが大事で、<strong>『広告収入はおまけの位置づけ』<strong>のはずが、いつの間にか</strong>広告の方がメインになっていた</strong>気がします。</p> <ul> <li>このページを読むことを邪魔しない程度にしながらグイグイと広告を出す</li> <li>読み終わってホッとしたところで広告を見せる</li> </ul> <p>こういったところから、**『サイドバーの一番下にアドセンスの追尾広告を出したい！』**ということを思いつきました。</p> <h2 id="cssによる追尾広告の設置に失敗して困った">CSSによる追尾広告の設置に失敗して困った </h2><p>サイドバーの一番下にAdSenseの**『関連コンテンツ広告』**を設置して、スクロールしてもずっと追いかけて表示できるように、一番簡単そうなCSSに<code>position: sticky</code>と書いて追従表示する方法をとりました。<code>position: sticky</code>を使おうと思った理由が、ほぼすべてのブラウザが対応していて、簡単でシンプルだからです。</p> <h3 id="position-stickyをサポートしているブラウザ">position: sticky;をサポートしているブラウザ </h3><p>以下のページでは<code>position: sticky</code>に対応しているブラウザのバージョンがわかります。</p> <div class="link-card"> <a href="https://caniuse.com/#feat=css-sticky" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/#feat=css-sticky" alt="https://caniuse.com/#feat=css-sticky" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/#feat=css-sticky</span> <span class="link-card-url">https://caniuse.com/#feat=css-sticky</span> </div> </a> </div> <h3 id="コード例">コード例 </h3><p>たったこれだけす。簡単ですね。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sticky</span> { </span></span><span style="display:flex;"><span> postion: <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">sticky</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">sticky</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span> </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;sticky&#34;</span>&gt; </span></span><span style="display:flex;"><span> 〜追従表示させたい要素〜 </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="試したところピクリとも動かなったその原因">試したところピクリとも動かなったその原因 </h3><p>上記のコードを参考にテストしてみたところ、ページをスクロールしても<strong>ピクリとも動きません</strong>でした。コードの書き方が悪かったかな？を思いながら試行錯誤してもダメでした。いろいろ検索して調べたら<code>position: sticky</code>が効かない条件がありました。</p> <h4 id="先祖要素にoverflowが指定されていると動かない">先祖要素にoverflowが指定されていると動かない </h4><p>親要素に<code>overflow</code>を指定して<code>float</code>を解除している場合、<code>position: sticky</code>が効かないみたいです。これは、直近の親要素だけに限らず、先祖要素に一つでも<code>overflow</code>が指定されているとダメみたいです。また、<code>float</code>を使ったグリッドシステムも<code>position: sticky</code>を使えない可能性が高いみたいで注意が必要です。</p> <ul> <li> <p><code>overflow: hidden</code>、<code>overflow: auto</code>を使っていると<code>sticky</code>が効かない</p> </li> <li> <p><code>overflow: scroll</code>で高さの指定がないと<code>sticky</code>が効かない</p> </li> <li> <p><code>overflow: scroll</code>で高さの指定があれば、そのブロック内で<code>sticky</code>が効く</p> <p>この場合、先祖要素に<code>overflow: hidden</code>が指定されていても関係ありません。</p> </li> <li> <p><code>overflow: visible</code>であれば<code>sticky</code>は効く</p> </li> </ul> <h4 id="safariに限ってはinline-block要素で効かない">Safariに限ってはinline-block要素で効かない </h4><p>Firefox、Chrome、Edgeでは問題ないみたいですが、SafariとiOS Safariでは、スティックさせたい要素に<code>display: inline-block</code>を指定していると<code>position: sticky</code>が効かなくなるそうです。</p> <h3 id="原因がわかったところで対処できず">原因がわかったところで対処できず </h3><p><code>position: sticky</code>が使えない（効かない）原因がわかったところで、ページのソースコードに<code>overflow: hidden</code>や<code>float</code>があるが検索をしてみたら**多用していました。<strong>自分で作ったレイアウトではなく、テンプレートを使用しているので、<code>position: sticky</code>が効くようにするために<code>overflow: hidden</code>や<code>float</code>を取り除くとなると、もはや別のレイアウトを作ることになり、最悪は現在のレイアウトが総崩れで修復困難になる恐ろしいリスクも出てきて、手間や時間がかかりすぎるので、</strong>『追尾広告はあきらめようかな』**と、心が折れかけました。</p> <h2 id="jqueryで実現する方法を見つけた">jQueryで実現する方法を見つけた！ </h2><p>ページの読み込みが重たくなるので、なるべくJavascriptやjQueryの追加はしたくないのですが、**『クリック率は高めたい！あきらめるな！』<strong>という心の声で、もうひと踏ん張りして</strong>『別の方法で実現できないか？』**と探してみたところ、方法を見つけました！</p> <p>Javascriptで実現する方法があったのですが、サンプルのソースは行数が多く、自分用にカスタマイズしようにも理解できない感じでした。jQueryと使った方は実装方法がとてもシンプルで、既にj他のことでjQueryを導入していたので、jQueryを使った方法を試すことにしました。</p> <h3 id="jquerystikyjsでうまくいった">jQuery.stiky.jsでうまくいった！ </h3><p>以下のページから <a class="link" href="https://github.com/garand/sticky/blob/master/jquery.sticky.js" target="_blank" rel="noopener" >jquery.sticky.js</a> をダウンロードして使います。やってみたらちょっても簡単でした。CSSの<code>position: sticky</code>とは違い、<code>overflow: hidden</code>があっても効きました。</p> <div class="link-card"> <a href="https://github.com/garand/sticky" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/garand/sticky" alt="https://github.com/garand/sticky" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/garand/sticky</span> <span class="link-card-url">https://github.com/garand/sticky</span> </div> </a> </div> <h4 id="サンプルコード">サンプルコード </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.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">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.sticky.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">defer</span><span style="color:#f92672">&gt;</span> </span></span><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 style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#sticker&#34;</span>).<span style="color:#a6e22e">sticky</span>({ <span style="color:#a6e22e">topSpacing</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span> , <span style="color:#a6e22e">bottomSpacing</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</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">div</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sidebar&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stikcker&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">AdSenseのコード</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span></code></pre></div><p>ページの読み込みを速くするために<code>Defer</code>で順番に遅延読み込みするようにしています。<code>sticky</code>というidが付いたの部分がスクロールしても追随して表示されます。</p> <p>ただ、この <a class="link" href="https://github.com/garand/sticky/blob/master/jquery.sticky.js" target="_blank" rel="noopener" >jquery.sticky.js</a>　はIEでは動きませんでした。ChromeとEdge（Chromium）では大丈夫でした。</p> <h2 id="position-stickyを補助するjsもあった">position: sticky;を補助するJSもあった </h2><p>今回は使いませんでしたが、position: sticky;が効かないときに補助してくれるjQueryプラグインも存在していました。特にIEに対応させたいときに使えそうです。</p> <div class="link-card"> <a href="https://www.miso.blog/css-position-sticky/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.miso.blog/css-position-sticky/" alt="https://www.miso.blog/css-position-sticky/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.miso.blog/css-position-sticky/</span> <span class="link-card-url">https://www.miso.blog/css-position-sticky/</span> </div> </a> </div> <div class="link-card"> <a href="https://arakaze.ready.jp/archives/4153" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://arakaze.ready.jp/archives/4153" alt="https://arakaze.ready.jp/archives/4153" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://arakaze.ready.jp/archives/4153</span> <span class="link-card-url">https://arakaze.ready.jp/archives/4153</span> </div> </a> </div> https://qwerty.work/post/2019/01/jquery-defer-async-error/ Mon, 28 Jan 2019 23:58:24 +0900 https://qwerty.work/post/2019/01/jquery-defer-async-error/ <h3 id="jqueryの読込にdeferやasync使ったら動かなくなった">jQueryの読込にDeferやAsync使ったら動かなくなった </h3><p>サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSに<strong>defer</strong>や<strong>async</strong>を付けていたら、<strong>jQuery</strong>に<strong>Defer</strong>を付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#39;/js/jquery.min.js&#39;</span> <span style="color:#960050;background-color:#1e0010">defer</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h3 id="そんなときの対処法">そんなときの対処法 </h3><p>jQueryに依存するスクリプトを**window.onload = function() {&hellip;}**で囲ってみてください。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">スクリプト</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script defer&gt;</span> </span></span></code></pre></div><p>または、**window.addEventListener( &rsquo;load&rsquo;, function(){&hellip;}, false);**で囲ってみてください。</p> <p>特にChromeは動くけど、EdgeやInternet Explorer(IE)で動かないときはこちらが有効でした。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>( <span style="color:#e6db74">&#39;load&#39;</span>, <span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">スクリプト</span> </span></span><span style="display:flex;"><span> }, <span style="color:#66d9ef">false</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><p>のようにスクリプトを囲ってやれば、<strong>Defer</strong>で読み込んでもスクリプトが動くようになります。詳しくは以下のサイトに詳しく例が書いてありましたので参考にしてみてください。</p> <p>それでも動かない場合、<strong><strong>を</strong></strong>、****にする必要なときがあります。</p> <h4 id="参考サイト">参考サイト </h4> <div class="link-card"> <a href="https://norando.net/jqueryplugin-and-defer/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://norando.net/jqueryplugin-and-defer/" alt="https://norando.net/jqueryplugin-and-defer/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://norando.net/jqueryplugin-and-defer/</span> <span class="link-card-url">https://norando.net/jqueryplugin-and-defer/</span> </div> </a> </div> <div class="link-card"> <a href="https://sakura.monte-verita.biz/3981" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://sakura.monte-verita.biz/3981" alt="https://sakura.monte-verita.biz/3981" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://sakura.monte-verita.biz/3981</span> <span class="link-card-url">https://sakura.monte-verita.biz/3981</span> </div> </a> </div> <h3 id="onloadを使って回避する方法もある">Onloadを使って回避する方法もある </h3><p>以下のページには上記と違う方法で回避する方法もありました。私も使ってみたところうまく回避できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span> <span style="color:#a6e22e">onload</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34; </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(function() { </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(&#39;form&#39;).submit(function() { </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> $(&#39;form&#39;).find(&#39;:submit&#39;).attr(&#39;disabled&#39;, &#39;disabled&#39;); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> }); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> }); </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> &#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div> <div class="link-card"> <a href="https://qiita.com/suzunone/items/55277b99893b2a6cf353" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/suzunone/items/55277b99893b2a6cf353" alt="https://qiita.com/suzunone/items/55277b99893b2a6cf353" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> <span class="link-card-url">https://qiita.com/suzunone/items/55277b99893b2a6cf353</span> </div> </a> </div> <p>また、指定したJSとCSSをDeferとAsyncを使い分けて読み込む<a class="link" href="https://github.com/suzunone/PrefetchLoader" target="_blank" rel="noopener" >PrefetchLoader.js</a>というスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。</p> <p>ですが、<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>や<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >Pagespeed Insights</a>などで測定すると表示の時間は遅くなりました。見た目は速い感じがするんですが不思議です。今回は適用を見送りましたが、気になるのでまた試してみたいと思います。</p> <h3 id="その他参考サイト">その他参考サイト </h3><p>JSをどこで読み込むかで表示スピードが変わる実験結果が書いてありました。ともて興味深いのでメモ。</p> <div class="link-card"> <a href="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" alt="http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/</span> <span class="link-card-url">http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/</span> </div> </a> </div> https://qwerty.work/post/2019/01/jquery-ajax-php-async/ Thu, 17 Jan 2019 22:17:56 +0900 https://qwerty.work/post/2019/01/jquery-ajax-php-async/ <h3 id="ソーシャルボタンを自作して表示スピードを高速化">ソーシャルボタンを自作して表示スピードを高速化 </h3><p><strong>Twitter、Facebook、はてな、Pocket</strong>など公式のボタンを使用するとかなりページを表示するスピードが遅くなるため、先日からページ表示を高速化するためにソーシャルボタンの自作にチャレンジしています。</p> <p><img class="gallery-image" data-flex-basis="800px" data-flex-grow="333" height="210" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-01.jpg" width="700"></p> <p>Wordpressであればプラグインで簡単に高速化できのですが、Wordpressではないページで使用するため、どうしても自作するしか高速化する方法がありません。そこで最近行っている自作チャレンジしているメモのブログが以下なんですが、いろいろな方法を試して徐々にページスピードを上げることができました。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-pocket-count-get.php" target="_blank" rel="noopener" >PHPでPocketの公式ボタンからストックされたカウント数だけを取得する</a></li> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-sns-share-button.php" target="_blank" rel="noopener" >PHPでカウント付のSNSシェアボタンを自作してみた</a></li> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-curl-multi-snsbutton.php" target="_blank" rel="noopener" >PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた</a></li> </ul> <p>上から、<strong>Pocket</strong>のストックカウントを取得するだけで<strong>約1.4～2秒</strong>かかり、公式ボタンより遅くなる。</p> <p>↓</p> <p>PHPの関数「<strong>cURL」<strong>を使用して</strong>Twitter、Facebook、はてな、Pocket</strong>のカウント数をAPIから同期で取得してボタンを自作して<strong>約2秒</strong>で表示できた。</p> <p>↓</p> <p>PHPの<strong>cURL</strong>を非同期で実行できる<strong>curl_multi</strong>を使用すると同じことを<strong>約1.5秒</strong>で表示できるようになりました。</p> <h3 id="でも同期でphpを読み込むから15秒遅くなるということ">でも同期でPHPを読み込むから1.5秒遅くなるということ </h3><p>自作のSNSボタンのみの表示を約1.5秒まで縮めることができたのですが、このSNSボタンを表示させたいページに埋め込むと、そのページの表示は1.5秒遅くなるということ。curl_multiでAPIの取得は非同期でやっているけど、そのPHPはページから同期で呼び出すためです。これを非同期で呼び出すことができればページ全体の表示を速くできるのではないかと思います。</p> <h3 id="そこでphpをjavascriptから呼び出す">そこでPHPをJavascriptから呼び出す！ </h3><p>jQueryのAjaxでPHPを非同期で呼び出すことができるそうです。これを使えば、PHP内で各SNSのAPIからカウント数を非同期で取得し、そのPHPをJavascriptから非同期で実行させることがきて<strong>ダブル非同期</strong>。</p> <p>サーバーサイドのPHPとクライアントサイドのJavascriptで負荷を分散してるので、これで更に**速くなるに違いない！**と想像しています。</p> <h3 id="そして作ったソース">そして作ったソース </h3><h4 id="php">PHP </h4><p>PHPではjavascriptのページから$_GETでカウントを取得したいURLを受取り、そのURLを対象に各SNSのAPIからカウント数を取得します。そしてカウント数を組み込んだ自作シャーシャルボタンのHTMLを変数に入れます。ファイル名は仮にget_sns_button.phpとします。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">num_format</span>($count) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//3桁区切りのカンマを削除 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">&#39;,&#39;</span>,<span style="color:#e6db74">&#39;&#39;</span>,$count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//数値に変換 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">intval</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// カウント数が取得できないときは0にする </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">isset</span>($count) <span style="color:#f92672">?</span> <span style="color:#a6e22e">intval</span>($count) <span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span> ; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fetch_sns_count</span>($targeturl) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 並列通信用マルチハンドルを用意 </span></span></span><span style="display:flex;"><span> $mh <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_init</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIごとにCurl Handleを作る </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Twitter </span></span></span><span style="display:flex;"><span> $ch_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;http://jsoon.digitiminimi.com/twitter/count.json?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_twitter, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_twitter); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Facebook </span></span></span><span style="display:flex;"><span> $ch_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://graph.facebook.com/?id=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_facebook, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Hatena </span></span></span><span style="display:flex;"><span> $ch_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://b.hatena.ne.jp/entry.count?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_hatena, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Pocket </span></span></span><span style="display:flex;"><span> $ch_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/button?v=1&amp;count=horizontal&amp;url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&amp;src=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch_pocket, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 複数の通信を非同期で同時実行 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">do</span> { <span style="color:#a6e22e">curl_multi_exec</span>($mh, $running); } <span style="color:#66d9ef">while</span> ( $running ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIから戻ってきた値を変数に入れる </span></span></span><span style="display:flex;"><span> $json_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_twitter); </span></span><span style="display:flex;"><span> $json_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_facebook); </span></span><span style="display:flex;"><span> $count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_hatena); </span></span><span style="display:flex;"><span> $html_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// cURLハンドルセットを閉じる </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_twitter); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_twitter); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_facebook); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_hatena); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch_pocket); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_multi_close</span>($mh); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*デバッグ用 </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($json_twitter); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($json_facebook); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($count_hatena); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> var_dump($html_pocket); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Twitterのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_twitter, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span> $count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_twtter[<span style="color:#e6db74">&#39;count&#39;</span>])); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//facebookのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_facebook, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span> $count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_facebook[<span style="color:#e6db74">&#39;share&#39;</span>][<span style="color:#e6db74">&#39;share_count&#39;</span>]); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Hatenaのカウント数を取り出す </span></span></span><span style="display:flex;"><span> $count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Pocketのカウント数を取り出す </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">//HTML→DOM→XML→JSON→配列に変換 </span></span></span><span style="display:flex;"><span> $dom_pocket <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">DOMDocument</span>(<span style="color:#e6db74">&#39;1.0&#39;</span>, <span style="color:#e6db74">&#39;UTF-8&#39;</span>); </span></span><span style="display:flex;"><span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">preserveWhiteSpace</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">loadHTML</span>($html_pocket); </span></span><span style="display:flex;"><span> $xmlString_pocket <span style="color:#f92672">=</span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">saveXML</span>(); </span></span><span style="display:flex;"><span> $xmlObject_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_string</span>($xmlString_pocket); </span></span><span style="display:flex;"><span> $count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>(<span style="color:#a6e22e">json_encode</span>($xmlObject_pocket), <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_pocket[<span style="color:#e6db74">&#39;body&#39;</span>][<span style="color:#e6db74">&#39;div&#39;</span>][<span style="color:#e6db74">&#39;a&#39;</span>][<span style="color:#e6db74">&#39;span&#39;</span>][<span style="color:#e6db74">&#39;em&#39;</span>])); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//カウント付ソーシャルボタンのHTML </span></span></span><span style="display:flex;"><span>$res <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&lt;ul class=&#34;sns-counter&#34; title=&#34;&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34;&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-tw&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//twitter.com/intent/tweet?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-twitter&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_twtter<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-fb&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//www.facebook.com/sharer/sharer.php?u=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; onclick=&#34;window.open(\&#39;https://www.facebook.com/sharer/sharer.php?u=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;\&#39;, \&#39;new\&#39;, \&#39;width=500,height=300\&#39;);return false;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-facebook-f&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_facebook<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-hb&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//b.hatena.ne.jp/entry/&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fa fa-hatena&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_hatena<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-pk&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//getpocket.com/edit?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-get-pocket&#34;&gt;&lt;/i&gt;&lt;span&gt;&#39;</span><span style="color:#f92672">.</span>$count_pocket<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&lt;!--&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;--&gt;&lt;li class=&#34;btn-line&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;a href=&#34;//social-plugins.line.me/lineit/share?url=&#39;</span><span style="color:#f92672">.</span>$targeturl<span style="color:#f92672">.</span><span style="color:#e6db74">&#39;&#34; target=&#34;_blank&#34;&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;i class=&#34;fab fa-line&#34;&gt;&lt;/i&gt;&lt;span&gt;LINE&lt;/span&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/a&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/li&gt;&#39;</span>; </span></span><span style="display:flex;"><span> $res <span style="color:#f92672">.=</span> <span style="color:#e6db74">&#39;&lt;/ul&gt;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $res; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>$targeturl <span style="color:#f92672">=</span> $_GET[<span style="color:#e6db74">&#39;targeturl&#39;</span>]; </span></span><span style="display:flex;"><span><span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">fetch_sns_count</span>($targeturl); </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><h4 id="javascript">Javascript </h4><p>jQueryのAjaxからPHP（get_sns_button.php）を呼び出し、PHPの変数に入ったソーシャルボタンのHTMLをページ内に展開するページのソースです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">html</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ja&#34;</span> <span style="color:#a6e22e">itemscope</span> <span style="color:#a6e22e">itemtype</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://schema.org/WebPage&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">head</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;X-UA-Compatible&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;IE=edge&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;viewport&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;width=device-width,initial-scale=1&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;x-dns-prefetch-control&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;on&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dns-prefetch&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://ajax.cloudflare.com&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dns-prefetch&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">title</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">無題ドキュメント</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/title&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">100</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border</span><span style="color:#f92672">-</span><span style="color:#a6e22e">radius</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">2</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">80</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin</span><span style="color:#f92672">-</span><span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">3</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> <span style="color:#a6e22e">span</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span><span style="color:#f92672">-</span><span style="color:#a6e22e">align</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">70</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">size</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">12</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">bold</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">fff</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> <span style="color:#a6e22e">li</span> <span style="color:#a6e22e">i</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inline</span><span style="color:#f92672">-</span><span style="color:#a6e22e">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span><span style="color:#f92672">-</span><span style="color:#a6e22e">align</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span><span style="color:#f92672">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">fff</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">size</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">14</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">position</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span><span style="color:#a6e22e">px</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">tw</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">55</span><span style="color:#a6e22e">ACEE</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">fb</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">3</span><span style="color:#a6e22e">A5795</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hb</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">008</span><span style="color:#a6e22e">CE1</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">pk</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">ef4357</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">line</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">1</span><span style="color:#a6e22e">dcd00</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sns</span><span style="color:#f92672">-</span><span style="color:#a6e22e">counter</span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">total</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#ae81ff">000</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hb</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">tw</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">fb</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">pk</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">line</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span>,.<span style="color:#a6e22e">btn</span><span style="color:#f92672">-</span><span style="color:#a6e22e">total</span><span style="color:#f92672">:</span><span style="color:#a6e22e">hover</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">-</span><span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">ccc</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">i</span>.<span style="color:#a6e22e">fa</span><span style="color:#f92672">-</span><span style="color:#a6e22e">hatena</span><span style="color:#f92672">:</span><span style="color:#a6e22e">before</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">content</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;B!&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">family</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">Verdana</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font</span><span style="color:#f92672">-</span><span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">bold</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/head&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#a6e22e">ここにソーシャルボタンが表示される</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sns-counter&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;load&#34;</span>,<span style="color:#66d9ef">function</span>(){ <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">css</span><span style="color:#f92672">=</span>[ <span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34;</span> ];<span style="color:#66d9ef">for</span>(<span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">css</span>){ <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">html</span><span style="color:#f92672">=</span>document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;link&#34;</span>);<span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span>;<span style="color:#a6e22e">html</span>.<span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#a6e22e">css</span>[<span style="color:#a6e22e">i</span>];<span style="color:#66d9ef">async</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span>;document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">html</span>);}});<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#a6e22e">ここが非同期でPHPを呼び出す部分</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//ポケットのストック数を取得 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fetch_sns_count</span>(<span style="color:#a6e22e">url</span>, <span style="color:#a6e22e">selector</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">defer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">jQuery</span>.<span style="color:#a6e22e">Deferred</span>(); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>.<span style="color:#a6e22e">ajax</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;get_sns_button.php?targeturl=&lt;?php echo urlencode(&#34;https://&#34;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]); ?&gt;&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dataType</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;text&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">timeout</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10000</span>, <span style="color:#75715e">//10sec </span></span></span><span style="display:flex;"><span> }).<span style="color:#a6e22e">done</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">res</span>){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>( <span style="color:#a6e22e">selector</span> ).<span style="color:#a6e22e">html</span>( <span style="color:#a6e22e">res</span> <span style="color:#f92672">||</span> <span style="color:#ae81ff">0</span> ); </span></span><span style="display:flex;"><span> }).<span style="color:#a6e22e">fail</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">jQuery</span>( <span style="color:#a6e22e">selector</span> ).<span style="color:#a6e22e">html</span>(<span style="color:#e6db74">&#39;error;&#39;</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">fetch_sns_count</span>(<span style="color:#e6db74">&#39;&lt;?php echo urlencode(&#34;https://&#34;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]);?&gt;&#39;</span>, <span style="color:#e6db74">&#39;#sns-counter&#39;</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#a6e22e">ここが非同期でPHPを呼び出す部分</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span> </span></span></code></pre></div><h3 id="ん遅くなった">ん？遅くなった？ </h3><p>なぜか遅くなりました。まだ組み込みたいWEBページに埋め込んでいない状態（ショーシャルボタンしかないページ）ですが平均2.2秒。<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>のWaterfallを見ると、確かに非同期で動作は確認できました。</p> <p><img alt="GTmetrix" class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="518" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-00.jpg" width="700"></p> <p>ちょっと実際のWEBページに組み込んでいろいろなパターンをベンチマークしてみないとわからなくなってきました。</p> <h3 id="そこで仮のページに埋め込んでベンチマーク">そこで仮のページに埋め込んでベンチマーク </h3><p><img class="gallery-image" data-flex-basis="393px" data-flex-grow="163" height="427" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/jquery-ajax-php-async/images/No-16.jpg" width="700"></p> <p>以下の３パターンであるページにソーシャルボタンを仮のダミーページ内に読み込んだ時のスピードを<a class="link" href="https://gtmetrix.com" target="_blank" rel="noopener" >GTmetrix</a>でベンチマークしてみました。</p> <pre><code>   今回のAjaxから非同期でPHPを呼び出した場合 共有ボタン配信サービスの[AddThis](https://www.addthis.com/jp/)を使った場合 普通に同期でPHPを実行させた場合 １回目 ３．９秒 ４．９秒 ５．７秒 ２回目 ３．６秒 ３．７秒 ４．３秒 ３回目 ３．５秒 ４．３秒 ４．５秒 ４回目 ３．３秒 ６．１秒 ４．２秒 ５回目 ４．０秒 ４．４秒 ４．５秒 平均 ３．６６秒 ４．６８秒 ４．６４秒 </code></pre> <h3 id="やっぱり速かった">やっぱり速かった！ </h3><p>AjaxからPHPを呼び出す場合、非同期なので他の読み込みをしている間に並行してPHPの実行結果を読み込んでいるので全体的にページの表示スピードが速くなりました。しかも何度ベンチマークしても誤差の範囲が狭く表示時間が安定しています。ばらつきがあるのは多分Adsenseやその他のJavascriptやCDNの読込が原因っぽいです。</p> <p><a class="link" href="https://www.addthis.com/jp/" target="_blank" rel="noopener" >AddThis</a>も速いときは速いのですが、遅いときはめっちゃ遅いです。管理が楽なので各SNSのAPIが変更になっても修正に困ることがなさそうなので、メンテナンスのことを考えると多少遅い時があってもアリかなと思いました。GTmetrixのWaterfallのグラフをみるといろんなバックグラウンドでJavascripｔが降ってきているので、そこが不安定な原因かもしれません。</p> <p>普通に同期でPHPを動かした場合は当然PHPの動作分遅いですね。しかも安定してばらつき無く遅いです。</p> <p>ということで、予想通りAjaxから非同期でPHPを読み込む方が速いという結論になりました。</p> <p>もっと速くしようと思ったら、CRONジョブで定期的にカウント数を取得しデータベース化して、キャッシュしておくのがいいかもしれませんが、ちょっと大変そうです。そういうプラグインがWordpressにはあるみたいですが、それはまたいつか試してみようと思います。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://nelog.jp/fetch-pocket-count-by-ajax" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://nelog.jp/fetch-pocket-count-by-ajax" alt="https://nelog.jp/fetch-pocket-count-by-ajax" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://nelog.jp/fetch-pocket-count-by-ajax</span> <span class="link-card-url">https://nelog.jp/fetch-pocket-count-by-ajax</span> </div> </a> </div> <div class="link-card"> <a href="https://php-archive.net/php/ajax-json/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://php-archive.net/php/ajax-json/" alt="https://php-archive.net/php/ajax-json/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://php-archive.net/php/ajax-json/</span> <span class="link-card-url">https://php-archive.net/php/ajax-json/</span> </div> </a> </div> <div class="link-card"> <a href="http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" alt="http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/</span> <span class="link-card-url">http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.addthis.com/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.addthis.com/" alt="https://www.addthis.com/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.addthis.com/</span> <span class="link-card-url">https://www.addthis.com/</span> </div> </a> </div> https://qwerty.work/post/2017/02/particlesjs-particleground/ Sun, 26 Feb 2017 00:41:09 +0900 https://qwerty.work/post/2017/02/particlesjs-particleground/ <p>ドメインの所有者を調べるWhoisサイトの<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>を見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。</p> <p><img class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="444" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/02/particlesjs-particleground/images/No-00.jpg" width="600"></p> <p>「<a class="link" href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener" >particles.js</a>」というやつらしいです。</p> <p>jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>のソースを見ていると以下のソースが気になりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;canvas</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;spiders&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;hidden-xs&#34;</span><span style="color:#f92672">&gt;&lt;/canvas&gt;</span> </span></span></code></pre></div><p>そこで<strong>spiders</strong>を検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。</p> <div class="link-card"> <a href="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" alt="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> <span class="link-card-url">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> </div> </a> </div> <p>ここで<strong>particles.js</strong>ということがわかりました。</p> <h3 id="particlesjs">particles.js </h3> <div class="link-card"> <a href="http://vincentgarreau.com/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://vincentgarreau.com/particles.js/" alt="http://vincentgarreau.com/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://vincentgarreau.com/particles.js/</span> <span class="link-card-url">http://vincentgarreau.com/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/VincentGarreau/particles.js/" alt="https://github.com/VincentGarreau/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/VincentGarreau/particles.js/</span> <span class="link-card-url">https://github.com/VincentGarreau/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://codepen.io/VincentGarreau/pen/pnlso" alt="http://codepen.io/VincentGarreau/pen/pnlso" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://codepen.io/VincentGarreau/pen/pnlso</span> <span class="link-card-url">http://codepen.io/VincentGarreau/pen/pnlso</span> </div> </a> </div> <p><a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>は少し違う動きをしていますが、多分カスタマイズしているんだと思います。</p> <h4 id="カスタマイズの参考">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://liginc.co.jp/191958" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://liginc.co.jp/191958" alt="https://liginc.co.jp/191958" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://liginc.co.jp/191958</span> <span class="link-card-url">https://liginc.co.jp/191958</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" alt="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> <span class="link-card-url">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> </div> </a> </div> <h3 id="particleground">Particleground </h3><p><strong>particles.js</strong>と同じような<strong>Particleground</strong>というのも見つけました。</p> <div class="link-card"> <a href="http://jnicol.github.io/particleground/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jnicol.github.io/particleground/" alt="http://jnicol.github.io/particleground/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jnicol.github.io/particleground/</span> <span class="link-card-url">http://jnicol.github.io/particleground/</span> </div> </a> </div> <h4 id="カスタマイズの参考-1">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://blog.mismithportfolio.com/web/20150129particleground" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.mismithportfolio.com/web/20150129particleground" alt="https://blog.mismithportfolio.com/web/20150129particleground" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.mismithportfolio.com/web/20150129particleground</span> <span class="link-card-url">https://blog.mismithportfolio.com/web/20150129particleground</span> </div> </a> </div> <h3 id="他にも気になるスクリプトのまとめ">他にも気になるスクリプトのまとめ </h3> <div class="link-card"> <a href="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" alt="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> <span class="link-card-url">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> </div> </a> </div> <div class="link-card"> <a href="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qiita.com/syui/items/f0baae5cdb4bfd193e35" alt="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> <span class="link-card-url">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> </div> </a> </div> <div class="link-card"> <a href="https://ics.media/entry/11172/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/11172/" alt="https://ics.media/entry/11172/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/11172/</span> <span class="link-card-url">https://ics.media/entry/11172/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.webcreatorbox.com/tech/javascript-particles" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/tech/javascript-particles" alt="https://www.webcreatorbox.com/tech/javascript-particles" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/tech/javascript-particles</span> <span class="link-card-url">https://www.webcreatorbox.com/tech/javascript-particles</span> </div> </a> </div> <h4 id="水面に波紋が広がるようなもの">水面に波紋が広がるようなもの </h4><p><a class="link" href="https://jquery.com/" target="_blank" rel="noopener" >jQuery</a>のファイルと<a class="link" href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener" >jQuery Ripples</a>のファイルを読み込めばOK。</p> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div> https://qwerty.work/post/2014/06/jquery-show-button/ Mon, 23 Jun 2014 22:49:21 +0900 https://qwerty.work/post/2014/06/jquery-show-button/ <p>友人に教えてもらったスパム対策の方法。お問い合わせフォームのチェックボックスにチェックを入れないと送信ボタンを表示しないスクリプトのメモ。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#e6db74">/script&gt; &lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#btn&#39;</span>).<span style="color:#a6e22e">hide</span>();<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#switch&#34;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#btn&#34;</span>).<span style="color:#a6e22e">slideToggle</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">checked</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;form&#34;</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#34;action&#34;</span>,<span style="color:#e6db74">&#34;/apps/mailform/send.cgi&#34;</span>);<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> });<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span>});<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#e6db74">/script&gt;&lt;br /</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;post&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">label</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;switch&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;checkbox&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ボタン表示(必須)&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;表示&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;</span> <span style="color:#a6e22e">ボタンを表示</span><span style="color:#f92672">&lt;</span><span style="color:#e6db74">/label&gt;&lt;br /</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;submit&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;送信&#34;</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#a6e22e">br</span> <span style="color:#f92672">/&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span> </span></span></code></pre></div><p> </p> <p>↓実際にチェック入れたら送信ボタンが右に表示されます。</p> <p>$(function(){ $(&rsquo;#btn&rsquo;).hide(); $(&quot;#switch&quot;).click(function(){ $(&quot;#btn&quot;).slideToggle(this.checked); $(&ldquo;form&rdquo;).attr(&ldquo;action&rdquo;,&ldquo;lib/send.cgi&rdquo;); }); });</p> <p>ボタンを表示</p> <p> </p> <p>チェックボックスにチェックが入っていないと<strong>action=&quot;#&quot;<strong>となっていて、チェックを入れると</strong>action属性</strong>が<strong>lib/send.cgi</strong>に変わるようになっています。自動でフォーム送信するようなボットを使ったスパムに対して有効かもしれません。</p> <h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="http://kachibito.net/snippets/if-checked-show-box" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/snippets/if-checked-show-box" alt="http://kachibito.net/snippets/if-checked-show-box" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/snippets/if-checked-show-box</span> <span class="link-card-url">http://kachibito.net/snippets/if-checked-show-box</span> </div> </a> </div> <div class="link-card"> <a href="http://www.inurokuon.com/nfd/archives/131023.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.inurokuon.com/nfd/archives/131023.html" alt="http://www.inurokuon.com/nfd/archives/131023.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.inurokuon.com/nfd/archives/131023.html</span> <span class="link-card-url">http://www.inurokuon.com/nfd/archives/131023.html</span> </div> </a> </div> https://qwerty.work/post/2014/06/jqueryslidetoggle/ Wed, 04 Jun 2014 15:54:52 +0900 https://qwerty.work/post/2014/06/jqueryslidetoggle/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span> <span style="color:#a6e22e">async</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt;&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span>&gt; </span></span><span style="display:flex;"><span> #accordion-Title { <span style="color:#66d9ef">cursor</span>:<span style="color:#66d9ef">pointer</span>; } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title&#34;</span>&gt;リストタイトル（サンプル）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span></code></pre></div><p>コードはこんな感じでjQueryを読み込み**slideToggle()**を指定するだけ、下のサンプルがちゃんと動けばタイトルをクリックするとリストが現れ、もう一度クリックすると閉じるはず&hellip;。</p> <pre><code>$(function(){ $('.accordion-List').hide(); // $('#accordion-Title').click(function(){ $('+.accordion-List',this).slideToggle(); }); }); #accordion-Title { cursor:pointer;} </code></pre> <h3 id="リストタイトルサンプル">リストタイトル（サンプル） </h3><pre><code> - リスト1 - リスト2 </code></pre> <p>隠れているはずのリストが始めから表示されていたり、クリックしても動作しない場合は失敗です&hellip;。</p> <p> </p> <h2 id="独立した複数のアコーディオンがある場合">独立した複数のアコーディオンがある場合 </h2><p><strong>accordion-List1</strong>,<strong>accordion-List2</strong>など、<strong>id</strong>や<strong>class</strong>を分けないと最初のアコーディオンしか動かないので注意が必要です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://code.jquery.com/jquery.min.js&#34;</span> <span style="color:#a6e22e">async</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt;&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List1&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title1&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List1&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.accordion-List2&#39;</span>).<span style="color:#a6e22e">hide</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#accordion-Title2&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;+.accordion-List2&#39;</span>,<span style="color:#66d9ef">this</span>).<span style="color:#a6e22e">slideToggle</span>(); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span>&gt; </span></span><span style="display:flex;"><span> #accordion-Title1<span style="color:#f92672">,</span>#accordion-Title2 { <span style="color:#66d9ef">cursor</span>:<span style="color:#66d9ef">pointer</span>; } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title1&#34;</span>&gt;リストタイトル（サンプル1）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List1&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1-1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト1-2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-Title2&#34;</span>&gt;リストタイトル（サンプル2）&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">br</span>&gt; &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;accordion-List2&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2-1&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;リスト2-2&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span></code></pre></div><p>以下がサンプル</p> <p>$(function(){ $(&rsquo;.accordion-List1&rsquo;).hide(); // $(&rsquo;#accordion-Title1&rsquo;).click(function(){ $(&rsquo;+.accordion-List1&rsquo;,this).slideToggle(); }); }); $(function(){ $(&rsquo;.accordion-List2&rsquo;).hide(); // $(&rsquo;#accordion-Title2&rsquo;).click(function(){ $(&rsquo;+.accordion-List2&rsquo;,this).slideToggle(); }); });</p> <p>#accordion-Title1,#accordion-Title2 { cursor:pointer; }</p> <h3 id="リストタイトルサンプル1">リストタイトル（サンプル1） </h3><pre><code> - リスト1-1 - リスト1-2 </code></pre> <h3 id="リストタイトルサンプル2">リストタイトル（サンプル2） </h3><pre><code> - リスト2-1 - リスト2-2 </code></pre> <p>この方法以外にもたくさんやり方はあるみたいなので、グーグルで「<a class="link" href="https://www.google.co.jp/search?%7bgoogle:acceptedSuggestion%7doq=jQuery&#43;slideToggle&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=jQuery&#43;slideToggle&amp;pws=0" target="_blank" rel="noopener" >jQuery slideToggle</a>」とか「<a class="link" href="https://www.google.co.jp/search?%7bgoogle:acceptedSuggestion%7doq=jQuery&#43;%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3&#43;slideToggle&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=jQuery&#43;%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3&#43;slideToggle&amp;pws=0" target="_blank" rel="noopener" >jQuery アコーディオン slideToggle</a>」と検索してみるといいかもしれません。</p> <h2 id="その他参考">その他参考 </h2> <div class="link-card"> <a href="http://jqueryui.com/accordion/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jqueryui.com/accordion/" alt="http://jqueryui.com/accordion/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jqueryui.com/accordion/</span> <span class="link-card-url">http://jqueryui.com/accordion/</span> </div> </a> </div> https://qwerty.work/post/2010/10/jqueryprototypejs/ Wed, 13 Oct 2010 15:30:56 +0900 https://qwerty.work/post/2010/10/jqueryprototypejs/ <p>ホームページの仕様でjQueryとprototypeを同時に使用するサイトをいじくっていたら</p> <p>あらゆるjavascriptが競合して動いたり動かなかったりするので</p> <p>ググってみたら共存方法がありました。</p> <p>以下参考↓</p> <div class="link-card"> <a href="http://www.css-lecture.com/log/javascript/029.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.css-lecture.com/log/javascript/029.html" alt="http://www.css-lecture.com/log/javascript/029.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.css-lecture.com/log/javascript/029.html</span> <span class="link-card-url">http://www.css-lecture.com/log/javascript/029.html</span> </div> </a> </div>