メルロロのWEBデザイン

サイトを作る為のちょっとした知識や素材を置いています。

Step.14 HTMLファイルをサーバーへアップロードしよう

サイトをアップロードするサーバーを借りよう。

さぁ、お待ちかね。とうとうサイトをアップロードして公開するといきますか。
ただその前に、まずはインターネット上にファイルを置いておくスペースを借りないといけないよ。
借りる?
そう。人が住むのにアパートとかマンション借りるのと同じように、インターネット上にファイルを住まわせる部屋を借りるんだ。これをサーバーって言うよ。
え、そんなのあるの?
あるんです。
ただ安心して。今回は無料で貸してくれるところを紹介するから。
レンタルサーバーは無料のものと有料のものがあって、無料の場合は広告が勝手についていたり、置けるファイルの容量が少なかったり、アップロードできるファイルの種類に制限があったりするよ。
一番大きいのが独自ドメインを使えないってところかな。
ドメイン?
あとで説明するよ。とりあえず今回は無料のサーバーをレンタルしてね。
借りる場所はここにしようか。
FC2ホームページ
広告はページ最下部につくテキスト1行の「Powered by FC2.com」のみ、というのがかなりの魅力だよ。
まずはページ左上にある赤いボタンの「新規登録」へ行ってFC2会員登録をしてね。もちろん会員登録も無料だよ。

step14-1

会員登録にはメールアドレスが必要だよ。パソコンで確認できるメールアドレスで登録しておくと楽だと思うよ。メールアドレスがない場合はフリーのメールアドレスでも大丈夫だから適当にフリーのメールアドレス取得してね。
無料でメールアドレスを取得できるってこと?
そういうこと。Yahooのメールアドレスとか、Outlookあたりが有名だね。
先ほど入力したメールアドレス宛てにFC2からメールが来ているはずだから、そのメールに貼ってあるアドレスをクリックしてね。
リンク先でプロフィールの入力をすることで本登録が完了するよ。登録完了の案内ページの下部に「引き続きFC2 ホームページのご登録を行うには、先にユーザー情報の入力が必要です。」とあるから、その指示に従って「ユーザー情報入力に進む」を押してね。

step14-2

プランはアダルト関連を取り扱わないならば「一般・無料」を選んでね。
次のページでアカウント名など、作成するホームページの情報を入れていくよ。
アカウント名はURLの一部となるよ。

step14-3

ホームページのカテゴリーとか詳細とかは何?<meta>タグでページの概要は設定しなかったっけ?
FC2でホームページを登録するとFC2がカテゴリーに分けてサイトを紹介したり、ランキングを作ったり、なんか勝手にしてくれるみたいだね。それらのカテゴリー分けと、そこに表示される詳細とかがこれだよ。
登録が完了したら、何やらいろいろほかのサービスを勧められるけど、一番下にある「ホームページの管理画面へログイン」を早速してみよう。

step14-4

ファイルマネージャーというところでサイトのファイルを管理する形になるよ。ファイルのアップロードだけじゃなく、HTMLファイルの新規作成から、編集まで実はできたりするんだけれど、私はここを使うのが嫌いなんだ。
え……?
使いづらくてね。まぁこれは好みだから気が向いたら触ってみたらいいよ。
ここのファイルマネージャーにある「ファイルをアップロード」を使ってメルちゃんが作成したHTMLファイル等をサーバーにアップロードしていくのだけれども、1個1個ファイルを選択してアップロードする形になってね、めんどくさくてさ。
そんなわけで、一括でファイルをアップロードするためにも、ここではFTPソフトを使ったやり方を教えるよ。
なんかもう、よくわかんないから任せるよ。

FTPソフトをダウンロードし、設定しよう。

まぁ、まずはFFFTPというソフトをダウンロードしてほしい。
ダウンロードできるサイトはここ ⇒ Sota’s Web Page (FFFTP)
フリーソフトで無料のものだからダウンロードしちゃってね。

step14-5

ダウンロードしたファイルをダブルクリックするとインストールが開始されるよ。
適当に「次へ」を押しまくるとデスクトップ上に「FFFTP」というアイコンが作成されると思うよ。これをダブルクリックして起動しよう。
ちなみにFFFTPがデスクトップ上にできたら、インストールファイルであるffftp-1.97b.exeは削除しても構わないよ。
FFFTPを起動したら「新規ホスト」というボタンをクリックしてね。

