の作業記録
原稿を進める木曜日
- 作業記録の共有
- TH+001TCS
- TH+001TCS
- TH+編集者さんに定期連絡
- ノート・エッセイ（コンビニ店長のノート）
- 読書手帳システム
- イラストの練習
- 課題図書読書
- duolingo
7:00
おはようございます。本日は、ブックカタリストはお休みです。その分、原稿を進めましょう。
あとで読む:
- 手帳について語る。「EDiT 週間バーチカル」｜mino｜note
- 自己ブランディングを考えていこうかな｜杉咲亮太｜Ryota Sugisaki｜note
- 「読書記録」をつけるようになってから｜min｜webライター｜note
8:00
読書手帳システム:
ファイルを直接表示させる、というのではなく、ファイルを読み込んで一定の処理をして表示する、みたいなのがよいと思う。そうすれば、大本のファイルはマークダウンのままでもよい。
「FileReader」を使う方法。ただし、ファイルの選択などが必要で、やろうとしていることとは違う気がする。
inputタグを使わずに、ファイルオブジェクトを生成して、それをAPIで処理する、みたいなのは一応考えられるが、inputタグを使わないファイルオブジェクトの生成が謎。
第二章 プログラムを作って体験しよう：サーバー上のテキストファイルを読み込みページ上に表示する
「createXMLHttpRequest」を使うらしい。
JavaScriptでHTTPを利用してWebのファイルを取得する - XMLHttpRequestの利用 : JavaScript | iPentec
ブラウザ:: createXMLHttpRequest関数におけるIEとFFで違った挙動 - 元「なんでもエンジニ屋」のダメ日記
第12回 XMLHttpRequest入門：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社
あるいはajax。
Ajaxを使って外部ファイルを読み込む - WEBサイト制作の勉強
jQueryによるローカルファイルの読み込みと使い分け方 - Qiita
jQueryのajaxは、XMLHttpRequestを簡略化（サブルーチン化）している、ということがわかった。ということは、まずはこの方法を第一目標としたらよいだろう。
まず、これでテキストファイルを読み込み、それを表示させる、というルーチンを書く。
9:00
TH:
001の検討。
＊ ＊ ＊
何を002に移し、何を001に残すのかを検討していました。だいぶ骨子が見えてきました。
10:00
読書手帳計画:
以前のtextboxシステムを上書きします。
＊ ＊ ＊
ボタンを押すと、指定したmdファイルの中身をテキストエリアに流し込むところまでできました。
あと、VS Codeでの編集ですが、cgiを経由しなくても、file:を使えばいいのでは、という気持ちになってきました。
＊ ＊ ＊
と思ったが、うまくいかない。ローカルサーバーを立ち上げているから、それは当然か。
とりあえず、ファイルの読み込みの練習を続けよう。
XMLHttpRequestのオブジェクトに入っている.responseTextは、ファイルのテキストの全文が入っているから、まずそれを処理することになるわけだが、しかし、ファイルのメタ情報などはどうなのだろうか。
XMLHttpRequest の使用 - Web API | MDN
XMLHttpRequest Standard （日本語訳）
XMLHttpRequestでファイルを読み込む | GRAYCODE JavaScript
わかった。たとえば以下のように書けばファイルのヘッダーが取得できる。
| |
これで更新日などを使ったソートも可能になるだろう。
とりあえず、まずはテキストファイルに「2021年9月に買った本.txt」なりを準備して、ボタンを押したらそれを表示させる、というところまでやってみる。
11:00
妻の昼食準備など
12:00
読書手帳システム:
一応保存しておく。
とりあえず、暫定のもの。
これで、ローカルのテキストファイルを書き換えると、Webブラウザでボタンを押したときに最新の情報に切り替わる、と思う。
＊ ＊ ＊
とりあえず、ボタンを増やし、まったく同じ処理をコピペして「読んだ本.md」を表示できるようにした。ボタンを押す度に、それぞれのファイルの中身が表示される。すごく簡単。
ただし、ボタンの数を増やすたびに同じ処理をコピペしていくわけにはいかないんで、一般化の処理が必要。あと、ファイル名をどのように作るのか。
買った本リストは、命名規則が同じであれば機械的に作れる。つまり、ローカルファイルのファイル名一覧を取得する、みたいなことは必要ない。それ以外のものについてはちょっと保留。
あと、Obsidianのダブルブラケットからファイル名を生成することはできる。ファイル名＝タイトル、の構造が維持されているならば、取得したテキストを解析して、ダブルブラケットに囲まれているものをaタグに置き換えて、クリックイベントを付与すればいい。それをクリックしたら、その中身を書き換える、という形。たぶん「戻る」の機能も付与する必要はありそう。
本をlistに追加、見たいこともできるだろう。AmazonのAPIを挟んで、書誌データを揃えてリストに追加することもできる。
でもって、テキストエリアの中身をXMLHttpRequestで書き込むようにすれば、ファイル編集も可能になる。夢は広がる。
【Javascript・php・xmlhttprequest・ajax】外部ファイル（text）に書き込む＆読み込む - 新卒から文系エンジニア→人材業界に転職した人のブログ
XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks
＊ ＊ ＊
これまで、たとえば「リスト」というようなファイルを作っていたり、Obsidian用にfileを作っていたりしたが、とりあえずそれらを単一のフォルダに集めて、このビュアーで閲覧できるようにする、というのが第一の計画だろう。
＊ ＊ ＊
phpを使って、ファイル名の取得ができる。
JavaScriptを使用してフォルダ内のファイル名のリストを取得します
怒涛のめもめもリンク集 | ファイル一覧をjQueryで表示
まあ、一回phpを経由する形なのであまり好ましいものではない（ややこしくなる）。が、やろうと思えばやれる、というのは心強い。
＊ ＊ ＊
テキストからリンクを作れるのだから、リンクを記載したテキストファイルを容易しておくことは一応可能。ちょっと再帰的な匂いがしてきた。
15:00
TH:
001を続けます。
＊ ＊ ＊
全文を細かく書くのではなく、骨子レベルでの荒書きですが、3000字ほどができました。後はこれを肉付けしていくだけです。
16:00
読書手帳システム:
テキストエリアだと、リンクが使えないのでDivにする。divのinnerHTMLに読み込む。
がここで問題発生。テキストファイルをそのままHTMLとして読むと、改行がひどいことになる。かといって、HTMLを意識してテキストファイルを書くのは鬱陶しい。
改行をBRタグに置換すればいいわけだが、何かほかにないか。
高速で Markdown を HTML に変換してくれる『markdown-wasm』を使ってみた
Markdownを「Marked.js」を使ってHTMLに変換する方法 - suzu6の技術ブログ
こういうのを使うのもよい。
あるいは、自分なりの変換をすることを考えて、やっぱり自分でパースしたらいいのかもしれない。
一行ごとにpかdivでくくればいいわけだから、そう難しいことでもないのではないか。
ファイルを読み込んで得た文字列を、一旦何かしらの関数に渡して、そこで置換して、結果を渡す。HTMLを直書きしているなら、そのまま表示される。そういう感じになるか。
あるいは、まず上記のようなパーサーを通した後で、さらに自分なりに置換する手もある。
＊ ＊ ＊
marked.jsを使ってみた。メチャ簡単。
まずはマークダウン形式で書いていくことにしよう。細かい話はあと。とりあえず、ファイルを読み込む処理を統一しておきたい。
＊ ＊ ＊
Tumbling Dice — [JavaScript]marked.jsを無理矢理拡張してオレオレパーサーを作る
＊ ＊ ＊
HTML を Markdown へ変換するときに知っておきたいライブラリ 11選 + α – プログラミング生放送
HTMLをマークダウンに逆変換できれば、Webブラウザ上で編集して、それを保存することはできる（綺麗なファイルになるのかは不明）。
テキストエリア→テキストファイルだと、保存はずっと楽になるが、やはりリンクが使えないのは大きい。
＊ ＊ ＊
それにしても、私はこれで何をしようと居ているのだろうか。保存した情報を一元管理したいなら、EvernoteにでもWorkFlowyでも入れておけばいい。
でも、たしかに今こうして実装しているツールは、既存のツールを使っているのとは、
17:00
TH:
編集者さんに現状報告。方向性が固まってきたので、連絡もしやすいです。
19:00
book:read:end:『知的文章術入門 (岩波新書 新赤版 1897) 』:
文章の書き方（執筆術）だけでなく、幅広い話題が扱われている。後半は「英語学習」に関する話題もあり。
20:00
イラストの練習
book:read:GEB:
p.293
そこで明らかにされたように、プログラミング言語に対する最も強力な貢献のひとつは、すでに知られているものによって新しい高レベルの実体を定義し、それからその実体を名前で呼ぶことである。これは言語の中に「まとめ」操作を作りあげる。指令のレパートリーが決まっていてそれによってすべてのプログラムが具体的に組み立てられるのではなく、プログラマーは自分の構成単位を作ることができ、それに自由に名前をつけて、それが言語に組み込まれている機能のひとつであるかのように、プログラムの中のどこにでも使うことができる。
p.297
プログラムが正しく走っているかぎり、それをどう記述しようと、またその働きをどのように考えようと、ほとんど問題ない。いろいろなレベルで考えられることが重要になるのは、何かがうまくいかなかった場合である。
p.297まで。
duolingo:
21:00
本日の振り返り:
今日はうちあわせCastがお休みでしたが、その分THがぐぐっと進みました。文字数はさほどですが、骨子ができあがった感があるので、後はバリバリ書いていけそうです。
あと、Twitterを見る限りで、Tak.さんの次の本が順調に進んでいるもよう。10月の一週目には発売されそうな感じがします。楽しみですね。
でもって、読書手帳システム構築として、MacのファイルをWebブラウザで閲覧できる機能を実装しました。現状Obsidianの劣化版でしかないですが、ここからが面白くなりそうな予感です。「情報」の配置を、リストでも平面配置でもない（あるいはそれらの組み合わせで）表現できるのは、たぶん一番自由度が高くなるやり方でしょう。
明日以降も引き続き実装していこうと思います。
というわけで本日はそろそろ閉店がらがらです。
お疲れさまでした。仕事終わりの妻を迎えに行ってきます。