タヌキのお散歩
タヌキのお散歩

FSWIKIをタヌキ好みに

現在人来訪中
トップ 差分 一覧 ソース 検索 ヘルプ RSS ログイン 印刷

はじめに

FSWIKIをタヌキ好みにカスタマイズしていきますので、その過程をご覧になり皆さんもぜひ、FSWIKIを使って見てはいかがですか?

インストール

インストールは、当該ホームページをご覧になって、進めてください。
http://fswiki.poi.jp/wiki.cgi/docs?page=readme -> http://fswiki.sourceforge.jp/cgi-bin/wiki.cgi
ただし、次の打ち消し以外の部分だけで結構です。

  • サーバへの設置
  • setup.datの設定
  • セキュリティ
  • バージョンアップ時の設置方法
  • データのバックアップ方法
  • mod_perlで使用する場合

タヌキの場合、一旦自分のパソコン上で動かして、ある程度形になったら、プロバイダーのホームページにアップロードするつもりです。(暫くはWindowsXP上で運用します。)
ただし、このFSWIKIは、CGIで作成されているため、ご覧のネットウォッチャーの方は、このCGIが動作する環境のパソコン等にコピーまたは始めからアップロードする必要がございます。
タヌキの環境

  • ANhttpd(フリーWEBサーバー 98,ME,2000/XP)いまは、04webserverを使用
  • 04webserver(フリーWEBサーバー for 2000/XP)
  • activeperl(アクティブパール)

では、これだけで、Wikiが動作しましたよ。ここ参照

インストールが終わり、FSWIKIのファイル構造を見ると、次のようになっています。

はじめに、実際に基本のまま、動作するか?次の部分を編集して実行します。

  • wiki.cgiの先頭部分 #!/usr/bin/perl を #!/usr/local/bin/perl に変更します。
  • このWIKIのディレクトリ名wiki3_5_8 を wiki に変名します。

動作確認

ブラウザーを立ち上げて、http://localhost/cgi-bin/wiki/wiki.cgi へアクセスします。
またREADMEもみましょう http://localhost/cgi-bin/wiki/docs/readme.html へアクセスします。
localhostは、各自のドメイン名に変えて行ってください、自分のパソコン内ならlocalhost になります。「ここでは、setup.batを使用してません」

実行すると次のようなエラーが帰ってきました。

Software error
No such file or directory: ./log at lib/CGI2.pm line 33.
これは、ログを記録して保存するディレクトリがないことがメッセージから伺えます。
ですから log ディレクトリを作成してもう一度先ほどのURLへアクセスしてください。
こんどは、WIKIの最初のページが表示されます。

先ほどのディレクトリー構造を確認すると、作成したLOGディレクトリのほかいくつか増えているのが見えるでしょう。

補足 エラー
[Sun Jun 26 18:28:17 2005] wiki.cgi: at lib/Wiki/DefaultStorage.pm line 99.

これは、ページ編集を行うと前のデータのBACKUPを保存するディレクトリが無いために表示されます。 ディレクトリbackup を作成しておいてください。

初期設定

では、まずはじめに管理者用パスワードの変更を行います。右上隅のログインをクリックしてパスワード画面を出して、ID:admin Pass:admin でログインボタンをクリックします。管理メニューが表示されたら、「パスワードの変更」ををクリックして新しいパスワードを設定してください。パスワードを忘れる可能性がある方は、事前に、config\user.datファイルをコピーして変名するなりしておいてください。忘れた場合このファイルをuser.datで戻してあげると、Pass:adminで入れます。

管理メニュー

管理メニューから、「環境設定」をクリックして、次の項目の変更を行ってください。

  1. サイト名 FreeStyleWiki から タヌキのお散歩 に変更(タイトルをつけてください)
  2. 管理者の名前 「たぬき」を入力
  3. 改行の処理 「BRタグに変換する」にチェックする。
  4. ページの作成・編集 「ログインユーザーのみ可能」にチェックする。
  5. パート編集モード 「パート編集モードを有効にする」にチェックする。

最後に「設定の保存」ボタンをクリックして保存して、メニューに戻るをクリックする。
右上隅の「トップ」をクリックしてはじめの画面に戻りましょう。