step14-6

まぁ見ての通り、ちょっと初期設定が必要だよ。
ホストの設定名はフォルダに名前を付ける感覚と同じだよ。わかりやすいように好きな名前を付けていいよ。
ホスト名やユーザー名、パスワードはFC2の管理画面に載っているよ。FC2管理画面のFTP情報という項目をクリックしてね。
FTP情報画面になったら、まずはFTP接続ロックしないにチェックを入れて設定変更ボタンを押してね。
その後、ホスト名とユーザー名が記載されていると思うから、それをFFFTPに入力するんだよ。

step14-7

FTPのパスワードはFC2側で自動に用意されているから、FC2会員のログインパスワードとは違うよ。
現在のFTPパスワードのONの左横にあるボタンを押すとパスワードが表示されるからそれをコピーしてFFFTPに貼り付けてね。

step14-8

初期フォルダとかいうのは今はとりあえず放置しちゃって。
以上で「OK」を押してね。
OKを押すとホスト一覧の画面に戻り、先ほど設定したホストが表示されているはずだよ。
これをダブルクリックするか、選択状態にしたあと「接続」のボタンを押してね。
FFFTP下部に「ファイル一覧の取得は正常終了しました。」と出ていたらちゃんと設定ができているよ。

step14-9

もしも「接続できません。」と出てしまったのなら、一度ウィンドウ左上にある「接続」を押して「ホストの設定」をクリックしてね。
ホスト一覧に戻ると思うから、先ほど設定したホスト名を選択した状態で「設定変更」を押してもう一度設定を再確認してみよう。

step14-10

入力している内容に誤りがないかを確認してね。
あと、念のために「拡張」というタブをクリックしてみてね。

step14-11

デフォルト設定で行けるはずなんだけれども、この拡張タブの中の「ポート番号」が「21」になっているかを確認しておいてね。
数値が21以外だとうまくいかないから。
はい、以上でFFFTPの設定は完了するはずだよ。
ふぅ……。大変だった。
一度設定してしまえば早々変えることはないから我慢我慢。

FFFTPを使ってHTMLファイルをアップロードしよう。

はて、これでサーバーにファイルをアップロードする準備は整ったよ。早速ファイルのアップロードをしてみようか。
おぉー♪
とりあえずFFFTPは今接続している状態になっているかな?
接続状態の画面なんだけれど、左と右に分かれてるでしょ。

step14-12

この左側がメルちゃんのパソコン内で、右側がメルちゃんが借りたFC2のサーバー内だよ。
ほう…!なんかすでにindex.htmlファイルがあるね。
index.htmlファイルだけ自動で作られるようになっているみたいだね。
それ以外は空っぽで何もない状態だよ。
ってわけで、今から左側のフォルダを右側へ移すことでファイルのアップロードをするよ。
2通りのやり方伝えておくね。
まずはFFFTPの左側の方に、メルちゃんが頑張って作ったHTMLファイルが入っているフォルダを表示させよう。

step14-13

あとは左側にあるファイルを右へドラッグしてやると、サーバーにアップロードしたことになるよ。
試しにindex.htmlファイルとstyle.cssファイルを右側へドラッグしてみて。

step14-14

これでアップロード完了だよ。もうインターネット上に公開されているからね。
マジか!!見たい!!見たいよ!
気持ちはわかるけれど、もう少しだけFFFTPの使い方の話させてね。
はて、先ほどは左側にわざわざHTMLファイルのあるフォルダを呼び出して、そこからドラッグすることでサーバーにアップロードしたわけなんだけれども、実はこんなことしなくても普通のフォルダから直接FFFTPの右側へドラッグしてもアップロードできるよ。

step14-16

割とこっちの方が楽で好きだったり、まぁやり易い方法でアップロードするといいよ。
ちなみにFFFTPで設定をしてた時の初期フォルダというのは、FFFTPを開いてホストに接続した際にFFFTPの左側・右側それぞれの枠にどのフォルダを開いておくか、というのを設定できるところだよ。
最初にHTMLファイルが入っているフォルダを開くように設定しておくとかなり楽になるね。
OK!それはまぁ気分が乗ったら適当にやってみるから!早くアップロードしたサイトみたいよ!
はいはい。

