https://qwerty.work/tags/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA/ Recent content in ライブラリ on qwerty.work Hugo -- gohugo.io ja-JP Wed, 28 Sep 2022 20:04:10 +0900 https://qwerty.work/post/2022/09/css-js-content-animation/ Wed, 28 Sep 2022 20:04:10 +0900 https://qwerty.work/post/2022/09/css-js-content-animation/ <p>スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。</p> <h3 id="waypointsjs--animatecss">Waypoints.js &amp; Animate.css </h3><p><a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>と<a class="link" href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener" >Animate.css</a>を併用して実現します。<a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>はjQueryが必要です。</p> <h3 id="waypointsjs">Waypoints.js </h3><p>指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。</p> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/" alt="http://imakewebthings.com/waypoints/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/</span> </div> </a> </div> <p>上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内の<code>jquery.waypoints.js</code>または<code>jquery.waypoints.min.js</code>を読み込んで使用します。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.waypoints.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><h4 id="リファレンス">リファレンス </h4> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/api/waypoint/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/api/waypoint/" alt="http://imakewebthings.com/waypoints/api/waypoint/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/api/waypoint/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/api/waypoint/</span> </div> </a> </div> <h3 id="animatecss">Animate.css </h3><p>HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。</p> <div class="link-card"> <a href="https://animate.style/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://animate.style/" alt="https://animate.style/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://animate.style/</span> <span class="link-card-url">https://animate.style/</span> </div> </a> </div> <p>ダウンロードしたzipファイルを解凍後、<code>animate.css</code>または<code>animate.min.css</code>をHTMLの内で読み込みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;animate.css&#34;</span>&gt; </span></span></code></pre></div><h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/animate-css/animate.css/releases/tag/3.5.1" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/animate-css/animate.css/releases/tag/3.5.1" alt="https://github.com/animate-css/animate.css/releases/tag/3.5.1" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> <span class="link-card-url">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> </div> </a> </div> <h3 id="サンプルソース">サンプルソース </h3><h4 id="html部分">HTML部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ja&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Animate Test&lt;/<span style="color:#f92672">title</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#f92672">body</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: repeating-linear-gradient(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">deg</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ededed</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#dedede</span> <span style="color:#ae81ff">80</span><span style="color:#66d9ef">px</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">boxes</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">80</span><span style="color:#66d9ef">vh</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">box</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#666</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">em</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">4</span><span style="color:#66d9ef">em</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">animated</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*最初は非表示*/</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">opacity</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;boxes&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 01&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 02&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 03&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 04&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 05&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 06&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 07&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 08&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 09&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 10&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;main.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt; </span></span></code></pre></div><h4 id="javascript部分">Javascript部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// animatedクラスの付いた要素にwaypointを登録 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.animated&#39;</span>).<span style="color:#a6e22e">waypoint</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">handler</span>(<span style="color:#a6e22e">direction</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来るとここが実行される </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">direction</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;down&#39;</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * 下方向のスクロール </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始 </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">element</span>).<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;fadeInUp&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * waypointを削除することで、この要素に対しては </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * これ以降handlerが呼ばれなくなる </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">destroy</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来たらhandlerを実行 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offset</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;50%&#39;</span>, </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/09/jmobile-detect-js/ Wed, 28 Sep 2022 18:38:54 +0900 https://qwerty.work/post/2022/09/jmobile-detect-js/ <h3 id="mobile-detectjs">mobile-detect.js </h3><p><a class="link" href="http://hgoebl.github.io/mobile-detect.js/" target="_blank" rel="noopener" >mobile-detect.js</a>は、ユーザーが使っているブラウザがモバイルブラウザかどうかを判定するオープンソースライブラリです。</p> <p>リッチなサイトではメインビジュアル等に動画を設置することがありますが、モバイル端末では通信速度や端末のスペックが十分でない場合も多く、また動画の自動再生（``要素の<code>autoplay</code>属性）も不可能だったり制限したいときがあります。</p> <p>最近のモバイル製品はパソコン並みに画面解像度が高かったりすので、メディアクエリでは対応ができません。このライブラリを使用すれば、<strong>画面解像度が大きくてもモバイルブラウザを判別できる</strong>ため、モバイルブラウザからアクセスだった場合、動画は非表示にして写真を替わりに表示するなどの制御ができます。</p> <h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="http://hgoebl.github.io/mobile-detect.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://hgoebl.github.io/mobile-detect.js/" alt="http://hgoebl.github.io/mobile-detect.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://hgoebl.github.io/mobile-detect.js/</span> <span class="link-card-url">http://hgoebl.github.io/mobile-detect.js/</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><h4 id="ライブラリの読込">ライブラリの読込 </h4><p>Zipをダウンロードして展開。必要なのは<strong>mobile-detect.min.js</strong>だけ。以下のようにHTMLで読み込みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;js/mobile-detect.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><p>CDNから読み込みたいとき</p> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/mobile-detect" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/mobile-detect" alt="https://www.jsdelivr.com/package/npm/mobile-detect" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/mobile-detect</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/mobile-detect</span> </div> </a> </div> <div class="link-card"> <a href="https://cdnjs.com/libraries/mobile-detect" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cdnjs.com/libraries/mobile-detect" alt="https://cdnjs.com/libraries/mobile-detect" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cdnjs.com/libraries/mobile-detect</span> <span class="link-card-url">https://cdnjs.com/libraries/mobile-detect</span> </div> </a> </div> <h4 id="判別で表示を切り替えたいhtml">判別で表示を切り替えたいHTML </h4><p>仮に以下のようなメインビジュアルを表示するHTMLソースがあったとします。ここのMP4動画を<strong>mobile-detect.js</strong>でモバイルブラウザを判別し、CSSを書き換えます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;top__bg&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">video</span> <span style="color:#a6e22e">autoplay</span> <span style="color:#a6e22e">muted</span> <span style="color:#a6e22e">loop</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;top__video&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/top-video.mp4&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">video</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h4 id="判別するjavascript">判別するJavascript </h4><p>モバイルブラウザの場合は<code>display: hidden;</code>で非表示にして、JPEG画像をに差し替えて表示する例。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//モバイルブラウザならtrue、それ以外ならfalse </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">isMobile</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!!</span><span style="color:#66d9ef">new</span> <span style="color:#a6e22e">MobileDetect</span>(window.<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">userAgent</span>).<span style="color:#a6e22e">mobile</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">isMobile</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//モバイルブラウザの場合は画像を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.top__bg&#39;</span>).<span style="color:#a6e22e">css</span>({ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;background-image&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;url(video/top-video-still.jpg)&#39;</span>, </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//モバイルブラウザではない場合、動画を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.top__video&#39;</span>).<span style="color:#a6e22e">css</span>({ <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;block&#39;</span> }); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p><code>!!</code>は否定（<code>!</code>）の否定を行っています。<code>MobileDetect</code>の<code>mobile()</code>は、モバイル端末の場合は機種の種類（iPhoneやSonyなど）、そうでない場合は<code>null</code>が戻り値となります。そのため、否定の否定を演算することで、<code>isMobile</code>には<code>true</code>か<code>false</code>が入るように<code>mobile()</code>の戻り値を変換しています。</p> <p>公式サイトでも使用方法あり</p> <div class="link-card"> <a href="https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" alt="https://github.com/hgoebl/mobile-detect.js#id=user-content-usage" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/hgoebl/mobile-detect.js#id=user-content-usage</span> <span class="link-card-url">https://github.com/hgoebl/mobile-detect.js#id=user-content-usage</span> </div> </a> </div>