★Lesson6★
〜ファイルアップロード編〜


○6:ファイルアップロード編

このレッスンが最終レッスンとなります。ここまでよく頑張りました。後もうひとふん張り、頑張って下さい!! で、Lesson5の最後に書いたとおり、このLesson6では実践は行いません。解説のみとなります。

で、早速解説していきたいと思います。まずは、ファイルをサーバーにアップロードさせるためのソフトの扱い方の解説をします。「ソフト必要なの?」って思われたかもしれませんが心配しないで下さい。簡単な設定をちょっとだけするうえに、尚且つ「フリーソフト」ですから、心配はいりません。で、その今回使用するフリーソフトというのは「FFFTP」というものです。今回は2005年4月2日に登場した最新版のVer.1.92aを使用します。

まずはFFFTP Ver,1.92aをダウンロード、インストールを行い、起動させます。



そうすると、FFFTPと共に、上記のような「ホスト一覧」窓が表示されたはずです。表示されなかった人はFFFTPメニューの「接続(F)」⇒「接続(C)」とクリックして表示させて下さい。
で、ホスト一覧画面内にある「新規ホスト(N)」をクリックします。



そうすると、上記のような「ホストの設定」窓が表示されると思いますので、各入力欄に設定情報を以下のように記述していきましょう。

ホストの設定名(T)
ここに記述した設定名は、「ホスト一覧」ウィンドウに表示されます。自分で見て分かりやすい、好きな名前を付けて下さい。

ホスト名(アドレス)(N)
サーバーのホスト名(アドレス)を記述して下さい。尚、このホスト名欄については、サーバー側から渡された情報がありますので、そちらを確認して記入して下さい。

ユーザー名(U)
あなたのユーザーIDを記述して下さい。ユーザーIDは、大抵はサーバーで登録したものですが、サーバー側から渡された情報で確認して下さい。

パスワード/パスフレーズ(P)
あなたのパスワードを記述して下さい。パスワードは、大抵サーバーで登録したものですが、サーバー側から渡された情報で確認して下さい。

ローカルの初期フォルダ(L)
パソコン側の初期フォルダの設定をする場所です。この設定は必ずしも行わないといけないというわけではありませんが、この設定を行っておくと、サーバーへの接続が完了した時に、任意のフォルダを自動で開いておくことが出来ます。記述もよし、入力欄の右にあるボタンをクリックして、ホームページのデータが入っているフォルダを指定してもよし、どっちの方法でもOKです。

ホストの初期フォルダ(R)
ここは基本的に空欄でOKです。ここを設定する意味は、ローカルの初期フォルダと同様に、サーバーへ接続が完了した時に、任意のフォルダを自動で開いておくことが出来ます。



そうすると、上記のような感じになったかと思われます。ただし、この設定内容はあくまでも参考例なので、画像通りの記述は行わないで下さい。入力が完了次第、OKボタンをクリックしてホストの設定窓を閉じて下さい。



そうすると、上記のように「ホスト一覧」窓に「☆スカイエリアのサイト☆」という項目が一つ追加されたと思います。以上で、サーバーへの接続の準備は完了です。

サーバーへの接続準備が完了したところで、今度はサーバーに接続してみましょう。

ホスト一覧窓で先程登録した「☆スカイエリアのサイト☆」を選択し、「接続(S)」ボタンをクリックして下さい。尚、「☆スカイエリアのサイト☆」をダブルクリックしても接続ボタンを押したことと同様の扱いとなります。で、この後に「ホストが見つかりません」「ログインできません」といったような感じのメッセージが表示された場合は、接続設定が間違っているか、もしくはインターネットに接続していない恐れがあります。そこを確認してみて下さい。

※注:尚、ここから先は当サイトのサーバーへファイルをアップロードした場合においての説明となりますので、ここから先はあなたの環境にあった方法で作業を行って下さい。



接続が完了すると、上記のような画面が表示されると思います。左側の窓が自分のパソコン(ローカル)側、右側の窓がサーバー(ホスト)側です。まず、設定の際に「ローカルの初期フォルダ(L)」を設定していたら、左側の窓はその指定したフォルダを開いているはずです。設定していない、もしくは表示されていない人は、のボタンやのアドレスバーを使用して、HP製作場所フォルダを開いて下さい。

さて、とうとうこれが最後となりました!!最終関門、ファイルのアップロードです。とりあえず今回はHPの作成方法の解説なので、サーバーにテスト用のフォルダを作成します。

 


まずは右側の窓(サーバー側)の空欄の領域で右クリック(上記画像:左)をして、「フォルダ作成(K)」をクリックすると、「フォルダ作成(ホスト)」窓が表示(上記画像:右)されたはずですので、そこに「test」と打ち込んでOKボタンをクリックして下さい。そうすると、右側の窓にtestフォルダが出来上がったはずですので、それをダブルクリックして開いて下さい。

次に、左側の窓(パソコン側)では作成した「diary.html/index.html/profile.html」の3つのファイルをドラッグなり、Ctrlキーで選択するなりして、この3つのファイルを選択して下さい。で、この選択された状態で、右側の窓へドラッグして下さい。そうするとサーバーへファイルがアップロードされます。尚、FFFTPのメニューバーの中にあるをクリックしても、選択されたファイルはアップロードされます。アップロードが完了したら、もうインターネット上でサイトが閲覧可能な状態になるので、早速確認してみましょう。とりあえずFFFTPは最小化しておくなり、閉じるなりして下さい。

ブラウザは起動させましたか?ブラウザを起動させたら早速、ちゃんと閲覧が可能かどうかやってみましょう。URLは今回、testフォルダを作成しましたので、URLの後に「test/」を追加して下さい。これを忘れたらアドレスが違ってきますので、閲覧出来ません。今回はこのサイトのサーバー
「http://www.geocities.jp/skyarea_hp/」に、testフォルダを作成しましたので、URLは
「http://www.geocities.jp/skyarea_hp/test/index.html」となります。

※ちなみに、index.htmlファイルにアクセスする際に限り、URLにindex.htmlと入力しなくてもアクセス出来ますので、「http://www.geocities.jp/skyarea_hp/test/」と省略しても閲覧出来ます。

どうですか?無事、自分の作ったサイトは表示されましたか?
表示された方はおめでとうございます!! 無事、「HP作成準備講座」卒業です!! よくここまで頑張りましたね。お疲れ様でしたm(_ _)m
表示されなかった方、残念ですがもう一度このページを読み直してみて下さい( TT)

※尚、今回アップロードしたテストファイルは、HP作成の一連の作業を理解するための練習用HPですので、ちゃんと表示が確認出来次第、サーバーから全て削除しておきましょう。削除方法については、右側の窓(サーバー側)で、今回使用したテストファイル3つ(diary.html/index.html/profile.html)を右クリックして「削除(R)」をクリックすると、ファイルは削除されます。フォルダも同様の方法にて削除して下さい。尚、他のファイルやフォルダは削除しないように十分注意し、作業は慎重に行って下さい。

お疲れ様でした。今回、Lesson1〜6と、HPの作成の「方法」のみの解説に限定し、凝縮させてみました。これで「作り方」に関しては理解出来てもらえたと思います。

今回Lesson1〜6で学んだことを生かし、これからは自分のホームページ作成にチャレンジしてみて下さい。以上で「HP作成準備講座」は全て終了致しましたm(_ _)m

これからのホームページ作成に期待しています!!
もしこのサイトを見て作成したサイトがあれば、このサイトにて掲載(リンク)しますので、ご一報下さい。

≪≪前のレッスンへ戻るレッスンページTOP次のレッスンへ進む≫≫