目次
動画解説
1.NextFTPの設定
あなたが作ったホームページをサーバーにアップロードする準備をしましょう。
※クリックすると画像が大きくなります。
まずは画面の表示方法を選びます。NextFTPを最初に起動するとこの画面が表示されます。各項目をクリックするとそれに応じた画面へ切り替わりますから、お好きな表示方法を選んで「OK」をクリックします。変更はいつでもできます。
※この画面が表示されない場合は左上にあるメニューの「ウィンドウ」→「ウィンドウの分割方法」でも表示できます。
※クリックすると画像が大きくなります。
次に「ホスト（サーバー）」に接続する設定をします。画面左上にある
「ホストに接続」アイコンをクリックします。そのすぐ上にあるメニュー「ホスト（F）」→「接続」でも同様の操作が可能です。
※クリックすると画像が大きくなります。
「ホストに接続」ダイアログが開くので「個人用（スタンダード）」を選んで「新規ホスト」をクリックします。
※「新規フォルダ（F）」で別のフォルダを作ってそこに「新規ホスト」を作成することもできます。
※クリックすると画像が大きくなります。
「プロバイダ」の一覧の中から、ご利用になっているプロバイダを選び「ホストアドレス」を選んで「OK」をクリックします。一覧に、ご利用のプロバイダが記載されていない場合は「その他のプロバイダ」を選択して「OK」をクリックします。この場合「ホストアドレス」と「ホスト開始フォルダ」はこの後でも入力する機会があるので、ここでは空欄で構いません。
※クリックすると画像が大きくなります。
※クリックすると画像が大きくなります。
ホストの設定項目を入力します。ご利用になっているサーバーの「FTPアカウント」の情報をご用意の上手順を進めて下さい。
- ホスト名
お好きな名前をつけることができますが、サイトのタイトルやドメイン名などのわかりやすい名前をつけることをおすすめします。
- ホストアドレス「FTPアカウント情報」に記載されている「ホスト（サーバー）」のアドレスを入力します。123サーバーのように「IPアドレス」を入力する場合もあります。
※123サーバーでは「FTPホスト」/さくらサーバーでは「FTPサーバ」/HETEML(ヘテムル）では「ホスト名（アドレス）」/ロリポップ（Lolipop)では「FTPSサーバー」の名称で記載されています。
- ホスト開始フォルダ
ホスト（サーバー）に接続した時に自動的に開くホスト側（サーバー側）のフォルダ名を入力します。入力しなくても自動的に作成されるので、フォルダを指定する必要がなければ空欄でもOKです。サーバー（ロリポップなど）によっては空欄にするように指定されていることもあります。
- ローカル開始フォルダ
ホスト（サーバー）に接続した時に自動的に開くローカル側（あなたのパソコン側）のフォルダ名を入力します。空欄でも構いませんが、指定しておけばローカル側のフォルダを探す手間が省けます。
- ユーザーID「FTPアカウント情報」に記載されている「ユーザーID」を入力します。
※123サーバーでは「FTPアカウント」/さくらサーバーでは「FTPアカウント」/HETEML(ヘテムル）では「ユーザー名」/ロリポップ（Lolipop)では「FTP・WebDAVアカウント」の名称で記載されています。
- パスワード
「FTPのパスワード」を入力します。他のパスワードと混同しないように注意して下さい。
- プロトコル・転送モード
どちらも通常は「自動判定」でOKです。
- 自動リトライ
ホストへの接続に失敗した時に、自動で再接続をする待ち時間と回数を設定します。「再接続回数」を０に設定すると、自動再接続は行われません。
- PASVモード
データの転送モードです。通常はここをON(青い四角形が表示された状態)にしておきます。
- SSL暗号化（高度な設定）
接続に際して暗号化をするかしないかを設定します。暗号化をするかしないかや暗号化の種類はサーバーによって違います。（HETEML《ヘテムル》やロリポップ《Lolipop》ではExplicit(SSL) の指定がされています）ご利用のサーバーの指示に従って下さい。
※「ホストアドレス」「ユーザーID」は、ご利用になっているサーバーによって名称が異なる場合があります。詳しくは各サーバーの「FTP設定」のマニュアルなどをご参照ください。
2.ホームページをアップロード
※クリックすると画像が大きくなります。
まずホスト（サーバー）に接続します。現在は「未接続」となっていて、まだどこのサーバーにも繋がっていない状態です。画面左上にある
「ホストに接続」アイコンをクリックします。そのすぐ上にあるメニューの「ホスト（F）」→「接続」でも同様の操作が可能です。
※クリックすると画像が大きくなります。
「ホストに接続」ダイアログが開くので接続したいホストを選んで「接続」をクリックします。今回は「個人用（スタンダード）」のフォルダに「テスト用」というホストを作ってそこにアップロードしたいと思います。
※クリックすると画像が大きくなります。
ホスト（サーバー）に接続しました。まだなにも作っていないのでホスト（サーバー）側もローカル（パソコン）側もデータはありません。当然ホームページもブラウザに表示されません。
※画像のホスト（サーバー）側には「cgi-bin」というフォルダと「.ftpquota」というファイルがありますが、ホスト（サーバー）側の設定データなので特に操作の必要はありません。削除もしないで下さい。
※クリックすると画像が大きくなります。
まだホームページのデータを何もアップロードしていない状態のブラウザ画面です。サーバーに初めからあるフォルダやファイルの名前が表示されているだけです。ここに、簡単ですがタイトルが「テスト」で内容が「こんにちは！」と書かれたホームページが表示されるようにしたいと思います。
※クリックすると画像が大きくなります。
まずデスクトップにホームページのデータを収納するためのおおもとのフォルダーを作ります。後から作るホームページ用のファイルやフォルダーは全てこのおおもとのフォルダーに保存していきます。ここでは「テスト用フォルダー」という名前でおおもとのフォルダーを作り、そこにHTMLで書いたトップページのファイルを「index.html」というファイル名を付けて保存しました。ちなみに、ホームページのトップページ用のファイルには「index.html」というファイル名をつけるのが通例です。
※クリックすると画像が大きくなります。
※クリックすると画像が大きくなります。
上の画面は「テスト用フォルダー」を開いて中身を表示した状態です。「index.html」というファイルが収められています。下の画面はNextFTPです。こちらのローカル側にも自動的に「index.html」というファイルが入りました。次にこのファイルをホスト側にアップロードします。
※クリックすると画像が大きくなります。
ローカル側の「index.html」を右クリックするとメニューウィンドウが出るので「アップロード（U）」をクリックします。その下にも「アップロードTO・・・」や「名前を変えてアップロード・・・」という項目がありますが、通常は「アップロード（U）」を使います。
※NextFTPはある程度の時間何も操作をしないと、自動的に接続が切れるようになっています。「アップロード」や「ダウンロード」をしようとしても何も反応がない場合（文字がグレーになっています）は、再度ホスト側と接続して下さい。
※クリックすると画像が大きくなります。
ホスト側に「index.html」がアップロードされました。これでホームページが公開された状態になりました。では、ブラウザで確認してみます。
※クリックすると画像が大きくなります。
無事表示されています。ここまでは新規に作ったファイルのアップロードをご説明しましたが、次に既にアップロードしてあるファイルを編集・更新して再度アップロードをする手順をご説明します。その前にホスト側にあるファイルをダウンロードする必要があるので、まずはダウンロードの方法からご説明します。
3.ファイルのダウンロード
ホームページを編集・更新する前には必ずホスト（サーバー）からデータをダウンロードして、そのデータのバックアップ（同じデータをコピーして別の場所に保存しておくこと）をするようにして下さい。何かの手違いでデータが消えてしまった時やHTMLを編集していてわけがわからない状態になった時（結構あります）にすぐ元に戻すことができます。
※クリックすると画像が大きくなります。
まず、①ローカル側の「index.html」をクリックします。次に、②ホスト側の「index.html」を右クリックするとメニューウィンドウが出てきますので③「ダウンロード（L）」をクリックします。①の手順は飛ばすこともできますが、ダウンロード先が視覚的にわかるのでミスを防ぐためにも必ず①から行って下さい。
※クリックすると画像が大きくなります。
※クリックすると画像が大きくなります。
「ダウンロード（L）」をクリックすると「ダウンロードの上書き確認」というダイアログボックスが開きます。これは、ダウンロード先やアップロード先に同名のファイルやフォルダがある場合に表示されるもので、上書きしても問題がなければ「上書き（O）」にチェックを入れて「OK」をクリックするとダウンロードが始まります。
4.既存ファイルのアップロード
「2.ホームページをアップロード」で公開したホームページを編集・更新して再度アップロードします。ここでは「こんにちは！」という文字の下に「さようなら」という文字を付け加えてアップロードします。
※クリックすると画像が大きくなります。
①ホスト側の「index.html」をクリックします。②ローカル側の「index.html」を右クリックするとメニューウィンドウが出てきますので③「アップロード（U）」をクリックします。要するに「ダウンロード」の時と逆の手順です。やはりここでも①から確実に行って下さい。
※クリックすると画像が大きくなります。
ダウンロードの時と同じように「アップロードファイルの上書き確認」というダイアログボックスが出てきますから、確認して問題がなければ「上書き（O）」にチェックを入れて「OK」ボタンをクリックします。これでアップロードが始まります。
※クリックすると画像が大きくなります。
ブラウザで確認すると「さようなら」という文字が追加されています。編集したファイルのアップロードが無事行われました。以上の手順を繰り返してホームページを編集・更新していくというのが一連の流れとなります。
複数のファイルやフォルダーを選択して一度にアップロード・ダウンロードすることもできます。選択したいファイルやフォルダーにカーソルを合わせ、キーボードの「Ctrl（コントロール）」キーを押しながら左クリックします。これを選択したいファイルやフォルダー全てに行います。選択を取り消したい時は、取り消したいファイルやフォルダーにカーソルを合わせ同じように「Ctrl（コントロール）」キーを押しながら左クリックすれば取り消すことができます。「Ctrl（コントロール）」キーを押さずに左クリックすると最後に選択した項目以外は選択が解除されます。（なにもないところで左クリックで全ての選択が解除されます）また、キーボードの「A」を押しながら左クリックで全てのファイルやフォルダーが選択された状態になります。今後他の作業でも使う操作なので覚えておいて下さい。
※クリックすると画像が大きくなります。
複数もしくは全てのファイルやフォルダーを選択してアップロード・ダウンロードを行う時も「上書き確認」のダイアログボックスが出てきます。この時に「上書き（O）」にチェックを入れて「以降すべて（A）」をクリックすると、選択したファイルやフォルダー全てが編集・更新をしているしていないに関わらず上書きされます。選択したファイルやフォルダーの中で編集・更新をしたものだけをアップロード・ダウンロードしたいときは「新しいとき（N）」にチェックを入れて「以降すべて（A）」をクリックします。全てのファイルやフォルダーを選択して「新しいとき（N）」にチェックを入れ「以降すべて（A）」をクリックすることで、編集・更新したファイルのアップロード漏れとダウンロード漏れを防ぐことができます。
5.その他のアップロード・ダウンロード方法
アップロードとダウンロードの方法は他にもいくつかありますので簡単にご説明します。なお、いずれの方法でもローカル側とホスト側に同じ名前のファイルやフォルダがある場合は、上書き確認のダイアログボックスが表示されるのでよく確認の上行って下さい。
※クリックすると画像が大きくなります。
左上のメニューバーの「コマンド（C）」というボタンをクリックすると出てくるメニューウィンドウからもアップロードやダウンロードができます。画像はアップロードの場合です。①ローカル側のアップロードしたいファイル（ここでは「index.html」）をクリックしてから②メニューバーの「コマンド（C）」をクリックするとメニューウィンドウが開くので③「アップロード（U）」をクリックします。画像は省略しますが、ここでもホスト側に同じ名前のファイルがある場合は「アップロードファイルの上書き確認」のダイアログボックスが出てきますから確認の上「OK」をクリックするとアップロードが始まります。ダウンロードは①ホスト側ファイルをクリック②「コマンド（C）」をクリック③「ダウンロード（L）」をクリックというようにアップロードと逆の手順になります。
※クリックすると画像が大きくなります。
※クリックすると画像が大きくなります。
①ローカル側のアップロードしたいファイルをクリックして②メニューバーのアイコンが並んでいるところにある緑の上向き矢印のアイコン（その右に丸に矢印のついたアイコンがありますがこれではありません）をクリックします。この時も「アップロードファイルの上書き確認」のダイアログボックスが出てきます。よく確認してください。ダウンロードの時は①ホスト側のダウンロードしたいファイルをクリック②緑の下向き矢印のアイコンをクリックです。
「ドラック＆ドロップ」とは、移動したいファイルやフォルダーをマウスの左ボタンを押したままで移動させる方法です。左ボタンを離したところに移動できます。今回に限らず他の作業でも頻繁に使う方法なので覚えておいて下さい。
※クリックすると画像が大きくなります。
※クリックすると画像が大きくなります。
ファイルやフォルダーを「ドラック＆ドロップ」することでもアップロード・ダウンロードが可能です。アップロードまたはダウンロードしたいファイルやフォルダーを何もない領域に「ドラック＆ドロップ」します。手間も少なく簡単な方法ですが、自分の意図していない場所にファイルやフォルダーを置いてしまうという（上の画像で例えると「index.html」を「cgi-binフォルダー」の中に入れていしまうというような）ミスをしてしまう可能性があるので、慣れないうちはこの方法はあまりおすすめしません。（慣れてからもあまりやらないほうがいいかもしれません）
