トップ 一覧 Farm 検索 ヘルプ RSS ログイン 印刷

FreeStyleWiki 入門2の変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
{{category 入門}}
!目次
{{outline}}
!!!FreeStyleWiki を使ってみる

 一応、インストール直後を想定して使っていきたいと思います。「wiki とは」とご託を並べられても、実際にいじってみないと実体を掴むことは難しいと思います。あれこれやってみて、ああそんなものか、と実感してみてください。

!!FrontPage の編集

 最初 wiki 上には「FrontPage」という名前の一つのページしかありません(正確にはシステムが用意するHELPページなどがありますが)。インストール直後は、

 FreeStyle Wiki
 FreeStyle WikiはPerlによるWikiクローンです。以下のような特徴があります。
 ………

のような「FreeStyleWiki」を紹介する記述になっています。
 まずはこのページを編集してみましょう。

!ページの編集

 wiki の各ページの最上部には大抵システムとしてのメニューがあります。FreeStyleWiki においては
 トップ  新規  編集  差分  一覧  Farm  ソース  検索  ヘルプ  PDF  RSS  ログイン
などとなっています。このメニューの数もシステムとして許可しているか・いないのか、プラグインのインストールの有無などで変わります。
 一番太っ腹なシステムはログインなど必要とせず、誰でも自由にすることができるシステムです。wikipedia はかなりそれに近い状態で、誰でもどのページも編集でき、新規ページを作成することができます。しかし、wiki スパムと言って、アダルトサイトを始めとする広告を勝手に書いていかれてしまう場合もあるので、「ログインユーザのみ編集可能」にするのが普通です。場合によっては閲覧すらログインユーザにしか許可しないこともあり、あとで述べますが設定で変更できます。

 さて、上部メニューの「編集」をクリックすることでページを編集する画面に移ります。
 「FrontPageの編集」という画面になります。以下画面イメージです。

{{ref_image FrontPageno.gif}}
'''編集画面'''

 HTMLで作られたページのソースと違い、ほとんど表示されているテキストがそのままであることがわかると思います。適当に文章を変えたり、付け加えたりしてテキストボックス下の「保存」ボタンをクリックすることで、ページを書き換えることができることを確認してみましょう。最初のこのページはサンプルの文章なのでサイトの目的に沿って書き直していきます。
 さてその中で、行頭に「!!!」や「*」という記号、また行の中で[…………]となっている部分があります。これが「wiki文法」に沿った記述です。
 行頭の「!!!」は、続く文字列(改行まで)が大見出しであることを示しています。ここでは「FreeStyle Wiki」という文字列を'''大見出し'''にする、という意味です。このように記述することで、出力されるHTMLは
 <h2>FreeStyle Wiki</h2>
となります。(<h1>…………</h1>は右上に表示される'''ページ名'''です)
 同様にして、
*「!!」は'''中見出し'''
**(出力されるHTMLは<h3>…………</h3>)
*「!」は'''小見出し'''
**(出力されるHTMLは<h4>…………</h4>)
になります。また、
*「*」は'''リスト'''
**(<ul>…………</ul>と<li>…………</li>)
*[…………]で括られている部分は、wiki サイト内や外部への'''リンク'''
**(<a href="〜">…………</a>)
になります。詳しくは後述します。

 さて、ここでHTMLやプログラミングに慣れている方はいくつかの疑問点が生じると思います。
+「!」から始まる文字列を見出しにしたい場合どうするの?
+見出しの途中で改行が含まれるようなものはどうするの?
+見出しにしたくない文章の先頭が「!」で始まるときにどうするの?
答えは、'''すべてできません'''。
 プログラミングで命令の文字そのものを表示させたいときにはエスケープするような記述方法がありますが、wiki には'''ない'''と思ってください。HTMLをバリバリ直接書いていた人にとってはかなり窮屈な制限です。しかし、このように制限を掛けることで、記述を簡単にしているところが wiki の良さなのです。

※余談ですが、使い慣れてくるとこの編集画面をもう少し大きくしたいと思うこともあると思います。後述するスタイル設定画面で「textarea{width:800px;height:400px;}」等の設定をする、あるいは Firefox であれば、「Resizeable Textarea」プラグインをインストールすることでドラッグして広げることができます。

!通常の文章は<p>……</p>

 wiki 文法の記号がなにもない通常の文章は、空行があるところまでを自動的に「段落」と見なされ、<p>……</p>で括られます。改行を入れるかどうかは設定で変更します。管理者でログインしている状態で、上部メニュー「ログイン」から「環境設定」をクリックし、「改行の処理」のメニューで「無視する」、「BRタグに変換する」のどちらかを選択します。これもページごとに設定を変えることは'''できません'''。 全体として「無視をする」か、全体として「BRタグに変換する」かです。

