目次 1. ホームページ公開のしくみホームページ公開直前チェックリスト FTP クライアントについてアップロード方法その1: ホームページビルダー 19 のファイル転送ツールを使う方法その2: FFF

(1)

ホームページ

アップロード編

(

ホームページ・ビルダー19

／FFFTP)

明治大学

教育の情報化推進本部

（和泉）

2017

(2)

1. ホームページ公開のしくみ ... 3 2. ホームページ公開直前チェックリスト ... 4 3. 「FTP クライアント」について ... 5 4. アップロード ... 6 4.1. 方法その１：『ホームページ・ビルダー19』のファイル転送ツールを使う ... 6 4.2. 方法その２：『FFFTP』を使う ... 8 5. アップロードファイルの確認 ... 11 6. トラブルシューティング ... 12 (1) 「Web ページが見つかりません」と表示される ... 12 (2) 文字が正しく表示されない ... 13 (3) 画像が正しく表示されない ... 14 (4) レイアウトなどが崩れる ... 14

(3)

1. ホームページ公開のしくみ私たちがホームページを見るとき、技術的には何が起こっているのでしょうか。図 1 ホームページ閲覧のしくみ自分で作ったホームページのデータを「Web サーバ」に送れば、ほかのパソコンから見られます。図 2 ホームページ公開の仕組みホームページのアドレスを、パソコンの Web ブラウザに入力すると、インターネットを経由して、そのアドレスを持つ「Web サーバ」から自分のパソコンまで、ホームページのデータを送ってもらいます。ホームページのデータそのものは、最初から自分のパソコンの中に入っているわけではないのです。作りたいホームページの企画を立てて、パソコンでデータを制作。ホームページの公開用の特別なコンピュータである「Web サーバ」に送れば、インターネットに接続したほかのパソコンから見られます。このように、データをサーバに送ることを「アップロード」といいます。

(4)

2. ホームページ公開直前チェックリストさて、ホームページのデータが出来上がったら、以下の点をチェックしてから、アップロード作業にかかりましょう。

 ホームページ作成での基本的なチェック事項

ホームページの原稿は、ひとつのフォルダにまとめて保存してありますか？ html ファイル、画像ファイルなどは「local_html」「public_html」のフォルダに収まるように作成してください。ファイル名は、半角英数でつけてありますか？全角文字などでファイル名をつけると、正しく表示できない場合があります。ファイル名を修正したら、Web ブラウザなどで表示やリンクなどを確認しましょう。ファイル名に『拡張子』（.html や.jpg など）が正しく付いていますか？最初に表示させたいページは「index.html」として作ってありますか？

 明治大学 Web サーバ利用のためのチェック事項

『MIND 利用基準』を遵守していますか？ →http://www.meiji.ac.jp/mind/guideline/ ホームページに掲載するデータの総量は、‣‹B 未満になっていますか？ホームページのおおもとのフォルダには、以下のいずれかの名前を付けましたか？学内のみ公開の場合＝「local_html」フォルダ学外にも公開の場合＝「public_html」フォルダ自分の『基盤サービス利用アカウント』はわかりますか？ ☆ユーザーID MeijiMail のメールアドレスの@前、7 桁または 8 桁の英数字【2017 年度以降の入学】アルファベット 2 文字 + 学生番号の下 6 ケタ例.ea012345 【2016 年度以前の入学】アルファベット 2 文字 + 学生番号の下 5 ケタ例.ea01234 詳しくは『ID について』(MIND 内のみ参照可能) →http://www.meiji.ac.jp/isc/manuals/id-pass.html ☆パスワード入学手続き書類に自分で書いた8 桁以上 16 桁以内の英小文字及び数字 ※変更していなければ、共通認証、MeijiMail と同じパスワード ★パスワードがわからない場合・PC にログインできている→各種パスワード変更画面から一括変更・PC にログインできない、パスワードが不一致と表示される →各キャンパスのメディア支援事務室へ（要学生証）図 3 ホームページ公開前のチェックリスト

(5)

3. 「FTP クライアント」についてホームページの公開のためには、「FTP クライアント」と呼ばれる種類のソフトウェアを使います。これは、「Web サーバ」とお手元のパソコンとの間で「FTP」1_{という形式による通信をおこなうもの} です。ホームページをWeb に公開するときなどに用いられます。具体的な画面を見てみましょう。図 4 FTP クライアントの画面の見方（『FFFTP』の例）「FTP クライアント」では、図４のようにパソコンと Web サーバを同時に表示します。左側のパソコン側から、右側のWeb サーバ側の適切な場所に、フォルダやファイルをドラッグ＆ドロップすれば、データがWeb サーバに送信されるのです。これが「アップロード」2_です。本学内のパソコンでのFTP 接続は、『ホームページ・ビルダー19』又は『FFFTP』を使用します。

