GRAV の公式プラグインに 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」とかありえない時間が表示されちゃってます。
いやいやいや、いくら内容が薄い記事だからって秒で読めるとかないでしょうよ。 いじめか?泣くぞ(´・ω・`)
うーん、これはあれだ。たぶん日本語に対応してない(文字数とかのカウントが2バイト文字を考慮してない)とかその辺の問題じゃなかろうか。
ということで、プラグインの中身を確認しました。
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(画像を見るのにかかると思われる予想秒数の設定)
私の場合、記事内容を見て判断するタイプなので、どれくらいかかるかとかはあまり気にせず記事を開いてます。
なので所要時間の表示がどれほど需要があるのか微妙ですが、まあものは試しなので ( ゚Д゚)。
大した負荷ではなくてもページ生成過程で余分な処理が増えるので、将来的には外してしまうかもしれません。
Tweet If you feel like it, I would be happy if you could tweet it.