<h2 id="h8d027c8ed3">はじめに</h2><p>animationプロパティを用いて</p><h2 id="h9b222c6705">CSSでアニメーションをつくる方法（前回のおさらい）</h2><ul><li>transitionプロパティを使用する → 比較的簡易なアニメーション</li><li>animationプロパティ（@keyframes）を → 複雑なアニメーション</li></ul><p>※animationプロパティは一見複雑に見えますがtransitionプロパティを使ったアニメーションが分かると、理解がかなりスムーズになると思います。今回はtransitionプロパティを用いたアニメーションの解説を行います。</p><h3 id="h195d0485f8">transitionの例</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fembed%2Fpreview%2FRwVwwdB%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DRwVwwdB&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fpen%2FRwVwwdB&image=https%3A%2F%2Fassets.codepen.io%2F4735200%2Finternal%2Fscreenshots%2Fpens%2FRwVwwdB.default.png%3Ffit%3Dcover%26amp%3Bformat%3Dauto%26amp%3Bha%3Dtrue%26amp%3Bheight%3D360%26amp%3Bquality%3D75%26amp%3Bv%3D2%26amp%3Bversion%3D1626942989%26amp%3Bwidth%3D640&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="h53d28a5277">animation(@keyframse）の例</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fembed%2Fpreview%2FYzVPZdR%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DYzVPZdR&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fpen%2FYzVPZdR&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h3996d427d1">まずはメインビジュアルをつくってみる</h2><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/f29bb0bf29e749858c350b355d1a1ae9/%202021-08-20%2014.40.39.png" alt=""><br>キャプチャのようにウインドウ一杯に画像が広がるようなメインビジュアルを作成します。</p><ul><li>高さをheight:100vhにする</li><li>幅はwidth:100%</li><li>画像要素(imgタグ）に対して、object-fit:coverを設定して画像縦横比を固定させる</li></ul><p>【HTML】</p><pre><code>&lt;div class="p-mainVisual"&gt;
  &lt;div class="p-mainVisual__body"&gt;
    &lt;img class="p-mainVisual__img" src="https://placeimg.com/1000/600/arch" alt=""&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>【CSS】</p><pre><code>body{
  margin: 0;
}
.p-mainVisual{
  position: relative;
  height: 100vh;
}
.p-mainVisual__body{
  height: 100%;
}
.p-mainVisual__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code></pre><p><br></p><h2 id="hd2e464d664">スクロールアイコンを設置する</h2><ul><li>pタグで「Scroll Down」のテキストを作成</li><li>擬似要素で円と棒線を作成</li></ul><p>【HTML】</p><pre><code>&lt;div class="p-mainVisual"&gt;
  &lt;div class="p-mainVisual__body"&gt;
    &lt;img class="p-mainVisual__img" src="https://placeimg.com/1000/600/arch" alt=""&gt;
  &lt;/div&gt;
  &lt;!-- ↓ここから追加 --&gt;
  &lt;div class="p-mainVisual__float"&gt;
    &lt;p class="p-mainVisual__scrollText"&gt;Scroll Down&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="hc40ff86edb">スクロールアイコンを設置する領域を確保する</h3><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/71739146e4d64b57a01538bd214cd7f8/%202021-08-20%2016.02.21.png" alt=""></p><ul><li>.p-mainVisaul__floatを中央寄せ＋下寄せ</li><li>padding-bottom:70pxで領域を広げる</li></ul><p>【CSS】</p><pre><code>/* スクロールアイコン設置の領域確保 */
.p-mainVisual__float{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 70px;
}</code></pre><p><br></p><h3 id="h7de6b04ea8">棒線要素を作る</h3><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/9b765db94c04430b8af82f17ab3eb386/%202021-08-20%2016.08.27.png" alt=""></p><ul><li>.p-mainVisual__floatの擬似要素として作成する</li><li>width:2px、height:60pxの棒線</li><li>背景色は#eee</li></ul><pre><code>/* 棒線要素 */
.p-mainVisual__float:before{
  content: "";
  position: absolute;
  width: 2px;
  height: 60px;
  background-color: #eee;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}</code></pre><p><br></p><h3 id="hb4f8684d1e">丸要素を作る</h3><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/9c0d5a73c6c44f3f831812201d93e714/%202021-08-20%2016.17.27.png" alt=""></p><ul><li>.p-mainVisual__floatの擬似要素として作成する</li><li>width:10px、height:10px、border-radius:50%の丸</li><li>背景色は#eee</li></ul><pre><code>/* 円の要素 */
.p-mainVisual__float:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #eee;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}</code></pre><p><br></p><h2 id="hab41ff8fa6">アニメーションをつくる</h2><h3 id="hfc2a979192">まずは丸を上下に動かしてみる</h3><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/f98be2e84225477bb09cb02ca18dd401/9ebc05e083316a9b9eeef295244d9cb6.gif" alt=""><br><a href="https://developer.mozilla.org/ja/docs/Web/CSS/animation" target="_blank" rel="noopener noreferrer">アニメーションプロパティのドキュメント（MDN）</a></p><ul><li>animation-name → @keyframesの名前と紐づける</li><li>animation-duration → アニメーションの長さ</li><li>animation-iteration-count → アニメーションを繰り返す回数</li><li>&nbsp;animation-timing-function → アニメーションの移動速度</li></ul><pre><code>/* 円の要素 */
.p-mainVisual__float:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #eee;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  /* animation */
  animation-name: circle;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes circle{
  0%{
    bottom: 60px;
  }
  100%{
    bottom: 0px;
  }
}</code></pre><p><br></p><h3 id="h91cc7b8cab">円が下に移動するに連れて透明に</h3><ul><li>opacityを１→０に</li></ul><pre><code>@keyframes circle{
  0%{
    bottom: 60px;
    opacity: 1;
  }
  100%{
    bottom: 0px;
    opacity: 0;
  }
}</code></pre><p><br></p><h3 id="h5c71b88072">棒線も丸の動きに合わせて短くする</h3><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/e7e8336fcf3d43d0ac38dc3aa3ccabaa/6fa77ec161c71ec41f79d4d27e122349.gif" alt=""></p><ul><li>heightを60px → 0pxに変化させる</li></ul><pre><code>/* 棒線要素 */
.p-mainVisual__float:before{
  content: "";
  position: absolute;
  width: 2px;
  height: 60px;
  background-color: #eee;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* animation */
  animation-name: line;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes line{
  0%{
    height: 60px;
  }
  100%{
    height: 0px;
  }
}</code></pre>

animationプロパティを用いたスクロールアニメーションの実装

CSSアニメーション入門２

<h2 id="h8d027c8ed3">はじめに</h2><p>CSSで簡単なアニメーションを作成する方法をボタンのアニメーションを作りながら解説します。<br>特に今回紹介するtransitionを用いたプロパティは比較的簡単に作成することができて、サイトの出来栄えをリッチに出来る方法の一つですので、雰囲気を掴んで使いこなしてみてください！</p><h2 id="h14400d6cf6">CSSでアニメーションをつくる方法</h2><ul><li>transitionプロパティを使用する → 比較的簡易なアニメーション</li><li>animationプロパティ（@keyframes）を → 複雑なアニメーション</li></ul><p>※animationプロパティは一見複雑に見えますがtransitionプロパティを使ったアニメーションが分かると、理解がかなりスムーズになると思います。今回はtransitionプロパティを用いたアニメーションの解説を行います。</p><h3 id="h195d0485f8">transitionの例</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fembed%2Fpreview%2FRwVwwdB%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DRwVwwdB&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fpen%2FRwVwwdB&image=https%3A%2F%2Fassets.codepen.io%2F4735200%2Finternal%2Fscreenshots%2Fpens%2FRwVwwdB.default.png%3Ffit%3Dcover%26amp%3Bformat%3Dauto%26amp%3Bha%3Dtrue%26amp%3Bheight%3D360%26amp%3Bquality%3D75%26amp%3Bv%3D2%26amp%3Bversion%3D1626942989%26amp%3Bwidth%3D640&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h3 id="h53d28a5277">animation(@keyframse）の例</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fembed%2Fpreview%2FYzVPZdR%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DYzVPZdR&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fkondo-tomonori1001%2Fpen%2FYzVPZdR&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hd0b1d286be">STEP1 シンプルなボタンをつくる</h2><p>今回のデモで使用するファイルは<a href="https://github.com/kondo-tomonori1001/css-animation-basic" target="_blank" rel="noopener noreferrer">こちら</a>に格納してありますので、必要に応じてダウンロードして下さい。<br>まずは次の画像のようなシンプルなボタンを作ってみます。</p><ul><li>paddingは上下に10px、左右に30px</li><li>borderは1pxで色は#333</li><li>font-sizeは1.2em</li></ul><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/4cd42dec2ac445ec9936606708db2e95/%202021-07-22%2017.55.23.png" alt=""><br></p><h2 id="ha0aebad8a2">STEP2 擬似要素で背景色を追加する</h2><p>次に擬似要素（:before）を使って背景色を追加してみます。<br>※今回はtransitionでアニメーションを追加するために「background-color」ではなく「擬似要素」を用います</p><ol><li>　①positionプロパティで背景色の位置を決める</li><li>　②z-indexで文字の下に背景（擬似要素）を移動させる</li></ol><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/913e57f7c72c4122b3fef9fc3e57c56e/%202021-07-22%2018.31.41.png" alt=""></p><pre><code>.c-btn{
  padding: 10px 30px;
  cursor: pointer;
  border: 1px solid #333;
  font-size: 1.2em;
  background-color: transparent;
  /* 親要素にrelativeを設定 */
  position: relative;
  /* 文字色を白に */
  color:#fff
  }

.c-btn::before{
  content: "";
  /* 擬似要素にabsoluteを設定 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  /* z-indexで文字の下に背景（擬似要素）を移動させる */
  z-index:-1
 }</code></pre><h2 id="hc31cf1c009">STEP3 hoverした時にアニメーションさせる</h2><p>最後にhoverした時にアニメーションする設定をしていきます。</p><ol><li>　①文字色を黒→白にする</li><li>　②背景色のサイズをwidth:0 → widh:100%にする</li><li>　③transitionを設定</li></ol><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/c027cce04a024227a0586777b9743a2d/4851a0522412c6889b585d3a36a80cdd.gif" alt=""></p><pre><code>.l-main{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ここから下にボタンのスタイルを書いていきます */
.c-btn{
  padding: 10px 30px;
  cursor: pointer;
  border: 1px solid #333;
  font-size: 1.2em;
  background-color: transparent;
  position: relative;
  /* 文字色を黒に戻す */
  color: #333;
}

.c-btn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* widthを0%に */
  width: 0%;
  height: 100%;
  background-color: blue;
  z-index: -1;
  /* transitionでアニメーション */
  transition: 0.3s;
}

.c-btn:hover{
  /* ホバー時に白 */
  color: #fff;
}

.c-btn:hover:before{
  /* ホバー時に100% */
  width: 100%;
}</code></pre><p><br></p><h2 id="hcbdf364726">既存テーマの追加CSSで作成してみる</h2><p>今回はWordPressブロックエディタ対応のSnowMonkeyで作成してみたいと思います。</p><pre><code>.smb-btn {
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; background-color: transparent;
&nbsp; &nbsp; border: 1px solid #333;
&nbsp; &nbsp; color: #333;
}

.smb-btn:before {
&nbsp; &nbsp; position: absolute;
&nbsp; &nbsp; top: 0;
&nbsp; &nbsp; left: 0;
&nbsp; &nbsp; content: "";
&nbsp; &nbsp; width: 0%;
&nbsp; &nbsp; height: 100%;
&nbsp; &nbsp; background-color: blue;
&nbsp; &nbsp; z-index: -1;
&nbsp; &nbsp; transition: 0.3s;
}

.smb-btn:hover {
&nbsp; &nbsp; color: #fff;
}

.smb-btn:hover:before {
&nbsp; &nbsp; width: 100%;
}</code></pre>

CSSで簡単なアニメーションを作成する方法をボタンのアニメーションを作りながら解説します。

CSSアニメーション入門

<h2 id="h31a4a2ee63">package.jsonにCLI実行コマンドを追加</h2><pre><code>"scripts": {
    "cli": "wp-env run cli"
}</code></pre><p><br></p><h2 id="h065194f86f">viエディタを起動する</h2><p>次のコマンドを実行し、viエディタで.htaccessを編集する。</p><pre><code>npm run cli vi .htaccess</code></pre><p>以下を.htaccessに追記する</p><pre><code>php_value upload_max_filesize "5M"</code></pre><p><br></p><h2 id="hbd2d0d0806">viエディタを上書きして終了する</h2><p>「esc」キーを押して、「:wq」コマンドで上書き保存する。</p>

wp-envでアップロード出来る最大容量を変更する方法の解説です。

wp-envでアップロード出来る最大容量を変更する

<h2 id="h125177c2b0">GAS(Google App Script)をVSCodeで編集する</h2><p>GASをローカル環境で扱えるようにすることで</p><ul><li>使い慣れたエディタで使用することが可能</li><li>Gitでのバージョン管理ができる</li></ul><p>といったメリットがあります。</p><h2 id="hee3baed4af">claspをインストールする</h2><p>Google公式のCLIツール「clasp」を導入します。<br>下記のコマンドを実行するとインストールが始まります。</p><pre><code>npm&nbsp;install&nbsp;@google/clasp&nbsp;-g</code></pre><h2 id="hf079de3455">Googleアカウントにログイン</h2><p>次のコマンドを実行すると、ブラウザでGoogleアカウントの認証画面が開きます。</p><pre><code>clasp&nbsp;login</code></pre><p>このタイミングでルート直下に「.clasprc.json」というファイルが生成されます。<br>※このファイルは後で説明するログアウトのコマンドを実行すると削除されます。</p><h2 id="hb9789e0d44">Google&nbsp;Apps&nbsp;Script&nbsp;APIをオンにする</h2><p>設定画面(<a href="https://script.google.com/home/usersettings" target="_blank" rel="noopener noreferrer">https://script.google.com/home/usersettings</a>)からGoogle&nbsp;Apps&nbsp;Script&nbsp;APIをオンにしておきます。<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/a0fb026f2940401fa0ded710004f1ce8/article_gas_1.png" alt=""></p><h2 id="h05bd938dc4">スプレッドシートをCLIから作成</h2><p>次のコマンドを実行してスプレッドシートを作成します。</p><pre><code>clasp create test --type sheets</code></pre><p>上がシートへのリンク、下がスクリプトへのリンクとなっています。<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/a63ede5d16fb40bcbb8f8d74aa17fb3c/%202021-06-17%2023.42.11.png" alt=""></p><h2 id="h67025fa502">JSファイルをGASにpushする</h2><p>今回はテスト用に「test.js」を同じディレクトリ内に作成して、console.logを出力してみます。<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/ea94f173d39f40cab1b7c69abc3003ec/article_gas_2.png" alt=""><br>JSファイルの記述・保存して、次のコマンドを実行すると、GASに反映されます。</p><pre><code>clasp push</code></pre><p><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/69809617262a4e90b5e8c4c0f383c576/article_gas_3.png" alt=""></p><h2 id="h68b0ecb4fa">GASからpullする</h2><p>次はGAS側でコードを追加したものをローカルに反映します。<br>次のコマンドを実行すると、ローカルに反映されます。</p><pre><code>clasp pull</code></pre><h2 id="h8049690bf1">&nbsp;Googleアカウントからログアウト</h2><p>次のコマンドを実行するとGoogleアカウントからログアウトして、ルート直下に生成された「.clasprc.json」が削除されます。</p><pre><code>clasp&nbsp;logout</code></pre>

GAS(Google App Script)をVSCodeで編集するために必要な設定等の解説です。

GAS(Google App Script)をVSCodeで編集する

<h2 id="h969568f4b2">Dockerを起動する</h2><p>wp-envはDocker上で動かすため、Dockerを起動しておきます。</p><h2 id="hc70803c9a4">wp-envのモジュールをインストール</h2><p>まずはnpmを初期化します。</p><pre><code>npm init</code></pre><p>以下のコマンドを実行して、wp-envをインストールします。</p><pre><code>npm i @wordpress/env --save-dev</code></pre><h2 id="he2dd8a2ed7">package.jsonを編集する</h2><p>wp-envの実行用コマンドをscriptsに追加</p><pre><code>"scripts": {
    "start":"wp-env start",
    "stop": "wp-env stop",
    "restart": "wp-env start —update",
},</code></pre><p>次のコマンドでwp-envを実行してWordPressを起動</p><pre><code>npm run start</code></pre><p>終了するときは</p><pre><code>npm run stop</code></pre><p>テーマやプラグインを追加した時に再起動する場合は</p><pre><code>npm run restart</code></pre><p>成功するとデフォルトテーマ「Twenty Twenty-One」が設定された状態で起動します<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/21d0057d8368428b8a91954e3f0f25be/_2021-06-16%2013.09.09-min.png" alt=""></p><h2 id="hac9a436dce">テーマやプラグインを追加する</h2><p>.wp-env.jsonファイルを作成し、テーマやプラグインを設定する</p><pre><code>{
  "themes": [ "./themes/test-theme" ],
  "plugins": [ "./test-block" ]
}</code></pre><p>追加したあとはwp-envを再起動</p><pre><code>npm run restart</code></pre><h2 id="hd12b8cfb37"><br>日本語版パッケージをデフォルトにする</h2><p>.wp-env.jsonに以下を追記する</p><pre><code>{
  "core": "https://ja.wordpress.org/latest-ja.zip"
}</code></pre><h2 id="h9b37d380a7">導入時に発生したエラー（原因は特定できず）</h2><p>実は１ヶ月ほど前に導入にチャレンジした際に、下記のようなエラーが表示されWordPressが起動しませんでした。<br>その後、再チャレンジした際には問題なく起動しました。念のため備忘録として残しておきます。<br>（直前にnpmをアップデートしたため、これが原因だった？）</p><pre><code>&gt; study_wp_demo@1.0.0 wp-env 
&gt; wp-env "start"
⚠ Warning: could not find a .wp-env.json configuration file and could not determine if '/Users/.......' is a WordPress installation, a plugin, or a theme.
✖ Error while running docker-compose command.
Creating c5c6f7f2ce9d2e8f0b50eca336daa42f_cli_run ... 
Creating c5c6f7f2ce9d2e8f0b50eca336daa42f_cli_run ... done
mysqlcheck: Got error: 1045: Access denied for user 'username_here'@'172.19.0.5' (using password: YES) when trying to connect
2
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! study_wp_demo@1.0.0 wp-env: `wp-env "start"`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the study_wp_demo@1.0.0 wp-env script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:</code></pre><h2 id="h282b720588">関連リンク</h2><ul><li><a href="https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/" target="_blank" rel="noopener noreferrer">WordPress公式</a></li></ul>

wp-envでWordPressの開発環境を立ち上げるまでの解説記事です。

wp-envでWordPress開発環境構築

<h2 id="hcf13c1872c">テンプレート用モジュールのインストール</h2><p>下記のコマンドを実行して、カスタムブロックの雛形をインストールします。<br>※「test-block」の部分は任意の名称</p><pre><code>$ npx @wordpress/create-block　test-block</code></pre><p>以下のファイルがダウンロードされます。<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/6669ef27b6a7402eaacd488032172461/_2021-06-16%2022.59.02-min.png" alt=""></p><h2 id="hd0ac083ece">wp-envでWordPressを起動</h2><h3 id="h87350e34cc">モジュールインストール</h3><p>※local by flywheel や MAMP を使用する場合はスルーしてください。<br>下記のコマンドを実行してwp-envをインストールします。</p><pre><code>npm install @wordpress/env --save-dev</code></pre><h3 id="hec9f39936c">package.jsonを編集</h3><p>scriptsにwp-env用のコマンドを追加する。</p><pre><code>"scripts": {
    "wp-start": "wp-env start",
    "wp-stop": "wp-env stop"
  },</code></pre><h3 id="h669145fb9b">コマンドの実行</h3><p>下記のコマンドを実行して、WordPressが起動することを確認する。</p><pre><code>npm run wp-start</code></pre><p>起動したら管理画面に移動して、プラグインとして認識されていることを確認する。<br><img src="https://images.microcms-assets.io/assets/7e06b7dc4ebc44109ae97a2ff25978cc/3be20163f173402292c5c48a4f99ffdf/article_wp-block-test.png" alt=""></p><h2 id="h402de45059">カスタムブロック開発をはじめる</h2><p>以下のコマンドを実行すると開発モードに（ファイルを上書き保存するためにコンパイルされます）</p><pre><code>npm run start</code></pre><p><br></p><ul><li>「edit.js」がブロックエディタの編集画面を作成するコンポーネント</li><li>「save.js」が記事画面（記事を保存した時に呼ばれる）コンポーネント</li></ul><p><br>編集が完了したらbuildコマンドを実行します</p><pre><code>npm run build</code></pre><p><br></p><h2 id="h282b720588">関連リンク</h2><ul><li><a href="https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page" target="_blank" rel="noopener noreferrer">UIパーツ一覧（Storybook）</a></li><li><a href="https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-create-block/" target="_blank" rel="noopener noreferrer">@wordpress/create-block リファレンス</a></li></ul>

WordPressのブロックエディタ（Gutenberg）で独自にブロック作成できるカスタムブロック開発の始め方を解説する記事です。

カスタムブロック開発の始め方

<pre><code>テスト記事２つめだよ〜
console.log('hello world')</code></pre>

この記事はテスト記事です。この記事はテスト記事です。この記事はテスト記事です。