原稿を進めたい水曜日

8:00

おはようございます。本日はもろもろ原稿作業を「少し」進めましょう。

Textbox:

最終的に詳細の項目を編集し、タグを入力できるようにしたいのですが、まずは深く考えずに表示だけ実装していきましょう。

* * *

画面のモックアップ的な実装はできました。表示だけはできます。

Image from Gyazo

あとはタグです。これができたら大躍進。

* * *

ロジックだけ考えておきましょう。まず保存ボタンを付ける。

モーダルの画面からデータを収集する。そのデータでJSONを生成して、APIに送信する。

API的Pythonは、受け取ったデータからまずIDを見て、対象の項目をフィルターし、項目が見つかったら、それぞれの項目を上書きしていく。差分があったら、という感じにもしたいが、まあここでは深く考えない。

基本的にjsonで受け取ったデータをそのまま表示しているだけなので問題はないだろう。著者名などの編集を不可能にするならば、変更できるのは「読了」と「タグ」だけになる。そちらの方が管理自体は簡単。

とりあえず、それだけを考えるとしよう。タグはtextareaに入っている。スペースで区切ることにする。できれば一度入力したものを覚えておいて、サポートされるようにしたい。

で、そのタグはどこに保存されるか?

library.jsonにだけtagという属性を作ってもいいし、現状使われていないaddressを使ってもいい。まあaddressでいいか。

ということは、apiはどのようにデザインすればいいか。このページでしか使わないならファイルもlibraryに限定すればいいが、さすがに狭すぎるか。do.jsonなども完了の更新をしたい。

ということは、ファイル名を指定する。

updateJSON(file)

当然、更新する内容が必要。

updateJSON(file,json)

これだけでOKだろうか。jsonの中にIDが入っているからサーチはできるだろう。「どのようにアップデートするか」の指示もいらないはず。であればこれだけでOKか。

そんなに難しくはなさそう。

12:00

Textbox:

JSONを上書きするapiとそれにデータを渡す関数ができました。これで自由にタグを変更できます。

で、あとは、ボタンですね。現状は一つのボタンをクリックしたら、あらかじめ指定しているIDの本を開く、となっていますが、これをそれぞれの表示している本に対応させます。クリックイベントはそれぞれの要素に付与するのか、それとも全体のdivに付与するのか。

リンクにする? onclickに引き数付でコマンドを与えておく?

Image from Gyazo

とりあえず、できました。処理速度の高低はぜんぜん考えておりません。

* * *

ついでに読了日のデータも操作できるようにしました。これで最低限のことはできると思います。あとは、読み始めの日と、モーダル外をクリックしたときに、フォーカスを戻す作業ですね。

* * *

問題なくできました。これでベースはOKです。しばらくこの状態で使い続けてみるのもよいでしょう。あるいは「この本についてノートを書く」機能を考えてみてもいいでしょう。

* * *

複雑に考えずに、inputboxを開けばいいでしょうか。ただしそちらもモーダルなので調整は必要です。

当初は、本の情報が記載されたモーダルの横に、新しいモーダルが追加される、みたいなイメージでしたが、それだとわりと実装作業が増えそうです。「メモする」という共通的な機能として捉えれば、IDだけを受け取ってinputboxを開くのがよいような気がします。

* * *

モーダルの重ね掛け。inputboxは常に最大のz-indexを割り当てておくか、モーダルを開くたびに最高値を更新するz-indexを割り当てるか、ちょっと考えたいところ。

inputboxを使いまわせば、実装は手早いです。その代わり、ノートを書いているときに、書誌情報の画面が見えなくなります。これがよいのかわるいのか。