の作業記録

Textboxの改造な水曜日

9:00

おはようございます。本日はTextboxの改造をちょっとやってみたいところ。具体的には、ファイルの内容を編集できるようにする機能の実装です。

BCB:

まずはBCBから。

＊　＊　＊

LINE103まで進みました。

TH:

昨日書いたchapter02のリテイクを読み返しましょう。

＊　＊　＊

chatper02を頭から読み返して、昨日ピックアップした「書いておきたいこと」を差し込める部分に差し込んでおきました。差し込めないものは諦めておきます。

一つの章のサイズが、これまでよりもかなり小さいので（2万字→6000字前後）、章辺りの読み返しの心理的な負担もだいぶ小さいですね。

10:00

PT:

昨日書いた「ノートを使う意義」を読み返します。

＊　＊　＊

一通り読み返しました。まだ文章が粗いので、少しずつ手を入れていきます。

かーそる第五号:

「はじめに」の続きを書き下ろします。

＊　＊　＊

だいたい1000字書けました。話の筋がとっちらかっていますが、まとめはあとでやりましょう。

11:00

Textboxの改造:

まずやりたいことの確認。ブラウザ上でテキストファイルの編集ができるようにすること。

ボタンを設置する。そのボタンをクリックすると、今表示されているページのファイルが読み込まれて、マークダウンの変換なしにそのまま表示される。その表示はtextareなどで編集可能になっている。

で、ボタンを押せば編集した内容が読み込んだファイルに保存される。

保存された後は、通常のビューに戻る。

＊　＊　＊

ボタンは一つでいいだろう。処理する関数を持つphpファイルも一つでいいと思う。片方は読み出しを行い、もう片方は書き込みを行う、という役割が二つある関数を書けばいい。あるいはphpファイルを二つ作って、ボタンの状態で呼び出す関数を変える、という感じか。

＊　＊　＊

まず、中身が空っぽのボタンを設置した。

1

<a onclick="editFile(nowPage);">このファイルをTextboxで開く</a>

押しても関数が設定されていないので、何も起こらない。

続いて関数の設定。もともと存在したVS Codeでファイルを開くボタンをそっくりそのまままねる。

1
2
3
4
5
6

  function editFile(filename){
      url="/cgi-bin/cgi-test.cgi?filename=" + filename;
      obj = window.open(url, '_blank');
      sleep(1000)
      obj.close();
  }

このcgiのファイル名を書き換えたら、まずはOKだけども、このままでは、読み出ししかできない。

少し長考する。

URLパラメーターで読み込みか書き込みかの状態も一緒に添えるか、あるいは別のボタンを設置して、それは別のファイルを呼び出すか。その場合は、「保存」ボタンは普段はhiddenしておき、「編集」ボタンを押したら、編集ボタンがhiddenされ、「保存」ボタンがvisibleになる、という処理が必要となる。

逆にボタンを二つ使わない場合は、クリックするボタンのデータに状態を持たせるか、あるいはinnterTextの内容で状態を区分するか、という手法がある（後者はわりとダサい感じがする）。

URＬパラメータならば、たとえば以下のような感じになるだろう。

1

url="/cgi-bin/fileloadwrite.cgi?aciton=wirte&filename=hoge

actionの中身によって、使用される関数が分岐する、という感じ。その方がすっきりしている感じはする。若干密な感じもしないではないが。

＊　＊　＊

ん？　別にHTMLでfetchすればいいのでは？ XMLHttpRequestを使う。

もともと、XMLHttpRequestでページを表示させている。その際に、マークダウンの変換処理を行っているのだが、それをなしにしたらいいのでは？　少なくとも、読み込みに関してはそれだけでうまくいきそう。ただ、preタグなどを前後に付ける必要はあるかもしれない。

＊　＊　＊

「loadedFile」という関数でページの読み込み処理を行っている。

現状はそこにファイル名を引き数として渡している。そこにパラメーターを与えるようにする？

＊　＊　＊

コードを読み返してみたが、だいぶ書き換えが面倒そう。

実際loadedFileはクラスで、mainPageが実体になっている。別の場所では別の実体が作られている。もし、クラスの設計を変更すると、他の場所にまで影響が及ぶ可能性が高い。すると、クラスをオーバライドするのがよいのか。この辺は、オブジェクト指向に慣れていないので、ぜんぜんわからない。

XMLHttpRequestでファイルを読み込む処理の部分は新しく作ろうとしている部分でもまったく同じなので、できればまとめたいところだが、もうちょっと抽象的に考える必要がありそう。

14:00

Textboxの改造:

もう少し、オブジェクトで考えてみる。

まず大本のクラスでは、普通にファイルを読み込むようにする。

で、生成される実体の方でマークダウンの変換を行う。別の実体ではそれをしない、というやり方は一応可能。

ページを読み込むためのdivとは別のtextareをhiddenで作成しておき、そこに中身を読み込ませるためのクラスの実体を作る、というやり方。

＊　＊　＊

あるいは、ファイルの読み込み処理する部分を関数にして、外に逃がす？

＊　＊　＊

気がついたが、読み込み方がもともとはinnerHTMLなのにたいして、新しく作るものはInnerTextにする必要がありそうなので、まったく同じというわけではなさそう。

＊　＊　＊

別にクラスを作って、なんとか読み込みはOKです。問題は書き込みですね。

16:00

Textboxの改造:

で、できました。だいぶごちゃごちゃ回り道をしましたが、予想通りの機能になりました。

Image from Gyazo

17:00

R-style:

短めでも記事を書きます。

＊　＊　＊

publish:R-style:名前をつけましょう。あなたの方法に。 – R-style