nDiki : Markdown

Markdown 形式でスライドを書きたいけれど図が面倒

原稿を Markdown 形式ファイルで書いて Deckset や reveal.js でスライド表示できるようにするのが、他のテキストファイルと一緒に検索・閲覧できたりして便利なので好きです。

ただ作図だけが面倒。今日は Keynote で図を作って画像ファイルに書き出し Deckset で作成するスライドに入れようとしてみたのですが、結局最初から Keynote で作った方が圧倒的に楽ということでそうしました。うん。

今日のさえずり: ファシリテーターローテーションマーカーに AWS Cloud Ninja フィギュアが起用された

2018年02月15日

• 08:40 暖かくなるということで、さすがに今日からマスクをして外に出ることにした。
• 09:32 朝からすでに、ダウンジャケットでは暑かった。
• 09:39 “マイネットグループのゲームサービス事業会社4社が合併しマイネットゲームスに。「ゲームサービス圧倒的No.1」を目指す | 株式会社マイネット” http://bit.ly/2o1DYzP
• 09:42 ゲーム終了の経緯。 / “mobageで運営していたゲームを終了させた” http://bit.ly/2o1rJ6e
• 09:55 Trello に絵文字リアクション機能が追加されたので早速。選べるのは今は12絵文字だけっぽい。 http://bit.ly/2BZOTTa
• 13:15 朝のミーティングのファシリテーターローテーションマーカーに AWS Cloud Ninja フィギュアが起用された。
• 15:12 RT @masutaro: 今日とあるきっかけで10年ぶりくらいにペアプロしたんだけど、職種を問わず他人の仕事ぶりを口頭解説つきで見学させてもらうってすごく得るものが多い気がする。
• 15:15 エンジニアが主役の Android カンファレンス。2日間で1000名以上が参加。 / “【DroidKaigi 2018】ミクシィグループのエンジニアが登壇しました｜ミクシル” http://bit.ly/2BuW0BW
• 17:15 DSC-RX0 はやはりビジュアル・ブックマーク機サイバーショットUの再来なのか。 / “子どもの日常記録に「RX0」を使い始めたらとても楽しい” http://bit.ly/2Buzjhg
• 17:18 Naney の日記: Buffer を Awesome Plan にアップグレードして予約投稿しておける数を10件から100件に増やした。これだけあればずいぶん先まで予約できちゃう(そこまでしないけれど)。… https://twitter.com/...
• 17:21 ミキサー車。 PowerShot G9 X Mark II https://t.co/vU69jFFNsA
• 19:50 Markdown でプレゼンテーションスライドを書ける Deckset for Mac を久しぶりに使った。社内勉強会のスライド作る時とかサクッと楽に書けて良い。
• 23:30 “[mixi] ベビースター×mixiコラボキャンペーン！” http://bit.ly/2Bt9zSm

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 ファイルを開けないというのはありますが、まずはこれでやってみようかなと思います。