!!新規ページの作成

 まったく新しいページを作る場合は、上部メニューの「新規」をクリックします。「新規作成」という画面になります。枠に適当なページ名を入れて「作成」ボタンをクリックすると、新規ページの編集画面になります。試しに「テストページ」という文字を入力して「作成」ボタンをクリックしてみましょう。
 「テストページの編集」という画面になり、テキストボックスが真っ白な状態になります。ここに「あ」とでも入力して保存をすると、「あ」という文字が一文字だけの新しいページができあがります。

{{ref_image FreeStyleWiki_A.gif}}
'''「あ」だけ記述された「テストページ」'''

 ここで「FrontPageへ」という文字を記述して保存してみましょう。上部メニュー「編集」をクリックして再び編集画面に戻り、半角で、
 FrontPageへ
と記述して(FとPだけ大文字、後は小文字です)保存します。

 すると「FrontPage」の文字列にリンクが自動的に付いたと思います。これが「自動リンク機能」です。文書中に wikiサイト内のページ名と同じ単語があったとき、自動的に wiki 内のそのページへのリンクとなります。「はてなブログ」が「はてなキーワード」に自動的にリンクされるのと似ています。wiki が、「ある専門分野用語の解説集」であることが多いことを考えると、用語に自動的にリンクが張られるのは理にかなっていると言えます。
 すると「FrontPage」の文字列にリンクが自動的に付いたと思います。これが「自動リンク機能」です。文書中に wikiサイト内のページ名と同じ単語があったとき、自動的に wiki 内のそのページへのリンクとなります。「はてなダイアリー」が「はてなキーワード」に自動的にリンクされるのと似ています。wiki が、「ある専門分野用語の解説集」であることが多いことを考えると、用語に自動的にリンクが張られるのは理にかなっていると言えます。

{{ref_image FreeStyleWiki_autolink.gif}}
'''FrontPageへ自動リンクされた'''

 ページの自動リンクは、ログイン−環境設定から変更できます。上手に使うと便利な機能なので、「自動でリンクする」のままでいいと思います。
 ただし、文書中に何度も出てくる用語についていちいちリンクになったり、意図しない部分でリンクになることがあり、煩わしい場合もあります。また、表示するたびにシステムが文書中の単語をチェックしてリンクにするので、ページ数が多い wiki や、アクセスが多いサイトの場合、システム全体のパフォーマンスが落ちる場合もあります。その場合は自動でのリンクをしないことも検討しても良いかも知れません。

!!ページの更新と削除

 ページの更新は、上部メニューの「編集」を押せばいつでも編集画面に移ることができます。「編集」のリンクは編集権限を持っているユーザにだけ表示されます。内容の追加や削除を行った後に保存すれば即座に内容が更新されます。

 wiki の利点であり欠点である部分は、更新した結果がきれいに整理されることです。ページを一見しただけでは、どこが更新されたのかがわかりません。ページの更新後に、上部メニューの「差分」をクリックすると、追加された行は「__ここが追加されました__」のようにアンダーラインで表示されます。また削除された行は「==ここが削除されました==」のように打ち消し線で表示されます。変更を元に戻すにはこの差分表示の時に下に現れる「このバージョンに戻す」のボタンをクリックすることで戻すことができます。

 ただし、戻せるのは一つ前までです。wikipedia 等は変更履歴を50回まで記録されているなど、不用意な変更を戻せるようになっています。標準のFreeStyleWikiでは、一度しかアンドゥができないので、「あ、今間違えて保存しちゃった」というときぐらいでしょう。もう一度差分を表示するとアンドゥのリドゥしかでません。
※設置者ならば複数回分のバックアップを取る設定に変更できます。後述します。

 ページを削除するのは簡単です。
 削除したいページを表示して、
+上部メニューの「編集」
+編集画面でテキストボックス内をクリック
+キーボードの「Ctrl」+「a」で全選択
+キーボードの「Delete」キーで削除
+「保存」ボタンをクリック
 これで削除できます。つまり内容が空のページはページ自体が無くなります。ページを残したい場合は一文字でも残す必要があります。
 一度削除したページを元に戻す方法は'''ありません'''。削除は慎重に行ってください。ページがたくさんあっても、それほど困ることはありませんので、本当にいらないことが判るまでそのままにしていても良い場合が殆どだと思います。

 また、管理者であれば、「ページ管理」から複数ページを一括で削除することができます。

!!各種の文書構造や装飾

 適当なメモページとして使っても十分役に立つのですが、一応他人に見せることを考えて使おうと考えると、重要になってくるのが「'''情報の構造化'''」です。文章の構造、項目の階層、そういったものを意識して記述することです。この構造がきちんとされたものは、wiki に載せた文書として価値が高まります(後でわかりますが、これはもちろん自分にも役に立ちます)。

 そこでここでは、ページを記述するに当たっての各種の文書構造や簡単な装飾について述べます。上部メニューの「ヘルプ」にそって解説していきます。

