戻る

今回は前回に続きCGIの取り扱いについて解説します。

• CGIは、サーバー上で動くプログラムのことです。
• CGIファイルの拡張子は .cgi や .php です。PHP製の .php が扱いやすいです。
• CGIファイルは、サーバー上に配置しましょう。
  • MicroApache なら htdocs フォルダ内にCGI関連ファイルを置きましょう。
• サーバーを稼働させている状態でCGIにアクセスしましょう。
  • MicroApache なら run.cmd を実行して、サーバーが稼働している状態にしましょう。
• CGIの実行結果を確認するには http://localhost:8800/xxxx.php のようなURLでアクセスする必要があります。
  • CGIファイルを直接ダブルクリックしても動きません。かならずURLでアクセスしましょう。
  • URLの入力が面倒な場合は、トップページである index.html からリンクでつなげておくと便利でしょう。
• CGIの内容を編集する時は、テキストエディタに読み込ませましょう。サクラエディタとか。

前回は、サーバー上で動作するプログラム「CGI」について学びましたが、今回の授業では、「Wiki(ウィキ)」と呼ばれるCGIの設置を行います。

以前の課題では<table>などを使って３ページのサイトを作成しましたが、HTMLでサイトデザインを作り上げるのは、なかなか大変な作業でした……。

そのような場合は「Wiki」を利用すれば、難しいHTMLを記述しなくてもCGIによってデザインされたページを簡単に作れます。
ページのデザインにかかる労力を減らし、記事を書くことそのものに集中できるでしょう。

要するにWikiと呼ばれるCGIの力を使えば、ページ作りで楽ができるということです！😁

具体的には下のようなカッコイイ（？）ページを、とても簡単に作れます。

CGIの導入も比較的簡単に行えるので、便利なWikiを使ったページ編集作業を体験してみましょう。

「Wiki（ウィキ）」という言葉に聞き覚えがあるでしょうか？
実は Wiki はウェブページを手軽に作るためのCGIの一種です。

有名なのはフリー百科辞典サイトであるウィキペディアでしょう。Wikiの一種である MediaWiki というシステムを利用して作られているから「ウィキペディア」なのです。 また、この基礎実習サイトもWikiの一種 DokuWiki を利用しています。

このようにいい感じのページを手軽に作れるのが Wiki というプログラムの特徴です。

Wikiにはさまざまな種類があります。現在ではオリジナルのWikiに改良を加えたり発展させたりした、さまざまな種類のWikiが出回っており、それらは「ウィキクローン」と呼ばれています。
このウィキクローンの中から好きなものを選んで使うのが一般的です。

多くのWikiには共通して、以下のような特徴があります。

• ブラウザ上からいつでも、どこからでもページを編集できます。
• パスワードをつけて書き換えに制限を設けられます。
• リンクが作りやすく、簡単にページ間を接続できます。
• Wiki特有のWiki文法でページを記述しますが、HTMLと比べシンプルで覚えやすいです。(基本的なWiki文法を覚えると、多くのウィキクローンでも同じように編集作業ができるでしょう)

このように、手軽にホームページの編集作業が行えるので、個人サイトや情報サイトなど、多くの場所でWikiは多く活用されています。

とりあえず、Wikiと呼ばれるCGIを使えば、簡単にいい感じのページを作れると覚えておきましょう。

みなさんも、Wikiを体験してみましょう。

というわけで授業ではWikiクローンの一種である「PukiWiki」（ぷきうぃき）と呼ばれるCGIをサーバーにインストールして動かしてみます。

PukiWikiはPHPで作成されていて、初心者でも扱いやすいWikiクローンのひとつです。

ここからPukiwikiをダウンロードできます。

Wikiダウンロード pukiwiki-1.5.4_utf8.zip

上のリンクをクリックして、ダウンロードフォルダなどにセーブしてください。

ダウンロードしたファイルはZIP圧縮フォルダになっているので、そのままでは使えません。
展開して中身を取り出す必要があります。

1. 圧縮フォルダを展開します。ダブルクリックし、中身を外に取り出すと pukiwiki-1.5.x_utf8 のような名前のフォルダができます。
   

   圧縮フォルダの中には
   フォルダが１つ入っています。

   大学のパソコンの場合は、ZIPファイルをダブルクリックすると、デスクトップ上に pukiwiki-1.5.x_utf8 のような名前のフォルダが自動的に生成され、その中にZIPの中身が展開されますので、そのデスクトップに作られた pukiwiki-1.5.x_utf8 フォルダを使用してください。

2. フォルダ名が長いので「右クリック」→「名前の変更」などで短い名前に変更します。ここでは pukiwiki という短いフォルダ名に変更するものとします。

   フォルダ名の変更
   pukiwiki-1.5.x_utf8 → pukiwiki

   プログラムが格納されている pukiwiki-1.5.x_utf8 フォルダの名前は、ある程度自由に変更してＯＫです。例えば diary、my-site といった具合に好みの名前に変更できます（もちろん半角英数字のみを使ってください）。

   ただし、pukiwikiフォルダのさらに中に入っているものについては、勝手に名前を変更したり、ファイルを移動させたりすべきではありません。プログラムが動作しなくなってしまいます。取り扱いに注意してください。

   

   pukiwikiフォルダの中は、だいたいこのようになっています。
   これらには不用意に触れるべきではありません。

