Reading Time プラグインを使ってみた - GRAV -

GRAV の公式プラグインに Reading Time というのがあります。

GRAV Plugin Reading Time

たまに見かける「この記事を読むのにかかる時間は～分です。」みたいなことを実現するためのプラグインです。
無くてもまったく困らない機能ですが、あるとなんだかカッコイイ気がします（そうでもない？）。

ということでつけてみました( ﾟДﾟ)

　

使い方は簡単です。
使用しているテーマのテンプレートを編集して、所要時間を表示させたい箇所に

{{ page.content|readingtime }}

のコードを追加するだけ。

　

当サイトではBoostrap4テーマを使ってます。表示させたい箇所はBlog記事一覧のページなので

[gravインストール先]/user/themes/boostrap4/templates/partials/blog_item.html.twig

上記ファイルに追記することになります。

File: [gravインストール先]/user/themes/boostrap4/templates/partials/blog_item.html.twig
～～～
        {% if page.header.continue_link is same as(false) %}
            <p>{{ page.content|raw }}</p>
            {% if not truncate %}
                {% set show_prev_next = true %}
            {% endif %}
        {% elseif truncate and page.summary != page.content %}
            <p>{{ page.summary|raw }}</p>
            <p><a href="{{ page.url }}">Continue Reading...</a></p>
        {% elseif truncate %}
            {% if page.summary != page.content %}
                <p>{{ page.content|truncate(550) }}</p>
            {% else %}
                <p>{{ page.content|raw }}</p>
            {% endif %}
            {% if page.summary.enabled %}
                <p><a href="{{ page.url }}">Continue Reading...</a></p>
            {% endif %}
        {% else %}
            <p>{{ page.content|raw }}</p>
            {% set show_prev_next = true %}
        {% endif %}
～～～

　

各記事の概要が表示された場合に「Continue Reading...」のリンクが表示されるようになっているので、その横にReading Time を表示させ（追記し）ます。

File: [gravインストール先]/user/themes/boostrap4/templates/partials/blog_item.html.twig
～～～
        {% if page.header.continue_link is same as(false) %}
            <p>{{ page.content|raw }}</p>
            {% if not truncate %}
                {% set show_prev_next = true %}
            {% endif %}
        {% elseif truncate and page.summary != page.content %}
            <p>{{ page.summary|raw }}</p>
            <p><a href="{{ page.url }}">Continue Reading...</a><span class="float-right">{{ page.content|readingtime }}</span></p>
        {% elseif truncate %}
            {% if page.summary != page.content %}
                <p>{{ page.content|truncate(550) }}</p>
            {% else %}
                <p>{{ page.content|raw }}</p>
            {% endif %}
            {% if page.summary.enabled %}
                <p><a href="{{ page.url }}">Continue Reading...</a><span class="float-right">{{ page.content|readingtime }}</span></p>
            {% endif %}
        {% else %}
            <p>{{ page.content|raw }}</p>
            {% set show_prev_next = true %}
        {% endif %}
～～～

これで完了です。

　

サイトに戻って確認してみると、きちんと所要時間が表示されています。

が、

「0 minutes, 43 seconds」とか「0 minutes, 12 seconds」とかありえない時間が表示されちゃってます。

いやいやいや、いくら内容が薄い記事だからって秒で読めるとかないでしょうよ。 いじめか？泣くぞ(´・ω・`)

　

うーん、これはあれだ。たぶん日本語に対応してない（文字数とかのカウントが２バイト文字を考慮してない）とかその辺の問題じゃなかろうか。

ということで、プラグインの中身を確認しました。

File:[GRAVインストール先]/user/plugin/readtime/classes/TwigReadingTimeFilters.php
～～～

    $words = count(preg_split('/\s+/', strip_tags($content)) ?: []);

～～～

うん。完全に英語表記（もしくはそれに準じた言語）しか考慮されてないですね。

よし、なければ作る（もしくは改造する）。

File:[GRAVインストール先]/user/plugin/readtime/classes/TwigReadingTimeFilters.php
～～～

    //    $words = count(preg_split('/\s+/', strip_tags($content)) ?: []);
    $words = mb_strlen(strip_tags($content));

～～～

改造って程でもないですね。そのまんまですし(´・ω・`)。
ないとは思いますが、マルチバイト関連の関数（mb_で始まる関数）が使用しているphpに入っていない場合は使えません。

これで大体、正確な時間が表示されるようになりました。

　

Reading Time プラグインの設定項目に関して。

  • Plugin status （プラグインの有効・無効）
  • Words-per-minute（一分間に読む文字数、defultは200wpm）
    defultは200wpmですがこれは英語圏での設定です。日本語（日本人）の場合は一分間に500～600文字程度（もしくはそれ以上）と言われているので当サイトでは600に設定しています。
  • Format（所要時間表示形式）
  • Round to nearest（分と秒のどちらで丸めをおこなうか。defaultは秒。分を選ぶと秒数が四捨五入されて分のみの表示になる）
  • Include time for viewing images（画像をみる予想時間を所要時間に含めるかどうか）
  • Seconds to view images（画像を見るのにかかると思われる予想秒数の設定）

　

私の場合、記事内容を見て判断するタイプなので、どれくらいかかるかとかはあまり気にせず記事を開いてます。
なので所要時間の表示がどれほど需要があるのか微妙ですが、まあものは試しなので ( ﾟДﾟ)。

大した負荷ではなくてもページ生成過程で余分な処理が増えるので、将来的には外してしまうかもしれません。

Last edited: 2024-07-31 02:05