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

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

Newspack Homepage Blocks

はい、こちらは、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から提供されています。

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

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

ものの数10分でそれっぽくなりました。

Newspack Blockで提供される機能

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

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

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

レイアウト変更のためのボタンたくさん
ポチポチっとすれば3列のカード型に
カバー風にもぽちぽちー

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

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

同じ記事が2つ出てしまっている。

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

重複がないだと!!

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

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

どこにでも設置可能で記事連動で、AMP対応なんですって!

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

Newspack Blockの利用法

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

Automattic/newspack-blocks

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

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

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

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

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

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

ではまた次回!!!

次回予告

関連記事

Posted in