公開手順とFFFTPの使用方法

アカウントを有効にする
FFFTPを設定する
Webサーバに接続する
HTMLファイルをアップロードする
画像ファイルをアップロードする
総括

アカウントを有効にする

▼FC2 では FFFTP を利用できるようにする為にアカウントを有効にする必要があります。方法はマニュアルの序盤に載っていますので説明を良く読みながら進めて下さい。ここでも簡単に説明しておきます。

FC2 の仕様が変更されたのでこの手順は必要ないかもしれません。

手順1: FC2 へ行きます。
手順2: 契約を交わすの時に送られてきたメールに記載されている【ユーザー名】と【パスワード】を用いてログインフォームよりログインして下さい。⇒ 説明画像
手順3: ログインが完了したらマニュアルの説明通りに4桁の数字を記入し、確認ボタンをクリックして下さい。⇒ 説明画像
結果: ログインが完了し、次のような画面に変われば完了です。⇒ 説明画像

手順3の画面の説明で、『アカウントが有効になりアカウント情報を記載したメールが送信されます。』と書かれていますが、メールは送られてきません。必要なアカウント情報は既に契約を交わすの時に送られてきたメールに記載されているので問題ありません。それからログインしたままである必要はないので、ログアウトしてもらっても構いません。

FC2 の場合はこのようにFTPクライアントを使用するに当たって一手順踏まなければなりません。他のサーバーではそのような手順は必要なかったり、さらに複雑な手続きが必要だったりと様々です。何にしてもしっかりと説明を読んで下さい。

FFFTPを設定する

Webサーバの準備が終わったら次は FFFTP の設定を行います。そうしなければファイルをアップロードする事はできません。ここではその設定方法を説明します。

手順1

FFFTPを起動します。起動方法には以下の三つがあります。今後は頻繁に使用することになると思うので、自分が簡単に起動しやすいようにして下さい。

デスクトップにあるショートカットキーをダブルクリック (右クリック⇒開く) する。
スタート ⇒ すべてのプログラム ⇒ FFFTP ⇒ FFFTP の順に進んでクリックする。
C:\Program Files\ffftp\ を開き FFFTP.exe をダブルクリック (右クリック⇒開く) する。

手順2

起動すると『ホスト一覧』というダイアログが出ますので【新規ホスト】をクリックして下さい。

手順3

次に出てきた『ホストの設定』というダイアログに必要事項を記入して OKボタンをクリックします。画像は記入例です。「ユーザID」「登録メールアドレス」「パスワード」には各自で違うものが入ります。

ホストの設定名: ここは自分がわかり易い名前を自由に記入してください。「FC2」とでも記入しましょうか。
ホスト名（アドレス）: 契約を交わすで登録したユーザIDを用います。ログインする時に使用するユーザID（ニックネーム）です。「ユーザID.web.fc2.com」と記入して下さい。
ユーザ名: 契約を交わすで送られてきたメールに記載されている「登録メールアドレス」を記入して下さい。
パスワード: 契約を交わすで送られてきたメールに記載されている「パスワード」を記入して下さい。
ローカルの初期フォルダ: 自分が創ったHTMLファイルをまとめてあるフォルダを指定して下さい。右側のボックスをクリックするとフォルダ参照のダイアログが出ますので、最初に創ったフォルダ (wensite) を選択してOKボタンをクリックして下さい。【例. C:\Documents and Settings\Owner\デスクトップ\website】

わからなければ『ローカルの初期フォルダ』は設定しなくても構いませんが、他の四項目は必須です。そして少しでも間違えていると上手く行きません。注意深く間違えないように記入しましょう。

送られてきたメールからコピペしてもいいですか？

はい。このように正確な記入が求められ場合はコピペ (コピー&ペースト) は有効な手段なので活用して下さい。ただし半角スペースなどが前後に付く事もあるので注意しましょう。一度メモ帳などに貼り付けてみると良いかもしれません。

『ホストの初期フォルダ』と『最後にアクセスしたフォルダを次回の初期フォルダにする』は空白のままでもいいのですか？

より便利に使用するためにはそれぞれを設定した方が楽なのですが、機能的には問題ありませんので空白のままで構いません。Webサーバによってはホストの初期フォルダを設定しなければならない場所もあります。

サーバーに接続する

FFFTPの設定が完了したら次はWebサーバに接続してみます。前項での記入漏れや記入ミスがなければスムーズに接続される事と思います。(FFFTPを終了させてしまった人は再び起動させてください)

