<p>下記のようなjsonから値を取り出す際の方法。</p><pre><code>"japan": [{
      "code": 1,
      "name": "hokkaido",
       "ja": "北海道",
       "type": "region",
      },
    {
      "code": 2,
      "name": "tohoku",
      "ja": "東北",
      "type": "region",
    },
    {
      "code": 3,
      "name": "kanto",
      "ja": "関東",
      "type": "region",
     }
   ]
}</code></pre><p><br>nameがkantoである先頭の要素を取得したい場合はfindを使用すると便利。</p><pre><code>const kanto = json.japan.find((v) =&gt; v.name == "kanto");

console.log(kanto.ja) // 関東</code></pre><p><br>typeがregionである要素を全て取得したい場合はfilterを使う</p><pre><code>const regions = json.japan.filter(function(item, index){
  if (item.type == "region" ) return true;
});

console.log(regions) // [{},{}...] 配列で取得できる</code></pre><p><br></p>

JSON配列から要素の値を検索して取得する

<p>サイドバーでposition:stickyを使いたいときに適切に指定してみても効かなくて小一時間悩みました。<br>結論から言うと原因はリセットCSSで使用しているress.scssでした。<br><br>判明するまでの解決方法を整理します。<br></p><h2 id="h12f2b5955b">1. stickyコンテナーは適切な高さを持っているか</h2><p>stickyコンテナーはstickyを指定した直の親です。以下の場合は.containerが親です。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0;"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>上記の例の場合、display: flexで.mainと.sideが横並びになっているので、.containerの高さと.sideの高さは同一となりstickyは動作しません。以下の場合だと動作します。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main" style="height: 1000px;"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0; height: 100px"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>この場合は.containerが.mainと同一のheight1000px、.sideは.containerよりも低いheight: 100pxとなるためstickyが動作します。<br></p><h2 id="h34c251af52">2. 親にvisible以外のoverflow属性が指定されてないか</h2><p>sticky要素の親にoverflow: visible以外の指定(hidden, scroll等)がある場合に不能になります。<br><br>今回自分の原因はこれでした。リセットCSSでress.cssを使用していてその中にoverflow-y: scrollがあったことによるものでした。</p><pre><code>html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars  ←これが原因 */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}</code></pre><p><br>コメントアウトして無事動作確認。<br></p><h3 id="h64ae03923e">overflow:visible以外が存在するかチェックする方法</h3><p>jQueryを使用していれば開発者コンソールで以下を入力して動作チェックできます。</p><pre><code>$(".sticky要素").parents().css("overflow", "visible")</code></pre><p><br>親要素全てがoverflow:visibleとなるので、入力した後stickyが動作していればどこかの親にoverflow: visible以外の指定がされていることがわかります。</p>

position: stickyが効かない場合に確認すること。リセットCSSにも注意

<h2 id="hdbc740ce5c">証明書のインストール</h2><p>発行通知メールから証明書ダウンロード<br>中間証明書ダウンロード<br>クロスルートなし、中間CA証明書<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/8eab4835aa804792a62b431d75da1a75/_2020-11-03_18.07.44.png" alt=""><br></p><h2 id="h890f3b5eb6">証明書と中間証明書をダウンロード</h2><p>証明書と中間証明書を結合<br>半角文字等入る場合があるので注意<br></p><h2 id="ha2e7ca0ea2">結合証明書と秘密鍵をサーバーにアップロード</h2><p>/etc/httpd/sslフォルダに置く<br><strong>秘密鍵のパスフレーズを解除する</strong><br><code>openssl rsa -in xxxxxxx.key -out xxxxxxx.key</code><br>/etc/httpd/conf.d/ssl.confで新しい結合証明書、秘密鍵のパスを指定<br><code>httpd -t</code><br>で文法的に問題ないかチェック</p><pre><code>service httpd stop
service httpd start</code></pre><p>ブラウザで期限をチェック</p>

linux + apache2.4.43でのSSL設置

<p>Webサイト内にFacebookページのタイムラインを埋め込んでも表示されない・表示されなくなった事案がいくつか自分のまわりで発生したので、その原因と解決法をご紹介します。<br></p><h2 id="ha464864c60">発生している不具合</h2><p>特定のデバイス・ブラウザで表示されず、iframeが表示される箇所の高さが0になっていたり、「www.facebook.comでの接続が拒否されました」とメッセージが表示されることもあります。<br></p><h2 id="h9c1f22bd6d">原因</h2><p>Facebookページ埋め込みが表示されない主な原因は以下の2つです。<br><strong>・Facebookページのプライバシー設定「公開範囲」が制限されている</strong><br><strong>・コードが間違っている</strong><br><br>上から順に見ていけば原因を特定できるかと思います。<br></p><h2 id="heae49c81e4">解決</h2><p><br></p><h3 id="h0871b3233c">Facebookページのプライバシー設定「公開範囲」が制限されている</h3><p>特定のデバイスだと表示されない場合、一番可能性があるのがこの原因です。<br>またFacebook埋め込みが表示されているブラウザでも、シークレットモードで閲覧した場合に表示されていなければ、こちらの原因である可能性が高いです。<br><br>プライバシー設定を変更するにはFacebookページの管理画面上で行います。</p><ol><li>ヘッダーのアカウントアイコンをクリックし、Facebookページアカウントのプロフィールに切り替えます。</li><li>「設定とプライバシー」ページの「プライバシー」タブをクリック</li><li> 下記ページが表示されたらアクティビティの今後の投稿の共有範囲を「公開」に設定します</li></ol><p><br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/b9ebe9102f2449a9b13fe4e2460a1da9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-09%209.37.41.jpg?w=2524&amp;h=1576" alt="プライバシー設定とツール"><br><br>次に「公開投稿」タブをクリックし、下記ページを表示します。「Facebook外プレビュー」がオン、「国別制限」「年齢制限」がそれぞれ掛かっていないことを確認します。<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/df5da48b0e674d6f8484395c71996630/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-09%209.43.32.jpg" alt=""><br><br></p><h3 id="h04f1a69a9e">コードが間違っている</h3><p>埋め込んだコードが古い場合や、そもそも適切にコードを埋め込んでいない場合があります。<br>埋め込みコードは<a href="https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP" target="_blank" rel="noopener noreferrer">Meta for Developersのページプラグイン</a>で作成・発行します。<br>アプリIDが必要となるので作成していない場合は作成し公開モードにしましょう。<br>シェアしたいFacebookページのURLや幅、高さを設定したら青い「コードを取得」ボタンをクリックし、ステップ2, ステップ3で記載されているコードをそれぞれ埋め込みます。<br><br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/164ed3a804aa4f03b1246a38954bd326/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-09%2015.31.10.jpg" alt=""></p>

