Skip to content

Instantly share code, notes, and snippets.

@podhmo
Last active April 26, 2024 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save podhmo/3bd326101a6ab6c8de5a4c28f5d5752e to your computer and use it in GitHub Desktop.
Save podhmo/3bd326101a6ab6c8de5a4c28f5d5752e to your computer and use it in GitHub Desktop.
スマホのフリック入力で手軽に記述できるDSL

はじまり

x/twitterでの以下の発言をスマホでの生産という文脈でもう一度言語化してみようと思う。

実はスマホのフリック入力で書きやすいのはS式なのでは?

()()()()()()()

「」も使えなくはないけれど

あとは?。!…辺りが便利

スマホでの全角フリック入力用のDSL

元々、寝床の中でスマホ片手で行える作業と机の上でPCを使って行える作業の間には乖離があると思っていた。

その上で、スマホでコードを書こうと思ったときに半角文字とカーソル移動が同様の障壁として機能していそうだと感じていた(精神的なコスト)

そして、フリック入力での全角入力の範囲のみで機能する言語(DSL)を作ってみると面白いのでは?

という感じだった。

おそらく機能としては制限されたものになりそうで、コードなので実行したいとは思うもののおそらく宣言的な記述のようなものになるだろうとは思った。

具体例としてはmermaidへの変換ののようなものが良さそうだと思った。

ほしいかんじのもの

以下のことを考える必要がある

  • DSLとしての言語の仕様
  • スマホから触るときのui

先に後者のuiについて思うことをあげていく。

まず何よりデプロイしたくない。可能ならストレージもつかいたくない。というわけでgithub pagesなどでできることを期待する。

スマホから触るときのui

ui的には

  • 入力文字列を記述する場所
  • 変換後の表現を出力する場所
  • 図として描画する場所

が欲しい。

あとはURL辺にデータをもたせられないか?とかは気になる。できるならOGP的なカードで出力される図をそのURLから生成したい(この時点でdeno deploy辺りの方が楽かも)

なんとなくDFD(data flow diagram)辺りを出力対象としてイメージしていた。そして色々調べていた。

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

DSLとしての言語の仕様

ここからは言語について考えていきたい。色々思うところを雑に書きなぐっていくことにする。

おおまかな見通し

いわゆる図を書くための言語は記号を多用する。これがスマホからの入力と相性が悪い。記号ではなく素直に修飾子を付ける。漢字でも良い気がする。

いわゆる日本語プログラミング言語は自然な文法を意図して一般利用者を対象にしがち。ガチガチに不自然なもので良い。

ネストした構造を全角カッコで表すことはできる。場合によっては半角カッコが混じることもあるからフォーマッターが欲しい。エスケープはどうする?

字句的な細かいもの

もう少し細かい字句のことを考えてみる。

全角のフリック入力では一等地に割り当てられた記号は「。、…?!」あたり。

「かぎ」で変換できるので「」も使っても良いかもしれない。こちらは次点。

単語入力程度なら半角英数を使っても良い。とはいえPCでキーボードから入力するときより利用する語彙が全角のものに遷移してる気がする。しょうがなく半角文字は入力してるので可能なら避けたい。

