<p>数ヶ月ぶりに記事を投稿したところ、Vercelから「デプロイに失敗しました」という内容のメールが届きました。<br>Vercelにアクセスしてログを確認すると、以下のようなエラーが出力されていました。<br></p><blockquote>Error: Node.js Version "12.x" is discontinued and must be upgraded. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.</blockquote><p>どうやら 12.x はサポートが終了したようです。<br><br>詳しく調べてみると、2022/10/03 にサポート終了の告知が公式ブログでなされていたようです。</p><blockquote>On October 3rd 2022, Node.js 12 will be disabled in the Project Settings and existing Projects that have Node.js 12 selected will render an error whenever a new Deployment is created. The same error will show if the Node.js version was configured in the source code.Node.js 12 is being deprecated</blockquote><p><a href="https://vercel.com/changelog/node-js-12-is-being-deprecated" target="_blank" rel="noopener noreferrer">Node.js 12 is being deprecated – Vercel</a><br>この機会に 18.x にアップデートしてみます。<br></p><h2 id="h8bb68ed570">Node.jsのアップデート</h2><p>まず、ローカル環境の Node.js を 18.x に更新してみます。<br>私の環境ではバージョン管理ツール Nodenv を使用しているため、<br>以下の方法は参考にならない可能性があります。<br>それぞれの構築方法に合わせてアップデートを行ってください。<br><br>まず、Nodenvからインストールできるバージョンを確認します。</p><pre><code>$nodenv install -l</code></pre><p><br>18.x の中で最もバージョンが新しい、18.12.0 をインストールすることにしました。<br>以下のコマンドを実行してインストールを行います。</p><pre><code>$nodenv install 18.12.0
$nodenv rehash</code></pre><p><br>正常にインストールできているか確認します。リストに 18.12.0が表示されれば成功しています。</p><pre><code>$nodenv versions
* 12.22.12
  18.12.0</code></pre><p><br>普段は 12.x で開発を行っているため、当ブログの開発にのみ使用するように設定します。<br>全体で使用したい場合は  <code>$nodenv global XX.XX.XX</code> というコマンドを実行してください。</p><pre><code>$nodenv local 18.12.0</code></pre><p><br>ルートディレクトリにバージョンのみ記載された .node-versions というファイルが作成されれば成功です。</p><pre><code>18.12.0</code></pre><p><br></p><h2 id="h08a3eb7c23">パッケージのアップデート</h2><p>アップデートが完了したのでパッケージのインストール後に起動してみましたが、<br>12.x で動作するよう構成されているため、エラーが出力されて動作しませんでしたので、<br>インストールされているパッケージのアップデートを行います。<br>私の環境では yarn v1 を使用してアップデートを行いました。<br><br><code>npm-check-updates</code>というパッケージをインストールします。<br>インストールされているパッケージの一括アップデートが可能となります。</p><pre><code>$yarn add npm-check-updates</code></pre><p><br>続いて以下のコマンドを実行します。<br>アップデートが必要なパッケージがリストアップされます。</p><pre><code>$yarn ncu</code></pre><p><br>続いて以下のコマンドを実行し、アップデートを行います。</p><pre><code>$yarn ncu -u</code></pre><p><br>成功すると package.json が書き換わります。<br>再度パッケージのインストールを実行します。</p><pre><code>$yarn install</code></pre><p><br>インストールが完了後、next.js を起動してみます。<br>エラーが出力されなくなったのでアップデート作業は完了です。</p><pre><code>$yarn dev</code></pre><p><br></p><h2 id="h14588fc126">Vercelで使用するNode.jsのバージョンを変更する</h2><p>最後にVercelで使用するNode.jsのバージョンを変更します。これは管理画面から変更が可能です。<br>バージョンを変更したいプロジェクトにアクセス後、Setting をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/dc390a12c6fb4365aa21e8d506901ae3/vercel-dashboard-node.png?w=1287&amp;h=604" alt="Vercelの管理画面"><br>General の Node.js Version の値を 18.X に設定すれば作業は完了です。</p>

Vercel で使用する Node.js のバージョンを 12.X から  18.X にアップデートする

