mermaidのDFDを直線直角を使って描きたい

このスクラップにある通りにDFD (data flow diagrams)を描いてみたいとおもうようになった。

https://zenn.dev/podhmo/scraps/5d0e312c84a91a

元々の動機としてはスマホでの入力をいい感じにやって遊べないかということだった。
そしてスマホのフリック入力（全角）で表せる言語(DSL)を使って何かできないか？ということを考えていた。

そして、テキストで表現できる物を探してmermaidで記述できる方法を調べてみていた。
そしてどうやら直角直線で矢印を描く方法が存在していないっぽいことがわかった。

というわけで以下の作業が必要

• mermaidの描画部分の実装を把握する (d3?)
• mermaidの直角直線の矢印の方法を調べる

apiと一対一のdocはあんまり嬉しくない？

（これは以前に書いたもののメモではある）

もう一段回上の階層のなにかがほしい

https://zenn.dev/podhmo/scraps/3f6ac0fd71300b

スマホだけで扱える範囲

元々スマホだけで作業したいと思った理由を以前スマホだけで書いていたのを思い出したのでここにメモしておく。

• スマホだけで何らかの生産がしたい｜podhmo
• スマホでできるのは思いつきの記録か断片の出力程度かもしれない｜podhmo
• スマホだけでシリーズの続き、対話の価値あるいは対話によって明らかになる朧げな輪郭を記録したいことについて｜podhmo
• 書き散らしたメモのような断片を入力として利用したいという足掻き｜podhmo

色々考えてた

https://gist.github.com/podhmo/3bd326101a6ab6c8de5a4c28f5d5752e

Ubuntuの24.4が出るのかWSLの方も更新したいかも。

たぶんいきなりscrapsを作らずに、しばらくここでテキトーに始めるのが良いような気がする。

preタグの内容をクリップボードにコピーしたい

jsとか書かずに対応できないのかな？

とりあえず、jsを書いても良いので調べておこう

https://junges.dev/2-how-to-add-github-copy-to-clipboard-button-on-your-docsblog

preタグの中でのcodeタグとか実は理解してないかも？

元々インラインのコードを表すcodeに対して複数行のものを表すときにpreタグの中で書くみたいなあれなのか。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/code#補足
複数行のコードを表すには、 <code> 要素を <pre> 要素の中に入れてください。 <code> 要素自身は、コードの単一のフレーズや 1 行のみを表します。

💭 これ長くなりすぎたときのローディングが気になるかも？

スマホで入力する図

昨日のやつは文芸的プログラミングとまでは言わないけれど仕様的なものをgist上に追記した。書くならdenoあたりが良い気がしてる。S式からは遠いものになった。

あー、あと意外とPCでは入力し辛い部分があった（「…」とか）。

図で表現したいと思ったときに何を得たかったのかをもう一度整理したい気がした。基本的には関係性の説明。

アウトラインエディタとか考えてみたりしたけれど順序の変更はけっこう必須な感じもする。

あと図はそれ単体では機能せずにそれを参照しての利用に意味がある。そういう意味では例えばこの記事内みたいな文章的なものが欲しくなる。

bskyのコピペのやつはパスワードを間違えたときのメッセージが不親切だった。
あと、なぜかデフォルト値から変わらなくなったりした。

emacsclientでfind-file-other-tabを呼びたい

というか単純に新しいタブとして開きたい。server.elを読んでみると普通にfind-file-no-selectをしてset-bufferを呼んでいる。単純にswitch-to-buffer-tabを使うtimerを実行してみると現在開いていたバッファも書き換わってしまう（timer無しだとたしかtab-barを開いてくれない）。

(tab-bar-mode 1)
(tab-bar-history-mode 1)

(defun my:find-file-with-tab-bar--server-visit-hook ()
  (run-with-timer
   0.1 nil
   (lambda (buf)
     (message "## new-tab %s" buf)
     (switch-to-buffer-other-tab buf)
     (tab-bar-history-back)
     (tab-bar-move-tab -1)
     (tab-bar-switch-to-next-tab)
     )
   (current-buffer)
   )
  )
(add-hook 'server-visit-hook 'my:find-file-with-tab-bar--server-visit-hook)

tab-bar-history-backとかをうまく使えば済むかも。tab-bar-history-modeを有効にして元のtabを戻してあげると良さそう。

