の作業記録

メルマガを仕上げる土曜日

8:00

おはようございます。今日はメルマガを仕上げます。あと、思いついた編集モードについて検討します。

Textbox:

作成したカードや付箋の編集をどうするのか、ということを考えていました。特に要素のクリックが次の媒体作成につながっているので、ダブルクリックなどが使いにくいのが問題です。

で、まずshift+clickを考えました。対象をshift+clickすることでそれを編集可能にする。たとえば、inputを表示して入力可能にするとか、contentEditableをtrueにするとかです。

これは良い手ですが、マウスだけで完結しない、という面倒さがやや気になります。それならば、コンテキストクリックの方がまだマシかもしれません。

＊　＊　＊

もう一つ考えたのが、モードです。通常は編集できないですが、モードを変えることで編集を可能にする。たとえば、全体にcontentEditrableを付与する。そういうアプローチもありえるでしょう。ちょっとvim的ですね。

仮にそのアプローチを採用するとすると、そのモードの切り替え操作をどうするのか、という問題が出てきます。キー入力なのか、マウス操作なのか。前者は特定のキーの組み合わせ、後者はたとえばhtmlのbodyをダブルクリック、といったものです。

キー操作の方が自由度が高いですが、キーボードでモードを変える、マウスで対象をクリック、キーボードで入力、という流れが若干ひっかかります。ただ、MacbookAirを、つまりノートパソコンを使っている限りはそこまで気にならないかもしれません。

あるいは、編集モードに入ったら、tabキーで要素を選択していけるようにしてもいいでしょう。

マウスでモードを変えるのであれば、モードの変更→対象の選択→入力開始、とややスムーズにはなります。

＊　＊　＊

モードで言うならば、現状Textboxは通常のプレビューモード（HTMLに変換して閲覧）と、ソースモード（mdファイルの中身をそのまま表示）の二種類がすでに存在しています。ここに新しいモードを加える、という感覚でもよいでしょう。そうであれば、キー操作での切り替えであったほうが統一的です。あと、他のページにおいても同様の操作が可能になることを意味します。

通常は閲覧だけで編集できないけども、ある操作をすればそれが可能になる、と。

現状は command + e でプレビューモードとソースモードをトグルします。たぶんeditの意味でしょう。

command + d （eの近く）、　command + i （inputの略）あたりがよいでしょうか。

＊　＊　＊

そのモードに入ると、contentEdtitableがtrueになり、編集可能になっている状態を示すCSSが付与される、という感じでよいでしょうか。

個別の要素にcontentEdtitable属性とCSSを当てていくのか、それとも一番大きい要素（ページの要素を流し込んでいるdiv）に親的に指定するのか。後者の場合、CSSは個別ではなく、ページ全体に当てられることになりそう。

＊　＊　＊

Image from Gyazo

一応、仮り組みができました。

モードをトルグし、グローバルな変数でページのモードを管理します。オブジェクト指向であれば、ページのオブジェクトを作り、そこにモードのプロパティを持たせるのがよいのでしょう。でもって、モードの切り替えも、そのオブジェクトに一任するのが良さそうです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var page = {
  state : "preview",
  setInputMode: function(){
      this.state = "input";
      const xbody = document.getElementById("xhr-result1")
      if (!xDiv)return
      xDiv.setAttribute("contentEditable",true)
      document.querySelector("nav").classList.add("isInputMode")
  },
  returnPreviewMode: function(){
    this.state = "preview";
    const xDiv = document.getElementById("xhr-result1")
    if (!xDiv)return
    xDiv.removeAttribute("contentEditable")
    document.querySelector("nav").classList.remove("isInputMode")
  }
}

とりあえず、こんな感じでまとめました。他のモード移行の処理もここにまとめていきましょう。

10:00

ツイート読み返し:

一週間分のツイートを読み返します。

＊　＊　＊

publish:2023年01月14日までのツイートノート - Addless Letter

あとで読む:「ひとり情シス大学1日コース」開講報告（1）–大阪・船場にひとり情シスが集結 - ZDNET Japan

16:00

メルマガ:

なんとか「はじめに」と「おわりに」が書けました。

＊　＊　＊

まぐまぐ配信予約終了。

＊　＊　＊

と思ったら、全体の読み返しを忘れていました。慌て過ぎですね。一回作業を戻します。

＊　＊　＊

読み返しをした上で、配信予約を終えました。ふ〜、やれやれ。

17:00

Textbox:

tracknoteからtrack表示が完全になくなったので、名前を変えました。暫定で「evolvenote」としておきます。

で、編集可能になったので、今後の実装の方向性を整理しておきましょう。

まず、中途半端なjsonからHTML要素を作る流れを整理すること。でもって、HTMLからJSONに返すコードとAPIも必要。あるいは、jsonなのでAPIは不要かもしれない。FileAPIでそのまま処理できるかも。

あとは、付箋からカード、カードからsheetの流れをきちんとコードにすること。あと、「sheetから」どうするのかも考えること。答えとしてはpage（mdファイル）なわけだが、それをどう見せるのかを考える必要がある。あるいは、sheetとpageを混ぜる手もなくはない。つまり、mdファイルの内容をsheet形式で表示し、sheet化されたものは、そのタイトルのmdファイルを作る、という感じ。

このあたりの流れも整理が必要。

あと、inputモードができたので、これまでcontentEditableを使っていたものを根底から再検討する必要がある。包括的な編集と保存のやり方を適用してければ、個々のページのコードはもっとスムーズになるはず。

たとえば、この記述は「Textboxの構築」というmdファイルに追記することもできるし、evolvenoteというsheetを作ってもいい。その辺のバランスをどう設定したらいいのかを意識しながら考えたい。

＊　＊　＊

一応、evolvenoteというsheetを作ってみた。

1
2
3
4
5

### evolvenote
JSONファイルの周りの処理
付箋からカード、カードからシートの処理
シートから次はどうするか
inputmodeの調整

こういう表示形式で、このページに表示されているのがよいのかどうか。

textbox-evolvenote_task.mdを作り、そこに入れておいて、ListLauncherなどで個別に確認できるようにした方が良いのか。

ListLauncher:

仮想デスクトップを移動しても、その場所でウィンドウを開けるように常にクローズして再生成をしていましたが、やはり処理がお重いので、いったんそれをリセットしました。

やはり仮想デスクトップを移動する、という手段を見つけたほうが良さそうです。

あとで読む:Noratetsu Lab: 雑なメモは雑に書かれなければならない

あとで読む:【たなおろシリーズ①】 2023年1月時点で使用しているネット系サブスクサービス | Hacks for Creative Life!

Textbox:

まずフラットな入力装置があり、入力した文字数などによってそれをラインかカードかシートかにわける？

入力装置でいったん保留にしておいて、それをinbox的に後で割り振る？

＊　＊　＊

「気になっている本」や「スケジュール」などは頻繁に発生する入力で、フォーマットは定型的。その意味では「あとで読む」も似たようなもの。

＊　＊　＊

総合的な入力欄を作り、見出しがなければライン、見出しと本文ならカード、見出しが二つ以上あるならsheetという形にする？

＊　＊　＊

今分けているHomeとevolvenoteも一緒にしてしまう？

Map（pin）→ページリスト→sheetリスト→カードリスト→ラインリスト、を一つのページにまとめる、という。

＊　＊　＊

たとえば、そういうレイアウトにおいて、textbox-evolvenote_task.mdを作ることのメリットは何か。