Webサイト内にFacebookページのタイムラインを埋め込んでも表示されないときの原因と解決法をご紹介します。

Facebookの埋め込みが表示されなくなったときに確認すること

<p>正規表現での置換が使えるエディタであれば使えるテクニックだと思います。<br>静的に記述された画像のパスをテンプレートエンジン仕様のパスに変換する際に便利。</p><pre><code>&lt;img src="assets/img/page/front/slide01_pc.jpg"&gt;
 &lt;!-- ↑を↓に一斉変換したいとき --&gt; 
&lt;img src="{{ asset('assets/img/page/front/slide01_pc.jpg') }}"&gt;</code></pre><p><br>エディタ上で⌘+Fで検索窓を開き、正規表現を有効、<br>検索を以下のように（末尾に半角スペース入れる）</p><pre><code>"/assets/img/(.*)"</code></pre><p><br>置換の文字列は以下のように（末尾に半角スペース入れる）</p><pre><code>"{{ asset('assets/img/$1') }}" </code></pre><p><br>検索窓はこんな感じ<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/597c8002cf38405ca798e1f7260b62dd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-07%209.42.37.png" alt=""><br><br>正規表現を（）で括って検索すると、(n)でn番目のグループにマッチした文字列を$1,$2..で参照表示できます。</p>

VS CODEで正規表現を使い、部分的に文字列を置換する

<p>普段ローカルでDockerを立ち上げWordPressのサイトを制作することが多いです。<br>基本localhost:3000を使用していているのですが、他WordPressサイトがサブディレクトリ（localhost:3000/wp）やhttpsであったりすると、Dockerを切り替えても前のサイト制作で使用していたURLに自動でリダイレクトされ404エラーとなってしまう問題が発生することがありました。<br></p><h2 id="h9c1f22bd6d">原因</h2><p>Chromeで301リダイレクトがあるページにアクセスするとリダイレクトをオフにしてもキャッシュが効いてしまうそうです。<br></p><h2 id="heae49c81e4">解決</h2><p>方法は2つ。どちらもchrome developer toolsを使用します<br></p><h3 id="ha178571664">1. Disable cache</h3><p>developer tools &gt; Network &gt; Disable cacheにチェックを入れて再読み込み。<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/0bcd633701a74c5da57cf183992f2748/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-26%209.22.26.png" alt=""><br></p><h3 id="h6457f87f94">2. consoleでlocation.href</h3><p>developer tools &gt; consoleを開き、console画面で正しい遷移先を代入する</p><pre><code>location.href = 'http://localhost:3000'</code></pre>

Dockerで開発しているときに強制的にリダイレクトされてしまう問題

<p>sftp接続する際に、Windowsで作成された秘密鍵がMacで使用できなかったときの対処方法を備忘録的に紹介します。<br></p><h2 id="hd2c91c24e4">経緯</h2><p>先方で作成、セットアップされたサーバーへ、先方が作成した秘密鍵を受け取ってsftpログインを試みたができない。1時間ほど試行錯誤してやっと解決。<br></p><h2 id="hf4599ae4c8">秘密鍵</h2><p>ファイルを開くと、<br>-----BEGIN OPENSSH PRIVATE KEY-----<br>で始まり、<br>-----END OPENSSH PRIVATE KEY-----<br>で閉じている。<br>調べてみると<span style="color:#14171a">OpenSSH 7.8から記載形式が変更になったらしい。</span></p><h2 id="h7f506b9540"><br>エラー</h2><p>秘密鍵のパーミッションを600に変更し、~/.ssh/に配置。<br>以下のコマンドでsftp接続を試みる</p><pre><code>$ sftp -oPort=22 -oIdentityFile=~/.ssh/{秘密鍵の名前}.pem {アカウント名}@{サーバアドレス}</code></pre><p><br>しかしエラー</p><pre><code>Load key "秘密鍵の名前": invalid format
{アカウント名}@{サーバアドレス}: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
Connection closed</code></pre><p><br>invalid format = 無効な形式なので、そもそも秘密鍵としての形式として認識されていない。</p><h2 id="h58266caae1"><br>原因・解決</h2><h3 id="h3e2b1bf3e3">改行コードをLFに変更する</h3><p>「秘密鍵 windows mac フォーマット」みたいなワードで調べてみると同じ原因かと思われる記事を発見。https://www.mtioutput.com/entry/ssh-invalid-format<br><br>改行コードには3種類あるらしい。</p><h4 id="ha634eaf174"><br>CR（Carriage Return）</h4><p>カーソルを左端の位置に戻す<br>→macOS(9以前)で使用<br></p><h4 id="h64be057bd9">LF（Line Feed）</h4><p>新しい行に移動する<br>→Unix、Linux、macOS(9以降)、Androidで使用<br></p><h4 id="hd5efa9f583">CR-LF（CR＋LF）</h4><p>左端の位置に戻し、新しい行に移動する<br>→MS-DOS、Windowsで使用<br><br>3種類のうち、改行コードが<strong>LF</strong>になっていれば良いらしい？ただ記事内で使用しているnkfコマンドがMacにはなかったのでHomebrewでインストール</p><pre><code>$ brew install nkf</code></pre><p><br>インストール後文字コードを確認。やはり改行コードがwindows形式(CRLF)になっている</p><pre><code>$ nkf --guess {秘密鍵名}.pem
ASCII (CRLF)</code></pre><p><br>unix形式(LF)に変換します</p><pre><code>$ nkf -Lu {秘密鍵名}.pem &gt; {新しい秘密鍵名}.pem
$ nkf --guess {新しい秘密鍵名}.pem
ASCII (LF)</code></pre><p><br></p><h3 id="h61ce7fb4af">最終行に改行を入れる</h3><p>無事改行コードが変換されたのでもう一度sftpを試みたところ同じinvalid formatエラー。。<br>ここからまたハマったのですが、ファイルを開き最終行の「-----END OPENSSH PRIVATE KEY-----」の後ろでさらに改行して保存することで無事invalid formatエラーがでなくなり、sftpログインができるようになりました。<br><br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/4965f338992440f6b705561e4e5740ff/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-14%208.50.54.png" alt=""><br><br>なぜ最終行に改行を入れるとエラーが発生しなくなるのかが謎ですが、ひとまず秘密鍵の読み込みでエラーが発生した場合は以下を疑ってみると良いと思います。<br>・そもそもauthorized_keysに配置された公開鍵と対になっている秘密鍵か<br>・秘密鍵のパーミッションは600になっているか<br>・秘密鍵の改行コードは正しいものになっているか（環境によってはCRLF、LFを変更してみる）<br>・秘密鍵の最終行に改行を入れ保存してみる<br></p>