1_{「FTP」とは、「File Transfer Protocol」の略称。パソコンで作成したファイルを、}

インターネット上の「Web サーバ」などに転送するための仕組みである。

2_{逆に、右側の「Web サーバ」から左側のパソコンへデータを送信することもできる。}

(6)

4. アップロード 4.1. 方法その１：『ホームページ・ビルダー19』のファイル転送ツールを使うそれでは、『ホームページ・ビルダー19』を使って作成したホームページデータを、実際に明治大学のWeb サーバへアップロードしてみましょう ①メニューバー「ツール（T)」から ②「ファイル転送ツールの起動(F)」を選択。 ③「ファイル転送設定」を設定。転送設定名(N) suruga2 プロバイダの選択（I) その他 FTP サーバー名（S) suruga2.mind.meiji.ac.jp FTP アカウント名（U) 基盤サービス利用アカウント（例）XX123456 など →P.4 FTP パスワード(P) 各自設定したパスワード →P.4 サーバーの初期フォルダの設定(D) 指定しない ④「OK」をクリック。

④

⑤ 接続ボタンをクリック。 ⑥接続に成功すると、右側枠内に Web サーバのファイルやフォルダが表示される。ちなみに、Web サーバ上では、フォルダのことを「ディレクトリ」と呼ぶことがある。意味は「フォルダ」とほぼ同じと考えてよい。本書では Web サーバ上のフォルダは「ディレクトリ」と記して区別する。

⑤

⑥

①

②

③

(7)

『ホームページ・ビルダー19』の「ファイル転送ツール」でアップロードする作業は、ここで終了です。「5.アップロードファイルの確認」で実際に表示されるか確認しましょう。 ⑦ （一つ上のフォルダへ移動）や（ドライブを選択）のボタンを使って、ホームページのデータをまとめたフォルダを探す。 ⑧フォルダ名を確認（右クリック →「名前の変更」で修正できる）。＊学内のみ公開する場合＝フォルダ名「local_html」＊学外にも公開する場合＝フォルダ名「public_html」 ⑨そのフォルダを、右側の枠内（Web サーバ側）にドラッグ&ドロップ、またはフォルダを選択し「PC 上のファイルをサーバーへ転送する」をクリックするとアップロードされる。

⑦

⑧

⑨

⑩アップロード完了後、Web サーバ側に同じ名前のディレクトリ「local_html」（または「public_html」）が現れる。それをダブルクリックすると中身を見られるので、自分が作った通りのファイルが入っているか確認しよう。 ⑪問題がなければ切断ボタンをクリックして、サーバとの通信を切断しよう。 ⑫右上の閉じるボタンをクリックすれば、「ファイル転送ツール」を終了できる。

⑩

⑪

⑫

(8)

4.2. 方法その２：『FFFTP』を使う無料で利用できる『FFFTP』というソフトを使ってアップロード作業を行いましょう。なお、どちらのソフトを使っても、処理内容に変わりはありません。最初にホームページデータを入れてあるフォルダの名前を確認しておきましょう。フォルダ名を確認（右クリック→「名前の変更」で修正できる）。＊学内のみ公開する場合＝フォルダ名「local_html」＊学外にも公開する場合＝フォルダ名「public_html」 ①画面左下「スタート」から「すべてのプログラム」をクリックし、「FFFTP」フォルダの「FFFTP」を選択。

①

②『FFFTP』が起動した。前面の「ホスト一覧」の「接続」ボタンをクリック。

②

③「ユーザ名」の入力を求められたら、基盤サービス利用アカウントのユーザーID を入力。（例：ea01234、ea012345）→P.4 そして「OK」をクリック。

③

(9)

④「パスワード／パスフレーズ」を求められたら、パスワード(→P.4)を入力。「OK」をクリック。

④

⑤「暗号化の状態の保存」は「いいえ」をクリック。 ※この画面が表示されない場合もある。その場合は気にせずに⑥へ。

⑤

⑥パスワードが正しければ Web サーバに接続できる（右側の枠内に Web サーバ内のデータが表示される）。 ⑦ホームページのデータをまとめたフォルダを探すため、まず「フォルダの移動」ボタンをクリック。

⑥

⑦

