DokuWiki で blog 記事を書こう！
先日から DokuWiki で blog 記事を書いています。単に DokuWiki でページを書いて HTML をコピー＆ペーストしているだけなのですが、これが思いのほか（゜∀゜）イイ！！なにがいいって、まず軽快に動くのがいい（笑）。自分専用のサーバーだから当然ではありますが、文章を保存するのにためらわなくていいなんて素晴らしすぎます（つ∀｀；）。livedoor blog がサクサク動く blog というのであれば、ローカルの DokuWiki は
サクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサクサク。。。
というところですか。その他にも、文書の変更履歴が残りますし、表現力も livedoor blog の Wiki 文法より高まります。さらに心配していた livedoor Wiki のページへのリンクも InterWiki で簡単に張れることがわかりました。まさにいいことづくめですね。なんでこの方法にもっと早く気付かなかったのか。そんなわけで、本日は DokuWiki で livedoor blog の記事を書く方法をご紹介したいと思います。
作業手順
作業手順と言っても、基本的には前述のとおり DokuWiki で普通にページを作成して、その HTML を livedoor blog の編集画面にコピー＆ペーストするだけです。参考までに、私がやっている手順を以下に書き出しておきます。
- まず、livedoor blog 側で記事を下書き状態で作成しておきます。記事の ID を固定するためです。
- DokuWiki のトップページを編集し、"blog:idxxxxxxxx" という名前でページへのリンクを設置します。"xxxxxxxx" は先ほど作成した下書き記事の ID です。
- 上記のリンクをクリックします。「このトピックには文書が存在しません」と表示されるはずなので、「文書の作成」ボタンをクリックしてページを新規作成します。
- 文書の先頭には記事のタイトルを見出し 1 で記入します。後述の useheading の設定によりタイトルをリンクテキストとして使用するためです。
- あとは普通に記事内容を入力します。
- 記事の URL に "do=export_xhtmlbody" という CGI パラメータを付加してページを表示します。すると、余計なボタンなどのインターフェースを省いたページが表示されます。
- そのページのソースを表示させ、必要な部分をクリップボードにコピーします。
- livedoor blog の管理ページで、先ほど作成した下書き記事に HTML をペーストします。
- 記事全体を <div class="dokuwiki"> で囲みます（CSS 設定を調整するため）。
- プレビューで確認した後、投稿！
ページ名に livedoor blog の記事 ID を含めることで対応を取っている点、 "do=export_xhtmlbody" の機能でセクションごとの編集ボタンなどを削除している点などがポイントでしょうか。もちろんこれにこだわる必要はないので、やりやすい方法を模索してみてください！（＾＾）
オススメ設定
DokuWiki は標準の状態でもじゅうぶんに使えますが、少し設定をいじるとより使いやすい状態になります。ここでは、私が使用している設定をいくつかご紹介します。
userheading
前述のように、私はページ名を "id" + 記事 ID に統一しています。これは livedoor blog の記事との対応が取りやすい点では便利なのですが、ページ名から記事の内容を類推することが難しい（というか不可能＾＾；）という欠点があります。しかし、DokuWiki には「ページの先頭に見出し１があった場合、その内容をリンクテキストとして使う」という便利な機能があります。この機能を有効にすれば、リンクテキストの文字列は自由に設定できます。日本語も使用可能です。今回の用途にはまさにうってつけの設定ですね。
設定方法は、 "conf/local.php" に以下の 1 行を追加するだけです。
$conf['useheading'] = 1;
後は、各記事の先頭に見出し 1 で記事のタイトルを記述すれば OK です。もちろん、この見出しは blog にコピーする内容には含めません。
HTML の使用
Wiki 文法は便利なのですが、JavaScript を記述できないなど不自由な点も多々あります。Wiki 文法の中に HTML を含めることができたら便利だと思いませんか？ DokuWiki はそんな要望にもきちんと応えてくれます。 "<html>" タグを使用することで、以下のように生の HTML を Wiki 文法といっしょに使用できます。
<html>
<script type="text/javascript">
function ShowAlert(text) {
alert(text);
}
</script>
</html>
* <html><a href="javascript:ShowAlert('Hello!');">"Hello!" と表示します。</a></html>
* <html><a href="javascript:ShowAlert('Bye!');">"Bye!" と表示します。</a></html>
上記のコードをそのまま記述すると以下のようになります。
ただし、この機能はデフォルトでは無効になっていますので、利用する際には "conf/local.php" に以下の 1 行を追加する必要があります。
$conf['htmlok'] = 1;
パターン置換の禁止
標準では 二重引用符 "〜" が自動的に“”に変換されるという機能があります。ただ、この機能は前後に空白があるかどうかで“と”のどちらを使うかを判断するので、空白をあまり空けない日本語の文章では微妙に使いづらいところがあります。この機能を無効にしたいときは、"conf/local.php" に以下の行を追加します。
$conf['typography'] = 0;
なお、この設定をしても "conf/entities.conf" に記述した変換は有効なようです。これは仕様なのか、バグなのか・・・？
livedoor Wiki へのリンク
DokuWiki を使用して書いているこの記事でも、livedoor Wiki のページへのリンクを大量に埋め込んでいることがお分かりいただけると思います。こんなこと、いちいち URL でリンクを記述していたらやってられません（＾＾；。DokuWiki には "InterWiki" という外部の Wiki サイトなどへのリンクを簡単に挿入する機能があります。これを利用すると、内部の Wiki ページとほぼ同等の感覚で外部の Wiki ページや検索サイトなどにリンクを張ることができます。例えば、 "[[wp>DokuWiki]]" と記述すると DokuWiki となりますし、 "[[Google>DokuWiki]]" なら DokuWiki となります。
このリンク先サイトはユーザー側で追加することもできます。例えば私の場合、"conf/interwiki.local.conf" というファイルを作成し（デフォルトでは存在しません）、以下の内容を記述しています。
lw http://wiki.livedoor.jp/sourcewalker/d/
lb http://blog.livedoor.jp/sourcewalker/archives/{NAME}.html
こうすることで、 "[[lw>GentooLinux]]" と記述すれば Wiki の Gentoo Linux のページにリンクできますし、 "[[lb>50652680|DokuWiki のインストール]]" なら blog の DokuWiki のインストール の記事にリンクできます。これなら、livedoor blog 上で Wiki 文法を使っているときとほぼ同等の手間で Wiki の各ページへのリンクを記述できますね（＾＾）
ただ、残念ながら日本語のページ名に対しては正しくリンクできません。DokuWiki が UTF-8 ベースなのに対して、livedoor Wiki が EUC なのが原因でしょう。仕方ないので、そこだけは URL 指定でリンクしています。いまさら EUC ってのもどうかと思いますが、livedoor blog が EUC だからそれに合わせざるをえなかったんでしょうね。過去のしがらみとは厄介なものよ（´ー｀；。
その他のコツ
設定項目以外でも、DokuWiki で livedoor blog の記事を書く際に注意すべきことがいくつかあります。最後にそれらをご紹介します。DokuWiki と livedoor blog の差異を力技で回避しているものが多いですが、なかにはプラグインで解決できるものもあるかもしれません。DokuWiki はプラグインで Wiki 文法自体を拡張できるらしいのです。それらに関しては後々チェックしようと思っていますが、差し当たりは標準状態でできる範囲ということで、ご了承ください m(_ _)m
特殊文字の使用
livedoor Wiki では実体参照を使用して Wiki 文法で使用している特殊文字を文書中に含めることができましたが、DokuWiki ではこの方法は使えないようです。本来は "conf/entities.conf" にシーケンスを記述して回避するのが正しいのかもしれませんが、面倒くさいので私は "<html>〜</html>" で囲うことで回避しています。
面倒くさいので私は "<html><html>〜</html></html>" で囲うことで回避しています。
という感じですね（＾＾；
画像の表示
DokuWiki は画像を表示する際、サーバー側で画像を取得してリサイズした後に表示するようになっています。つまり、Wiki 文法で画像を表示すると、それが外部サーバーにある画像だったとしても常に DokuWiki サーバーの URL になるわけです。これは HTML を別サーバーに移すにはちと都合が悪いですね。この挙動は変更できないようなので、ここでも "<html>〜</html>" を使って逃げることにしました。<img> タグをそのまま記述するわけですね。
Wiki 文法で見たときの可読性がかなり悪くなるのが難点ですが、livedoor blog の「アップロードした画像から選択」で生成した HTML がそのまま使えるという利点はあります。画像なんてそんなに頻繁に貼るわけではないので、我慢するしかないみたいですね。
スタイルシート
livedoor Wiki は blog と同じ感覚で使えるようにとの配慮からか、改行をそのまま <br> タグに変換します。これは Wiki としてはけっこう特殊な仕様でして、一般的な Wiki は改行を無視し、空行を区切りとして <p> で囲います。DokuWiki はもちろん後者なので、livedoor Wiki と同じ CSS 設定を利用するのは無理があります。
そこで、livedoor blog に HTML をコピーする前に記事全体を "<div class="dokuwiki">" で囲うようにして、CSS 設定を分けられるようにします。その上で、dokuwiki クラス内のみに適用される専用のスタイル設定を記述しておきます。私の場合、以下のスタイルを設定しています。
/* DokuWiki styles */ div.dokuwiki { margin-top: -1em; _margin-top: 0em; } div.dokuwiki h1 { margin: 1.5em 0em 1em 0em; } div.dokuwiki h2, div.dokuwiki h3 { margin: 1em 0em 1em 0em; } div.dokuwiki p { margin-top: 0em; margin-bottom: 1em; } div.dokuwiki ol, div.dokuwiki ul { margin: 1em 0px 1em 32px; } div.dokuwiki dl { margin: 1em 0px 1em 12px; } div.dokuwiki blockquote, div.dokuwiki pre { margin: 1.5em 10px; } /* syntax highlighting code */ .code .br0 { color: #66cc66; } .code .co1 { color: #808080; font-style: italic; } .code .co2 { color: #808080; font-style: italic; } .code .coMULTI { color: #808080; font-style: italic; } .code .es0 { color: #000099; font-weight: bold; } .code .kw1 { color: #b1b100; } .code .kw2 { color: #000000; font-weight: bold; } .code .kw3 { color: #000066; } .code .kw4 { color: #993333; } .code .kw5 { color: #0000ff; } .code .me0 { color: #006600; } .code .nu0 { color: #cc66cc; } .code .re0 { color: #0000ff; } .code .re1 { color: #0000ff; } .code .re2 { color: #0000ff; } .code .re4 { color: #009999; } .code .sc0 { color: #00bbdd; } .code .sc1 { color: #ddbb00; } .code .sc2 { color: #009900; } .code .st0 { color: #ff0000; }
ちなみに、後半に並んでいる多数の ".code 〜" の行はソースコードの色分け機能に使用されるクラスです。ここを変更することで色分けをカスタマイズできるようです。とりあえず標準のスタイルシートからコピーしたものを使っていますが（＾＾ゞ、少し読みにくいものもあるので、折を見てカスタマイズしようかと思っています。
以上、本日は DokuWiki で blog 記事を書く方法をご紹介しました。livedoor blog で直接書いていたときに比べて、操作性・表現力ともに大幅にアップしています。あまりにも書きやすいので、ついつい長い記事になってしまうのが悩みの種ですが・・・（＾＾；。DokuWiki はその気になれば Windows 上でも動作するようなので（Win32 の Apache と PHP が必要）、サーバーがなくても利用できます。とくにマークアップを活用した長めの文章を書きたい方は、ぜひお試しください！
- 追記(2007/1/29)
- Scratch Source さんのこちらの記事において、 WordPress に DokuWiki で書いた記事を投稿した例が紹介されています。私の記事よりもずっと DokuWiki っぽいですし、リンクにアイコンを表示するための CSS 設定なども記載されていて参考になります。ぜひご参照ください。
詳しくはこちらの記事をどうぞ！
この記事にコメントする