(こういう感じで思ったことを書く(エスケープ文字はどうしよう?(カッコはこんな感じで結構使う気がする。半角カッコと全角カッコに違う意味を持たせたくない(とりあえずバックスラッシュにするか\(使わない筈))))

具体的な変換のことを考えてみると

  • インデントを利用するか?
  • 代入的な操作の記述はどうするか?
  • オプションの指定はどうするか?

とかがありそう(箇条書きは面倒だな…)

インデントは辛いのでs式みたいに素直にカッコでググれば良い気がする。

集団文字列としては「。」が使える?

実例を元に雑に仮の記述を考えてみる

例えば、以下のような表現を考えてみる

flowchart TD
  x --> y
  y --テキスト --> z 

  db [(Database)]

(一度DFDを忘れてmermaidでの記述について考えても良いかもしれない) (あくまでサブセットへの変換で十分でフルの機能へのアクセスは不要な気がする) (こうやってテキストを書くことで思考の断片を出力する方法では表せない関係性の手軽な記述のためのものとして利用したい)

ここに呟くと後で編集できないので不便かも?

(あ から い に)みたいに予約語的なものを全角日本語にすると読み取りづらくなりそう。

全角空白は区切るのに便利なので使っていきたい(既存のプログラミング言語のコンマは面倒なので付けない)。

変数名はxやy より「あ」や「い」のような日本語で付けたくなった。

(あ … い)

矢印の代わりにこれを使うのは良いだろう。

ネストした表現を何に使いたいかと言えばサブグラフとかインデントが含まれた表現。

(図 (図 あ … い。 い … う)わ … ん)

全部先頭に図とか付けるのはわりやすいかもな。

?!のどちらがプロパティというかオプションの宣言に使えるだろう?

DFDに戻ると以下のようなノードが使えれば十分。

  • データフロー(→)
  • プロセス(◯)
  • データストア(囲い線上下)
  • 源泉と吸収(□)
(図 あ!源泉 … い!プロセス)

さすがにその文字そのままは厳しい

(図 あ!(形 源泉) … い!(形 プロセス))

こういう感じのものを正規形として考えてカッコが不要なものは構文糖衣のようなもののとして考えると良さそう。

源泉より入力の方がわかり易くない?まぁ自由に別名は追加できて良いだろう。

図とか形とかは分かりやすそう。

変数に関してはいわゆるlispのletみたいなもので十分なのでは?

!を修飾子として使う?(例えば x -- text --> y を 「あ …!テキスト い」みたいに書く)

(図 (変数 (あ 春)(い 冬))い …!花粉 あ)

letに揃えずに改行を「。」として表すなら

(図 (変数 あ ! 春 。 い ! 冬)い … ! 花粉 あ)

意外とスペースを開けたり適切に字句を使うよりカッコを使ったほうが入力は楽そう。

ノードの場合と文字列の場合があるのでは?

(図 (ノード (あ 春)(い 冬)) (文字列 (う 花粉)い … ! う あ))

clojureみたいにカッコを減らすより素直に対応関係を書いた方がキレイかも。

(変数 ((あ 冬)(い 春)) (文字列 ((う 花粉)) あ … ! う い))

いや、対応関係をパースするには良いのだけどbody部分にカーソルを合わせるのが厳しいな。あと必ずトップレベルが図である必要は無いな。

(変数 あ ! 冬 い ! 春 (文字列 う ! 花粉 あ … ! う い))

字句をもっと自由にできると

(変数 あ!冬 い!春 (文字列 う!花粉 (図 あ …!う い)))

変数ではなくノードの方が良い?

(ノード (あ!あなた い!私)(文字列 (挨拶 おはようございます) (図 わ … ! 挨拶 あ)))

変数を使うほど一気に描けない。長いメッセージになるほどボディ部分の調整が辛い。

別にネストする必要なくない? そして空白と!が同時に必要になるとだいぶだるい。

(ノード あ!あなた わ!私)
(文字列 挨拶!おはようございます)

(図 わ … ! 挨拶 あ)

とか。

このキャプションを含まない

(図 わ … あ)

は良さそう。変数の部分と同様に。

(図 わ …!挨拶 あ)

と書けても良いかも。!はデフォルトオプションみたいな感じで考えて(?キャプション 挨拶)の略称が!挨拶とか?

矢印の形やノードの形をどうするか?

(図 あ … い!データベース)

これは

(図 あ … い ?(形 データベース))

の省略形とか。オプションの追加に?を使いデフォルトオプションの追加に!を使う。!は空白を省略できる。

これに擬えると

(ノード わ!わたし)

(ノード わ ? (名前 わたし))

の省略形ということになる。2つ変数があった場合大丈夫?

(ノード わ ? (名前 わたし) あ!あなた)

明示的に区切るタメに「。」を使う?

(ノード
   わ ? (名前 わたし) 。 
   あ ? (名前 あなた)
)

「、。」がまだ余ってるのか。

あとカッコの方がカッコを減らした入力より楽という話は「( )」の入力に対して「空白 記号 空白」の入力の方が大変という話っぽい。なので「!」を使って空白を潰す規則を導入すると楽になる。

あとずっとワンライナーで考えてしまったけれど必要なら改行を加えてあげると良さそう。というか改行に意味を持たせない方が楽?

(ノード
あ!あなた、
わ!わたし)

(図
 あ … わ。 
 わ … あ
)

!と同様に空白としての機能を持たせると複雑になり過ぎる。末尾の「、。」は省略できる。

(ノード あ!あなた わ!わたし) (図 あ … わ )

全角空白を使えたほうが明治的に「、。」を使うより入力は洛楽。

マクロみたいな定義を部分適用みたいな表現でかけると便利?

というか普通の言語ならクラスとかで定義する部分(ノードの形状や大きさなどを記述しておく)

あれ、こう考えるとやっぱり今までノード句?で定義してたのは変数なのでは?

(図 あ … い)

(図 (ノード あ)… (ノード い))

の省略形。

(図 (矢印 (ノード あ) (ノード い)))

とかはやり過ぎで書きづらい(前置と中置と後置では中置が嬉しい)

改行に意味を持たせないと

(図
あ … い。
い … あ。
え … お)

とかの方が嬉しくない?

(図 あ … い。 い … あ。 え … お)

フォーマッターをかけるタイミングでいわゆるセミコロンの補完みたいなものが起きても良いかもしれない。

… の使い方についてももうちょっと考えたい。直感的には中置の方が良い気がする。

(図 あ … い う … え)
(図 … あ い … う え)
(図 あ い … う え …)

…を使いたいのは変換無しで入力したいから。困ってるのは2つのこと。

  • 矢印の種類が増やせない(ノードへの修飾か矢印への修飾か区別できない)
  • 全角空白 … 全角空白 は入力しづらい

前者について現状は矢印の種類(形)はデフォルト修飾子としてはキャプションが使われてる。ノードの方は種類がデフォルト修飾子として使われてる。矢印の方は?を使うしかない

(図 あ … ?(形 破線)い)

とても難しい。

全角空白の話は変数だとした場合にはシンボルを繋げられるということにすると省略可能になる。!と同様の取決め。一方でシンボルが無限に長くなる。あと!での修飾の切れ目が無くなる。

(図 あ…!テキストい)

というわけで空白は仕方がない。

同様の話は修飾子を素直に使ったバージョンでも起きるかも。

(図 
 あ ? (形 □)… ! テキスト? (形 破線)い ? (形 □)
え!□ … ! テキスト? (形 破線)お !□
)

修飾子が必要になった瞬間負けなきがする。なのでいっそのこと個別に細かく指定できない方が便利そう。

(図 あ!□ … ! 挨拶 わ!△)

そもそもノードを定義するのと形状指定が対応しそう?そして?が使えちゃえば良い?

(ノード
あ!あなた?□
わ!わたし?□)
    
(図 
あ … !挨拶 わ
)

というか、矢印の修飾をmermaidに合わせなくても良い気がした。

(図 
あ … わ ? (矢印の形 破線)。
わ … だ
)

評価のタイミングで柔軟にするのではなくフォーマットのタイミングで正規化すると良い気がする。

「、」を形状指定子としてつかうとか。

(ノード 
あ!あなた、□
わ!わたし、□
)

(図
あ … わ、破線。

)

いや、どちらかと言えばキャプション用として使うべきかも?

(図
あ … わ、おはようございます。
)

一度しか使わないノードはそのまま書けるとかだと

(図
わたし … あなた、おはようございます。
)

とか書けるのか。やっぱり矢印の種類が問題。

、のあとは矢印の文脈で評価される

(図
わたし … あなた ? (形 □)、おはようございます ? (形 破線)。
)

「」をリテラルとしてあつかうだと見易いかもだけど使いづらいのだよな。

PCでは書きやすいのかな…

?はまとめられると便利かも

(図  わたし … あなた、おはようございます (?形 破線))

フォーマットで「」とか埋まれば良いかも。これが以下のように変換される。

(図 
わたし … あなた、「おはようございます」 ? (形 破線)。
)
@podhmo
Copy link
Author

podhmo commented Apr 26, 2024

@podhmo
Copy link
Author

podhmo commented Apr 26, 2024

これに出てくる図をとりあえず書いてみるとこんな感じか。

DFD(データフロー図)ってなに?DFDの概要と書き方をあわせて紹介 | Cacooブログ

(図
  申請者!□ … 申請受付!○、申請情報。
  申請受付 … 審査!○、申請受付情報。
  審査 … 証明書発行!○、審査結果。
  証明書発行 … 発行履歴!=、証明書発行履歴。
  発行履歴 … 統計報告!○、月末報告。
  統計報告 … 報告先!□、発行統計情報
)

# グルーピングの方法はわからない
 (図 申請受付 審査 証明書発行 発行履歴 統計報告 ? (形 破線) )

@podhmo
Copy link
Author

podhmo commented Apr 26, 2024

説明のために変数名だとわかりやすくするためにノード名を連番にしたけれど、わかりにくいかも?:
(追記:変数名にひらがなを使うようにした。そういうルールを設けると読みやすいかも?)

 (ノード
入力!申請者  ? (形 □)、
(グループ ? (形 破線) うけつけ!申請受付 しんさ!審査 はっこう!証明書発行 りれき!発行履歴 ? (形 =) ほうこく!統計報告 )、
出力!報告先 ? (形 □)、
)

(図
  入力 … うけつけ、申請情報。
  うけつけ … しんさ、申請受付情報。
  しんさ … はっこう、審査結果。
  はっこう … りれき、証明書発行履歴。
  りれき … ほうこく、月末報告。
  ほうこく … 出力、発行統計情報
)

@podhmo
Copy link
Author

podhmo commented Apr 26, 2024

PCの場合は「!」の入力が面倒「:」の入力が楽。

(ノード あ!い)(ノード あ:い) とも書けるようにしておくと楽かもしれない。
(skkとの相性はあんまり良くない)

PCの場合は「…」の入力が難しすぎる。これも「ー」が使えるようにしてしまうとか。

(図
  申請者:□ ー 申請受付:○、申請情報。
  申請受付 ー 審査:○、申請受付情報。
  審査 ー 証明書発行:○、審査結果。
  証明書発行 ー 発行履歴:=、証明書発行履歴。
  発行履歴 ー 統計報告:○、月末報告。
  統計報告 ー 報告先:□、発行統計情報
)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment