Lazy Blocksを使ったカスタムブロックの作り方 (Yes/Noチャート)

2022-05-02

CSSのプロパティ情報を見ていたらアイデアが閃いたので久しぶりにLazy Blocksネタをやってみるのにゃー

人物のアイコン素材 その5

ホントに久しぶりですね

前回までのネタは一番最後にリンク集があるから見てくれにゃー

人物のアイコン素材 その5

で、今回はYes/Noチャートですか？

質問にYesとかNoとか答えていくと最終的な答えにたどり着くやつにゃー

人物のアイコン素材 その5

既にWordPressにはそういうプラグインはあるみたいですよ

作った後で気づいたけどそうなのにゃー
これで十分な人は全くカスタムブロックで作る必要はないのにゃー

人物のアイコン素材 その5

まあ、強いて言うならカスタムブロックはデザインや機能を自由に変更、拡張できるのが利点ですかね

まあ、作るのはシンプルな機能のブロックになるけど、アンケートやパワポみたいなプレゼンツールとかにも応用できるかもしれんにゃー

人物のアイコン素材 その5

それは楽しみですね

HTMLとかCSSは詳しくないのでもっとベリグーな実装方法はあると思うが作ってみるにゃー

今回のカスタムブロックの発想

まずアイデアとしてはscroll-snap-typeというCSSのプロパティが面白いそうなので使ってみたいというところからスタートしているにゃー

人物のアイコン素材 その5

スクロールするとピタッとなってくれる機能ですね

うむ
これはスクロールバーを前提にしているけどスクロールバー無しにすればページめくりみたいに使えないかな、という発想にゃー

人物のアイコン素材 その5

スクロールバーの代わりにボタンなどでページ切り替えする感じですかね

そうにゃー
カルーセルとか昔からあるやり方だから確立された実装方法があるかもしれんがとりあえず今回はコレを使う方針にゃー

人物のアイコン素材 その5

そのあたりは詳しい人に任せましょう

ベースとなるHTMLを作ってみる

ということで骨格となるHTMLを作ったのにゃー
こんな感じ 

<div class="yesno">
  <div class="container">
    <section class="slide" id="1">
      <div class="upper">
        Question 
      </div>
      <div class="middle">
        <div style="height: auto;width: 100%;font-size: 100%;">
          質問：猫はかわいい？
        </div>
          <img src="url" class="picture">
      </div>

      <div class="bottom">
        <a href="#2" class="css-button-rounded--black">
          Yes
        </a>
        <a href="#3" class="css-button-rounded--black">
          No
        </a>
      </div>
    </section>
  </div>
</div>
人物のアイコン素材 その5

解説お願いします

うむ
sectionタグが表示されるコンテンツにゃー
これを複数用意してページ切り替えしていくにゃー
sectionタグの中に質問と回答を入れて、hrefでページ移動にゃー

人物のアイコン素材 その5

sectionタグが繰り返しになる感じですね
そして質問や回答といった中身は変更可能にしておく必要があると

繰り返しと質問・回答の部分はLazy Blocksの機能で作っていくにゃー

人物のアイコン素材 その5

scroll-snap-typeはどこに出てくるのでしょうか？

それはCSSのところにゃー
CSSはこんな感じ
ジェネレーターや他サイトのコードを参考に作ったにゃー 

.yesno {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  overflow: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  height: 500px;
  width: 500px;
  /*IE,Microsoft Edge*/
  -ms-overflow-style: none;
  /*Firefox*/
  scrollbar-width: none;
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
}
 /*Google Chrome,Safari*/
