nDiki : プレビュー

Ulysses で TextBundle を使うのどうなのか調べてみた

Markdown 形式ファイルと、そこから参照されている画像ファイルを1つにまとめて管理する形式として TextBundle がある。ライティングアプリ Ulysses が対応しているのでちょっといじってみた。

• http://textbundle.org/

TextBundle は package format と compressed format がある。 package format は macOS のパッケージの形になっていて、 textbundle という拡張子をつけたディレクトリの中に info.json と text.* (Markdown なら text.md)、それからテキストファイルから参照しているファイルを asserts/ サブディレクトリに置くという仕様である。macOS の Finder からは1つのファイルのように表示される。

TextBundle を使うメリット

メリットは以下。

• テキストファイルと参照されている画像ファイルを一緒に管理できる(ばらけないで移動したりできる)。
• TextBundle に対応していないテキストエディタでも text.md を簡単に開いて編集できる。

TextBundle を使うデメリット

非対応アプリケーションから使う場合にデメリットを感じる。

• 非対応アプリからみると TextBundle 毎にディレクトリがあることになるので、ディレクトリだらけな感じになる。ドキュメント毎にディレクトリを開いて中のテキストファイルにアクセスする必要がある。
• Markdown ファイル名が text.md 固定なので、ファイル名だけでは区別できなくなる。

Ulysses for Mac の場合

Ulysses は TextBundle に対応しているので通常の Markdown ファイルと同様1つのシートとして自然に扱える。

普段 Ulysses for Mac では Dropbox の中のディレクトリを外部フォルダとして指定して使っているので以下、外部フォルダの時の話し。

Ulysses の外部フォルダ上の Markdown ファイルに貼った画像をエディタ上でプレビューできるのは現状 TextBundle だけ。エクスポート時も TextBundle 内の画像ファイルは書き出されれるけれど、(相対パス・絶対パス問わず)ファイル名で参照しているものは書き出されない(http/https な URL で指定した画像は HTML でエクスポートする際は画像が貼られる形になるが PDF ではだめ)。Ulysses だけを使って画像を扱いたいなら TextBundle を使う以外選択がない感じだ。

Ulysses 上で TextBundle なシートを保存するたびに参照されている画像ファイルを残して他は assets/ から消されてしまう。なので assets/ の下に画像作成に使ったソース・ファイル(マインドマップファイル)を一緒に置いておくおような管理はできない。そもそもテキスト編集で間違えて画像参照を消して保存実行してしまうと、画像ファイルだって消えてしまうので、画像ファイルだってオリジナルを別で保存しておく必要がある。

TextBundle は使うのは控えた方が良さそうだ。

Marked 2 で Markdown プレビュー時に自動的に画像を探すようにした

ライティングアプリ Ulysses for Mac では画像ファイルのプレビューがいい感じじゃなかったので、 Markdown プレビューアの Marked 2 を使うことにした。

• http://marked2app.com/

Marked 2 は相対パス指定・絶対パス指定のローカルの画像ファイルや URL で指定したネットワーク上の画像もきちんと扱ってくれるので便利だ。

画像ファイルをどこにおいておくか

さて Markdown ファイルから参照している画像ファイルをどこに置いておくか。Markedown ファイルと同じディレクトリに置くのが素朴だが以下の点で却下。

• Markdown ファイルを別のディレクトリに移動する時に参照している画像ファイルを一緒に動かすのが面倒。
• Markdown で書いた日別のノートファイルがたくさんあるようなディレクトリでは画像ファイルが邪魔。

別のところにまとめて置いておくのがよさそうだけれど、そうするとパス指定の問題が出てくる。ファイル移動時の参照書き換えをするは面倒なので嫌。

どうしようかなと思っていたら、 Marked 2 のプリプロセッサ機能で画像のパスを書き換える例を発見。その記事ではローカルホストでのプレビュー時とサイト公開時とでパスが違うことの解決に利用していたんだけれど、ローカルホスト上でも応用できるな。

パス指定はプリプロセッサにやらせてしまえばいいじゃない。画像のファイル名をユニークにしておき(もともとそうしている) Markdown ファイル上ではそのファイル名だけで画像参照として書く。プレビュー時に画像ファイルをローカルホスト上で検索して見つかったパスで書き換えてやれば良いなと。

さっそく Perl プログラムとしてプリプロセッサを作成。 Markdown ファイル中の画像参照があったら、Markdown ファイルのあるディレクトリレクトリ以下および指定したパス以下のディレクトリから File:Find::find で探し、見つかればそのパスに書き換えるようにしてみた。

あ、これ便利。

画像ファイルをいちいち Markdown ファイルの近くにエクスポートするとか、一緒に移動させるとかする必要なくてめちゃくちゃいいわ。

Marked 2 ライセンス購入

Markdown プレビューアの Marked 2 がいい感じだったのでライセンス購入した。

• http://marked2app.com/

Ulysses がまた重くなってきた

ライティングアプリ Ulysses for Mac がまた重くなってきた。特にシート追加をするとしばらく待たされる。シート数が多くなりすぎてきたのかな。外部フォルダをいくつか外してみた。

それから効果があるかはわからないけれど、「イメージのプレビューをオフにする」のと「シートプレビュー行数を減らす」というのもしてみた。

あ、それから Ulysses 以外のアプリケーションが動きすぎというのもあったのかも、他のアプリケーション片っ端から止めて様子みてみることにする。

Google ドライブで拡張子 md のファイルをテキストとしてプレビュー可能に

テキストファイルの拡張子が md だと Google Chrome で Google ドライブを使っている時にプレビューできなかったのが、今日試したらテキスト扱いでプレビューできるようになっていた。 Android アプリでもプレビューできてる(なお中身はまだ検索対象にはならない)。

拡張子 md の Markdown ファイルメモを Google ドライブで共有するのは今まで実用的ではなかったけど、一歩前進。

今日のさえずり: α-7 のボディのゴムがベトベトになってた(α7 ではない)

2019年01月30日

• 06:45 沿線 #SEL1670Z https://t.co/5uUCY1udYl
• 08:37 α-7 のボディのゴムがベトベトになってた(α7 ではない)。
• 09:51 @tanadel はい。フィルムカメラの方の α-7 です。 @tanadel さんも使われてたんですね!
• 09:53 2019年1月30日 #朝の渋谷 通勤にはちょっとだけ遠回りだけれど好きなコース。 PowerShot G9 X Mark II https://t.co/jk2DRaSkh3
• 12:49 SNS での投稿を機械学習で分類するシステム構成とその運用フロー、成果の紹介! / “「機械学習による不適切コンテンツ検出」の実装と成果” https://link.medium.com/jZg990n9ST
• 12:53 岩瀬さん!
• 19:19 Google ドライブ、拡張子 md のファイルをテキストとしてプレビューできるようになってる(Google Chrome や Android アプリで確認)。中身はまだ検索対象にならないけど。
• 23:45 寄り添い合う。 #SEL1670Z https://t.co/Bd7Wybcpux
• 23:56 ダーリン・イン・ザ・フランキス第6話。

プレビュー付きテキストファイル一覧表示ができる Android ノートアプリ neutriNote

テキストファイルベースでノート管理をするのに Mac では Ulysses や iA Writer を、 Android デバイス上では JotterPad を使っている。JotterPad は主にユビキタスキャプチャ用のフォルダを開いた状態にしているので、フリーノート用に使える Android アプリを別に欲しいところである。

しかしテキストエディタはいろいろ存在するのだけれど、ファイル一覧で中身をプレビュー表示できるものはほとんど無いんだよね。ノートアプリとして使うにはファイル名一覧では駄目で、中身がずらずらっと見られる必要があるのだ。例えば Google Keep の表示みたいに。

