<p>Swiper の背景画像を時間経過と共にズームダウンさせつつ、<br>フェード効果を用いてスライドを切替させてみます。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fumij3&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fumij3&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fumij3%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hc499e4ad38">解説</h2><h3 id="h8d027c8ed3">はじめに</h3><p>ズームアウト（イン）+ フェード効果 は紹介されているブログをよく見かけますが、<br>いずれも <u>拡大された画像が一気に縮小されてから次のスライドが表示される問題 </u>が特定の条件下で発生していました。<br>このような動きは美しくないため、独自に調整を加えた上でご紹介致します。<br></p><h3 id="h9c82a4d4d5">追加されるクラスの役割</h3><p>アニメーションはCSSで実装するため、追加されるクラスについて把握しておく必要があります。</p><pre><code>&lt;!--  スライドの基本クラスです。 --&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;

&lt;!-- 前のスライドに追加されるクラスです。前のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-prev"&gt;&lt;/div&gt;

&lt;!-- 次のスライドに追加されるクラスです。次のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-next"&gt;&lt;/div&gt;

&lt;!-- 表示中のスライドに追加されるクラスです。 --&gt;
&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="hf2db5fb692">調整を加えた箇所</h3><p><br>細かな解説は他の方が既に行われているため、ここでは行いません。<br>以下のブログを参考にさせていただきました。<br><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a><br></p><h4 id="hc1b4dd851a">前のスライドに独自のクラスを追加</h4><p>表示中のスライドに追加されるクラス <code>.swiper-slide-active</code> に加えて、<br>前回表示したスライドに <code>.swiper-slide-active-prev</code> というクラスを追加し、<br>ズームアウトのスタイルを定義しています。<br></p><pre><code>.swiper-slide-active-prev .swiper-bg img,
.swiper-slide-active .swiper-bg img {
    animation: zoomDown 10s linear 0s 1 normal both;
}</code></pre><p><br></p><h4 id="h28c6b6942f">スライドを連続で切替できないように</h4><p>一度切り替えた場合は、<code>swiper.speed</code> の値分の時間が経過しないと<br>次の切り替えができないよう、独自のCSSを追加しています。<br><br>連続で切り替えた場合だと、<u>拡大された画像が一気に縮小されてから次のスライドが表示される問題</u> が発生します。</p><pre><code>.swiper-button-prev.swiper-button-disabled-user,
.swiper-button-next.swiper-button-disabled-user {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
.swiper-pagination-not-clickable {
    opacity: 0.5;
    pointer-events: none;
}</code></pre><p><br><code>slideChange</code>イベント実行時に以下のような処理が働くよう設定しています。</p><pre><code>on: {
  slideChange: () =&gt; {
    // 変数
    const self = swiper;
    const speed = self.params.speed;
    const navPrevButton = self.el.querySelector(".swiper-button-prev");
    const navNextButton = self.el.querySelector(".swiper-button-next");
    const navButtonDisabledUser = "swiper-button-disabled-user";

    // 処理
    _slidesChangeFirst();
    setTimeout(() =&gt; {
      for (let index = 0; index &lt; self.slides.length; index++) {
        self.slides[index].classList.remove("swiper-slide-active-prev");
      }
      _slidesChangeLast();
    }, speed);
    self.slides[self.previousIndex].classList.add("swiper-slide-active-prev");


    // スライド変更後に最初に行う処理
    function _slidesChangeFirst() {
      navPrevButton.classList.add(navButtonDisabledUser);
      navNextButton.classList.add(navButtonDisabledUser);
      self.pagination.el.classList.add("swiper-pagination-not-clickable");
    }
    // スライド変更後に最後に行う処理
    function _slidesChangeLast() {
      navPrevButton.classList.remove(navButtonDisabledUser);
      navNextButton.classList.remove(navButtonDisabledUser);
      self.pagination.el.classList.remove("swiper-pagination-not-clickable");
    }
  }
}</code></pre><p><br>解説は以上となります。</p>

<ul><li><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a></li></ul>

【サンプルあり】Swiperで背景画像をズームダウンしながらフェードで切り替えてみる

<p>JavaScriptで特定の位置までスクロールしたときにアニメーションを実行する<br>スクロールアニメーション を <u>Intersection Observer API (交差監視 API)</u> を使用して実装してみたいと思います。<br><br><a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">Intersection Observer API - MDN Web Docs</a><br></p><h2 id="he3f9223631">Intersection Observer API とは</h2><blockquote>Intersection Observer API (交差監視 API) は、ターゲットとなる要素が、祖先要素もしくは文書の最上位のビューポートと交差する変更を非同期的に監視する方法を提供します</blockquote><p>MDN公式から引用しています。要素が交差しているか監視してくれるAPIのことを指します。<br></p><h3 id="h36b9b2b09e">scrollイベントでも実装は可能</h3><p><code>scroll</code> イベントでも実装することも可能ですが、以下のよう問題があります。<br></p><h4 id="h348ca61b81">スクロール毎にイベントが発生するためブラウザに大きな負荷がかかりがち</h4><p>間引き処理を加えればある程度抑制は可能ですが、コードの見通しが悪くなりがちです。</p><pre><code>let timer = null;
let delay = 100;
window.addEventListener('scroll', () =&gt; {
   clearTimeout( timer );
   timer = setTimeout(function(){ 
    /* 処理内容 */
  }, delay );
});</code></pre><h4 id="h1261153f80"><br>ブラウザのリサイズが行われた場合に必要なスクロール量の再計算が必要</h4><p><code>resize</code> イベントも発生頻度が高いため、間引き処理が必要となります。</p><pre><code>window.addEventListener("resize", () =&gt; { /* 再計算処理 */ });</code></pre><p><br>Intersection Observer API では間引き処理やリサイズ時の再計算が不要なため、<br>効率的な実装が可能です。<br></p><h3 id="heb8b2adca8">外部ライブラリではだめなのか</h3><p><u>ScrollTrigger</u> などの外部ライブラリを使用しても問題ありませんが、<br>スクロールアニメーション実装のためだけに何十kbもあるライブラリを<br>読み込むのは少々オーバーです。<br><br>複雑な処理を行いたい場合は、機能の揃っている外部ライブラリを使用すべきでしょう。<br>実装する内容に応じて適切な判断を行うべきです。<br></p><h3 id="h310321b33c">対応ブラウザについて</h3><p>モダンブラウザは概ね対応しているため使用しても問題無いと思われます。<br>Internet Explorer 11 には対応していないため、Polyfill や Babel を使用してください。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を利用して実装を行いました。<br><br>多少重いため、極端に低スペックなPCでは利用が難しいですが<br>VSCodeと操作感がほぼ同じであったり、npmパッケージが簡単にインストールできたりと<br>非常に使いやすいため重宝しています。<br><br>今回は Bootstrap5公式サイト のサンプルページをそのまま利用させていただきました。<br>要素のある位置までスクロールを行うと、フワッと表示されます。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fl3inp&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fl3inp&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fl3inp%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hc499e4ad38">解説</h2><p>作成した動作デモの仕様について解説します。</p><h3 id="h313db3a8b3">初めに</h3><p>ICS MEDIA 様 の記事にて紹介されていたコードをほぼそのまま利用させていただいております。<strong>画面内に複数の要素が交差していた場合に遅延処理がかかる</strong>よう、改変を行っています。<br><a href="https://ics.media/entry/190902/" target="_blank" rel="noopener noreferrer">JSでのスクロール連動エフェクトにはIntersection Observerが便利</a><br></p><h3 id="had75ff267f">仕様について</h3><p>特定の <code>data属性</code> を持つ要素とビューポートが交差した場合、クラスを追加します。<br>今回は <code>data-anime-trigger</code> をターゲットとして設定します。<br><code>data属性</code> にアニメーション再生前、<code>.-visible</code> にアニメーション再生後のスタイルを定義しておきます。</p><pre><code>&lt;!--  交差前 --&gt;
&lt;div class="item" data-anime-trigger&gt;&lt;/div&gt;

&lt;!--  交差後 --&gt;
&lt;div class="item -visible" data-anime-trigger&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="he4acd50bde">複数の要素と交差した場合の仕様</h3><p>複数の要素と交差した場合は、HTMLの上から順番にクラスが追加されていきます。<br>クラスの追加される順番を制御する場合は別途処理の追加が必要です。<br></p><h2 id="ha214098e44">まとめ</h2><p>スクロールアニメーションを手軽に実装したい場合はこの方法をお試しください。<br>お疲れ様でした。</p>

<ul><li><a href="https://ics.media/entry/190902/" target="_blank" rel="noopener noreferrer">JSでのスクロール連動エフェクトにはIntersection Observerが便利</a></li><li><a href="https://www.tamausa-kingdom.net/js-product/other1/index.html" target="_blank" rel="noopener noreferrer">スクロールイベントの時の負荷軽減</a></li></ul>

【サンプルあり】Intersection Observer API でスクロールアニメーションを実装する

<p><u>Swiper</u> にアニメーションを絡める機会が増えてきましたので、<br>今回はスライド上に設置したテキストをアニメーションさせながら表示してみます。<br><br>この手の記事はデモがあったほうが絶対良いので、<br><u>CodeSandBox</u>を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fpvowl&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fpvowl&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fpvowl%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="ha31941844a">表示中のスライドには専用のクラスが追加される</h2><p>表示中のスライドには <code>.swiper-slide-active</code>というクラスが追加されます。</p><pre><code>&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;
...
&lt;div class="swiper-slide"&gt;&lt;/div&gt;</code></pre><p><br>これを利用してアニメーションを実装します。</p><pre><code>.swiper-slide{　opacity: 0　}
.swiper-slide-active{　opacity: 1;　}</code></pre><p><br></p><h2 id="hf75a47eea3">Transitionでも実装は可能</h2><p>今回は <code>animation</code> を使用していますが、<code>transition</code> でも実装は可能です。<br><br><code>.swiper-slide </code>に <code>.swiper-slide-active</code> が追加されることで、<br>アニメーション開始・終了のスタイルが順番に適用され、<br>結果的にアニメーションが再生されたことになります。<br><br>ページの描画完了時に <code>.swiper-slide-active</code>&nbsp;が追加済だった場合、<br>アニメーション終了のスタイルだけが適用されるため、想定とは異なる動作になる恐れがあります。<br><u>CodeSandBox </u>だとこのような動きになってしまうので  <code>animation</code> で実装を行いました。</p><pre><code>.swiper-slide .swiper-catch {
&nbsp; &nbsp; opacity: 0;
&nbsp; &nbsp; transform: translateX(0);
&nbsp; &nbsp; transition: all 0.4s ease;
}
.swiper-slide-active .swiper-catch {
&nbsp; &nbsp; opacity: 1;
&nbsp; &nbsp; transform: translateX(50px);
&nbsp; &nbsp; transition: all 0.4s ease 0.6s;
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><u>Swiper</u> には様々なAPIが用意されておりますが、<br>アニメーションを追加したい場合は、CSSを弄るだけで事足りる場合が多く感じます。<br>スライド上のテキスト以外にもいくつかのアニメーションを実装したので、後日改めて紹介したいと思います。</p>

<ul><li><a href="https://into-the-program.com/swiper-slide-text-fadein/" target="_blank" rel="noopener noreferrer">【Swiper】テキストがフェードインで表示されるスライダーの作り方</a></li></ul>

【サンプルあり】Swiperでスライド上のテキストにアニメーションをつけてみる

<p><code>Composer</code> をインストールして macOSビルトイン の Apache で使用したかったのですが、「PHPのバージョンアップが必要です」と警告文が表示されて使えなかったので、バージョンアップを行いました。<br></p><h2 id="h5d746a97ca">動作環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>macOS mojave 10.14.6
Apache 2.4.34（macOSビルトイン）</code></pre><p><br></p><h2 id="h69dbf3aaeb">バージョンアップ手順</h2><h3 id="hfa8513a82f">Homebrew で PHP をインストールする</h3><p>以下のコマンドを実行し、インストール可能なPHP系のパッケージを確認します。</p><pre><code>$ brew search php

==&gt; Formulae
brew-php-switcher &nbsp; php-cs-fixer&nbsp; &nbsp; &nbsp; &nbsp; php@7.4 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpmyadmin
php ✔ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; php@7.2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phplint &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpstan
php-code-sniffer&nbsp; &nbsp; php@7.3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpmd &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpunit

==&gt; Casks
eclipse-php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; netbeans-php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpstorm</code></pre><p><br>今回は <strong>7.4</strong> をインストールしてみます。パッケージ名のあとに@をつけてバージョンを指定します。</p><pre><code>brew install php@7.4</code></pre><p><br>私の環境では<code>/usr/local/Cellar/php@7.4/7.4.15/lib/httpd/modules/ </code>に  <code>libphp7.so</code> というファイルがダウンロードされました。<br></p><h3 id="h2d8d36cab5">httpd.conf を編集する</h3><p>先程ダウンロードしたファイルを Apache に読み込みさせます。<br><code>/private/etc/apache2/httpd.conf</code> の177行目付近にあるテキストをコメントアウトします。</p><pre><code>#LoadModule php7_module libexec/apache2/libphp7.so</code></pre><p><br>その下に新しくテキストを追加してください。<br>パスは <code>/usr/</code> が起点となっています。間違えると動作しませんので注意してください。</p><pre><code>LoadModule php7_module local/Cellar/php@7.4/7.4.15/lib/httpd/modules/libphp7.so</code></pre><p><br></p><h3 id="h3402b9999f">Apacheを再起動する</h3><p>以下のコマンドで Apache を再起動します。</p><pre><code>sudo apachectl restart</code></pre><p><br>以上で導入は完了です。</p>

macOSビルトインのApacheに使用しているPHPのバージョンを上げる

<p><u>React.js</u> や <u>Vue.js</u> など JavaScriptのフレームワークの解説記事を見ていると、<br><strong>SPA</strong>, <strong>SSR</strong>, <strong>SSG</strong>など見慣れない英単語をよく見かけます。<br><br>意味がイマイチ理解できず不安だったため、<br>いくつかの解説記事を確認してブログの記事としてまとめることにしました。<br><br>調査時に参考にさせていただいたページがありますので、<br>ページ下の「参考にさせていただいたページ」にリンクを貼りました。<br></p><h3 id="hfb87ace3ee">CSR (Client Side Rendering)</h3><p>クライアント（ブラウザ側）で演算やレンダリングを行います。<br>JavaScriptのコード量が増えれば増えるほど処理に時間がかかり、<br>サーバーからのダウンロードにも時間がかかるため、<br>大規模なアプリケーションとなると、ページがなかなか表示されない問題が発生します。<br></p><h3 id="hd9e10bcf81">SSR (Server Side Rendering)</h3><p>サーバー上でHTMLを作成し、クライアントに返却します。<br>ユーザーからのリクエストごとにサーバー側で演算やレンダリングを行うため、<br>クライアント側の負荷は減らせますが、サーバー側の負担が増えます。<br></p><h3 id="hd1f9afee44">SPA (Single Page Application)</h3><p>レンダリングの手法ではなく概念となります。<strong>CSR </strong>と基本的な仕組みは同じで、<br>必要なデータを <code>json</code> で取得し、ページの一部をクライアント側で書き換えることで<br>ネイティブアプリのような高速な動作が実現可能です。<br></p><h3 id="heed7f2a467">SSG (Static Site Generation)&nbsp;</h3><p>あらかじめレンダリング済みのデータをビルドしておき、<br>ユーザーからのリクエスト時にHTMLを返却する手法です。<br><br>サーバー側はリクエスト時にHTMLを返却だけ行えばよいため、<br>余計な処理が行われず、表示が高速になります。<br>アプリケーションサーバーではなく、<strong>CDN </strong>から配信を行うことで更に高速な表示が可能です。<br><br>JavaScriptのフレームワークの <u>Nuxt.js</u> や <u>Next.js</u> にはこの機能が実装されています。<br></p><h3 id="hd0c1c38ee0">ISR (Incremental Static Regeneration)</h3><p><strong>SSG </strong>に自動更新機能を加えた手法です。<br>一定時間ごとにバックグラウンドでデータの再取得、<br>ページの再レンダリングを行い、HTML を再生成 (regenerate) します。<br><br><strong>SSG</strong> はコンテンツの更新を反映させるために、<br>アプリ全体の再ビルドが必要なのに対し、<br><strong>ISR </strong>はバックグラウンドでデータの更新を行うため、<br>アプリ全体の再ビルドが不要となります。<br><br><u>Next.js 9.4</u> から導入された実験的な新機能であり、Vercelにデプロイすることで利用できます。<br></p><h2 id="ha214098e44">まとめ</h2><p>小難しい印象がありましたが、実際にまとめてみるとそれほど難しくはない概念でした。<br>記事にすることでより深く理解できました。</p>

<ul><li><a href="https://qiita.com/akashixi/items/84cd79e090a283bb8c67" target="_blank" rel="noopener noreferrer"><u>SSR、SSG、Client Side Renderingの違いをまとめた</u></a></li><li><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する</a></li><li><a href="https://mizchi.dev/202005182044-awesome-next-issg" target="_blank" rel="noopener noreferrer">Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ</a></li></ul>

SPA, SSR, SSGなどJavaScriptのフレームワークで使用されている略語の意味を調べる

<p>リニューアルにあたり、デザインやフレームワークを一新しました。<br>様々な発見がありましたので、ここに記録しておきます。<br></p><h2 id="h8b83653d7f">デザインの改変</h2><p>旧デザインはトップページが2カラムだったので、1カラムに変更しました。<br>目に入る情報は可能な限り減らして、記事の閲覧に集中できるようにしたほか、<br>夜間でも読みやすくするためダークモードも実装しました。<br></p><h3 id="h5ecf5daf36">旧デザイン</h3><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/old-design-blog.png" alt=""><br></p><h3 id="hb771f524f3">新デザイン</h3><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/new-design-blog.png" alt=""><br><br>ブログのデザインは凝りだすと時間が無限に溶けてしまい、<br>肝心の記事が書けなくなってしまうため、程々にすべきと感じました。<br></p><h2 id="h6b7c2d596f">Nuxt.js から Next.js に乗り換え</h2><p>以前は <a href="https://ja.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt.js</a> を使用してブログを構築していましたが、リニューアルに伴い <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> に移行しました。以下のような印象を受けました。<br></p><h3 id="h3ab24f6f50">メリット</h3><h4 id="h182df68167">ホットリロード機能が優秀</h4><p>Nuxt.js に比べてホットリロードがとても早いです。一瞬で終わります。<br>Next.js 9.4 から <a href="https://github.com/facebook/react/tree/master/packages/react-refresh" target="_blank" rel="noopener noreferrer">React Refresh</a> というパッケージが使われているからだそうです。<br><a href="https://nextjs.org/blog/next-9-4#fast-refresh" target="_blank" rel="noopener noreferrer">公式サイト</a> の更新履歴に詳しい情報が書かれていました。<br></p><h4 id="hf4b7627c9a">エラーの特定が容易</h4><p>Vue.js に比べるとエラーの特定が容易になった感じがあります。<br>問題点の指摘、改善策の提案がかなり具体的で、開発者に優しいフレームワークと感じました。<br></p><h3 id="h7e4a670898">デメリット</h3><h4 id="h3a98d192c0">JSXが受け入れにくい</h4><p><code>class</code> を <code>className</code> と表現したり、JSの式を埋め込めたりと正直受け入れづらかったです。たくさん触って手に馴染ませる必要があります。<br></p><h4 id="h0f53cfbe32">関数型プログラミングの難しさ</h4><p>手続き型プログラミングとは考え方がまったく異なるため、<br>時間はかかりそうですが、メリットもたくさんあるため是非とも取得したい概念です。<br></p><h2 id="h068b5c0e22">Contentful から microCMS に乗り換え</h2><p>ヘッドレスCMSを <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> に乗り換えました。<br><a href="https://www.contentful.com/" target="_blank" rel="noopener noreferrer">Contentful</a> は英語ですが、microCMS は日本語のため使い方がわかりやすく、<br>リッチテキストエディタが使いやすいため、記事を書くのが楽しくなりました。<br>ヘッドレスCMSの導入を考えている方は、まず microCMS から使ってみると良いでしょう。<br></p><h2 id="h78cd50d54d">Netlify から Vercel に乗り換え</h2><p>ホスティングサービスを <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a> に乗り換えました。サービスに関しては Netlify と大差ありませんが、Next.js との親和性が高い印象を受けました。<br></p><h2 id="h1171965eb8">Tailwind CSS を導入</h2><p>日本でも知名度があがってきた ユーティリティファーストなCSSフレームワークを導入しました。数十ページあるWebサイトの構築には不向きですが、コンポーネントの組み合わせで画面を構築する<strong>コンポーネント指向</strong>とはすごく相性が良いと感じました。<br><br>記事を書くのが楽しくなり、Reactについて学ぶこともできたため、<br>乗り換えてよかったと感じています。<br><br>ご閲覧いただき有難うございました。</p>

ブログのリニューアルを実施

<p>React.js で簡単なパンくずリストを作ってみます。<br>Googleで検索しても良い感じのコンポーネントが見つからなかったため、<br>練習も兼ねて自作致しました。<br></p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/reactjs-tailwindcss-breadcrumb.png" alt=""></p><h2 id="h9bbb0bca62"><br>開発環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>React.js 17.0.1
Next.js 10.0.5
Tailwind CSS 2.0.2</code></pre><p><br></p><h2 id="h72cb700925">実装を行う</h2><h3 id="hf40fa70619">アイコンモジュールをインストール（省略可能）</h3><p>矢印には <a href="https://react-icons.github.io/react-icons/" target="_blank" rel="noopener noreferrer">React icons</a> のアイコンを使用していますので、<br>モジュールをインストールします。</p><pre><code>yarn add react-icons</code></pre><p><br></p><h3 id="hf623e49089">コンポーネントを作る</h3><p>Next.js を使用しているため、<code>components/</code>に<code>breadcrumbs.js</code>という名前で配置しました。</p><pre><code>import { FaChevronRight } from "react-icons/fa";

export default function BreadCrumbs({ lists }) {
  if(!lists){ 
    return('')
  }
  
  return (
    &lt;ol className="flex font-bold overflow-x-auto whitespace-nowrap" aria-label="breadcrumb"&gt;
      {lists.map(({ string, path }, index) =&gt; (
          &lt;li className="flex items-center" key={index}&gt;
            {lists.length - 1 !== index 
              ?
              &lt;&gt;
                &lt;a className="text-gray-900 text-sm md:text-base underline" href={path}&gt;{string}&lt;/a&gt;
                &lt;FaChevronRight aria-hidden="true" className="text-xs mx-2"/&gt;
              &lt;/&gt;
              : &lt;span className="text-sm md:text-base" aria-current="page"&gt;{string}&lt;/span&gt;
            }
          &lt;/li&gt;
      ))}
    &lt;/ol&gt;
  );
}</code></pre><p><br></p><h3 id="h1f1e6b8bf5">コンポーネントを呼び出す</h3><p><code>props</code>の<code>lists</code>に連想配列を指定します。<br><code>string</code>にはテキスト、<code>path</code>にはパスを指定します。</p><pre><code>import BreadCrumbs from "../components/breadcrumbs";

&lt;BreadCrumbs 
  lists={[
    {
      string: "トップページ",
      path: "/",
    },
    {
      string: post.title,
    }
  ]}
/&gt;</code></pre><p><br>以上で実装は完了です。<br>ページが大量にある場合は React Router などのルーターと連携するコンポーネントを使用された方が<br>良いかと思われますが、小規模のアプリであればこれでも十分かと思われます。<br>よろしければご活用ください。</p>

React.js + Tailwind CSS で簡単なパンくずリストを作る

<p>microCMS にはリクエスト時にパラメータを付与することで、記事の絞り込みが行えます。<br>今回はこの機能を使って、カテゴリーによる記事の絞り込みを行います。<br><br>記事本文のリクエストを行い、下記のようなレスポンスが帰ってきたとします。</p><pre><code>{
    "id": "test1",
    "title": "テスト記事1",
    "body": "テスト1",
    "category": {
        "id": news",
        "name": "お知らせ"
    },
    "id": "test2",
    "title": "テスト記事2",
    "body": "テスト2",
    "category": {
        "id": other",
        "name": "その他"
    },
}</code></pre><p><br>ここから <strong>お知らせ </strong>の記事だけを取得したい場合、下記のURLにリクエストを行います。</p><pre><code>/api/v1/blogs?filters=category[equals]news</code></pre><p><br><code>[equals]</code>は <strong>id</strong> の値でしか参照することができません。<br>下記のように <strong>name</strong> の値を指定しても何も帰ってこないので注意してください。</p><pre><code>/api/v1/blogs?filters=category[equals]お知らせ</code></pre><p><br><code>[equals]</code>以外にも様々な条件があります。詳しくは<a href="https://blog.microcms.io/filters-parameter/" target="_blank" rel="noopener noreferrer">公式ブログ</a>を確認してください。</p>

<ul><li><a href="https://blog.microcms.io/filters-parameter/" target="_blank" rel="noopener noreferrer">filters: コンテンツを絞り込んで取得できるようになりました</a></li></ul>

microCMSで記事の絞り込みを行う

<p>Advanced Custom Filed で設定したカスタムフィールドの値をURLパラメータを使用して部分一致で検索してみます。<br></p><h2 id="h9bbb0bca62">開発環境</h2><p>下記の環境で動作を確認しました。</p><pre><code>WordPress 5.2.2
LocalbyFlywheel 3.0.4
Advanced Custom Filed 5.8.5</code></pre><p><br></p><h2 id="h59f744c0be">実際のコード</h2><p>カスタムフィールドの名前と値はURLパラメータで指定します。クロスサイトスクリプティング（XSS）には注意してください。</p><pre><code>https://example.com/page/?key=[カスタムフィールド名]&amp;value=[カスタムフィールドの値]</code></pre><p><br>たとえば下記のようなURLの場合、<code>page</code>というカスタムフィールドに<code>tanaka</code>という値が含まれている記事を一括で出力します。</p><pre><code>https://example.com/page/?key=name&amp;value=tanaka</code></pre><p><br>実際のコードは下記の通りになります。コピーして表示させたい場所に貼り付けしてください。</p><pre><code>$key = $_GET["key"];
$value = $_GET["value"];

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'post_type' =&gt; 'post',
  'orderby' =&gt; array( 'meta_value_num' =&gt; 'ASC', 'date' =&gt; 'DESC', ),
  'meta_key' =&gt; $key,
  'meta_query' =&gt; array(
    array(
      'key'=&gt;$key,
      'value'=&gt;$value,
      'compare'=&gt;'LIKE'
    )
  ),
  'posts_per_page' =&gt; 10,
  'paged' =&gt; $paged,
);
$query = new WP_Query( $args );

if( $query -&gt; have_posts()){
  while ( $query-&gt;have_posts() ) {
    $query-&gt;the_post();

    $cat = get_the_category();
    $cat_ttl =  the_title('','', false);
    $cat_name = $cat[0]-&gt;cat_name;
    $post_img = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
    $content = get_the_content();
    $content = wp_trim_words( $content, 78, '[...]' );

    echo $cat_ttl;
    echo $cat_name;
    echo $content;
  }
  $GLOBALS['wp_query']-&gt;max_num_pages = $query-&gt;max_num_pages;
  wp_reset_postdata();
}</code></pre><p><br></p><h2 id="hc499e4ad38">解説</h2><p>まずは変数を指定します。<br><code>$key</code>はカスタムフィールド名、<code>$value</code>はカスタムフィールドの値が入ります。</p><pre><code>$key = $_GET["key"];
$value = $_GET["value"];</code></pre><p><br>設定した変数を使用してサブループの準備を行います。<br><code>meta_query</code>の<code>compare</code>の値を<code>LIKE</code>にすることで部分一致を実現しています。<br>他にも <code>=</code> や <code>!=</code> など様々な指定方法があります。詳しくは公式のリファレンスを確認してください。<br><a style="color:#2e75d4" href="https://wpdocs.osdn.jp/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Meta_Query" target="_blank" rel="noopener noreferrer">クラスリファレンス/WP Meta Query - WordPress Codex 日本語版</a></p><pre><code>$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'post_type' =&gt; 'post',
  'orderby' =&gt; array( 'meta_value_num' =&gt; 'ASC', 'date' =&gt; 'DESC', ),
  'meta_key' =&gt; $key,
  'meta_query' =&gt; array(
    array(
      'key'=&gt;$key,
      'value'=&gt;$value,
      'compare'=&gt;'LIKE'
    )
  ),
  'posts_per_page' =&gt; 10,
  'paged' =&gt; $paged,
);
$query = new WP_Query( $args );</code></pre><p><br>準備が完了したので、実際に出力を行います。<br>記事名, カテゴリ名, 本文しか出力しないように設定していますので、好きなように書き換えしてください。</p><pre><code>if( $query -&gt; have_posts()){
  while ( $query-&gt;have_posts() ) {
    $query-&gt;the_post();

    $cat = get_the_category();
    $cat_ttl =  the_title('','', false);
    $cat_name = $cat[0]-&gt;cat_name;
    $content = get_the_content();

    echo $cat_ttl;
    echo $cat_name;
    echo $content;
  }
  $GLOBALS['wp_query']-&gt;max_num_pages = $query-&gt;max_num_pages;
  wp_reset_postdata();
}</code></pre><p><br>以上になります。お疲れ様でした。</p>

カスタムフィールドの値をURLパラメータを使用して部分一致で検索する

<p><code>git clone</code> を行うと新しくフォルダが作られてしまい、<br>毎回Finderを使って手動で親ディレクトリに移動させるのが面倒くさかったので<br>解決方法がないか調べてみました。<br></p><h2 id="h9f510f3156">やりたいこと</h2><p><code>git clone</code>で現在のディレクトリにファイルを配置したい。<br></p><h2 id="hc354d8821e">方法</h2><p>リポジトリ名の後に <code>.</code> とつけてあげるだけでOKです。<br>現在のディレクトリにファイルが配置されます。</p><pre><code>git clone [リポジトリ名] .</code></pre><p><br>これでFinderを開く必要が無くなります。<br>とても簡単なのでぜひ試してみてください。</p>

11件目 ~ 20件目の記事

カテゴリ