セキュリティ

レンタルサーバーなどでHtaccessを設定出来る場合は、この限りではありません。

 <Files ~ "\.(pl|pm|log|out|wiki|dat)$">
   deny from all
 </Files>
 <Files ~ "^\.ht">
   Order deny,allow
   deny from all
 </Files>
 
 DirectoryIndex index.html index.cgi index.php index.shtml .ht
 

さて、つぎにいくつかのディレクトリとsetup.datの変名を行います。ちょとしたセキュリティのために!別に必要ない方は以下のこのセクションは飛ばしてください。

  • ファイル wiki.cgi の内容を編集します。
    • 39行目のsetup.dat を setup.cgi に変更します。
  • ファイル setup.dat を setup.cgi に変名しましょう。
  • ファイル setup.cgi の内容を編集します。
    • data,attach,pdf,tmpl,log,theme,configの各ディレクトリ名を変更してください。

ここでは、次の用に変更しました。後ろにFOOを追加!

  • ディレクトリ名を先ほど変名した名前に変更します。

バックアップを取る場合には、これらの(*-foo)ディレクトリを採ってください。
では、もう一度、トップ画面のURLにアクセスしてください。正常に表示されたらOK!
現在トップ画面の方は、ブラウザーの再表示を行ってください。

このCGI-BINのフォルダーの一覧が公開されないようにしましょう。
04Webserverでは、オプションのEnableIndexを「0」に設定します。  

MENUの作成

右上隅のMenuから、「新規」を選択し、これから作成するページのタイトル名に Menu と半角で正確に入力したください。(頭が大きいMです)作成ボタンをクリックします。
Menuの編集画面が表示されると次の文章を入力して、保存ボタンをクリックします。