で、いろいろ探してみたところ以前から名前は知っていた neutriNote が、テキストファイルとしてデータを保存するタイプでしかも一覧表示でプレビュー表示で中身を横断的に見られそうなのでインストールしてみた。

(play.google.com/store/apps/details?id=com.appmindlab.nano より)

• neutriNote

名前なニュートリノからきているらしい。

特徴や使用感

• Markdown に対応している。良い。
• タイトル = ファイル名はいったんデフォルトで「New Note (n)」となる(テキストは設定で変更可能)。
• プレビューは3行。ほとんどのアプリがファイルの先頭を表示するのに対して、末尾を表示するというのが特徴的。追記していくことを想定した UI かな。
• フォルダ階層は提供しないポリシー。
• ノートをシェアするとテキストにタイトルも含まれる(Twitter の下書きとして使うにはタイトルが含まれない方が嬉しい)。
• ウィジェットでホーム画面にノートを表示できる(ただし neutriNote 以外で直接ファイルを削除する場合、ウィジェット表示しているとアプリが落ちるっぽい)。
• (いい意味で)変態的カスタマイズができる。例えば ~neutrinote_shortcuts という設定ファイルに date|neutriNote$ date +%Y-%m-%d-%H%M%S と記述しておくと、ノート上の date という文字列を選択してテキスト展開ボタンを押すと書式指定した date コマンドを実行してその結果で置換してくれる。

同期

neutriNote はデバイス上に指定したローカルリポジトリ(フォルダ)にテキストファイルとしてデータを保存するので、Dropbox や Google ドライブで同期できる。

neutriNote にもオプションで「neutriNote Connector+」というアプリがあるのだけれど、 Dropbox のアプリフォルダ以下だけのアクセスタイプで作られているので自分の用途に合わなかった。

ので今回は以前から使っている FolderSync Pro で Dropbox と双方向同期させることにした。インスタント同期をオンにしておけば neutriNote で変更を加えたらすぐ Dropbox に同期させられる。Dropbox 側での変更を検知して同期することはできないので別途定期同期を設定しておくとともに、 Android デバイスのホーム画面に同期開始のショートカットを置いておいた。

ちなみに neutriNote ではファイル名が ~で始まるものは隠しファイルなので同期から除外。逆に Ulysses は .Ulysses で始まる隠しファイルを作るのでこれも同期対象から除外にした。

良さそげ!

テキストファイルベースのノート管理というスタイルに超ハマる Android アプリだ。 常用ノートアプリの仲間入り!

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

今日のさえずり: 「IKEAカタログ 2019 春夏」内で最安値はたぶん BINTJE/ビンチェ 鉢カバー 49円

2019年02月09日

• 06:30 Welcome to Shibuya! DSC-RX0 #RX0 https://t.co/KIuauBqFsP
• 18:46 「IKEAカタログ 2019 春夏」今日届いた。 New がついているの順番にチェック。
• 20:19 雪が降った日なのに雪見だいふく食べるの忘れてた!
• 21:15 テキストファイルベースのノート管理に使える Android アプリに出会った。 / “プレビュー付きテキストファイル一覧表示ができる Android ノートアプリ neutriNote” http://bit.ly/2DkmrJY
• 21:44 「IKEAカタログ 2019 春夏」内で最安値はたぶん BINTJE/ビンチェ 鉢カバー 49円。
• 024:13 花影。 DSC-RX0 #RX0 https://t.co/9WIELEnPt9

表やダイアグラムの編集・表示に便利な 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 アプリケーション ]

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

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

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

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

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

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

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

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

VS Code で PlantUML

Qiita:Team で PlantUML を使ってダイアグラムを書くのにまず手元で編集したいと思い、 Visual Studio Code (VS Code) に PlantUML 拡張を入れた。

• https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

 ext install plantuml

で拡張をインストール。

Mac (macOS) では Graphviz (それに必要な Java ランタイム)も入れておく。

 brew cask install java
 brew install graphviz

これで Alt-D で PlantUML プレビューができるようになる。

関連

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