タイムラインを簡単なコードで視覚化できる「Timesheet.js」というスクリプトを使ってみました

Timesheet.jsという時間に関するデーターを視覚化するスクリプトがあったので利用してみました。

ちょっとしたJavaScriptコードを書くだけで、手軽に以下のようなタイムシートをつくれます。

利用するための主な手順

利用するには主に、以下の手順が必要です。

Timesheet.jsのダウンロード
Timesheet.jsファイルの設置
Timesheet.js関連ファイルの呼び出し
タイムシートを表示する要素の設置
データとなるコードの入力

Timesheet.jsにも、GitHubの方にも、詳しい解説はないので、利用の仕方に不明な点があったのですが、手順を踏めば使えるようになりました。

Timesheet.jsのダウンロード

まずは、Timesheet.jsのダウンロードです。

sbstjn/timesheet.js · GitHubの「Download ZIP」をクリックしてから、ダウンロードします。

すると、「timesheet.js-master.zip」というファイルがダウンロードされます。

Timesheet.jsファイルの設置

ファイルを解凍して、中にある「dist」フォルダの中身を利用します。

利用するファイルは以下です。

dist/timesheet.css
dist/timesheet.js

今回は、「dist」フォルダをプロジェクトフォルダに放り込んだ状態を例にして説明します。

Timesheet.js関連ファイルの呼び出し

次に、HTMLからTimesheet.js関連ファイルを呼び出します。

通常のHTMLからだと、以下を<head></head>内から呼び出します。

<link rel="stylesheet" href="dist/timesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="dist/timesheet.js"></script>

サイトにはjQueryは不要と書いてあったのですが、呼び出さないとなぜか表示できなかったです。

WordPressからだと、以下のように呼び出します。（子テーマからの場合）

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/timesheet.css"><?php echo get_stylesheet_directory_uri(); ?>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/dist/timesheet.js"></script>

jQueryが既に呼び出されている場合は、jQuery部分を削除してください。

タイムシートを表示する要素の設置

次に、表を表示するための要素を設置します。

といっても簡単で、以下のようにIDを指定してdiv要素を表示したい部分に挿入するだけです。

<div id="timesheet"></div>

要素に指定したIDは、後でスクリプトで利用します。

データとなるコードの入力

最後に、データとなるコードを以下のように書いてHTML内から呼び出せばOKです。

<script type="text/javascript">
jQuery(function(){
  new Timesheet("timesheet", 2002, 2013, [
    ["04/2002", "03/2005", "〇〇大学", "ipsum"],
    ["04/2005", "08/2005", "A株式会社に入社", "default"],
    ["09/2005", "06/2006", "失業保険", "dolor"],
    ["07/2006", "2006", "無職", "lorem"],
    ["2007", "2007", "ニート", "lorem"],
    ["01/2008", "04/2008", "自分探しの旅", "dolor"],
    ["05/2008", "012/2008", "コンビニでアルバイト", "dolor"],
    ["07/2008", "012/2008", "就職活動", "dolor"],
    ["01/2009", "06/2008", "B社に見習いとして働く", "default"],
    ["07/2009", "2015", "B社に正規雇用", "default"],
  ]);
});
</script>

データーは、以下の順番で配列を指定します。