<p>さくらVPSにCPANをインストールし、Perlのモジュールをインストールできるようにしてみます。<br>MovableType をインストールしたかったのですが、モジュールの不足でエラーが出力されたので導入ついでに記事を書きました。<br></p><h2 id="h79513e3015">CPANとは？</h2><blockquote><strong>CPAN</strong>（シーパン、<strong>C</strong>omprehensive <strong>P</strong>erl <strong>A</strong>rchive <strong>N</strong>etwork）とは、<a href="https://ja.wikipedia.org/wiki/Perl" target="_blank" rel="noopener noreferrer">Perl</a>の<a href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" target="_blank" rel="noopener noreferrer">ライブラリ</a>・<a href="https://ja.wikipedia.org/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB" target="_blank" rel="noopener noreferrer">モジュール</a>やその他のPerlで書かれたソフトウェアを集めた巨大な<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96" target="_blank" rel="noopener noreferrer">アーカイブ</a>で、世界中の<a href="https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%BC%E3%83%90" target="_blank" rel="noopener noreferrer">サーバ</a>にその内容が<a href="https://ja.wikipedia.org/wiki/%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0" target="_blank" rel="noopener noreferrer">ミラーリング</a>されている。再利用性・汎用性の高いモジュールが登録されており、Perlプログラマができるだけ<a href="https://ja.wikipedia.org/wiki/%E8%BB%8A%E8%BC%AA%E3%81%AE%E5%86%8D%E7%99%BA%E6%98%8E" target="_blank" rel="noopener noreferrer">車輪の再発明</a>をせずに済むための支援環境となっている。</blockquote><p>Perlのモジュールをコマンドからインストールできるようにするプログラムとなります。<br><a href="https://ja.wikipedia.org/wiki/CPAN" target="_blank" rel="noopener noreferrer">CPAN - Wikipedia</a><br></p><h2 id="h705f30e492">検証環境</h2><p>以下の環境で検証を実施しました。</p><pre><code>・CentOS Linux release 7.9.2009 (Core)</code></pre><p><br>CentOS のバージョン確認は以下のコマンドを実行してください。</p><pre><code>[XXX@XX-XXX-XXXX]# cat /etc/redhat-release</code></pre><p><br></p><h2 id="h6c90ec4024">導入手順</h2><p>まず、yum を使用して CPAN をインストールします。<br>rootユーザーで実行してください。</p><pre><code>[XXX@XX-XXX-XXXX]# yum -y install perl-CPAN</code></pre><p><br>つづいて CPAN を実行します。</p><pre><code>[XXX@XX-XXX-XXXX]# cpan</code></pre><p><br>実行後、以下のような長文が出力され、最後に質問されるので yes と入力します。</p><pre><code>CPAN is the world-wide archive of perl resources...
(中略)
Would you like me to configure as much as possible automatically? [yes] yes</code></pre><p><br>入力後、いくつか質問されますのですべて yes と入力していきます。<br>デフォルトが yes のため、入力せずにそのままエンターを押しても問題ありません。<br>その後、以下のようなテキストが出力されます。これでセットアップは完了です。</p><pre><code>cpan[1]&gt;</code></pre><p><br></p><h3 id="h51049a6b64">モジュールをインストールする</h3><p>さっそくモジュールをインストールしてみます。<br>ここでは HTML::Entities というモジュールをインストールしてみます。</p><pre><code>cpan[1]&gt; install HTML::Entities</code></pre><p><br>インストール状況を示すテキストが大量に出力されますので待機します。<br>その後以下のテキストが出力されればインストールは完了です。</p><pre><code>cpan[2]&gt;</code></pre><p><br></p><h3 id="h3cd954e103">CPANを終了する</h3><p>作業が完了したので CPAN を終了します。以下のコマンドを実行することで終了します。</p><pre><code>cpan[2]&gt; exit</code></pre><p><br></p><h3 id="h359aee1f05">CPANを再度起動したいときは</h3><p>CPANを再度起動したいときは cpan と入力すれば起動可能です。</p><pre><code>[XXX@XX-XXX-XXXX]# cpan</code></pre><p><br>以上となります。<br></p>

さくらVPSにCPANをインストールしてみる

<p>非常に小さな気付きですが、覚書として残しておきます。<br><br>MovableTypeのテンプレートに記事のURLを記述する場合、<br>URLを直書きしてもいいですが、記事のパーマリンクが編集された場合は<br>リンク切れとなってしまいます。修正には手動でテンプレートを編集する必要があります。</p><pre><code>&lt;a href="../blog/2022/03/news.html"&gt;&lt;/a&gt;</code></pre><p><br>受注案件などではクライアント側がパーマリンクを変更される機会も考えられるため、<br>自動で反映されるような仕様にすべきです。<br><br><code>&lt;MTEntires&gt;</code> の<code>id</code> モディファイアを使用することで<br>パーマリンクが自動で反映される仕様になります。</p><pre><code>&lt;mt:Entries id="112233"&gt;
  &lt;a href="&lt;$mt:EntryPermalink$&gt;"&gt;&lt;/a&gt;
&lt;/mt:Entries&gt;</code></pre><p><br><a href="https://www.movabletype.jp/documentation/appendices/tags/entries.html" target="_blank" rel="noopener noreferrer">MTEntries - テンプレートタグリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト</a><br><br>記事のIDを調べる手間が発生しますが、リンク切れを事前に防ぐことが可能なため、<br>基本的にはこのような仕様で実装するようにしましょう。</p>

MovableTypeのテンプレートに記事のパーマリンクを直書きしないほうがよい

