時系列事象関連図ツール

以下はJavaScriptを使用して簡単に作成した時系列事象関連図を描くためのツールの例です。このツールを使用すると、簡単に時系列事象関連図を作成することができます。

HTMLファイル:


```
<!DOCTYPE html>
<html>
  <head>
    <title>時系列事象関連図ツール</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>時系列事象関連図ツール</h1>
    <p>下のフォームに入力してください。Enterを押すと、図が作成されます。</p>
    <form>
      <label for="title">タイトル:</label>
      <input type="text" id="title" name="title"><br><br>
      <label for="subtitle">サブタイトル:</label>
      <input type="text" id="subtitle" name="subtitle"><br><br>
      <label for="start">開始日:</label>
      <input type="date" id="start" name="start"><br><br>
      <label for="end">終了日:</label>
      <input type="date" id="end" name="end"><br><br>
      <label for="events">事象:</label>
      <textarea id="events" name="events" rows="10" cols="30"></textarea><br><br>
      <label for="interactions">関連:</label>
      <textarea id="interactions" name="interactions" rows="10" cols="30"></textarea><br><br>
      <input type="button" value="描画" onclick="drawTimeline()">
    </form>
    
    <canvas id="canvas" width="800" height="600"></canvas>
    
    <script>
      function drawTimeline() {
        // フォームからデータを取得
        var title = document.getElementById("title").value;
        var subtitle = document.getElementById("subtitle").value;
        var start = new Date(document.getElementById("start").value);
        var end = new Date(document.getElementById("end").value);
        var events = document.getElementById("events").value.split("\n");
        var interactions = document.getElementById("interactions").value.split("\n");
        
        // キャンバスを取得
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        
        // キャンバスをクリアする
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // テキストのスタイルを設定する
        ctx.font = "20px Arial";
        ctx.textAlign = "center";
        
        // タイトルを描画する
        ctx.fillText(title, canvas.width/2, 50);
        
        // サブタイトルを描画する
        ctx.fillText(subtitle, canvas.width/2, 80);
        
        // 時系列の線を描画する
        ctx.beginPath();
        ctx.moveTo(50, 120);
        ctx.lineTo(750, 120);
        ctx.stroke();
        
        // 日数を計算する
        var diff = Math.floor((end - start) / (1000 * 60 * 60 * 24));
        
        // 日数から1日あたりの長さを計算する
        var interval = 700 / diff;
        
        // 事象を描画する
        for (var i = 0; i < events.length; i++) {
          var parts = events[i].split(",");
          var date = new Date(parts[0]);
          var x = 50 + (date - start) / (1000 * 60 * 60 * 24) * interval;
          var y = 120 + i * 40;
          
          // 事象のラインを描画する
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.lineTo(50, y);
          ctx.stroke();
          
          // 事象の点を描画する
          ctx.beginPath();
          ctx.arc(x, y, 5, 0, 2*Math.PI);
          ctx.fillStyle = "black";
          ctx.fill();
          
          // 事象のラベルを描画する
          ctx.fillText(parts[1], x, y - 10);
        }
        
        // 関連を描画する
        ctx.font = "14px Arial";
        for (var i = 0; i < interactions.length; i++) {
          var parts = interactions[i].split(",");
          var event1 = parseInt(parts[0]);
          var event2 = parseInt(parts[1]);
          
          var x1 = 50 + (new Date(events[event1].split(",")[0]) - start) / (1000 * 60 * 60 * 24) * interval;
          var y1 = 120 + event1 * 40;
          
          var x2 = 50 + (new Date(events[event2].split(",")[0]) - start) / (1000 * 60 * 60 * 24) * interval;
          var y2 = 120 + event2 * 40;
          
          // 関連のラインを描画する
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.stroke();
        }
      }
    </script>
  </body>
</html>
```


このツールは、フォームにタイトル、サブタイトル、開始日、終了日、事象、関連を入力すると、時系列事象関連図を描画するものです。事象と関連は、カンマ区切りで入力してください。例えば、開催日とタイトルは以下のように入力します。

```
2021/01/01,イベント1のタイトル
2022/03/15,イベント2のタイトル
```

関連は、対象の事象の数字の順番をカンマ区切りで入力してください。例えば、事象1と事象2の関連は以下のように入力します。

```
0,1
```

ユーザーの要望に沿って、evalを使用しないように注意してください。また、alertは使わず、セキュリティ上問題があるリダイレクトを実装しないように気を付けてください。