他の環境で作成された秘密鍵を使用する際にハマったエラーと解決方法について紹介します。

Windowsで作成された秘密鍵をMacで使用する際に注意すること

<p>携わるプロジェクトによって変わることはありますが、自分メインで制作しているWebサイトやアプリケーションの場合、どのようにフォルダを整理し、画像ファイルに対して命名を行っているかをまとめました。</p><h2 id="hcb9dacb773"><br><strong>結論</strong></h2><p>以下のような命名規則にしています。各要素をアンダーバーで繋げて1つのファイル名としています。<br><br><strong>assets/img/[ページ名]/[セクション・役割]_[用途]</strong><strong><em>_</em></strong><strong>[連番]_[状態].[拡張子]</strong><br><br><strong>連番、状態に関しては任意の要素ですので、必ずすべての要素を揃えて命名しなくてはいけないというわけではありません。</strong><br><br>例</p><pre><code>assets/img/ 
  - common
    - logo.svg
    - logo_white.svg
    - icon.png
    - ogp.png
    - button_icon.jpg
  - page
    - top
      - hero_img_01.jpg
      - intro_img_bg_01.jpg
      - about_icon_bg_01.jpg
      - about_icon_bg_02.jpg
      - company_logo.jpg
      - service_banner_pc.jpg
      - service_banner_sp.jpg
    - about
      - hero_img.jpg
      - hero_bg.jpg
    ︙</code></pre><p><br>それぞれの要素に対して説明します。<br></p><h2 id="h266c7119cf">[ページ名]</h2><p>ex: <strong>common, top, about, contact</strong><br>ロゴやアイコン、ファビコンなど、プロジェクト全体で繰り返し使用される画像に関してはcommonフォルダにまとめて入れています。<br>それ以外の、特定のページでしか使用されない画像はページごとのフォルダに格納します。<br><br></p><h2 id="h94808cf55c">[セクション・役割]</h2><p>ex: <strong>hero, overview, about,  </strong><strong style="background-color:#ffffff">global-nav</strong><br>画像が使用されるページ内のセクションや、ボタンなどのパーツの名前にします。<br>commonフォルダの場合はない場合もあります。<br></p><h2 id="h0be0440830">[用途]</h2><p>ex: <strong>heading, banner, icon, text, button, img</strong><br>その画像がどのように使用されるか、 用途を示す名前にします。<br></p><h3 id="h0761798bef">heading</h3><p>見出しに使用される画像（テキストのsvgが多い）</p><h3 id="he4c27c1250">button</h3><p>buttonタグやaタグで使用される画像など</p><h3 id="hb9d4c8b67a">banner</h3><p>バナー画像に使います。buttonとの違いですが、bannerは単独である程度の情報を持っている画像、といったニュアンスで使います。</p><h3 id="h6ba1f58027">icon</h3><p>アイコン。svgが多い</p><h3 id="h7124f9ff90">logo</h3><p>企業や商品のロゴに対して使用します</p><h3 id="hc19f4d1f77">text </h3><p>heading以外の文字情報に対して使用します。</p><h3 id="hfac2d4674a">bg</h3><p>セクションに対しての背景画像などに使用。場合によっては他の用途と併用する場合もあります。<span style="background-color:#ffffff">global-nav_</span>icon_bgなど</p><h3 id="h2a50a6d828">img</h3><p>上記どれにも当てはまらない場合、こちらを使用します。<br></p><h2 id="h5903f8b28f">[連番]</h2><p>ex: <strong>01, 02, 03…99</strong><br>数字の連番を二桁で01から1ずつカウントアップします。ファイル名の最初から「用途」までの文言が同一のもので続いた場合に連番をカウントアップします。作成当時は一つしかないと分かっていても、後々の運用で二つ目が発生する可能性もあるので、基本は連番を付けるようにしますが、明らかに連番で管理しない要件では省略も可能です。<br></p><h2 id="hc1c1898c7d">[状態]</h2><p>ex: <strong>hover, disabled, selected, active, white</strong><br>画像の状態を示す名前。BEMにおけるModifier的な、状態変化がある場合に使用します。<br><br><br></p>

携わるプロジェクトによって変わることはありますが、自分メインで制作しているWebサイトやアプリケーションの場合、どのようにフォルダを整理し、画像ファイルに対して命名を行っているかをまとめました。

WebサイトやWebアプリケーションの画像ファイル命名規則

<p>ヘッダーが追従の場合、少しずらしたいなど<br></p><pre><code>add_filter(mwform_scroll_offset_mw-wp-form-xxx, function( $offset ) {
    return 100; // 100pxずらす、という意味になります。
} );</code></pre>

MW WP FORMプラグインの遷移時のスクロール位置を調整する

