情報科学III

平成20年度情報科学III （理系コア科目・２年生）
サーバでのファイルの扱い、HTML
担当岡村耕二
月曜日２限
http://okaweb.ec.kyushu-u.ac.jp/lectures/jk3/
本資料の一部は、堀良彰准教授、天野浩文准教授等による
1
以前の講義資料をもとにしています。
前回のおさらい（１）
 この講義の目標
– クライアントからのアクセスがあった時にサーバで実行され，
ブラウザ画面での表示を動的に生成するようなプログラムを
作る．
• クライアントからの情報に応じて，データベースを検索，
更新する．
 作業環境の説明
– 端末室のPC
– システム情報科学府のサーバ
– 出席管理システム
 サーバサイドプログラミングとは
2
前回のおさらい（２）－－基本的な作業環境
九州大学
教育用計算機システムのPC
Windows
XP
サーバ
システム情報のサーバ
サーバ
ファイル
IDとパスワードはすでに発行済
み
ファイル
UNIX
＋
webサーバ
他
IDとパスワードは
本日配布
このサーバには，webサーバの他に
PHP言語処理系
データベース管理システム（MySQL）
がインストールされている．
3
前回のおさらい（３）－－最終課題で製作するもの
SQL
クエリ
ブラウザ
PHPプログラムは，クライア
ントからのリクエストに応じ
てデータベースにアクセス
し，その結果を整形してブ
ラウザに返す．
また，データベースにアク
セスする際には，SQL言語
によるクエリ（問い合わせ，
query）を発行する．
web
サーバ
PHP
プログラム
検索・更新
の結果
データベース
管理システム
（DBMS）
データベース
4
本日やること
 作業環境の説明（続き）
– 各システムでの作業の概要
– サーバのアカウント・パスワードの配布
– ログインのしかた
– UNIXコマンドの基礎
– HTML・PHPファイルの置き場所
 文字コードの話
 実習：簡単なwebページ作成
– PC上でHTMLファイル作成
– ファイルを適切なフォルダ（ディレクトリ）に複写
– ブラウザで確認
5
各システムでの作業の概要
九州大学
教育用計算機システムのPC
システム情報のサーバ bossp
Windows
XP
ファイル
UNIX
＋webサーバ
＋PHP
＋SQL
ファイル
ファイルの編集
• TeraPad を使用
ファイルの転送
• WinSCP3 を使用
サーバ上のwebページ・PHPプログ
ラムの確認
• Internet Explorerを使用
リモートサーバへのアクセス
• Tera Term Pro を使用
（PCからリモートサーバのコマンドを実行）
ログイン
パスワードの変更
webページ・PHPプログラム用ディレクトリ
の作成（初回のみ）
• mkdir コマンド
• chmod コマンド
6
PCのデスクトップ画面
このあたりに
Tera Term Pro
TeraPad
のアイコンが
ある．
残念ながら，WinSCP3のアイ
コンはデスクトップ上には出て
いない．
左下のスタートメニューから探
して起動すること．
7
リモートサーバへのアクセス－Tera Term Pro
 PCからリモートサーバへログインし，コマンド操作を行うための端末エミュ
レータソフト（フリー）
– http://hp.vector.co.jp/authors/VA002416/
 もともとは，Telnet プロトコルによる端末接続をサポートしていた．
– Telnetは通信データを暗号化しないため，悪意のある第三者が通信経
路上にいた場合，「盗み聞き」を防げない．
• 最初に入力するIDやパスワードが盗まれる危険性も．
– そこで，利用者認証の段階からすべての通信データを暗号化する SSH
（Secure Shell）プロトコルが考案された．
• 現在では，Telnet を禁止し，SSH によるアクセスのみを許可する
サーバが増えた．
– Tera Term Pro にも，SSH機能のための追加モジュールが提供されるよう
になった．
 教育用計算機システムの Tera Term Proでも SSH が利用できるので，今回
の講義でも必ず SSH を使用すること．
8
Tera Term Pro の操作（１）
 デスクトップのアイコンをダブルクリックして起動
