Information Expression Seminar.

# 6月23日｜Web制作1：アカウント管理

基本的な書き方を理解したら、いよいよ自分の
Webサイト制作です。その前にWebサイトを管理する上で不可欠な事項を学びましょう。

## 1｜Webサイト開設の手順

### はじめに

サイトを開設するためには、作成したHTMLや画像ファイルなどのデータを、それぞれのパソコンの中（ローカル）から、サーバーに用意されたある特定の場所へ、転送（アップロード）する必要がある。この作業自体はツールの手順を覚えれば難しいことではない。しかし、作成したものは、アップロードした瞬間に「個」を越えて、世界中から閲覧可能な「公（Public）」の中に存在することになる。そして、WorldWideWebという公共圏に参加することに伴い、各個人には「責任」が発生する。サイトの情報を管理するためのセキュリティや、作成した情報の中身に関する法律、モラルやマナーなどについて、だれもが強く自覚する必要がある。
今日は情報の管理の基本的な技術について、次週は情報の中身に関して指導を行う。

### ローカルでの準備

HTMLも画像も、公開するファイル名、ディレクトリ名はすべて、必ず半角・英数字・小文字で付ける。
サイトの玄関にあたる最初のページには、index.html（またはindex.htm）とつける。

公開用のデータ群は、なるべくローカルでも一カ所のディレクトリにまとめておくこと。データが増えてくるとディレクトリの中にディレクトリを作って階層構造を作り、整理する。

### 個人アカウントについて

学部で運営しているサーバの中に、学生個人が利用できるユーザ・アカウントと個人用のディレクトリが準備されている。個人のウェブサイトのアドレスは以下のようになる。

http://www.ne.senshu-u.ac.jp/~xxxxxxx/

学部が発行する、この個人アカウントの利用については、現在のところアクセスは学内公開に制限してある。学外からも自由にアクセスできるウェブサイトを大学のサーバに開設したい場合は、別途、情報科学センターに申請することで開設することが出来る。（なお、学部サーバーも2.3年生の演習で利用する演習用アカウントは全体に公開されている）

用意された個人用のディレクトリにアップロードするためには、WinSCPやFFFTPなどのファイルを転送するためのツールを用いる。サーバーにアクセスするための情報は基本的に4つある。ここで入力する情報については、教員から別途指示がある。

ホストサーバー名
転送プロトコル指定（ポート番号）
ユーザー名（ID）
パスワード

### 初期パスワード

初期パスワードは、教員から指示がある。

### パスワード変更

まず配布される初期パスワードは、必ず個人ごとに変える必要がある。パスワードを変更するためには、TERATERMを用いてサーバに接続し、コマンドを打つ必要がある。以下、IDと初期パスワードを入力し、新しいパスワードに変更する手順を解説する。

#### 1：TeraTermの起動

Hostのところに"www.ne.senshu-u.ac.jp"と入力し、ポート番号は教員から指示する。「サービス」は SSH にチェックを入れ、SSHバージョンはSSH2にしてOKをクリック。

#### 2：ログイン

ID（ne2X0000）と初期パスワード（教員から指示）を入れる画面がでるので指示に従い入力する。

-bash-4.1$と出れば正しくログインできている。

#### 3：パスワード変更

passwdと入力しEnterキーを押す。loginのところに自分の「ユーザ名」が表示され、Passwordの入力をうながされるので、ここで初期パスワードを入力する。パスワードの入力の際は，文字が見えない（*も出ない）ので注意。入力したらEnterキーを打つ。すると新しいパスワードの入力をうながされる。新しいパスワードを入力すると、確認のためにさらにもう1度あたらしいパスワードの入力をうながされる。パスワードは英数字で、大文字小文字を混ぜて8文字以上で設定する。

パスワードの変更に成功すれば"successfully"と表示される。失敗した場合は，もう1度実行する。失敗する理由としては，（1）現在のパスワードがあっていない、（2）変更後のパスワードが適切なものではない、（3）変更後のパスワードとして入力した２つのパスワードが同一ではない、などの理由が考えられる。

