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