この部分のホスト
を下のものに変
更する．
bossp.is.kyushu-u.ac.jp
9
Tera Term Pro の操作（２）
 セキュリティ警告が表示されるが，ホスト名を正しく入力できて
いることが確認できたら，そのまま続行する．
10
Tera Term Pro の操作（３）
 「SSH認証」ダイアログで，ユーザ名とパスワードを入力する．
ユーザ名は，教育用システムのアカウント名と同じにしてある．
パスワードは講義中
に別途伝達する．
11
Tera Term Pro の操作（４）
 ログインに成功すると，以下のようなウィンドウが現れる．
このウィンドウに表示
される内容は，リ
モートサーバ上での
コマンドの入力とそ
れに対する画面出
力である．
入力されたコマンド
は，PCではなくサー
バで実行される．
12
リモートサーバでの操作－UNIXのコマンド
 Telnet や SSH でアクセスする場合，サーバに仕事をさせるに
は，キーボードからコマンド（文字列）をタイプして，Enter キーを
押す．
– 実行した結果の出力も文字列で画面（端末エミュレータウィ
ンドウ内）に表示される．
前回どこからアクセスしたか
画面上で次に文字が入力される位置
示すカーソル（点滅表示）
Last login: Mon Apr 16 18:55:09 2007 from ...
[te999999@bossp ~]$
サーバ（UNIX）が，利用者からのコマンドを待っている
ことを示す表示（プロンプト，prompt）
サーバへのアクセスを終了するときは，logout と入力して Enterキーを押す．
13
カレントディレクトリ
 ディレクトリ（directory）
– Windows の「フォルダ」と同等のものだが，
UNIXでは，伝統的に「ディレクトリ」と呼ん
でいる．
– 残念ながら，UNIXでは，Windowsのような
グラフィカルな表示はできないことも多い．
 カレントディレクトリ
– 現在自分が作業をしているディレクトリ
– ある利用者がログインした直後のカレント
ディレクトリは，その利用者の「ホームディレ
クトリ」（略してホーム）と呼ばれる．
– ホームは，通常，ユーザ名と同じ名前に
なっている．また，「~」（ティルダ，tilde）とい
う文字で表すことがある．
te999999
+
doc
+
fun
－
kogi
file1
file2
14
UNIXコマンドの実行例（１）－パスワード変更
 passwd コマンド
– 現在のパスワードを新しいものに変更する．
• 現在のパスワードを入力（１回）
• 新しいパスワードを入力（２回）
– 辞書にあるようなつづりや，元のパスワードに似たもの，など
は拒絶される．
[te999999@bossp ~]$ passwd
Changing password for user te999999.
Changing password for te999999
入力した内容は画面に表
(current) UNIX password:
示されず，カーソルも動か
New UNIX password:
ない．
Retype new UNIX password:
passwd: all authentication tokens updated successfully.
[te999999@bossp ~]$
15
忘れないうちに自分のパスワードを変更しておこう．
英数字を混ぜたもの（６文字以上８文字以下）がよ
い．
当然のことだが，以下のようなパスワードは盗まれる
危険が高いので使うべきでない．
自分のユーザ名（ログイン名ともいう）と同じつづり
自分の姓または名と同じつづり
辞書に出ているような言葉と同じつづり
固有名詞でも，一般名詞でも
タレント・有名人の名前と同じつづり
アルファベットのみ，または，数字のみ
“Password”
16
UNIXコマンドの実行例（２）－ディレクトリ作成
 mkdir （make directory）コマンド
– カレントディレクトリ配下に，新しいディレクトリを作成する．
• ただし，カレントディレクトリ配下にすでにあるディレクトリ
のさらに下など，カレントディレクトリ直下以外の場所に作
ることもできる．
[te999999@bossp ~]$ mkdir public_html
[te999999@bossp ~]$
17
UNIXコマンドの実行例（３）－ディレクトリの移動・確認
 cd （change directory）コマンド
– カレントディレクトリを移動させる．
– １つ上のディレクトリに戻るには，「..」（ピリオド２つ）
– 何も添えずに「cd」とだけタイプすると，ホームに戻る．
 pwd （print working directory）コマンド
