| FTP（ファイル転送） |
ローカルでのチェックが終わったら、サーバーにアップロードしてみましょう。
FTPはサイト制作アプリケーションで行う場合と、別途FTPアプリケーションを使う場合があります。Dreamweaver等のアプリケーションを使うと、更新したファイルだけを比較したり、一つのページに必要なすべてのファイルをワンクリックでアップロードできるなど便利です。一方FTPアプリケーションを使うと、自分ですべてのファイルを把握できていればより手早く目的のファイルだけをアップロードできます。
FTPでの注意事項 //
・FTPサーバーを確実に設定する
IDやパスワードはもちろんですが、どのディレクトリにサイトのデータをアップロードするのかはプロバイダやサービスによって異なります。「public_html」「www」といったディレクトリが多いですが、お使いのサービス会社からの資料で確認して下さい。
なおFTPサーバーとの接続が安定しない場合は、パッシブモードでの接続に変更すると安定するケースもあります。
DreamweaverのFTP設定画面
|
・ローカルとサーバーの基準フォルダを設定する
サイト制作アプリケーションを使う場合は、そのアップロード先ディレクトリと、ローカルのサイトデータ格納ディレクトリを正しく合致させないと、FTP機能がうまく作動しません。
・ローカルとサーバーで同じ階層構造を構築する
ローカルで作ったサイトのデータは、リンクや画像の参照を相対パス（自分の保存場所から見てどこに参照先があるかを指定）で設定しているので、ディレクトリの構造が違うと参照できません。FTPアプリケーションを使うときは、同じディレクトリが同じ相対関係で作られている確認します。
・余計なファイルをアップロードしない
作業用ファイルやテストのファイル、テンプレート用のファイルなどをアップロードしないよう注意します。不要なファイルで貴重なサーバー容量を削ってしまわないように。
・同名ファイルの上書きに注意
複数のディレクトリに同じ名称のファイルやディレクトリが必要になる場合があります（例：index.html、imagesディレクトリなど）。これらをアップロードするときは上書きしないよう、今アップロード操作をしようとしているサーバーのディレクトリを常に確認しましょう。
|
 |
| 【Point】 |
111：うまくアップロードできないときはFTPの設定を再確認！ |
|
|
|
| ブラウザでオンラインチェック |
FTP作業が一段落したら、いよいよ最後のチェックです。これは一般ユーザーと同じようにオンラインでブラウザを使ってアクセスして行います。
・レイアウトが崩れず正しく表示されているか
まれにFTPに失敗すると、データが途中で壊れてしまうケースがあります。全ページが完全に表示されるか確認します。
・画像が正しく表示されているか
ローカルではチェックできない名前やファイル形式のミスが見つけられます。また特定の画像だけが表示されないときは、そのファイル自体がアップロードされているか確認します。
・リンクが正しく機能するか
これもローカルチェックだけでは100%ではないので必ず行います。FTPアプリケーションでアップロードした場合は特に確認が必要です。
・重くないか
接続要求（リンク部分をクリック）をしてから実際に表示が終わるまでの所要時間を確認します。画像が多いとデータ転送の時間がかかり、複雑すぎるテーブルやレイアウトが多いとブラウザの描画時間がかかります。
データが重い場合は、画像ファイルを減らすか、画像の圧縮率を上げて容量を減らします。また複雑なテーブルが多いときは、可能な限りシンプルなテーブルの入れ子にすると、描画スピードが上がる上レイアウトの崩壊も少なくなります。
なお一度表示すると、オンラインのデータはキャッシュファイルとしてブラウザに保存されてしまうので、2回目以降の確認の時にはキャッシュファイルをクリアしてから読み込み直しましょう。
 |
 |
Mac版IE（左）とNetscapeでのキャッシュクリアボタン。
IEは環境設定→詳細設定、Netscapeは環境設定→詳細→キャッシュ から選択。 |
・異なる環境でのチェック
できればWindowsとMacの両環境で、かつIEとNetscapeを使って確認するのがベストです。また想定ブラウザと最新のブラウザの両方でチェックするとより確実です。
|
|
| 【Point】 |
112：オンラインチェックでユーザーと同じ目線で最終確認せよ！ |
|
|
|
以上でサンプルサイトのFTP、確認が終了しました。
一通りの制作方法を紹介しましたがいかがでしたか？ 工程をみなさんのサイトに置き換えてみて、チェックポイントをふまえながら制作に生かしてみて下さい。
次回からはさまざまなシチュエーションに合わせた表現方法を解説します。 |
|
|
|
|
