情報科学III

平成２３年度前期情報科学III （理系コア科目）
サーバでのファイルの扱い、HTML
担当松永裕介
月曜日２限
本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明准
1
教授、岡村准教授等による以前の講義資料をもとにしています。
前回のおさらい（１）
 この講義の目標
– クライアントからのアクセスがあった時にサーバで実行され，
ブラウザ画面での表示を動的に生成するようなプログラムを
作る．
• クライアントからの情報に応じて，データベースを検索，
更新する．
 作業環境の説明
– 端末室のPC
– システム情報科学府のサーバ
– 出席管理システム
 サーバサイドプログラミングとは
2
前回のおさらい（２）－－基本的な作業環境
九州大学
教育用計算機システムのPC
Mac OS X
サーバ
システム情報のサーバ
サーバ
ファイル
IDとパスワードはすでに発行済
み
ファイル
UNIX
＋
webサーバ
他
IDとパスワードは
本日配布
このサーバには，webサーバの他に
PHP言語処理系
データベース管理システム（MySQL）
がインストールされている．
3
前回のおさらい（３）－－最終課題で製作するもの
SQL
クエリ
ブラウザ
PHPプログラムは，クライア
ントからのリクエストに応じ
てデータベースにアクセス
し，その結果を整形してブ
ラウザに返す
また，データベースにアク
セスする際には，SQL言語
によるクエリ（問い合わせ，
query）を発行する
web
サーバ
PHP
プログラム
検索・更新
の結果
データベース
管理システム
（DBMS）
データベース
4
本日やること

作業環境の説明（続き）
各システムでの作業の概要
 サーバのアカウント・パスワードの配布
 ログインのしかた
 UNIXコマンドの基礎
 HTML・PHPファイルの置き場所



文字コードの話
実習：簡単なwebページ作成



PC上でHTMLファイル作成
ファイルを適切なフォルダ（ディレクトリ）に複写
ブラウザで確認
5
作業環境の説明（続き）
6
各システムでの作業の概要
九州大学
教育用計算機システムのPC
システム情報のサーバ bossp
Mac OS X
ファイル
UNIX
＋webサーバ
＋PHP
＋SQL
ファイル
ファイルの編集
• テキストエディットを使用
ファイルの転送
• scpコマンドを使用
サーバ上のwebページ・PHPプログ
ラムの確認
• Safari を使用
リモートサーバへのアクセス
• sshコマンドを使用
（PCからリモートサーバのコマンドを実行）
ログイン
パスワードの変更
webページ・PHPプログラム用ディレクトリ
の作成（初回のみ）
• mkdir コマンド
• chmod コマンド
7
リモートサーバへのアクセス

昔はTelnet プロトコルによる端末接続を行っていた

Telnetは通信データを暗号化しないため，悪意のある第三者が通信
経路上にいた場合，「盗み聞き」を防げない


そこで，利用者認証の段階からすべての通信データを暗号化する
SSH（Secure Shell）プロトコルが考案された


最初に入力する ID やパスワードが盗まれる危険性も
現在では，Telnet を禁止し，SSH によるアクセスのみを許可するサーバ
が増えた
（Windows環境）
Tera Term にも，SSH 機能のための追加モジュールが提供されるよ
うになった

Tera Term の設定をおこなうときにSSHを利用するようにしなければならない
8
リモートサーバへのアクセス

Mac からリモートサーバへログインし，コマンド操作を行うため
の手順

Mac のターミナルを起動



Doc 上にあるターミナルのアイコンをクリック
アプリケーションフォルダの中にあるユーティリティフォルダを開き，その中のター
ミナルのアイコンをダブルクリックする
コマンドラインから sshコマンドを使用して接続する

接続先のアドレスは下のとおり
rupus.i.kyushu-u.ac.jp

sshコマンドは後に接続先アドレスを記入して起動する
ssh rupus.i.kyushu-u.ac.jp

sshコマンドは接続先のアカウント名が異なる場合も利用できる
ssh [email protected]
アカウント名
もちろん，自分のアカウントでないと
（パスワードを知らないと）ログインは
できません
9
rapusへのログイン
Last login: Fri Oct 2 16:00:55 on ttys000
macbook-3:~ isee08$ ssh rupus.i.kyushu-u.ac.jp
The authenticity of host ‘rupus.i.kyushu-u.ac.jp (133.5.19.
107)' can't be established.
RSA key fingerprint is
04:81:0f:d8:8e:9a:61:8f:12:e8:e2:ff:ff:ce:ee:9f.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added ‘rupus.i.kyushu-u.ac.jp,133.5.1
9.107' (RSA) to the list of known hosts.
[email protected]'s password:
Last login: Fri Oct 2 20:47:45 2009
[1TE09000X@rupus ~]$
パスワードを入力
プロンプト
これ以降，ログアウトするまでは，
キー入力がbosspに伝えられる
10
リモートサーバでの操作－UNIXのコマンド

Telnet や SSH でアクセスする場合，サーバに仕事を
させるには，キーボードからコマンド（文字列）をタイプ
して，Enter キーを押す

実行した結果の出力も文字列で画面（端末エミュレータ
ウィンドウ内）に表示される
前回どこからアクセスしたか
画面上で次に文字が入力される位置
示すカーソル（点滅表示）
Last login: Mon Apr 16 18:55:09 2007 from ...
[1TE09000X@bossp ~]$
サーバ（UNIX）が，利用者からのコマンドを待っている
ことを示す表示（プロンプト，prompt）
サーバへのアクセスを終了するときは，logout と入力して Enterキーを押す．
11
カレントディレクトリ

ディレクトリ（directory）



Windows の「フォルダ」と同等のものだが，
UNIXでは，伝統的に「ディレクトリ」と呼ん
でいる
残念ながら，UNIXでは，Windowsのよう
なグラフィカルな表示はできないことも多
い
カレントディレクトリ




現在自分が作業をしているディレクトリ
ある利用者がログインした直後のカレント
ディレクトリは，その利用者の「ホームディ
レクトリ」（略してホーム）と呼ばれる
ホームは，通常，ユーザ名と同じ名前に
なっている
また，「~」（ティルダ，tilde）という文字で表
すことがある
1TE09000X
+
doc
+
fun
－
kogi
file1
file2
12
UNIXコマンドの実行例（１）－パスワード変更

passwd コマンド

現在のパスワードを新しいものに変更する



現在のパスワードを入力（１回）
新しいパスワードを入力（２回）
辞書にあるようなつづりや，元のパスワードに似たもの，な
どは拒絶される
[1TE09000X@bossp ~]$ passwd
Changing password for user 1TE09000X.
Changing password for 1TE09000X
入力した内容は画面に表
(current) UNIX password:
示されず，カーソルも動か
New UNIX password:
ない．
Retype new UNIX password:
passwd: all authentication tokens updated successfully.
[1TE09000X@bossp ~]$
13
パスワードに関する注意点
忘れないうちに自分のパスワードを変更しておこう．
英数字を混ぜたもの（６文字以上８文字以下）がよい
当然のことだが，以下のようなパスワードは盗まれる危
険が高いので使うべきでない．
自分のユーザ名（ログイン名ともいう）と同じつづり
自分の姓または名と同じつづり
辞書に出ているような言葉と同じつづり
固有名詞でも，一般名詞でも
タレント・有名人の名前と同じつづり
アルファベットのみ，または，数字のみ
“Password”
14
UNIXコマンドの実行例（２）－ディレクトリ作成

mkdir （make directory）コマンド

カレントディレクトリ配下に，新しいディレクトリを作成する

ただし，カレントディレクトリ配下にすでにあるディレクトリのさらに
下など，カレントディレクトリ直下以外の場所に作ることもできる
[1TE09000X@bossp ~]$ mkdir public_html
[1TE09000X@bossp ~]$
15
UNIXコマンドの実行例（３）－ディレクトリの移動・確認

cd （change directory）コマンド




カレントディレクトリを移動させる
１つ上のディレクトリに戻るには，「..」（ピリオド２つ）
何も添えずに「cd」とだけタイプすると，ホームに戻る
pwd （print working directory）コマンド

カレントディレクトリを表示する
[1TE09000X@bossp ~]$ cd public_html
[1TE09000X@bossp public_html]$ pwd
/home/1TE09000X/public_html
[1TE09000X@bossp public_html]$ cd ..
[1TE09000X@bossp ~]$
16
簡単な作業
ここで，これ以降の課題ファイルを置くためのディレクトリ
public_html を，自分のホームディレクトリに直下に
作成しておこう．
通常，各ユーザのwebページは，ホームディレクトリ配下
の public_html ディレクトリ配下に置かなければなら
ない．
rupus 上で動作するWebサーバも上の設定にしている
17
UNIXコマンドの実行例（４）－ファイルの一覧表示

ls コマンド（アルファベット小文字のエルとエス．listから）


