<p>macOS に Webサイト開発環境を構築してみます。<br>Docker などを使用せず、ビルトイン / Homebrewのパッケージ を使用して構築を行います。<br>おそらくモダンな環境ではないと思われますので、ご理解頂いた上で作業を進めてください。<br></p><h2 id="ha0f2addaa6">使用するソフトウェア / 動作環境</h2><p>以下のソフトウェアを使用します。<br>複数のバージョンで動作することを確認しました。<br></p><h3 id="h14d355eaa4">動作確認済のOS</h3><pre><code>macOS Mojave 10.14.6
macOS Catalina 10.15.6
macOS Bigsur 11.6.5</code></pre><p><br></p><h3 id="h85da9d5e42">Apache（ビルトイン）</h3><p>Webサーバー用ソフトウェアとして使用します。<br>nginx でも問題ないと思いますが、動作確認はしていません。<br>動作確認済バージョン: 2.4.34<br></p><h3 id="h232052f62e">MySQL（Homebrewパッケージ）</h3><p>WordPressなどCMSを使用する際に、同時にデータベースも使用する必要があります。<br>local など、数ステップでCMSの環境が構築できるソフトウェアも存在しますが、<br>この記事では手動でのインストールを想定し、MySQLをhomebrew経由でインストールします。<br>動作確認済バージョン: 5.7<br></p><h3 id="h15721b400b">Dnsmasq（Homebrewパッケージ）</h3><p><code>/etc/hosts</code> ではワイルドカード <code>（*）</code> が使用できないため、<br>このパッケージをインストールして名前問題を解決します。<br>動作確認済バージョン: 2.84<br></p><h2 id="h00b8af9eb7">仕様</h2><h3 id="he5e3ab3091">フォルダを追加した瞬間からアクセス可能にする</h3><p>サイトを追加するたびに Apacheを再起動するのは面倒です。<br>フォルダを追加した瞬間にサイトにアクセスでき、Apacheを再起動しなくてもアクセスができるようにします。<br></p><h3 id="h3bc1e7da74">OS起動と同時にアクセス可能にする</h3><p>以前は MAMP を使用していましたが、毎回アプリを起動させるのが面倒だったため、<br>OS起動と同時にアクセスできるようにします。<br></p><h3 id="hde2ef02f35">URLを親フォルダの名前にする</h3><p><code>http://localhost:8001</code> などポートによる割当ではなく<br><code>http://example.test</code> などサイト固有のドメインでアクセス出来たほうがわかりやすいです。<br>フォルダの名前がそのままURLになるような仕様にします。</p><pre><code>cafe/ =&gt; cafe.test
example/ =&gt; example.test</code></pre><p><br></p><h3 id="h04acdeca4b">ドメイン名は .test にする</h3><p>dev や .app などより具体的な名前もありますが、<br>Chrome だと強制的に https で接続されてしまいます。<br><a href="https://glatchdesign.com/blog/troubleshooting-chrome-dev-domain/" target="_blank" rel="noopener noreferrer">Chromeで「.dev」ドメインのサイトが強制的にhttpsになる原因と解決法</a><br><br>ローカル開発環境上でのSSL化は必要性が薄く、設定に少々手間がかかるため、<br>今回は開発環境として判別しやすい<strong> .test </strong>を ドメイン名とします。<br></p><h2 id="h7e3a52fc06">インストール手順</h2><p>既に他のサイト様で多数紹介されていますので、<br>URLの紹介 + 私が行った手順を記述しておきます。<br></p><h3 id="h4696f31bb3">Apache</h3><p>以下のサイトを参考にさせて頂きました。<br><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">macOS に標準インストールされている Apache httpd を利用する方法</a></p><pre><code># Apache のインストール先フォルダを確認
$ which httpd
&gt; /usr/sbin/httpd

# apachectl のインストール先フォルダを確認
$ which apachectl
&gt; /usr/sbin/apachectl

#  Apache のバージョンを確認
$ /usr/sbin/httpd -version
&gt; Server version: Apache/2.4.25 (Unix)
&gt; Server built: Feb 6 2017 20:02:10

# apachectl 経由で Apache を起動
$ sudo /usr/sbin/apachectl start

* http://localhost にアクセスし、「It works!」と表示されれば起動が完了しています。
* Apache を停止する場合は、以下のコマンドを実行してください。
* $ sudo /usr/sbin/apachectl stop

