1 / 45

サーバでのファイルの扱い、 HTML

平成２３年度 前期情報科学 III （理系コア科目）. サーバでのファイルの扱い、 HTML. 担当 松永　裕介 月曜日 ２限. 本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明准教授、岡村准教授等による以前の講義資料をもとにしています。. 前回のおさらい（１）. この講義の目標 クライアントからのアクセスがあった時にサーバで実行され，ブラウザ画面での表示を動的に生成するようなプログラムを作る． クライアントからの情報に応じて，データベースを検索，更新する． 作業環境の説明 端末室の PC システム情報科学府のサーバ 出席管理システム

winda
Download Presentation

サーバでのファイルの扱い、 HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 平成２３年度 前期情報科学III （理系コア科目） サーバでのファイルの扱い、HTML 担当 松永　裕介 月曜日 ２限 本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明准教授、岡村准教授等による以前の講義資料をもとにしています。

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

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

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

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

  6. 作業環境の説明（続き）

  7. Mac OS X 各システムでの作業の概要 九州大学 教育用計算機システムのPC システム情報のサーバ bossp UNIX ＋webサーバ ＋PHP ＋SQL ファイル ファイル • ファイルの編集 • テキストエディットを使用 • ファイルの転送 • scpコマンドを使用 • サーバ上のwebページ・PHPプログラムの確認 • Safariを使用 （PCからリモートサーバのコマンドを実行） • ログイン • パスワードの変更 • webページ・PHPプログラム用ディレクトリの作成（初回のみ） • mkdirコマンド • chmodコマンド • リモートサーバへのアクセス • sshコマンドを使用

  8. リモートサーバへのアクセス • 昔はTelnet プロトコルによる端末接続を行っていた • Telnetは通信データを暗号化しないため，悪意のある第三者が通信経路上にいた場合，「盗み聞き」を防げない • 最初に入力する ID やパスワードが盗まれる危険性も • そこで，利用者認証の段階からすべての通信データを暗号化する SSH（Secure Shell）プロトコルが考案された • 現在では，Telnet を禁止し，SSH によるアクセスのみを許可するサーバが増えた • （Windows環境）Tera Term にも，SSH 機能のための追加モジュールが提供されるようになった • Tera Term の設定をおこなうときにSSHを利用するようにしなければならない

  9. リモートサーバへのアクセス • Mac からリモートサーバへログインし，コマンド操作を行うための手順 • Mac のターミナルを起動 • Doc 上にあるターミナルのアイコンをクリック • アプリケーションフォルダの中にあるユーティリティフォルダを開き，その中のターミナルのアイコンをダブルクリックする • コマンドラインから sshコマンドを使用して接続する • 接続先のアドレスは下のとおり rupus.i.kyushu-u.ac.jp • sshコマンドは後に接続先アドレスを記入して起動する ssh rupus.i.kyushu-u.ac.jp • sshコマンドは接続先のアカウント名が異なる場合も利用できる ssh 1TE09000X@rupus.i.kyushu-u.ac.jp アカウント名 もちろん，自分のアカウントでないと（パスワードを知らないと）ログインはできません

  10. 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. 1TE09000X@rupus.i.kyushu-u.ac.jp's password: Last login: Fri Oct 2 20:47:45 2009 [1TE09000X@rupus ~]$ パスワードを入力 プロンプト これ以降，ログアウトするまでは，キー入力がbosspに伝えられる

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

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

  13. UNIXコマンドの実行例（１）　－パスワード変更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 ~]$ 入力した内容は画面に表示されず，カーソルも動かない．

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

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

  16. UNIXコマンドの実行例（３）　－ディレクトリの移動・確認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 ~]$

  17. 簡単な作業 ここで，これ以降の課題ファイルを置くためのディレクトリ public_htmlを，自分のホームディレクトリに直下に作成しておこう． 通常，各ユーザのwebページは，ホームディレクトリ配下の public_htmlディレクトリ配下に置かなければならない． rupus 上で動作するWebサーバも上の設定にしている

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

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

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

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

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

  23. ファイルの転送　（scpコマンド） • この講義では，scp コマンドを使用する • コピー元のファイルをコピー先のファイルにコピーする scpコピー元 コピー先 • リモートのファイルはコンピュータ名を前に付ける • コンピュータ名とファイル名の間にコロン（:）を付ける • ファイル名はディレクトリ名を含んでよい • ホームディレクトリからのパスを書くのがよい • コピー元，コピー先のどちらがリモートであってもよい • rupus.i.kyushu-u.ac.jp:~/public_html/test.html パス名 コンピュータ名

  24. scpコマンドの使用法 • Mac上のファイルをbosspのpublic_htmlディレクトリへ送る • 上のコマンドでは，index.html が送られるファイルpublic_htmlディレクトリ内にindex.htmlとしてコピー • scp index.html rupus.i.kyushu-u.ac.jp:~/public_html

  25. 文字コードの話

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

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

  28. ASCIIコード表

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

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

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

  32. Mac OS X 作業の際に使用する文字コード 九州大学 教育用計算機システムのPC システム情報のサーバ bossp UNIX ＋webサーバ ＋PHP ＋SQL UTF-8 UTF-8 （標準の文字コードが UTF-8） （改行コードは「LF」） • テキストエディットでファイルを作成するとき • UTF-8形式で保存すること • ターミナルでサーバにアクセスするとき • 送受信に用いるコードは UTF-8になっている • 異なる文字コードの場合は，もちろん文字化けしてしまう （PCからリモートサーバのコマンドを実行する） （コマンドの実行結果がPCのウィンドウ内に表示される）

  33. 日本語がうまく表示できないときの「文字化け」日本語がうまく表示できないときの「文字化け」 [1TE09000X@bossp ~]$ ls -l 合計16 drwxr-xr-x 2 1TE09000X teacher 4096 4月17 17:26 public_html drwxr-xr-x 2 1TE09000X teacher 4096 4月17 17:27 test [1TE09000X@bossp ~]$ サーバはこんな風に表示しているつもりなのに… ターミナルの画面ではこんな風になってしまう… [1TE09000X@bossp ~]$ ls -l ┗6 drwxr-xr-x 2 1TE09000X teacher 4096 羆7 17:26 public_html drwxr-xr-x 2 1TE09000X teacher 4096 羆7 17:27 test [1TE09000X@bossp ~]$ たぶん，今年度の環境ではほとんど起こらないであろう

  34. 本日の演習と課題 • 演習 • 各人の受講科目を時間割を表形式で表示する Web ページを作成しなさい。（日本語表示でなくてもよい。） • 課題 • 演習で作成した時間割に • 適切に色分をして（例、必須は赤にするなど。） • 連続するコマをまとめる • など • 表示が出来るようにしなさい。

  35. 資料（HTML）

  36. Webページの記述言語 HTML • 現在のWebページはHTML (Hyper Text Markup Language)によって書かれている。 • HTMLは､Web上でドキュメントや写真､音声､サービスなどを提供するために開発された。 • 最新バージョンは 4.01でhttp://www.w3.org/TR/html401/で､その仕様が定義されている。 • ワープロでは、文字の大きさや色などの属性を持っていて、それらを指定することで、様々な表現ができる。HTMLは、このような属性指定をする言語である。 • タグと呼ばれる記号を利用して､ドキュメントに様々な意味づけ（フォントの変更､リンク､画像の表示､プログラムの起動など）を行う。

  37. 文字列（表示内容）と構造の分離 • 表示する文字列 • 文字列の加工法（表示方法） • 見出し • 文字のフォント（文字の大きさ，文字の色など） • 左揃え，右揃え，中央揃え • 箇条書き • 表 • フォーム タグで記述 文字列で構造を作るのはよくない（避けるべき）

  38. HTMLのタグ • 「<」と「>」に囲んだもの（例：<html>や<body>） • タグには意味がある • 例：htmlタグ（<html>） • html文書の始まり • 「<html>」と言う文字列が表示されるのではない • 開始タグと終了タグ • 開始タグ　　（例：<html>） • タグの名前を「<」「>」で囲む • タグの名前の後に属性を書くことができる • 終了タグ　　（例：</html>） • タグの名前の前に「/」を付けて「<」「>」で囲む <h1>～の文字列 </h1> 開始タグと終了タグにはさまれた文字列に対して文字飾りを行う 開始タグ 終了タグ

  39. HTMLの基本タグ • 基本のタグ • HTMLタグ HTMLで記述されている範囲を示す • HEADタグ ヘッダであることを示す • TITLEタグ タイトルバーに表示するタイトルを示す • BODYタグ ページの本体を示す

  40. HTMLの基本的な形 • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 • Transitional//EN"> • <html> • <head> <title> … </title> </head> • <body> … </body> • </html> HTML要素 ブラウザのタイトルバーで表示される内容 ブラウザの本体部分で表示される内容

  41. 見出し • h1 ～ h5 タグ • 開始タグと終了タグに囲まれた文字列を見出しとみなす • 数字は見出しのレベルを表す • レベルに合わせて，文字の大きさが変わる <h1>はじめに</h1> ブラウザ上に見出しとして，「はじめに」が表示される

  42. フォント • font タグ • <font 属性> • 使用するフォントを変更する • 文字の大きさや色などを属性に記述 • color属性 • size属性 <font color="red">赤</font> ブラウザに「赤」と表示される color属性 <font size="-2">赤</font> 小さな文字で「赤」

  43. 揃え 段落を左や右に揃えたり，中央に置いたりする • 左揃え（デフォルト） • なにも指定しなくてよい <p> • 右揃え • p タグを利用 <p align="right"> • div タグを利用 <div align="right"> • 中央揃え • p タグを利用 <p align="center"> • div タグを利用 <div align="center"> • center タグ <center> 段落を示すタグ

  44. 箇条書き • ul タグ • 項目の先頭に「●」のような記号がつく箇条書き • unordered list の頭文字 • 各項目は<li>タグの開始タグと終了タグで囲む • ol タグ • 項目の先頭に「1.」のような数字がつく箇条書き • ordered list の頭文字 • 各項目は<li>タグの開始タグと終了タグで囲む <ul> <li>1つ目の内容</li> <li>2つ目の内容</li> </ul> • 1つ目の内容 • 2つ目の内容

  45. 表 • 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>

More Related