手順1: ホスト一覧から、上で記入した『ホストの設定名』(ここでは「FC2」)を選択して【接続】をクリックして下さい。
この時点でお使いのファイヤーウォール (firewall) がセキュリティー警告を発するかもしれません(と言うよりも FFFTP を使用するのが初めての場合は出ない方がセキュリティ的に心配です)。出た場合はFFFTPを受け入れる設定にするか、各自で適切に設定して下さい。
結果: やや間を置くと接続が完了し、左側にはローカル (貴方のパソコン側) のファイルが一覧表示され、右側にはホスト (Webサーバ側)のファイルが一覧表示されます。

FC2の場合は通常、ホスト側には最初から一つフォルダと一つのファイル (index.html) があります。「ｉフォルダ」は携帯専用のフォルダです。どちらも消しても復元する事は可能ですが、特別な理由がない限りはそのままにして置きましょう (index.htmlは後ほど上書きします)。

エラーが出て接続できませ～ん。

そういう場合はエラーの内容をよく読んで理解して適切に対応しましょう。FFFTP Q&A集の『ホストへの接続』を読んでみましょう。その殆どの場合が記入ミスです。無駄な半角スペース、全半角や大文字小文字の区別、ドット. とカンマ, の間違いなどありませんか？

コピペしたはずなんだけどなぁ…。

だとしたらもっと違うところに原因があるのかもしれません。Webサーバがメンテナンス中だとか、障害が起こっているとか。

本当だ！繋がり難くなっているって出ていました。修復した後にやってみたら繋がりました！

接続が上手く行かない理由は数多くあり、何が原因なのか特定するのが難しいものです。エラーメッセージを理解して対処するようにして下さい。

HTMLファイルをアップロードする

接続が完了したら早速ファイル (先ずはindex.html) をアップロードしてみましょう。

準備: FFFTPの設定で「ローカルの初期フォルダ」を設定しなかった方や、設定を間違えた方はローカル側に「websiteフォルダ」を表示させなければなりません。これはFFFTPの使用方法と言うよりもパソコンの操作に近い物ですので詳しい説明はしませんが、以下の画像のような状態になるようにして下さい。
方法1: ローカル側の一覧から index.html を選択しアップロードボタンをクリックする。その際にファイルの転送モードが「アスキー転送モード」か「ファイル名で転送モード切り替え」になっているかを確認してください。殆どの場合は「ファイル名で転送モード切り替え」にしておけば大丈夫だと思います。クリックして変更して下さい。
アップロードしようとしたファイルと同名のファイルが既にホスト側 (のアップロードしようとしているディレクトリ) にある場合は、確認のダイアログが表示されます。それぞれ適切な物を選んで実行して下さい。ここでは上書きを選んでOKボタンを押してください。
方法2: ローカル側の index.html をホスト側にドラッグ & ドロップする。「転送モード」や「上書き」に関しては『方法1』と同様です。
結果: アップロードが完了し、Webページが更新されました。早速自分のサイトを見てみましょう。アドレスは契約を交わすで送られてきたメールに記載されています。内容を少しも変更せずに全て当サイト通りに進めた方は、第一章のまとめの現状で確認したトップページと同じような画面になっているはずです (まだリンクはできません)。

サーバーによってはHTMLファイルは「public_htmlフォルダ」内にアップロードしなければならない場合もあります。それはサーバーによって様々ですのでそれぞれの説明をよく読んで下さい。

たったこれだけでいいの？

準備に手間が掛かる時というのは実行するのが楽なものなのです。

本当だ！ページが変わってる！

それではリンク部分をクリックして見て下さい。

あれ？移動しない。よく見るエラーページが出てしまいました。

そうですね。それはまだリンク先のファイルをアップロードしていないからなのです。他のHTMLファイルも全てアップロードすれば現状で確認したトップページと同じになります。

「image」フォルダや画像ファイルも同じ様にしていいのですか？

はい。操作自体は変わりませんがいくつか注意して欲しい事があるので次の項で説明します。

「index.html」以外のHTMLファイルも全てアップロードして置いて下さい。

画像ファイルをアップロードする

手順は index.html をアップロードするのと変わりません。ただいくつか気をつけなければならない点があるので説明して置きます。

階層に注意する: ローカルで確認した時と同じようにサイトを見せたいのなら、ホスト側にも同じ環境を作ってやらなければなりません。相対パスなどでしつこく説明した通り、階層がずれるだけでリンクが繋がらなくなったり、画像が表示できなくなったりします。左と右が同じような状態になるようにします。
つまりローカル側にフォルダがある場合はホスト側にもフォルダを創る: 今回の場合は「imageフォルダ」ですね。ホスト側にも同じように「imageフォルダ」を創らなければなりません。方法はホスト側の領域で右クリック ⇒ フォルダを作成 ⇒ フォルダの名前を「image」としてOKボタンをクリックするだけです。
フォルダを創ったらその中にアップロードする: 今回の場合は「imageフォルダ」の中に画像ファイルをアップロードします。つまりホスト側で「imageフォルダ」の中へ移動しなければなりません。その方法は HTMLファイルをアップロードするの『準備』で説明したのと同様です。フォルダの中に入る (階層を降りる) 場合はそのフォルダをダブルクリックするか、右クリック ⇒ 開くとすれば良いです。
ホスト側で「imageフォルダ」へ移動したらローカル側も同じように移動する: ホスト側の「imageフォルダ」内にアップロードしたいのはローカル側の「imageフォルダ」内に入っている画像ファイルです。ローカル側でも「imageフォルダ」内に移動して、その中に入っている画像ファイルをアップロードします。
画像はバイナリモードで転送する: HTMLファイルと違い、画像ファイル (拡張子が .gif .jpg .png 等のもの) はバイナリモードで転送します。「ファイル名で転送モード切り替え」にしてある場合はそのままで平気ですが、アスキーモードになっている場合は変更してください。
結果: ローカル側の「imageフォルダ」の中に入っていた画像ファイルが、ホスト側に創った「imageフォルダ」の中へアップロードされました。
別手法: フォルダを創ってその中にアップロードをしなくても、「imageフォルダ」ごとアップロードする事も可能です。結果は同じです。

「Thumbs.db」というファイルがあるかもしれませんがこれは無視してください。これが何なのか知りたい方は FFFTP Q&A集を参考にしてみて下さい。

FFFTP についてわからない事が出てきた場合は FFFTP Q&A集を読むか、FFFTP Surpport Page.(ふうせん氏) を参考にして下さい。使用している内に慣れますのでここでは特に詳しい操作法は説明しません。詳しい操作法を知りたい方は、FFFTP Surpport Page.(ふうせん氏) を参考にして下さい。また、『FFFTPの使い方』というキーワードで検索すると、多くの解説ページがヒットします。当サイトでは一応別にもう少しだけ詳しい説明も用意しました。

とにかくローカル側とホスト側の状況 (環境) を同じにするように心掛けて下さい。一番多い間違いは、やはり画像を入れる「imageフォルダ」をホスト側に創らないで、そのまま画像ファイルを他のHTMLファイルと同じ階層にアップロードしてしまい、画像が表示されないといった例です。

最後に説明した方法の方が全然楽じゃないですか？

そうですね。でもローカル側のフォルダがいつも整理されているとは限りません。無駄なファイルが同じフォルダ内に入っていると、そのファイルまで一緒にアップロードされてしまいます。後で削除すれば良いのですが、そういった面倒な操作を減らす為にこのような説明にしました。それに少しでも階層の移動とか、FFFTPの操作に慣れて欲しかったのです。

いちいちフォルダを創ったりする方が面倒だと思うのですが…

何か言いましたか！？

いえ、何も言ってませんです。

総括

どうでしたでしょうか？Webサーバの契約からFFFTPを用いてのファイルのアップロードまで上手く行きましたか？最初の内は色々な箇所で躓くと思いますが、その度に何が間違っているのか調べたり、どうすれば上手く行くのかを学べば直ぐに慣れます。ここまでで、HTMLファイルの創り方から公開の仕方までを説明しました。これで一通りWebサイトを創って公開する方法を学べたと思います。今度は書かれたままのソースを写すのではなく、自分の思い描くページを創ってそれをリンクさせて一つのサイトを創って行くのです。

ここまでで基本的な説明は殆ど終わりです。次は自分の創りたいWebサイトの内容をテキストに起こして、それをきちんとマークアップして、必要ならば装飾を施して見栄えを良くして行きます。

もう終わりなんですか？

はい。Webサイトを構築するのに必要な本当に基礎的な説明はこれにて終了です。これからはどんなサイトを創るのかで変わってくるので誰にも解説など出来ないのです。出来る事といえば、どんな表現が可能なのかという情報を提供する事だけです。そして皆はそれを自分なりに改変・応用したりして自分のサイトを創って行くのです。

そうなのですか。それではありがとうございました。これからも頑張ります！