Help us understand the problem. What is going on with this article?

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

やりたいこと

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

進捗

最新版は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

image.png

jcanvasを使って描画してみる

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

Google App Scriptを使って簡易的に公開してみた。
6F432110-6ADB-4EBF-B2FD-8DC8E2ADD08C.png
Google Apps Script でHTMLファイルを作って表示。 - Qiita

やりたいこと

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

  1. 書籍検索機能を追加する 検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する | Tips Note by TAM
  • スマートフォンでも操作できるようにする
  • レスポンシブデザインにする
  • キャンバスの縦サイズが画面いっぱいにならない問題の解決
  • 評価軸を設定できるようにする
  • 保存できるようにする
  • デザインを整える
  • 入力ボックスの表示場所をクリックした場所にする
  • 文字を編集できるようにする
  • テキストにHTMLリンクを追加できるようにする
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした