エックスサーバーにアップしたファイルをWEBで確認する方法【初心者向け】
目次
この記事でできること
この記事ではエックスサーバーのファイルマネージャを使って、HTMLファイルやテキストファイルを編集し、WEBブラウザで確認する方法を解説します。
「ファイルをアップしたけどどうやって見るの？」
「index.htmlって何？」
「URLはどう入力するの？」
そんな方向けに、実際の画面を使いながら順番に説明していきます。
ファイルマネージャを開く
エックスサーバーにファイルをアップして、WEB上で確認する方法を共有します。
まずエックスサーバーの会員ページを開いてください。
会員ページのどこかにファイルマネージャというボタンがあるはずです。
エックスサーバーでは旧デザインと新デザインとがありますが、どちらともメニュー一覧の画面上部にあります。
サーバーIDが記載されているところの右側にあります。
まずはこちらをクリックします。
public_htmlへ移動する
ファイルをアップする場所に移動します。
ご自身のサーバーID（サーバー契約時に登録した名称）に.xsrv.jpがついたものがあると思いますので、こちらをダブルクリックします。
すると、以下のスクショのようなフォルダが並んでいると思いますので、public_htmlをダブルクリックします。
index.htmlを編集する
すると以下のスクショのようなファイル名が表示されているかと思いますので、index.htmlのファイルを右クリックします。
以下のスクショでは<head>タグのところが表示されています。
ファイルの内容を少し書き換えて画面で確認しようと思いますので、もう少し下の方に編集箇所をスクロールします。
下のスクショはheadタグの下のbodyタグの箇所です。
以下の赤枠の箇所に試しに今日の日付を入れてみます。
今日の日付を追加したら、右下の更新ボタンを押します。
ファイルが保存されると元のファイルマネージャの画面に戻ります。
見た目はあまり変わりませんが、更新日時が現在の日時になります。
ブラウザで表示を確認する
それではこのhtmlファイルをWEB上で確認してみましょう。
WEBで見るには、ChromeやEdge、safari、fire foxなどのブラウザがさまざまあると思いますが、お好きなブラウザで確認することができます。
ご自身のサーバー名.xsrv.jpをブラウザのURLに入れてページを開くとこのindex.htmlファイルが開けます。
例えばサーバー名がtest365だった場合、test365.xsrv.jpをブラウザに入力してページを開きます。
以下のスクショのような感じで、ブラウザの入力欄に入れてページを開きます。
index.htmlを正しく表示できると、以下のスクショのようにページが表示されると思います。
先ほど追加した日付がタイトルに追加されています。
HTMLタグを追加してみる
htmlタグ自体を新たに追加してもOKです。
以下のスクショではh3タグを追加しています。
画面で見ると以下のように表示されます。
新しくテキストファイルを作成する
今度は新しくファイルを作成してみましょう。
まずはテキストファイルを新しく作って画面で表示するのをやってみます。
ファイルマネージャのメニューから新規ファイルをクリックします。
新規ファイルの名前を入力します。
test.txtと入れてみます。
ファイル名に「.txt」という英語（拡張子いいます）をつけるとテキストファイル形式のファイルになります。
txtの前の.（ドット）を忘れずに入れてください。
作成するとファイルマネージャにtest.txtが追加されます。
今回、保存文字コードは下記スクショの赤枠のようにEUC-JPを選択しています。
お使いのPC環境によってはUTF-8が正しい場合もあります。
（最初、UTF-8で保存したら文字化けしたので変えて試してみました。。）
内容が良ければ更新ボタンを押します。
新しいファイルをブラウザで表示してみる
それではWEB画面で確認してみましょう。
先ほどはサーバー名.xsrv.jpで開けましたが、今度は少しだけ違います。
「サーバー名.xsrv.jp/test.txt」で開けます。
test.txtがWEB上で確認できました。
おはようとこんにちはが表示されています。
なぜindex.htmlは省略できるの？
ちょっと話はそれます（？）が、先ほどはサーバー名.xsrv.jpでファイルを表示できたのに、
test.txtの時はサーバー名.xsrv.jp/test.txtで開けたのでしょうか。
試しにサーバー名.xsrv.jp/index.htmlと打ってページを開いてみましょう。
最初に開いたページが開けましたか？
そうです。
サーバー名.xsrv.jp/index.htmlとURLを入れても同じくindex.htmlページが開けます。
実はhtmlのルールがあって、index.html（index.phpも）というファイルは、/index.htmlを省略していいというルールがあるんです。
私は最初ハマりました。
なんでindex.htmlとURLに入れてないのにページが表示されるの！？と疑問だったのですが、
誰も教えてくれない、そんなルールがあったのです。。
（脱線終わり）
まとめ
今回はエックスサーバーのファイルマネージャを使って、ファイルを編集し、WEBブラウザで確認する方法を紹介しました。
- 公開ファイルはpublic_html配下に配置する
- index.htmlはURLで省略できる
- その他のファイルはファイル名をURLに付けて表示する
最初は「どのURLで確認すればいいの？」と迷うこともありますが、実際に触ってみると仕組みは意外とシンプルです。
ぜひHTMLファイルやテキストファイルを作成して、ブラウザで表示される様子を試してみてください。
というわけで、エックスサーバーにファイルをアップしてWEB上で確認する方法を共有してみました。
最後までご拝読ありがとうございました。