サーバーにアップロードしたサイトを確認してみよう。

サイトのURLはFC2管理画面の「管理画面トップ」のページにURLが載っているよ。

step14-15

そんなわけで、テストで作ったメルちゃんのサイトURLは
http://meruroro.web.fc2.com/だよ。
……あれ?URLおかしくない?
メルはURLの不自然に敏感だね。
だって、最後に.htmlってついてないよ?index.htmlっていうのはどこいったの?でもこのURLで間違いなくindex.htmlが出てくるね……。
そこで何でトップページは「index.html」なのか、っていうお話ですよ。
…………あぁ、一番最初のほうで説明後回しにするとか言ってたやつ!
そうそう。で、お察しの通り、http://meruroro.web.fc2.com/だとファイル名を指定していないんだけれども、ファイル名を省略されたURLで接続された場合は自動的にindex.htmlファイルに飛ぶようになっているんだよ。
へぇ!
試しにURL比べてみる?
http://meruroro.web.fc2.com/
http://meruroro.web.fc2.com/index.html
URLに違いはあるけれど表示されるページは一緒だよ。
こういう仕様があるから、トップページはファイル名の省略が可能なindex.htmlに設定しておくのがオススメなわけ。
メルちゃんもどこかサイトを閲覧していて、このサイトのトップページに行きたいな、って思ったらファイル名を削除したURLで飛んでみるといいよ。トップページをindex.htmlにしているサイトならトップページに行けると思うよ。
まぁ、必ずしも皆がトップページをそれにしてるとは限らないから微妙だけど。
ほーー!!
なんかよくわからないけど無事サイト作れてうれしい!!!このURLを知り合いに教えてあげたら、みんなインターネットちゃんと繋がっているなら見ることができるんだね!?
できるよ。
ヒャッホーーーー!!!!
HTMLファイルを編集することがあったら、またFFFTPを使ってアップロードしなおすことでページの更新ができるからね。
やったー!!サイトできたー!!!
聞いちゃいないや……ま、とりあえずこれでおしまいだよ。あとは自分で調べながら色々サイト作り楽しんでね。

ドメインとは

さて、ドメインとは何かって質問に答えておくね。
ドメインはURLの一部になっているよ。
http://meruroro.web.fc2.com/の中のfc2.comというのがドメイン部分になるんだ。
これはFC2さんが取得しているドメインだね。メルちゃんはこれを借りている形になっているよ。
ふーん……?
もしメルちゃんが独自ドメインを取るなら、http://meruroro.com/とかになるかもしれないね。この「com」とかの部分はまた違うかもしれないけれど。
んー、まぁURLの一部なのはわかったけれど、独自ドメインとったら何かいいことがあったりするの?
覚えてもらいやすくなったり、独自のブランド性を持たせたりだとかの話を聞いたことがあるけれど、一番大きなのはSEOじゃないかな。
検索エンジンはドメインごとにサイトを評価するらしいんだ。
だからメルちゃんには関係のない、他のFC2無料サーバーをレンタルしている人のサイトの評価が悪かったりすると、メルちゃんのサイトまで検索上位に上がりにくくなったりするかもね、って話だよ。
そんなのあるのか。
あとは大手検索エンジンであるGoogleは検索上位1ページに同じドメインのページを2つ以上表示させない。っていう制限があるみたいでね。FC2は使用者がかなり多いと思うから、それだけで検索上位に上がり辛くなったりするね。
なるほどー。SEOを本気で気にするなら独自ドメインのほうがいいんだね。
お金かかっちゃうけどね。
まず独自ドメインを取得するのにもお金かかるし、独自ドメインを使うには有料サーバーを持つことになるだろうから、こっちにもお金かかっちゃうね。
わぁお。
無料で気軽にやりたいなら諦めるしかないね。
SEO気にしながら本気のサイト作成とかすることがあったら、まぁいろいろ気にしてみるといいよ。
私には必要ないようだ!
まぁ、サイト作りは楽しいから、色々試してみるといいよ。
とりあえずは以上だね。まだまだ教えてないHTMLとかCSSとかもあるから、色々見回って試して遊ぶといいよ。
うん!すごい楽しいよサイト作り!ありがと!
はいはい。おつかれさま。