書籍を２軸マトリクスで整理するためのプログラムを作る。（作成中）

やりたいこと

読んだ本を２軸でマトリクス表示できるようにして、ブログなどで公開できるようにしたい。
思考整理のために簡単にマトリクス（分布図？）が作成できるようにしたい。

進捗

最新版はAppScriptでWebアプリケーションとして公開中。
https://script.google.com/macros/s/AKfycbzbjBsAR6lIbhqV3Bj_l0gc4SzF6IecovL6gyTrUxk/dev

実装した機能と参考リンク

マトリクスの線を引く

drawline.js

// The .drawLine() object
var hobj = {
  strokeStyle: 'gray',
  strokeWidth: 2,
  rounded: true
};

// Your array of points
var hpts = [
  [w/100, h/2],
  [w-w/100, h/2],
];

// Add the points from the array to the object
for (var p = 0; p < hpts.length; p += 1) {
  hobj['x'+(p+1)] = hpts[p][0];
  hobj['y'+(p+1)] = hpts[p][1];
}

// Draw the line
$('canvas').drawLine(hobj);

// The .drawLine() object
var vobj = {
  strokeStyle: 'gray',
  strokeWidth: 2,
  rounded: true
};

// Your array of points
var vpts = [
  [w/2, h/100],
  [w/2, h-h/100],
];

// Add the points from the array to the object
for (var p = 0; p < vpts.length; p += 1) {
  vobj['x'+(p+1)] = vpts[p][0];
  vobj['y'+(p+1)] = vpts[p][1];
}

// Draw the line
$('canvas').drawLine(vobj);

canvasをフルスクリーン表示にする

canvas.js

$( '#canvas' ).get( 0 ).width = $( window ).width();
$( '#canvas' ).get( 0 ).height = $( window ).height();

HTML canvasを画面いっぱいに表示したい - Qiita

jcanvasを使って描画してみる

ウェブアプリケーションとして公開する

Google App Scriptを使って簡易的に公開してみた。

Google Apps Script でHTMLファイルを作って表示。 - Qiita

やりたいこと

これから実装したい機能と参考になりそうなリンクのまとめ

1. 書籍検索機能を追加する
   検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する ｜ Tips Note by TAM

• スマートフォンでも操作できるようにする
• レスポンシブデザインにする
• キャンバスの縦サイズが画面いっぱいにならない問題の解決
• 評価軸を設定できるようにする
• 保存できるようにする
• デザインを整える
• 入力ボックスの表示場所をクリックした場所にする
• 文字を編集できるようにする
• テキストにHTMLリンクを追加できるようにする