おおきなトピックにもならない呟きはタイトルもつけずに呟いてるけれど、UI上は連続してるもののように感じてしまうかも？

今のEmacs環境の細かな課題

Emacsで現在気になるところは2つある

• skkを使い始めたらctrl-jが衝突するようになった
• ctrl-kでのkill-bufferとtab-barの使い分けが面倒

後者は常にタブ毎消したい訳でもない。

調整したいこと

• diredでの up/downを「[]」でしたい
• viewer-modeの設定をしたい

後者は元々プロジェクト跨ぎのメモ環境（サブエディタ）としてEmacsを使い始めたので自然な気がする。

ところで、bskyのスレッドコピーのやつの調整をやるためにvscodeを立ち上げるのが面倒でhtmlをEmacsで開いて調整しようとした。補完がないのとフォーマットが無いので少し苦労した。

そういえば、スイカゲームでもやろうとしてswitchを充電したけれど、購入したりする以前に触らず放置してしまった

買ったヘッドホンは電源をいれるとノイズキャンセルされるということがわかった。

なんとなくヘッドホンをつけたままお出かけすることにしてみて気づいた。尚ポッドキャスト的なものを外で聞くのは耳へのダメージ的に無理だった。

そういえば、図による運用が便利な一例に生物学や医学的なものの文章を読むときの関係性の把握があるかも。xxxの機序みたいなやつ。

https://bookclub.kodansha.co.jp/product?item=0000385169

💭ところでこれは図が便利な話であって頭の中の図を片手で出力できると便利な話ではないな。

emacsの調整

• diredでの登り降りを"[,]"でできるようにした
• kill-bufferをラッピングしてC-u C-x kのときにはtabも消すようにした
• skkのsticky-shiftを利用するようにしてshiftキーを節約するようにしてみる

skkのsticky-shiftは変換のはじまりを大文字の英数字ではなく特定のキーでの入力にできるようにしたもの。たとえば「魔法」と変換したいときに今までは"Mahou"と入力する必要があったがそれが";mahou"などで良くなる。左手の負担を削減してくれるのでは？という期待がある。

 (setq skk-sticky-key ";") ; sticky-shiftを使ってshiftキーの節約する

kill-bufferの方は以下のようなすごい雑な定義のもの

(defun my:kill-buffer-with-tab-close-if-need (&optional kill-tab-bar-p)
  "C-u C-x C-kの場合にはtabも閉じる"
  (interactive (list current-prefix-arg))
  (kill-buffer (current-buffer))
  (when (not (null kill-tab-bar-p))
    (tab-close)
    ))