# macOS起動時にApacheを自動起動させる
$ sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

* Apache httpd の自動起動を止めたい場合は、次のコマンドで設定できます。
* $ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist</code></pre><p>次に <code>/private/etc/apache2/httpd.conf</code> の編集を行います。<br>私は以下の記述のコメントアウトを解除しました。</p><pre><code>LoadModule include_module libexec/apache2/mod_include.so
LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
LoadModule php7_module libexec/apache2/libphp7.so

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

#
# Filters allow you to process content before it is sent to the client.
#
# To parse .shtml files for server-side includes (SSI):
# (You will also need to add "Includes" to the "Options" directive.)
#
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml</code></pre><p>最後に <code>/private/apache2/extra/httpd-vhost.conf</code> を編集します。<br><code>/Users/tyai-a/sites/</code> の部分は各々書き換えをお願いします。</p><pre><code>&lt;VirtualHost *:80&gt;
&nbsp; &nbsp; ServerAlias *.test
&nbsp; &nbsp; VirtualDocumentRoot /Users/tyai-a/sites/%1
&nbsp; &nbsp; &lt;Directory /Users/tyai-a/sites/*&gt;
&nbsp; &nbsp; &nbsp; &nbsp; Options Includes FollowSymLinks
&nbsp; &nbsp; &nbsp; &nbsp; AllowOverride All
&nbsp; &nbsp; &nbsp; &nbsp; Require all granted
&nbsp; &nbsp; &nbsp; &nbsp; AddType text/html .html
&nbsp; &nbsp; &nbsp; &nbsp; AddOutputFilter INCLUDES .html
&nbsp; &nbsp; &nbsp; &nbsp; Require ip 127.0.0.1 ::1
&nbsp; &nbsp; &lt;/Directory&gt;
&lt;/VirtualHost&gt;</code></pre><h4 id="hcf83e1357e"><br></h4><h3 id="h7605ccc377">その他のオプション</h3><p>必要に応じて使用してください。</p><h4 id="h8a5f213f8c">SSIの構文を2.2.x以前のものに切り替える（任意）</h4><pre><code>SSILegacyExprParser on</code></pre><h4 id="h8311fbb339">.html拡張子でphpを実行する（任意）</h4><p>拡張子が <code>.php</code> 以外のファイルでもPHPの実行が可能となります。</p><pre><code>AddType application/x-httpd-php .php .html</code></pre><p><br></p><h3 id="h7d3a797f05">MySQL 5.7 ※22/08/22追記</h3><p>以下のサイトを参考にさせて頂きました。<br>パスワードを設定していない rootユーザー での使用を想定しています。<br>言うまでもありませんが、本番環境ではこのような設定にすべきではないです。<br><a href="https://weblabo.oscasierra.net/mysql-57-homebrew-install/" target="_blank" rel="noopener noreferrer">MySQL5.7をHomebrewでmacOSにインストールする手順 |</a></p><pre><code># MySQL 5.7 が存在しているか確認
$ brew search mysql@5.7

＃　MySQL 5.7 のインストール
$ brew install mysql@5.7

# パスを通す
$ echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' &gt;&gt; ~/.bash_profile

# MySQL を起動します。この作業を行わない場合、以下のようなエラーが表示されます。
# ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
$ brew services start mysql@5.7

# root でログインします。
#　mysql とだけ入力してログインしようとすると、以下のようなエラーが表示されます。
＃　ERROR 1045 (28000): Access denied for user 'xxxxx'@'localhost' (using password: NO)
$ mysql -uroot

# 以下のように表示されれば成功です。
Welcome to the MySQL monitor.&nbsp; 
Command ... help. Type '\c' to clear the current input statement.
mysql&gt;

# quit と入力して終了してください。
mysql&gt;quit</code></pre><p>次に <code>/usr/local/etc/my.cnf</code><span style="color:#383838"> を編集します。</span><br>最終行に以下の設定を書き換え加えてください。</p><pre><code>character-set-server=utf8</code></pre><p>以上でMySQL側の設定は完了です。<br></p><h4 id="h843a164e78">PHPMyAdminをインストール</h4><p>最後に PHPMyAdmin をインストールしてデータベースをGUIで確認できるようにします。<br><a href="https://www.phpmyadmin.net/" target="_blank" rel="noopener noreferrer">公式サイト</a>からZIPファイルをダウンロードし、解凍後に指定したドキュメントルートへ設置します。<br><br>私の環境ではエラーでログインできなかったため、設定ファイルを書き換えました。<br>設定ファイルは <code>phpmyadminフォルダ/config.sample.inc.php</code> となります。<br>名前を <code>config.inc.php</code> に書き換え後、23行目付近を以下のように書き換えてください。<br>ホスト を 127.0.0.1 とし、パスワードなしでログイン可能なようになります。</p><pre><code>$cfg['Servers'][$i]['host'] = '127.0.0.1';  // locahost =&gt; 127.0.0.1
$cfg['Servers'][$i]['AllowNoPassword'] = true; // false =&gt; true </code></pre><p>以上でPHPMyAdminの設定は完了です。<br>その後、ユーザー名を root パスワードを空白の状態にしてログインを行います。<br>問題なければログインに成功し、データベースの一覧が出力されるはずです。<br></p><h3 id="h1151dab6c1">Dnsmasq</h3><p>以下のサイトを参考にさせて頂きました。<br><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">Mac用にDnsmasqでローカル開発用のドメイン(*.test)を設定する</a></p><pre><code># HomebrewでDnsmasqをインストール
$ brew install dnsmasq

# Dnsmasq設定
# *.testドメインをローカルループバックアドレスとして解決する
$ echo 'address=/.test/::1' &gt;&gt; $(brew --prefix)/etc/dnsmasq.conf
$ echo 'address=/.test/127.0.0.1' &gt;&gt; $(brew --prefix)/etc/dnsmasq.conf

# MacのDNS設定
# *.testドメインの名前解決をローカルのDnsmasqに任せる
$ sudo mkdir -v /etc/resolver
$ sudo bash -c 'echo "nameserver ::1" &gt;&gt; /etc/resolver/test'
$ sudo bash -c 'echo "nameserver 127.0.0.1" &gt;&gt; /etc/resolver/test'

# Dnsmasqの自動起動設定＋起動
$ sudo brew services start dnsmasq

# 名前解決ができることを確認
$ ping test.test&nbsp;
$ ping6 test.test

# Dnsmasqの再起動（設定ファイルの再読込のために必要）
$ sudo brew services restart dnsmasq

# Dnsmasqを停止＋自動起動無効化
$ sudo brew services stop dnsmasq</code></pre><p><br></p><h4 id="hf3ed4173c3">/etc/resolver について</h4><p><code>/etc/resolver</code> に設定したいドメイン名と同じファイルを作成することで<br>個別にDNSを設定が可能なようです。<br><a href="http://nauthiz.hatenablog.com/entry/20100929/1285778758" target="_blank" rel="noopener noreferrer">MacのDNSを設定</a><br></p><h3 id="h782687e29f">パーミション600 のファイル表示時に 403 となる ※22/06/16追記</h3><p>デフォルトの設定ではパーミションが600のファイルが表示できません。<br>GoogleDriveFileStream などからファイルをコピペした際に発生します。<br>解決するには <code>/private/etc/apache2/httpd.conf</code> を開き、202行目の付近を以下のように編集してください。</p><pre><code>User ユーザー名
Group staff</code></pre><p><br>ユーザー名は <code>/Users/{ユーザー名}</code> から確認可能です。<br>書き換え後、以下のコマンドを実行して apache を再起動してください。<br>その後、ブラウザなどで正しく表示できるか確認してください。</p><pre><code>$ sudo apachectl -k restart</code></pre><p><br>以上で導入は完了です。快適な開発ライフをお楽しみください。</p>

<ul><li><a href="https://glatchdesign.com/blog/troubleshooting-chrome-dev-domain/" target="_blank" rel="noopener noreferrer">Chromeで「.dev」ドメインのサイトが強制的にhttpsになる原因と解決法</a></li><li><a href="https://weblabo.oscasierra.net/apache-macos-usage/" target="_blank" rel="noopener noreferrer">macOS に標準インストールされている Apache httpd を利用する方法</a></li><li><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">Mac用にDnsmasqでローカル開発用のドメイン(*.test)を設定する</a></li></ul>

macOS に Webサイト制作用の開発環境を構築する

<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>

11件目 ~ 20件目の記事

カテゴリ