1. 前回までのおさらい 2. Wiki ページの編集 3. Wiki 文法

コンピュータ基礎実習(上級) 第 12 週
「コンピュータ基礎実習(上級)」第 12 週 CGI について 4 Wiki の編集
前回の授業では、CGI の一種である Wiki システムの設置を行いました。
今回の授業では、Wiki の編集方法について解説します。
1. 前回までのおさらい
1.1.
CGI とは
CGI （しーじーあい Common Gateway Interface）はウェブサーバーが、ページにアクセスする人に対応して
プログラムを起動する仕組みです。
CGI は Perl や PHP といったプログラミング言語で記述されていて、ファイルの拡張子は .cgi または .php です。
1.2.
Wiki とは
ウィキ（Wiki）あるいはウィキウィキ（WikiWiki）は、CGI の一種です。
ブラウザ上からサーバー上のページを簡単に書き換えることができるシステムです。
現在では、最初に開発された Wiki に改良を加えたり発展させたりしたバージョンとして
[ウィキクローン] とよばれる様々な Wiki が出回っています。
有名なフリー百科辞典であるウィキペディア(http://ja.wikipedia.org/)も Wiki の一種です。
また、 ○○まとめ Wiki ○○攻略 Wiki と言ったさまざまな Wiki サイトがネット上に存在します。
Wiki の特徴としては、ネット上から簡単にページを編集できる。 HTML と比べ簡単な Wiki 文法でページを編集
できる。リンクや新規ページの作成が簡単と言ったものがあります。
2. Wiki ページの編集
2.1.
編集の基本
 Wiki のページは他の人がページを書き換えられないよう[凍結]されている場合があります。
凍結されていると編集ができないので、上部メニューより[凍結解除]をクリックし、
Wiki の初期設定で決めた[管理者用パスワード]を入力すると、編集できるようになります。
 凍結されていないページは、上部メニューの[編集]をクリックして直接編集できます。
 編集し終わったら、他の人に書き換えられないよう上部メニューで再び[凍結]しておきましょう。
 ページを編集する際は[Wiki 文法]と呼ばれる特別な書き方で記述します。(後述)
2.2.
新しいページの作成
Wiki では幾つかの方法で新しいページを作ることができます。以下の様な方法があります。
1. 上部メニューの[新規]で作成
画面上部のメニューで[新規]をクリックして、[ページ名]を記入すると新しいページを作成できます。
トップページなどからリンクを作成して、作ったページにアクセスできるようにしましょう。
2. リンクを使って作成
ページ編集中に [[ページ名]] のように[[と]]で囲ってページ名を書くとリンクになります。
リンクをクリックした時、リンク先ページが存在しないと、自動的に新規ページ作成画面になります。
つまり、ページの新規作成は後回しで、先にリンクを作っても構いません。
このように Wiki では簡単に新しいページを作れます。
3. Wiki 文法
PukiWiki でページを編集するには、[Wiki 文法]と呼ばれる構文で記述する必要があります。
ここでは、Wiki 文法のうち主なものを紹介します。
(この Wiki 文法は多くの Wiki クローンでおおむね使用できます。)
3.1.
段落
文字入力時に１行以上空行をつくると、段落となり、上下に１行分の空行が挿入されます。
3.2.
改行
ウィキでページを作成~
-1-
コンピュータ基礎実習(上級) 第 12 週
wiki では通常、改行はページ右端での自動折り返しですが、行末に~をつけると、その場で改行されます。
(参考) pukiwiki.ini.php 内で$line_break の設定を変更すると、編集画面での改行を、そのままページに反映させられ
ます。 $line_break=0; (初期設定。改行が反映しない。) → $line_break=1; (改行が反映する。)
3.3.
整形済みテキスト
この文章は、
そのままページに表示される。
行頭に半角スペースを記入すると、行の自動折り返しは行なわれず、入力したテキストがそのまま画面に表示され
る整形済みテキスト状態になります。外観は四角形で囲まれたようになります。
3.4.
強調
このキーワードは''重要''です。
行中の文字を '' (シングルクォーテーション 2 つ) ではさむと強調表示として太字になります。
3.5.
水平線
--------------------------------------------行頭に 4 つ以上の - (ハイフン)を書くと水平線になります。
3.6.
見出し
*第一章
**はじめに
行頭に * (アスタリスク) を書くと見出しになります。見出しは *、**、*** の 3 段階あります。
3.7.
箇条書き
-第一項目
-第二項目
-第三項目
行頭に – (ハイフン) を書くと箇条書きになります。箇条書きは-、--、--- の 3 段階あります。
また、行頭に + (プラス) を書くと、数字付きの箇条書きになります。
3.8.
文字のサイズ
&size(サイズ){文字列};
行中に &size を書くと文字サイズを指定できます。サイズはピクセル単位(px)で指定できます。
(例) &size(20){大きな文字を表示！};
3.9.
文字の色
&color(文字色,背景色){文字列};
行中に &color を書くと文字色と背景色を指定できます。背景色は省略できます。
文字色と背景色は、カラーネーム(red など) やカラーコード(#FF0000 など) が使えます。
(例) &color( yellowgreen , black ){カラフルな文字を表示！};
3.10. リンク
[[ページ名]]
[[エイリアス名>ページ名]]
[[と]]でページ名をはさむと、Wiki サイト内でページ名に該当するページヘのリンクになります。
ページ名はページを新規作成するときに決める、ページのタイトルのようなものです。
ページ名は、全角文字、記号、数字、半角空白文字など、比較的自由な名前にできます。
( "#&<> 等の記号は、ページ名には使えません。)
リンクをクリックした時、リンク先ページが存在しない場合、自動的に新規ページ作成画面になります。
(とりあえずリンクを先に作れるので編集が楽です。)
ページ名と異なる文字を画面に表示したい場合は、エイリアス名を使うことができます。
[[エイリアス名:URL]]
-2-
コンピュータ基礎実習(上級) 第 12 週
外部のサイトにリンクしたいときは、: の前に好きな名前を、: の後ろに URL を記述すると、その名前を画面に表
示しつつ URL に対してリンクすることができます。
(例) [[ヤフー:http://www.yahoo.co.jp/]]
3.11. 画像や添付ファイルの表示
#ref(添付ファイル名)
#ref(ファイルの URL)
画像などのファイルを Wiki ページ上に掲載するには、まず上部メニューの[添付]で掲載したいファイルをページ上
にアップロードします。
その後、Wiki ページ編集画面で、行頭に #ref(添付ファイル名) を書きます。
添付ファイルが画像の場合は画像表示され、それ以外の場合は、ダウンロードリンクになります。
3.12. 表
| 1 時間目 | 2 時間目 |
|国語 | 数学 |
行頭から | で文字を区切ると表組みができます。
3.13. 目次
#contents
行頭に #contents と書くと、ページに設置した[見出し]にあわせて自動的に目次が作成されます。
ページには目次化を意識して、[見出し]を設けておくとよいでしょう。
目次は一般的にページの先頭の方に設置するとよいでしょう。
3.14. アクセスカウンタ
&counter;
行中に &counter; と書くとそのページにアクセスした人の数を表示することができます。
3.15. コメント欄・掲示板
#comment
行頭に #comment と書くと、コメントを書き込むためのフォームが埋め込まれます。
#article
行頭に#article と書くと簡易掲示板が設置できます。
3.16. 日時・時刻の表示
&date;
&time;
&now;
行中で &date; と書くと、ページ更新時の日付が表示されます。 (例) 2013-12-01
行中で &time; と書くと、ページ更新時の時刻が表示されます。 (例) 17:36:05
行中で &now; と書くと、ページ更新時の日時が表示されます。 (例) 2013-12-01 (日) 17:36:05
3.17. もっと詳しく知りたい場合
Wiki 文法のより詳しい説明は、[テキスト整形のルール](FormattingRules)ページを参照してください。
[テキスト整形のルール]ページを探すには、画面上部にあるメニューの[単語検索]をクリックして、
[FormattingRules] または [テキスト整形] と入力し検索すれば、Wiki 文法の解説ページが見つかるはずです。
3.18. 作っておくと便利なリンク
 Wiki の編集に慣れないうちは、[テキスト整形のルール] ページヘのリンクをわかりやすい場所に作っておくと便
利です。ページ内のわかりやすい場所に [[テキスト整形のルール>FormattingRules]] のようなリンクを作って
おくとよいでしょう。
 画面左部のメニューバー(MenuBar)には、サイト内の移動用リンクなどを配置すると便利です。
メニューバーを編集するには、[[メニューバー編集>MenuBar]]のようなリンクを作っておくと便利です。
また、&edit(MenuBar){メニュー編集}; と記入しておくと直接編集画面にアクセスできて便利です。
-3-
コンピュータ基礎実習(上級) 第 12 週
3.19. ページを削除するには
ページが不要になった場合は、対象のページの編集画面にアクセスし、ページの内容を全て消去して保存すれば、
ページを削除できます。
3.20. 作ったページの一覧を確認するには
画面上部の [一覧] メニューをクリックすると、Wiki 上に存在する全てのページを一覧で確認できます。
ページを新規作成しても、トップページ(FrontPage)からリンクで接続しておかないと、簡単に見ることができませ
んが、[一覧] 画面であれば、そういったリンクで接続されていないページも確認できます。
※ [一覧] 画面は、あくまでサイト管理用の画面ですので、原則としてトップページからすべての公開コンテンツ
にリンクで接続されているように設計すべきです。
4. 課題
あなたがおすすめする店や人物などを先生に紹介する内容のまとめサイトを Wiki で作成してください。
ページは３ページ作成するものとし、以下のような構成で作成してください。
１ページ目：サイトの概要 / ２ページ目：詳しい情報 / ３ページ目：アクセス方法・関連リンクなど
１ページ目には、２、３ページ目へアクセスできるリンクを作成しておいてください。
課題用に専用の Wiki を作成しても構いません。その場合は wiki フォルダをコピーして使用してください。
画像などはネット上で検索し、Snipping Tool で保存、Wiki にアップロードして使用することができます。
(本 Wiki は課題専用の非公開コンテンツとするので、上記対応とします。
貴方が正式にサイトを公開する場合は、画像の無断借用・転載はしないでください。)
4.1.
ページ構成例
4.1.1. お勧め音楽アーティストの場合
１ページ目：サイトの概要とアーティストのおおまかな説明。
このサイトは○○という音楽アーティストについてのまとめサイトです。○○は○○という音楽グル
ープのボーカルで、○○というヒット曲が有名です…
２ページ目：メンバー構成、ディスコグラフィーなど
メインボーカル○○ ギター〇〇ドラム〇〇 1985 年結成… 写真など掲載。
３ページ目：関連リンク Wikipedia の該当サイト、他のファンサイトなどのリンク。
4.1.2. おすすめレストランの場合
１ページ目：サイトの概要とお店のおおまかな説明。
このサイトはレストラン○○をおすすめするページです。○○は京都市上京区○○の小さな路地にあ
るイタリアレストランです。…
２ページ目：レストランのメニューや価格など。写真も適宜掲載。
３ページ目：レストランへのアクセスマップ、連絡先など。
4.2.
課題の提出
完成したら Wiki の該当ページのアドレス(URL)を moodle に書き込んでください。
(URL 例)
http://www.cc.kyoto-su.ac.jp/~g000000/wiki/
提出期限は、来週の授業日いっぱいとします。
-4-

Download Report