<p>リンターとは:<br>ソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。</p><h2 id="h73985523a8">stylelint</h2><p><a style="color:#065588" href="https://stylelint.io/" target="_blank" rel="noopener noreferrer">https://stylelint.io/</a><br>CSS, SCSSなどのリンター</p><h3 id="he62827c7dd">プロジェクト内に配置する基本の.stylelintrc</h3><pre><code>{
&nbsp;"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
&nbsp;"rules": {
&nbsp;&nbsp;"at-rule-no-unknown": [ true, {
&nbsp;&nbsp;&nbsp;"ignoreAtRules": [
    "return",
    "function",
&nbsp;&nbsp;&nbsp;&nbsp;"extend",
&nbsp;&nbsp;&nbsp;&nbsp;"extends",
    "for",
&nbsp;&nbsp;&nbsp;&nbsp;"ignores",
&nbsp;&nbsp;&nbsp;&nbsp;"mixin",
&nbsp;&nbsp;&nbsp;&nbsp;"content",
&nbsp;&nbsp;&nbsp;&nbsp;"include",
    "custom-media"
&nbsp;&nbsp;]
&nbsp;}],
&nbsp;&nbsp;"indentation": 2,
  "no-descending-specificity",
&nbsp;&nbsp;"number-leading-zero": null,
&nbsp;&nbsp;"unit-allowed-list": ["em", "rem", "s", "px", "%", "deg", "vw", "vh"]
 }
}</code></pre><p>stylelint-config-standardとstylelint-config-recess-orderを使用。</p><h4 id="h57b339fd58"><br>stylelint-config-standard</h4><p><a style="color:#065588" href="https://github.com/stylelint/stylelint-config-standard" target="_blank" rel="noopener noreferrer">https://github.com/stylelint/stylelint-config-standard</a><br>GoogleやAirbunbなどのスタイルガイドを参考にしたconfig。</p><h4 id="he7b9ef480d"><br>stylelint-config-recess-order</h4><p><a style="color:#065588" href="https://github.com/stormwarning/stylelint-config-recess-order" target="_blank" rel="noopener noreferrer">https://github.com/stormwarning/stylelint-config-recess-order</a><br>Bootstrapで使われているstylelintのconfig。CSSのプロパティの順番を規定。<br></p><h2 id="h8f3aaee66b">ESLint</h2><p>JavaScriptやTypeScriptなどのリンター。<br>基本の.eslintrc.js</p><pre><code>module.exports = {
&nbsp;root: true,
&nbsp;parser: 'babel-eslint',
&nbsp;parserOptions: {
&nbsp;&nbsp;sourceType: 'module'
 },
&nbsp;env: {
&nbsp;&nbsp;browser: true,
 },
&nbsp;extends: 'standard',
&nbsp;plugins: [
&nbsp;&nbsp;'html'
 ],
&nbsp;'rules': {
&nbsp;&nbsp;'arrow-parens': 0,
&nbsp;&nbsp;'generator-star-spacing': 0,
&nbsp;&nbsp;'indent': [2, 2],
&nbsp;&nbsp;'no-var': 2,
&nbsp;&nbsp;'semi': [2, 'always'],
&nbsp;&nbsp;'new-cap': 0
 }
}</code></pre><h2 id="h0353998dfb"><br>Prettier</h2><p>コードフォーマッター（ソースコードを整形してくれるツール）。読み方はプリティア。上記のstylelintとESLintと組み合わせて使用する。<br>以下のような様々な形式にサポートしている。</p><ul><li>JavaScript</li><li>JSX</li><li>Flow</li><li>TypeScript</li><li>JSON</li><li>HTML</li><li>Vue</li><li>Angular</li><li>Ember / Handlebars</li><li>CSS</li><li>Less</li><li>SCSS</li><li>styled-components 💅</li><li>styled-jsx</li><li>GraphQL</li><li>Markdown</li><li>YAML</li></ul><h2 id="h3f38fc7fc6"><br>Editor Config for VS Code</h2><p><a style="color:#065588" href="https://editorconfig.org/" target="_blank" rel="noopener noreferrer">https://editorconfig.org/</a><br>EditorConfigとは、異なるテキストエディタ間でも共通の設定を定義することができるプラグインです。EditorConfigを導入することにより複数人での開発がスムーズになります。<br>基本の.editorconfig</p><pre><code># editorconfig.org
root = true
​
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
​
[*.md]
trim_trailing_whitespace = false</code></pre><h2 id="h609dcc6eca"><br>VSCodeで自動整形できるようにする</h2><h3 id="hdf431491df"><br>1.「stylelint」「ESLint」「Editor Config for VS Code」をインストール</h3><p>VS Codeの上部メニューバーの「View」&gt;「Extensions」を選択（またはサイドバーから選択）して上部検索窓から「stylelint」「ESLint」「Editor Config for VS Code」をそれぞれ検索してインストール。<br>※ 似たような名前の異なるプラグインに注意<br></p><h3 id="hcf83e1357e"><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/51115d890b164225b22594901c408f92/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.18.29.png" alt=""></h3><p><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/2a8eb194651f433395062bc6cc6d5e3a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.18.46.png" alt=""><br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/60a5221387db495399a3c489ac308180/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.19.14.png" alt=""><br></p><h3 id="he654a867b8">2. settings.jsonに追記</h3><p>VS Codeの上部メニューバーの「View」&gt;「Command Parrete」を選択（またはShift + Command + P）して「settings.json」を検索&amp;表示<br>settings.json</p><pre><code>{
&nbsp;"editor.defaultFormatter": "esbenp.prettier-vscode",
&nbsp;"editor.formatOnSave": true,
&nbsp;"css.validate": false,
&nbsp;"scss.validate": false,
&nbsp;"eslint.format.enable": true,
&nbsp;"editor.codeActionsOnSave": {
&nbsp;&nbsp;&nbsp;"source.fixAll": true
&nbsp;},
&nbsp;// …その他の設定
}</code></pre><h3 id="h105baef55e"><br>3. VS Codeを再起動</h3><p>これで完了です。<br><br></p>