これでダウンロードしたPukiWikiを展開できました。次の項に進みます。

PukiWiki の関連ファイルを、サーバー内に配置しましょう。

MicroapacheやMacのサーバーを使っている場合は pukiwiki フォルダを丸ごとUSBメモリ内の htdocs フォルダの中に入れましょう。

以降はこの htdocs 内の pukiwiki フォルダを使用します。

デスクトップなどに元の pukiwiki フォルダが残っている場合はもう不要なので、削除しておきましょう。同じ名前のフォルダが複数あるとややこしいです。

これでファイルの配置ができました。次に進みます。

とりあえず初期状態で、正しくCGIが起動するか確かめましょう。

USBメモリ内の run.cmd を実行して MicroApache サーバーを稼働させ、localhost にアクセスできる状態にしましょう。
MicroApache なら、とりあえず http://localhost:8800/ が開くことでしょう。

ブラウザのアドレス欄を書き換え、URLの末尾に pukiwiki/ を書き足しましょう。
URLは http://localhost:8800/pukiwiki/ のようになるはずです。
Enter キーを押してアクセスすると、PukiWiki が作動します。

以下のような画面が表示されれば、ただしくCGIが設置されたといえます。

このままでは、まだページの編集などが行えないので、続いて初期設定を行います。

使い始める前に PukiWiki の設定ファイルである pukiwiki.ini.php を自分の環境にあわせて設定しておきます。
少なくとも、サイトを編集するための「管理者パスワード」は設定しておいてください。
この設定は最初に一度だけ行えばＯＫです。

先ほどUSBメモリ内に配置した pukiwiki フォルダを開き、さらにその中にある pukiwiki.ini.php を サクラエディタ などで開いて以下の箇所を修正してください。

$page_title = "○○のサイト";

上記のような page_title と書かれた行を探し、好きなサイト名を記入しましょう。113行目あたりにあるかも。

サイト名とは、ブラウザのタイトルバーなどに表示される名前です。サイトで扱っているテーマが分かりやすい名前に書き換えましょう。例えば「○○の趣味のページ」「○○○○（非公式）ファンサイト」「○○ゲーム２攻略サイト」のような、サイトの内容をよく表すものが良いでしょう。

$modifier = '○○wiki管理人';

同様に modifier の項目を自分の名前やニックネームに書き換えると良いでしょう。日本語文字も使用できます。122行目あたりにあるかも。

管理者名はページの下部にサイト情報として表示されます。

$nowikiname = 1;

PukiWikiでは大文字小文字が混じった単語を自動的にリンクにする機能があります。

例えば、ページ内に WikiPage のような大文字小文字が混じったキーワードを書くと、自動的に該当するページへのリンクが生成されます。そして WikiPage という名前の新たなページの編集を始められます。これは Wiki の伝統的な仕様です。

しかしこの機能の使用頻度は高くないうえ、英語の固有名詞などに反応してしまうことも多いので、ここではこの少々おせっかいな機能を無効にしておきます。上記のような nowikiname と書かれた行を検索して「1」を設定しましょう。160行目あたりにあるかも。

編集前

$adminpass = '{x-php-md5}!';

　↓↓↓

編集後

$adminpass = 'xyz1234';

サイトを編集するために必要となるパスワードです。上の例で xyz1234 の部分が実際のパスワードです。このWiki専用のパスワードを考えて設定してください。192行目あたりにあるかも。

初期設定では$adminpass = '{x-php-md5}!'のように書かれているかもしれません。その場合は{x-php-md5}!の部分を好きな文字に置き換えてください。パスワードとして使用する文字は、半角英数文字とハイフン「-」あたりにしておきましょう。

またページの編集をするたびにこのパスワードの入力を求められるので、あまり長く複雑なものにすると作業が面倒になるでしょう。簡単なものが良いかも知れません（このWikiを編集するためだけのものなので、わりと適当なものでもＯＫです😅）。

$line_break = 1;

通常wiki文法では、編集画面で改行をしても実際のページ表示時には無視され、つながって表示されます。改行を入れたい場合は、２回改行をして空行を入れる必要があります。

ちょうどこんなふうに。

これはHTMLの動作と似ていますが、やや直感性に欠けます。

そのような場合はline_breakを「1」に設定しておくと、編集画面で行った改行が、そのままページに反映するようになります。

ページ編集用の画面で改行したとおりに実際の画面上でも改行されるようになり、直感的に編集ができるので、この設定がおすすめです。
536行目あたりにあるかも。

以上で初期設定は完了です。

テキストエディタ上でCtrl+Sを押すなどして編集内容をセーブし、ブラウザ画面で リロード すれば、初期設定が反映されます。

まだ見た目の変化はほとんどありません。画面にエラーが出ていないなら問題ないでしょう。

それでは、Wikiを使って今見えているページを書き換えていってみましょう。

PukiWiki内のページを編集する方法を紹介します。

Wikiを使うなら、もう<h1>のようなHTMLタグを書く必要はありません！ いくつかボタンを押すだけですぐにページの編集作業に入れます。とっても簡単😁

下の解説を参考にしながら自由に編集したりして、動作を確認してみましょう。

