ホームページ アップロード編 ( ホームページ ビルダー 16 /FFFTP) 明治大学 教育の情報化推進本部 ( 和泉 ) J1
目次 1. ホームページ公開のしくみ... J3 2. ホームページ公開直前チェックリスト... J4 3. FTP クライアント について... J5 4. 公開の方法その1: ホームページ ビルダー 16 を使う... J6 5. 公開の方法その2: FFFTP を使う... J8 6. トラブルシューティング... J11 J2
1. ホームページ公開のしくみ 私たちがホームページを見るとき 技術的には何が起こっているのでしょうか ホームページのアドレスを パソコンの Web ブラウザに入力すると インターネットを経由して そのアドレスを持つ Web サーバ から自分のパソコンまで ホームページのデータを送ってもらいます ホームページのデータそのものは 最初から自分のパソコンの中に入っているわけではないのです 図 1 ホームページ閲覧のしくみ 自分で作ったホームページのデータを Web サーバ に送れば ほかのパソコンから見られます 作りたいホームページの企画を立てて パソコンでデータを制作 ホームページの公開用の特別なコンピュータである Web サーバ に送れば インターネットに接続したほかのパソコンから見られます このように データをサーバに送ることを アップロード といいます 図 2 ホームページ公開の仕組み J3
2. ホームページ公開直前チェックリスト さて ホームページのデータが出来上がったら 以下の点をチェックしてから アップロード作業に かかりましょう ホームページ作成での基本的なチェック事項 ホームページの原稿は ひとつのフォルダにまとめて保存してありますか? とくに 画像のデータが別の場所においてありませんか? ( おおもとのフォルダの中に またフォルダがあるのはかまいません ) ファイル名は 半角英数でつけてありますか? 全角文字などでファイル名をつけると 正しく表示できないことがあります ファイル名を修正したら Web ブラウザなどで表示やリンクなどを確認しましょう ファイル名に 拡張子 (.html や.jpg など ) が正しく付いていますか? 最初に表示させたいページは index.html 1 として作ってありますか? 明治大学 Web サーバ利用のためのチェック事項 MIND 利用基準 を遵守していますか? http://www.meiji.ac.jp/mind/guideline/ ホームページに掲載するデータの総量は 50MB 未満になっていますか? ホームページのおおもとのフォルダには 以下のいずれかの名前を付けましたか? 学内のみ公開の場合 = local_html フォルダ学外にも公開の場合 = public_html フォルダ自分の 基盤サービス利用アカウント は調べてありますか? ユーザー ID アルファベット 2 文字 + 学生番号の下 5 ケタ詳しくは ID について (MIND 内のみ参照可能 ) http://www.meiji.ac.jp/isc/manuals/id-pass.html パスワード 2012 年度の1~2 年生 入学手続き書類に自分で書いた 8 桁以上 16 桁以内の英小文字及び数字 2010 年度以前に利用登録した学生 アカウント利用申請時の 共通認証システムアカウントと同じパスワード パスワードを忘れた場合などの問い合わせ先 各キャンパスの メディア支援事務室 へ( 要 学生証 ) 図 3 ホームページ公開前のチェックリスト 1 一般的に 最初に表示させたいページを index.html としておき それは末尾のファイル名を省略した URL を入力した時にも表示されることが多い ( 例 :http://www.nantoka.com という URL を入力 実際には http://www.nantoka.com/index.html が表示されることが多い ) J4
3. FTP クライアント についてホームページの公開のためには FTP クライアント と呼ばれる種類のソフトウェアを使います これは Web サーバ とお手元のパソコンとの間で FTP 2 という形式による通信をおこなうものです ホームページを Web に公開するときなどに用いられます 具体的な画面を見てみましょう 図 4 FTP クライアントの画面の見方 ( FFFTP の例 ) FTP クライアント では 図 4 のようにパソコンと Web サーバを同時に表示します 左側のパソコ ン側から 右側の Web サーバ側の適切な場所に フォルダやファイルをドラッグ & ドロップすれば デ ータが Web サーバに送信されるのです これが アップロード 3 です 本学内のパソコンでの FTP 接続は ホームページ ビルダー 16 または FFFTP を使用します 2 FTP とは File Transfer Protocol の略称 パソコンで作成したファイルを インターネット上の Web サーバ などに転送するための仕組みである 3 逆に 右側の Web サーバ から左側のパソコンへデータを送信することもできる これを ダウ ンロード と呼ぶ J5
4. 公開の方法その1: ホームページ ビルダー 16 を使うそれでは ホームページ ビルダー 16 を使って作成したホームページデータを 実際に明治大学の Web サーバへアップロードしてみましょう ( その他のツールやテキストエディタで作成した場合は 5. 公開の方法その2: FFFTP を使う を参照してください) 1 メニューバー ツール (T) から 2 ファイル転送ツールの起動 (F) を選択 1 2 3 ファイル転送設定 を設定 サーバープロファイル名 (P) suruga2 プロバイダの選択 (E) その他 FTP サーバー名 (S) suruga2.mind.meiji.ac.jp FTP アカウント名 (U) 基盤サービス利用アカウントのユーザー ID FTP パスワード (W) 各自設定したパスワード 3 4 OK をクリック 4 5 クリック 接続ボタンを 6 接続に成功すると 右側枠内に Web サーバのファイルやフォルダ が表示される 5 ちなみに Web サーバ上では フォルダのことを ディレクトリ と呼ぶことがある 意味は フォルダ とほぼ同じと考えてよい 本書では Web サーバ上のフォルダは ディレクトリ と記して区別する 6 J6
7 ( 一つ上のフォルダへ移動 ) や ( ドライブを選択 ) のボタンを使って ホームページのデータをまとめたフォルダを探す 7 8 フォルダ名を確認 ( 右クリック 名前の変更 で修正できる ) * 学内のみ公開する場合 = フォルダ名 local_html * 学外にも公開する場合 = フォルダ名 public_html 8 9 9 そのフォルダを 右側の枠内 (Web サーバ側 ) にドラッグ & ドロップすると アップロードされる 10 アップロード完了後 Web サーバ側に同じ名前のディレクトリ local_html ( または public_html ) が現れる それをダブルクリックすると中身を見られるので 自分が作った通りのファイルが入っているか確認しよう 11 10 12 11 問題がなければ切断ボタンをクリックして サーバとの通信を切断しよう 12 右上の閉じるボタンをクリックすれば ファイル転送ツール を終了できる アップロード後 以下の URL を Web ブラウザ (Internet Explorer など ) で開いて確認しましょう * 学内のみ公開する場合 ( フォルダ名 local_html でアップロード ) http://local.kisc.meiji.ac.jp/~ ユーザー ID/index.html * 学外にも公開する場合 ( フォルダ名 public_html でアップロード ) http://www.kisc.meiji.ac.jp/~ ユーザー ID/index.html 例 : 基盤サービスアカウントのユーザー ID が ea12345 の人が 学内へ公開した場合 http://local.kisc.meiji.ac.jp/~ea12345/index.html ~( チルダ ) は Shift キー + ^ ( キーボード右上 BackSpace の 2 個左 ) ホームページ ビルダー 16 でアップロードする作業は ここで終了です J7
5. 公開の方法その 2: FFFTP を使う ホームページ ビルダー 16 ではなく テキストエディタやその他のツールを使ってホームページ データを作成した場合は FFFTP というソフトを使ってアップロード作業を行いましょう なお ど ちらのソフトを使っても パソコンで作ったファイルを FTP 接続で明治大学の Web サーバにアップロ ードする という作業内容はまったく同じです なお 最初にホームページデータを入れてあるフォルダの名前を確認しておきましょう フォルダ名を確認 ( 右クリック 名前の変更 で修正できる ) * 学内のみ公開する場合 = フォルダ名 local_html * 学外にも公開する場合 = フォルダ名 public_html 1 画面左下 スタート から すべて のプログラム をクリックし FFFTP フォルダの FFFTP を選択 1 2 FFFTP が起動した 前面の ホスト一覧 の 接続 ボタ ンをクリック 2 3 ユーザ名 の入力を求められたら 基盤サービス利用アカウントのユーザー ID を入力 ( 例 :ea12345 のような文字列 ) そして OK をクリック 3 J8
4 パスワード / パスフレーズ を求 められたら パスワードを入力 OK をクリック 4 5 暗号化の状態の保存 は いいえ をクリック この画面が表示されない場合もある その場合は気にせずに6へ 5 6 パスワードが正しければ Web サー バに接続できる ( 右側の枠内に Web サーバ内のデータが表示される ) 7 7ホームページのデータをまとめたフォルダを探すため まず フォルダの移動 ボタンをクリック 6 8 フォルダを指定する フォルダ変更 ( ローカル ) のウィンドウで 右側 の ボタンをクリック 8 9 コンピューター から 自分がホームページフォルダ local_html ( または public_html ) を収納したフォルダを探す ( 下図の例を参照 ) 9 10 フォルダを選択すると OK ボタン がクリック可能になる クリック 10 J9
11 フォルダ変更 ( ローカル ) 画面 でフォルダを指定できたら OK を クリック 11 12 ホームページデータ本体のフォルダ local_html か public_html を 右側の枠内 (Web サーバ側 ) にドラッグ & ドロップすると アップロードされる Web サーバ側にも同じフォルダが現れるので ダブルクリックして中身を確認する 13 問題がなければ 閉じる ボタンをクリックすれば FFFTP を終了できる 12 13 アップロード後 以下の URL を Web ブラウザ (Internet Explorer など ) で開いて確認しましょう * 学内のみ公開する場合 ( フォルダ名 local_html でアップロード ) http://local.kisc.meiji.ac.jp/~ ユーザー ID/index.html * 学外にも公開する場合 ( フォルダ名 public_html でアップロード ) http://www.kisc.meiji.ac.jp/~ ユーザー ID/index.html 例 : 基盤サービスアカウントのユーザー ID が ea12345 の人が 学内へ公開した場合 http://local.kisc.meiji.ac.jp/~ea12345/index.html ~( チルダ ) は Shift キー + ^ ( キーボード右上 BackSpace の 2 個左 ) FFFTP でアップロードする作業は ここで終了です J10
6. トラブルシューティング (1) Web ページが見つかりません と表示されるホームページをアップロードしたのに Web ブラウザで確認すると Web ページが見つかりません というエラーメッセージが表示されることがあります 原因 1 最新の状態に更新されていますか? ホームページを Web サーバへアップロードしても Web ブラウザの表示を更新しなければホームページは表示されません まずはブラウザの 最新の状態に更新 ボタン ( 円形の矢印 ) をクリックしましょう それでもうまく表示されないときは 少し時間をおいてから再表示させてみましょう 原因 2 URL を間違えていませんか? Web ブラウザに入力した URL をしっかり確認しましょう よくある間違い 全角文字 ( http:// など ) で入力している kisc を kisk と入力している など 原因 3 ディレクトリ 4 の名称や構造に間違いはありませんか? 本書をよく読み FTP クライアント ( ホームページビルダー 16 の ファイル転送ツール や FFFTP ) で Web サーバの中を確認しましょう 自分のユーザー ID 名 ( ea12345 など ) のディレクトリ直下に local_html ( または public_html ) ディレクトリを作成してありますか?( 参考 :J7 ページの 10) 対処方法 FTP クライアント ( ホームページビルダー 16 の ファイル転送ツール や FFFTP ) の画面内で ディレクトリやファイルを 右クリック して表示されるメニューから 名前の変更 ができる また 同様に 削除 もできる ( 場合によっては ディレクトリやファイルを削除してアップロード作業を最初からやり直した方が 早く問題を解決できることがある ) 原因 4 データを保存してから転送しましたか? 特に ホームページ ビルダー 16 では ページを上書きするのを忘れて転送だけをしてしまうこと があります ファイル メニューから すべて保存 してから転送しましょう 原因 5 トップページのファイル名は index.html ですか? トップページ以外のファイルには 半角英数であればどのような名前を付けても問題ありませんが トップページのファイル名は必ず index.html として下さい ( 特別な意図がある場合を除く ) 4 パソコンでの フォルダ のことを Web サーバ上では ディレクトリ と呼ぶことがある J11
よくある間違い newpage.html や top.html など 異なる名前になっている indexhtml のようにドットがない または index..html のようにドットが複数ついている index.html のように 全角で入力されている など 対処方法 トップページのファイル名を正しく index.html に変更する ( 前ページ 原因 3 対処方法 参照 ) 原因 6 データサイズの総量が容量制限値を超えていませんか? 基盤サービスアカウント では ユーザー 1 人あたりに割り当てられているデータ容量は 50MB( メガバイト ) までです 容量が 50MB を超えると ホームページが正常に表示されない場合があります データサイズの大きな画像ファイルなどを適宜圧縮 削除し 軽量化の上でアップロードして下さい (2) 文字が正しく表示されない原因機種依存文字を使っていませんか? 機種依存文字とは パソコン環境によっては表示できない文字のことです ホームページでは 機種依存文字はなるべく使わないようにしましょう 代表的なものとして 以下のような例が挙げられます (3) 画像が正しく表示されない原因 HTML ファイルだけではなく 画像も Web サーバへアップロードしましたか? ホームページでは 一つのページとして表示される本文 ( 拡張子が.html のファイル) と画像 ( 拡張子が.jpg.gif.png などのファイル) は 実は別々に分かれています 本文である html ファイル内で 画像ファイル nantoka.jpg を表示する などと指示を出して 画像を組み込むわけです つまり 画像ファイルを指示通りのファイル名で一緒に置いておかないと Web サーバでは 一つのページとしてまとめて扱えないのです 画像を Web サーバにアップロードした場合でも local_html ( または public_html ) ディレクトリ以外の場所に置くと表示されないことがあります 同じディレクトリ内へアップロードしましょう (4) レイアウトなどが崩れる原因すべてのパソコンや Web ブラウザで ホームページを同じように表示できるとは限りません! 最近では様々なパソコンや Web ブラウザが存在しており その種類によってホームページの見え方は異なります そのため 自分のパソコンの Web ブラウザで問題なくホームページが表示されたとしても 別の機器では色やフォントが変更されたり レイアウトが崩れたりしてしまうことがあります また 同じ Web ブラウザでも ウィンドウの大きさや文字の大きさを変えればレイアウトも変わりますので できる限り自分でも確認をしてみましょう J12