単に ls とだけタイプして Enter キーを押すと，カレントディレクトリ配
下のファイルやディレクトリの名前だけを一覧表示する
「LANG=C ls –l」とタイプすると，名前の他に，様々な情報を表示す
る


LANG=Cは，端末エミュレータが日本語をうまく処理できないような場合
に日本語メッセージ出力を抑止して，画面上の文字化けを防ぐための
「おまじない」
そのような制約がない場合には，ls –l だけでよい
日本語が正しく表示できる場合
[1TE09000X@bossp ~]$ ls
には，LANG=C を付ける必要は
public_html
ない．
[1TE09000X@bossp ~]$ LANG=C ls –l
total 8
drwxr-xr-x 2 1TE09000X student 4096 Apr 17 10:34 public_html
[1TE09000X@bossp ~]$
18
UNIXコマンドの実行例（５）－ファイル等の削除

rm （remove）コマンド


ファイルを削除する
rmdir （remove directory）

ディレクトリを削除する
日本語が正しく表示できる場合
には，LANG=C を付ける必要は
ない．
[1TE09000X@bossp ~]$ mkdir test
[1TE09000X@bossp ~]$ LANG=C ls –l
total 16
drwxr-xr-x 2 1TE09000X student 4096
drwxr-xr-x 2 1TE09000X student 4096
[1TE09000X@bossp ~]$ rmdir test
[1TE09000X@bossp ~]$ LANG=C ls –l
total 8
drwxr-xr-x 2 1TE09000X student 4096
[1TE09000X@bossp ~]$
Apr 17 10:34 public_html
Apr 17 10:35 test
Apr 17 10:34 public_html
19
UNIXコマンドの実行例（６）－利用権設定

ファイルやディレクトリの利用権設定

自分自身・同じグループ内の他の利用者・それ以外の人が，自分の
ファイルやディレクトリに対して，どのような操作をすることを許可する
か


読み出し（Read）/書き込み（Write）/実行（eXecute）
chmod （change mode）コマンド

自分のファイルやディレクトリの利用権設定を変更する
日本語が正しく表示できる場
合には，LANG=C を付ける必
要はない．
[1TE09000X@bossp ~]$ chmod 711 ~
[1TE09000X@bossp ~]$ LANG=C ls –ld ~
total 8
drwx--x--x 2 1TE09000X student 4096 Apr 17 10:34 /home/1TE09000X
[1TE09000X@bossp ~]$
20
ここで，webページがサーバの外からブラウザでアクセスで
きるよう，自分のホームディレクトリの利用権設定を変更して
おこう．
① 自分のホームディレクトリの利用権設定を「711」に変更する
chmod 711 ~
② ホームディレクトリの利用権がどうなっているかを確認する
（日本語が表示できないとき）LANG=C ls –ld ~
（日本語が表示できるとき） ls –ld ~
③ 上記②のコマンドの出力の左端が以下のようになっていれ
ばOK
drwx--x--x
ここをよく見比べる
5 1TE09000X
...
実際は自分のIDになる
21
ファイルの転送

Telnet と同様に，暗号化を行わないファイル転送プロ
トコルとして，FTP（file transfer protocol）があった


やはり，ファイルのアップロード・ダウンロードに際し，悪意
のある第三者による「盗み聞き」の危険性が…
そこで，暗号化を行うファイル転送方式が考案された


SCP（secure copy protocol）
SFTP（SSH file transfer protocol）
22
ファイルの転送（scpコマンド）

この講義では，scp コマンドを使用する

コピー元のファイルをコピー先のファイルにコピーする
scp コピー元コピー先

リモートのファイルはコンピュータ名を前に付ける



コンピュータ名とファイル名の間にコロン（:）を付ける
ファイル名はディレクトリ名を含んでよい
ホームディレクトリからのパスを書くのがよい
rupus.i.kyushu-u.ac.jp:~/public_html/test.html
コンピュータ名

パス名
コピー元，コピー先のどちらがリモートであってもよい
23
scpコマンドの使用法

Mac上のファイルをbosspのpublic_htmlディレクトリ
へ送る
scp index.html rupus.i.kyushu-u.ac.jp:~/public_html

上のコマンドでは，
index.html が送られるファイル
public_htmlディレクトリ内にindex.htmlとしてコピー
24
文字コードの話
25
計算機は文字をどのように扱うか？

計算機のメモリ・ディスク（ファイル）の中に格納されて
いるデータでも，通信でやりとりされるデータでも，す
べての文字（character）は「番号」（code）で表されて
いる
H e l l o !
72


