nDiki : Markdown

表やダイアグラムの編集・表示に便利な Markdown エディタ Typora

表やダイアグラムを含むノートを編集・表示するのに Markdown エディタ Typora がかなり良さそう。

Markdown 形式をメインとしてテキストファイルベースでノートを書いていて不便だと思っているのが作表。Markdown ソースファイルで表を編集していて列の追加・削除・入れ替えが必要になった時にはエディタの支援が無いと絶望する。Markdown Mode for Emacs で表編集の機能がいろいろあることを知ってちょっといいかもと思ったけれども、やはり表としてレンダリングされた状態で編集したいなと。

そう思って探してみたら編集画面とプレビュー画面が別れていない Markdown エディタ Typora が表編集もサポートしていると知って試してみた。

• https://typora.io/

使ってみたところ Google ドキュメントで表を編集しているようなのと同様な感じで直感的に表編集できた。欲しかったのこんな感じ!

また表だけでなく

• js-sequence
• flowchart.js
• mermaid

を使ってテキストで簡単な図を書けるというのも嬉しい。 Markdown ファイル中にテキストして書いておけるので、図の画像やそのソースファイルの管理に悩まされないで済むのだ。ノートにちょっとしたロジックツリーを書いておきたいことがあるので良い!

https://typora.io/

Markdown 文法は GitHub Flavored Markdown ということだしこれは自分にとって主力 Markdown エディタになるのではという予感がする。

※画像は Typora の PressKit https://typora.io/presskit.zip より。

[ ノート・日記はテキストファイルに ] [ Mac アプリケーション ]

mermaid の CLI を macOS 上で使えるようにする

6月上旬に使い始めた Markdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、 mermaid のデータから画像を単独で生成できるよう CLI を入れた。

• https://github.com/mermaidjs/mermaid.cli

インストールは以下。

 $ brew install yarn
 $ yarn add mermaid.cli

実行は以下のような感じ。

 ~/node_modules/.bin/mmdc -b transparent -w 1920 -i input.mmd -o output.png

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させる

6月上旬に使い始めた Markdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。

• https://mermaidjs.github.io/

mermaid.min.js を Web サーバに配置し、ページの下部に以下が含まれるようにフッタファイルを編集。

 <script src="/path/to/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>

これでページ中に

 <div class="mermaid">
 graph LR
     a --- b
     a --- c	
 </div>

のようにダイアグラムの定義をmermaid クラスの要素の中に書いておくと、ダイアグラムの SVG 要素が生成し置き換えてくれる。表示は以下のような感じ。

画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。

とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。

VS Code 入れたり Twitter のリストを整理したり【日記】

Markdown + mermaid.js / Viz.js を使ってみて、 PlantUML も使えるとやっぱりいいなあと思いまず Visual Studio Code (VS Code)を入れてみた。Atom っぽいな……なと思ったら両方とも Electron フレームワークを使っているのね。

それから、最近また Twitter みている時間がジワジワ増えてきたなぁと感じてきた。リストを整理して TweetDeck や twitcle で表示しておくリストを減らしてみた。バランス。

Google ドライブでのテキストファイル環境が大幅改善

拡張子 md のテキストファイルが全文検索対象に

Google ドライブで拡張子 md のテキストファイル(Markdown ファイル)が全文検索対象になってる! 以前は駄目だったので Google ドライブに置く Markdown ファイルは泣く泣く拡張子を txt にしていたんだけれどその必要が無くなったよ。

Android アプリで日本語のテキストファイルを折り返して表示できるように

それから Google ドライブの Android アプリで日本語のテキストファイルをきちんと折り返してプレビューできるようになった。これで外出先でノートテキストファイルを検索してさっと中身を確認できるようになった。感涙。

必要があればそこから Jota+ (テキストエディタ)に渡して編集し Google ドライブ上のファイルに反映もできる。

ついに全てのノートテキストファイルを外出先できちんと全文検索・閲覧・編集できる環境が手に入った!

[ ノート・日記はテキストファイルに ]

Ulysses 18 for Mac でプレーンテキストファイル編集ができなくなった