– カレントディレクトリを表示する．
[te999999@bossp ~]$ cd public_html
[te999999@bossp public_html]$ pwd
/home/te999999/public_html
[te999999@bossp public_html]$ cd ..
[te999999@bossp ~]$
18
ここで，次回以降の課題ファイルを置くためのディレ
クトリ public_html を，自分のホームディレクトリに
直下に作成しておこう．
通常，各ユーザのwebページは，ホームディレクトリ
配下の public_html ディレクトリ配下に置かなけ
ればならない．
19
UNIXコマンドの実行例（４）－ファイルの一覧表示
 ls コマンド（アルファベット小文字のエルとエス．listから）
– 単に ls とだけタイプして Enter キーを押すと，カレントディレクトリ配下
のファイルやディレクトリの名前だけを一覧表示する．
– 「LANG=C ls –l」とタイプすると，名前の他に，様々な情報を表示す
る．
• LANG=Cは，端末エミュレータが日本語をうまく処理できないような場
合に日本語メッセージ出力を抑止して，画面上の文字化けを防ぐた
めの「おまじない」
• そのような制約がない場合には，ls –l だけでよい．
日本語が正しく表示できる場合
[te999999@bossp ~]$ ls
には，LANG=C を付ける必要は
public_html
ない．
[te999999@bossp ~]$ LANG=C ls –l
total 8
•
drwxr-xr-x
2 te999999 student 4096 Apr 17 10:34 public_html
[te999999@bossp ~]$
20
UNIXコマンドの実行例（５）－ファイル等の削除
 rm （remove）コマンド
– ファイルを削除する．
 rmdir （remove directory）
日本語が正しく表示できる場合
には，LANG=C を付ける必要は
ない．
– ディレクトリを削除する．
[te999999@bossp ~]$ mkdir test
[te999999@bossp ~]$ LANG=C ls –l
total 16
drwxr-xr-x 2 te999999 student 4096
drwxr-xr-x 2 te999999 student 4096
[te999999@bossp ~]$ rmdir test
[te999999@bossp ~]$ LANG=C ls –l
total 8
drwxr-xr-x 2 te999999 student 4096
[te999999@bossp ~]$
Apr 17 10:34 public_html
Apr 17 10:35 test
Apr 17 10:34 public_html
21
UNIXコマンドの実行例（６）－利用権設定
 ファイルやディレクトリの利用権設定
– 自分自身・同じグループ内の他の利用者・それ以外の人が，
自分のファイルやディレクトリに対して，どのような操作をす
ることを許可するか
• 読み出し（Read）/書き込み（Write）/実行（eXecute）
 chmod （change mode）コマンド
– 自分のファイルやディレクトリの利用権設定を変更する．
[te999999@bossp ~]$ chmod 711 ~
[te999999@bossp ~]$ LANG=C ls –ld ~
total 8
drwxr-xr-x 2 te999999 student 4096 Apr 17
[te999999@bossp ~]$
日本語が正しく表示できる場
合には，LANG=C を付ける必
要はない．
10:34 /home/te999999
22
ここで，webページがサーバの外からブラウザでアクセスで
きるよう，自分のホームディレクトリの利用権設定を変更して
おこう．
① 自分のホームディレクトリの利用権設定を「711」に変更する
chmod 711 ~
② ホームディレクトリの利用権がどうなっているかを確認する．
（日本語が表示できないとき）LANG=C ls –ld ~
（日本語が表示できるとき） ls –ld ~
③ 上記②のコマンドの出力の左端が以下のようになっていれ
ばOK．
drwx--x--x
ここをよく見比べる
5 te999999
...
実際は自分のIDになる
23
ファイルの編集－TeraPad
 デスクトップのアイコンをダブルクリックして起動
「メモ帳」とたいして
変わらないので，
操作法の説明は省
略する．
24
ファイルの転送－WinSCP3
 Telnet と同様に，暗号化を行わないファイル転送プロトコルとし