<p>macOS Catalina に CSSフレームワーク Compass をインストールしようとしたところ、<br>想像以上に手間取ってしまいました。<br><br>解決方法について日本語での情報がなかったため、まとめて記事として投稿することにしました。<br></p><h2 id="h98229beb66">Compassとは</h2><p>Compass は CSSフレームワークです。<br>SCSSと併用することで利用可能で、ベンダープレフィックスの自動付与、<br>CSSスプライトの自動作成など便利な機能がたくさん実装されています。<br><a href="http://compass-style.org/" target="_blank" rel="noopener noreferrer">Compass Home | Compass Documentation</a><br><br>2009年に作られたフレームワークであり、CSS3が普及し始めた頃にはよく使われていたようですが、<br>時代が進み、ブラウザの進化・より高機能な代替ソフトが開発された結果、<br>利用される機会がどんどん減り、2016年に開発が停止したという過去があります。<br><a href="https://tech.pepabo.com/2018/03/15/bye-bye-compass/" target="_blank" rel="noopener noreferrer">Compass の送別会 - ペパボテックブログ</a><br></p><h2 id="h705f30e492">検証環境</h2><p>以下の環境で検証をおこないました。</p><pre><code>macOS　Catalina 10.15.7</code></pre><p><br></p><h2 id="h04f8f4ecae">発生した問題</h2><p>Compass は gem形式 で提供されているため、Ruby を使用します。<br>macOS ビルトインの Ruby では gem のアップデートやインストールに失敗してしまいました。<br><br>公式サイトのインストール手順ページに沿って作業を進めました。<br><a href="http://compass-style.org/install/" target="_blank" rel="noopener noreferrer">Install the Compass Stylesheet Authoring Framework | Compass Documentation</a><br><br>まずは gemコマンド で Compass のインストールを試みます。</p><pre><code>gem install compass</code></pre><p><br>以下のようなエラー文が出力されました。</p><pre><code>ERROR:&nbsp; While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.</code></pre><p><br>エラー文的にパーミションの問題であると判断したため、<br>sudo をつけてコマンドを実行してみました。</p><pre><code>sudo gem install compass</code></pre><p><br>今度は別のエラーによりインストールが完了しませんでした。</p><pre><code>ERROR: Error installing compass:
ERROR: Failed to build gem native extension.</code></pre><p><br></p><h2 id="had0b1b94af">解決方法</h2><p>手詰まり状態となったため、Googleで解決方法について調査したところ、<br>StackOverflowに解決方法が紹介されていました。<br><a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a><br><br>ビルトインの ruby を使用していることが原因なので、<br>rbenv 経由の ruby を使用してこの問題を回避します。<br><br>作業内容としては、Homebrew経由 で ruby をインストールしてパスを通し、<br>その後 rbenv をインストールし、rbenv を経由した ruby で gem のインストールを行います。<br><br>直接的な問題解決ではありませんが、Compass の使用が目的であるため、<br>あまり時間をかけるべき作業ではないと判断し、StackOverflowの手法に従いました。<br></p><h3 id="h13341b39a0">rbenvとは</h3><p>rubyのバージョン管理ができるソフトウェアです。<br>node.js 用に開発された nodenv など言語ごとに存在しています。<br></p><h3 id="h8676c207ae">作業手順</h3><p>1から順に実行してください。</p><pre><code>1.  brewパッケージのアップデート
brew update

2. ruby を homebrew でインストール
brew install ruby

# bash を使用している場合
echo 'export PATH=/usr/local/Cellar/ruby/(インストールされたバージョンを入力)/bin:$PATH' &gt;&gt; ~/.bash_profile
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

3. rbenv と ruby-build を homebrew でインストール
brew install rbenv ruby-build

# bash を使用している場合
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.bash_profile
echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.bash_profile  
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

4. rbenv でインストール可能な ruby のバージョンをリストアップ
rbenv install -l

5. ruby 2.4.1 をインストール
rbenv install 2.4.1

# 特定のディレクトリで使用する ruby のバージョンを指定
rbenv local 2.4.1
# システム全体で使用する ruby のバージョンを指定
rbenv global 2.4.1

6. rbenv にインストールした ruby を認識させる
rbenv rehash</code></pre><p><br>rbenv を経由した ruby では gem のアップデートやインストールが問題なく実行できました。<br>Compass をインストールしてみます。</p><pre><code>1. gem のアップデート
gem update --system

2. conpass をインストール 
gem install compass</code></pre><p><br>インストールも正常に完了したため、Compassを使用してSCSSのコンパイルを実行してみます。<br>プロジェクトのルートディレクトリに <code>config.rb</code>  を作成し、以下のように記述します。</p><pre><code>http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded 
relative_assets = true
line_comments = false</code></pre><p><br>SCSSファイルに以下の文を記述します。</p><pre><code>@import 'compass/css3/';</code></pre><p><br>ターミナルで以下のコマンドを実行します。</p><pre><code>compass w</code></pre><p><br>これでSCSSファイルが更新された際にコンパイルが行われるようになりました。</p>

<ul><li><a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a></li></ul>

macOS Catalina に Compassをインストールしようとしたら詰まった件

<p>jQueryでドロップダウンメニューを実装してみます。<br></p><h2 id="h5a59f43619">ドロップダウンメニューとは</h2><p>プルダウンメニューとも呼ばれます。Webに限らずソフトウェアやアプリなど様々な場面でよく見かけるUIの一種です。</p><blockquote>プルダウンメニューとは、ソフトウェアやWebサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。<br>ロールスクリーンを下ろすような動作で展開されるため「プルダウン」や「ドロップダウン」などと呼ばれている。</blockquote><p><a href="https://www.weblio.jp/content/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC#:~:text=%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2,%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82" target="_blank" rel="noopener noreferrer">「ドロップダウンメニュー」の意味や使い方 Weblio辞書</a><br></p><h2 id="h5ef7d69a3b">成果物</h2><p>1からCSSを書くのは時間がかかるので <strong>Bootstrap5</strong> のCSSをお借りました。<br>操作形態が異なるため、PCではマウスオーバー、モバイルではタップで展開するような仕様となっております。<br></p><h3 id="hce947c89f2">ナビゲーションの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクは折りたたまずに横並びで表示します。<br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクを折りたたんで縦並びで表示します。<br> </p><h3 id="heb4384662b">ドロップダウンメニューの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクに<span style="color:#333333">マウスポインタが重なった際に展開を行います。</span><br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクをクリックした際に<span style="color:#333333">展開を行います。</span></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjs6we&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjs6we&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjs6we%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="h109f43f351">必要なHTMLを記述</h2><h3 id="h63091202a2">全体のHTML</h3><p>ナビゲーションも含めた全体のHTMLとなります。<br>まるごとコピペ頂いて問題ありません。</p><pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="navbar-nav ms-auto mb-2 mb-lg-0"&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown navbar-dropdown"&gt;
            &lt;a
                class="nav-link dropdown-toggle navbar-dropdown-toggle"
                href="#"
                role="button"
            &gt;
                Dropdown
            &lt;/a&gt;
            &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
                &lt;li&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre><h3 id="ha78001c723">ドロップダウンメニューの動作に必要なHTML</h3><p>PCでは  <code>.navbar-dropdown</code> にマウスポインタが重なるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown-toggle</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューに<br>マウスポインタを移動させた際に非表示となってしまいます。<br><br>モバイルでは<code>.navbar-dropdown-toggle</code> にクリックされるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューをクリックした際に<br>非表示となってしまいます。<br><br>PCではドロップダウンメニュー全体、モバイルではリンク項目にだけイベントリスナーを設定しているイメージです。</p><pre><code>&lt;li class="nav-item dropdown navbar-dropdown"&gt;
    &lt;a
        class="nav-link dropdown-toggle navbar-dropdown-toggle"
        href="#"
        role="button"
    &gt;
        Dropdown
    &lt;/a&gt;
    &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
        &lt;li&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;</code></pre><p><br></p><h3 id="hcb7430d109">必要なJavaScriptを記述</h3><p>まるごとコピペ頂いて問題ありませんが、<br>1行目から3行目については ES modules の記法となるため、<br>不要であれば削除頂いても問題ありません。</p><pre><code>import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";