(global-set-key (kbd "C-x k") 'my:kill-buffer-with-tab-close-if-need)

そして、自分のinit.elでは設定のグループ毎にprognでくくることをやっていたのだけれど、これは移動せずに設定のグループ全体をevalし直したいからだったんだなー。あんまり徹底できてはいない。

直角直線矢印

https://zenn.dev/podhmo/scraps/32768a1b42d04b

スマホからだと、ファイル名のフルパスが見えなくてテストコードとそれ以外を区別できなくて困った。

emacsの調整

• 現在のタブの表示がわかりづらい
• [bug] emacsclientで新しいタブで開く

現在のタブがわかりづらい

M-x cutomize-group tab-bar-faces

memo.txtが現在のタブ

macはemacs29でmodus-vivendiのthemeを使っているから混乱するのかもしれない。

custom.elが現在のタブ

modus-themeのせいっぽい

M-x list-faces-display

例えば、以下のような感じで変えられるけれど、themeによって変わってきてしまうかも？

 (custom-set-faces   '(tab-bar-tab-inactive ((t (:inherit tab-bar-tab :background "grey45" :slant italic)))))

bug タブで開くがうまくいかない

emacsclientでタブで開く方法はこれだけだとどうやら現在開いているバッファの位置を吹っ飛ばすかも？ add historyの動きが期待した動作じゃない気がする。（未解決）

No more tab back history が出ることがありそう。

• https://zenn.dev/podhmo/scraps/9ea21658b74a5d#comment-cd030f0729b2dd

関係ありそうなのはこの辺の関数。

https://github.com/emacs-mirror/emacs/blob/0e0fe20040413d682f8078a2ddfb8f502cb89fb8/lisp/server.el#L1432

https://github.com/emacs-mirror/emacs/blob/0e0fe20040413d682f8078a2ddfb8f502cb89fb8/lisp/server.el#L1536

/mnt/wslg/ とかにwslgのログが出るんだな

$ sudo find /mnt/wslg -mmin -30 -not -path '/mnt/wslg/distro
/mnt/wslg/weston.log
/mnt/wslg/runtime-dir
/mnt/wslg/runtime-dir/emacs

ブラウザのタブのピンと同様のことをエディタ上でもやりたい。

Emacsの話

結局、昨日のEmacsのアクティブなタブが分かりにくいというやつは非アクティブなタブに取り消し線を付けることにした（ こんな感じ ）

Emacsでtheme毎にfontのfaceの扱いが違ってそうだった。この辺どうやると良いのか整理されてない（とはいえWSLの方のEmacsのバージョンを上げれば良いだけでは？）

💭 tab-barのカスタマイズが期待しない挙動になっていてそれでもマージしちゃって使っちゃうし、不完全な設定と付き合ってく感じなんだなーと思ったりした。

そういえば、mermaidのコードとかをスマホからブラウザで読んでるけれど、こういうのをEmacsから読んでも良いのかもな。そしてgo to definitionがしたいとなればlspが立ち上がって欲しいという気持ちは分かる。

でも常に動いて動作が重たくなってほしくはない。

あと、BPFの本を読みたいと思って読めてないな。あと効率的なgoのやつ。

WSL Ubuntu24.04

private
WSL Ubuntu24.04 · Issue #168 · podhmo/dot-files

やっていることはだいたい

1. screen,emacs,make,fonts-noto,golangあたりを入れる
2. sshでkeygenしたものをgithubに登録
3. ghqを入れる go install github.com/x-motemen/ghq@latest
4. ghq経由でdot-filesのリポジトリをcloneしてきてコピー (ghq get -p <repo>)

.bashrc に .bashrc_wslを読み込む行を追加

. ~/.bashrc_wsl

.bashrc_wslは

export PATH=~/go/bin:$PATH

function clip() {
  /mnt/c/Windows/system32/clip.exe $@
}

wslの古いやつはしばらく維持しておくか。

> wsl --list
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-24.04 (既定)
Ubuntu
docker-desktop-data

[!TIP]
ちなみに、インストール可能なdistributionを一覧で表示するのは
wsl --list --online

browse-urlでewwが動いてしまうのが面倒だな。executable-findで見つからないからか。。

テキトーにsymlinkを追加しておく.

$ ln -s $(type -p firefox.exe) ~/.local/bin/firefox

clipも同様の形でやった方が良い？

.localである必要はない気もする

emacsのinit.elのチューニング

Emacs の起動時間を”“詰める”” | Emacs JP

profilerを使ったり eary-init.el に移動したりすると良いのかな？

diff --git a/tiny/init.el b/tiny/init.el
index 650a377..eae973f 100644
--- a/tiny/init.el
+++ b/tiny/init.el
@@ -1,5 +1,7 @@
 ;;; -*- coding: utf-8; lexical-binding: t -*-
 
+(require 'profiler)
+(profiler-start 'cpu)
 (setq debug-on-error t) ;; enable for debugging
 
 (defun current-directory ()
@@ -458,3 +460,5 @@
 ;; (package-install 'writeroom-mode) ; -> zen-mode in vscode
 ;; (package-install 'ddskk-postframe);  skk縺ｮ螟画鋤蛟呵｣懊ｒ濶ｯ縺・°繧薙§縺ｫ陦ｨ遉ｺ縺励※縺上ｋ
 
+(profiler-report)
+(profiler-stop)

emacsの設定 (dired,view-mode)

• view-mode
  • text-mode, emacs-lisp-mode以外のときにはview-modeで開くことにした
  • view-mode時にはhjklで移動できるようにしたJKでscroll-up/scroll-down
  • view-mode時に[でディレクトリをdiredで開くようにした
  • view-modeのときにはhl-line-modeが有効になる
  • read-onlyのときにはview-modeで開く (e.g. C-x C-q )
• dired
  • "M-n","M-p" で別windowに開いたバッファをスクロールできるようにした
  • ("]"でファイルをother-windowで開く)
• help-mode
  • "[", "]" で戻る/進むを使えるようにした

typescript-ts-mode

tree-sitterを使おうとするとエラーが出るかも？

⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for typescript is unavailable (not-found): (libtree-sitter-typescript libtree-sitter-typescript.0 libtree-sitter-typescript.0.0 libtree-sitter-typescript.so libtree-sitter-typescript.so.0 libtree-sitter-typescript.so.0.0) No such file or directory
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for tsx is unavailable (not-found): (libtree-sitter-tsx libtree-sitter-tsx.0 libtree-sitter-tsx.0.0 libtree-sitter-tsx.so libtree-sitter-tsx.so.0 libtree-sitter-tsx.so.0.0) No such file or directory
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for typescript is unavailable (not-found): (libtree-sitter-typescript libtree-sitter-typescript.0 libtree-sitter-typescript.0.0 libtree-sitter-typescript.so libtree-sitter-typescript.so.0 libtree-sitter-typescript.so.0.0) No such file or directory

以下のようにすれば良さそう

(push '(typescript "https://github.com/tree-sitter/tree-sitter-typescript" "master" "typescript/src") treesit-language-source-alist)

;; generate tree-sitter/libtree-sitter-typescript.so
(treesit-install-language-grammar 'typescript)

こうすると M-x typescript-ts-mode が動く

詳細

この辺を見ていくっぽい？
https://www.masteringemacs.org/article/how-to-get-started-tree-sitter

C-h n でnewsを覗くと以下のようなことが書かれている

Emacs can be built with the tree-sitter parsing library.

This library, together with separate grammar libraries for each
language, provides incremental parsing capabilities for several
popular programming languages and other formatted files. Emacs built
with this library offers major modes, described elsewhere in this
file, that are based on the tree-sitter's parsers. If you have the
tree-sitter library installed, the configure script will automatically
include it in the build; use '--without-tree-sitter' at configure time
to disable that.

Emacs modes based on the tree-sitter library require an additional
grammar library for each mode. These grammar libraries provide the
tree-sitter library with language-specific lexical analysis and
parsing capabilities, and are developed separately from the
tree-sitter library itself. If you don't have a grammar library
required by some Emacs major mode, and your distro doesn't provide it
as an installable package, you can compile and install such a library
yourself. Many libraries can be downloaded from the tree-sitter site:

https://github.com/tree-sitter

Emacs provides a user command, 'treesit-install-language-grammar',
that automates the download and build process of a grammar library.
It prompts for the language, the URL of the language grammar's VCS
repository, and then uses the installed C/C++ compiler to build the
library and install it.

You can also do this manually. To compile such a library after
cloning its Git repository, compile the files "scanner.c" and
"parser.c" (sometimes named "scanner.cc" and "parser.cc") in the "src"
subdirectory of the library's source tree using the C or C++ compiler,
then link these two files into a shared library named
"libtree-sitter-LANG.so" ("libtree-sitter-LANG.dll" on MS-Windows,
"libtree-sitter-LANG.dylib" on macOS), where LANG is the name of the
language supported by the grammar as it is expected by the Emacs major
mode (for example, "c" for 'c-ts-mode', "cpp" for 'c++-ts-mode',
"python" for 'python-ts-mode', etc.). Then place the shared library
you've built in the same directory where you keep the other shared
libraries used by Emacs, or in the "tree-sitter" subdirectory of your
'user-emacs-directory', or in a directory mentioned in the variable
'treesit-extra-load-path'.

You only need to install language grammar libraries required by the
Emacs modes you will use, as Emacs loads these libraries only when the
corresponding mode is turned on in some buffer for the first time in
an Emacs session.

We generally recommend to use the latest versions of grammar libraries
available from their sites, as these libraries are in constant
development and occasionally add features and fix important bugs to
follow the advances in the programming languages they support.

トラックボール型のマウスを買った

ノートPCのタッチパネルを無効にしてみた。トラックボールマウスを買ってみた（無線のものにしたけれどbluetoothのほうが良かったかもしれない）左手用のもののほうが置き場所的には邪魔にならなそうだったけれど右手用のものしかなかった。まぁいいか。

元々、エディタなどで文字を入力している時に誤ってタッチパネルを触ってしまいカーソル移動や右クリックが発生してしまっていた。これがなくなると良い気がする。設定でタッチパネルをオフにしてみた。無線が動かないタイミングではマウスが動かなくなるんだろうか？

Mastering Emacsという本があるらしい

気になること

• emojiの入力をできるようにする
• emacsclient経由でタブで開くemacs29対応
• skkのsticky inputになれる