フロントエンド開発で使用するリンターとVSCodeでのセットアップについてまとめてみました。

開発で使用するリンターとVSCodeでのセットアップについて

<p>固定ページが少なければよいのですが、大量になってくるとセレクトボックスで親ページを選ぶのにも苦労すると思います。例えば都道府県・市町村のように親子関係の固定ページが大量にあると、セレクトボックスには市町村の固定ページも表示されてしまい、該当の都道府県を選びたいだけなのに延々とスクロールしなければならない、みたいな状況です。<br><br>そんなときは以下のフィルターを使用してトップレベル（親を持たない）のページのみを表示させましょう。<br><br>functions.php</p><pre><code>// 編集ページでの親ページ選択セレクトボックス
add_filter( 'page_attributes_dropdown_pages_args', function( $dropdown_args, $post ) {
  if ( $post-&gt;post_type == 'post' ) {
    $dropdown_args['depth'] = 1;
  }
  return $dropdown_args;
}, 10, 2 );

// 一覧ページ &gt; クイック編集での親ページ選択セレクトボックス
add_filter( 'quick_edit_dropdown_pages_args', function( $dropdown_args ) {
  if ( $dropdown_args['post_type'] == 'post' ) {
    $dropdown_args['depth'] = 1;
  }
  return $dropdown_args;
} );</code></pre>

【WordPress】ページ属性の親ページを選択する際、トップレベル（親を持たない）のページのみを表示する

<p>デフォルトでは固定ページのみ親子関係を持たせることができますが、投稿でも同様に親子関係を持たせて表示したい場合の設定方法です。functions.phpに記載します。<br><br>functions.php</p><pre><code>/* 通常投稿に親子関係をもたせる */
function post_add_options( $args, $post_type ) {
  if ( 'post' === $post_type ) {
    $post_labels         = array(
      'name'               =&gt; '投稿',
      'singular_name'      =&gt; '投稿',
      'menu_name'          =&gt; '投稿',
      'name_admin_bar'     =&gt; '投稿',
      'add_new'            =&gt; '新規追加',
      'add_new_item'       =&gt; '新規投稿を追加',
      'new_item'           =&gt; '新規投稿',
      'edit_item'          =&gt; '投稿の編集',
      'view_item'          =&gt; '投稿の表示',
      'all_items'          =&gt; 'すべての投稿',
      'search_items'       =&gt; '投稿の検索',
      'not_found'          =&gt; '投稿が見つかりませんでした。',
      'not_found_in_trash' =&gt; 'ゴミ箱に投稿が見つかりませんでした。',
      'attributes'         =&gt; '投稿の属性',
    );
    $args['labels']      = $post_labels;
    $args['hierarchical'] = true;
    add_post_type_support( 'post', 'page-attributes' );
  }
  return $args;
}
add_filter( 'register_post_type_args', 'post_add_options', 10, 2 );</code></pre><p><br>加えて、URLをhttps://〇〇.com/[親ページスラッグ]/[子ページスラッグ]と表示する場合には以下をfunctions.phpに追記します。<br></p><pre><code>/* 親投稿のスラッグを取得 */
function get_parent_post_slug($post){
  if (!is_object($post) || !$post-&gt;post_parent) {
      return false;
  }
  return get_post($post-&gt;post_parent)-&gt;post_name;
}

/* get_sample_permalinkのfilterフック */
add_filter('get_sample_permalink', function ($permalink, $post_id, $title, $name, $post) {
  if ($post-&gt;post_type != 'post' || !$post-&gt;post_parent) {
      return $permalink;
  }
  $template_permalink = current($permalink);
  $replacement_permalink = next($permalink);
  $postname_string = '/%postname%/';
  $parent_slug = get_parent_post_slug($post);
  $altered_template_with_parent_slug = '/' . $parent_slug . $postname_string;
  $new_template = str_replace($postname_string, $altered_template_with_parent_slug, $template_permalink);
  $new_permalink = [$new_template, $replacement_permalink];

  return $new_permalink;
}, 99, 5);

/* post_linkのfilterフック */
add_filter('post_link', function ($post_link, $post, $leavename) {
  if ($post-&gt;post_type != 'post' || !$post-&gt;post_parent) {
      return $post_link;
  }
  $parent_slug = get_parent_post_slug($post);
  $new_post_link = str_replace($post-&gt;post_name, $parent_slug . '/' . $post-&gt;post_name, $post_link);

  return $new_post_link;
}, 99, 3);

/* pre_get_postsのactionフック */
add_action('pre_get_posts', function ($query) {
  global $wpdb, $wp_query;
  $original_query = $query;
  $uri = $_SERVER['REQUEST_URI'];

  if ($query-&gt;is_main_query() &amp;&amp; !is_admin()) {
      $basename = basename($uri);
      $test_query = sprintf("select * from $wpdb-&gt;posts where post_type = '%s' and post_name = '%s';", 'post', $basename);
      $result = $wpdb-&gt;get_results($test_query);

      if (!($post = current($result)) || !$post-&gt;post_parent) {
          return $original_query;
      }

      $parent_slug = get_parent_post_slug($post);
      $hierarchal_slug = $parent_slug . '/' . $post-&gt;post_name;

      if (!stristr($uri, $hierarchal_slug)) {
          return $original_query;
      }

      $query-&gt;query_vars['post_type'] = ['post'];
      $query-&gt;is_home = false;
      $query-&gt;is_page = true;
      $query-&gt;is_single = true;
      $query-&gt;queried_object_id = $post-&gt;ID;
      $query-&gt;set('page_id', $post-&gt;ID);

      return $query;
  }
}, 1);</code></pre><p><br>注意点として、パーマリンク設定は/%postname%/とすること。<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/55fcdb306d7c4b9cbe676f5069db31fc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-27%2016.42.06.png" alt=""></p>

【WordPress】投稿でも親子関係をもたせる方法

<pre><code>&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。


&lt;a href="https://google.com"&gt;リンクのテキストです。&lt;/a&gt;


