nDiki : ノート

ノート - notebook

記事

関連情報

2019年6月6日 (木)

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

image:/nDiki/2019/06/06/normal.png

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

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

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

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

image:/nDiki/2019/06/06/table.png

また表だけでなく

  • js-sequence
  • flowchart.js
  • mermaid

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

https://typora.io/

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

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

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

スポンサード リンク
[ permalink ]
[ 6月6日全て ]

2019年6月25日 (火)

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

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

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 要素が生成し置き換えてくれる。表示は以下のような感じ。

graph LR a --- b a --- c

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

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

[ permalink ]
[ 6月25日全て ]

2019年6月26日 (水)

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

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。 

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

digraph { graph [rankdir = LR]; a -> b; a -> c; }

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

[ permalink ]
[ 6月26日全て ]

2019年7月31日 (水)

今日のさえずり: 使っているところを見たことがない、路地の入り口にあるコインロッカー

2019年07月31日

[ permalink ]
[ 7月31日全て ]

2019年8月1日 (木)

今年もノートン セキュリティ プレミアム 5デバイス新規再購入

ノートン セキュリティ プレミアムが切れたのであらためて新規購入。前回とデバイスは変わっていなくて MacBook Pro 2台と Android デバイス2台をそれぞれ更新。

去年Mac 版ノートン セキュリティは一度アンインストールして同じものを再インストールしなければならないと書いたけれど、今回確認したら[ヘルプ]-[キーの入力]でプロダクトキーを入れて再アクティベーションできる事がわかってさくっと更新できた。

で忘れないように自動延長サービスは即停止。重要。

[ permalink ]

今日のさえずり: 空きが 1024MB を切ると Dropbox が同期を一時停止するということを知った

2019年08月01日

[ permalink ]
[ 8月1日全て ]

2019年8月16日 (金)

Web 日記での画像貼り付けを後回しにする

Web 日記 nDiki を書いて公開するのを後回しにする理由として

  • 貼り付ける写真の準備ができない(デジカメから PC に移して現像・リサイズが済まない)。
  • 言及する日記がまだ未公開なので、その記事へリンクしようとしている記事も公開できない。

がある。先送り理由になるタスクは記事にタグ付けしておいて、週末とかにまとめてやってみることにしよう。 

 < [[画像準備中]] [[記事間リンク準備中]] [[キーワードページ更新準備中]] >

みたいなのをテンプレートに入れておいて、不要なタグを順次消していく感じで。記事毎の残タスクをタスク管理ツールに入れるのは手間で続かないので、記事にタグ付けしちゃうのが個人的ポイント(非公開のノートとかもそうしている)。

[ permalink ]
[ 8月16日全て ]

2019年8月28日 (水)

今日のさえずり: そういえばと思って「ほぼ日手帳2020」のサイトを訪問中

2019年08月28日

[ permalink ]
[ 8月28日全て ]

2019年10月2日 (水)

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

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

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

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

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

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

[ permalink ]
[ 10月2日全て ]

2019年11月2日 (土)

今日から Pixel 4

image:/nDiki/2019/11/02/2019-11-02-085140-nDiki-1200x800.jpg

10月22日に注文した Pixel 4 が1週間後の今週火曜日10月29日に届いた。まとまった時間で Xperia Z5 から移行したいと思って土曜日の今日まで待ってから開梱・設定した。

移行

Xperia Z5 で使っているドコモnanoUIMカード(nano SIM カード)を抜いて Pixel 4 に挿入し電源オン。 APN は自動設定された。

Pixel 4 には「クイック スイッチ アダプター」が同梱されていて、これを使ってケーブル経由でデータ移行ができるようなのだけれど、移行の範囲がよくわからないことと、せっかくの機会なので見直しをしたいということで手作業で移行。こういう時のタスクの書き出しは TaskPaper が便利。ほぼ丸一日費やして移行完了。

前デバイスで機種変更手順が必要なのは以下。

FeliCa チップは背面の電源ボタンの高さあたりにあるとのこと。

ロケーション履歴で使うデバイスも忘れずに変更(前デバイスでは使わないようにする)。

手作業で面倒なのは以下かな。

  • Gboard の単語リスト
  • Authenticator・IIJ SmartKey

Pixel 4 ファーストインプレッション

さすがに4年前の Xperia Z5 より格段に性能向上しており、ヌルヌルな操作感。

指紋認証機能が無くなり代わりに顔認証機能が追加された。使ってみると、失敗することなくアンロックされるので指紋認証よりずっと快適で驚いた。

カメラのシャッター音は控えめ。「無音モード」アプリは Pixel 4 でも動いた。

移行での問題

画像転送で使っている Image Sync は RICOH GR III に接続しようとすると必ず落ちる。Image Sync 2.0.6(2019年9月18日) の対応 OS に明記されているのは Android OS 4.4～9.0 なので、現状仕方なし。早く対応してくれるといいな。

移行を様子見

以下の処理やアプリは Pixel 4 に入れるのをいったん保留。

[ permalink ]
[ 11月2日全て ]

2019年11月6日 (水)

Pixel 4 の電話アプリに電話番号ブロック機能があった

Pixel 4 にまだノートン モバイルセキュリティを入れていない。(まだ十分ではないらしいけれども)Google Play プロテクトがまああるし、パフォーマンスを考えると入れなくて済むならその方がいい。

電話番号着信拒否のためにノートン モバイルセキュリティの着信遮断機能を使っていたのはどうしようかなと思っていたら、 Pixel 4 標準の電話アプリに電話番号ブロック機能があった。そっかー。

[ permalink ]
[ 11月6日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

nDiki は1999年1月に始めたコンピュータ日誌を前身とする Naney の Web 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 0.206841s / load averages: 0.33, 0.37, 0.33
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker