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

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

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

Timesheet.js表示例

スポンサーリンク
レクタングル(大)広告

利用するための主な手順

Timesheet.js - Open time tables with HTML, JavaScript and CSS …

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

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

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

Timesheet.jsのダウンロード

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

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

sbstjn-timesheet.js · GitHub

すると、「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>

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

    1. 開始
    2. 終了
    3. キャプション

    動作確認

    これを動作させると、以下のようになります。

    例:大学卒業後の職歴

    時間の流れと、状態をとてもわかりやすく表示できます。

    注意点

    Timesheet.jsは、時間の流れと状態を、とてもわかりやすく表示できます。

    けれど、使っていて不便に思ったことをまとめておきます。

    • なぜか(僕の環境では)jQueryを呼び出さないと使用できなかった
    • 基本的に列は12年分しか表示されない
    • なので、何百年とある年表には利用できない
    • 表示される幅が決まっている
    • 時間軸の最後の方に行くとキャプションを表示するスペースがなくなる
    • 年月が日本でなじみのある「2009/10」とは表示できず「10/2009」という形式でしか設定できない

    基本的に10年以上スパンのあるタイムシートには利用できそうにはないです。(期間と、キャプションが表示できなくなるので)

    まとめ

    と、このようにちょっとクセのあるタイムシート表示スクリプトです。

    「10年以内の時間とデーターの関係をわかりやすく表示する」なんて場合には、いいのかもしれません。