て，FTP（file transfer protocol）があった．
– やはり，ファイルのアップロード・ダウンロードに際し，悪意の
ある第三者による「盗み聞き」の危険性が…
 そこで，暗号化を行うファイル転送方式が考案された．
– SCP（secure copy protocol）
– SFTP（SSH file transfer protocol）
 WinSCP3は，SCP/SFTP 両方の機能を持つファイル転送ソフト
– http://winscp.net/eng/docs/lang:jp
25
WinSCP3の操作（１）
 起動直後のウィンドウ
– 教育用計算機のUNIXホストしか登録されていないので，
「新規」ボタンをクリックする．
26
WinSCP3の操作（２）
 「ホスト名」のところに bossp.is.kyushu-u.ac.jp
を入力
 ユーザ名・パスワードも入力して，「ログイン」ボタンをクリックす
る．
「秘密鍵」は空白の
ままでよい
27
WinSCP3の操作（３）
 警告が表示されるが，ホスト名を正しく入力できていることが確
認できたら，そのまま続行する．
– ホスト名は，下に隠れているウィンドウの上部に表示されて
いる．
28
WinSCP3の操作（４）
 接続に成功すると，左右に分かれたエクスプローラ型のウィンド
ウが現れる．あとはドラッグアンドドロップでOK．
ローカル
（PC）側の
ファイル一覧
リモート
（サーバ）側の
ファイル一覧
アップロード
ダウンロード
29
文字コードの話
なぜ，LANG=C などという「おまじない」を付ける
必要があるのか…
30
計算機は文字をどのように扱うか？
 計算機のメモリ・ディスク（ファイル）の中に格納されているデー
タでも，通信でやりとりされるデータでも，すべての文字
（character）は「番号」（code）で表されている．
H e l l o !
72
101
108
108
111
33
– ただし，実際には，十進数ではなく二進数である．
 どの文字をどの番号に対応させるか，というルールを，「文字
コード」という．
31
むかしむかし…
 メーカごとに計算機内部で使用する文字コードがまちまちだっ
た．
– これでは，計算機間でデータのやり取りができない．
– そこで，標準化の動きが始まった．
 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バイト）．
32
非米語圏はどうなるの？
 $の代わりにポンド記号を必要とする英国の英語
 アルファベットにウムラウトなどの記号のつくヨーロッパ系言語
 アルファベット以外の文字を基礎とする言語
– 「子音・母音・子音」の組み合わせが１文字となる韓国語
– それぞれ数万の漢字を持つ日本語・中国語
などなど
オリジナルのASCIIコードのままでは表現できないため，ASCII
コードの微妙な拡張や，各言語用の文字コードが多数考案さ
れた．
33
日本でよく利用される文字コードのいろいろ
 JISコード（ISO 2022-JP）
– インターネット上でメールやwebページを送受信するときの標準的な外部コード
（外部とのやり取りに使用する文字コード）．2バイト＝全角1文字．
 Shift_JISコード
– Microsoft系のOSを載せたPCでよく用いられる，日本独特の内部コード（計算機
内部で使用するコード）． 2バイト＝全角1文字．
 EUCコード（EUC-JP）
– 日本では，UNIX機でよく用いられてきた内部コード． 2バイト＝全角1文字．
• 中国・韓国では，同様のコード（EUC-CN，EUC-KR）がPCの標準的な内部
コードにもなった．
 UNICODE
– 言語ごとに文字コードを用意するのではなく，世界の文字を統一的に表そうとす
る方式．16ビットではなく21ビットで1文字を表す．
• 日本・中国・韓国の漢字を無理に統合して文字数を抑えたことなどから，不
満・反発も起きている．
– ネットワーク上でやり取りするときには，これをさらに UTF-8 と呼ばれる形式に変
換
– これを内部コードに採用する UNIX（Linux）も増えつつある．
34
実習に用いるサーバでは...
 PC では
– Shift_JIS が普通
– テキストファイルの改行コードは
「CR＋LF」
CR（Carriage Return）
LF（Line Feed）
テレタイプの行頭復帰・行送
り文字に由来する制御文字
コードの名称．
 サーバでは