101
108
108
111
33
ただし，実際には，十進数ではなく二進数である
どの文字をどの番号に対応させるか，というルールを，
「文字コード」という
26
むかしむかし…

メーカごとに計算機内部で使用する文字コードがまちまちだっ
た



これでは，計算機間でデータのやり取りができない
そこで，標準化の動きが始まった
1963年，ASCII（American Standard Code for Information
Interchange，アスキーと読む）規格が誕生

アメリカで日常使われる文字は100未満





アルファベット26文字×2（大文字・小文字）
数字 0～9
その他の印刷可能文字（#，$など）
これに30程度の制御文字（delete，carriage return，line feedなど）を
加えても7ビット（27＝128）で十分
パリティ検査のために1ビット余計に付けても8ビット（1バイト）
27
ASCIIコード表
28
非米語圏は？



$の代わりにポンド記号を必要とする英国の英語
アルファベットにウムラウトなどの記号のつくヨーロッ
パ系言語
アルファベット以外の文字を基礎とする言語
「子音・母音・子音」の組み合わせが１文字となる韓国語
 それぞれ数万の漢字を持つ日本語・中国語

などなど
オリジナルのASCIIコードのままでは表現できないた
め，ASCIIコードの微妙な拡張や，各言語用の文字
コードが多数考案された
29
日本でよく利用される文字コードのいろいろ

JISコード（ISO 2022-JP）



Shift_JISコード



インターネット上でメールやwebページを送受信するときの標準的な外部コード（外部と
のやり取りに使用する文字コード）
2バイト＝全角1文字
Microsoft系のOSを載せたPCでよく用いられる，日本独特の内部コード（計算機内部で
使用するコード）
2バイト＝全角1文字
EUCコード（EUC-JP）


日本では，UNIX機でよく用いられてきた内部コード
2バイト＝全角1文字


中国・韓国では，同様のコード（EUC-CN，EUC-KR）がPCの標準的な内部コードにもなった
UNICODE


言語ごとに文字コードを用意するのではなく，世界の文字を統一的に表そうとする方式
16ビットではなく21ビットで1文字を表す



日本・中国・韓国の漢字を無理に統合して文字数を抑えたことなどから，不満・反発も起きて
いる
ネットワーク上でやり取りするときには，これをさらに UTF-8 と呼ばれる形式に変換
これを内部コードに採用する UNIX（Linux）も増えつつある
30
実習に用いる計算機環境では...

PC では



Mac では


Shift_JIS が普通
テキストファイルの改行コードは
「CR＋LF」
CR（Carriage Return）
LF（Line Feed）
テレタイプの行頭復帰・行送
り文字に由来する制御文字
コードの名称．
UTF-8 になっているようだ
サーバでは




CentOSの標準文字コードが UTF-8
テキストファイルの改行コードは「LF」のみ
MySQLも，データベースに非ASCII文字を格納する際に，データを
UTF-8 形式で表現する
PHPで作成するプログラムも，同じ文字コードに合わせたほうが都合
がよいので，UTF-8 にしたい
31
作業の際に使用する文字コード
九州大学
教育用計算機システムのPC
システム情報のサーバ bossp
Mac OS X
UTF-8
UNIX
＋webサーバ
＋PHP
＋SQL
UTF-8
テキストエディットでファイルを作
成するとき
• UTF-8形式で保存すること
ターミナルでサーバにアクセスす
るとき
• 送受信に用いるコードは
UTF-8になっている
• 異なる文字コードの場合は，も
ちろん文字化けしてしまう
（標準の文字コードが UTF-8）
（改行コードは「LF」）
（PCからリモートサーバ
のコマンドを実行する）
（コマンドの実行結果がPC
のウィンドウ内に表示される）
32
日本語がうまく表示できないときの「文字化け」
[1TE09000X@bossp ~]$ ls -l
合計 16
drwxr-xr-x 2 1TE09000X teacher 4096
drwxr-xr-x 2 1TE09000X teacher 4096
[1TE09000X@bossp ~]$
4月 17 17:26 public_html
4月 17 17:27 test
サーバはこんな風に表示しているつもりなのに…
ターミナルの画面ではこんな風になってしまう…
[1TE09000X@bossp ~]$ ls -l
┗6
drwxr-xr-x 2 1TE09000X teacher 4096
drwxr-xr-x 2 1TE09000X teacher 4096
[1TE09000X@bossp ~]$
羆7 17:26 public_html
羆7 17:27 test
たぶん，今年度の環境ではほとんど起こらないであろう
33
本日の演習と課題
• 演習
– 各人の受講科目を時間割を表形式で表示する
Web ページを作成しなさい。（日本語表示でなく
てもよい。）
• 課題
– 演習で作成した時間割に
• 適切に色分をして（例、必須は赤にするなど。）
• 連続するコマをまとめる
• など
– 表示が出来るようにしなさい。
34
資料（HTML）
35
Webページの記述言語 HTML