PukiWikiでは、最初に見えているページは FrontPage（フロント・ページ）という名前のページです。

この FrontPage がすべてのページにつながる起点のページとなります。ちょうど通常のHTMLで言うところの index.html にあたるページです。

ちなみに現在のページの名前は、画面の一番上に表示されています。大きな文字で FrontPage と書かれている部分です。

どこか別のページを訪れた場合も、画面左上の [ トップ ] と書かれたリンクをクリックすると、いつでもこの最初のページ FrontPage に戻ってこれます。

最初、Wikiのページは第三者が勝手に書き換えられないように「凍結」されています。

凍結状態ではページを編集できないので、上部メニューより「凍結解除」をクリックし、先ほど初期設定の際に決めた「管理者パスワード」を入力しましょう。自動的にページの編集画面になります。

• 一旦凍結を解除したページは、再度凍結されるまで何度でも編集できます。
• すでに凍結を解除済みの場合は、上部メニューの「編集」をクリックすれば、編集画面が開いてページの内容を書き換えられます。
  

  編集画面でページを直接書き換えられます。
• 好きなように書き換えたあと「ページの更新」ボタンを押せば、入力した内容がセーブされ、直ちにページに反映されます。
• ページのデザインは自動的に行われます。

Wikiでは、基本的には入力した文字がそのままページ上に表示されます。

そこにさらに、いくつかの簡単なルールを覚えると「見出し」や「表」など、さまざまなものを表現できるようになります。

Wikiでいろいろな表現をする場合は、HTMLではなく独自の「Wiki文法」という書き方を使います。
例えばこのような感じです。実際に FronPage の「編集」画面の一番上あたりに、以下のようなものを書き足してみると良いでしょう。

* 私のページ

はじめまして、清水です。Wikiのサイトを作成してみましたがいかがでしょうか？