外部フォルダで、シートを「Ulysses ファイル」形式(拡張子 ulyz)での保存・管理を選べるようになった。Ulysses ファイルとして扱う設定にした外部フォルダではイメージ添付などができるようになった。

しかし Ulysses ファイルはバイナリファイルで他のテキストエディタを併用できない。自分のノート管理方針上使えない。

一方今回のアップデートでフォーマット無しのテキスト(プレーンテキスト)として表示・編集する機能が無くなってしまった(拡張子 txt のファイルも Markdown 形式として扱われてしまう)。これはかなり辛い仕様変更である。

Ulysses はすぐに \ でエスケープしてくるので気をつけないとすぐ \ だらけになってしまうんだよね。困った。

[ ノート・日記はテキストファイルに ]

今日のさえずり: Twitter 不具合について Twitter で検索している。ん?

2019年10月02日

• 06:30 銀座で見つけたもの。 RICOH GR III #GR #GRIII #GR3 https://t.co/mR1ZSYSP8I
• 06:45 ねじれ。 GINZA SIX RICOH GR III #GR #GRIII #GR3 https://t.co/BX4le5WET4
• 09:34 #モンスト #6周年 2019年10月2日 #朝の渋谷 RICOH GR III #GR #GRIII #GR3 https://t.co/rx13bkyYcq
• 11:42 Ulysses 18、外部フォルダ上でフォーマット無しのテキストファイルを扱えなくなったっぽいぞ。 Markdown ファイルか Ulysses ファイルの2択に。
• 12:30 電波観測。 RICOH GR III #GR #GRIII #GR3 https://t.co/SxuBUtMzZZ
• 16:19 萩の月うまーい(今日も食べてる)。
• 18:13 Twitter 不具合について Twitter で検索している。ん?
• 18:45 侵食。 銀座 RICOH GR III #GR #GRIII #GR3 https://t.co/z0NtP3WdY7
• 18:47 @youclick0113 ジェネリック萩の月「ふわころ」でございます。 http://bit.ly/2tE0keq
• 18:52 @youclick0113 「なぜ札幌タイムズスクエアという施設が『萩の月』似?」と思ったら菓子の名前なんですねー。
• 22:52 明日ついに『12歳。』最終回かー。

メインのライティングアプリを Ulysses から iA Writer に

Ulysses 18 for Mac からフォーマット無しのテキスト(プレーンテキスト)として表示・編集する機能が無くなったのかなり不便である。ライティングアプリ iA Writer for Mac メインに変えようかなと。

iA Writer も全て Markdown 扱いになるのだけれど、 Ulysses のように勝手に \ でエスケープされて書き換えられるといったようなことがないのでそれほど困らない。

Ulysses ではパフォーマンスの問題で nDiki の全記事の入ったフォルダをライブラリ(外部フォルダ)に追加できなかったのだけれど、 iA Writer で試しにライブラリ(ロケーション)に追加したら意外や意外、問題無く操作できた。これは嬉しいぞ。

[ ノート・日記はテキストファイルに ]

Google ドライブではテキストファイル作成時の拡張子で全文検索対象になるか決まるみたい

Google ドライブにあるノートテキストファイルを参照したくなり、そこに必ず書かれていると分かっている単語で検索してみたけれど検索結果に出てこず「あれっ?」となった。検索結果に出るテキストファイルと出てこないテキストファイルがある。

全文検索対象になっていないテキストファイル

違いを調べたところ Web 版 Google ドライブでテキストファイルの詳細を右側に表示した際に「縮小されたサムネイル」が表示されるものは全文検索対象になっていて、表示されないものは全文検索対象になっていないようだ。

でテキストファイルで「縮小されたサムネイル」が表示されるかどうかの違いだけれど、どうやら作成時(ローカルホスト上でファイルを作成して「バックアップと同期」で Google ドライブに最初にアップロードされる時を含む)に、拡張子が txt か md (Markdown ファイル)かで決まっているような挙動だった。最初に txt で作った後に md に変更しても全文検索対象だし、逆に最初に md で作ったファイルは後で txt に変更しても全文検索対象にならない。

Google ドライブに置くすべてのノートテキストファイルを拡張子 txt で新規作成扱いにする

