「Xfree」新規申し込み終了のお知らせ
本ページで紹介しているレンタルサーバ「Xfree」の新規申し込みは，後継サービス提供開始により，2022年10月3日をもって終了しました．
詳細はこちらをご覧ください．
本ページで紹介しているレンタルサーバ「Xfree」の新規申し込みは，後継サービス提供開始により，2022年10月3日をもって終了しました．
詳細はこちらをご覧ください．
無料レンタルサーバを契約して，Webページを作ってよ!
世の中にはWebページが無数に存在しますが，htmlファイル作成からWebページ公開までを記載したサイトが少ないため，ここに記載します．
本ページでは，Webページを作成・公開するにあたり，有料サービスやライブラリ，CMS等のプログラム群は使用せず，
完全無料で使用できるツールや自作したHTML, JavaScript, CSSのみを使用し，テンプレートも用意することで初心者にも優しいページを目指しました．
なお，今回は「必要最小限でWebページを公開する手順の紹介」を主眼に置き，htmlファイル内容や用語，パソコン操作等の説明は省略します．
世の中にはWebページが無数に存在しますが，htmlファイル作成からWebページ公開までを記載したサイトが少ないため，ここに記載します．
本ページでは，Webページを作成・公開するにあたり，有料サービスやライブラリ，CMS等のプログラム群は使用せず，
完全無料で使用できるツールや自作したHTML, JavaScript, CSSのみを使用し，テンプレートも用意することで初心者にも優しいページを目指しました．
なお，今回は「必要最小限でWebページを公開する手順の紹介」を主眼に置き，htmlファイル内容や用語，パソコン操作等の説明は省略します．
-
目次
htmlファイル(ホームページのデータ)を作る
Webページは，各要素の配置を決める「HTML」，色や形などの装飾をする「CSS」，ボタン押下時などに動作をつけたり計算をおこなう「JavaScript」の3つの言語から構成されています．
このページでも画面最上部にはヘッダ要素が配置(HTML)されていたり，枠線や背景，文字色などの装飾(CSS)がしてあります．また，ヘッダ要素左のボタンを押すと左側のパネルが隠れたり，ヘッダ右側には現在時刻が1秒毎に更新(JavaScript)されています．
本項では，各言語を習得するには時間や手間がかかるため，HTMLとCSSだけで構成されたテンプレートを用いてhtmlファイルを作成します．
このページでも画面最上部にはヘッダ要素が配置(HTML)されていたり，枠線や背景，文字色などの装飾(CSS)がしてあります．また，ヘッダ要素左のボタンを押すと左側のパネルが隠れたり，ヘッダ右側には現在時刻が1秒毎に更新(JavaScript)されています．
本項では，各言語を習得するには時間や手間がかかるため，HTMLとCSSだけで構成されたテンプレートを用いてhtmlファイルを作成します．
準備物
- パソコン
- テキストエディタ(
Atom(2022/12/15開発終了)やVSCode，Sublime Textなどがおすすめ！) - Webブラウザ(Google Chromeなど)
テキストエディタについて
テキストエディタは文字情報のみで構成されたファイルを編集するソフトウェアの総称で，WindowsOSの「メモ帳」やmacOSの「テキストエディット」もこれの一種です．
メモ帳などのテキストエディタでもhtmlの編集はできますが，下記左のように構文を認識しづらく，可読性が低いです．
htmlファイルを編集することは，Webページのプログラミングを行うことを意味し，可読性が低いエディタを使うことはミスやバグの原因になるため， 下記右のようなシンタックスハイライトなどの機能が備わっており，可読性が高いテキストエディタを使用することをおすすめします．
メモ帳などのテキストエディタでもhtmlの編集はできますが，下記左のように構文を認識しづらく，可読性が低いです．
htmlファイルを編集することは，Webページのプログラミングを行うことを意味し，可読性が低いエディタを使うことはミスやバグの原因になるため， 下記右のようなシンタックスハイライトなどの機能が備わっており，可読性が高いテキストエディタを使用することをおすすめします．
| シンタックスハイライトなし |
シンタックスハイライト∗ + 行番号 ∗配色やフォントはエディタやテーマによって変わります |
|
|
|
htmlファイルの作成
htmlファイルを作成します．作成するにあたり，事前に保存場所を確保(フォルダを作成)すると良いでしょう．
今回は作成の手間を省略するためテンプレートを用意しました．下記左のコードをコピーして，テキストエディタに貼り付け，「index.html」というファイル名で保存します．
今回は作成の手間を省略するためテンプレートを用意しました．下記左のコードをコピーして，テキストエディタに貼り付け，「index.html」というファイル名で保存します．
次に，保存した「index.html」をWebブラウザで開き，下図右のように表示されるか確認します．
「index.html」の内容はご自由に編集・複製して使用してください．
ファイル名は，任意のものに変更して構いませんが，Webサーバは通常「index.html」ファイルを表示するように設定されています． ファイル名を変更した際は，URLの最後にファイル名.htmlを指定する必要がありますのでご注意ください．
(例: URL欄に「http://www.hoge.com」と入力しても通常，画面には「http://www.hoge.com/index.html」の内容が表示される．ファイル名を「index.html」から「fuga.html」と変更した場合，「http://www.hoge.com/fuga.html」と入力しなければ表示されない．)
「index.html」の内容はご自由に編集・複製して使用してください．
ファイル名は，任意のものに変更して構いませんが，Webサーバは通常「index.html」ファイルを表示するように設定されています． ファイル名を変更した際は，URLの最後にファイル名.htmlを指定する必要がありますのでご注意ください．
(例: URL欄に「http://www.hoge.com」と入力しても通常，画面には「http://www.hoge.com/index.html」の内容が表示される．ファイル名を「index.html」から「fuga.html」と変更した場合，「http://www.hoge.com/fuga.html」と入力しなければ表示されない．)
| HTMLソースコード | |
|
|
|
| 実行結果(Google Chrome) |
ドメイン付き無料レンタルサーバを借りる
Webページを公開するには「サーバ」と呼ばれるコンピュータにhtmlファイルを保存する必要があります．市販のパソコンでもサーバとして機能させることもできますが，設定やメンテナンスに専門的な知識を要し手間もかかります．
そこで，今回は「レンタルサーバ」を利用します．レンタルサーバは，Webページ公開に必要な設定やメンテナンスをサーバ提供会社が行い，利用者はファイルをアップロードするだけでWebページを公開することができるサービスです．
また，Webページを公開するには，ドメインを取得する必要があります．ドメインはインターネット上の住所となるIPアドレスと紐づいた文字列のことで，Webページが世界中のどのサーバにあるのかを示しています．ドメインは任意の文字列を取得できますが早い者勝ちで，取得料金もかかります．
今回はエックスサーバー株式会社(以降同社)が提供している無料レンタルサーバ「Xfree」のhtmlサーバー機能を利用し，ドメインについては，同社提供のドメインに任意の文字列のサブドメインを追加することで完全無料でWebページを公開します．
そこで，今回は「レンタルサーバ」を利用します．レンタルサーバは，Webページ公開に必要な設定やメンテナンスをサーバ提供会社が行い，利用者はファイルをアップロードするだけでWebページを公開することができるサービスです．
また，Webページを公開するには，ドメインを取得する必要があります．ドメインはインターネット上の住所となるIPアドレスと紐づいた文字列のことで，Webページが世界中のどのサーバにあるのかを示しています．ドメインは任意の文字列を取得できますが早い者勝ちで，取得料金もかかります．
今回はエックスサーバー株式会社(以降同社)が提供している無料レンタルサーバ「Xfree」のhtmlサーバー機能を利用し，ドメインについては，同社提供のドメインに任意の文字列のサブドメインを追加することで完全無料でWebページを公開します．
準備物
- パソコン
- メールアドレス
- Webブラウザ(Google Chromeなど)
会員登録
Xfreeを利用するには無料会員登録が必要です．
XfreeのWebサイトから会員登録を行ってください．
次に，サーバーID(サブドメイン文字列)を登録します．登録が完了したら，「無料サーバー」ボタンをクリックしてください．
|
|
| サーバーIDの登録 | サーバーIDの確認 |
利用サーバの初期設定
会員登録が完了したら，利用するサーバの初期設定を行います．
今回は，「HTMLサーバー機能」を使用してWebページを開設します．HTMLサーバー欄の「利用を開始する」ボタンをクリックしてください．
自動で初期設定が行われます．
「初期設定の完了」画面が表示されたら，画面左の
を押してサーバー利用状況一覧画面に戻ります．
を押してサーバー利用状況一覧画面に戻ります．
|
|
| 初期設定前 | 初期設定後 |
ここまででWebページが公開状態となります．自分のWebページにアクセスしてみましょう．
アドレスは"http://" + 会員登録時に設定したサーバーID + ".html.xdomain.jp/"でアクセスできます．
(例: サーバーIDが「hoge」の場合，URLは「http://hoge.html.xdomain.jp/」となります．)
アドレスは"http://" + 会員登録時に設定したサーバーID + ".html.xdomain.jp/"でアクセスできます．
(例: サーバーIDが「hoge」の場合，URLは「http://hoge.html.xdomain.jp/」となります．)
htmlファイルをアップロードする
「Xfree」では，ファイルをアップロードするファイルマネージャ機能も提供しています．ここでは，サーバ付属のFTPツールを使ってhtmlファイルをアップロードします．
上記初期設定後画面の「管理パネルログイン」ボタンをクリックしてください．下図左のような画面が表示されます．
次に，「FTPアカウント設定」ボタンをクリックしてください．下図右のような画面が表示されます．
上記初期設定後画面の「管理パネルログイン」ボタンをクリックしてください．下図左のような画面が表示されます．
次に，「FTPアカウント設定」ボタンをクリックしてください．下図右のような画面が表示されます．
|
|
| サーバ管理パネル | FTPアカウント設定画面 |
上図右FTPアカウント設定画面内のWebFTP欄にある「ログイン」をクリックします．ファイルマネージャが表示されます(下図左)．
下図左のファイルマネージャ画面から「アップロード」をクリックし，下図右のようなウィンドウから先ほど保存した「index.html」をアップロードしましょう．
アップロードをしたら，Webブラウザからアクセスして表示結果を確認しましょう．
下図左のファイルマネージャ画面から「アップロード」をクリックし，下図右のようなウィンドウから先ほど保存した「index.html」をアップロードしましょう．
アップロードをしたら，Webブラウザからアクセスして表示結果を確認しましょう．
|
|
| サーバ付属のファイルマネージャ | アップロードウィンドウ |
FTPソフトを使ってファイルフォルダをアップロードする
FTP(File Transfer Protocol)とは，ファイルを転送するための通信プロトコルです．
Xfreeサーバ付属のFTP機能では，ファイルを1つずつ選択する必要があり，複数のファイルフォルダの転送作業に手間がかかります．
FTPソフトでは，複数のファイルフォルダをドラッグ＆ドロップして一気に転送できるため，アップロードにかかる手間を省略できます．
今回は「Cyberduck」という無料で使えるFTPソフトを使用してファイルをアップロードします．
準備物
- パソコン
- Webブラウザ(Google Chromeなど)
- FTPソフト: 本項でインストール
- ホストサーバ名: Xfreeサーバー管理パネルにログイン後，FTPアカウント設定画面に記載
- FTPユーザ名: 上記ホストサーバ名と同ページに記載
- FTPパスワード: 本項で作成
FTPパスワードの設定
FTPソフトはファイルを転送するWebサーバにログインして使用するため，パスワードの設定が必要です．パスワードは以下の手順で作成できます．
Xfreeサーバー管理パネルにログイン後，「FTPアカウント設定」ページに進みます．
「FTPアカウント設定」ページ内のメニュー欄にある「編集」ボタンをクリックします(下図左)．
任意のパスワード(半角8文字以上)を入力し，確認ボタンを押して確定してください(下図右)．
「FTPアカウント設定」ページ内のメニュー欄にある「編集」ボタンをクリックします(下図左)．
任意のパスワード(半角8文字以上)を入力し，確認ボタンを押して確定してください(下図右)．
|
|
| FTPアカウント設定画面 | FTPパスワード設定画面 |
無料FTPソフト「Cyberduck」のインストール
Cyberduckをダウンロード・インストールします．
Cyberduckのダウンロードページからお使いのOSに合わせてダウンロードしてください．
ダウンロードが完了したら，Cyberduckのセットアップ画面にしたがってインストールします．
Cyberduckの初期設定
Cyberduckを起動しサーバ情報を設定します．Cyberduckの「新規接続」ボタンをクリックします．
次に，Cyberduckにサーバ情報を入力します(下図右)．サーバ情報は，Xfreeサーバー管理パネルにログイン後，「FTPアカウント設定」ページで確認できます(下図左)．
サーバ情報入力後，「接続」ボタンを押してサーバ情報を保存します．
サーバ情報入力後，「接続」ボタンを押してサーバ情報を保存します．
|
|
| XfreeFTPアカウント設定ページ | macOS版Cyberduck新規接続画面 |
Cyberduck上でホストサーバへのログインが成功すると，下図のようにホストサーバ上のファイルリストが表示されます．
FTPソフトを使ってファイルフォルダをアップロードする
FTPソフトの設定が完了したら，FTPソフトからファイルをアップロードしてみましょう．
「index.html」の内容を編集して，変更保存後，Cyberduckにドラッグ＆ドロップします．
Cyberduckは複数のファイルフォルダを同時にアップロードできます．
アップロードが完了したら，Webブラウザでアクセスして表示を確認しましょう．フォルダ内のファイルには「/」区切ってアクセスします．
( 例 : フォルダ「fuga」内のファイル「piyo.html」にアクセスする際は，URL欄に「http://hoge.html.xdomain.jp/fuga/piyo.html」のように入力します．)
アップロードが完了したら，Webブラウザでアクセスして表示を確認しましょう．フォルダ内のファイルには「/」区切ってアクセスします．
( 例 : フォルダ「fuga」内のファイル「piyo.html」にアクセスする際は，URL欄に「http://hoge.html.xdomain.jp/fuga/piyo.html」のように入力します．)
Finish!
以上で，htmlファイルの作成からWebページ公開手順は終了です．お疲れ様でした．