演習問題

コンピュータ基礎実習をやってみよう。†

Wiki の利用

1. Wiki(ウィキ)とは†

ここでは、「Wiki(ウィキ)」と呼ばれる CGI の設置を行います。
Wiki を使うと難しい HTML を記述しなくても簡単にサイトを構築する事ができます。
便利な CGI を使ったページの編集作業を体験してみましょう。

1.1. Wiki の特徴†

多くの Wiki には共通して、以下のような特徴があります。
⚫ ネット上からいつでも、どこからでもページを編集できます。
⚫ パスワードをつけて書き換えに制限を設けられます。
⚫ リンクが作りやすく、簡単にページ間を接続できます。
⚫ Wiki 特有の Wiki 文法でページを記述しますが、HTML と比べ簡単な文法です。
(Wiki 文法を覚えると、多くの Wiki で同じように編集作業ができます。)
このように、手軽にホームページの編集作業が行えるので、まとめサイトや個人サイトなどに
Wiki は多く活用されています。
現在では、オリジナルの Wiki に改良を加えたり発展させたりした、様々な種類の Wiki が出回っ
ており、それらは [ウィキクローン] と呼ばれています。
なお有名なフリー百科辞典サイトであるウィキペディア(http://ja.wikipedia.org/)も Wiki を
利用しています。

2. PukiWiki をインストールする†

この授業では、Wiki クローンの一種である[PukiWiki](ぷきうぃき)をサーバーにインストールして使用します。
PukiWiki は PHP で作成されていて、初心者でも比較的扱いやすい Wiki クローンのひとつです。

2.1. PukiWiki のダウンロードと設置†

ここでは、公式サイトからダウンロードする方法を紹介します。

• 1. PukiWiki の公式サイト https://pukiwiki.osdn.jp/ にアクセス。
  ( [ぷきうぃき] で Google 検索すると簡単にアクセスできる。)
• 2. ページ左上の [ダウンロード] コーナーにアクセス。
• 3. [1.5 系 (HTML)] 欄の一番上のリンクをクリック。(最新バージョンを選択。)
• 4. [ダウンロード]コーナーの
  [フルセット] 欄で [UTF-8] 欄の [pukiwiki-1.5.x_utf8.zip] を
  クリック。
• 5. しばらくすると自動でダウンロードが始まるので、デスクトップ等に保存する。
• 6. 圧縮フォルダがダウンロードされるので解凍する。
  [pukiwiki-1.5.x_utf8] というフォルダができるので、[wiki] などの短いフォルダ名に変更しておく。
• 7. [wiki] フォルダ内の pukiwiki.ini.php を編集して初期設定を行う。（次項参照）
• 8. [wiki]フォルダを丸ごと[public_html]フォルダ内にアップロードする。
  京都産業大学の場合、権限(パーミッション)の設定は不要です。
• 9. URL にアクセスして、動作確認をする。
  (URL 例) http://www.cc.kyoto-su.ac.jp/~g000000/wiki/
  右のような画面が表示されれば成功。
  これで PukiWiki のダウンロードと設置が完了です。

2.2. 初期設定†

使い始める前に PukiWiki の設定ファイルである[pukiwiki.ini.php] を自分の環境にあわせて設定しておきます。
少なくとも、サイトを編集するための[管理者パスワード]は、設定しておいてください。
wiki フォルダ内にある「pukiwiki.ini.php」 を サクラエディタ などで開いて編集し、サーバーにアップロードし直して上書きします。
管理者パスワード
$adminpass = 'my-password';
サイトを編集するために必要となるパスワードです。上の例で「my-password」の部分が実際のパスワードです。初期設定では
「$adminpass = '{x-php-md5}!'」のように書かれていますが、「{x-php-md5}!」の部分を好きな文字に置き換えてください。
使用する文字は、半角英数文字とハイフン「-」あたりにしておくのが無難です。
PukiWiki のダウンロード
PukiWiki の初期画面
サイトのタイトル

$page_title = "○○のサイト";
ブラウザのタイトルバーなどに表示される名前です。「～のページ」など、サイトの内容が分かりやすい名前に書き換えます。
管理者の名前

$modifier = '○○wiki 管理人';
同様に modifier の項目を自分の名前やニックネームに書き換えましょう。日本語文字も使用できます。
改行の動作変更
$line_break = 1;
通常 wiki 文法では、編集画面で改行をしても実際のページ表示時には無視されます。(HTML の動作と似ています。)
ですが line_break を 1 に設定しておくと、編集画面で行った改行が、そのままページに反映するようになります。
直感的な操作が行えるようになるので、おすすめです。
書き換えとアップロードが終わったら、再び Wiki にアクセスし、問題なく動作していることを確認しましょう。

3. Wiki ページの編集方法†

3.1. Wiki 文法でページを記述する†

Wiki でページを表現する場合は HTML ではなく、独自の「Wiki 文法」という書き方でページを記述します。 各ページは Wiki 文法のまま
Wiki システム内に保存されており、ページが表示される時に、Wiki によって適切な HTML に変換されてブラウザ上に表示される仕組み
です。Wiki 文法は HTML よりも簡単なルールで多彩な表現ができます。

3.2. 編集の基本 凍結の解除と再凍結†

⚫ Wiki のページは他人がページを書き換えられないよう、[凍結]されています。
凍結状態ではページを編集できないので、上部メニューより[凍結解除]をクリックし、2.2 初期設定で決めた[管理者用パスワード]を
入力すると、編集できるようになります。
⚫ 一旦凍結を解除したページは、上部メニューの[編集]をクリックし [編集画面] を開けば何度でも編集できます。
⚫ 編集画面では自由にページを記述し保存します。ページは[Wiki 文法]に従って自動的にデザインされます。
⚫ 編集し終わったら、他人に書き換えられないように、上部メニューで再び[凍結]しておきましょう。

3.3. 新しいページの作成†

Wiki では、いくつかの簡単な方法で新しいページを作ることができます。 以下の様な方法があります。

• 1. リンクを使って作成
  ページ編集中に「 ページ名 」のようにとで囲ってページ名を書くとリンクになります。
  リンクをクリックします。リンク先ページが存在しない場合は、自動的に新規ページの編集画面になるので、編集作業を始めます。
  つまり、ページの新規作成は後回しで、先にリンクを作っても構いません。
• 2. 上部メニューの[新規]で作成
  画面上部のメニューで[新規]をクリックして、[ページ名]を記入すると新しいページを作成できます。
  その後、トップページなどからリンクを作成し、作成したページにアクセスできるようにしましょう。閲覧時は、どこからもリンク
  されていないページにはたどり着けませんので、必ずトップページからリンクで辿れる経路を用意しましょう。
• 4. Wiki 文法
  代表的な Wiki 文法を紹介します。好きなページの編集画面で入力してみて、どのように表示されるか確認しましょう。
  • 4.1. 段落
    文字入力時に１行以上の空行をつくると段落となり、上下に１行分の空行が挿入されます。
  • 4.2. 改行
    ウィキでページを作成
    
    wiki では通常、行末に「 ~ 」をつけると、改行できます。
    ただし pukiwiki.ini.php 内で$line_break を 1 に設定している場合は、この記述は不要です。
    ページ編集画面で改行したとおりに実際のページでも改行されます。(2.2 初期設定 の項目を参照のこと)
• 4.3. 整形済みテキスト
  この文章は、
  そのままページに表示される。
  行頭に半角スペースを記入すると、入力したテキストがそのまま画面に表示される整形済みテキスト状態になります。
  外観は四角形で囲まれたように表現されます。引用文献などを記載する際に便利です。
  • 4.4. 強調
    このキーワードは重要です。
    行中の文字を '' (シングルクォーテーション 2 つ) ではさむと強調表示され、太字になります。2 つで一つのセットです。
  • 4.5. 水平線

行頭に 4 つ以上の - (ハイフン)を書くと水平線になります。

• 4.6. 見出し

第一章†

はじめに†

行頭に * (アスタリスク) を書くと見出しになります。見出しは *、**、*** の 3 段階あります。

• 4.7. 箇条書き

• 第一項目
• 第二項目
• 第三項目
  行頭に – (ハイフン) を書くと箇条書きになります。箇条書きは-、--、--- の 3 段階あります。
  また、行頭に + (プラス) を書くと、数字付きの箇条書きになります。
  4.8. サイト内リンク
  ページ名 または エイリアス名
  とでページ名をはさむと、Wiki サイト内でページ名に該当するページヘのリンクになります。
  ページ名はページを新規作成するときに決める、ページのタイトルのようなものです。全角文字、数字などを使って自由な名前をつけられます。
  ただし「"#&<>」などの記号は、特殊な意味を持つため、ページ名には使えません。
  リンクをクリックした時、リンク先ページが存在しない場合、自動的に新規ページ作成画面になります。
  ページ名と異なる文字を画面に表示したい場合は、エイリアス名を使えます。画面にはエイリアス名が表示されます。
  • 4.9. 外部リンク
    URL または エイリアス名:URL
    外部のサイトにリンクしたいときは、: の前に好きな名前を、: の後ろに URL を記述すると、
    好きな名前を画面に表示しつつ URL に対してリンクすることができます。 (例) ヤフー
  • 4.10. 画像や添付ファイルの掲載

    #ref(): File not found: "添付ファイル名" at page "演習問題"

    #ref(): File not found: "ファイルの URL" at page "演習問題"

    画像などのファイルを Wiki ページ上に掲載するには、以下の手順で操作します。
    ① 上部メニューの[添付]をクリックし、掲載したいファイルをページ上にあらかじめアップロードします。
    アップロードしたものは、ページの下部に表示されます。
    ② その後、Wiki ページ編集画面で、行頭に #ref(添付ファイル名) と入力して保存します。
    例

    #ref(): File not found: " mypicture.jpg " at page "演習問題"

    添付ファイルが画像の場合は画像が表示され、それ以外の場合は、自動的にダウンロードリンクになります。
  • 4.11. 表

    1 時間目	2 時間目
    国語	数学

    上のように半角の「 | 」で文字を区切って並べると表組みができます。「 | 」は各行とも同じ数だけ記入してください。「 | 」の位置は
    スペースで調整できますが、ずれていても問題ありません。行頭や行末には余分な文字やスペースなどを入力しないでください。
  • 4.12. 目次
    • コンピュータ基礎実習をやってみよう。
      • 1. Wiki(ウィキ)とは
        • 1.1. Wiki の特徴
      • 2. PukiWiki をインストールする
        • 2.1. PukiWiki のダウンロードと設置
        • 2.2. 初期設定
      • 3. Wiki ページの編集方法
        • 3.1. Wiki 文法でページを記述する
        • 3.2. 編集の基本 凍結の解除と再凍結
      • 3.3. 新しいページの作成
    • 第一章
      • はじめに
      • 5. その他のテクニック
      • 6. 課題
    行頭に #contents と書くと、ページ内に設置した[見出し]にあわせて自動的に目次が作成されます。
    一般的にページの先頭の方に設置するとよいでしょう。

5. その他のテクニック†

• 5.1. ページを削除する方法
  ページが不要になった場合は、不要なページの編集画面にアクセスし、内容を全て消去して保存すれば、ページ削除となります。
• 5.2. 作ったページの一覧を確認する方法 [#r140fab1]
  画面上部の [一覧] メニューをクリックすると、Wiki 内に存在する全てのページを一覧で確認できます。
  作成したページの所在が分からなくなった場合などに便利です。
• 5.3. Wiki の書き方をもっと詳しく知りたい [#kc9ef9ac]
  Wiki 文法のより詳しい説明は、「FormattingRules」(テキスト整形のルール) という名前のページを参照してください。
  FormattingRules ページは、[一覧]コーナーの中から見つけられます。 また、別の見つけ方としては、画面上部にあるメニューの[単語検索]をクリックし、
  「テキスト整形」というキーワードで検索しても見つけられます。

• 5.4. 「FormattingRules」ページにアクセスしやすくする [#nb2813ba]
  目立たない所に FormattingRules ページへのリンクを作っておけば、Wiki 文法の説明を簡単に確認できて便利です。
  好きなページの編集画面で「 テキスト整形のルール 」のように書けばリンクを作れます。
• 5.5. 画面左のメニューバーの編集 [#kf9d81f0]
  画面左部のメニューバー(MenuBar)は、全てのページに表示されます。 その正体は、「MenuBar」
  という名前のページです。 MenuBar ページにサイト内を移動するためのリンクや、全ページに
  表示したい文章などを記入しておくと便利です。
  • 5.5.1. メニューバーの編集方法 [#xd1c8b04]
    MenuBar ページを編集するには、以下のような幾つかの方法があります。
    1. 画面上部の [一覧] メニュー内で MenuBar ページを探してクリックし、[編集]画面に入り書
    き換える。
    2. 目立たない所に「」と記入しておく。「メニュー編集」と書
    かれたリンクが表示されるので、クリックすると直接編集画面にアクセスできる。
    MenuBar 内でも、通常のページと同じように Wiki 文法で自由に編集できます。
  • 5.5.2. 更新履歴「最新の 20 件」 [#b1aef897]
    MenuBar ページ内に最初から書かれている「 #recent(20)」は「最新の 20 件」という項目に対応していて Wiki の更新履歴を表示する記述です。
    もし更新履歴が不要であれば、MenuBar の編集画面で、行頭に // (スラッシュ 2 つ) を追記して「// #recent(20)」のように記述してください。
    2 つのスラッシュ以降はコメントして認識されるため、更新履歴の表示を無効化できます。

6. 課題†

あなたがおすすめする店や人物などを先生に紹介する内容の まとめサイト を Wiki で作成してください。
ページは３ページ作成するものとし、以下のような構成で作成してください。
１ページ目：サイトの概要 / ２ページ目：詳しい情報 / ３ページ目：アクセス方法・関連リンクなど
１ページ目には、２、３ページ目へアクセスできるリンクを作成しておいてください。
課題用に専用の Wiki を作成しても構いません。その場合は wiki フォルダをコピーして使用してください。
画像などはネット上で検索し、Snipping Tool で保存、Wiki にアップロードして使用することができます。
(本 Wiki は課題専用の非公開コンテンツとするので、上記対応とします。
もしあなたが正式にサイトを公開する場合は、画像の無断借用・転載はしないでください。)

• 6.1. ページ構成例 [#q8d7ee67]
• －6.1.1. お勧め音楽アーティストの場合 [#x5c4afd0]
  １ページ目：サイトの概要とアーティストのおおまかな説明。
  このサイトは○○という音楽アーティストについてのまとめサイトです。○○は○○という音楽グループのボーカルで、
  ○○というヒット曲が有名です…
  ２ページ目：メンバー構成、ディスコグラフィーなど
  メインボーカル○○ ギター〇〇 ドラム〇〇 1985 年結成… 写真など掲載。
  ３ページ目：関連リンク Wikipedia の該当サイト、他のファンサイトなどのリンク。
• －6.1.2. おすすめレストランの場合 [#mdfa2e40]
  １ページ目：サイトの概要とお店のおおまかな説明。
  このサイトはレストラン○○をお勧めするページです。○○は京都にあるイタリアレストランです。…
  ２ページ目：レストランのメニューや価格など。写真も適宜掲載。
  ３ページ目：レストランへのアクセスマップ、連絡先など。
• 6.2. 課題の提出 [#t37f984f]
  なし。

最新の20件