ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

ホームページをインターネット上に公開する方法を説明します。

「html」の知識が必要になりますので、さっぱりわからないという方は

おまけ１　超簡単ホームページ入門

こちらを先にお読みください。

それではいってみましょう！

ホームページを公開する方法はいくつかありますが、レンタルサーバーというものを借りてそこに作成したホームページのファイルをアップロードするという手順がとても一般的だと思われます。

なんか難しそうな感じがしますが、ブログサービスに登録するのに毛が生えたぐらいの感じでいけるのでご安心ください。

サーバーって何？

簡単に言いますと世界のどこかに置いてあるインターネットに公開可能なコンピューターになります。

何かものすごいコンピューターが動いてそうな感じですが、２４時間休まずに動くという事を除けばごくごく普通のコンピューターになります。

レンタルなのでそのどこかにあるコンピューターを借ります。

そのコンピューターにホームページのファイルを置く(アップロードする)事によってインターネット上からそのファイルをつまりはホームページを見られる状態になります。

自分のパソコンから公開できないの？

出来なくもないですが、ちょいと難しい上に自宅のネット回線の見直しも必要かもしれません。

まずはレンタルサーバーで公開するのが良いと思います。

興味がある人は「自宅　サーバー」などのキーワードでインターネット検索してみてください。

お金かかるの？

かかりますが、安いトコロなら月500円ぐらいから借りられます。

エックスサーバー、さくらインターネットあたりがオススメです。

エックスサーバー公式

さくらインターネット公式

今回はエックスサーバーを例に具体的にレンタルサーバーを借りる手順を説明します。

メールアドレスと電話が必要になります。

まずは「エックスサーバー公式サイト」へとアクセス

レンタルサーバー申し込み画面である事を確認して「申し込み」をクリック

2021年8月現在は無料お試しが使えるのでさらにクリック

申し込み内容確認画面に移るので特に内容は変更せず基本のプランでアカウントの登録へと進みます。

メールアドレス、名前など必要な情報を入力

利用規約・個人情報の取り扱いに同意して次の画面へと移ります。

先ほど入力したメールアドレスあてに確認コードが送られてくるのでそれを入力

確認画面へと移るので内容を確認

問題なければ本人確認のための「sms認証」を行います。

電話番号を入力して「テキストメッセージ」または「自動音声」にて認証コードを取得します。

入力した電話あてに「テキストメッセージ」または「自動音声」にて認証コードが届くのでその番号を入力、申し込みを完了します。

申し込みが完了しました。

※申し込みが完了すると登録したメールアドレスあてに「サーバーアカウント設定完了のお知らせ」というメールが届きます。設定内容が記載されているとても大事なメールになりますのでメールを保護にするなりして大切にとっておいてください。

軽い利用説明などになりますので確認したら閉じます。

サーバー管理画面になりました！

ではさっそくファイルをアップロードします。

ここでは試しに「おまけ１　超簡単ホームページ入門」の「プログラム１」のプログラムをアップロードしてみます。

文字コードに注意して「test.html」という名前でファイルを保存しておいてください。

それではさきほどの画面の「ファイル管理」をクリックします。

ファイルマネージャと呼ばれるファイル管理画面になるのでさらに「xs76××××.xsrv.jp」というサーバーの名前がついているフォルダをクリック

※最初から置いてあるフォルダやファイルは大切なものなのでいじらないでください！

さらに「public_html」というフォルダをクリック

これで「htmlファイル」をアップロードする為のフォルダ「public_html」にたどり着きます。

これからはここに「htmlファイル」をアップロードしていく事になります。

メニューの「アップロード」をクリック

アップロードボックスが表示されるのでさきほど作成したファイル「test.html」をドラッグ＆ドロップします。

ファイル名が確認できたら文字コードを確認してアップロードします。

アップロードできました！

アップロードもできたトコロでインターネットを使って実際に今のファイルにアクセスしてみます。

まあまあ人気なホームページになればグーグル検索に乗るかもしれませんが、今のトコロはまず間違いなく乗らないので「url(今のサーバーの住所みたいなものです)」を直接打ち込んで確認します。

ちなみにサーバーの名前はさきほどの画面の

ここの部分がサーバーの名前になるのでurlは「http://xs76××××.xsrv.jp/test.html」でさきほどの「test.html」にアクセスする事ができます。

「http://」の後に「サーバー名/ファイル名」みたいな感じですね。

フォルダ分けした場合は「http://」の後に「サーバー名/フォルダ名/ファイル名」みたいになります。

お使いのブラウザ(エッジやらグーグルクロムやら)を立ち上げてください。

ブラウザによりますが、だいたい上の方にある部分に「url」を打ち込む事ができます。

さきほどの「url」を打ち込んでみましょう。

入力すると・・・、

このような画面になってしまう場合はまだサーバーの準備ができていないかもしれません。

しばらく時間を置いて再度アクセスしてみてください。(もしかしたら丸一日ぐらいかかるかもしれません。)

時間を置いて再度アクセスしてみると・・・、

ホームページが公開できました！

最後に「index.html」ファイルについて説明します。

これはindex(目次)ファイルと言いましてそのフォルダの目次を表示する為のファイルになります。

目次の役割をしてくれるのでそのフォルダに「index.html」があればアクセスする時に「http://xs76××××.xsrv.jp/」とフォルダの名前だけ指定してあげれば勝手に「index.html」ファイルを表示してくれます。

ですのでホームページが巨大になってきてフォルダ分けしたい時などはその分けたフォルダ用に「index.html」を作成すればそのフォルダの目次の役割をする事ができます。

※最初から置いてある「index.html」はサーバーが動いているかのテスト用のものになりますので削除して自分用の「index.html」を作成して大丈夫です！