– CentOSの標準文字コードが UTF-8
– テキストファイルの改行コードは「LF」のみ
– MySQLも，データベースに非ASCII文字を格納する際に，
データを UTF-8 形式で表現する．
– PHPで作成するプログラムも，同じ文字コードに合わせたほ
うが都合がよいので，UTF-8 にしたい．
35
作業の際に使用する文字コード
九州大学
教育用計算機システムのPC
システム情報のサーバ bossp
Windows
XP
UTF-8
UNIX
＋webサーバ
＋PHP
＋SQL
UTF-8
TeraPad でファイルを作成するとき
• UTF-8形式で保存すること
• 改行コードは「LF」にすること
Tera Term Pro でサーバにアクセ
スするとき
• 送受信に用いるコードを
UTF-8に設定できないと，画面
表示が一部文字化けすること
がある．
（標準の文字コードが UTF-8）
（改行コードは「LF」）
（PCからリモートサーバ
のコマンドを実行する）
（コマンドの実行結果がPC
のウィンドウ内に表示される）
36
日本語がうまく表示できないときの「文字化け」
[amano@bossp ~]$ ls -l
合計 16
drwxr-xr-x 2 amano teacher 4096
drwxr-xr-x 2 amano teacher 4096
[amano@bossp ~]$
4月 17 17:26 public_html
4月 17 17:27 test
サーバはこんな風に表示しているつもりなのに…
Tera Term Pro の画面ではこんな風になってしまう…
[amano@bossp ~]$ ls -l
┗6
drwxr-xr-x 2 amano teacher 4096
drwxr-xr-x 2 amano teacher 4096
[amano@bossp ~]$
羆7 17:26 public_html
羆7 17:27 test
37
HTMLについて
• 簡単なチュートリアル「初心者向けHTMLガイド1.1」
(http://itslab.csce.kyushu-u.ac.jp/~hori/lecture/cs3/2007/ncsa-j.html)
• 全体の構造
<html>
<head>
<meta http-equiv=“CONTENT-TYPE” CONTENT=“text/html; CHARSET=UTF-8”>
<title>（ページのタイトルをここにかく）</title>
</head>
<body>
（ページ本体を記述する HTML を書く）
</body>
</html>
38
本日の実習課題の説明
39
本日の課題－作業環境の確認
 TeraPad で簡単な HTML ファイル(コンテンツは自由：自己紹介など、ただし、
個人・プライバシー情報は含めないようにしてください。)を作成して，UTF-8
形式で保存する．
– 保存する際には，「ファイル」メニューの中の，「文字/改行コード指定保
存」を選択する．
• 文字コード：UTF-8
• 改行コード：LF
 WinSCP3 を用いて，そのファイルをサーバ bossp のディレクトリ
public_html に転送する．
 Internet Explorer で，自分の web ページが表示できることを確認する．
– http://bossp.is.kyushu-u.ac.jp/~te999999/ （ファイル名）
 作成した上記 web ページのURLを，RAMシステムの「レポート」機能で提出
する．
– 「レポートのURL」欄を正しく修正してから，提出すること．
40
教育用システムの Tera Term について
（補足と訂正）
41
Tera Term と UTF-8 コード
 Tera Term には複数のバージョンがある．
– Tera Term Pro (SSH機能あり，UTF-8なし）
– UTF-8 対応 Tera Term （SSH 機能あり）
 教育用システムの PC に，上記の２種類が両方インストールさ
れているものと，UTF-8なしのものだけがインストールされている
ものがある模様．
– UTF-8対応の Tera Term であれば，LANG=C のおまじない
を付けなくても，日本語が表示できる．
– UTF-8に対応していない Tera Term の場合には，LANG=C
で日本語メッセージの出力を抑止するとよい．
42
見分け方
スライド No. 10 で紹介し
た Tera Term Pro の起動
直後の画面
新規接続のダイアログが右のよう
になっているものは，UTF-8を使
うことのできる Tera Term
43
UTF-8を使うためには
 「設定」メニューの「端末」を開いて，受信・送信の漢字コード
（文字コード）を UTF-8 に変更する．
44

Download Report