FileZillaの最新版をダウンロードする
FileZillaの公式サイトにアクセスしてください。「Download FileZilla Client」ボタンをクリックしてダウンロードページに遷移し、ダウンロードページの「Download FileZilla Client」ボタンをクリックすると、ダウンロードが始まります。
Memo
もし広告が表示されたら、「Skip」をクリックして先に進みましょう。
『デザインの学校 これからはじめる HTML&CSSの本［Windows 10&macOS対応版］』のサポートページです。
FTPクライアントソフト「FileZilla」のダウンロードから設定までを解説しています。9章のlesson.03「ファイルをアップロードしよう」の補足情報としてご利用ください。
実際にデータをアップロードしてウェブサイトを公開するためには、前もってウェブサーバを準備しておく必要があります。
ウェブサーバのレンタル業者の多くはお試し期間を設けているので、「FileZilla」を設定する前に、まずは仮申し込みを済ませておきましょう。
9章でご紹介した個人向けレンタルサーバサービスの「ロリポップ！」も、10日間のお試し期間を設けています。
FileZillaの公式サイトにアクセスしてください。「Download FileZilla Client」ボタンをクリックしてダウンロードページに遷移し、ダウンロードページの「Download FileZilla Client」ボタンをクリックすると、ダウンロードが始まります。
もし広告が表示されたら、「Skip」をクリックして先に進みましょう。
「ダウンロード」フォルダの中に保存されたexeファイルのアイコンをダブルクリックして、インストーラーを起動します。
Macの場合は、まずzipファイルのアイコンをダブルクリックして、ファイルを解凍してください。生成された「FileZilla-Installer.app」をダブルクリックすると、インストーラーを起動できます。
［ユーザー アカウント制御］画面が表示されたら、［はい］をクリックしてください。
ライセンスの同意書が表示されるので、確認の上［I Agree］をクリックします。
Macの場合は、この作業でインストールは完了です。「9. 設定用の情報を手元に用意する」から先に進んでください。
［Optional Offer］画面が表示されたら、「No, don't protect me」にチェックを入れて［Next ＞］をクリックします。
1台のパソコンを複数人で利用している場合に、FileZillaを使用するのが自分だけなのか、他のユーザーも使用するのかを選択します。
自分だけが使用する場合は「Only for me (ユーザー名)」、それ以外の場合には「Anyone who uses this computer (all users)」を選択し、［Next ＞］をクリックします。
アプリケーション本体とともにインストールされるコンポーネントの選択画面が表示されるので、「Desktop Icon」にチェックを入れ、［Next＞］をクリックします。
インストール先フォルダーの指定画面が表示されるので、確認の上［Next ＞］をクリックします。
スタートメニューのフォルダ選択画面が表示されるので、確認の上［Install］をクリックします。
［Finish］をクリックします。
「FileZillaにようこそ」の画面が表示されたら、［OK］をクリックします。
ここから先は、レンタルサービス提供元から支給される情報が必要です。支給されたファイル転送（(S)FTP）に関する情報が書かれている資料を見ながら、FTPクライアントソフトを設定していきましょう。
ロリポップ！をお使いの場合は、、「ユーザー専用ページ」で各情報を確認できます。
申込時に申請したパスワードを使って「ユーザー専用ページ」にログインし、左のナビゲーションメニューから「アカウント情報」ページを開いておいてください。
FileZillaを起動して［ファイル］メニュー→［サイト マネージャ...］の順にクリックします。
「サイト マネージャ」ダイアログボックスの［新しいサイト］ボタンをクリックします。
任意の名前を入力します。実際にはどんな名前でもかまいませんが、今回は「67Green」と入力します。
ホスト欄にサーバのアドレスを入力します。資料の中にFTPサーバ、またはFTPS（SFTP）サーバといった項目で記されているはずですが、もしFTPとFTPS（SFTP）の両方が書かれていたら、FTPS（SFTP）を優先してください。
ロリポップ！をお使いの場合は、「アカウント情報」ページ中央の「サーバー情報」欄に記載されている「ＦＴＰＳサーバー」の情報（*****.lolipop.jp）を書き写しましょう。
「ホスト」欄にFTPサーバのアドレスを入力した場合は「FTP - ファイル転送プロトコル」を選択します。
FTPSサーバのアドレスを入力した場合は「FTP - ファイル転送プロトコル」を選択した上で、「暗号化」欄にて「使用可能なら明示的なFTP over TLSを使用」を選択します。
SFTPサーバのアドレスを入力した場合には「SFTP - SSH File Transfer Protocol」を選択してください。
ログオンの種類は、初期状態では「匿名」になっているので、「通常」に変更します。
資料の中に「ユーザーID」または「アカウント」といった項目で記されている情報を「ユーザ」欄に、さらにパスワードを「パスワード」欄に入力します。
ロリポップ！をお使いの場合は、「ＦＴＰ・WebDAVアカウント」がユーザー名、「ＦＴＰ・WebDAVパスワード」がパスワードにあたります。
「接続」ボタンをクリックします。
接続に失敗した場合は、「13. ホストの情報を入力する」から操作をやり直します。
情報が正しく入力されていれば、ウェブサーバに接続されて「リモート サイト：」欄にウェブサーバ上のファイル構成が表示されます。また、ステータス欄に「状態： ディレクトリ一覧の表示成功 "/"」が表示されます。
画面左の「ローカルサイト：」欄と、画面右の「リモートサイト：」欄にそれぞれ、これからアップロードするファイルとデータをアップロードする先のフォルダーを指定します。
ここでは、「ローカルサイト：」欄にデスクトップの「67Green」フォルダーを指定します。
「ローカルサイト：」欄に表示されているファイルやフォルダーのうち、アップロードするものを選択します。Ctrlキー（Macの場合はcommandキー）を押しながらクリックすると、一度に複数のファイルやフォルダーを選択できます。
ここでは「index.html」「item.html」「map.html」「style.css」「image」を選択します。
アップロードするファイルとフォルダーがもれなく選択できたら、選択したファイル上で右クリックしてコンテキストメニューを表示し、「アップロード」をクリックします。
画面右の「リモートサイト：」欄に、アップロードしたファイルがすべて表示されていることを確認します。
FileZilla の［閉じる］ボタンをクリックし、FileZilla を終了します。
ウェブブラウザを起動して、アドレスバーにウェブサイトのアドレス（URL）を入力し、Enterキーを押します。ウェブサイトのデータが正しくアップロードされていれば、ウェブページが表示されます。
もし画像が表示されないなどの不具合がある場合には、もう一度FTPクライアントソフトを起動して、足りないファイルをアップロードしましょう。
ロリポップ！をお使いの場合は、「アカウント情報」ページの「アカウント情報」欄に記載されている「サイトアドレス」の情報を、アドレスバーに入力しましょう。