nDiki : Markdown

Markdown で書いているノートを Web ブラウザで見るのに MkDocs を使う

ノート/メモははライティングアプリ Ulysses を使い Markdown で書いていて、検索・閲覧・整理も Ulysses で基本済ませています。ただいくつかの良く参照するファイルはブックマークやハイパーリンクから Web ブラウザでさっと表示させたかったりします。なので以前は Plack::App::Directory::Markdown を使った自作 PSGI アプリケーションを使ってました。

• howm + Markdown + Plack
• Text::Markdown::Discount でテーブルや ``` や自動リンクなどの拡張を使う
• 社内でも動かしている PSGI アプリケーションに OpenID 認証をつけた
• Markdown ビューアを OpenID Connect を使って Google アカウントで認証できるようにした

が、セットアップしたり保守したりという手間を今とれないなと思って、 Markdown ビューアを探してみたところ MkDocs が良さそうなので試してみました。

• http://www.mkdocs.org/ (公式サイト自体が MkDocs で作られているのでどのような表示になるか確認できます)

MkDocs を Homebrew で入れてみる

MacBook Pro に Homebrew で入れて動かしてみます。

 $brew install MkDocs
 $mkdir -p ~/var/mkdocs
 $cd ~/var/mkdocs
 $mkdocs new local
 $cd local
 $mkdocs serve

で Web サーバが立ち上がるので http://127.0.0.1:8000/ にアクセスすると ~/var/mkdocs/local/docs/index.md の内容を HTML に変換したものが表示されます。お手軽! 設定変更は ~/var/mkdocs/local/mkdocs.yml できます。

• 設定ファイルの書き方

あとは docs の下に Markdown ファイルを置いておけば Web ブラウザで閲覧できます。docs の下に既存の Markdown ファイルノートディレクトリへシンボリックリンクを作ればそれらも辿って表示されます。

pip で入れ直す

試していてブラウザでのレンダリング表示が重いなと思って HTML ソースを見たら同じ JavaScript ファイルを何十回も読み込んでいて何か変ぽかったので Homebrew のをやめて pip で入れなおしました。どちらも現在 mkdocs 0.17.2 ですが pip で入れた方は問題なかったのでこちらを使うことにします。

 $brew uninstall mkdocs
 $brew install python
 $pip2 install mkdocs

MkDown は静的サイトジェネレータで、プレビューサーバは補助的機能ですがまずまず使えそうです。

GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使う

「Markdown で書いているノートを Web ブラウザで見るのに MkDocs を使う」とつぶやいたら @bsdhack 氏が Grip を紹介してくれました。

私はgithubなどのmdファイル(https://t.co/nyoqRnjsN7)を読むために python製の grip 使って↓なスクリプトを書いて使ってます。

grip --export ${1:-README.md} - | w3m -T text/html

— Mitzyuki IMAIZUMI (@bsdhack) 2018年2月28日

さっそく試してみました。

 $pip2 install grip

でインストールしたら Markdown ファイルを指定して Grip を起動します。

 grip index.md

Grip が http://localhost:6419/ で Web サーバとして立ち上がるので Web ブラウザでアクセスすると index.md の HTML 変換されたものを見ることができます。なお

 grip -b index.md

とすれば起動と同時に Web ブラウザで開いてくれます。URL でパスを指定すればそのまま同じ/サブディレクトリにある Markdown ファイルもプレビューできるので、ハイパーリンク付けをしておくことでドキュメント群をブラウジングすることもできます。なるほどお手軽で便利。 GitHub 上とほぼ同様の見慣れたデザインになるのがいいですね。

そもそも Grip は「GitHub Readme Instant Preview」で GitHub 上での表示確認のためのツールで、 GitHub の REST API を使ってレンダリング結果を生成しているので当然といえば当然だったりはします。

ただそのかわり GitHub の API を使うので

• オフラインでは使えない(オフラインレンダリングは開発中)
• 外部サービスを使って変換させたくないドキュメントには使えない

と場合によっては不便な部分があります。なお後者については GitHub Enterprise があるなら Grip でそちらを指定するとう手もあります。

GitHub に push する前にチェックしたい時はもちろん、それ以外でさっと Web ブラウザで見てみたい時にも便利なツールですね。

• https://github.com/joeyespo/grip

今日のさえずり: イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。

2018年02月28日

• 08:03 Google Chrome 68 の HTTP サイトでの表示は「保護されていません」になるのかな。ニュースサイトが書いていた「非安全」ほどはキツくない表現。 / “保護されたウェブの普及を目指して” http://bit.ly/2FBonP5
• 08:05 RT @mhatta: ジェットストリームのパーカータイプ替芯が出た http://www.mhatta.org/.../ https://t.co/IRBkuaDXVH
• 13:00 イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。
• 15:15 Mac 上にある Markdown で書いたノートファイルを Web ブラウザで見るのに MkDocs を使ってみた。ビルトイン Web サーバ付き。 http://bit.ly/2F0lWV4
• 17:21 とんかつ屋さん #α6300 + GIZMON #Utulens http://bit.ly/2ht8a6M https://t.co/mNUuKKt3ep
• 22:27 @bsdhack ありがとうございます。 Grip 初めて知ったので使ってみました!
• 22:28 GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使ってみた。 http://bit.ly/2t4U2Wk
• 22:31 @bsdhack Grip で変換するの単独ページだけかと思ったらちゃんとディレクトリ階層中の Markdown ファイルも表示できて「おー」となりました。
• 22:36 お疲れ様でした & お大事に! @orga_chem / “退職の前座エントリ - 若き JavaScripter の悩み” http://bit.ly/2CP3vR9

今日のさえずり: スマートフォンで近くの公衆電話を探してる

2018年03月07日

• 08:42 Markdown でプレゼンテーションスライドを書ける Deckset が Deckset 2 になりテーマのカスタマイズができるように。期待。 / “Let’s talk about customization…” http://bit.ly/2FyBXF4
• 09:38 セブン-イレブンに寄ってからの出社。 (@ 株式会社ミクシィ (NBF渋谷イースト) in 渋谷区, 東京都) https://www.swarmapp.com/c/5nl8pdcnzgi
• 22:11 スマートフォンで近くの公衆電話を探してる。

今日のさえずり: 自分のとこでも社内 Twitter オフ会やってみたいな

2018年03月08日

• 08:42 Markdown でプレゼンテーションスライドを書ける Deckset、 Deckset 2 からは Mac App Store 購入じゃなくなってる。で $29 か。
• 09:15 雨だし寒いしなので今日はいいかなーとマスクをしないで出てきた。
• 15:15 アルバイト募集をみるにマクドナルド 大井町イトーヨーカドー店は2018年5月25日オープンらしい。 http://bit.ly/2FnQGne
• 17:15 RT @as_tone: RKSKYM （理科系の作文技術読め）
• 17:18 また休みの朝食にカルディコーヒーファームで売ってるパナビの冷凍クロワッサンを焼いて食べたいな。 http://bit.ly/2FdjHi6
• 21:27 自分のとこでも社内 Twitter オフ会やってみたいな。 https://twitter.com/...
• 22:12 Deckset 2 入れてみた。テーマをカスタマイズできる範囲結構狭かった。でも日本語フォントを指定できるだけでもだいぶスライドがいい印象になるな。
• 22:30 14年以上続いている大規模サービスの運用/サーバサイド開発/スマートフォンアプリ開発をしてみたいエンジニアをめっちゃ探しています。
• 23:14 RT @youclick0113: こう書かれるとめっちゃかっこいいしやって見たい！って思うけど、先輩に全力で止められる
• 23:30 トイデジ VQ1005 入手したのもう10年前かあ。 / “トイデジカメ VistaQuest VQ1005 来た” #トイデジ #VQ1005 http://bit.ly/2oW4Z7k
• 23:44 雨だったせいか今日はマスクをしなくても平気で、最高な一日だった。

テーマカスタマイズが可能になったプレゼンテーションツール Deckset 2

Markdown でプレゼンテーションスライドを書ける Mac アプリケーション Deckset が 2 になって遂にテーマのカスタマイズができるようになりました。

早速試してみたところテーマをカスタマイズできる範囲は狭め。でも日本語フォントを指定できるだけでもだいぶスライドがいい印象になりました。もともと入っているテーマは「フォントが違えば」「色がもうちょっと違えば」「ここ中央寄せでなくて左寄せだったら」と、あとちょっと変えられればなと思っていたので、微妙にいじれるだけでも結構嬉しいです。

今後 Deckset 1 が保守されなくなることも考えて Deckset 2 を購入することにしました(有料アップデート)。今回から Mac App Store からの購入ではなくなって公式サイトからの購入です。 $29 で PayPal 経由で 3,199円。コンピュータ2台まで。

今まで Titillium テーマが一番気に入っていたので、これをちょっとカスタマイズして日本語に合ったテーマに調整してみます。

• Deckset 2

今日のさえずり: 久しぶり。学びにきた。

2018年03月10日

• 10:30 男はアクセルをゆるめ、女はブレーキを踏む。 http://bit.ly/2FrqqZa
• 10:55 久しぶり。学びにきた。 (@ 品川図書館 in 品川区, 東京都) https://www.swarmapp.com/c/6ZRL4X2VWxX
• 13:06 RT @TDUsyashinbu: D-expoでは白黒写真をテーマに展示を行います！ 皆さん是非いらしてくださいね https://t.co/LSf8fjn7pA
• 21:48 PopClip for Mac の extension の作り方わかったので Remember The Milk にタスク追加するの作った。良い。
• 22:30 Markdown でプレゼンテーションスライドを書ける Deckset がバージョンアップしてテーマカスタマイズが可能になったので購入した。テキストファイルでさくっと書けるの超便利。 http://bit.ly/2FxvgQz
• 23:00 “plenvを使ったPerl環境構築 〜2018年度版〜 - Masteries” http://bit.ly/2Fn7E50

Ulysses 13 が fenced code block に対応

愛用している Markdown 系ライティングアプリ Ulysses がバージョン 13 になってついに fenced code block に対応しました。

今までは行頭に '' を入力して(と行頭にタブ文字が入る)コードを書くという形式のみしかサポートしていなかったので結構不便でした。 fenced code block に対応してくれたことで、コンピュータ関連のノートを取る時に Ulysses だとちょっとなぁというのがだいぶ解消されました。良かった良かった。

iThoughtsX + Ulysses でマインドマップの管理をしてみる

発想したり整理したりするのにマインドマップを描くの良いのですが、あとで有効活用できていません。 Mac でのマインドマップツールとして iThoughtsX を使っているのですが、これ単体ではライブラリ機能がなくて過去に描いたマインドマップをブラウズできないというのも要因かなと。 Finder + Spotlight 検索(や Alfred での検索)頼り。

テキストノートは Ulysses でいい感じに管理できているので、マインドマップでのノートも同様にできたら嬉しいなということで、iThoughtsX で描いたマインドマップについて対になるように Markdown 形式ファイルを書き出して Ulysses の外部フォルダに入れておいてみることにしました。

iThoughtsX から都度書き出して Markdown 形式ファイルを更新する手間があるのと、Ulysses 上からぱっと iThoughtsX ファイルを開けないというのはありますが、まずはこれでやってみようかなと思います。

ノート・日記のテキストファイルを Google ドライブへ

今までノート・日記のテキストファイルは Dropbox で同期していました。 Dropbox の同期については満足しているのですが Android スマートフォンで全文検索でファイルを探して開くということができないのはやはり不便なので Google ドライブに同期するように変更しました。

iOS の Ulysses で閲覧・編集できなくなるは許容

Ulysses で Dropbox を同期しておくこと iPhone でノート・日記のテキストファイルの全文検索・編集ができていたのですが、今回の Google ドライブへの同期先変更でそれができなくなります。

今は Android スマートフォンメインで使っているのでこちらは諦めることにします。

拡張子を txt にする

Google ドライブにテキストファイルとして扱ってもらうためには Markdown ファイルの拡張子を md ではなく txt にする必要があります。

過去 txt ファイルに統一して Google ドライブに同期していた事もあったのですが、その時はテキストエディタ・ライティングアプリの都合で結局戻しました。今回全文検索が使えることを優先し、再度 Markdown 形式のノート・日記テキストファイルも拡張子を txt に変更しました。

Mac の Ulysses ではそのようなファイルを保存している外部フォルダの「新規シートのファイル拡張子」設定を .txt に変更し、「標準テキスト (.txt) ファイルを Markdown として編集」設定をオンにしておきます。

Android のテキストエディタから直接 Google ドライブの編集を選んで編集する

JotterPad・iA Writer・Jota+ が Google ドライブにアクセスできるので、これらでブラウズしてファイルを開き編集できます。

Android の Google ドライブアプリで全文検索してからファイルを開いて編集する

全文検索でファイルを探してから開いて編集するというのは JotterPad・iA Writer ではできません。

Google ドライブアプリで全文検索してファイルを選んだあとに Jota+ に渡すと、Jota+ で編集・保存で Google ドライブに書き戻すことができます。全文検索からはこの流れで扱うことにします。単独のライティングアプリで全文検索から直接編集といかないのでちょっと手間ではありますが、今までは探すことすらできなかったのでかなり助かります。

これでどこでもパーソナルナレッジベースにアクセスできるようになりました。やはり過去のノート・日記をどこでも検索できるというのは便利でいいですね。

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

Day One 3 で Markdown 記法のテキストの扱いが不便に

Day One 3 (Mac 版は 2.8〜) の unified editor で編集モード切り替え不要になったのはいいんだけれど、編集中のテキストやコピーしたテキストから Markdown 記法したものが消えるようになってしまった。これは厳しい。

Day One の Mac アプリケーションだと Open In から Plain Text を選べば Markdown 記法が残ったまま書き出せるけど、都度それはしたくない。

まだ追従していない Android 版の Day One で頑張れるかと思ったけれど、新しい iOS 版・Mac 版で作成したエントリは

Editing of this entry is not compatible with this version of Day One.

と出て編集すらできなくなっていた。Android 版で作成して Mac で編集しても Android 版で編集できなくなる。おぅ。

Journey に乗り換える?

過去に試してみた Journey に乗り換えるのどうかなと思って、また入れてちょっと使ってみた(Journey for Android のみプレミアムは購入済み)。

Journey for Android については一覧表示の時のエントリの高さが大きくて Xperia Z5 だと一度に3つぐらいしか見渡せない。複数ジャーナルは作成できない。などなど Day One に比べると見劣る。

Journey for Mac は購入しないと試用できなかったので、触った感じを評価できなかった。ヘルプなどをみる限り CLI がないので、 Alfred からエントリ作成ができなさそう。うーん、それは辛い。

Day One 継続

代替がないので Day One 利用継続かな。 Day One はもともとキャプチャ用に使っていて、最終的には Ulysses や Emacs でテキストファイルとしてまとめるようにしているのでとても困るというほどではないかな。

できれば Markdown 記法が見えるエディタも残してほしいけど、もしかしたらもう内部表現は Markdown 形式じゃなくなくなっているかもね。

今日のさえずり: Amazonプライム・ビデオにちびまる子ちゃん第18話「まる子 おすし屋さんに行く」の巻があった!

2018年09月01日

• 07:00 輝き #鹿角市 #花輪 #SEL1670Z https://t.co/Is6UxQL4kL
• 09:15 RT @umefilmphoto: このコインランドリーなんか昭和感あって素敵。ソフター。 #xt10 #fujifilm #fujifilm_xseries #写真好きな人と繋がりたい #photography https://t.co/amSqMebWKc
• 09:24 Day One 3 (Mac 版は 2.8〜) の unified editor で編集モード切り替え不要になったのはいいんだけれど、編集中のテキストやコピーしたテキストから Markdown 記法したものが消えるようになってしまった。これは厳しい。
• 09:27 Day One の Mac アプリケーションだと Open In から Plain Text を選べば Markdown 記法が残ったまま書き出せるけど、都度それはしたくない。
• 09:35 更新されていない Android 版の Day One なら頑張れるかと思ったけれど、新しい iOS 版・Mac 版で作成したエントリは「Editing of this entry is not compatible with t… https://twitter.com/...
• 17:00 Amazonプライム・ビデオにちびまる子ちゃん第18話「まる子 おすし屋さんに行く」の巻があった! 思わず視聴。 https://amzn.to/2LDqgfB
• 21:45 今年も Sony Aquarium やってるんだ。 Ginza Sony Park も8月9日に開園しているんだね。 / “Sony Aquarium 2018” http://bit.ly/2N3NO1X