JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.lengthで読了までの時間と文字数をカウントして表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.length

JavaScriptの.lengthで読了までの時間と文字数をカウントして表示

JavaScriptの.lengthで読了までの時間と文字数をカウントして表示

ブログでよく見かける「読了までの時間」を、JavaScriptで文字数を取得して出力させてみます。

文字数をカウントする要素は任意のものに変更できるので、ブログ以外でも使えます。ので、参考にしてみてください。

.length

JavaScriptの.lengthは、配列の要素の数を設定・取得するプロパティです。

elements.innerHTML.length;

このプロパティは、for文 を書く際ループの繰り返しごとに配列の長さがチェックする時にも使われます。

for (let i = 0; i < data.length; i++) {
  viewPosts.innerHTML += data[i].date
}
かかかず
かかかず

この記事では for文 を使っていませんが、APIを使う時に頻出するので覚えとくといいです。

文字数をカウントするサンプル

早速サンプルです。

表示されている「この記事は約3分で読めます。」と「以下の文章は1582文字です。」は、JavaScriptで出力させています。

    ダミーの記事

    日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。

    ブログでよく見るこの2つのオブジェクトをJavaScriptで出力させるのが、この記事のスニペットです。

    実装の手順と方法

    手順と方法

    スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。

    HTMLを記述

    最初に、設置したい場所へHTMLをコピペします。

    <ul id="postpoint"></ul>
    <p class="dummyTitle"><span>ダミーの記事</span></p>
    <p id="countPost">日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。</p>

    もしくは、この記事のJavaScriptのコードを使って指定の要素として文字数をカウントしたい場合は、対象の要素に「countPost」のid名を付与すればOKです。

    JavaScriptの記述

    次に、JavaScriptのコードをページに記述します。

    コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

    document.addEventListener('DOMContentLoaded', function() {
      const MINUTE_READ_CHAR = 500; // 500文字=1分でカウント 
      var getElm       = document.getElementById('countPost'); // 出力させる要素
      var putElm       = document.getElementById('postpoint'); // カウントする要素
      var strNoHtmlTag = '';
      var iReadTime    = '';
      var strSetHtml   = '';
      var textCount      = getElm.innerHTML.length; // 文字数のカウント
      
      if(getElm != null){
        // 文字列の抜き出し
        strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
        // 文字数を秒数でカウント
        iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );
        if( iReadTime == 0 ){
          // 1分未満は1分に変更
          iReadTime = 1;
        }
        // タグ作成
        strSetHtml = '<li class="readAllTime">この記事は<span>約' + iReadTime + '分</span>で読めます。</li>';
        textDis = '<li class="textCount">以下の文章は<span>' + textCount + '</span>文字です。</li>';
        // タグ埋め込み
        putElm.innerHTML= putElm.innerHTML + strSetHtml;
        putElm.innerHTML= putElm.innerHTML + textDis;
      }
    });
    CSSの記述

    最後にCSSを記述します。

    /* 読む時間と文字数 */
    ul#postpoint {
        list-style: none;
        padding: 0;
        border: none;
        margin: 0 0 25px;
    }
    ul#postpoint li {
        padding-left: 25px;
        position: relative;
    }
    ul#postpoint li:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1em;
        position: absolute;
        left: 0;
        width: 20px;
        text-align: center;
        line-height: 2.6;
    }
    ul#postpoint li span {
        font-weight: 600;
        font-size: 1.4rem;
        padding-left: 3px;
        padding-right: 3px;
        letter-spacing: 0.02rem;
    }
    /* アイコンはFontawesome */
    li.readAllTime:before {
        content: "\f252";
    }
    li.textCount:before {
        content: "\f891";
    }
    
    /* 文字数を取得する要素 */
    p#countPost {
        max-height: 400px;
        overflow-y: scroll;
        margin: 0;
        border: solid 2px #ddd;
        padding: 20px 25px;
        background: #FFF;
        border-radius: 0 0 3px 3px;
    }
    p.dummyTitle {
        background: #dddddd;
        text-align: center;
        color: #313131;
        margin: 0;
        padding: 15px 0 12px;
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        position: relative;
        border-radius: 3px 3px 0 0;
    }
    /* スクロールバー */
    p#countPost::-webkit-scrollbar {
        width: 12px;
    }
    p#countPost::-webkit-scrollbar-thumb {
        background: #313131;
        border-radius: 9999px;
    }

    この記事のサンプルのような見た目にしない場合は、上記のコードは記述しなくてOKです。

    かかかず
    かかかず

    CSSはレイアウトを整えているだけなので、ここは飛ばしてもOKです。

    ざっくりとしたコードの解説

    コードはHTML・JavaScript・CSSの3種です。順に解説していきます。

    HTML

    HTMLは、「postpoint」のid名を持つ「分数と文字数を出力する要素」と、文字数のカウント対象になる「countPost」のid名を持つ要素の2つです。

    <ul id="postpoint"></ul>
    <p class="dummyTitle"><span>ダミーの記事</span></p>
    <p id="countPost">日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。</p>

    このid名「postpoint」と「countPost」は、JavaScriptのコードと連動しているので、id名を変える場合はJavaScriptのコードもその名前で変更する必要があります。

    かかかず
    かかかず

    「postpoint」の要素は、JavaScriptで li タグを出力させるので、ul タグで記述しています。

    JavaScript

    JavaScriptは、冒頭に文字数のカウントルール(サンプルでは500文字を1分で換算)を設定して、次にHTMLのid名で要素を取得します。

    document.addEventListener('DOMContentLoaded', function() {
      const MINUTE_READ_CHAR = 500; // 500文字=1分でカウント 
      var getElm       = document.getElementById('countPost'); // 出力させる要素
      var putElm       = document.getElementById('postpoint'); // カウントする要素
      var strNoHtmlTag = '';
      var iReadTime    = '';
      var strSetHtml   = '';
      var textCount      = getElm.innerHTML.length; // 文字数のカウント
      
      if(getElm != null){
        // 文字列の抜き出し
        strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
        // 文字数を秒数でカウント
        iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );
        if( iReadTime == 0 ){
          // 1分未満は1分に変更
          iReadTime = 1;
        }
        // タグ作成
        strSetHtml = '<li class="readAllTime">この記事は<span>約' + iReadTime + '分</span>で読めます。</li>';
        textDis = '<li class="textCount">以下の文章は<span>' + textCount + '</span>文字です。</li>';
        // タグ埋め込み
        putElm.innerHTML= putElm.innerHTML + strSetHtml;
        putElm.innerHTML= putElm.innerHTML + textDis;
      }
    });

    要素の取得が完了したら文字列を整形していき、文字列のカウントと分数への計算が行われ、最後にそれぞれ要素へ出力します。

    かかかず
    かかかず

    複数行のコードですが、分解して見ると簡単な記述内容です。

    CSS

    CSSはレイアウトを整える記述で、そこまで多くない記述量です。

    /* 読む時間と文字数 */
    ul#postpoint {
        list-style: none;
        padding: 0;
        border: none;
        margin: 0 0 25px;
    }
    ul#postpoint li {
        padding-left: 25px;
        position: relative;
    }
    ul#postpoint li:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1em;
        position: absolute;
        left: 0;
        width: 20px;
        text-align: center;
        line-height: 2.6;
    }
    ul#postpoint li span {
        font-weight: 600;
        font-size: 1.4rem;
        padding-left: 3px;
        padding-right: 3px;
        letter-spacing: 0.02rem;
    }
    /* アイコンはFontawesome */
    li.readAllTime:before {
        content: "\f252";
    }
    li.textCount:before {
        content: "\f891";
    }
    
    /* 文字数を取得する要素 */
    p#countPost {
        max-height: 400px;
        overflow-y: scroll;
        margin: 0;
        border: solid 2px #ddd;
        padding: 20px 25px;
        background: #FFF;
        border-radius: 0 0 3px 3px;
    }
    p.dummyTitle {
        background: #dddddd;
        text-align: center;
        color: #313131;
        margin: 0;
        padding: 15px 0 12px;
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        position: relative;
        border-radius: 3px 3px 0 0;
    }
    /* スクロールバー */
    p#countPost::-webkit-scrollbar {
        width: 12px;
    }
    p#countPost::-webkit-scrollbar-thumb {
        background: #313131;
        border-radius: 9999px;
    }

    サンプルで取得する文字数が1500文字程度と多めなので、スクロールバーを付けており、その辺りの記述が最後にあります。

    さいごに

    WordPressのテーマによっては、文字数をカウントして「読む時間」を出力してくれるのが多いですが、ない場合や静的なページなど、そんな場合にはこの記事を参考にしてみてください。

    UI

    • 他のウィンドウが開くことができないポップアップのUIです。

      モーダル

      モーダル

    • 並列な関係を持つ情報を1つずつ格納するUIです。

      タブ

      タブ

    • サイドから全体を覆うほど大きいメニュー表示するUIです。

      ドロワー

      ドロワー

    • 画像などのコンテンツをスライド表示させるUIです。

      スライダー

      スライダー

    • スクロールで表示が変化するスニペットです。

      スクロール

      スクロール

    • クリックすると隠れていた部分が開閉するUIです。

      アコーディオン

      アコーディオン

    • ページのhタグを取得して目次を生成するスニペットです。

      目次

      目次

    • ページの読み込み時にアニメーションをするスニペットです。

      ローディングアニメーション

      ローディングアニメーション

    • マウスオーバーした際に表示される補足説明です。

      ツールチップ

      ツールチップ

    • ページ内上部にあるナビゲーションUIです。

      ヘッダー

      ヘッダー

    • 行と列の組み合わせでできているUIです。

      テーブル

      テーブル

    • データを表やグラフで可視化して見せるUIです。

      グラフ

      グラフ

    • 背景をアニメーションで動かすスニペットです。

      背景

      背景

    フォーム

    • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

      フォーム

      フォーム

    文字

    • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

      文字の装飾

      文字の装飾

    • 文字列の操作をして、置換・変更を行うスニペットです。

      文字の操作

      文字の操作

    • 文字列をカウントして表示などを行うスニペットです。

      文字のカウント

      文字のカウント

    • 数字の要素を取得して、変更するスニペットです。

      数字の操作

      数字の操作

    ウィンドウ

    classの操作

    • 要素を取得して、classを追加・削除するスニペットです。

      classの操作

      classの操作

    要素の操作

    API

    • WordPressのAPIを取得して表示するスニペットです。

      WP REST API

      WP REST API

    • Google Books APIsで書籍の情報を表示するスニペットです。

      Google Books APIs

      Google Books APIs

    • 楽天市場のAPIを取得して表示するスニペットです。

      楽天市場API

      楽天市場API

    • openBDのAPIを取得して表示するスニペットです。

      openBD

      openBD

    画像・動画

    • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

      画像の操作

      画像の操作

    • YouTubeの動画を表示するスニペットです。

      YouTube

      YouTube

    リンク

    • ページ内のリンクを取得して変更・操作するスニペットです。

      リンク

      リンク

    • Google Analyticsとの連携をするスニペットです。

      Google Analytics

      Google Analytics

    cookie

    • ブラウザのcookieを利用するスニペットです。

      cookie

      cookie

    検索

    • 指定した要素の中から検索を行うスニペットです。

      検索

      検索