Google ドライブで拡張子 md のテキストファイル(Markdown ファイル)が全文検索対象になっていることに9月に気が付いて、 Google ドライブに置く Markdown ファイルの拡張子を md に統一したのだけれど、その結果「もともと txt だったものを md にリネームしたもの」「もともと md だったものを過去に txt にして再度 md にリネーム」「md で新規作成してずっとそのままなもの」が混在していて、全文検索されるかどうかがもはやよくわからない状態になっているのが自分の現状っぽい。

単純に拡張子を変更するだけでは駄目なことがわかったので、いったん Google ドライブの同期対象フォルダから18,000以上あるノートテキストファイルを外に出して、拡張子を txt に統一し、あらためて Google ドライブの同期対象フォルダに戻して新規作成扱いにした。これで全部検索対象になった模様。

Google ドライブに置く予定がない Markdown ファイルもデフォルトで拡張子 txt で作るよう各種設定を変更し、Google ドライブに置いていない既存の Markdown なノートテキストファイルもだいたい txt に変更しておいた。あとで「Google ドライブに置いておこう → (Google ドライブに同期したあとに)拡張子 md だったから txt にしておこう」とした時に、人知れず検索対象からハズレているという事態を避けたいので。

Google ドライブは全文検索ができるのが便利だけれど、 Dropbox みたいにローカルファイルシステムとの同期を前提とした設計で出発していないのか特殊な仕様が多いので、時々ハマるんだよね。

[ ノート・日記はテキストファイルに ]

1日のノート処理をまたできるだけデイリーノートに集約してみる

ノートテキストファイルにノートをとる(思いついたことを書く・ちょっとした文章の草稿を作る・一時的なタスクリストを作る・行動記録をつけるなど)のに、「1つのテキストファイルで書いたり編集したりする」やり方と「個別にテキストファイルを作成してそこで書いたり編集したりする」やり方がある。

で、今日からは「その日の1つのデイリーノートで書いたり編集したりする」やり方に(また)変更することにした。Ulysses が同時に複数のテキストファイルを扱いやすかったのでどんどん個別にテキストファイルを作ってあとで整理するというやり方をここしばらくしていたのだけれど、メインを iA Writer にしたらちょっとやりにくくなってきたというのが理由の1つ。それから iA Writer だと Markdown 方言のチェックボックスが使えるので、デイリーノート上にやりたいことリストを作り作業しながらチェックを入れておき、あとでそのリストをみながら同じテキストファイル内で1日の記録をまとめたり Web 日記草稿化したりしたいというのがもう1つの理由。

1つのテキストファイルに複数のトピックを書くやり方の場合、メモる時に書く場所を探す煩雑さが発生してしまう。特に見出しの強調表示が無いエディタの場合に顕著なので、ぱっと視認しやすいようにデイリーノートのテンプレートの各見出しには絵文字を入れておくことにした。

あと環境としては Markdown チェックボックスに対応している Android アプリとして、アンインストールしてあった iA Writer を neutriNote と併用しようと再度いれてみた。見出しの強調表示があるしチェックボックスも Mac 版と同じくトグルできて便利なんだけれど、各所でつぶやかれている通り現在のバージョンは日本語の文字が化ける場合があり実用に耐えないことが判明。残念。 Anrdoid 版はアップデートサイクルが非常に長いのでそこは気長に待つかなという感じ。

[ ノート・日記はテキストファイルに ]

今日のさえずり: Markdown リスト項目「アスタリスク派」「プラス派」「ハイフンマイナス派」の共同編集におけるそれぞれの静かなる思い

2020年03月25日

• 06:15 ザラザラ #photography RICOH GR III #GR #GRIII #GR3 https://t.co/tdeo5lLwRH
• 15:51 Markdown リスト項目「アスタリスク派」「プラス派」「ハイフンマイナス派」の共同編集におけるそれぞれの静かなる思い。
• 16:49 ハイフンマイナス派です。
• 17:45 楽園 #photography #GIZMON #Utulens https://t.co/B6UgIcTgdl
• 20:07 スーパーめちゃ混み。
• 21:45 Roamer #photography RICOH GR III #GR #GRIII #GR3 https://t.co/FdgULAqkOF
• 23:59 Qiita 投稿した記事も読んだ記事も LGTM した記事も無だった。