/**
 * ナビゲーションの開閉処理を有効化
 */
const enableNavBarToggle = () =&gt; {
    $(".navbar-toggler").on("click", function () {
        $(".navbar-collapse").slideToggle();
    });
};


/**
 * ナビゲーションの開閉処理を無効化
 */
const disableNavBarToggle = () =&gt; {
    $(".navbar-toggler").off();
};


/**
 * ナビゲーション内のドロップダウンメニューを有効化
 *
 * stop()
 * 第一引数: 現在のアニメーションをゴールまでジャンプさせるか否か
 * 第二引数: 待機状態のアニメーションを破棄するか否か
 */
const enableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").on({
        mouseover: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
        },
        mouseleave: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
        },
    });
};


/**
 * ナビゲーション内のドロップダウンメニューを無効化
 */
const disableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").off();
};


/**
 * ナビゲーション内のプルダウンメニュー処理を有効化
 */
const enablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").on("click", function () {
        $(this).next().slideToggle();
    });
};


/**
 * ナビゲーション内のプルダウンメニュー処理を無効化
 */
const disablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").off();
};


/**
 * 画面幅によって有効化と無効化する処理を振り分け
 */
const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
        disableDropDownMenuNavBar();
        enableNavBarToggle();
        enablePullDownMenuNavBar();
    } else {
        // 768px以上
        disableNavBarToggle();
        disablePullDownMenuNavBar();
        enableDropDownMenuNavBar();
    }
};
mediaQueryList.addEventListener("change", listener);


/**
 * 処理の開始
 */
$(function () {
    listener(mediaQueryList);
});</code></pre><h3 id="hbfde2b377d">ブラウザ幅の取得について</h3><p><code>resize</code>はブラウザに負担がかかるため、間引き処理を実装する必要が出てきます。</p><pre><code>$(window).on('load resize', function(){
 // 処理を記述
});</code></pre><p>そのため、ブラウザ幅がブレイクポイントより 大きく or 小さく なったときに1度だけ実行される<br><code>window.matchMedia</code> をここでは使用しています。</p><pre><code>const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
    } else {
        // 768px以上
    }
};
mediaQueryList.addEventListener("change", listener);</code></pre><h3 id="h63be7e2d99">イベントの登録について</h3><p>今回は <code>on</code> メソッドを使用して実装していますが、<code>hover</code> メソッドを使用して実装することも可能です。</p><pre><code>$(".navbar-dropdown").hover(
      function() {
        // mouseover
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
      }, function() {
        // mouseleave
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
      }
);</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>毎回ググってスクラッチで実装するのは時間の無駄なため、<br>記事として登録してすぐに参照できるように致しました。<br><br>実案件ではこのような仕様で実装をよく行うため、<br>よろしければご活用ください。</p>

<ul><li><a href="https://rinblog.org/jquery-drop-down-menu/" target="_blank" rel="noopener noreferrer">【jQuery】ドロップダウンメニューを簡単に実装する【2つ】</a></li></ul>

jQueryでドロップダウンメニューを実装する

<h2 id="h07e1c30a1d">ページネーションとは</h2><p>情報がたくさんあり、そのまま表示してしまうと読みづらいため、<br>ページを分割して情報を読みやすくするコンポーネントのことを指します。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/9fd12ca9e37343f5a694b83e3d0efde9/example-pagination.png" alt=""><br><br>Googleの検索結果ページの一番下などにも設置されており、<br>日常的に使用されているのはないでしょうか。<br>今回はES2015(ES6)を使用して、このコンポーネントを作成してみたいと思います。<br></p><h2 id="h5ef7d69a3b">成果物</h2><p>CodeSandboxを使用して実装致しました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F16luq&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2F16luq&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F16luq%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><h3 id="hcf83e1357e"><br></h3><h2 id="hc499e4ad38">解説</h2><h3 id="h109f43f351">必要なHTMLを記述</h3><pre><code>&lt;div class="container"&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-total"&gt;&lt;/span&gt;件中
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-range-text"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-prev"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 前へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-next"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 次へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav id="js-pagination-result-range"&gt;&lt;/nav&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 現在のページ: &lt;span id="js-pagination-current"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="heab1cdbf79">必要なJavaScriptを記述する</h3><p>jQueryは使用せず、ES2015(ES6)で書きました。<br>IE11などレガシーブラウザではそのままでは動作しません。<br>Babelなどを用いてトランスパイルしてください。</p><pre><code>// 前へ_DOM指定
const prevButton = document.getElementById("js-button-prev");
// 次へ_DOM指定
const nextButton = document.getElementById("js-button-next");

// 総数
const globalTotalItem = 100;
// 1ページに表示したい件数
const PER_PAGE = 10;
// 初期ページ
var initialPage = 0;
// 現在のページ
var currentPage = 0;

// 配列を任意の数だけ作成
const range = (start, end) =&gt; {
  const array = [...Array(end - start + 1)].map((_, i) =&gt; {
    return start + i;
  });
  return array;
};

// 閲覧中の情報の件数の範囲を表示
const rangeCurrentPage = () =&gt; {
  if (!globalTotalItem) return;
  const start = currentPage * PER_PAGE + 1;
  const text =
    (currentPage + 1) * PER_PAGE &lt; globalTotalItem
      ? `${start}件〜${(currentPage + 1) * PER_PAGE}件目を表示`
      : `${start}件〜${globalTotalItem}件目を表示`;
  return text;
};

// 前へボタン_アクション
prevButton.addEventListener("click", () =&gt; {
  if (initialPage &gt;= currentPage) return;
  currentPage = currentPage - 1;
  render();
});
// 次へボタン_アクション
nextButton.addEventListener("click", () =&gt; {
  if (PER_PAGE * (currentPage + 1) &gt;= globalTotalItem) return;
  currentPage = currentPage + 1;
  render();
});

// レンダリング
const render = () =&gt; {
  document.getElementById(
    "js-pagination-result-total"
  ).innerHTML = globalTotalItem;
  document.getElementById("js-pagination-result-range").innerHTML = range(
    1,
    Math.ceil(globalTotalItem / PER_PAGE)
  );
  document.getElementById(
    "js-pagination-result-range-text"
  ).innerHTML = rangeCurrentPage();
  document.getElementById("js-pagination-current").innerHTML = currentPage + 1;
};

render();</code></pre><p><br>ここまでに紹介したHTMLとJSをコピペいただければ<br>問題なく動作するはずです。<br>ページ番号にリンクは指定されていないため、必要であれば自身で追加をお願いします。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>もともと「○○件中 ○○件 ~ ○○件を表示」のテキストを出力するためスクリプトでしたが、<br>それだけではテストしづらいため、ページ番号を操作できるパーツをいくつか追加致しました。</p>

JavaScript(ES6) でページネーションを作成する

<h2 id="h1897a1eff6">開発環境について</h2><p>以下の環境、ソフトウェアで開発を行いました。<br>Ant Desing はUIライブラリのため必須ではありませんが、<br>TODOアプリに最低限必要なコンポーネントがすべて用意されているため、<br>開発期間の短縮を目的に使用させていただきました。</p><pre><code>React 17.0.2
Redux 7.2.4
Ant Desing 4.16.6</code></pre><p><br></p><h2 id="h5ef7d69a3b">成果物</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fhskwg&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fhskwg&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fhskwg%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="h00558bbc38">Reduxについて</h2><p>歴史のあるライブラリのため、<a href="https://redux.js.org/tutorials/fundamentals/part-1-overview" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>も充実していますし、<br>わかりやすく紹介されているブログもたくさんあるため、ここでは簡単な説明のみを行います。<br></p><h3 id="ha86a6bfbe6">Reduxとは</h3><p><strong>Action</strong> と呼ばれるイベントを使用してアプリケーションの状態の管理や更新を行うライブラリです。<br><br><strong>Store</strong> と呼ばれる大きな箱が1つだけ用意されており、そこで <strong>State</strong> の管理を行います。<br>どのコンポーネントからでも取得と更新が可能であるため、<br>個々のコンポーネントの状態管理としては使用せず、<br><strong>アプリケーション全体の状態管理</strong>として使用するのに適しています。<br><br><strong>Store </strong>の更新には大きくわけて3つの手続きを踏む必要があり、<br><strong>必ず左から順番に実行される</strong>という特徴を持ちます。</p><pre><code>Action &gt; Reducer &gt; Store</code></pre><p>そのため、データの流れが追いやすくなるというメリットがあります。<br>ただ、複数回の手続きが必要になるためどうしてもコード量が増えてしまいます。<br>小規模なアプリに採用しても時間がかかるだけなので、<strong>中規模以降のアプリに採用すべき</strong>です。<br></p><h3 id="h2fe7453683">3つの原則</h3><p>Redux には3つの原則があります。<br>これらのルールを守ることでバグの発生を防ぐことができます。</p><pre><code>Single source of truth
State is read-only
Changes are made with pure functions</code></pre><p><a href="https://redux.js.org/understanding/thinking-in-redux/three-principles" target="_blank" rel="noopener noreferrer">Three Principles</a><br></p><h3 id="hf744e42219">Redux Toolkitについて</h3><p>今回は <strong>Redux</strong> と<strong> React-Redux</strong> だけを使用しているため、コードの総量がかなり多くなっていますが、<br><strong>Redux Toolkit </strong>というパッケージを併用すれば、もっと簡単に書くことが可能です。<br><br><strong>公式ドキュメントでも使用が推奨</strong>されているため、<br>新しいプロジェクトを立ち上げる場合は併用することをオススメします。<br><a href="https://redux-toolkit.js.org/introduction/getting-started" target="_blank" rel="noopener noreferrer">Getting Started with Redux Toolkit</a><br></p><h2 id="hbbc6673007">Actionを定義する</h2><p>まずは Action を定義しましょう。<br><br>最終的に、以下のようなオブジェクトを用意する必要があり、<br>これを <strong>Actionオブジェクト</strong> と呼びます。</p><pre><code> return {
    type: "起こしたいアクション名",
    payload: "ユーザーが行った操作"
};</code></pre><p><br></p><h3 id="ha81c98c056">Action Typesを定義する</h3><p>起こしたい Action の名前を決めます。<br>ユニークな値でなければならないため、定数として定義いたします。</p><pre><code>const CREATE_TASK = "CREATE_TASK";
const DELETE_TASK = "DELETE_TASK";</code></pre><p><br></p><h3 id="h12ad2397da">Action Creatorsを定義する</h3><p>行いたい Action とユーザーが操作した値が返却される関数を作成します。</p><pre><code>export const createTask = (task) =&gt; {
  return {
    type: CREATE_TASK,
    payload: task
  };
};
export const deleteTask = (id) =&gt; {
  return {
    type: DELETE_TASK,
    payload: id
  };
};</code></pre><p><br></p><h2 id="he419f5e19b">Reducersを定義する</h2><p>次に Reducers を定義します。</p><h3 id="h3d4d996670">Reducer関数を定義する</h3><p>現在の状態 <code>todo</code> と、先程定義した Action の2つを引数として受け取ります。<br>Reduxは初回起動時には状態を持っていません。<code>initialState</code> を代入して状態を作成します。</p><pre><code>const initialState = [];

function taskReducer(todo = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case CREATE_TASK:
      return [...todo, payload];
    case DELETE_TASK:
      return todo.filter((t) =&gt; t.id !== payload);
    default:
      return todo;
  }
}</code></pre><p><br></p><h3 id="h297ca690ea">複数のReducersを1つにまとめる</h3><p><code>combineReducers</code> という関数を使用すれば複数の Reducers を1つにまとめることが可能です。<br>今回は Reducers が1つしかないため使用する必要はありませんが、<br>特に動作への影響はなく、後で Reducers が追加された際に書き直しが不要となるため使用しています。</p><pre><code>import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  task: taskReducer
});</code></pre><p><br></p><h2 id="hfa545cbd3b">Storeを作成</h2><p>次に状態管理を行う <strong>Store</strong> を定義します。</p><h3 id="h8caaef373d">ストアインスタンスを作成する</h3><p><code>createStore</code> を実行し、<span style="color:#1c1e21">ストア</span>インスタンスを作成します。<br>第1引数に定義したReducers の <code>rootReducer</code>、第2引数に初期状態を示す変数 &nbsp;<code>initialState</code> を指定して実行します。</p><pre><code>import { createStore } from "redux";

const initialState = {};
const store = createStore(rootReducer, initialState);

export default store;</code></pre><p><br></p><h3 id="he366b8384e">ReactにStoreを提供</h3><p><code>&lt;App /&gt;</code> に <code>&lt;Provider&gt;</code> をラップします。<br>ここまでの繋ぎこみが完了すれば、以降は Action が実行されるたびに状態の更新が行われます。</p><pre><code>import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import store from "./store";
import "antd/dist/antd.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  &lt;StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  &lt;/StrictMode&gt;,
rootElement
);</code></pre><p><br></p><h2 id="hfc9a4a9a8f">状態管理を行う</h2><p>コンポーネント内で <strong>Store</strong> の取得と更新を行います。どちらも専用の関数を使用します。</p><h3 id="h0dacf234c4">タスクの仕様</h3><p>先にタスクがどのような形式で保存されるのか解説致します。<br>タスクの内容と、固有のIDを持ったオブジェクト形式で保存を行います。<br>IDは <code>generateId</code> という関数を使って作成しています。</p><pre><code>{
  task: "タスクの内容"
  id: 12345678
}</code></pre><h3 id="ha6edad7201"><br>状態の取得を行う</h3><p>Store の状態を取得するには <code>useSelector</code> という関数を使用します。</p><pre><code>import { useSelector } from "react-redux";
const App = () =&gt; {
  const tasks = useSelector((state) =&gt; state.task);
}</code></pre><p><br></p><h3 id="h45e7e66525">状態の更新を行う</h3><p>Store の状態を更新するには <code>useDispatch</code> という関数を使用します。</p><pre><code>import { useDispatch } from "react-redux";
const App = () =&gt; {
&nbsp; &nbsp; const dispatch = useDispatch();
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
}

</code></pre><h3 id="h930f2d92d4"><br>タスクの削除</h3><p>タスク削除用関数の引数に <code>id</code> を指定した状態で実行します。<br>この関数は保存済みタスクの <code>id</code> と引数の <code>id</code> を比較、一致しないタスクのみを返却します。</p><pre><code>dispatch(deleteTask(item.id))</code></pre><p><br></p><h2 id="hf8a9587c26">全体のコード</h2><p>全体のコードは以下のようになります。コピペいただければそのまま動作します。</p><pre><code>import React, { useState, useEffect } from "react";
import { Button, Input, Row, Col, Typography, List } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { createTask, deleteTask } from "./redux";
import "./styles.css";

