WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

DokuWiki を使ってみる

前回の DokuWiki の記事では、インストール方法ですべてを費やしてしまったために、実際の使用感などがまったく書けませんでした。今回はそのあたりの補足ということで、DokuWiki の特徴的な機能などをご紹介しようと思います。

なかなかよくできてますよ!(^^)

通常の Wiki 文法をチェック

前回は以下のトップページを表示させたところで終わってしまいました。

この画面を見ると、まだトップページすら作成されていないことがわかります。まずはトップページを作成して、内容を編集してみましょう。左上にある「文書の作成」ボタンをクリックすると、以下のような編集画面になります。

テキストボックスの上にあるアイコンで、代表的な Wiki 文法が入力できます。より詳細な Wiki 文法は、ページの上部の説明文書の中の「syntax」というリンクで表示できます。それでは、ためしに以下のような文章を入力して「保存」ボタンを押してみてください。

====== ようこそ! ======

===== 文字属性 =====

DokuWiki のマークアップはけっこう豊富です。
**太字**や//斜体//、__アンダーライン__ に''固定幅フォント''。
<sup>上付き文字</sup>や<sub>下付き文字</sub>、<del>打ち消し線</del>も使えます。
顔文字=)や記号∀もメニューから選択するだけ。((注釈はマウスオーバーでも表示されます))

===== リストなど =====

  - 番号付きリスト
    - 番号付きリスト

  * 番号なしリスト
    * 番号なしリスト

  いわゆる pre タグ。

> 引用は
>> ネストできます。

===== テーブル =====

^ テーブルの ^ 書式は   ^ こんな感じ。^
|左寄せ      | 中央     |      右寄せ|
^ どこでも   | ヘッダに ^ できます。  |

ページの表示はこのような感じになるはずです。

テーブルの書式は私がこれまで見た中でもっとも柔軟でわかりやすいです。それ以外の書式も表現力と記述のしやすさを兼ね備えたものになっていますね。Wiki としての基本部分はかなり優れていると思います。

また、ページの右上に目次が表示されているのに気付かれたでしょうか。DokuWiki はこのような目次を自動的に生成してくれます。邪魔にならないようにフローティングで表示してくれる上に、右上の▲をクリックすると非表示になります。なかなかの演出です。

さらに、セクションごとに表示されている「編集」ボタンをクリックすれば、そのセクションのみを編集できます。長いページを編集するときに非常に便利です。

画像の表示

画像などのファイルのアップロードは、編集画面に並んでいるアイコンの右から 3 番目、額に入った絵画のアイコン(?)で行います。アイコンをクリックするとアップロード用のフォームがポップアップするので、そこからアップロードできます。アップロードが完了するとそのアイコンのサムネイルが表示されます。

あとはサムネイルをクリックするだけで、その画像を表示するための Wiki 文法が編集画面に挿入されます。DokuWiki では、画像をサーバーサイドで拡大・縮小して表示する機能があります。ブラウザ側で処理する場合と違って、フィルターのかかった高品質の拡大・縮小が可能です。また、テーブルのときと同じような方法で中央寄せ・右寄せも指定できます。

オリジナルイメージ:{{:logo.gif|:logo.gif}}

縦横比を固定してリサイズ{{:logo.gif?300|:logo.gif}}

幅・高さ指定でリサイズ{{:logo.gif?300x30|:logo.gif}}

中央寄せや右寄せもできます。
{{ :logo.gif |:logo.gif}}
{{ :logo.gif|:logo.gif}}

この文章を表示すると以下のようになります。

このおかげでレンタルサーバーでの動作が難しくなっている気もしますが・・・(´ー`;

ソースコードの色分け表示

DokuWiki の最大の特徴であるソースコードの色分け表示機能も使ってみました。"<code 言語名>" というタグでソースコードを囲うと色分け表示が機能します。サポートする言語は・・・

actionscript, actionscript-french, ada, apache, applescript, asm, asp, autoit, bash, blitzbasic, caddcl, cadlisp, c, c_mac, cfm, cpp, csharp, css, delphi, diff, d, div, dos, eiffel, freebasic, gml, html4strict, ini, inno, java, java5, javascript, lisp, lua, matlab, mpasm, mysql, nsis, objc, ocaml, ocaml-brief, oobas, oracle8, pascal, perl, php-brief, php, python, qbasic, scheme, sdlbasic, smarty, sql, tsql, robots, ruby, vb, vbnet, vhdl, visualfoxpro, xml

だそうです。ひと言でいうと「すべて」ですね(^^;;;;

以下は「XMLHttpRequest の使い方」の記事で掲載した JavaScript を表示させてみたところです。綺麗に色分け表示されているのがお分かりいただけるかと思います。

コードがページに入りきっていないのでいまいちな表示になっていますが、このあたりは CSS の設定次第です。各キーワードの色も CSS でカスタマイズできます。単純に span タグでクラスを指定しているだけなので、DokuWiki で文章を作成して HTML ソースを blog に貼り付ける、なんて使い方も可能だと思います。

ということで、今回は DokuWiki の基本機能をご紹介しました。Wiki としてのベースがかなりよくできている印象で、とても使いやすい Wiki になっていると思います。livedoor Wiki も見習ってほしいなぁ・・・(^^;

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles