サーバでのファイルの扱い、HTML 担当 岡村耕二 月曜日 ２限 平成21年度 情報科学III （理系コア科目・２年生）

Presentation on theme: "サーバでのファイルの扱い、HTML 担当 岡村耕二 月曜日 ２限 平成21年度 情報科学III （理系コア科目・２年生）"— Presentation transcript:

1 サーバでのファイルの扱い、HTML 担当 岡村耕二 月曜日 ２限 平成21年度 情報科学III （理系コア科目・２年生）
2007/4/18 平成21年度 情報科学III （理系コア科目・２年生） サーバでのファイルの扱い、HTML 担当 岡村耕二 月曜日 ２限 本資料の一部は、堀良彰准教授、天野浩文准教授等による 以前の講義資料をもとにしています。 情報科学III（２）

2 前回のおさらい（１） この講義の目標 クライアントからのアクセスがあった時にサーバで実行され，ブラウザ画面での表示を動的に生成するようなプログラムを作る． クライアントからの情報に応じて，データベースを検索，更新する． 作業環境の説明 端末室のPC システム情報科学府のサーバ 出席管理システム サーバサイドプログラミングとは

3 学外から課題などをする場合 ah.s.kyushu-u.ac.jp に TeraTerm Pro などでログインします。
TeraTerm Pro のインストールについては を参考にしてください。ssh 拡張が必要です。 bossp.is.kyushu-u.ac.jp は、ah.s.kyushu-u.ac.jp から ssh コマンドにてログインできます。 ssh bossp.is.kyushu-u.ac.jp

4 注意 bossp.is.kyushu-u.ac.jp にログインする ターミナル を使う
export LANG=C (表示言語を英語にする) 一番最初だけ(httpd がアクセスできるようにする) chmod 711 . chmod 711 public_html chcon user_u:object_r:httpd_user_content_t public_html

5 前回のおさらい（２） －－基本的な作業環境 九州大学 教育用計算機システムのPC システム情報のサーバ サーバ UNIX ＋ webサーバ
前回のおさらい（２）　－－基本的な作業環境 九州大学 教育用計算機システムのPC システム情報のサーバ Windows XP ファイル サーバ UNIX ＋ webサーバ 他 サーバ IDとパスワードは 本日配布 ファイル IDとパスワードはすでに発行済み このサーバには，webサーバの他に 　　PHP言語処理系 　　データベース管理システム（MySQL） がインストールされている．

6 前回のおさらい（３） －－最終課題で製作するもの
前回のおさらい（３）　－－最終課題で製作するもの PHP プログラム SQL クエリ web サーバ ブラウザ データベース 管理システム （DBMS） 検索・更新の結果 PHPプログラムは，クライアントからのリクエストに応じてデータベースにアクセスし，その結果を整形してブラウザに返す． また，データベースにアクセスする際には，SQL言語によるクエリ（問い合わせ，query）を発行する． データベース

7 本日やること 作業環境の説明（続き） 各システムでの作業の概要 サーバのアカウント・パスワードの配布 ログインのしかた
UNIXコマンドの基礎 HTML・PHPファイルの置き場所 文字コードの話 実習：簡単なwebページ作成 PC上でHTMLファイル作成 ファイルを適切なフォルダ（ディレクトリ）に複写 ブラウザで確認

8 各システムでの作業の概要 九州大学 教育用計算機システムのPC システム情報のサーバ bossp ファイルの編集 TeraPad を使用
Windows XP UNIX ＋webサーバ ＋PHP ＋SQL ファイル ファイル ファイルの編集 TeraPad を使用 ファイルの転送 WinSCP3 を使用 サーバ上のwebページ・PHPプログラムの確認 Internet Explorerを使用 （PCからリモートサーバのコマンドを実行） ログイン パスワードの変更 webページ・PHPプログラム用ディレクトリの作成（初回のみ） mkdir コマンド chmod コマンド リモートサーバへのアクセス Tera Term Pro を使用

9 PCのデスクトップ画面 このあたりに Tera Term Pro 残念ながら，WinSCP3のアイコンはデスクトップ上には出ていない．
TeraPad のアイコンが ある． 残念ながら，WinSCP3のアイコンはデスクトップ上には出ていない． 左下のスタートメニューから探して起動すること．

10 リモートサーバへのアクセス －Tera Term Pro
PCからリモートサーバへログインし，コマンド操作を行うための端末エミュレータソフト（フリー） もともとは，Telnet プロトコルによる端末接続をサポートしていた． Telnetは通信データを暗号化しないため，悪意のある第三者が通信経路上にいた場合，「盗み聞き」を防げない． 最初に入力するIDやパスワードが盗まれる危険性も． そこで，利用者認証の段階からすべての通信データを暗号化する SSH（Secure Shell）プロトコルが考案された． 現在では，Telnet を禁止し，SSH によるアクセスのみを許可するサーバが増えた． Tera Term Pro にも，SSH機能のための追加モジュールが提供されるようになった． 教育用計算機システムの Tera Term Proでも SSH が利用できるので，今回の講義でも必ず SSH を使用すること．

11 Tera Term Pro の操作（１） デスクトップのアイコンをダブルクリックして起動 bossp.is.kyushu-u.ac.jp
この部分のホストを下のものに変更する． bossp.is.kyushu-u.ac.jp

12 Tera Term Pro の操作（２） セキュリティ警告が表示されるが，ホスト名を正しく入力できていることが確認できたら，そのまま続行する．

13 Tera Term Pro の操作（３） 「SSH認証」ダイアログで，ユーザ名とパスワードを入力する．ユーザ名は，教育用システムのアカウント名と同じにしてある． パスワードは講義中に別途伝達する．

14 リモートサーバでの操作 －UNIXのコマンド
Telnet や SSH でアクセスする場合，サーバに仕事をさせるには，キーボードからコマンド（文字列）をタイプして，Enter キーを押す． 実行した結果の出力も文字列で画面（端末エミュレータウィンドウ内）に表示される． 前回どこからアクセスしたか 画面上で次に文字が入力される位置示すカーソル（点滅表示） Last login: Mon Apr 16 18:55: from ... ~]$ サーバ（UNIX）が，利用者からのコマンドを待っていることを示す表示（プロンプト，prompt） サーバへのアクセスを終了するときは，logout と入力して Enterキーを押す．

15 カレントディレクトリ ディレクトリ（directory）
Windows の「フォルダ」と同等のものだが，UNIXでは，伝統的に「ディレクトリ」と呼んでいる． 残念ながら，UNIXでは，Windowsのようなグラフィカルな表示はできないことも多い． カレントディレクトリ 現在自分が作業をしているディレクトリ ある利用者がログインした直後のカレントディレクトリは，その利用者の「ホームディレクトリ」（略してホーム）と呼ばれる． ホームは，通常，ユーザ名と同じ名前になっている． また，「~」（ティルダ，tilde）という文字で表すことがある． te999999 doc + fun + kogi － file1 file2

16 UNIXコマンドの実行例（１） －パスワード変更
passwd コマンド 現在のパスワードを新しいものに変更する． 現在のパスワードを入力（１回） 新しいパスワードを入力（２回） 辞書にあるようなつづりや，元のパスワードに似たもの，などは拒絶される． ~]$ passwd Changing password for user te Changing password for te999999 (current) UNIX password: New UNIX password: Retype new UNIX password: passwd: all authentication tokens updated successfully. ~]$ 入力した内容は画面に表示されず，カーソルも動かない．

17 忘れないうちに自分のパスワードを変更しておこう．
英数字を混ぜたもの（６文字以上８文字以下）がよい． 当然のことだが，以下のようなパスワードは盗まれる危険が高いので使うべきでない． 自分のユーザ名（ログイン名ともいう）と同じつづり 自分の姓または名と同じつづり 辞書に出ているような言葉と同じつづり 固有名詞でも，一般名詞でも タレント・有名人の名前と同じつづり アルファベットのみ，または，数字のみ “Password”

18 UNIXコマンドの実行例（２） －ディレクトリ作成
mkdir （make directory）コマンド カレントディレクトリ配下に，新しいディレクトリを作成する． ただし，カレントディレクトリ配下にすでにあるディレクトリのさらに下など，カレントディレクトリ直下以外の場所に作ることもできる． ~]$ mkdir public_html ~]$

19 UNIXコマンドの実行例（３） －ディレクトリの移動・確認
cd （change directory）コマンド カレントディレクトリを移動させる． １つ上のディレクトリに戻るには，「..」（ピリオド２つ） 何も添えずに「cd」とだけタイプすると，ホームに戻る． pwd （print working directory）コマンド カレントディレクトリを表示する． ~]$ cd public_html public_html]$ pwd /home/te999999/public_html public_html]$ cd .. ~]$

20 ここで，次回以降の課題ファイルを置くためのディレクトリ public_html を，自分のホームディレクトリに直下に作成しておこう．
通常，各ユーザのwebページは，ホームディレクトリ配下の public_html ディレクトリ配下に置かなければならない．

21 UNIXコマンドの実行例（４） －ファイルの一覧表示
ls コマンド （アルファベット小文字のエルとエス．listから） 単に ls とだけタイプして Enter キーを押すと，カレントディレクトリ配下のファイルやディレクトリの名前だけを一覧表示する． 「LANG=C ls –l」とタイプすると，名前の他に，様々な情報を表示する． LANG=Cは，端末エミュレータが日本語をうまく処理できないような場合に日本語メッセージ出力を抑止して，画面上の文字化けを防ぐための「おまじない」 そのような制約がない場合には，ls –l だけでよい． 日本語が正しく表示できる場合には，LANG=C を付ける必要はない． ~]$ ls public_html ~]$ LANG=C ls –l total 8 drwxr-xr-x 　2 te student 4096 Apr 17 10:34 public_html ~]$

22 UNIXコマンドの実行例（５） －ファイル等の削除
rm （remove）コマンド ファイルを削除する． rmdir （remove directory） ディレクトリを削除する． 日本語が正しく表示できる場合には，LANG=C を付ける必要はない． ~]$ mkdir test ~]$ LANG=C ls –l total 16 drwxr-xr-x 2 te student Apr 17 10:34 public_html drwxr-xr-x 2 te student Apr 17 10:35 test ~]$ rmdir test total 8 ~]$

23 UNIXコマンドの実行例（６） －利用権設定
ファイルやディレクトリの利用権設定 自分自身・同じグループ内の他の利用者・それ以外の人が，自分のファイルやディレクトリに対して，どのような操作をすることを許可するか 読み出し（Read）/書き込み（Write）/実行（eXecute） chmod （change mode）コマンド 自分のファイルやディレクトリの利用権設定を変更する． ~]$ chmod 711 ~ ~]$ LANG=C ls –ld ~ total 8 drwxr-xr-x 2 te student 4096 Apr 17 10:34 /home/te999999 ~]$ 日本語が正しく表示できる場合には，LANG=C を付ける必要はない．

24 　　ここで，webページがサーバの外からブラウザでアクセスできるよう，自分のホームディレクトリの利用権設定を変更しておこう．
自分のホームディレクトリの利用権設定を「711」に変更する 　　chmod 711 ~ ホームディレクトリの利用権がどうなっているかを確認する． （日本語が表示できないとき）LANG=C ls –ld ~ （日本語が表示できるとき）　 ls –ld ~ 上記②のコマンドの出力の左端が以下のようになっていればOK． drwx--x--x 5 te999999　　... 実際は自分のIDになる ここをよく見比べる

25 ファイルの編集 －TeraPad デスクトップのアイコンをダブルクリックして起動
「メモ帳」とたいして変わらないので，操作法の説明は省略する．

26 ファイルの転送　－WinSCP3 Telnet と同様に，暗号化を行わないファイル転送プロトコルとして，FTP（file transfer protocol）があった． やはり，ファイルのアップロード・ダウンロードに際し，悪意のある第三者による「盗み聞き」の危険性が… そこで，暗号化を行うファイル転送方式が考案された． SCP（secure copy protocol） SFTP（SSH file transfer protocol） WinSCP3は，SCP/SFTP 両方の機能を持つファイル転送ソフト

27 WinSCP3の操作（１） 起動直後のウィンドウ 教育用計算機のUNIXホストしか登録されていないので，「新規」ボタンをクリックする．

28 WinSCP3の操作（２） 「ホスト名」のところに bossp.is.kyushu-u.ac.jp を入力
ユーザ名・パスワードも入力して，「ログイン」ボタンをクリックする． 「秘密鍵」は空白のままでよい

29 WinSCP3の操作（３） 警告が表示されるが，ホスト名を正しく入力できていることが確認できたら，そのまま続行する．
ホスト名は，下に隠れているウィンドウの上部に表示されている．

30 WinSCP3の操作（４） 接続に成功すると，左右に分かれたエクスプローラ型のウィンドウが現れる．あとはドラッグアンドドロップでOK．
ローカル （PC）側のファイル一覧 リモート （サーバ）側のファイル一覧 アップロード ダウンロード

31 なぜ，LANG=C などという「おまじない」を付ける必要があるのか…
文字コードの話 なぜ，LANG=C などという「おまじない」を付ける必要があるのか…

32 計算機は文字をどのように扱うか？ H e l l o !
計算機のメモリ・ディスク（ファイル）の中に格納されているデータでも，通信でやりとりされるデータでも，すべての文字（character）は「番号」（code）で表されている． ただし，実際には，十進数ではなく二進数である． どの文字をどの番号に対応させるか，というルールを，「文字コード」という． H e l l o ! 72 101 108 108 111 33

33 むかしむかし… メーカごとに計算機内部で使用する文字コードがまちまちだった． これでは，計算機間でデータのやり取りができない．
そこで，標準化の動きが始まった． 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バイト）．

34 非米語圏はどうなるの？ $の代わりにポンド記号を必要とする英国の英語 アルファベットにウムラウトなどの記号のつくヨーロッパ系言語
アルファベット以外の文字を基礎とする言語 「子音・母音・子音」の組み合わせが１文字となる韓国語 それぞれ数万の漢字を持つ日本語・中国語 などなど オリジナルのASCIIコードのままでは表現できないため，ASCIIコードの微妙な拡張や，各言語用の文字コードが多数考案された．

35 日本でよく利用される文字コードのいろいろ
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）も増えつつある．

36 実習に用いるサーバでは... PC では Shift_JIS が普通 テキストファイルの改行コードは 「CR＋LF」 サーバでは
CR（Carriage Return） LF（Line Feed） テレタイプの行頭復帰・行送り文字に由来する制御文字コードの名称． サーバでは CentOSの標準文字コードが UTF-8 テキストファイルの改行コードは「LF」のみ MySQLも，データベースに非ASCII文字を格納する際に，データを UTF-8 形式で表現する． PHPで作成するプログラムも，同じ文字コードに合わせたほうが都合がよいので，UTF-8 にしたい．

37 作業の際に使用する文字コード 九州大学 教育用計算機システムのPC システム情報のサーバ bossp （標準の文字コードが UTF-8）
Windows XP UNIX ＋webサーバ ＋PHP ＋SQL UTF-8 UTF-8 （標準の文字コードが UTF-8） （改行コードは「LF」） TeraPad でファイルを作成するとき UTF-8形式で保存すること 改行コードは「LF」にすること Tera Term Pro でサーバにアクセスするとき 送受信に用いるコードを UTF-8に設定できないと，画面表示が一部文字化けすることがある． （PCからリモートサーバのコマンドを実行する） （コマンドの実行結果がPCのウィンドウ内に表示される）

38 日本語がうまく表示できないときの「文字化け」
~]$ ls -l 合計 16 drwxr-xr-x 2 amano teacher 月 17 17:26 public_html drwxr-xr-x 2 amano teacher 月 17 17:27 test ~]$ サーバはこんな風に表示しているつもりなのに… Tera Term Pro の画面ではこんな風になってしまう… ~]$ ls -l ┗6 drwxr-xr-x 2 amano teacher 羆7 17:26 public_html drwxr-xr-x 2 amano teacher 羆7 17:27 test ~]$

39 2007/4/18 HTMLについて 簡単なチュートリアル「初心者向けHTMLガイド1.1」 ( 全体の構造 <html> <head> <meta http-equiv=“CONTENT-TYPE” CONTENT=“text/html; CHARSET=UTF-8”> <title>（ページのタイトルをここにかく）</title> </head> <body> （ページ本体を記述する HTML を書く） </body> </html> 情報科学III（２） 39

40 本日の実習課題の説明

41 本日の課題　－作業環境の確認 TeraPad で簡単な HTML ファイル(コンテンツは自由：自己紹介など、ただし、個人・プライバシー情報は含めないようにしてください。)を作成して，UTF-8形式で保存する． 保存する際には，「ファイル」メニューの中の，「文字/改行コード指定保存」を選択する． 文字コード：UTF-8 改行コード：LF WinSCP3 を用いて，そのファイルをサーバ bossp のディレクトリpublic_html に転送する． Internet Explorer で，自分の web ページが表示できることを確認する． （ファイル名） 作成した上記 web ページのURLを，RAMシステムの「レポート」機能で提出する． 「レポートのURL」欄を正しく修正してから，提出すること．