未経験からWebサイト制作を学んで、副業や在宅ワークで稼げる様になりたい！という人のための本シリーズ。
今回は、制作したWebサイトのアップロード方法について勉強していきましょう。
クラウドソーシング等で Webサイト制作案件の募集文を見ていると、以下の様な文言を見かける事があるかと思います。
Webサイトが完成したら、インターネットで見られる状態にして下さい
サーバーへアップロードしてください
本番環境に反映させてください
これらは全て「制作したWebサイトをインターネットで公開してね！」という意味です。一般的には「サーバーへアップする」と言います。
Webサイト制作案件は、サイトを作り終わったら「ハイ！お終い！」では無く、サーバーへアップするところまでお願いされる案件が殆どです。
つまりWebデザイナーには、データをサーバーへアップロードするスキルが必須という事です。
でもご安心を！本記事で記載する内容さえ把握していれば、実際の案件でも対応できます。
少々ボリュームのある記事になりますが、腰を据えて取り組んでいきましょう。
「アップロード」「サーバー」って何？
あなたが自分のパソコンの中でhtmlファイルやcssファイルを編集して作成したWebサイト。これらのデータは当然ながら、あなたのパソコンの中にあるだけでは誰も見る事が出来ません。
作成したWebサイトをインターネット上で公開するために、サーバーへhtmlファイルやcssファイルをアップロードする必要があります。
サーバーはXserverやSAKURA internetといったレンタルサーバーサービスから月額で借ります。レンタルサーバーだと負荷に耐えられない程アクセスが多いような一部サイトを除けば、個人法人問わずレンタルサーバーを使用するのが一般的です。
サーバーへのアップロードは「FTPソフト」という物を利用して行います。
詳しくは以下からご説明していきます。
アップロード作業の流れ
アップロード作業の具体的な流れは以下になります。
- クライアントからサーバーの接続情報を聞く
- FTPソフトを使用してサーバーへ接続する
- 制作したWebサイトのデータをサーバーへアップロードする
ご覧の通り、やり方さえ覚えてしまえばサクっと終わる作業です。
まずは2の工程で使用する「FTPソフト」の準備から始めましょう！
FTPソフトのインストール
私達のパソコン内にあるデータをサーバーへアップロードするために、FTP（File Transfer Protocol）という仕組みを利用します。
FTPソフトをインストールすることで、簡単にFTPを利用する事が出来ます。
インターネットで「FTPソフト」と検索すればポピュラーなソフトがすぐに見つけられると思いますが、当記事では私も使用している「FFFTP」というフリーソフトをご紹介します。
FFFTPについて
FFFTPは20年以上の歴史を持つ、定番のFTPソフトです。
作者様による開発は2011年8月で終了したものの、その後も有志の方々により開発が継続されており、現在でも2~3ヶ月ペースでアップデートが行われています。
若干UIが古めかしいですが、その分シンプルで使いやすく、入門編におすすめのソフトです。
それでは準備を始めましょう！
1.FFFTPのインストール＆セキュリティ設定
まずはソフトのインストール。
最新版のFFFTPは、現在開発を行っているKURATA sayuri氏の Githubからダウンロードする事が出来ます。
上記URLからダウンロードページへアクセスし、少し下の方へスクロールすると、ダウンロード用のリンクが有ります。
「ffftp-v〇.〇-x64.zip」または 「ffftp-v〇.〇-x86.zip」と書いているリンクをクリックするとダウンロードが開始します。
次に先ほどダウンロードしたファイルを解凍し、「ffftp.exe」というファイルをクリックするとインストールが始まります。
サクっとインストールが完了し、以下のようなFFFTPの画面が立ち上がります。
この状態で既に使用可能ですが、セキュリティの強化を図るため、「マスターパスワード」という物を設定しておきます。
まず、FFFTP起動時に出現した「ホスト一覧」と書かれた小窓を閉じます。
次に画面左上にある【接続】メニューをクリック。
【設定】⇒【マスターパスワードの変更】と進んでいきます。
すると「新しいマスターパスワードを2回入れてください」と書かれた小窓が出現するので、真ん中にある入力欄へ任意のパスワードを入力してください。（ここで設定したパスワードは、次回以降FFFTP起動時に毎回入力を求められる様になります）
マスターパスワードの設定が終了したら、一度FFFTPを閉じて再起動しましょう。
「設定しているマスターパスワードを入力してください」という小窓が出現すれば設定は完了です。
先ほど設定したパスワードを入力すればFFFTPが起動します。
クライアントからサーバーの接続情報を聞く
FTPソフトの準備が終わったところで、Web制作案件におけるアップロード作業の流れに戻りましょう。
「制作したWebサイトをサーバーへアップロードして欲しい」と依頼されるクライアントは、基本的に既にレンタルサーバーなどからサーバーを用意しています。
サーバーへファイルをアップロードするためには、FTPソフトでサーバーへ接続する必要があります。
クライアントが用意しているサーバーにログインするための情報を教えて貰いましょう。
具体的には以下の３つの情報が必要になります。
案件受注が確定した後、クライアントとデザインデータや案件の進め方についてのやり取りを行うと思いますので、そのタイミングでこちらから聞かずともサーバー情報を教えてくれると思います。
もしクライアントの方から情報が頂けなかった場合は「サーバーへ接続するための情報を教えて頂けますでしょうか。」とこちらからお願いしてみましょう！
FTPソフトを使用してサーバーへ接続する
サーバー情報を教えて貰ったら、FTPソフトで正常に接続できるか確認しましょう。
先ほどインストールしたFFFTPを使って、サーバーへの接続方法を説明していきます。
FFFTPを起動したら【新規ホスト】をクリック。
「ホストの設定」ウィンドウが開くので、クライアントから教えて貰ったホスト名、ユーザー名、パスワードをそれぞれ入力してください。
ホストの設定名は自由に入力できます。あなたの管理しやすい名称を付けると良いでしょう。
※未入力の場合はホスト名が自動で割り当てられます。
ここまで入力したら、最後に暗号化の設定です。
上の方にある【暗号化】ボタンをクリックして設定画面を出しましょう。
「FTPS（Explicit）で接続」のみチェックをして、下の【OK】ボタンをクリックすると「ホストの設定」の小窓が閉じます。これで一旦、ホスト作成の作業は完了です。
「ホスト一覧」に先ほど作成したホストが表示されるので、こちらを選択した状態で【接続】をクリック。
下部に「ファイル一覧の取得は正常終了しました。」というテキストが表示されればサーバーへの接続に成功です。
データをサーバーへアップロードする
サーバーへの接続が成功したらいよいよデータのアップロードです。
FFFTPの画面の見方から順に見ていきましょう。
以下の画像はFFFTPでサーバーへ接続直後の画面です。
ウィンドウが左右に分かれていますが、左側はあなたのパソコンの中のファイル、右側はサーバー上にあるファイルが表示されています。
アップロードの仕方
アップロードしたいファイルをドラッグ＆ドロップで右側のウィンドウ内に持っていきます。
※FFFTPで左のウィンドウに表示されているファイル以外もOKです。
ファイルを 間違ってアップロードした場合は、ファイル名の上で右クリック⇒【削除】も出来ます。
クライアントから「testフォルダを作り、その中にファイルを格納してください」と言われた場合は、右クリック⇒【フォルダ作成】からtestフォルダを作成し、その中にファイルを格納します。
アップロード作業の注意点
サーバー上のファイルは削除や上書きすると元に戻せません。
既存のサイトを編集して納品する場合などには、念のため上書きする前のファイルのバックアップを取るようにしましょう。
アップロードする時は問題が無いと思って上書きをしても、後々重大な不具合が見つかり、更に修正が困難！という最悪のパターンになる可能性はゼロではありません。
まとめ
- 「アップロード」は、制作したWebサイトをインターネット上で公開するために行う
- アップロードを任される場合は、クライアントが既にサーバーを用意している場合が多い（サーバー借りから一括でお願いするクライアントもいるが、少数派）
- サーバーへ接続するための情報はホスト名、ユーザー名、パスワードの３つ
- データのアップロードはFTPソフトを使用する
- サーバー上のファイルは削除、上書きを行うと元に戻せない。取扱いに注意！