### ファイル転送ツールの設定

パスワードを変更したら、次のステップに入ることができる。

#### WinSCP

WinSCPは、WindowsでSSHの機能であるSCP（Secure Copy Protocol）やSFTP（SSH File Transfer Protocol）を使えるようにしたツールである。転送時にデータが暗号化されるため、ローカルとリモートの間で安全にファイルのコピーを行うことができる。学外からアップロードする時には基本的にこのツールを利用する。設定と使い方は、以下の操作マニュアルに記載してある。

ポート番号はTeraTermと同様の番号なので間違えないように注意すること。

演習用WINSCP操作マニュアル1｜操作マニュアル2
WINSCPのダウンロード

参考リンク

SSHファイル転送二つの方法、SCPとSFTP
ITmedia:SFTPを使った安全なファイル転送

#### FTP

学外からはサーバーに拒否されるが、学内ならば、FTP（File Transfer Protocol）も利用できる。 各端末機にはFFFTPがインストールされている。

FFFTP

### ファイルのアップロードテスト

ダミーのHTMLを仮にアップロードしてみよう。完了したら、URLを入力し、ブラウザから閲覧できるか確認する。見られたらOK。もし見られない場合は、大抵パーミッション設定ミスである。変更をきちんと行ったかを確認してみる。（操作マニュアル1のページの下の方に書いてある）なるべくこの演習の時間のうちに、ここまでの設定を終えておくこと。

### トラブルシューティング

WinSCPでは、デフォルトで【ディレクトリ（フォルダ）がアクセス不可の場合、表示されない】設定になっている。
この設定は、【オプション > 環境設定 > 環境 > パネル】の【リモートディレクトリ】の項目で変更できる。

WINSCPでパーミッション設定を間違えてフォルダが消えた場合

## 2｜DREAMWEAVERを用いた制作

### DREAMWEAVERとは

DreamWeaverは、現在ウェブ業界においても標準的に使われているWebオーサリングツールである。Webサイトをワープロ感覚（WYSIWYG）で作成することができ、CSSの編集も容易にできる。前回までの演習で HTMLと
CSSの意味と書き方をよく理解していれば、DreamWeaverを使うと作成が簡単になる。（ただし、コードを見ないで作ると汚くなりがちなので、正しいマークアップのためには結局のところ手打ちが適している）そしてなにより、多数のページを持つウェブサイトの開発や管理を行う場合において、格段に便利になる。

### 基本操作

基本的な使用方法は、「DreamweaverによるWebページの作成」としてまとめてある。ここで基本操作を学んでおくこと。

演習用チュートリアル：DreamWeaver Bigginers site
DreamweaverCS6の新機能

## 3｜本日のまとめ

### 演習のまとめ

ウェブサイト開設にあたって必要な、各種設定の方法を理解する。
DreamWeaverの基本的な使い方を理解する。

### ミニレポート

FTP、SCP、SFTP、とは何か、それぞれの機能について簡潔に説明してください。

### 本日の課題

#### 1：リンク集

本棚にその人らしさが出るように、リンク集にも不思議とその人を形成しているセンスが出ます。あなたが「これは是非みんなに教えてあげたい」と思う、お勧めのサイトを集めたリンク集を作って下さい。

サイトのジャンルは問わないが、公序良俗に反するものは不可。
リンクをはってあるだけだと、何が面白いのかわからないので、それぞれのサイトのリンクの下に、自分なりの”みどころ”について、50〜100字程度の推薦文を付ける。（本屋やＣＤ屋にある手書きPOPと同じ役割である）
最低10サイト以上。多い分にはいくつでも可。
適切なマークアップとCSSの記述を行い、内容に応じてグルーピングすること。
データの提出はもとめませんが、次週の演習中に完成しているかをチェックします。

#### 2：webサイトのアイデア

上記のリンク集作成で各種サイトを訪問しながら、来週までにどのようなデザインのサイトにするかのイメージを考えておくこと。
提出の必要はない。

▲TOPへ　□ HOME