コンピュータ基礎実習(上級) 第八回
CGIの応用とスタイルシート
清水淳紀
はじめに
前回の内容
CGIとは何か
CGIの基礎知識
CGIをサーバーにインストールする
CGIを実行してみる
今回の内容
より高度なCGIの例
wikiシステムのインストールと実行
スタイルシート(CSS)とは何か
CSSの役割
CSSの利点
CGIの復習
CGIとは
サーバー上でプログラムを動作させる仕組み。
Perl や PHP 等のプログラム言語が良く使われる。
CGIで出来ること
閲覧者の入力に応じた動的なページの作成。
サーバー側でのデータ保存。
サーバー側で特殊な処理が出来る。
複雑な計算、メール送信など。
(例)
掲示板 問い合わせフォーム アクセスカウンタ
アップローダー など
CGI動作の仕組み
ウェブサーバー
クライアント
(閲覧者のパソコン)
サーバーにアクセス
プログラムファイル
実行
ページが生成される
1.
2.
3.
4.
クライアントがサーバーにアクセス
サーバーでプログラム実行
サーバーがページを作成
結果がクライアントに表示される
サーバーは、とても忙しい。
CGIファイルの詳細
CGIはPerl や PHP で作成された物が多い。
それぞれの特徴
Perl
•ファイルの拡張子は .cgi または .pl (例) index.cgi sample_page.cgi
•CGIの歴史上古くから存在する。
•プログラムがやや難解になることがある。
•サーバーに配置後 パーミッションを修正しないと動作しない。
•日本語の文字化けが発生しやすく注意が必要
PHP
•ファイルの拡張子は .php
(例) index.php test02.php
•比較的新しいプログラム言語である。
•プログラム文法が比較的整理されており、習得しやすい。
•ファイルのパーミッション修正などは不要。
•日本語など世界各国の文字コードへのサポートが充実。
•Perl製CGIファイルは、サーバー上で動作させるために、ファイルに
[実行可能]という許可情報(パーミッション)を設定する必要がある。
•本講義では、比較的扱いが簡単なPHP製のCGIを使用することにします。
CGIを利用するには
CGIファイルを用意する
1.
公開サイトからダウンロードするのが簡単
初期設定する
2.
設定を必要に応じて書き換える
サーバーにアップロードする
3.
一部のCGIの場合、アップロード後にファイルのパーミッション
(権限)を設定する必要があるかもしれない。
CGIの応用
より複雑なCGIである wiki (ウィキ) システムを試す。
wiki システムとは
ブラウザ上からページを編集できるCGIシステム。
簡単な構文でページを編集できる。
ネットワーク上から誰でもページを書き換えて保存できる。
ウェブブラウザさえあれば書き換え作業ができる。
同じwiki内で文章間のリンクが張りやすく、
複雑なページ構造を持つサイトも作りやすい。
さまざまな派生バージョンがある。 (pukiwiki など)
wikipedia (ウィキペディア) で採用されていることで有名。
wikiを使ったページの作成例
特別な構文で文字を書くと、ページが出来上がる。
出典：Wikipedia内 wikiの解説ページより
http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD
wikiページ作成までの流れ
wiki構文でページ
入力
保存
ブラウザで表示
•編集モードにアクセスして、
ブラウザ上から直接入力。
•編集が終わったら[保存]ボタンを押すだけ。
•サーバー上にテキストファイルとして
直接保存される。
•wikiプログラムによって自動的に
適切なHTMLに変換されて表示される。
pukiwikiの利用
本講義では、wikiの派生バージョンである
pukiwiki を採用する
公式サイト
http://pukiwiki.sourceforge.jp/
pukiwiki は
オリジナルのwikiにさまざまな
拡張機能が搭載された
扱いやすいwikiです。
実際にサーバーにインストールして
動作を確認してみます。
pukiwikiのインストール手順
pukiwikiサイトからプログラムファイルをダウンロード
一部設定を変更
全てのファイルをアップロード
手順は通常のCGIと変わりません
pukiwiki は PHP言語で作成されており、編集などが容易。
大学のサーバーにもほぼ無改造でインストール可能。
pukiwikiのダウンロード
公式サイト
http://pukiwiki.sourceforge.jp/
ダウンロードのリンクをクリック。
次のページで最新バージョンのzip(圧縮フォルダ)を選択しダ
ウンロードする。
デスクトップ
等に保存。
pukiwikiの準備
圧縮フォルダの解凍
ダウンロードしたファイルはzip形式の圧縮フォルダである。
[右クリック]→[全て展開] などで圧縮を解除。
pukiwiki-1.4.7_notb のようなフォルダ名で展開される。
↑圧縮解除後
↑圧縮解除前
アイコンの違いに注意
pukiwiki-1.4.7_notb フォルダ内に、さらにpukiwiki-1.4.7_notb フォル
ダが出来て二重になっている場合があるので注意！
扱いやすいように pukiwiki-1.4.7_notb フォルダの名前を
wiki など簡単な名前に変更しておく。
二重になっている場合は、内部のフォルダの名前を変えて、
pukiwiki-1.4.7_notbフォルダの外に出しておく。
pukiwikiの初期設定１
初期設定
wikiフォルダ内の pukiwiki.ini.php ファイルが
メイン設定ファイルである。
サクラエディタで pukiwiki.ini.php を開く。
メモ帳では文字化けして編集できないかもしれない。
CGIを扱うときは、さまざまな日本語文字コードに対応できる
編集ツールが望ましい。
管理者パスワードを好きなものに書き換えて保存。
ここに好きなパスワードを書く。
wikiのページを書き換えるときに
このパスワードが必要になる。
adminpass で検索すると見つけやすい。
pukiwikiの初期設定２
その他設定しておくと良い箇所
ページタイトル
ページの表題として
画面上部に表示される
基本的には、初期設定をしなくても動作しますが、
管理者パスワードなどを設定しておくことをお勧めします。
その他pukiwiki.ini.php ではさまざまな設定が出来ますが、
必要に応じて設定を行うと良いでしょう。
pukiwikiのアップロード
public_html 内にアップロード
wikiフォルダをフォルダまるごと
public_html フォルダにアップロード。
URLでアクセス
wikiフォルダをアップロードした場合
http://www.cc.kyoto-su.ac.jp/~g000000/wiki/
でアクセスできます。
pukiwikiページの編集
編集はいつでもブラウザ上から行える
画面上部の[編集]を押すとページを編集できる。
wiki独特の構文については、[テキスト整形のルールを表示する]
リンクをクリックするとヘルプが出る。
ヘルプを見ながらページを編集すると良い。
ページが凍結されている場合は、
さっき決めた管理者パスワードで凍結解除してから編集する。
http://www.cc.kyoto-su.ac.jp/~g000000/wiki/? FormattingRules
で直接ヘルプを呼び出せる。 お気に入りに入れておくと便利。
編集が終わったら、画面上部の[凍結]で管理者パスワードを
入力しておくと、他人による書き換えを防げる。
いたずら等を防止するため編集を終えたら必ず凍結をしておきましょう。
各自自由にページを編集してみましょう。
pukiwikiデザインの変更
SKIN(スキン)の使用
スキンを使うことで見た目のデザインをさまざまに変えること
が出来ます。
スキン使用の手順
1.
2.
3.
スキンファイルを公開サイトからダウンロード
wikiフォルダ内の skin フォルダ内に、
スキン関連のファイルをアップロード
pukiwiki.ini.php を書き換えて、skin を有効にする。
スキンごとに手順は若干違う可能性があります。
各スキンに付属する説明書を確認してください。
pukiwikiデザインの変更例
iridスキンを使ってみる
1.
2.
3.
4.
pukiwiki 公式ページ http://pukiwiki.sourceforge.jp/
から以下のリンクをたどる。
左メニュー内[スキン] → [自作スキン]
→1.4.x向け コーナーの [irid] → [ダウンロード] リンク
zip圧縮フォルダを解凍する。iridフォルダができる。
iridフォルダを、そのままskinフォルダの下にアップロード。
pukiwiki.ini.phpを編集
編集箇所
SKIN で検索すると見つけやすい。
pukiwikiデザインの変更例
iridスキンの使用例
iridスキンは設定を変えることで
さらに数種類のデザインを選べます。
(詳細は先述のダウンロードページ参照。)
さまざまなスキンが配布されているので
試してみると良いでしょう。
(pukiwiki スキン 配布 等のキーワードで
検索すると良いでしょう。)
このようにページのデザインを
調整する際には
スタイルシート(CSS) と言う技術が
よく使われます。
スキンによってデザインが大幅に変わった
スタイルシート(CSS)について
スタイルシート(CSS :Cascading Style Sheet)
スタイルシートとは何か？
文字の大きさ・色・行間・装飾・レイアウトなど
文章の見栄えに関する設定がひとまとめになったもの。
CSSの利点
複数ページから同じCSSを参照すると、
ページの見栄えを統一できる。
CSSを入れ替えることでデザインを簡単に変更できる。
HTMLからレイアウトに関する設定を分離できる。
(例) wikiのスキン機能など
HTMLがすっきりして文章構造が把握しやすくなる。
ページごとにレイアウトの設定を書かなくてすむ。
HTMLでは不可能な細かなデザイン調整が出来る。
スタイルシートでページのデザインを行うのが最近の主流。
CSSの特徴
CSSの適用方法 ３通り
別ファイル (xxxx.css) に設定をまとめて記入しておける。
HTMLファイルの先頭にCSS設定を記入できる。
サイト全体のデザインをそろえる際に便利。
ページ固有の設定をする際に便利。
HTMLタグごとに個別に指定できる。
タグ単位で細かな調整が可能。
CSSの構文
CSSの例 (断片)
p#id { color : #ff3300; }
p#id
セレクタ。スタイルの効果が及ぶ範囲をあらわす。
{ ～ }
宣言ブロック。設定を記入する場所。
color:#ff3300;
宣言。 具体的なスタイルの記述。
color
プロパティ。 ：の左側部分。
#ff3300
値。 ：の右側部分。
;
デリミタ。宣言の最後は ； で終える。
；で区切って複数の宣言を列挙できる。
構文自体は比較的シンプルである。
プロパティの種類が多く、さまざまなデザイン効果が実現できる。
ネット上のCSS解説サイトなどが参考になる。
(解説サイトの例)
http://www.tohoho-web.com/css/
http://www.htmq.com/
など
次回の授業について
次週 CSSの詳細を解説します。
CSSを使ってサイトのデザインを行ってみましょう。
CSSによるデザイン変化
ページの内容は同じだが
CSSによってまったく異なるデザインになる。
次週に続く
© Copyright 2026 ExpyDoc
