3この記事は1980文字で約5分で読めますアフィリエイト系のブログとかでよくお見かけする○○分で読み終わりますという表示をGatsby.jsで作った本ブログにも入れてみようというお話です。Timeの効果そもそも、読み終わるまであと○○分、なんていう表示って必要なのでしょうか?いまいち効果が解らなかったので実装の前に効果を確認していきます。始まりはとある実験からそもそも、Webページを運用するものにとって無くてはならない指標は何でしょうか?そうです。優良コンテンツを作ってもすぐ読み飛ばされては仕方がない。これはブログをやる者、ECサイトをやる者、世界のWebページ運用者であれば誰もが抱える悩みなわけです。Read?というリサーチからWebページの記事のうち18%しか読まれていないという事実を知ってしまいます。Read?から引用したものですが18%まで一気に下がるんですね・・・。Crayさんの上記問題への解決策は、あらかじめユーザーにどれくらいで読み終わるか教えてあげるというものでした。timeを設定したのです。design実装後、サイトの統計を取得し、結果的に13.8%ほど滞在時間が向上したとのこと!すごい。timeが有名になりました。Crayさんは、自身のサイトにPHPコードを乗っけたものの、WordPressのプラグイン化は別の方(nigauriさん)が作成し、滞在時間を延ばしたいアフィリエイトサイトがこぞってinsert-estimated-reading-timeを導入したことで一気にデファクトスタンダードになりました。Gatsby.jsのブログサイトでも実装してみるさっそくこのブログにも導入してみます。Timeを追加するプラグインgatsby-remark-reading-timeがあるのでインストールします。gatsby-remark-reading-timegatsby-config.jsに、プラグインの設定を追加します。'gatsby-remark-reading-time',blogPost変更プラグインをインストールするとGraphQLでreadingTimeを使えます。}`;blog-post.jsで利用します。10}分</b>で読めます</p>こんな感じで無事実装できました。(CSSは別で当ててます)結論そもそも読み終わるまで〇〇分の歴史から追いかけると面白いですね。無事できてよかったです。