の作業記録

コードを書く木曜日

7:00

おはようございます。本日のうちあわせCastはお休みです。代わりといってはなんですが、コードを書きましょう。

Textbox:

body欄の一番上の行で上カーソルを押したらfor蘭に移動できるようにします。

ただし、body欄はtextboxで、contenteditableなdivではないので、最上行の取得は少し工夫が必要です。

publish:Textareaのキャレットがある行の行数を取得するJavaScript - 倉下忠憲の発想工房

間違えてカーソル移動してしまったときに、自然に戻れるようにfor欄の下カーソルにもイベントを設定しておきましょう。

＊　＊　＊

これは簡単でした。

次に。

＊　＊　＊

あとはタグ入力のサジェストだけです。

まず、そもそも何をサジェストするのか。

一つ目はTextboxに存在する、pagelistをサジェストすること。これは当初イメージしていた機能。

＊　＊　＊

ここから作業記録を書いているエディタをVS CodeからCotEditorに変えました。ターミナルがなくなるので、GitHubへのプッシュが一手間かかりますが、よく考えればターミナルを立ち上げればいいとも言えます。

そもそもmakeコマンドを使っているので、logtextフォルダでmakeを実行できればいいのですから、CotEditorのスクリプトで対応できるかもしれません。

ただその場合エラーが読めない可能性がありますね。ふむ。

まあ、いろいろ試していきましょう。

ともかく、Textboxについて。

ページリストのサジェストをするならば、すでにページリストのjsonがあるうえに、そのサジェストをmainpageで実装しているので超簡単です。ほぼコピペで済むでしょう。

ただし、500以上のページの大半は、addressとして使われることは無さそうです。もちろん、アイデア台帳、schedule、project-ptなどは、Textboxにおけるページの概念であり、まさにそこへの追記の代わりとしてこの機能を実装しているので、おおむね王道的な進み方ではありそうです。

もう一つの道行きは、空っぽのデータベース(json）から初めて、実際に入力したものだけをそこに保存し、次回以降のサジェストに役立てる、というもの。これだと、不要なデータを抱える必要はなくなります。

ページリストを参照する場合は、ページを作っておけば、次からいきなりサジェストとして出てくるのに対して、自前のリストを作る場合は、最低一度以上は自分でfor欄に入力する必要があります。

あと、ほとんど似たようなデータを扱うのに（巨大なAと、その部分集合であるBを別ファイルにするイメージ）、わざわざファイルを分けている、という点が若干気になります。もちろん逆に、ほとんど使用しない巨大なAをいちいちサジェストのたびに読み込む必要があるわけですが、それはTextboxを立ち上げたときに済ませているので、スペック的には問題ないでしょう。

あとはサジェストの「精度」でしょうか。

ページ方式の場合、自分が作ったことを忘れていたページがタグのサジェストとして出てきます。これはこれで便利そうな気がします。しかし、よくある単語が含まれている場合、ごく普通のページと、原稿のテキストファイルとが渾然一体となったサジェストになるので、結構面倒かもしれません。

たとえば、Textboxで「アイデア」と入力した状態のサジェストです。

Image from Gyazo

この中で使われるのはおそらく「アイデア台帳」だけです。

ようするにここで問われているのは、inputboxで書き込まれるものと、ページとの関係性なのでしょう。こうしたmemoはページに対してどういう位置づけになるのか。もし、ここで入力したものが何かしらのjsonになり、それがページを描写するためのデータになるならば、ページタイトルのサジェストは自然だと言えます。たとえば「アイデア台帳」をfor欄に入力したら、アイデア台帳.jsonにappendされ、そのjsonを元に、「アイデア台帳」ページの要素が生成される、といった形。

原稿を書いたファイルなどはそのままテキストを保存しておくわけですが、アイデア台帳.mdは、そのスクリプトでアイデア台帳.jsonをfetchして中身を描写する、ということがありえます。でもって、そうしたページリストだけがfor欄の入力時にサジェストされたら嬉しいです。

ということは、ページリスト全体よりも「一度入力したもの」というか、タグとしてfor欄に入力されたもの、という限定がよいでしょう。

ただし、タイプミスがありえるので、入力したものというよりは、送信されたものという形が良さそう。そのデータでtaghistory.jsonを作り、そこからサジェストを生成する、という流れでまず考えましょう。

8:00

Textbox:

ダミーのjsonを作って、それをベースにサジェストを起こすことからはじめる方向と、保存時にjsonを生成・上書きすることからはじめる方向があります。

まずは、保存から行きましょう。

＊　＊　＊

保存に関与している関数を探します。

＊　＊　＊

addボタンが押されたときの処理に、とりあえず空っぽの関数を呼んで起きます。history.jsonに含まれる予定の関数です。saveTagHistyory()としました。

その関数は、タグボタンの状況をチェックし、オンになっているボタンのinnterTextを取得し、その配列を一つずつ要素にして、jsonに保存する、という形になるでしょう。ほぼ、これまで作ってきた関数の流用でいけそうです。

＊　＊　＊

json生成用のpythonコードをアレンジ。

1
2
3
4
5
6
7

	elif(flag == "pages"):
		with open(filePath)as f:
			json_load = json.load(f)
			for line in contents:
				json_load.insert(0,line)
			with open(filePath,mode="w",encoding="utf-8")as f:
				json.dump(json_load, f,indent=2, ensure_ascii=False)

これでjsonにどんどん追加されます。

で、このファイルをベースにサジェストを作ります。

9:00

Textbox:

サジェストの仕組みはmainページと同じものでよいでしょう。

＊　＊　＊

できました。

Image from Gyazo

14:00

Textbox:

しばらくメモを入力していましたが、一番上の行で行頭に移動するときに上カーソルを押す癖がありますね。

ということは、カーソルの位置が０のときにさらに上を押すと移動、でいいでしょうか。

1
2
3
4
5
6

		if (e.key == "ArrowUp" && this.selectionStart == 0){
			e.preventDefault()
			const addressbox = document.getElementById("addressbox")
			addressbox.focus();
		}

ごくシンプルに。