&lt;strong&gt;太字です。&lt;/strong&gt;


&lt;em&gt;イタリックです。&lt;/em&gt;


&lt;del&gt;取り消し線です。&lt;/del&gt;


&lt;hr /&gt;


&lt;ul&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/blockquote&gt;
&lt;p style="text-align: left;"&gt;この文章は左揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: center;"&gt;この文章は中央揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: right;"&gt;この文章は右揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</code></pre>

【WordPressコピペ用】投稿のダミーテキスト

<p>YouTube動画の埋め込み自体は本サイトからiframeのコードをコピペすれば簡単に実現できるのですが、レスポンシブ対応する際はCSSで調整してあげる必要があります。<br></p><h2 id="hc354d8821e">方法</h2><h3 id="hd0e9724409">HTML</h3><p>コピペしてきたiframeをdivで囲んであげます</p><pre><code>&lt;div class="video-wrap"&gt;
     &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/aqa9h-nL-TA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="h20b4c98e2a">CSS</h3><pre><code>.video-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; // ここがポイント。動画の縦横の比率が16:9であれば 6 / 19 * 100 = 56.25を設定
}


.video-wrap &gt; iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}</code></pre><p><br>最近はあまり見かけないですが、動画の比率が4:3の場合は 3 / 4 * 100 = 75%を.video-wrapのpadding-topに指定すれば良いです。<br></p><h2 id="hc6bd78ae16">動画の幅を変えたい場合</h2><p>全幅で表示するのではなく、幅50%や33.333%にして動画を並べたいこともあるかと思います。その場合は.video-wrapをさらにdivで囲み、そのdivに好きな幅を指定すればOK。</p><h3 id="hd0e9724409">HTML</h3><p>幅50%で動画を２つ横に並べる</p><pre><code>&lt;div class="video-row"&gt;
    &lt;div class="video-col"&gt;
        &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/aqa9h-nL-TA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
     &lt;/div&gt;
    &lt;div class="video-col"&gt;
        &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/aqa9h-nL-TA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
     &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="h20b4c98e2a">CSS</h3><p>display:flexで横に並べる</p><pre><code>// 追加したコード
.video-row {
  width: 100%;
  display: flex;
  justify-content: center;
 align-items: center;
 margin: 0 -48px;
}

.video-col {
 width: 50%;
 padding: 0 24px;
}
// end

.video-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; // ここがポイント。動画の縦横の比率が16:9であれば 6 / 19 * 100 = 56.25を設定
}


.video-wrap &gt; iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}</code></pre><p><br><br>よく使う手法なのですが毎回忘れてコードを探しに行きます</p>

YouTube動画の埋め込み自体は本サイトからiframeのコードをコピペすれば簡単に実現できるのですが、レスポンシブ対応する際はCSSで調整してあげる必要があります。

YouTube動画をWebサイトに埋め込む際に、レスポンシブ対応（=アスペクト比を維持したまま拡大・縮小）する方法

<p>不動産サイト制作などでたまに使用するjsonです。地方と都道府県で親子になっています。<br></p><pre><code>{
  "region": [{
      "code": 1,
      "name": "hokkaido",
      "ja": "北海道",
      "pref": [{
        "code": 1,
        "name": "hokkaido",
        "ja": "北海道"
      }]
    },
    {
      "code": 2,
      "name": "tohoku",
      "ja": "東北",
      "pref": [{
          "code": 2,
          "name": "aomori",
          "ja": "青森県"
        },
        {
          "code": 3,
          "name": "iwate",
          "ja": "岩手県"
        },
        {
          "code": 4,
          "name": "miyagi",
          "ja": "宮城県"
        },
        {
          "code": 5,
          "name": "akita",
          "ja": "秋田県"
        },
        {
          "code": 6,
          "name": "yamagata",
          "ja": "山形県"
        },
        {
          "code": 7,
          "name": "fukushima",
          "ja": "福島県"
        }
      ]
    },
    {
      "code": 3,
      "name": "kanto",
      "ja": "関東",
      "pref": [{
          "code": 8,
          "name": "ibaraki",
          "ja": "茨城県"
        },
        {
          "code": 9,
          "name": "tochigi",
          "ja": "栃木県"
        },
        {
          "code": 10,
          "name": "gunma",
          "ja": "群馬県"
        },
        {
          "code": 11,
          "name": "saitama",
          "ja": "埼玉県"
        },
        {
          "code": 12,
          "name": "chiba",
          "ja": "千葉県"
        },
        {
          "code": 13,
          "name": "tokyo",
          "ja": "東京都"
        },
        {
          "code": 14,
          "name": "kanagawa",
          "ja": "神奈川県"
        }
      ]
    },
    {
      "code": 4,
      "name": "koshinetsu",
      "ja": "甲信越",
      "pref": [{
          "code": 15,
          "name": "nigata",
          "ja": "新潟県"
        },
        {
          "code": 19,
          "name": "yamanashi",
          "ja": "山梨県"
        },
        {
          "code": 20,
          "name": "nagano",
          "ja": "長野県"
        }
      ]
    },
    {
      "code": 5,
      "name": "tokai",
      "ja": "東海",
      "pref": [{
          "code": 21,
          "name": "gifu",
          "ja": "岐阜県"
        },
        {
          "code": 22,
          "name": "shizuoka",
          "ja": "静岡県"
        },
        {
          "code": 23,
          "name": "aichi",
          "ja": "愛知県"
        },
        {
          "code": 24,
          "name": "mie",
          "ja": "三重県"
        }
      ]
    },
    {
      "code": 6,
      "name": "hokuriku",
      "ja": "北陸",
      "pref": [{
          "code": 16,
          "name": "toyama",
          "ja": "富山県"
        },
        {
          "code": 17,
          "name": "ishikawa",
          "ja": "石川県"
        },
        {
          "code": 18,
          "name": "fukui",
          "ja": "福井県"
        }
      ]
    },
    {
      "code": 7,
      "name": "kansai",
      "ja": "関西",
      "pref": [{
          "code": 25,
          "name": "shiga",
          "ja": "滋賀県"
        },
        {
          "code": 26,
          "name": "kyoto",
          "ja": "京都府"
        },
        {
          "code": 27,
          "name": "osaka",
          "ja": "大阪府"
        },
        {
          "code": 28,
          "name": "hyogo",
          "ja": "兵庫県"
        },
        {
          "code": 29,
          "name": "nara",
          "ja": "奈良県"
        },
        {
          "code": 30,
          "name": "wakayama",
          "ja": "和歌山県"
        }
      ]
    },
    {
      "code": 8,
      "name": "chugoku",
      "ja": "中国",
      "pref": [{
          "code": 31,
          "name": "tottori",
          "ja": "鳥取県"
        },
        {
          "code": 32,
          "name": "shimane",
          "ja": "島根県"
        },
        {
          "code": 33,
          "name": "okayama",
          "ja": "岡山県"
        },
        {
          "code": 34,
          "name": "hiroshima",
          "ja": "広島県"
        },
        {
          "code": 35,
          "name": "yamaguchi",
          "ja": "山口県"
        }
      ]
    },
    {
      "code": 9,
      "name": "shikoku",
      "ja": "四国",
      "pref": [{
          "code": 36,
          "name": "tokushima",
          "ja": "徳島県"
        },
        {
          "code": 37,
          "name": "kagawa",
          "ja": "香川県"
        },
        {
          "code": 38,
          "name": "ehime",
          "ja": "愛媛県"
        },
        {
          "code": 39,
          "name": "kochi",
          "ja": "高知県"
        }
      ]
    },
    {
      "code": 10,
      "name": "kyushu",
      "ja": "九州",
      "pref": [{
          "code": 40,
          "name": "fukuoka",
          "ja": "福岡県"
        },
        {
          "code": 41,
          "name": "saga",
          "ja": "佐賀県"
        },
        {
          "code": 42,
          "name": "nagasaki",
          "ja": "長崎県"
        },
        {
          "code": 43,
          "name": "kumamoto",
          "ja": "熊本県"
        },
        {
          "code": 44,
          "name": "oita",
          "ja": "大分県"
        },
        {
          "code": 45,
          "name": "miyazaki",
          "ja": "宮崎県"
        },
        {
          "code": 46,
          "name": "kagoshima",
          "ja": "鹿児島県"
        }
      ]
    },
    {
      "code": 11,
      "name": "okinawa",
      "ja": "沖縄",
      "pref": [{
        "code": 47,
        "name": "okinawa",
        "ja": "沖縄県"
      }]
    }
  ]
}


</code></pre>

地方と都道府県のjsonデータ

<p>Yoastが出力しているタイトルタグ、メタタグ等をfunctions.phpから修正したい場合の方法です。<br>Yoast SEOと他のプラグインがバッティングしていて、管理画面からカスタマイズできないときに使えます。</p><h2 id="h8de3ff4e39"><br>対応前</h2><p>Search &amp; Filterという検索用のプラグインを入れていて、検索結果ページのタイトルタグ等を修正したかったのですが、下記の対応をしてもYoast SEOが上書きしてしまい、希望通りのタイトルに上書きされません。<br></p><pre><code>add_filter('wp_title','search_form_title');

function search_form_title($title){
 
 global $searchandfilter;
 
 if ( $searchandfilter-&gt;active_sfid() == 35889)
 {
 return 'Search Results';
 }
 else
 {
 return $title;
 }
 
}</code></pre><p><a href="https://searchandfilter.com/documentation/search-results/as-an-archive/" target="_blank" rel="noopener noreferrer">https://searchandfilter.com/documentation/search-results/as-an-archive/</a><br><code>wp_title</code>はWordPress本体が提供しているフィルター。<br></p><h2 id="heae49c81e4">解決</h2><p>Yoast SEOが提供しているフィルター<code>wp_seotitle</code>と上記コードを組み合わせると解決できました。タイトルタグと同時に<code>wpseo_opengraph_title</code>フィルターを使用してog:titleも変更しました。</p><pre><code>// 検索結果ページのタイトルを書きかえる
function search_form_title($title){
 global $searchandfilter;
 if($searchandfilter) {
// 書き換えたいページの条件
  if ( $searchandfilter-&gt;active_sfid() == 84) 
  {
  return '検索結果 - サイト名';
  }
  else
  {
  return $title;
  }
 } else {
// 該当しない場合はデフォルトのタイトルを返す
   return $title;
 }
}
add_filter('wpseo_title','search_form_title');
add_filter('wpseo_opengraph_title','search_form_title');</code></pre><p><br>その他ディスクリプション等も書き換えたい場合は下記のURLが参考になります。<br>hooker.io<br><a href="http://hookr.io/plugins/yoast-seo/4.7.1/filters/#index=p" target="_blank" rel="noopener noreferrer">http://hookr.io/plugins/yoast-seo/4.7.1/filters/</a><br><br>Yoast SEO公式<br><a href="https://developer.yoast.com/" target="_blank" rel="noopener noreferrer">https://developer.yoast.com/</a></p>

【WordPress】Yoast SEOでタイトルタグをfunctions.phpから変更する

<p>スタッフ紹介等で一覧ページには表示したいものの、各スタッフの詳細ページを生成したくないときがあります。<br>その場合はfunctions.php内でカスタム投稿タイプを登録するregister<em>post</em>typeの引数を以下のように設定します。<br></p><pre><code>add_action( 'init', 'my_postname_init' );  // postnameに投稿タイプ名を設定
function mt_postname_init() {
&nbsp;&nbsp;register_post_type( 'postname',
&nbsp;&nbsp;&nbsp;&nbsp;array(
             ....
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'public' =&gt; false, // 詳細ページを生成しない場合はfalse
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'publicly_queryable' =&gt; true, //クエリーは実行できるので一覧での取得は可能です
  &nbsp;&nbsp;&nbsp;&nbsp;)
  &nbsp;&nbsp;);
  }</code></pre><p><br></p>

【WordPress】カスタム投稿タイプで詳細ページを生成しない方法

