BanbaYa備忘録　投稿をさまざまなレイアウトで表示してくれるNewspack Blocksがとても便利そう

参照元　 megane9988のブログ

投稿をさまざまなレイアウトで表示してくれるNewspack Blocksがとても便利そう

参照URL　 https://megane-blog.com/2020/01/04/2480

まずはこちらの動画を御覧ください。

はい、こちらは、Automattic社が提供するサービスNewspackから提供されているブロックの使い方動画のようです。

このNewspackは2019年の1月にアナウンスが有ったようです。
Announcing Newspack by WordPress.com — A New Publishing Solution for News Organizations

日本語だと、Capital Pの記事があります。
WordPress.comがニュースメディア用パッケージNewspackを公開

NewspackはGoogleほかローカルメディアプラットフォームSpirited Mediaや非営利団体も出資しているプロジェクトで、メディアサイトが求められる機能をパッケージングしたサービスとなる模様。

Capital P – WordPressエキスパートによるデジタル・メディアハブ

というわけで、メディアサイト向けに提供される機能の一つとして、Newspack Blockがあるようですね。提供自体はGithubから提供されています。

と、前段はさておきまして、動画を見た私は「すごく便利そうーー！！」と思うと同時に、「あんまり誰にも教えてたくないー」とおもいました。。あまりに良くできている感じだったからです。

が、どうせ見つかるでしょうし、便利そうなのは間違いありません。ので、とりあえず触ってみました。そして出来上がったのがこのサイトのトップページです。

Newspack Blockで提供される機能

ブロックとして3つのブロックが提供されます。

ざっくりとしたそれぞれの機能は以下の通り。

• Homepage Posts
  • カテゴリーやタグ、著者などの絞り込みで記事を表示する、件数やレイアウトなども自由に変更できる
• Articles Carousel
  • カテゴリーやタグ、著者などの絞り込みでカルーセルを表示する
• Donate
  • まだ試してないので、今回はふれません。

Homepage Postsは、直感的にレイアウトや表示件数も変えられますし、thumbnailの形や大きさも変更可能ということで、これ今まで仕事でやってきたやつやん。。という気持ちでいっぱいです。

すごい、とにかくすごいです。さらにすごいのが、記事の重複をなくす機能。たとえば、

• 同カテゴリーで1記事目は画像を大きめに表示し、抜粋も表示する。
• 2件目以降は画像とタイトルだけで小さめに出すといった内容。

この場合に、2つのブロックに分けて設定を行う必要があります。こうなると不具合が発生します。下記のように、2つのブロックはどちらも最新順に並ぶので、1件目が重複してしまうわけです。

はい、困った問題ですよね。しかし！！これも対応済なのです。実際に表示される画面ではこの通り！重複がなくなってるんです。

どうやら、同ページ内で重複した記事は出ないように、どの位置にHomepage Postsを設定しても、先に表示された記事は次のブロックにおいてスキップされる仕組みとなってるんです。すごいことですねー。

さらに、カルーセル。こちらも記事連動型で、Homepage Postsと同じ用に絞り込んで設定が可能です。件数がえらべて、自動再生にするかどうかも選べます。さらにさらに。このスライダーはAMP対応！！！ 大変。大変だー！

というわけで、どうでしょうか。なんかすごいことですね。すごいことなんです。すごいと何回言ったかわからないぐらいすごいです。

Newspack Blockの利用法

このNewspack Blockはプラグインとして提供されています。ただ現在は公式のディレクトリには登録されておらず、Github上かダウンロードして利用する形となります。

Automattic/newspack-blocks

またその際にcomposerとnpmを利用してbuildする必要があります。くわしくはReadmeをご確認くださいませ。

まだ公式ディレクトリには上がってないということですし、利用は自己責任でお願いします。

たくさんの便利ブロックとその淘汰の先に

ブロックエディターがリリースされたのが2018年末ですからちょうど一年ぐらいでしょうか。すごい勢いで便利なブロックが出てきていますね。そしてこれからもどんどん便利なブロックが出てきそうです。

そんななかで、ブロックとどのように付き合い、どうやってサイトを運営していくのが、最適なのか。何でもかんでも入れて使えばいいぜー！というわけではないような気もしますし、でもなるべくなら便利なブロックをつかって工数を下げ、コンテンツに集中して、より良いものを届けたいものです。

こういう事を考えながら、自分たちでもブロックを作りながら今年はサイトづくりをしていくのだろうなーと考えたブロックでした。

ではまた次回！！！

次回予告

• AMPでのアクセス解析
  • クリックイベントの取得
• AMPとカスタムメニューの組み合わせ
• AMPでアドセンス自動広告
• Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
• 2月に行われる自分主催のイベント”めがねさんと。“について
• WordCamp ASIA 2020について
• 日記的なYoutubeを再開したい。
• 毎日続けられるかどうか。
• ロゴをかっこよくする
• メニューをサンドイッチぽくする

@memo

web情報

http://img.youtube.com/vi/h0KrhYawxX8/0.jpg

January 4, 2020 at 08:04PM