記事を読むのにかかる所要時間をJavaScriptで算出する方法
HTML
<div id="result"></div>
<div id="a">
2.技術的な工夫点について 5分00秒
技術的な工夫点としてCSSとJavaScriptの2点を説明します。
まずCSSについて説明します。
・CSS 2分
CSSとは表示レイアウトなどの修飾を指定するのための仕様です。
文書の構造と体裁を分離させるという理念を実現する為に提唱された仕様です。
今回のホームページ制作でもCSSを利用しております。
ホームページのCSSで工夫した点は左端にある幅と位置が固定のサイドバーメニューです。
以降これをメニューと呼びます。
幅が固定のメニューを作成するためにはメニューが幅を指定できるブロック要素である必要があります。
左のメニューと右の本文部分を横に分けて並べるために、それぞれをブロック要素としました。
しかし、ブロック要素は複数存在している場合、縦に並んでしまいます。
そこで2つのブロック要素を含む親のブロック要素を作成しました。
そして親のブロック要素のCSSに子のブロック要素を横並びにするフレックスボックス(display:flex)を記述しました。
その結果、幅が固定のメニューと本文部分を横に並べることに成功しました。
しかしこの時点では下にスクロールしたときにメニューがページに追従しないため、
メニューのCSSにposition:sticky;を追加しました。
以上より幅と位置が固定のメニューが完成しました。
次にJavaScriptについて説明します。
・JavaScript 2分
JavaScriptはスクリプト言語です。
スクリプト言語とは、アプリケーションソフトウェアを作成するための簡易的なプログラミング言語の一種を指します。
今回のホームページ制作でもJavaScriptを利用しております。
ホームページのJavaScriptで工夫した点はメニューの現在位置表示です。
メニューの現在位置の背景色を変えることで今どのページを見ているかを一目でわかるようにしました。
JavaScriptの中身を説明させていただきます。
まずcurrent_locationに現在のurlをスラッシュで区切った文字列を入れます。(window.location.pathname).split("/")
次にeach文でメニューのリンク部分に対して繰り返し処理を行います。
メニューのリンク先をitemに取得して、itemとcurrent_locationが一致しているかを判定し、
一致している場合は一致しているリンク部にactiveクラスを追加します。
urlの末尾をリンク先と比較している機能上、現在位置が/matsui/のときは色が濃くなりません。
</div>
CSS
#a { border: 1px solid #C00; padding: 0.5em; margin-top: 0.5em }
JavaScript
var t = $("#a").text().length;
t = Math.round(t / 400);
$("#result").append("この記事の所要時間は" + t + "分です。");