!ページタイトル

 新規ページを作る時に指定したページ名がページタイトルになります。ページ内においては最上部の小さいメニューの文字の下に大きな文字で右寄せで表示されます。<h1>に相当します。また、<title>にもなり、ブラウザのタイトルバーに「ページ名 - サイト名」のように表示されます。サイト名については [[FreeStyleWiki 入門3]]を参照してください。

!見出し

 記述する行の先頭を!ではじめると見出しになります。これは「FrontPage の編集」のところで述べたとおりです。見出しは3レベルあります。

 !!!大見出し
 !!中見出し
 !小見出し

 それぞれ<h2>,<h3>,<h4>に相当します。<h1>は文章のタイトル(ページ名と同じ)として右上に表示されるのに使われています。やや長めな文章をきちんと見だしを付けて構造化しておくと、outlineプラグインを使ったときに、きれいなページ内目次ができあがります。またGoogle を始めとする検索エンジンに適切なキーワードを拾ってもらえるので SEO対策にもなります。<h5>,<h6>などは使っていません(使えません)。

*[[wikiページ作成練習01]]
*[[wikiページ作成練習02]]

!テキスト装飾

 シングルクォート2つで囲むと''イタリック''になります。
シングルクォート2つで囲むと''イタリック''になります。
 シングルクォート3つで囲むと'''ボールド'''になります。
シングルクォート3つで囲むと'''ボールド'''になります。
 これは==打ち消し線==です。イコールが2つです。
これは==打ち消し線==です。イコールが2つです。
 これは__下線__です。アンダーバーが2つです。
これは__下線__です。アンダーバーが2つです。

!引用

 行頭をダブルクオート「"」2つで始めると引用<blockquote>になります。default スタイルでは、□で括られ、イタリックになります。整形済みテキストと表示が似ています。もちろんHTMLレベルで違いますが(整形済みテキストは<pre>)、表示としてイタリックになる以外に、右端も若干インデントされています。

 ""これは引用です。
""これは引用です。

!説明

 行頭をセミコロン「:」で始め、項目名、続いて再びセミコロン「:」を書いて説明文を書くと<dl>,<dt>,<dd>を使った説明文(定義文)になります。

 :項目:説明文
:項目:説明文

 項目に対して説明文が長く、複数行に分けたいときや「http://〜」のように項目名の中に「:」が含まれるような場合のためにセミコロン二つとセミコロン三つを使った書き方もあります。ただし、改行することはできません。複数行に分けても接続されます。

 ::項目
 :::説明文は複数行にわけて書くこともできます。
 :::こんな感じで。

::項目
:::説明文は複数行にわけて書くこともできます。
:::こんな感じで。

!リスト

 行頭を*ではじめると改行までが一項目のリストになります。<ul><li>に相当します。リストは*の個数に応じて3段階までネストすることができます。「改行を含めた一項目」というものを作ることは'''できません'''。

 *項目1
 **項目1-1
 **項目1-2
 ***項目1-2-1
 *項目2
 **項目2-1

*項目1
**項目1-1
**項目1-2
***項目1-2-1
*項目2
**項目2-1

 行頭を+ではじめると番号付きリストになります。<ol><li>に相当します。

 +番号付き項目1
 ++番号付き項目1-1
 +番号付き項目2
 +番号付き項目3

+番号付き項目1
++番号付き項目1-1
+番号付き項目2
+番号付き項目3

 番号無しのリストと番号付きのリストを混合させるとどうなるでしょうか。

 同じレベルでは混合することは'''できません'''が、レベルが異なれば混合できます。その時もあわせて3段階が限界です。4段階目を作ろうとすると最後の*や+は項目の文字列の一部として扱われます。また同レベルで*と+が混在する場合、先にあった方の項目になります。以下の例「番号付き項目1-2-3-1?」や「項目1-2-1?」、「番号付き項目1?」を参考にしてください。

 また、リストは行間を空けると別なリストとして扱われるので、リスト前後に行間が空いたり、番号付きリストでは数字がリセットされ1からになります。

 *項目1
 **項目1-1
 **項目1-2
 +++番号付き項目1-2-1
 +++番号付き項目1-2-2
 +++番号付き項目1-2-3
 ++++番号付き項目1-2-3-1?
 ++++番号付き項目1-2-3-2?
 ***項目1-2-1?
 *項目2
 **項目2-1
 +番号付き項目1?
*項目1
**項目1-1
**項目1-2
+++番号付き項目1-2-1
+++番号付き項目1-2-2
+++番号付き項目1-2-3
++++番号付き項目1-2-3-1?
++++番号付き項目1-2-3-2?
***項目1-2-1?
*項目2
**項目2-1
+番号付き項目1?

