【Jekyll】日本語記事の「この記事は何分で読めます」を表示する

8 minute read A

現在用いているhtmlからの抜粋

少し下にhtmlソースを載せていますが,その前に少し注意点があります.

まず,今回記載したソース内でcharacters_per_minutesite.localeをhtmlサイト内や_config.yml内で定めて用いています.例えば,

characters_per_minute: 500

 <html lang="{{ site.locale | slice: 0,2 | default: "ja" }}">


のように定めています.また今回,サイトで定められた言語に応じて記事内容を正しく表示するためにui-text.ymlを用意して用いています.

もしあなたがMinimal-MistakesをJekyllテーマとして使っていないのでしたらui-text.ymlの設定は必ずしも必要というわけではありません.

一応ですが,私がui-text.ymlをどこに置いているか,ディレクトリを載せておきます.

  • “project_name”/data/ui-text.yml

以上を理解してもらえれば↓の内容がある程度理解いただけるかと思います.

{% assign document = post | default: page %}
{% assign characters_per_minute = document.characters_per_minute | default: site.characters_per_minute | default: 500  %}
{% assign words = post.content | strip_html | strip_newlines | size %}

{% if words < characters_per_minute %}
// もしui-text.ymlを使わないのでしたら以下の通りシンプルに表記できます
// less than 1 minute read
  {{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
{% elsif words == characters_per_minute %}
  1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
{% else %}
  {{ words | divided_by:characters_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
{% endif %}

Liquid tagの扱いに慣れていない方は以下サイトを確認されることをお勧めします.

サイトで用いるデフォルトの言語をenのように英語にすると私のサイトの通り”minute read“となります.そのほか,時計のアイコン付きで表示させたい場合には,Font Awesomeをご利用されることをお勧めします.

なお,先ほどのソース内では日本語話者が読める平均の文字数である,500字/1分をデフォルトとして設定して計算してます._config.yml等で設定しておくことをお勧めします.

一応ですが,本サイトのテーマでもあるMinimal-MistakesのGitHubでも同様のRead_Timeの表記方法を確認することが出来ます.

背景(長くなります)

2020/5/27にリリースされたJekyll version 4.1.0より,Jekyllの number_of_wordsの引数に置けるオプションにCJKautoが追加されました.や っ た ぜ !

CJKオプションについての詳細は↓ページからどうぞ.

CJKオプションとautoオプションの違いですが,

Passing ‘auto’ (auto-detect) works similar to ‘cjk’ but is more performant if the filter is used on a variable string that may or may not contain CJK chars.

だそうです.様々な言語がある記事(例えばプログラム)がある場合はautoオプションを使用すれば,より適当な単語数を返してくれるみたいですね.

使用例を見てみる

先ほど紹介したページに記載されたオプションの使い方を見てみると,

{{ "hello world" | number_of_words }}

helloとworldで,文字数のカウントは2.

{{ "你好hello世界world" | number_of_words }}

単語間に空白が無いので文字数のカウントは1.

{{ "你好hello世界world" | number_of_words: "cjk" }}

カウントは6.

{{ "你好hello世界world" | number_of_words: "auto" }}

カウントは6,という結果になるそうです.凄いですね(小並感).

問題点

現在私が使用しているMinimal Mistakesについて言うと,記事を読むのにかかる時間(以降ReadTimeとする)の表示を行う際には

記事内の文字数 ÷ 1分間に人間が読める平均の単語数 = ReadTime

を計算し表示しています.ここで問題になるのが,計算に「1分間に人間が読める平均の単語数」を用いているという点です.

英語話者の平均のWPM(Words Per Minute)はおよそ200前後と言われています.

では,日本語話者はどうでしょうか.日本語話者はおおよそ500CPMと言われています.

CPM???


そう,当たり前と言えばそうですが日本語(中国語・韓国語)話者にとってWPMはほぼ意味を持たず,CPM(Characters Per Minute)を用いる必要があるんです..

ということで,日本語の記事のReadTimeを求めるために先ほどの式を変えます.

記事内の文字数 ÷ CPM = ReadTime

ここで,先ほど紹介したcjkオプションおよびautoオプションを思い返します.

{{ "你好hello世界world" | number_of_words: "auto" }}
// カウント: 6

これから分かる通り,英語は単語数でカウントし,cjk言語は文字数でカウントしていることが分かります.

文字数のカウントが出来ること自体はありがたいのですが,日本語と英語のなどが入り混じった記事ではReadTimeの計算結果が大きく変わってしまうことが想像に難くないと思います.

したがって,

{% assign characters_per_minute = document.words_per_minute | default: site.words_per_minute | default: 500  %}
{% assign words = post.content | strip_html | strip_newlines | size %}
// assign wordsに記事内の文字数が入る.

とすると,ファイル内のhtml部分と改行記号を省き,post.content(直訳:記事の内容)のsizeassign wordsに代入します.

これが記事内の文字数を表すことになるので,characters_per_minuteを用いてReadTimeを計算できます.

あとはご自分のhtmlに埋め込んで表示させてあげてください.

まとめ

Jekyllの機能が徐々にアップグレードされているので,ゆくゆくは自動でReadTimeを表示する機能も付くかもしれませんね.

調べた感じ,Jekyllでのcjk言語の記事のReadTimeの表示方法を書いている記事は無いようなので,Jekyllerの皆さんはぜひ使ってください.

他にReadTimeの表示方法について便利な方法をご存じだったり,何かエラーが出たりしたらTwitterまでDMください.

One Comment. ... JekyllのHelpからお目当ての内容を見つけるのまあまあ大変.ぴえん