現在のWebページはHTML (Hyper Text Markup Language)
によって書かれている。
HTMLは､Web上でドキュメントや写真､音声､サービスなどを
提供するために開発された。
最新バージョンは 4.01で
http://www.w3.org/TR/html401/
で､その仕様が定義されている。
ワープロでは、文字の大きさや色などの属性を持っていて、そ
れらを指定することで、様々な表現ができる。HTMLは、このよ
うな属性指定をする言語である。
タグと呼ばれる記号を利用して､ドキュメントに様々な意味づけ
（フォントの変更､リンク､画像の表示､プログラムの起動など）を
行う。
36
文字列（表示内容）と構造の分離


表示する文字列
文字列の加工法（表示方法）






タグで記述
見出し
文字のフォント（文字の大きさ，文字の色など）
左揃え，右揃え，中央揃え
箇条書き
表
フォーム
文字列で構造を作るのはよくない（避けるべき）
37
HTMLのタグ

「<」と「>」に囲んだもの

（例：<html>や<body>）
タグには意味がある

例：htmlタグ（<html>）
• html文書の始まり
• 「<html>」と言う文字列が表示されるのではない

開始タグと終了タグ

開始タグ



タグの名前を「<」「>」で囲む
タグの名前の後に属性を書くことができる
終了タグ

（例：<html>）
（例：</html>）
タグの名前の前に「/」を付けて「<」「>」で囲む
<h1> ～の文字列 </h1>
開始タグ
終了タグ
開始タグと終了タグにはさ
まれた文字列に対して文字
飾りを行う
38
HTMLの基本タグ

基本のタグ




HTMLタグ
HEADタグ
TITLEタグ
BODYタグ
HTMLで記述されている範囲を示す
ヘッダであることを示す
タイトルバーに表示するタイトルを示す
ページの本体を示す
39
HTMLの基本的な形
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
HTML
<head> <title> … </title> </head>
要
素
<body> … </body>
</html>
ブラウザのタイトルバーで
表示される内容
ブラウザの本体部分で表
示される内容
40
見出し




h1 ～ h5 タグ
開始タグと終了タグに囲まれた文字列を見出しとみな
す
数字は見出しのレベルを表す
レベルに合わせて，文字の大きさが変わる
<h1>はじめに</h1>
ブラウザ上に見出しとして，
「はじめに」が表示される
41
フォント

font タグ



<font 属性>
使用するフォントを変更する
文字の大きさや色などを属性に記述


color属性
size属性
<font color="red">赤</font>
color属性
<font size="-2">赤</font>
ブラウザに「赤」と表示される
小さな文字で「赤」
42
揃え
段落を左や右に揃えたり，中央に置いたりする
 左揃え
（デフォルト）
段落を示すタグ


<p>
右揃え



なにも指定しなくてよい
p タグを利用
div タグを利用
<p align="right">
<div align="right">
中央揃え
p タグを利用
 div タグを利用
 center タグ

<p align="center">
<div align="center">
<center>
43
箇条書き

ul タグ




項目の先頭に「●」のような記号がつく箇条書き
unordered list の頭文字
各項目は<li>タグの開始タグと終了タグで囲む
ol タグ



項目の先頭に「1.」のような数字がつく箇条書き
ordered list の頭文字
各項目は<li>タグの開始タグと終了タグで囲む
<ul>
<li>1つ目の内容</li>
<li>2つ目の内容</li>
</ul>
• 1つ目の内容
• 2つ目の内容
44
表

table タグ


罫線を引くかどうか，属性で罫線の太さ，罫線と内容の間
隔などを指定することが可能
table タグ内で使用できるタグ
tr タグで横一列を表す
 td タグで各セルを表す

<table border cellpadding=5>
<tr><td>5/11(月)</td><td>国語</td>
<td>数学</td><td>社会</td>
</tr>
<tr><td>5/12(火)</td><td>理科</td>
<td>英語</td>
</tr>
</table>
45

Download Report