ＩＣＴメディア編集Ⅱ 2024年11月21日
Ｗｅｂページ開設練習とファイル転送（アップロード：ページ更新）について（動画貼付けを追加）
明治大学のWWWサーバを使用して，Webページを開設し、公開することができます。
ここでは、その練習をしてみましょう。
学外からファイル転送（アップロード）を行う場合は、VPN接続サービスを利用してVPN接続を行った後、上記の手順を行って下さい。
各自のホームディレクトリに以下の名前のディレクトリ（フォルダ）を事前に作成し，そこに，ｈｔｍｌ形式や画像などの必要なファイルを転送しておく必要があります．
学内のみの公開にしたい場合のディレクトリ名：local_html
学外へも公開にしたい場合のディレクトリ名：public_html
それぞれのＵＲＬは以下のようになります。
学内のみの公開の場合： http://local.isc.meiji.ac.jp/~ユーザＩＤ/ファイル名
学外へも公開する場合： http://www.isc.meiji.ac.jp/~ユーザＩＤ/ファイル名
トップページ、すなわちホームページのファイル名を「index.html」とすれば、ファイル名の指定がいらなくなります。index.htmlのファイルがない場合にファイル名を省略すると，フォルダにあるファイルの一覧を表示します．
ファイル転送用のソフトウエアは，情報教室，実習室では，FFFTP
というソフトウエアを利用するようになっています．
- 使い方は，
以下を参照してください
練習（実習）
各自これまでに作成したトップページを，ＷＷＷサーバに転送し，公開できるかを確認してみましょう．
上記の手順に従って，FFFTP（もしくはＷｓ＿ＦＴＰ）を用いて転送して，自分のＵＲＬから見ることが可能かを確認しましょう．
まだ，何もWebページを作成していない人は，以下のファイルを使用して試してください．
このファイル名の上にマウスのカーソルを持ってきて，マウスの右ボタンを押し，プルダウンのメニューから，[対象をファイルに保存]を選択する．その際，必ずファイル名をtest.htmlと変える．
そのtest.htmlファイルを転送する．ＵＲＬで見に行くときは，ファイル名の指定をtest.htmlとする．
まず、ファイルを転送するためのソフトウエア「FFFTP」をスタートのすべてのプログラムの中の、「その他」の中から立ち上げます。
以下の説明を参考にファイル転送します。
ファイル転送ツール(FFFTP)でホームページを更新する方法
IDとパスワードを聞いてきますので、メールのID（例：ea12345）とパスワード（メールのパスワードを変更された方は、以前のパスワードをしないと入れないかもしれません）を入力してください。「基盤サービス利用アカウント」は2011年度以降の新入生は全員、入学と同時に付与されています。2011年度以前の新入生は、各キャンパスのメディア支援事務室で利用申請手続きを行ってください。まだ、申請していない人は、7階の事務室で申請を行ってください。
ホームページの開設なども確認してください。
立ち上がったウインドウの右が、接続先のサーバコンピュータ（ホスト）のファイルなどを示しており、左は、現在使っているPC（ローカル）のフォルダを示しています。
右のリスト（ホスト）に ｌocal_html というフォルダがない場合には、フォルダを作成します。（右ボタンを押してメニューからフォルダ作成）
つぎにローカル側に先ほど、ダウンロードしたファイル“test.html”をドラッグアンドドロップして、フォルダをディスクトップにする。（アップロードしたいフォルダを指定する）
メニューの「コマンド」の中のアップロード（もしくはツールの上矢印）で、ホスト側の
ｌocal_htmlのフォルダの中に送る。
Webブラウザ（インターネットエクスプローラなど）で、確認する。
http://local.isc.meiji.ac.jp/~*****/test.html
（*****の部分は、皆さんのユーザIDが入ります）
確認できましたら、test.htmlのファイルをメモ帳などで自分の名前に書き換え、再度アップロードしてみてください。
例えば、アンケートの回答部分には、以下のようにURLを入れてください。以下の場合は、学内のみもしくはVPN接続の場合にみることができます。
http://local.isc.meiji.ac.jp/~*****/test.html （*****は各自のユーザIDが入る）
練習ファイルなどがきちんとアップロードができているかを確認してみてください。
注意：Ｗｅｂページのファイル名ですが，日本語は使えません．中で使用する画像のファイル名なども日本語は使えません．また，トップページをindex.htmlとした場合には，index2.htmlなどのファイル名を使用しないでください．
※実習課題：動画貼付けを含む練習として、以下の動画ファイルを用いて、動画の貼付けの練習を行い、アップロードを行って、動作を確認してください。
・以下のアニメーションgifのファイルを保存します（画像上でマウスの右ボタンでプルダウンメニュー内の保存）。
・以下のビデオ（ｍｐ４）のファイルを保存します（画像上でマウスの右ボタンでプルダウンメニュー内の保存）。
〇タグを用いた挿入
・アニメーションgifのファイルの挿入（アニメーションgifファイルもアップロードすること：ファイル名は合わせること）
<IMG SRC="image001.gif" >
<P>
・ビデオのファイルの挿入（ビデオファイルもアップロードすること）
<A HREF=aruki.mp4>人の歩き移動のビデオファイル</A>
<P>
〇ワードを用いた挿入
・アニメーションgifのファイルの挿入（アニメーションgifファイルもアップロードすること。XXX.htmlに対してXXX.filesのフォルダがあれば、これもアップロード）
アニメーションgifファリルのアイコンを挿入したい位置にドラッグ＆ドロップで入れる（画像が表示される）。
アップロードするときに「htmlのファイル名と同じ名前で「XXX.files」のフォルダがあれば、それもアップロードすること。
・ビデオのファイルの挿入（ビデオファイルもアップロードすること）
リンクとするため、リンクに用いる文字を入力し、その文字を選択してマウスの右ボタンでプルダウンメニュー内のリンクからファイルを選択する。設定後、再度、選択してリンクの編集を確認し、自分のPCのフォルダ内のファイル名となっていれば、ファイル名のみにする。 アニメーションgifのファイルのように、ドラッグ＆ドロップで、ファイルを張り付けても、以下のようになるだけで、ファイルを読み出すことができないので、注意のこと。
〇ホームページビルダを用いた挿入
・アニメーションgifのファイルの挿入（アニメーションgifファイルもアップロードすること）
アニメーションgifファリルのアイコンを挿入したい位置にドラッグアンドドロップで入れる（画像が表示される）。
・ビデオのファイルの挿入
メニューバーの「挿入」の中の、「ファイル」にカーソルを持っていき、さらにその下に表示される「ビデオファイル」を選択する。開いたウインドウで、指定するファイルを選んで、開くボタンで指定する。自分のPCのフォルダ内のファイルとなっている場合は、指定先をサーバ内のファイルに変える。
※ビデオファイルの挿入は、タグを用いた方法やワードを用いた方法では、リンク先としてビデオファイル名を指定するようにしてください。このとき、リンク先が、編集に使用しているPC上のフォルダのファイルを指定するのではなく、アップロード先のサーバ上のファイル名を指定するようにしてください。
追加）MacでFFFTPに代わる無料のFTPクライアント紹介
https://aprico-media.com/posts/1996
Macユーザーが何名かいらしたので、外部のHPですが、FFFTPに代わる「FileZilla」を紹介したページをリンクしました。
これを使って、VPN接続でサーバーへのアップロードを試みてください。
設定は以下のFFFTPでの転送を参考にしてください。
https://www.meiji.ac.jp/isys/doc/website/ffftp.html
加藤のページへ | ＩＣＴメディア編集Ⅱ | Ｗｅｂページ作成課題と提出について | 11月21日講義資料の先頭ページへ