この Web 日記(nDiki)がスマートフォンで見にくいのがずっと気になっていたので、さくっと Bootstrap 3 に移行した。CSS を Bootstrap 3.0.2 のものに変えて、navbar を使うようにコードをちょっと変更程度の軽い対応。
もともと tDiary テーマ CSS 用の HTML 構造を生成していたんだけれど、そのあたりが問題で崩れることはなく Bootstrap の CSS を当てることができた。もともと Wiki 記法で書いたソースドキュメントを HTML に変換しているので、変な構造の HTML は吐かないようになっていたというのもサクっといけた点かな。
細かいところういうと画像の回り込みに対応させなければならなかったり、テーブルなど適宜 Bootstrap のクラスを指定した方がいいところがあるけれど、まあ追い追いで。
あとそもそも iPhone や Android などのスマートフォンで見にくかったのは CSS の問題というよりは、viewport の指定がなかったからだった。Bootstrap に差し替えただけではやはりスマートフォンでは見にくくて、Bootstrap の Getting started の通り、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
と書いたら文字サイズなど見易くなった。
2004年2月22日にハイパー日記システム(hns)から自作の DiKicker に移行してからもうすぐで10年。そういえば2004年2月22日は奇しくも mixi がプレオープンした日だっとはなあ。何かの縁か。
ちょっとした勉強会などの資料は Markdown とかで軽く書いて、Web ブラウザでプレゼンテーションするための HTML ファイルと、参照用のシンプルな HTML ファイルを生成したいなと思ってちょっとチェックしてみた。pandoc を使うと Markdown から reveal.js を使ったスライドページを作れるし、普通に HTML5 なページにも変換できるので良さそげ。
pandoc は Haskell で書かれている。 GHC + Haskell Platform が入っている環境なら
cabal update cabal install pandoc
を実行すればインストールできる(Fedora 17 の home 以下に GHC + Haskell Platform をインストールした時のメモ)。Debian GNU/Linux sid にも pandoc Debian パッケージはあるのだけれど、まだちょっと古めなので cabal で入れた。
mkdir pandoc-sample cd pandoc-sample emacs source.md
してサンプルを Markdown で書く。
できたら reveal.js をとってくる。
git clone https://github.com/hakimel/reveal.js.git
CSS の微調整が必要なら reveal.js/css/reveal.min.css に手を入れる(自分の場合 text-align: center を left にしたり、.reveal h<n> のサイズを小さくしたりする)。
~/.cabal/bin/pandoc -s -t revealjs -V theme:default -o slide.html source.md
でスライド HTML ファイルが生成される。
HTML のテンプレートを変更したい場合は、例えば
cp -a ~/.cabal/share/pandoc-1.12.2.1/data/templates/default.revealjs .
とコピーしてきて編集後、
~/.cabal/bin/pandoc -s -t revealjs -V theme:default --template=default.revealjs -o slide.html source.md
とする。
~/.cabal/bin/pandoc -s -t html5 --toc -c /path/to/bootstrap.min.css -o doc.html source.md
などとしてシンプルな HTML5 版も作っておける。
Bootstrap 3 を使っているんだけれど見出しが本文とちょっと区別がつきにくいなどちょっと気になる点があったので修正。
ここ最近はプレゼンテーションスライドを用意する時は reveal.js を使っています。Markdown で内容を書けるので便利なのですが、個人的には書き始めが億劫というネックがあります。ディレクトリを作って reveal.js のファイル一式を最初に用意するのがちょっとしたことなのですが面倒くさいのです(自分用に若干アレンジしたサンプル一式をコピーする作業)。
Markdown で書けるもので、かつもうちょっとさくっと書けるツールがあるかなと探してみたところ Deckset for Mac が良さそうなので使ってみることにしました。
Deckset 方言の Markdown で記述したファイルを1つ用意すれば Deckset でスライドとしてレンダリングしてくれるのでお手軽。Deckset アプリ自体には Markdown エディタは内蔵されておらず Emacs や Atom など好みのテキストエディタで編集するスタイルというのも良いです。テキストエディタ側で保存すると Deckset 側が更新を検知してスライドを更新してくれます。
スライドに使う画像は URL で指定することができる(そして推奨している)ので、ローカルディレクトリに用意してという必要がありません(もちろん Markdown ファイルと同じディレクトリに用意して読み込ませることもできます)。「プレゼンテーション時にネットワークにつながっていなかったり URL 先から消えていたら困るのでは?」というのが気になるところですが、 Deckset 側でローカルホスト上にキャッシュしてくれるので大丈夫になっています。
テーマは Deckset が用意しているものから選びます。欧文系らしいちょっと派手なのが多く、個人的に使えるなというのはそれほど多くない印象です。個人的には Titillium がいちばんしっくりくるかなと。
PDF ファイルや画像でエクスポート可能なので困ることはなさそうです。
スライドの冒頭にそのスライドの設定を書いておくことができます。
theme: Titillium,1 footer: [各ページ下部のフッタに載せたい文字列] slidenumbers: true autoscale: true
が良さそげ。
reveal.js と比べて良いなというところは以下です。
reveal.js では Web ブラウザで表示するため縦横比が変わる前提である程度余裕をもってページを書く必要があるのですが、Deckset はそこを気にしなくて良いのが楽です。CSS や JavaScript コードをいじれる reveal.js に比べると細かいカスタマイズは全然できないのですが、その分デザインは Deckset に任せると割り切って内容だけに集中してさくっと書けます。
reveal.js が便利なところもあるのでプレゼンテーションシーンに合わせて使い分けることにします。
(画像は http://www.decksetapp.com/ より。)
先月末に作った「ちょっとしたノートを置いておくスペース nNote」、どう使うか定まっていなくて当初はあまり書くこともなかったのですが、最近はちょこちょこメモを置くようになってきました。気軽に書き留めておける場所があるのやはり楽でいいです。小さいエントリが多いのでぱっと自分で見られるようにトップページに表示する記事数を増やしてみました。
それから nDiki(と nNote) に画像が無い記事がシェアされた時にフッタにあるプロフィール写真が機械的に選ばれる場合が多くてちょっとなと思ったので、フッタの上に 1200x630 の画像を置いておくことにしました(ページ上では大きくならないように CSS でサイズ制限)。
記事ごとに OGP 画像を指定する機能・記事に OGP 画像が無い場合にデフォルトを指定する機能を用意せねばと思いつつとりあえずということで。
以前ノート間リンクのできるノートアプリを探してみた時に触った Obsidian をもう少し試してみた。
Obsidian は「ナレッジベース」アプリケーションで、一般的なノートアプリよりも情報間のネットワークを重視している。ローカルホスト上の特定フォルダ以下に置いた個別の Markdown ファイルを [[ファイルベース名]] 形式で内部リンクしていくのが基本。
ファイルの拡張子が md 固定で txt では駄目というのが個人的に不便(拡張子 txt にできないと Google ドライブ的に困る)なのだけれど、過去のノートテキストファイルの拡張子を変更してお試ししてみた。
ファイルベース名を指定して内部リンクを文中に書いていくのだが、ファイル名の先頭を日付にする流儀との相性が良くないな。[[ファイルベース名|表示テキスト]] 形式でプレビュー時のテキストを指定できるけど、編集モードだと文章として読みにくい。各ファイルで YAML front matter 形式で別名を宣言しておけばその別名で内部リンクできる機能があるので、丁寧に管理すれば読みやすくはできる。
ただ Obsidian 方言で書きすぎると「ローカルホスト上の Markdown ファイルなので特定アプリケーションに依存しない」良さがスポイルされてしまう。Markdown のショートカット参照リンク形式で内部リンクを張れるようになると良いのになと感じた。
1ファイル1トピックにしてきちんと内部リンクを張っていかないと価値あるグラフにならない。1日1ファイル + 個別トピックファイルというスタイルだと役に立たないかな。
検索は使いやすい。TaskPaper ほど優れてた UI ではないけれど、フォールディングやアウトライン表示もできたりする。デフォルトのスタイルは個人的に見出しが大きいなと感じるので、常用するなら CSS をいじる必要がありそう。
「時間とともに記録・整理しておきたいことが変遷していく」「ナレッジベースを作ること自体が主目的ではない」パーソナルナレッジベースの世界では、静的な情報を丁寧にネットワーク化していく百科事典型よりも日誌/日記型の方が良いと思ってる。内部リンクは編集・維持コストが高いので、パーソナルナレッジベースでは頑張らないのが幸せだ。
Obsidian は百科事典型のナレッジベースが欲しい人にはあいそう。一方自分のような日誌/日記型派にはやはり検索主体の howm 系の方がいいなとあらためて感じた。
[ Mac アプリケーション ] [ ノート・日記はテキストファイルに ] [ ファイル名の先頭を日付に ]
Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。
nDiki は1999年1月に始めたコンピュータ日誌を前身とする Naney の Web 日記(兼パーソナルナレッジベース)です。
#nNote タグがついている記事は他の記事に比べて、より断片的・未整理・不完全なちょっとしたノートです。まだ結論に至っていない考えなども含まれます。頻繁/大幅に更新したり削除したりすることがあります。 それとは別に nNote にもちょっとしたノートがあります。
※内容は個人的見解であり所属組織とは関係ありません。