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

Size: px

Start display at page:

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

まれあいちぞの
5 years ago
Views:

1 ホームページアップロード編 ( ホームページビルダー 19 /FFFTP) 明治大学教育の情報化推進本部 ( 和泉 )

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

1. ホームページ公開のしくみ私たちがホームページを見るとき技術的には何が起こっているのでしょうかホームページのアドレスを

ホームページのデータを送ってもらいますホームページのデータそのものは最初から自分のパソコンの中に入っているわけではないのです図

作りたいホームページの企画を立ててパソコンでデータを制作ホームページの公開用の特別なコンピュータである Web サーバに送れば

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

4 2. ホームページ公開直前チェックリストさてホームページのデータが出来上がったら以下の点をチェックしてからアップロード作業にかかりましょうホームページ作成での基本的なチェック事項ホームページの原稿はひとつのフォルダにまとめて保存してありますか? html ファイル画像ファイルなどは local_html public_html のフォルダに収まるように作成してくださいファイル名は半角英数でつけてありますか? 全角文字などでファイル名をつけると正しく表示できない場合がありますファイル名を修正したら Web ブラウザなどで表示やリンクなどを確認しましょうファイル名に拡張子 (.html や.jpg など ) が正しく付いていますか? 最初に表示させたいページは index.html として作ってありますか? 明治大学 Web サーバ利用のためのチェック事項 MIND 利用基準を遵守していますか? ホームページに掲載するデータの総量は B 未満になっていますか? ホームページのおおもとのフォルダには以下のいずれかの名前を付けましたか? 学内のみ公開の場合 = local_html フォルダ学外にも公開の場合 = public_html フォルダ自分の基盤サービス利用アカウントはわかりますか? ユーザー ID MeijiMail 前 7 桁または 8 桁の英数字 2017 年度以降の入学アルファベット 2 文字 + 学生番号の下 6 ケタ例.ea 年度以前の入学アルファベット 2 文字 + 学生番号の下 5 ケタ例.ea01234 詳しくは ID について (MIND 内のみ参照可能 ) パスワード入学手続き書類に自分で書いた 8 桁以上 16 桁以内の英小文字及び数字変更していなければ共通認証 MeijiMail と同じパスワードパスワードがわからない場合 PC にログインできている各種パスワード変更画面から一括変更 PC にログインできないパスワードが不一致と表示される各キャンパスのメディア支援事務室へ ( 要学生証 ) 図 3 ホームページ公開前のチェックリスト 4

サーバ側の適切な場所にフォルダやファイルをドラッグ & ドロップすればデータが Web サーバに送信されるのですこれがアップロード 2 です本学内のパソコンでの FTP 接続はホームページビルダー 19 又は FFFTP を使用します 1 FTP

5 3. FTP クライアントについてホームページの公開のためには FTP クライアントと呼ばれる種類のソフトウェアを使いますこれは Web サーバとお手元のパソコンとの間で FTP 1 という形式による通信をおこなうものですホームページを Web に公開するときなどに用いられます具体的な画面を見てみましょう図 4 FTP クライアントの画面の見方 ( FFFTP の例 ) FTP クライアントでは図 4 のようにパソコンと Web サーバを同時に表示します左側のパソコン側から右側の Web サーバ側の適切な場所にフォルダやファイルをドラッグ & ドロップすればデータが Web サーバに送信されるのですこれがアップロード 2 です本学内のパソコンでの FTP 接続はホームページビルダー 19 又は FFFTP を使用します 1 FTP とは File Transfer Protocol の略称パソコンで作成したファイルをインターネット上の Web サーバなどに転送するための仕組みである 2 逆に右側の Web サーバから左側のパソコンへデータを送信することもできるこれをダウンロードと呼ぶ 5

サーバへアップロードしてみましょう 1メニューバーツール (T) から 2 ファイル転送ツールの起動(F) を選択 1 2 3 ファイル転送設定を設定転送設定名 (N)

jp FTP アカウント名 (U) 基盤サービス利用アカウント ( 例 )XX123456 など P.4 FTP パスワード (P) 各自設定したパスワード P.

6 4. アップロード 4.1. 方法その1: ホームページビルダー 19 のファイル転送ツールを使うそれではホームページビルダー 19 を使って作成したホームページデータを実際に明治大学の Web サーバへアップロードしてみましょう 1メニューバーツール (T) から 2 ファイル転送ツールの起動(F) を選択ファイル転送設定を設定転送設定名 (N) suruga2 プロバイダの選択 (I) その他 FTP サーバー名 (S) suruga2.mind.meiji.ac.jp FTP アカウント名 (U) 基盤サービス利用アカウント ( 例 )XX など P.4 FTP パスワード (P) 各自設定したパスワード P.4 サーバーの初期フォルダの設定 (D) 指定しない 4 OK をクリッククリック接続ボタンを 6 接続に成功すると右側枠内に Web サーバのファイルやフォルダが表示されるちなみに Web サーバ上ではフォルダのことをディレクトリと呼ぶことがある意味はフォルダとほぼ同じと考えてよい本書では Web サーバ上のフォルダはディレクトリと記して区別する 5 6 6

7 ( 一つ上のフォルダへ移動 ) や ( ドライブを選択 ) のボタンを使ってホームページのデータをまとめたフォルダを探す 7 8 フォルダ名を確認 ( 右クリック名前の変更で修正できる ) * 学内のみ公開する場合 = フォルダ名 local_html * 学外にも公開する場合 = フォルダ名 public_html 8 9 9 そのフォルダを右側の枠内 (Web サーバ側 )

7 7 ( 一つ上のフォルダへ移動 ) や ( ドライブを選択 ) のボタンを使ってホームページのデータをまとめたフォルダを探す 7 8 フォルダ名を確認 ( 右クリック名前の変更で修正できる ) * 学内のみ公開する場合 = フォルダ名 local_html * 学外にも公開する場合 = フォルダ名 public_html そのフォルダを右側の枠内 (Web サーバ側 ) にドラッグ & ドロップまたはフォルダを選択し PC 上のファイルをサーバーへ転送するをクリックするとアップロードされる 10 アップロード完了後 Web サーバ側に同じ名前のディレクトリ local_html ( または public_html ) が現れるそれをダブルクリックすると中身を見られるので自分が作った通りのファイルが入っているか確認しよう問題がなければ切断ボタンをクリックしてサーバとの通信を切断しよう 12 右上の閉じるボタンをクリックすればファイル転送ツールを終了できるホームページビルダー 19 のファイル転送ツールでアップロードする作業はここで終了です 5. アップロードファイルの確認で実際に表示されるか確認しましょう 7

4.2. 方法その 2: FFFTP を使う無料で利用できる FFFTP というソフトを使ってアップロード作業を行いましょうなお

フォルダの FFFTP を選択 1 2 FFFTP が起動した前面のホスト一覧の接続ボタンをクリック 2 3 ユーザ名

8 4.2. 方法その 2: FFFTP を使う無料で利用できる FFFTP というソフトを使ってアップロード作業を行いましょうなおどちらのソフトを使っても処理内容に変わりはありません最初にホームページデータを入れてあるフォルダの名前を確認しておきましょうフォルダ名を確認 ( 右クリック名前の変更で修正できる ) * 学内のみ公開する場合 = フォルダ名 local_html * 学外にも公開する場合 = フォルダ名 public_html 1 画面左下スタートからすべてのプログラムをクリックし FFFTP フォルダの FFFTP を選択 1 2 FFFTP が起動した前面のホスト一覧の接続ボタンをクリック 2 3 ユーザ名の入力を求められたら基盤サービス利用アカウントのユーザー ID を入力 ( 例 :ea01234 ea012345) P.4 そして OK をクリック 3 8

9 4 パスワード / パスフレーズを求められたらパスワード ( P.4) を入力 OK をクリック 4 5 暗号化の状態の保存はいいえをクリックこの画面が表示されない場合もあるその場合は気にせずに6へ 5 6 パスワードが正しければ Web サーバに接続できる ( 右側の枠内に Web サーバ内のデータが表示される ) 7 7ホームページのデータをまとめたフォルダを探すためまずフォルダの移動ボタンをクリック 6 8 PC から自分がホームページフォルダ local_html ( または public_html ) を収納したフォルダを探す ( 下図の例を参照 ) 8 9 フォルダを選択すると OK ボタンがクリック可能になるクリック 9 9

10 ホームページデータ本体のフォルダ local_html か public_html を右側の枠内 (Web サーバ側 ) にドラッグ & ドロップまたはツールバーにある 11 アップロードのアイコンをクリックするとアップロードされる Web サーバ側にも同じフォルダが表示されるのでダブルクリックしてフォルダ内すべてアップロードされたかを確認する参照 10 11 問題がなければ

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

5. アップロードファイルの確認アップロード後以下の URL を Web ブラウザ (Internet Explorer 等 ) で開いて確認しましょう Chrome,Firefox の場合 http:// の入力は省略できます Index.html をトップページとして * 学内のみ公開する場合フォルダ名 local_html でアップロード http://local.kisc.meiji.

11 5. アップロードファイルの確認アップロード後以下の URL を Web ブラウザ (Internet Explorer 等 ) で開いて確認しましょう Chrome,Firefox の場合の入力は省略できます Index.html をトップページとして * 学内のみ公開する場合フォルダ名 local_html でアップロードユーザー ID/ ( 基盤サービス利用アカウント名 / ファイル名 ) * 学外にも公開する場合フォルダ名 public_html でアップロードユーザー ID/ ( 基盤サービス利用アカウント名 / ファイル名 ) 例 : 基盤サービスアカウントのユーザー ID が XX の人が学内へ index.html をトップページとして公開した場合 ~( チルダ ) は Shift キー + ^ ( キーボード右上 BackSpace の 2 個左 ) index.html ではない top.html などを最初に表示させる場合はファイル名を入力すると表示されます例 : 課題によって最初に表示させるページのファイル名の指定がある場合もあります index.html の場合は入力しなくても index.html が表示されますまたと入力してもと同じページが表示されます ( アドレス表示は 11

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

原因 5 トップページのファイル名は index.html ですか? トップページ以外のファイルには半角英数であればどのような名前を付けても問題ありませんがトップページのファイル名は必ず index.

html のように全角で入力されているなど対処方法トップページのファイル名を正しく index.html に変更するアドレスにファイル名まで入力する下記参照 index.html ではない top.

html としない場合もあります原因 6 データサイズの総量が容量制限値を超えていませんか?

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

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

目次 1. ホームページ公開のしくみ... J3 2. ホームページ公開直前チェックリスト... J4 3. FTP クライアントについて... J5 4. 公開の方法その1: ホームページビルダー 16 を使う... J6 5. 公開の方法その2: FFFTP を使う... J8 6. トラブ

ホームページアップロード編 ( ホームページビルダー 16 /FFFTP) 明治大学教育の情報化推進本部 ( 和泉 ) J1 目次 1. ホームページ公開のしくみ... J3 2. ホームページ公開直前チェックリスト... J4 3. FTP クライアントについて... J5 4. 公開の方法その1: ホームページビルダー 16 を使う... J6 5. 公開の方法その2: FFFTP を使う...

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

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