!テーブル

 CSVはテーブルになります。行頭を「,」で始めると、「,」と「,」の間が一つのセルとして扱われます。<table><tr><td>に変換されます。また、1行目は自動的にヘッダになります。<th>に相当します。セル結合をするcolsやrowsなどは標準では'''ありません'''(プラグインを使えば表現できますが詳しくは後述します)。

 ,1-1,1-2,1-3
 ,2-1,2-2,2-3

,1-1,1-2,1-3
,2-1,2-2,2-3

*[[wikiページ作成練習03]]

※FreeStyleWiki とは全く関係ない余談ですが、IE で表をドラッグ、コピーをしてExcelに貼り付けるとセルがそのままの状態でコピーされますが、Firefox では単なるタブ区切りとなって一つのセルにすべて貼り付いてしまいます。これを解消するFirefoxプラグインとして「Table2Clipboard」があります。お試し下さい。


!整形済テキスト

 行頭を半角スペースまたはタブではじめると整形済テキストとして扱われます。<pre>に相当します。default スタイルでは□で囲まれます。意味無く□が出てきたら、行頭の半角スペースを疑いましょう。中身は等幅フォントで表示されます。

 これは整形済テキストです。
 入力したとおりに表示されます。

*[[wikiページ作成練習05]]

!水平線

 ページをバッサリ分断してしまう水平線は最近余り使われていませんが、行頭に----と書くと(ハイフン4つ)水平線になります。<hr>に相当します。

 ----
----

!コメント

 行頭を//ではじめるとその行は改行まですべてコメントとみなされます。コメント行は一切出力されません。編集できる者どうしの覚え書き用に使ったり、2パターンの表示を予め//で用意しておき、ギリギリに片方の//を削除することで表示させる場合などに使います。

 //!!!今日の体育祭は雨のため中止にします
 //!!!今日の体育祭は決行します

のように用意しておき、当日の朝、決行が決まった段階で2行目の//を取り除く。

//!!!今日の体育祭は雨のため中止にします
{{ref_image 今日の体育祭.png}}

!センタリング(中央揃え)、右寄せ(右揃え)はできない

 ここまで読んで、「あれ?センタリングがなかなか出てこないな」と思われた方も多いと思います。FreeStyleWiki において標準ではセンタリングや右寄せは'''できません'''。
 どうしてもセンタリングや右寄せをしたい場合は、装飾プラグインをインストールしましょう。

!!さまざまなリンク

 リンクの方法はいくつかあります。文書中単純に「http://〜」で始めたURLはそのままリンクになります。

 http://www.yahoo.co.jp/
http://www.yahoo.co.jp/

 リンクしたい文字列とリンク先URLを指定したい場合は[…………]と「|」(パイプ。Shiftキーを押しながら\)を使って次のように書きます。

 [Google|http://www.google.co.jp/]
[Google|http://www.google.co.jp/]

 wiki 内のページに自動リンクを使わずに指定する場合は「[」を二重にしてページ名を囲みます。

 [[FrontPage]]
[[FrontPage]]

 wiki 内のページであってもリンクしたい文字列をページ名とは異なる文字列にしたい場合「|」を使います。

 [[トップ|FrontPage]]
[[トップ|FrontPage]]

*[[wikiページ作成練習04]]


!その他

 InterWiki,Keyword については後述します。


!!どうしても見栄えにこだわる場合は

 どうしてもHTML的に見栄えにこだわる場合は、公式サイト(http://fswiki.org/)のプラグイン投稿から、
*BugTrack-plugin-160 - 装飾用HTMLタグプラグイン
**http://fswiki.org/wiki.cgi?page=BugTrack-plugin%2F160
**http://fswiki.org/wiki.pl?page=BugTrack-plugin%2F160

をダウンロードしてインストールして使ってみてください。ただ、wiki の使い方としてはかなり逸脱した使用法であると思います。

!!スタイルシートを少しいじる

 FreeStyleWiki において、インストール直後のサイトテンプレート、テーマにおいては共に「default」というスタイルが適用されています。管理者でログインした状態で上部メニュー「ログイン」をクリック、「スタイル設定」をクリックすることで確認できます。
*ページタイトルは右寄せ、背景白
*大見出しは、背景色はうすい水色、……
などと指定されています。部分的に変更したい場合は、「スタイル設定」の中の「ユーザ定義スタイル」で指定できます。スタイルシートの知識が必要です。

 例えば、標準で段落の先頭は必ず一文字弱の字下げが指定されています。字下げは全角スペースを入れることで自分で決めたい場合、スタイル設定の最後に
 div.body p {
   text-indent   : 0px;
 }
を追加して、default で設定されている字下げを無効することができます。
 ここでの設定は全てのページに適用されます。


[[FreeStyleWiki 入門3]]へ