⑧「PC」から、自分がホームページフォルダ「local_html」（または「public_html」）を収納したフォルダを探す（下図の例を参照）。 ⑨フォルダを選択すると「OK」ボタンがクリック可能になる。クリック。

⑧

⑨

(10)

「5.アップロードファイルの確認」で実際に表示されるか確認しましょう。 ※この際、右側に表示されているサーバー上の html ファイルをダブルクリックなどで開いてもアップロードしたサーバー上の html ファイルを開いたことにはなりません。ダブルクリックで開くとブラウザのアドレスに「C:\Users\win8prof\AppData\Local\Temp\file\index.html」のように表示されます。これは使用しているパソコンの中にあるファイルを表示しているということです。「5.アップロードファイルの確認」で実際に表示されるか確認しましょう。 ⑩ホームページデータ本体のフォルダ「local_html」か「public_html」を、右側の枠内（Web サーバ側）にドラッグ &ドロップ、またはツールバーにある「アップロード」のアイコンをクリックすると、アップロードされる。 Web サーバ側にも同じフォルダが表示されるので、ダブルクリックしてフォルダ内すべてアップロードされたかを確認する。※参照 ⑪問題がなければ、「閉じる」ボタンをクリックすれば、『FFFTP』を終了できる。

⑩

⑪

(11)

5. アップロードファイルの確認

アップロード後、以下のURL を Web ブラウザ（Internet Explorer 等）で開いて確認しましょう。 ※Chrome,Firefox の場合、「http://」の入力は省略できます。

Index.html をトップページとして

※「index.html」ではない「top.html」などを最初に表示させる場合はファイル名を入力すると表示されます。例：http://local.kisc.meiji.ac.jp/~ea012345/top.html 課題によって最初に表示させるページのファイル名の指定がある場合もあります。 ★「index.html」の場合は入力しなくても、「index.html」が表示されます。また http://local.kisc.meiji.ac.jp/~ea012345/index.html と入力しても http://local.kisc.meiji.ac.jp/~ea012345/ と同じページが表示されます。 (アドレス表示はhttp://local.kisc.meiji.ac.jp/~ea012345/index.html) ＊

学内のみ公開

する場合フォルダ名「local_html」でアップロード

http://local.kisc.meiji.ac.jp/~ユーザーID/

（http://local.kisc.meiji.ac.jp/~基盤サービス利用アカウント名/ファイル名）＊

学外にも公開

する場合フォルダ名「public_html」でアップロード

http://www.kisc.meiji.ac.jp/~ユーザーID/

（http://www.kisc.meiji.ac.jp/~基盤サービス利用アカウント名/ファイル名）例：基盤サービスアカウントのユーザーID が「XX123456」の人が、学内へ index.html をトップページとして公開した場合 http://local.kisc.meiji.ac.jp/~XX123456/ ※「~（チルダ）」は、「Shift」キー＋「＾」（キーボード右上「BackSpace」の２個左）。

(12)

6. トラブルシューティング (1) 「Web ページが見つかりません」と表示されるホームページをアップロードしたのに、Web ブラウザで確認すると「Web ページが見つかりません」というエラーメッセージが表示されることがあります。原因① 最新の状態に更新されていますか？ホームページをWeb サーバへアップロードしても、Web ブラウザの表示を更新しなければホームページは表示されません。まずはブラウザの「最新の状態に更新」ボタン（円形の矢印）をクリックしましょう。それでもうまく表示されないときは、少し時間をおいてから再表示させてみましょう。閲覧履歴が残っているため表示されない場合もあります。履歴を削除する、ブラウザを変えてみるなどすると表示される場合もあります。原因② URL を間違えていませんか？ Web ブラウザに入力した URL をしっかり確認しましょう。原因③ ディレクトリの名称や構造に間違いはありませんか？自分のユーザーID 名（「XX123456」など）のディレクトリ直下に「local_html」（または「public_html」）ディレクトリを作成してありますか？ FTP クライアント（『ホームページビルダー19』の『ファイル転送ツール』や、『FFFTP』）で、 Web サーバの中を確認しましょう。原因④ データを保存してから転送しましたか？特に『ホームページ・ビルダー19』では、ページを上書きするのを忘れて転送だけをしてしまうことがあります。「ファイル」メニューから「すべて保存」してから転送しましょう。【よくある間違い】・全角文字（「ｈｔｔｐ：／／」など）で入力している。・「kisc」を「kisk」と入力している。 ……など【よくある間違い】「local_html」フォルダ内へ更に「local_html」フォルダをアップロードしている。 →「/home/XX123456/」まで移動して「local_html」フォルダをアップロード「ファイル転送ツール」「FFFTP」でログインした最初のフォルダに「index.html」などをアップロード →「local_html」または「public_html」フォルダに入れてアップロード

(13)

原因⑤ トップページのファイル名は「index.html」ですか？トップページ以外のファイルには、半角英数であればどのような名前を付けても問題ありませんが、トップページのファイル名は必ず「index.html」として下さい（特別な意図がある場合を除く）。 ※「index.html」ではない「top.html」などを表示させる場合は～/~XX123456/top.html とファイル名を入力することで表示可能です。課題によって最初に表示させるページのファイル名を index.html としない場合もあります。原因⑥ データサイズの総量が容量制限値を超えていませんか？『基盤サービスアカウント』では、1 アカウントに対して付与される最大ディスク容量は 1GB となっています。容量を超えると、以降にアップロードしたファイルが表示されません。データサイズの大きな画像ファイルなどを適宜圧縮・削除し、軽量化の上でアップロードして下さい。 ★現在の使用容量を確認するには、サーバーファイル側のファイル上または余白で右クリックをして【FFFTP の場合】「ファイル容量計算」で確認【HP ビルダーの転送ツールの場合】「使用容量の表示」を選択（クリック）することで確認できます。容量をこえてアップロードしようとすると、左のようなポップアップが表示され、アップロードできません。容量を確認して制限量を超えないようにファイルを整理しましょう。【よくある間違い】・「newpage.html」や「top.html」など、異なる名前になっている。・「indexhtml」のようにドットがない。または「index..html」のようにドットが複数ついている。・「ｉｎｄｅｘ.html」のように、全角で入力されている。 ……など【対処方法】・トップページのファイル名を正しく「index.html」に変更する。・アドレスにファイル名まで入力する。下記参照

(14)

(2) 文字が正しく表示されない原因機種依存文字を使っていませんか？機種依存文字とは、パソコン環境によっては表示できない文字のことです。なるべく使わないようにしましょう。代表的なものとして、以下のような例が挙げられます。 (3) 画像が正しく表示されない原因１ HTML ファイルだけではなく、画像も Web サーバへアップロードしましたか？ホームページでは、一つのページとして表示される本文（拡張子が「.html」のファイル）と画像（拡張子が「.jpg」、「.gif」、「.png」などのファイル）は、別々に分かれています。本文である html ファイル内で「画像ファイル『nantoka.jpg』を表示する」などと指示を出して、画像を組み込むわけです。つまり、画像ファイルを指示通りのファイル名で一緒に置いておかないと、Web サーバでは、一つのページとしてまとめて扱えないのです。画像をWeb サーバにアップロードした場合でも、「local_html」（または「public_html」）ディレクトリ以外の場所に置くと表示されないことがあります。同じディレクトリ内へアップロードしましょう。原因２画像パスが絶対参照になっていませんか？アップロードする前に試した場合は表示されたが、アップロード後に画像が表示されなくなった場合、html 内の画像パス（画像ファイルのある場所）の指定が間違っている場合があります。(または原因３の容量オーバー) 例えば画像パスの指定が「C:¥users¥MyDocs¥Documents¥neko.jpg」や「X:¥local_html¥neko.jpg」のように使っている PC 上のファイルを指定しても当然表示されません。作成したhtml ファイルからの相対参照でパスを指定しましょう。原因３データサイズの総量が容量制限値を超えていませんか？ →P.13 原因４拡張子を変更しませんでしたか？拡張子をアプリケーションからの書き出しや保存以外で変更した場合、表示されないことがあります。たとえば Photoshop の.psd を.jpg に書き換えると web 上はもちろん PC 上でも表示されません。 (4) レイアウトなどが崩れる原因すべてのパソコンや Web ブラウザで、ホームページを同じように表示できるとは限りません！最近では様々なパソコンやWeb ブラウザが存在しており、その種類によってホームページの見え方は異なります。そのため、自分のパソコンのWeb ブラウザで問題なくホームページが表示されたとしても、別の機器では色やフォントが変更されたり、レイアウトが崩れたりしてしまうことがあります。また、同じWeb ブラウザでも、ウィンドウの大きさや文字の大きさを変えればレイアウトも変わりますので、できる限り自分でも確認をしてみましょう。

目次 1. ホームページ公開のしくみ ホームページ公開直前チェックリスト FTP クライアント について アップロード 方法その1: ホームページ ビルダー 19 のファイル転送ツールを使う 方法その2: FFF