ラベル参照などはできないけれど、番号をつけるだけなら CSS でできる。
body { counter-reset: chapter section subsection; } H2:before { counter-increment: chapter; content: "第" counter(chapter) "章 "; } h2 { counter-reset: section subsection; } H3:before { counter-increment: section; content: counter(chapter) "." counter(section) " "; } h3 { counter-reset: subsection; } H4:before { counter-increment: subsection; content: counter(chapter) "." counter(section) "." counter(subsection) " "; }
H1 はタイトル用。
www.naney.org のトップページは、大学のサーバで /~naney/ として使っていたレガシーなものをたまーに修正しつつずっと置いておいたのだけれども、まあもういいでしょうということで。
302 Found で nDiki にリダイレクトするように .htaccess に設定を追加。
今は普通にできる 1+ 2 カラム構成を、当時 Web ブラウザの初期の CSS 実装の互換性に悩まされつつ試行錯誤したり、Content negotiation による言語設定にあわせた出力切り替えやってみたりとかは思いで。
nDiki(この Web 日記)では長らく右にサイドバーのある2列レイアウトにしていたんだけれど、昔みたいな「ブログパーツ!」みたいな時代でもとうに無くなっているし、簡単な自己紹介と直近の Tweets を載せているぐらいだったので、バスッと消すことにした。
時代はスマートフォンだしね(スマートフォン向けにまでは CSS 修正していないから、まだまだ最適化されていないけど)。
あと昔貼った Facebook ソーシャルプラグインの挙動が変になってきたので、HTML5 用の新しいのに変えた。多少ましになったかな。
時代とともに仕様もデバイスもトレンドも変わっていってしまうから、長く継続していくにシンプルにしてメンテナンスコストを抑えよう。
この 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 版も作っておける。
Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。
nDiki は1999年1月に始めたコンピュータ日誌を前身とする Naney の Web 日記(兼パーソナルナレッジベース)です。
#nNote タグがついている記事は他の記事に比べて、より断片的・未整理・不完全なちょっとしたノートです。まだ結論に至っていない考えなども含まれます。頻繁/大幅に更新したり削除したりすることがあります。
ナレッジベースアプリケーション Obsidian で書いているノートの一部を notes.naney.org で 公開しています。
※内容は個人的見解であり所属組織とは関係ありません。