const App = () =&gt; {
&nbsp; const [task, setTask] = useState("");
&nbsp; const [inputEmptyError, setInputEmptyError] = useState(false);

&nbsp; const dispatch = useDispatch();
&nbsp; const tasks = useSelector((state) =&gt; state.task);

&nbsp; useEffect(() =&gt; {}, [dispatch]);

&nbsp; const generateId = () =&gt; {
&nbsp; &nbsp; const strong = 1000;
&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; new Date().getTime().toString(16) +
&nbsp; &nbsp; &nbsp; Math.floor(strong * Math.random()).toString(16)
&nbsp; &nbsp; );
&nbsp; };

&nbsp; const handleInput = (e) =&gt; {
&nbsp; &nbsp; const value = e.target.value;
&nbsp; &nbsp; setTask(value);
&nbsp; };

&nbsp; const handleSubmit = () =&gt; {
&nbsp; &nbsp; if (!task) {
&nbsp; &nbsp; &nbsp; setInputEmptyError(true);
&nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; setInputEmptyError(false);
&nbsp; &nbsp; }
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
&nbsp; &nbsp; initialForm();
&nbsp; };

&nbsp; const initialForm = () =&gt; {
&nbsp; &nbsp; setTask("");
&nbsp; };

&nbsp; return (
&nbsp; &nbsp; &lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="taskList"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemLayout="horizontal"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataSource={tasks}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={(item) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List.Item
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actions={[
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button onClick={() =&gt; dispatch(deleteTask(item.id))}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 削除
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/List.Item&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={20}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Input
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="task"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInput}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="タスク内容を入力"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {inputEmptyError &amp;&amp; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Typography.Text type="danger"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; タスク内容は入力必須です。
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Typography.Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={4}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button type="primary" onClick={handleSubmit} block&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 追加
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default App;</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>より詳しい情報が知りたくなったときは公式ドキュメントを参照してください。<br>以上で解説は終了です。お疲れ様でした。</p>

<ul><li><a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">Redux - A predictable state container for JavaScript apps. | Redux</a></li><li><a href="https://www.wakuwakubank.com/posts/703-react-redux/" target="_blank" rel="noopener noreferrer">Redux(Actions, Reducers, Store)による状態管理</a></li></ul>

React と Redex でTODOアプリを作ってみる

<p>今回は<a href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してFacebookとWordPressとの連携を行います。<br></p><h2 id="h5d746a97ca">動作環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>WordPress 5.7.2
All in One SEO 4.1.1.1
Facebook Graph API v10.0</code></pre><p><br></p><h2 id="hf0465effb3">連携について</h2><h3 id="h94c2df26e9">どうすれば連携扱いとなるのか</h3><p>最終的にブログ記事の<code>&lt;head&gt;</code> に下記のようなタグを挿入することができれば、<br>連携できたことになります。<br><br>Facebook 管理者 ID</p><pre><code>&lt;meta property="fb:admins" content="" /&gt;</code></pre><p><br>Facebook App ID</p><pre><code>&lt;meta property="fb:app_id" content="" /&gt;</code></pre><p><br><code>content=""</code> には固有のIDが入ります。<br>このIDの取得には<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>への登録が必要となります。<br>取得したIDを<a style="background-color:#ffffff" href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してmetaタグに変換し、ブログ記事に動的な挿入を行います。<br></p><h3 id="hde256594dd">必ずしも2つ必要なわけではない</h3><p>ブログ記事をシェアする際にOGPタグを有効にしたいだけであれば、<br>「Facebook 管理者 ID」のみを埋め込むだけでも問題はありません。<br></p><h3 id="ha26d79706a">連携しないとどうなるのか</h3><p>ブログ記事をシェアする際にOGPタグが正常に読み込まれません。<br>URLを挿入しても、以下のようにドメインとページ名の表示しか行われません。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/2b3c005c95de4e69a53c1ff7175c3fa2/facebook-notwork-ogp.png" alt=""><br><br>連携ができている場合は以下のような表示となります。<br>アイキャッチ画像、記事名、本文から抜粋したテキストが正常に表示されています。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/f0f2a91f4a7f47acaf0f32b01d3e2d06/facebook-work-ogp.png" alt=""><br></p><h2 id="hb021f1d9d0">Facebookデベロッパーツールでアプリを作成する</h2><h3 id="ha6a2ae4059">Facebookデベロッパーツールに登録する</h3><p>Facebook個人用アカウントから登録を行います。<br><a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a><br><br>具体的な登録方法については下記の記事が参考になります。<br>特に難しいことはなく、画面の指示に従っていけば問題ありません。<br><a href="https://www.sakurasaku-labo.jp/blogs/facebook-developer" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール（Facebook for developers）の登録手順と使い方</a><br></p><h3 id="h82f682a3ab">新しいアプリを作成する</h3><p>登録が完了すれば、アプリ一覧画面へアクセスが可能となります。<br>画面右上の「アプリを作成」をクリックしてください。<br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/b37202c7cd5641b89235ee7429f699ab/fbd-applist.png" alt=""><br><br>クリックするとこのようなモーダルウインドウが表示されるため、<br>「ビジネス」を選択して「次へ」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/12ebc01024df4a96ab74562d377eceaa/fbd-regist-1.png" alt=""><br><br>アプリ表示名を入力します。ここでは「WordPress用」にしました。<br>2つ下にあるアプリの目的を選択し、「アプリを作成」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/553e8b1affb2492db0b587333ac874a0/fbd-regist-2.png" alt=""><br><br>以下のようなページに移動します。左上に「アプリID」をメモしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/37912ed6142b42ebba16ffed4030c0c2/fbd-dashboard.png" alt=""><br><br>ヘッダーの「ツール」をクリックし、「グラフAPIエクスプローラ」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/17dca404773b48f093591b27147a40e9/fbd-dashboard-explorer-lead.png" alt=""><br><br>以下のようなページに移動します。右の「Generate Access Token」をクリックしてください。<br>パスワード入力のウインドウがポップアップで表示されるため、入力して認証を行ってください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3eaff18213ba46388ff18143530dcf56/fbd-dashboard-explorer.png" alt=""><br><br>認証完了後、アクセストークンに文字列が入力されるため、<br>右上の「送信」をクリックしてください。<br>画面中央に「id」が表示されるためメモしてください。<br>これが<strong>管理者ID</strong>となります。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3bc3ed23e90c4206a785afe2f3d5eabf/fbd-dashboard-explorer-get-req.png" alt=""><br><br>これで<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>での操作は終了です。<br>次はWordPressの操作に移ります。<br></p><h2 id="h30e5259d77">プラグインをインストールする</h2><p>WordPress管理画面から行ってください。<br>サイドバーの「プラグイン」&gt; 画面右上の「新規追加」&gt; 画面右上の検索ボックスから<br>「All in one」などのキーワードで検索を行い、インストールを行います。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/052b0ab4106e465b9f1fd7b35f5c2ca3/install-aioseo.png" alt=""><br><br>初回インストールの場合、セットアップウィザードが始まります。<br>環境に応じて設定を行ってください。私はデフォルトのままにしておきました。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/0d7a5bdc9ff64ba18dc83abc93e3ac03/setup-aioseo.png" alt=""><br><br>セットアップが終了後、サイドバーの「 All in One SEO」&gt;「ソーシャルネットワーク」をクリックし、<br>画面上部の「Facebook」をクリックします。以下のようなページに移動します。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/832fcd42ce774fe6b6fc8b1b7e0fe3b3/wp-aioseo-facebook-lead.png" alt=""><br><br>スクロールすると「高度な設定」があり、<br>「Facebook 管理者 ID」と「Facebook App ID」にメモしたIDを入力してください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/5f24c0d676cf44b88ca1505a3a6fbf2b/wp-aioseo-facebook.png" alt=""><br><br>完了後はブログ記事のソースを確認しましょう。<br>以下のタグが追加されていれば設定は完了です。</p><pre><code>&lt;meta property="fb:admins" content="" /&gt;
&lt;meta property="fb:app_id" content="" /&gt;</code></pre><p><br>以上となります。お疲れさまでした。</p>

FacebookとWordPressをAll in One SEOを使用して連携する

<p>シックス・アパート社が開発された <a href="https://movabletype.net/" target="_blank" rel="noopener noreferrer">MovableType.net</a> に関係する記事も扱っていきます。<br></p><h2 id="h9f510f3156">やりたいこと</h2><p>親子関係を持つカテゴリを作成し、画像のように設定したとします。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/d46c20c92be6409eb722823e36cd4270/mt-net-cat.png" alt=""><br>ここから、<strong>親が「担当者」である「担当者A」と「担当者C」のみテキストとして出力</strong>してみたいと思います。<br></p><h2 id="hc499e4ad38">解説</h2><h3 id="hb95f6a73e7">&lt;mt:EntryCategories&gt;のみでは実現できない</h3><p>記事のカテゴリをすべて出力するMTタグは<code>&lt;mt:EntryCategories&gt;</code>ですが、<br>モデファイアなどである程度制御は可能なものの、<br>親を絡めた処理はできません。<br><a href="https://movabletype.net/dict/entry-01/entrycategories.html" target="_blank" rel="noopener noreferrer">記事のカテゴリを表示する | MovableType.net 逆引き辞典</a><br><br>そのため、複数のMTタグを組み合わせて実現します。<br></p><h3 id="h59f744c0be">実際のコード</h3><pre><code>&lt;mt:EntryCategories&gt;
&lt;mt:HasParentCategory&gt;
	&lt;mt:ParentCategory&gt;
		&lt;$mt:CategoryLabel encode_html="1" setvar="parentCategoryName"$&gt;
&nbsp; &nbsp; &lt;/mt:ParentCategory&gt;
&nbsp; &nbsp; &lt;mt:if name="parentCategoryName" eq="担当者"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;mt:IfCategory&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 	&lt;p&gt;&lt;$mt:CategoryLabel encode_html="1"$&gt;&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/mt:IfCategory&gt;
&nbsp; &nbsp; &nbsp;&lt;/mt:if&gt;
&lt;/mt:HasParentCategory&gt;
&lt;/mt:EntryCategories&gt;</code></pre><p><br><code>parentCategoryName</code>変数に親カテゴリ名を格納しておき、<br><code>mt:if</code>の<code>eq</code>モデファイアで条件分岐を行います。<br><br>以下のようなHTMLが出力されれば成功です。</p><pre><code>&lt;p&gt;担当者A&lt;/p&gt;
&lt;p&gt;担当者C&lt;/p&gt;</code></pre><p><br></p>

MovableType.net で 記事のカテゴリをすべて出力し、特定の親を持たない場合は非表示にする

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

最新の投稿

カテゴリ