.container::-webkit-scrollbar{
  display: none;
}
.slide {
  scroll-snap-align: center;
  height: 500px;
  width: 500px;
  flex: none;
}
.slide:nth-child(even) {
  background-color: #19bee9;
}
.slide:nth-child(odd) {
  background-color: #14dab9;;
}
.upper {
  height: 10%;
  max-height: 10%;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  height: 70%;
  max-height: 70%;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom {
  height: 20%;
  max-height: 20%;
  width: 100%;
  max-width: 100%;
}
.picture {
  display: block;
  height: inherit;
  max-height: inherit;
  width: inherit;
  max-width: inherit;
  object-fit: cover;
  margin-top: 16px;
}

/*https://markodenic.com/tools/buttons-generator/*/
.css-button-rounded--black {
  /*min-width: 130px;*/
  /*height: 40px;*/
  font-size: 2rem;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: 2px solid #212529;
  background: #212529;
  text-decoration: none;
}
.css-button-rounded--black:hover {
  background: #fff;
  color: #212529
}
人物のアイコン素材 その5

なるほど、横軸で合わせていく感じですね

スクロールバーの表示なし設定はブラウザの挙動がまちまちらしいのでバージョンによっては表示されるかもしれんにゃー

人物のアイコン素材 その5

これをベースにLazy Blocksで作り込んでいく訳ですね

変数の割当・Handlebars実装

このHTMLの各パラメータをLazy Blocksの変数に変換していくにゃー

人物のアイコン素材 その5

ここから先は前回と同じやり方ですね

そうなのにゃー
今回はHandlebarsで実装にゃー
できたコードはこんな感じ 

<div class="{{blockId}}yesno">
  <div class="{{blockId}}container">
    {{#each repeater1}}
    <section class="{{blockId}}slide" id="{{blockId}}{{math @index '+' 1}}">
      <div class="upper">
        {{#compare goto1 '>' 0}}
        Question {{math @index '+' 1}}
        {{/compare}}
      </div>
      <div class="middle">
        <div style="height: auto;width: 100%;font-size: {{font-size}}%;">
          {{question}}
        </div>
        {{#if picture}}
          <img src="{{picture.sizes.full.url}}" class="picture">
        {{/if}}
      </div>
      <div class="bottom">
        {{#compare goto1 '>' 0}}
        <a href="#{{blockId}}{{goto1}}" class="css-button-rounded--black">
          {{answer1}}
        </a>
        <a href="#{{blockId}}{{goto2}}" class="css-button-rounded--black">
          {{answer2}}
        </a>
        {{/compare}}
      </div>
    </section>
    {{/each}}
  </div>
</div>
<style>
.{{blockId}}yesno {
  display: flex;
  justify-content: center;
  align-items: center;
}
.{{blockId}}container {
  overflow: auto;
  /*scroll-snap-type: x mandatory;*/
  display: flex;
  height: {{slide-y}}px;
  width: {{slide-x}}px;
  /*IE,Microsoft Edge*/
  -ms-overflow-style: none;
  /*Firefox*/
  scrollbar-width: none;
  text-align: center;
  color: #fff;
  font-size: 2rem;
}
 /*Google Chrome,Safari*/
.{{blockId}}container::-webkit-scrollbar{
  display: none;
}
.{{blockId}}slide {
  scroll-snap-align: center;
  height: {{slide-y}}px;
  width: {{slide-x}}px;
  flex: none;
}
.{{blockId}}slide:nth-child(even) {
  background-color: #19bee9;
}
.{{blockId}}slide:nth-child(odd) {
  background-color: #14dab9;;
}
.upper {
  height: 10%;
  max-height: 10%;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  height: 70%;
  max-height: 70%;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom {
  height: 20%;
  max-height: 20%;
  width: 100%;
  max-width: 100%;
}
.picture {
  display: block;
  height: inherit;
  max-height: inherit;
  width: inherit;
  max-width: inherit;
  object-fit: cover;
  margin-top: 16px;
}

/*https://markodenic.com/tools/buttons-generator/*/
.css-button-rounded--black {
  /*min-width: 130px;*/
  /*height: 40px;*/
  font-size: 2rem;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: 2px solid #212529;
  background: #212529;
  text-decoration: none;
}
.css-button-rounded--black:hover {
  background: #fff;
  color: #212529
}
</style>
人物のアイコン素材 その5

Lazy Blocksの設定はどうなっていますか？

こんな感じにゃー
複数のブロックが一つのページに置かれた場合の対策として
{{blockId}}container
のような感じでblockIdでユニークにしているけど
LuxeritasテーマだとこのままではCSSが読み込めなかったから
環境に合わせて修正必要かもしれんにゃー

人物のアイコン素材 その5

{{blockId}}{{math @index '+’ 1}}
は何でしょうか？

これはIDの設定にゃー
@index
がブロックエディターで追加した質問の番号にゃー
これがゼロで始まるにゃー
ブロックエディターだとRowが１から始まるからわかりにくいにゃー
分かりやすい様にプラス１しているにゃー
blockIdと組み合わせることで他ブロックと被らないようにしているにゃー

人物のアイコン素材 その5

{{#compare goto1 '>’ 0}}
は何でしょうか？

これは終了条件として使っているにゃー
回答をクリックしたときの次の行き先の質問番号がゼロだったら終了として
回答とか非表示になるようにしているにゃー

人物のアイコン素材 その5

なるほど

完成

最後に作ったサンプルをおいておくにゃー
残念ながらLuxeritasテーマだとうまく動作しないけど

Question 1
猫はかわいい？
もちろん！ あたぼーよ！！
Question 2
この世でいちばん尊いものは？
現ナマだろっ 猫一択！
Question 3
右氏をどうおもう？
居てもいいかも そんなことより猫かわいい
あなたは愛猫家です！
もっと猫を愛しましょう！！
Question 6
ま・・・まさか犬が好き？
否定はしない 嘘♡、猫LOVEだよ♡
地獄に堕ちる可能性が非常に高いです！
人物のアイコン素材 その5

最初の質問の回答は行き先が同じだし、その後もなんか酷い展開になってますけど

猫にまさるものはないのにゃー
あと作ったあとに気づいたけどscroll-snap-typeが無くてもこのカスタムブロックは動くのにゃー

人物のアイコン素材 その5

なんそれ！？

今回はこんな感じにゃー
それではフィル ミレンゲー

人物のアイコン素材 その5

なぜヒンディー語！？

インターネット,開発,gutenberg,Lazy Blocks,WordPress,オリジナルブロック,カスタムブロック,プラグイン

Posted by 管理人