[[京都産業大学のページ:http://www.kyoto-su.ac.jp/]]はこちら

「私のページ」という見出しや、リンクが作られたことが分かるでしょう。

とてもシンプルですね。Wiki文法はHTMLよりも簡単なルールで多彩な表現ができます。とっつきやすそうです！😆

さらに詳しい書き方については、後の項で説明します。

ちなみに、もしうっかりミスでページを書き換えてしまっても、上部メニューの「差分」コーナーや「バックアップ」コーナーを見れば、書き換える前の過去のページの内容を調べられます。

編集が一通り終わったら、不用意に書き換えられないよう上部メニューで再び「凍結」しておくと良いでしょう。

• PukiWikiではページが「凍結」されている場合は、まず「凍結解除」をしないと編集できません。
• 凍結されていないページは「編集」で中身を自由に書き換えられます。
• 編集作業が終わったら、再び「凍結」しておきましょう。
• 最悪、編集に失敗しても、上部メニューの「差分」コーナーや「バックアップ」で復元できます。

最初の１ページだけでは物足りないので、別のページが欲しいと思うかもしれません。そんな時は簡単な操作で何枚でも新しいページを作れます。

PukiWiki では、新しいページを作る方法がいくつかあります。 以下のような方法を紹介します。

1. PukiWikiでは [[ と ]] で囲んだものはリンクになります。
   たとえば新たに「自己紹介」という名前の新しいページを作りたい場合、編集画面にアクセスし、わかりやすい場所に [[自己紹介]] のように書きます。
   これで「自己紹介」という名前の新しいページへのリンクを作ったことになります。
   なお、まだ新しいページ自体は作られていないので、使えないリンクになりますが、とりあえずリンクだけ先に作っちゃうのです！😃

   * 私のページ
   
   はじめまして、清水です。Wikiのサイトを作成してみましたがいかがでしょうか？
   
   [[京都産業大学のページ:http://www.kyoto-su.ac.jp/]]はこちら
   
   [[自己紹介]]

   自己紹介ページへのリンクを追加してみた例
2. 「ページの更新」ボタンを押して編集内容をセーブして、通常の画面へ戻ります。
3. [[自己紹介]]のように書き込んだ場所にリンクができているはずです。しかし、リンク先のページはまだ作られてないので「自己紹介」リンクは黄色く塗られた状態になっており、リンク先が無くて使えない状態を示しています。
   

   作成されたリンク
   リンク先がまだ無いので黄色くなっています。
4. この黄色い未完成リンクをクリックすると、自動的に「自己紹介」ページの編集画面になります。
   何か好きな内容を書き込んで保存をすると、新しいページ「自己紹介」が完成します。
   

   黄色いリンクをクリックすると
   「自己紹介」ページの編集画面になります。
   画面上のタイトル部分が「自己紹介 の編集」になっていて
   どのページを編集中かを表します。

   つまり、ページの新規作成は後回しで、先にリンクを作ればよいのです。簡単ですね。😁
5. 「自己紹介」ページに好きなことを書き込んだら「ページの更新」ボタンでセーブしましょう。
6. その後、画面左上にある [ トップ ] で最初の FrontPage に戻りましょう。
7. さっきまで黄色が塗られていた「自己紹介」リンクが、通常の青い「自己紹介」リンクに変わっています。リンク先が正しくつながったと分かります。

   新しいページが作られ、リンクが繋がりました。

「自己紹介」リンクをクリックして、自己紹介ページにつながることを確かめてみましょう。

これで新しい「自己紹介」ページを作ることができました。ついでにリンクでつながるのでアクセスしやすいです。

要らなくなったページを削除したくなるかもしれません。

その場合は削除したいページの編集画面にアクセスします。ページの内容を全て削除¹⁾し、「ページの更新」ボタンを押すとページを削除できます。とても簡単ですね。

具体的なWiki文法の書き方を解説します。
編集画面で入力してみて、どのように表示されるか確認しましょう。

文字入力時に１行以上の空行をつくると段落となり、上下に１行分の空行が挿入されます。

ウェブページ上に文章を記入する際は、適度に空行を設けることで読みやすくなります。（ちょうどこの文章のように！）

文字入力時に１行以上の空行をつくると段落となり、上下に１行分の空行が挿入されます。

ウェブページ上に文章を記入する際は、適度に空行を設けることで読みやすくなります。（ちょうどこの文章のように！）

行頭に * (アスタリスク) を書くと見出しになります。見出しは *、**、*** の３段階があります。
*が多いほど、小さな見出しになります。

* 第一章
** はじめに
*** 備考

長文にはときどき見出しを作って内容を区切ると読みやすくなるでしょう。

行頭に半角スペースを１つ以上記入してから文字を入力すると、入力した文字がそのまま画面に表示される「整形済みテキスト」と呼ばれる状態になります。

ここは普通の文章です。

  この文章は、
  そのままページに表示されます。
  <?php $var="TEST"; echo "This is ".$var."<br>"  ?>
  <h1>見出し</h1>
  たとえばこのような特殊な意味を持つプログラムやHTMLなども処理されずに、そのまま画面に表示されます。

ここも普通の文章です。

上の例はちょっと分かりにくいですが、行頭に半角スペースが２つ入っている部分が「整形済みテキスト」に該当します。

「整形済みテキスト」の外観は四角形で囲まれたボックスのような見た目になります。引用文献やプログラムなどを記載する際に便利です。
この資料でも色んな所で四角い囲みが使われていますね？ そんな感じの使い方ができます。

行中の文字を 「''」 (シングルクォーテーション2つ) で囲むと、囲んだ範囲が太字になります。

このキーワードは''重要''です。

このキーワードは重要です。

行頭に４つ以上の 「-」 (ハイフン)を続けて書くと水平線になります。記事の区切りなどに使えます。

なんとか
-------
かんとか

なんとか
かんとか

行頭に –（ハイフン）を書くと箇条書きになります。箇条書きは -、--、--- の3段階あります。
同じように行頭に + (プラス) を書くと、数字付きの箇条書きになります。

-第一項目
-第二項目
-第三項目

+はじめに
+序論
+具体例
+まとめ
+参考文献

- の数を変えることで、箇条書きに階層構造を設けられます。+ も同様です。

スパイダーマンの映画

-サム・ライミ作品
--スパイダーマン1～3
-マーク・ウェブ作品
--アメイジング・スパイダーマン1,2
-ジョン・ワッツ作品
--シビル・ウォー/キャプテン・アメリカ
--スパイダーマン：ホームカミング
--アベンジャーズ/インフィニティ・ウォー
--アベンジャーズ/エンドゲーム
--スパイダーマン：ファー・フロム・ホーム
--スパイダーマン：ノー・ウェイ・ホーム
-アニメーション作品
--スパイダーバース
-東映版スパイダーマン
--地獄からの使者 スパイダーマン!!

[[ と ]] でページ名をはさむと、自分のWikiサイト内で「ページ名」に該当するページヘのリンクになります。

[[ページ名]]
[[エイリアス名>ページ名]]

「ページ名」とはページを新規作成するときに決めるもので、ページを識別する際に使われます。全角文字、数字などを使って自由な名前をつけられます。ただし "#&<> などの記号は、特殊な意味を持つため、ページ名として使えません。

リンク先ページが存在しないリンクを作ると、「？」マークが付きます。「？」マークをクリックすると自動的に新規ページ作成画面になります。

他のページ名と重ならなければ何でも良いので [[自己紹介]] [[問い合わせ]] [[今後の予定]] [[日記xxxx年xx月]] [[MyMemories]] のようにして新しいページ名を書けば、いくらでも新しいページを作れます。

実際のページ名と、画面に表示される文字を異なるものにしたい場合は、「エイリアス名」を使えます。画面にはエイリアス名のほうが表示され、クリックしたときに繋がるページの名前と違う見た目にできます。

たとえば[[ここをクリックしてね>自己紹介]]と書いたなら、画面上には「ここをクリックしてね」と表示されますが、クリックすると「自己紹介」ページに繋がります。

[[ここをクリックしてね>自己紹介]]

ここをクリックしてね

新しいページを作ったら、最初のページに戻るための経路が欲しくなるかもしれません。

最初のページは FrontPage という名前なので、最初のページに戻るためのリンクは以下のようになります。

[[FrontPage]]

FrontPage

ただし、いきなり「FrontPage」と言われても、PukiWiki に詳しくない人にとっては何のことか良く分からないので、エイリアス名を使って見た目をわかりやすくしたほうが実用的かと思います。

[[トップページに戻る>FrontPage]]

トップページに戻る

外部のサイトにリンクしたいときは、そのページのアドレス（URL）を直接[[と]]で囲んで書くか、[[好きな名前:URL]]のように書きます。後者の場合、実際のリンク先と異なる見た目にできます（つまりエイリアス名です）。

[[URL]]
[[エイリアス名:URL]]

[[http://www.google.co.jp/]]
[[ヤフー！はコチラ:http://www.yahoo.co.jp/]]

http://www.google.co.jp/
ヤフー！はコチラ

URLは複雑で長いことが多いので、見た目をスッキリさせるためにも、後者のようにエイリアス名を活用するのがおすすめです。

PukiWikiのページ上に画像を掲載したり、ダウンロードリンクを作る方法を紹介しましょう。

そのためには、あらかじめ「添付」と呼ばれる手続きが必要になります。

試しに好きな画像を用意して、Wikiページ内に画像を掲載してみましょう。以下の手順で操作すると良いでしょう。

1. 画像を掲載したいページにアクセスします。
2. 画面上部にあるメニューの「添付」にアクセスします。

   「添付」コーナー
3. 添付画面で「参照」ボタンを押して、掲載したい画像ファイルなどをページ上にアップロードします。
   その際、管理者パスワードを入力する必要があります。

   「添付」画面
   「参照」ボタンでファイルを指定し
   管理者パスワードを入力し「アップロード」ボタンを押します。
4. アップロードできたものは、自動的にページの下部に列挙されます。

   添付済みの状態
   この例は penguin.png をアップロードしている状態です。
5. その後編集画面にアクセスし、以下のように記入します。

   #ref(添付ファイル名)

   例えば penguin.jpg をアップロードしたなら以下のように書きます。

   #ref(penguin.jpg)

   指定のファイルが画像の場合は #ref(～) を書き込んだ位置に画像が表示されます。

ちなみに画像ではないもの、たとえばWORD書類などを添付した場合は、自動的にダウンロードリンクになります。つまり画像を掲載する以外に、ファイルをダウンロードするためのリンクも同じ方法で設置できるというわけです。

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

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

上のように半角の | で文字を区切って並べると表組みができます。日本語キーボードの場合、Shift+￥で入力できます。

• | の位置はスペースで調整して揃えても良いですが、ずれていても問題はありません。 ただし | の数は、各行とも同じだけ記入してください（数が揃っていないと表が崩れます）。
• 行頭や行末には余分な文字やスペースなどを入力しないでください。やはり表の構造が崩れてしまいます。

HTMLで表を作る場合、<table>～</table>、<tr>～</tr>、<td>～</td>を使った３重構造で表を作るという、とても大変な作業でしたが、その苦労を思えばずいぶん簡単になったものです……。

行頭に #contents と書くと、ページ内に設置した 見出し にあわせて自動的に目次が作成されます。

#contents

長いページを作った場合は、目次を作っておくとアクセスしやすくなります。

一般的にページの先頭の方に #contents を書いて設置すると良いでしょう。自動的にリンクが生成されるので、各見出しに素早く移動できます。

たとえば、以前作った自己紹介のページをWiki風に仕立て上げるなら、きっとこのような感じになるでしょう。
もし余裕があれば参考にしてください。Wikiでページを作るのがとても簡単だ、という事がわかると思います。

* 自己紹介見出し

[[トップに戻る>FrontPage]]最初のページに戻るリンク

| コンピュータ基礎実習 上級 | ○曜○限     |表
| 学生番号                  | １２３４５６ |
| 学部                      | 外国語       |
| 学年                      | 1            |
| 氏名                      | ○○○○     |

こんにちは、○○です。 コンピュータ基礎実習を受けることになりました！
滋賀県の実家から通っています。
ウェブページは普段見るだけですが、この講義はページを作成する授業と聞いてどんなものか興味があります。

** 趣味または得意なこと

友人と月に何度かカラオケに行きます。安い店を知っているので行く回数は多めです。気分転換にいいですね。
あと最近は[[Amazon:https://www.amazon.co.jp/]]外部リンクのKindleで電子書籍を読むのがマイブームです。読み終わった本がかさばらず、値段がちょっとだけ安い事が多いので助かります。最近面白いと思った作品は「鬼滅の刃」です。流行の作品なので読んでみましたが、意外と面白かったです。キャラクターの目的がはっきりしているのが良いと思いました。先生にもお勧めします、未読ならいかがですか？

** ウェブページ作成について小さな見出し

インターネットは普段良く見ていますが、ページを作ったことはありません。今度サークルのページをつくろうかと思っています。トップページとリンク集と、簡単な掲示板があれば良いかなと思っています。どこまでできるかわかりませんががんばります。

** 先生に一言小さな見出し

がんばって出席しますのでお手柔らかにお願いします。

[[トップに戻る>FrontPage]]最初のページに戻るリンク

有名なフリーのインターネット百科事典 Wikipedia も Wiki でできており、似たような仕組みになっています。なので、ここではPukiWikiを使ってWikipediaの記事と似たようなページを作る例を紹介します。
出典：消しゴム - Wikipedia

* 消しゴム見出し

消しゴム（けしゴム）とは、主に鉛筆などで書かれたものを消去するときに使う文房具。従来は天然ゴムが主成分だったためそう呼ばれる。現在はプラスチック製が主流のため字消し（じけし）とも呼ばれるが、慣用的に消しゴムと呼ばれている。英語ではrubber（ラバー、《米》eraser《イレイサー》）である。直方体のものが最も一般的であるが、ボールペンのような形のノック式の消しゴムなども販売されている。また、色調は一般に白色のものが多いが黒色など色付きのものもある。

左：製図用消しゴム 右：一般的なプラスチック消しゴム
#ref(plastic_eraser.jpg);画像を掲載

鉛筆と消しゴムと鉛筆削り
#ref(sharpener_eraser_and_pen.jpg);画像を掲載

** 歴史小さな見出し

かつてはパンが使われていたが1770年、イギリスのジョゼフ・プリーストリーが、ブラジル産のゴムに紙に書いた鉛筆の字を消し去る性質があることを発見したのが消しゴムの始まりである。発見日とされる4月15日はRubber Eraser Dayとされている。1772年頃にはロンドンで市販されており、「rub out（こするもの）」と呼ばれた。これが、今日ゴム一般を意味する英単語ラバー（rubber）の語源である。なお、現在でもパンが消しゴムとして用いられることはある。

日本では、明治初頭の1886年に東京の町工場で製造が始まった。そのころは消去性能がよいといえなかったが、その後改良が加えられ、1959年、日本のシードゴム工業（現在の株式会社シード）がより消去性に優れたプラスチック字消しを開発し、以後その性能から市場の主流となる。天然ゴムは後述の特殊用途の品を除き、原材料として現在はほとんど使用されていない。

なお、消しゴムが存在する前の時代、パンを使っていた当時は字消しのパンを「消しパン」、そして食事のためのパンを「食パン」と呼んでおり、それが現在の「食パン」の語源となっているといわれているが、これは俗説である。消しゴムは1770年代にはすでに製品として存在していた。少なくとも日本に鉛筆という語ができた時代には、すでに消しゴムもあったのである。そして、パンを字消しとして使用した時代でも、わざわざ字消し専用にパンが製造されたわけではなく、製造後時間が経過して食味に劣ったパンを使用していた。現在でも、木炭デッサンにおいて消しゴムは紙を痛めるため、油分の少ないパンを用いて描線を消去することがある。

** 呼称小さな見出し

一般的には原材料のいかんにかかわらず「消しゴム」という名称が使用されるものの、消しゴムメーカーの業界団体である日本字消工業会をはじめ、メーカー側の表記としては「字消し」が用いられている。

これは日本産業規格（JIS）のプラスチック字消しの規格（JIS S 6050）に、名称として「プラスチック字消し」「Plastic eraser」「プラスチック」などと表示しなければならないとされているためである。なお、天然ゴムを使用した消しゴムの規格であったJIS S 6004は1999年、廃止されている。

** 原理小さな見出し

消しゴムで字を消すようす
#ref(benutzung_eines_radiergummies.gif);画像を掲載

練り消しゴム
#ref(kneaded_eraser.jpg);画像を掲載

鉛筆で書いた線が消える原理は単純なものである。まず、鉛筆で書いた部分には黒鉛（鉛筆の芯の成分）が付着する。消しゴムでこれをこすると、ゴムが紙に付着した黒鉛を剥がし取りながら、消しゴム本体より消しくずとして削れ落ちる。さらにその消しくずが紙から黒鉛を剥がし取りつつ、包み込んで取り除く。紙からは完全に黒鉛が除去されて消しくずに移行し、消しゴムには新しい表面が露出する。以上のサイクルで消しゴムが減り、消しくずが出て字が消える。

ボールペンなどのインクで書かれた線は、インクが紙に染み込むために通常の消しゴムで消すことはできない。砂消しゴムは、ゴムに研磨砂を配合してあり、インクを紙ごと削ることによりこれを消すことを可能にした製品である。また近年では、書いてすぐには紙に染み込まない高粘度インクを利用した、筆記後短時間なら通常の消しゴムで消せる筆記用具も実用化されている。

プラスチック消しゴムは、ポリ塩化ビニルにフタル酸系可塑剤や炭酸カルシウム、安定剤を加えて軟質に固めたもので、消しくずがすみやかに出るため消字性能が高い。プラスチック消しゴムやその消しくずを、CDケースなどのプラスチック製品と長期間接触させておくと、プラスチック消しゴムに大量に含まれている可塑剤が移行し、溶けて融合してしまうことがある。消しゴムを覆うスリーブ（紙ケース）は、消しゴムを長時間入れておくとプラスチック製筆箱などがこの作用で溶かされてしまうことを防ぐためのものでもある。またプラスチック消しゴムはポリ塩化ビニルを使用しているので、燃やすとダイオキシンが発生するなど環境負荷が大きい。

前述の欠点を克服し環境負荷を軽減する商品として、合成ゴム系などの非塩化ビニル（non PVC、PVCフリー）の消しゴムも多くのメーカーで製品化されており、プラスチック消しゴムに近い消字率90%台も実現されている。

** 種類小さな見出し

-プラスチック字消し箇条書き
--プラスチック消しゴムとも。プラスチック（主として、ポリ塩化ビニル）から生成した消しゴムで、最近の主流である。まとまるタイプ（まとまるくんなど）やハードタイプなど、配合により様々なものが作られる。
-ゴム字消し
--ラバー消しゴムとも。古典的には天然ゴムやファクチスを主成分として、加硫で弾力が与えられた消しゴム。新しいものではスチレン系やオレフィン系の合成ゴム（熱可塑性エラストマー）も使われる。シャープペンシルのキャップ内部や鉛筆の頭部などに付けられる消しゴムには、減りが少なく強くて折れにくいゴム字消しが用いられる。
-砂消しゴム（砂消し）
--珪砂などの研磨剤を含んだ消しゴムで、インクの浸透した部分を紙ごと削ることによって消す。最近では修正液や修正テープを使用することが多い。砂消しゴムも研磨砂を担持する接着力と紙を削る機械強度を要求されるため、天然ゴムで作られる。欠点として、インクを削り取るというと特性上、同じ箇所に対して1度に使用出来る回数は少ないといったことが挙げられる。
-練り消しゴム（ねりけし）
--美術のデッサンやパステル画で使用される消しゴム。柔らかく紙を傷めない反面、消字性は劣る。押し付けて消したり、変形させて利用することができ、消しくずが出ない。ゴム材料に加硫せずに作られる。
-電動字消器
--主に製図などに用いられるものとして、先端に専用の円柱状の小さな消しゴムを取り付けて電気による振動や回転によって字を消す電動字消器がある。
-おもちゃ
--また、消すことに主目的を置かない消しゴムもある。例としてはスーパーカー消しゴムや漫画のキャラクター（キン肉マン、ケシカスくんなど）、へんてこキャラクター（かみつきばあちゃん）、食べ物などを模した消しゴムが挙げられる。これらのものには、成形ディテールを優先するために可塑剤を減量して強度を増したことにより、字消しとしての性能が犠牲になっているものがある。それらは文房具というより、文具流通を利用した、学校に持ち込めるおもちゃという側面が強い。

頂点を多く設けた消しゴム（カドケシ）
#ref(120px-KOKUYO_Kadokeshi_Petit.jpg);画像を掲載

鉛筆先端のゴム字消し
#ref(120px-Gum_met_potlood.jpg);

砂消しゴム
#ref(120px-Suna_rubber_eraser_(MONO).jpg);

練り消しゴム
#ref(120px-Kneaded_eraser.jpg);

電動字消器
#ref(120px-Electric_eraser.jpg);

消しゴムのおもちゃ
#ref(120px-Shaped_Erasers.JPG);

** 主なメーカー小さな見出し

[[トンボ鉛筆:https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%B3%E3%83%9C%E9%89%9B%E7%AD%86]] - MONO消しゴム外部リンク
[[シード:https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%83%89_(%E6%96%87%E5%85%B7)]] - レーダーシリーズなどを製造。
[[ヒノデワシ:https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%8E%E3%83%87%E3%83%AF%E3%82%B7]] - まとまるくんシリーズなどを製造。
[[ラビット:http://www.rabit.co.jp/]] - フォームイレーザーシリーズなどを製造。サクラクレパスグループ。
[[ぺんてる:https://ja.wikipedia.org/wiki/%E3%81%BA%E3%82%93%E3%81%A6%E3%82%8B]] - Ain消しゴムなどを製造。
[[ステッドラー:https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%83%83%E3%83%89%E3%83%A9%E3%83%BC]]
[[ロットリング:https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%83%E3%83%88%E3%83%AA%E3%83%B3%E3%82%B0]]

[[三菱鉛筆:https://ja.wikipedia.org/wiki/%E4%B8%89%E8%8F%B1%E9%89%9B%E7%AD%86]]、[[パイロット:https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%A4%E3%83%AD%E3%83%83%E3%83%88%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3]]といったいくつかの用品メーカーは自社製造せずOEM供給を受けている。日本字消工業会の加盟メーカーの製造品であれば、パッケージ上の[[クリーンマーク:http://www.jikeshi.gr.jp/mark/mark.html]]番号で個別の製造元が確認できる。

[[トップに戻る>FrontPage]]最初のページに戻るリンク

PukiWikiでページを作る際には、上で述べたような書き方を知っていれば、おおむね事足りると思います。

ですがせっかくなので、その他の便利なテクニックをいくつか紹介します。もし余裕があれば参考にしてください。

** MENU

[[TOP>FrontPage]]
[[自己紹介]]
[[ブログ]]
[[エッセイ]]
[[雑記メモ]]

#recent(20)

このように、WikiのようなCGIを使えば手軽に大規模なサイトを作り上げることができます。
HTMLをちまちま編集しなくて良いので、作業が楽ですね！😁

ページのデザインに気を取られずに、コンテンツを作ることに集中できるのもメリットです。

ちなみに先生は授業用のメモや、やることリスト、アイデア、雑記メモなどを自分専用のWikiで管理していたりします。

みなさんもぜひ活用してみてください。

今回の課題として、あなたがおすすめする店や人物などを先生に紹介する内容のまとめサイトをWikiで作成してください。
ページは３ページ作成するものとし、以下のような構成で作成してみましょう。

１ページ目：サイトの概要 / ２ページ目：詳しい情報 / ３ページ目：アクセス方法・関連リンクなど

１ページ目は FrontPage です。すでに書いてある内容は、削除してもかまいません。
１ページ目には、２、３ページ目へアクセスできるリンクを作成しておいてください。

課題用に専用のWikiを作成しても構いません。その場合はwikiフォルダを丸ごとコピーして使用してください。

サイトの構成に困ったら、以下のようなものが良いでしょう。参考にしてください。

• １ページ目：サイトの概要とアーティストのおおまかな説明。
  このサイトは○○という音楽アーティストについてのまとめサイトです。○○は○○という音楽グループのボーカルで、○○というヒット曲が有名です…
• ２ページ目：メンバー構成、ディスコグラフィーなど
  メインボーカル○○ ギター〇〇 ドラム〇〇 1985年結成… 写真など掲載。
• ３ページ目：関連リンク Wikipediaの該当サイト、他のファンサイトなどのリンク。

• １ページ目：サイトの概要とお店のおおまかな説明。
  このサイトはレストラン○○をお勧めするページです。○○は京都にあるイタリアレストランです。…
• ２ページ目：レストランのメニューや価格など。写真も適宜掲載。
• ３ページ目：レストランへのアクセスマップ、連絡先など。

上記の構成で作成したpukiwikiフォルダ全体を「圧縮フォルダ」機能を使って単一のファイルに圧縮し、moodleにアップロードして提出してください。

圧縮方法は、作業用フォルダ（PC → USBメモリ → htdocs フォルダなど）にアクセスし、そこにある pukiwiki フォルダを「右クリック」→「送る」→「圧縮フォルダ」です。

圧縮フォルダの名前は 学生番号 氏名 wiki.zip としてください。

圧縮フォルダの使い方については基礎実習ページの補足資料コーナーにある「圧縮フォルダの利用方法」記事を参照してください。

提出期限は、次週の授業日いっぱいまでとします。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

ウェブページ制作上の知識の一つとしてWikiを役立てて頂ければ幸いです。

以上で今回は終了です。おつかれさまでした。

次回は、ホームページをデザインする最新の規格「CSS（スタイルシート）」について解説します。
あなたのページのデザインをよりパワーアップさせます！

少し内容が多いかと思いますので、できれば事前に次回の資料に目を通して予習しておくことをおすすめします……😂
資料は毎週だいたい月曜日に更新です！

htdocs フォルダ直下にある index.php（あるいは index.html）を書き換えて pukiwiki/ へのリンクを作っておくと、１クリックで PukiWiki にアクセスできるので便利でしょう。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>基礎実習の課題ページ</title>
</head>
 
<body bgcolor="wheat" text="#444444">
<!-- 本文ここから -->

<table border="1" cellpadding="16" cellspacing="0" bgcolor="white" width="80%" align="center">
<tr><td>

<h1>コンピュータ基礎実習（上級）課題のページ</h1>

あなたは <?php include("count.php"); ?> 人目の訪問者です。<br>

<!-- ↓↓↓ ここから ↓↓↓ -->
<?php
date_default_timezone_set('Asia/Tokyo');   // タイムゾーンを日本標準時に設定
$t=time(); $h=(int)date('H',$t); $mes='';  // 現在時刻を取得
echo '<p>現在日時は、'.date('Y/m/d H:i',$t).' です。<br>'; // 日時を表示
// 時間に応じて変わるメッセージを準備
if($h < 6){ $mes='こんばんは。こんな遅い時間までお疲れさまです。'; }       // 0～5時
else if($h >=18){ $mes='こんばんは。遅くまでお疲れさまです。'; }           // 18時以降
else if($h < 12){ $mes='おはようございます。今日も一日頑張りましょう。'; } // 6～11時
else{ $mes='こんにちは。午後の優雅なひとときをお過ごしください。'; }       // 12～17時
echo $mes."</p>\r\n";    // メッセージを画面に表示
?>
<!-- ↑↑↑ ここまで ↑↑↑ -->

<p>ここにはコンピュータ基礎実習で作成した課題を掲載しておきます。</p>

<h2>課題</h2>

<p><a href="jikosyokai.html" target="_blank">自己紹介ページはこちら</a></p>
<p><a href="recipe.php" target="_blank">ゴブリン・シチューのレシピ</a></p>

<p><a href="gousei.pdn" target="_blank">合成写真</a><br>
<a href="button.pdn" target="_blank">ボタン画像</a></p>

<p><a href="trend/">私の○○サイト</a></p>

<p><a href="bbs/pppbbs.php" target="_blank">掲示板CGI</a><br>
<a href="calendar/" target="_blank">カレンダーCGI</a></p>

<p><a href="pukiwiki/" target="_blank">PukiWikiサイト</a></p>PukiWikiへのリンク

<h2>リンク集</h2>

<p><a href="https://www.cc.kyoto-su.ac.jp/~shimizu/" target="_blank">基礎実習のページ</a> <a href="https://cclms.kyoto-su.ac.jp/" target="_blank">moodle</a></p>

<p><a href="https://www.kyoto-su.ac.jp/entrance/index-ksu.html" target="_blank">学内TOP</a></p>

</td></tr>
</table>

<!-- 本文ここまで -->
</body>
</html>

戻る