1
2
3
4
5
6
7
8
!!!タヌキのお散歩
{{counter2}}
[HOMEページ|http://e-lovers2.hp.infoseek.co.jp]
!!!メニュー
!!!最新
{{recent 15,v}}
!!!人気記事
{{accessdays 8,2}}

左端にMenuが表示されます。

{{counter2}}はプラグインを呼び出していますが、

標準ではこのプラグインは入っていません。

後ほどダウンロードします。

HEADER,FOOTERの作成

MENUを作成したように、正確に Header のページタイトルで作成します。
内容は、ページのアウトラインを表示します。

{{outline}}

のみです。
次に、正確に Footer のページタイトルで作成します。
内容は、脚注リストプラグインと表示中のページの最終更新時間を表示します。

{{footnote_list}}
{{lastmodified}}

です。
結果次のように表示されます。

keywordの作成

キーワードページを作成して、キーワードをここに記入するように努める。
MENUを作成したように、keyword のページタイトルで作成します。
内容は、

*[[HTTPS]]

のように、記入していきます。
はじめは、
HTTPS?のように表示されます。?をクリックすると、HTTPSの編集画面が表示されるので、HTTPSの内容を記述して保存すると、HTTPSキーワードが有効になります。

プラグインのダウンロードと使用許可

プラグインは、次のURLからダウンロードします。
プラグイン投稿
BugTrack-plugin/150をクリックして、表示されるページの最後の行の counter2-rev02.zip を
クリックするとダウンロードできます。

ダウンロードしたファイルを展開して、plugin ディレクトリ内にディレクトリーごとコピーします。

つぎに、管理メニュを呼び出して、プラグイン設定をクリックして、
couner2の項目をチェックして保存します。

つぎにスタイル設定画面でユーザ定義スタイルに下記を追加してください。

p.counter {
  text-align        : center;
}

p.counter span {
  background-color  : #444444;
  color             : #FFFFFF;
  font-weight       : bold;
  border            : ridge 2px;
}

これでMENU上にカウンターが表示されます。

自分好みの色、スタイルに変更

ここからは、好みで色、スタイルを変えていきます。しかし、ここまでのカスタマイズで十分機能すると思いますので、必要でない方はこのセクションは飛ばしてください。

前処理

FSWIKIのデホルト(初期設定)のスタイルを崩さないため、新しいスタイルをデホルトのスタイルからコピーして作成します。デホルトのスタイルの保存している場所は、

wiki\theme-foo\default\

wiki\tmpl-foo\site\default\

defaultディレクトリごとコピーを行い、

ディレクトリ名を任意の名前(foo)に変名します。

また、fooディレクトリの下の

ファイル名 default.css default_handyphon.tmpl default.tmpl を

ファイル名 foo.css foo_handyphon.tmpl foo.tmpl に変名します

必ず作成したディレクトリ名と同じ名前に変名してください

次に、この新しいスタイルをWIKIに認識させるために、管理メニュを呼び出し、スタイル設定をクリックして、サイトテンプレートとテーマの選択BOXから「foo」を選択して、設定を保存ボタンをクリックして保存してください。

エラーなどにより拒否された場合は、変名したファイル名をもう一度確かめてください。

変更処理

ファイルの内容をエディター(編集ソフト)で変更していきます。
foo.cssのファイルについて

BODYの色を変更
body {
background-color: #fafad2; <--変更
color           : #000000;
}
MENUの位置を移動
div.sidebar {
position        : absolute;
top             : 110px;   <--変更
left            : 0px;
width           : 150px;
font-size       : x-small;
padding         : 2pt;
border-right    : #AABBFF 1px solid;
border-bottom   : #AABBFF 1px solid;
color           : #000000;
background-color: #EEEEFF;
word-break      : break-all;
}
h1,h2,h3,h4の背景色の変更
h2 {
background-color : #AABB00;  <--変更
font-family      : Verdana,Arial,Helvetica,sans-serif;
padding-left     : 4pt;
margin-bottom    : 5px;
}

h3 {
border-left   : #AABB00 10px solid;  <--変更
border-top    : #AABB00 5px solid;  <--変更
border-right  : #AABB00 1px solid;  <--変更
border-bottom : #AABB00 1px solid;  <--変更
font-family   : Verdana,Arial,Helvetica,sans-serif;
padding-left  : 3pt;
margin-bottom : 5px;
}

h4 {
border-left   : #AABB00 10px solid;  <--変更
padding-left  : 4px;
font-family   : Verdana,Arial,Helvetica,sans-serif;
padding-left  : 2pt;
margin-bottom : 5px;
}
 
最後の行に追加(タイトルの表示用に使う)
.kagefont1{ position: absolute; left: 24px; top:15px;
  font-size:45px;font-weight:bold;color:#c0c0c0;}
.kagefont2 { position: absolute; left: 20px; top: 15px;
  font-size:45px;font-weight:bold;color:#cc0000;}

次に、foo.tmpl の内容を変更
つぎの内容を

 <body>
  
 <!--TMPL_IF NAME="EXIST_PAGE_Menu"-->
   <div class="main">
 <!--/TMPL_IF-->
 
 <!--TMPL_VAR NAME="MENU"-->
 
 <h1><!--TMPL_VAR NAME="TITLE"--></h1>

つぎに変更します。divの部分を追加、h1の部分とEXIST_PAGE_Menu部分を移動

 <body>
 <div class="kagefont1">タヌキのお散歩</div>
 <div class="kagefont2">タヌキのお散歩</div>
 <h1><!--TMPL_VAR NAME="TITLE"--></h1>
 
 
 <!--TMPL_VAR NAME="MENU"-->

 <!--TMPL_IF NAME="EXIST_PAGE_Menu"-->
   <div class="main">
 <!--/TMPL_IF-->

変更処理2

このステップの処理は、高度のため内容見て修正するのが無理な方は、ご遠慮ください。
この修正は、画像を多く含めたページを表示する場合、WEBサーバーでは、表示画像ごとにCGI処理を率いられ、プロセスPERLがいくつも同時に走ることになり、CPUに大きな負荷をかけるので、直接、画像呼び出しをさせます。ブラウザーIEでは顕著にサーバー側で過負荷になる。(サーバーのメモリーが64MBで昔のCPUMMXでは死活問題)
つまり、CGI呼び出しを

<img src="wiki.cgi?action=ATTACH&page="frontpage"&file="abcde.jpg">

直接画像ファイル指示にします。

<img src="frontpage.abcde.jpg">

実際にその手順は、次のファイルをエディターで開き、

wiki\lib\Wiki\HTMLParser.pm

次の2箇所をコメント(###)して、その下3行を追加してください。(ここからカット&ペースト)

 #==============================================================================
 # イメージ
 #==============================================================================
 sub l_image {
 my $self = shift;
 my $page = shift;
 my $file = shift;
 my $wiki = $self->{wiki};
 
 if($self->{para}==1){
 $self->{html} .= "</p>";
 $self->{para} = 0;
 }
 
 $self->end_list;
 $self->end_verbatim;
 $self->end_table;
 $self->end_quote;
 
 ###$self->{html} .= "<div><img    src=\"".$wiki->config('script_name')."?action=ATTACH&amp;".
 ###                  "page=".&Util::url_encode($page)."&amp;file=".&Util::url_encode($file)."\"></div>";
 
 my $filename =  $wiki->config('attach_dir')."/".&Util::url_encode($page).".".&Util::url_encode($file);
 $filename =~ s/\%/\%25/og;
 $self->{html} .= "<img src=\"$filename\">\n";
 }

注意:保存するときは、EUCコードでファイル保存してください。
なお、この変更処理はPDF出力に、影響はありません。

CSS編集でのクラス構造参考

ADMINMENUについて

トップ 新規 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

このMENUは、READMEに記載されているように、Wikiオブジェクトのadd_menuメソッドです。
形式は、$wiki->add_menu(名称,URL,優先度);であり、
「トップ 新規 編集 差分 一覧 ソース ヘルプ」は、「plugin/core/install.pm」ファイルにコーディングされています。
「PDF」は、プラグインのPDFを有効にすると表示されます。
「RSS」は、プラグインのRSSを有効にすると表示されます。
「検索」は、プラグインのSEARCHを有効にすると表示されます。

表示したくないMENUがあれば、コメントをつけるまたは、プラグインを無効にすれば、表示されなくなります。しかし、Wikiメニューにアイコン画像を表示するプラグインを追加すると、表示したくないMENUなどの制御が可能です。

SIDEBAR

左端のMenuは、次のように定義されています。

<div class="sidebar">

<!--FSWIKI_INCLUDE PAGE="Menu"-->

</div>

ので、DIV CLASS をCSSで定義すればいろいろ表現を変更できます。

使えるようになりました

ついに完成しました。こんな感じです。

あとは、新しいページ(備忘録)を作り、Menuページの編集でメニュー項目に

!!!タヌキのお散歩 
{{counter2}}
[HOMEページ|http://e-lovers2.hp.infoseek.co.jp]
!!!メニュー
[[備忘録]]  <--追加
!!!最新
{{recent 15,v}}
!!!人気記事
{{accessdays 8,2}}

追加すれば良いです。

新しいページを作る

画面右上の「新規」をクリックして、任意ページ名を入力してください。
その内容を記述して保存すれば出来上がりです。

ページの削除

画面右上の「ログイン」をクリックすると、管理画面が表示されます。
その中で、ページ管理をクリックします。

「ページ管理 - ページの凍結、アクセス権限、一括削除を行います」

ページ一覧が表示されるので、該当ページにチェックを入れて、「削除」ボタンをクリックすると、削除されます。

最後まで見てくださってありがとうございます。感謝!!!

アップデート(更新)

ダウンロードしたバージョンアップソフトを展開すると、次のようになります。

wiki3_6_2

|-config

|-data

|-docs

|-lib

|-plugin

|-theme

|-tmpl

wiki.cgi

setup.sh

setup.dat

wiki.cgiの編集をする(setup.datをsetup.cgiに変更する)。
lib\Wiki\HTMLParser.pmを変更処理2にしたがって変更する。
このうち「config」「data」を除く、wiki.cgi,setup.sh,setup.dat、他のディレクトリを上書きしてください。
「Data」ディレクトリーは、その配下のファイル名help関連のみ上書きしてください。
「config」ディレクトリーは、触らないでください。

他のサーバーにインストール

他のサーバーにインストールの場合は、本家サーバーの比較と使い方を参照しましょう。

最終更新時間:2012年09月02日 01時13分05秒