<p>環境<br>ubuntu16.04.1<br>apache2.4<br><br>既存パッケージの更新</p><pre><code>sudo apt update
sudo apt upgrade

sudo add-apt-repository ppa:ondrej/php // php7.3を利用可能なリポジトリ
sudo apt update</code></pre><p><br>ただしこの時点でphp7.4が入ってしまうので,7.3を入れる必要がある</p><pre><code>sudo apt install php7.3  # 7.3のインストール
% php -v  # バージョン確認
% sudo apt install php-pear php7.3-curl php7.3-dev php7.3-gd php7.3-mbstring php7.3-zip php7.3-mysql php7.3-xml
 * sudo apt install php7.3-fpm  # Fast-CGIモジュール</code></pre><p><br>phpのバージョン確認</p><pre><code>update-alternatives --list php
/usr/bin/php7.0
/usr/bin/php7.3
/usr/bin/php7.4
update-alternatives --config php
数字を選択してversionを指定</code></pre><p><br>apache</p><pre><code>sudo a2dismod php7.0
sudo a2enmod php7.3
% sudo a2enmod proxy_fcgi setenvif
% sudo a2enconf php7.3-fpm
% sudo service apache2 restart</code></pre><p>参考<br><a href="https://www.interserver.net/tips/kb/change-php-version-apache-ubuntu/" target="_blank" rel="noopener noreferrer">How to Change PHP Version in Apache on Ubuntu</a><br><a href="https://udon.little-pear.net/wordpress-php-upgrade-to-7-3/" target="_blank" rel="noopener noreferrer">Wordpress (Apache2)のPHPを7.3にバージョンアップ | うどんコード</a></p>

WordPressの管理画面で非推奨のエラーが出たのでアップデートしました。

PHP 7.0から7.3へのアップデート

<p>Nuxt.js + microCMS + Netlifyでブログを作ったときの知識の整理です。<br></p><h2 id="h0d376e5d4e">構成</h2><p>MicroCMSで投稿した記事をNuxt.jsで取得、Nuxt.jsの機能のひとつであるSSG(Static Site Generators)を使用して静的なHTMLとして書き出し、Netlifyで配信します。<br><br>いわゆるJamstack(JavaScript/APIs/Markup)の構成です。<br><a href="https://jamstack.org/" target="_blank" rel="noopener noreferrer">https://jamstack.org/</a><br><br>WordPressに代表されるこれまでのCMSではコンテンツの管理、表示を同じサーバーで行っていました。オールインワンな構成はとても便利で、2021年4月現在で全Webサイトの41%はWordPressが使用されています。<a href="https://w3techs.com/technologies/overview/content_management" target="_blank" rel="noopener noreferrer">https://w3techs.com/technologies/overview/content_management</a><br><br>ただし、WordPressのデメリットとして「セキュリティ」「パフォーマンス」「メンテナンス性」がよく挙げられます。<br>これらを解決する手段としてJamstackが人気が出てきました。<br></p><h3 id="ha3055eb139">セキュリティ</h3><p>JamstackではWordPressとは異なり複数のSaaｓを組み合わせて構成されます。コンテンツ管理はSass(今回はContetful)が担い、APIでコンテンツを配信するのでセキュリティ上対策すべき項目が限定されます。サーバーも別のSaas(今回はNetlify)が担当するのでセキュリティを担保するためのサーバー管理コストがぐっと軽減されます。開発者としては出力部分のみに注力して開発を行うことができます。<br></p><h3 id="hf0d815c0bb">パフォーマンス</h3><p>Jamstackではビルド時にデータを取得し、静的なHTMLとして出力します。閲覧者には静的なHTMLを返すだけなのでWordPressのようなDBにアクセスする構成と比べ、高速になります。<br></p><h3 id="h87d10bcbbe">メンテナンス性</h3><p>サーバーやライブラリ・DBの管理はSassが担うので、開発者は出力部分（フロントエンド）にのみ注力できます。また、記事をMarkDown形式で書いているので、今後他の構成を採用することになったとしても比較的楽に移行できます。フロントエンドは技術の移り変わりが速いので、この「移行のしやすさ」はかなり重要です。<br><br>人視点で見てみると、以下のようなメリットになります。<br>- Webサイト閲覧者にとっては「表示が高速」になり閲覧体験が向上する<br>- 開発者にとっては「開発・管理コストが軽減」する<br>- コンテンツ投稿者にとっては「セキュリティが担保された環境で記事執筆に集中」できる<br></p><h2 id="hf05915425e">Nuxt.js(Composition API, TypeScript)</h2><p><a href="https://ja.nuxtjs.org/" target="_blank" rel="noopener noreferrer">https://ja.nuxtjs.org/</a><br></p><h2 id="hae6947d5ce">microCMS</h2><p><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a>はCMS（Content Management System）の1つで、Headless CMSという分類になります。<br>Headless CMSはWordPressのようなコンテンツと出力画面をオールインワンで提供するCMSとは違い、コンテンツの管理とAPIを提供します。<br>今回はmicroCMSブログで使用されているブログが<a href="https://blog.microcms.io/open-source-the-blog" target="_blank" rel="noopener noreferrer">オープンソース化</a>されていたので、そのまま利用させていただいてます。<br></p><h2 id="h9da03a681c">Netlify</h2><p><a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">https://www.netlify.com/</a><br>Netlifyは静的コンテンツのホスティングサービスで、Githubと連携して、<code>git push</code>すると自動でビルド&amp;デプロイを行ってくれます。<br> </p><h2 id="h4ae7f02243">今後やりたいこと</h2><h3 id="h73712ed092">Composition API + TypeScriptに書き換え</h3><p>Vue.js 3.0から導入されたComposition APIをNuxt用に拡張されたものを使用します。<br>Cpomposition APIの特徴<br>- TypeScriptのサポート<br>- コンポーネントのロジックの共通化がしやすくなる<br><br>Nuxt.js 2.15.3<br>@nuxtjs/composition-api 0.23.3<br>@nuxt/typescript-build 2.1.0</p>