🧪「Web遊び」シリーズ 第1回
タグ（#Web遊び）で、これからサンプルコードなどを紹介していく予定です
- 目次
ホームページを公開するおすすめの方法
学校でHTMLを習ったり、趣味でコードを書いたりしても、それが自分のパソコンの中だけで完結してしまうのは、ちょっともったいない
無料で、カンタンにWebページを公開できる方法を紹介します
それがGitHub Pagesというサービスです
📄 自分で作ったHTMLファイルをインターネットで公開できる
🌐 URL（アドレス）を持てるから、友達に見せられる
💰 完全に無料で使える（広告なし！）
🧪 JavaScriptを使ったちょっとしたプログラムも動かせる
パソコンとインターネットがあればOK！
特別なソフトをインストールしなくても、ブラウザだけで公開でます
まずは「GitHub」にアカウントを作ろう！
Webページを公開するには、Webページのファイルを置いておく場所（サーバー）が必要です
GitHubは、「ファイルを保存できる場所」を無料で提供してくれます
GitHubは、世界中のプログラマーが自分のコードを共有したり、チームで開発したりするために使われているサービスで英語だし複雑そうですが、難しいことをしなくても大丈夫😊
今回はそのGitHubを、Webページのファイルを置ける無料の棚（サーバー）として使います
たとえば：
あなたの作ったindex.htmlというファイルを、GitHubにアップロード
GitHubの機能の１つ「GitHub Pages」をつかう
すると、世界中どこからでも見られるURLがもらえる！
まずはそのGitHubに無料アカウントを作るところから始めます
メールアドレスが1つあればすぐに作れます
1まずは、次のリンクをクリックしてGitHubにアクセスします
👉 https://github.com
2トップページが開いたら、右上の「Sign up」ボタンをクリック
- Email
メールアドレスを入力、GmailなどでもOK
確認メールが届くので注意！ - Password
15文字以上、または英小文字＋数字＋8文字以上 - Username
GitHubのURLにも使われます
変更できないので慎重に！
英数字とハイフンのみです - Your Country/Region
特に理由がなければそのままでOK - Email preferences
チェックを入れるとお知らせメールが届きますが、不要なら空欄でOKです
- 入力が終わったら右下の「Create account」をクリック
- 登録したメールアドレスに確認コードが届きます
- GitHubの画面が自動で「コード入力画面」に切り替わるので、メールに届いた確認コードを入力しましょう
🎉 これでGitHubのアカウント作成は完了！
確認コードを入力し終えると、自動的にGitHubにログイン（＝サインイン）された状態になります
もし自動でサインインされなかった場合は、トップページ（https://github.com/）にアクセスして、
右上の 「Sign in」ボタンからメールアドレスとパスワードを入力してログインしてみましょう！
GitHubにサインインするとこんな画面になります！
Home🏠で「ダッシュボード」と呼ばれる画面、左側がこれから作成するリポジトリの一覧になります
左の緑のボタン「Create repository」をクリックして、公開用のホームページを入れる箱（リポジトリ）を作ります
無料の棚（サーバー）に、これから箱（リポジトリ）を並べるイメージです
自分のページを入れる「箱」を作ろう（リポジトリって何？）
GitHubでは、「リポジトリ（repository）」という場所に、作ったWebページのファイル（HTMLや画像など）を入れて管理します
🧃 リポジトリは「作品を入れるためのフォルダ」のようなもの
1つの作品（Webページ）ごとに1つのリポジトリを作るイメージです
GitHub Pagesでは、Webページの公開方法が2種類あります
これは「どんな名前のリポジトリを作るか」で決まります
① ユーザーページ
「ユーザー名.github.io」という名前にすると、そのままWebページとして公開できます
たとえばユーザー名がabcなら、リポジトリ名は「abc.github.io」にする
公開されるURLも → https://abc.github.io/ のようにそのまま
これは自分のトップページやまとめサイトとして使うのにピッタリです
② プロジェクトページ（作品ページを増やしたいとき）
普通のリポジトリ名（例：my-button や hello-site など）で作る
公開URLは → https://ユーザー名.github.io/リポジトリ名/
これはたくさんのページを個別に公開したい人向けです。
例えば「作品集」や「小さな実験ページ」など、1つずつ分けて作れます
- はじめてGitHub Pagesを使う
✅ ユーザーページから始めてみよう！ - いろんなページを増やしていきたい
✅ プロジェクトページをどんどん作ろう！ - まとめページやリンク集を作りたい
✅ ユーザーページは「ポータルサイト（入り口となるWebサイト）」にしよう！
1 ダッシュボードの左の緑のボタン「Create repository」をクリックします
- リポジトリ名を上の「どんな名前のリポジトリを作るか」を参考に入力
今回はユーザー名.github.io（ユーザーページ）にしました - Public / Private （公開か非公開か）
「Public（公開）」を選びます
＊無料プランのユーザーが GitHub Pagesでページを公開するには、リポジトリが「Public（公開）」である必要があります - Add a README file
チェックを入れておくと、最初に空っぽじゃない状態でスタートできます
README（リードミー）ファイルは、「この作品の説明メモ」のようなも
2 右下の「Create repository（リポジトリを作成）」をクリック！
リポジトリができました〜😊
これが「リポジトリのトップページ」です
- README.md：このリポジトリの「説明メモ」です
チェックをつけると自動で作成されます - 「＋」ボタンから「ファイルをアップロード」したり、「新しいファイルを作る」ことができます
- main：メインの作業場所、公開もこの「main」ブランチの内容が使われます
READMEを作っていない場合など、まだファイルが1つもないリポジトリの初期画面です
⚠️ ファイルが1つもないと、このような画面になります
「creating a new file（新しいファイルを作る）」または
「uploading an existing file（ファイルをアップロードする）」から
index.htmlを作って始めましょう！
HTMLファイルをアップしてみよう！
今作った「リポジトリ」は、Webページを入れる「箱（フォルダ）」みたいなもの
この中に、Webページの中身となるHTMLファイル（例：index.html）を入れていくと、インターネットで見られるページになります！
1 ファイルを準備しよう
まず、自分のパソコンでindex.htmlという名前のHTMLファイルを作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは GitHub Pages で公開したページです。</p>
</body>
</html>HTMLファイルってどうやって作るの❓
Visual Studio Code（VS Code）などの「エディタ（テキストを書くアプリ）」がパソコンに入ってない人は、以下を参考にしてね！
🔸Windowsの場合
「メモ帳（Notepad）」でもOK！
ただし、保存するときに「拡張子」を .html にするのを忘れないでね
例：index.htmlとして保存（index.html.txtにならないよう注意）
🔸Macの場合
「テキストエディット」を使うときは
「フォーマット」メニュー → 「標準テキストにする」を選ぶのがポイント！
保存するときに「.html」をつけよう！
📌 補足：GitHub上で直接ファイルを作り、編集できます
エディタがなかったり、HTMLファイルの作り方がまだよくわからない人は、GitHubの画面から直接「新しいファイル」を作ってもOKです🙆♀️
👉 編集方法の詳しい説明は、後ほどのセクションで紹介します！
コードをコピペするなら、きっとこの方法の方が便利です
2 アップロードしよう！
GitHubのリポジトリ画面で、
「＋」ボタン⇨「Upload files」をクリック
＊または「uploading an existing file」をクリック
作成したindex.html ファイルをドラッグ＆ドロップまたは選択
「Commit changes」をクリック
「公開」しよう！
GitHubの機能「GitHub Pages」を使って、アップしたHTMLファイルを実際にWebサイトとして見られるようにします
- リポジトリのトップページを開いて
- 右上のタブにある「Settings」をクリックします
- 左側のメニューの中から「Pages」をクリック
- 「Deploy from a branch（ブランチから公開）」というところで、
- 「main」ブランチ
- 「/（root）」フォルダ
を選びます - 「Save（保存）」ボタンをクリック！
- 公開できたか確認
数秒〜数分後に再読み込み（ブラウザの🔄マークか、F5キーをクリック）すると、同じ画面の少し上にある「Your site is live at: ～」のところに、あなたのサイトのURLが表示されます
「Visit site」をクリックしてみよう！
ページを直したいときは？（編集のやり方と注意点）
GitHubのページでファイルを編集するとき、ちょっと複雑に感じるかもしれません💦
GitHubの本来の目的は「変更の履歴を記録して、いつでも戻せるようにする」という「バージョン管理」の仕組みです
たとえば、こんなことができます：
- 「ちょっと前の状態に戻したい！」
- 「誰が何をいつ変えたのか見たい！」
こういった管理ができるように、GitHubではファイルを少し変えるだけでも「変更理由（Commit message）」を入力してから保存するようになっています
これはチーム開発やプログラミングを本格的にやる人向けの設計で、本格的にGitを使うようになったら、GitHub上で直接編集することはあまりしません
でも、今回は「Webページを公開する」という目的なので、
気にせずにGitHub上でファイルを作ったり編集したりしてOKです🙆♀️
新しいファイルを作るとき
- リポジトリのトップページにアクセス
→リポジトリ名をクリックすればOK！ - トップページ右上の「＋」 → 「Create new file」 をクリック
＊または「creating a new file」をクリック - 上の入力欄にファイル名を入力（例：index.html）
- 下の大きな欄にファイルの中身（HTMLなどのコード）を入力し、右上の「Commit changes」をクリック
- ポプアップ画面で「Commit changes」ボタンを押せば、作成されます🙆♀️
- Commit message：どんな変更をしたかを簡単に書く
自動で入力されている（例：「Update index.html」）のでそのままでも編集してもOK - Extended description：空欄でも大丈夫！必要なら詳しい説明を書いてもOK
- ◉ そのまま「main branch」に保存！
新しいブランチ（Create a new branch）は使わない❗️
ブランチを使い分けるのは、チーム開発や実験用のときが多いですが、今は「main」だけ使えばOK！
⚠️ ファイル名の注意点
Webページの最初のファイルは index.htmlにするのが基本
拡張子（.html や .css）は忘れずに
スペースや全角文字は使わず、英数字＋ハイフンやアンダースコアが無難（例：about-me.html）
既存のファイルを編集したいとき
- リポジトリのトップページにアクセス
→リポジトリ名（例：korokoro777.github.io）をクリックすればOK！ - 編集したいファイル名（例：index.html）をクリック
→ リポジトリのトップページにある、ファイル一覧の「左端のファイル名」をクリック - ファイルの中身が表示されたら、右上にある 「鉛筆マーク（Edit this file）」 をクリック
- 編集画面になるので、自由に内容を変更して、右上の「Commit changes」をクリック
- ポプアップ画面で「Commit changes」ボタンを押せば、保存されます🙆♀️
⚠️ 注意点：変更がすぐに表示されないことがあります！
ページを更新したのに、「なんだか反映されてないな…」と思ったら、ブラウザのキャッシュが原因かもしれません
＊キャッシュとは、前に読み込んだページのデータをブラウザが一時的に保存しておくしくみで、せっかく直したのに古いCSSやJavaScriptが使われたままになることがあります
✅ そんなときは「Shift + 再読み込み」！
変更をすぐに反映させたいときは、以下のように「強制リロード」してみてください👇
▲Windows（Chromeなど）： Ctrl + F5 または Shift + F5
▲Mac（Chromeなど）： Command + Shift + R
▲Safari： Command + Option + R
✅ 裏ワザ：クエリ（?v=1）をつける方法も
CSSやJSの読み込みタグにこんな風に「バージョン番号」をつけておくと、変更したときにその番号を変えるだけで、キャッシュ（古いファイル）を避けて最新の内容を読み込むことができます
ファイル名はそのままで大丈夫です😊
<link rel="stylesheet" href="style.css?v=1">
<script src="index.js?v=1"></script>いらなくなったファイルやリポジトリはどうすればいいの？
ファイルを削除する方法
- リポジトリのトップページを開く
- 削除したいファイル名（例：index.html）をクリック
- ファイルの中身が表示されたら、右上3点ドットのアイコン
をクリックして「Delete file」をクリック - 右上の「Commit changes」をクリック
- ポプアップ画面で「Commit changes」ボタンを押せば、削除されます🙆♀️
リポジトリごと削除する方法
もし、「もうこのWebページはいらない！」「リポジトリをまるごと削除したい」という場合は、リポジトリごと削除することもできます
⚠️ 一度削除すると、復元できません（慎重に）
⚠️ リポジトリを削除すると、GitHub Pagesで公開していたWebページも見られなくなります
- リポジトリのトップページで、上のタブから「Settings」をクリック
- 一番下までスクロールしていくと、「Danger Zone」という赤いエリアがあります
- 「Delete this repository」をクリック
- 確認画面が出たら、リポジトリ名を入力して「I understand the consequences, delete this repository」をクリック
次にできること
🌟デザインを変える
HTMLだけじゃなく、CSSを使うと、文字の色やサイズ、背景などが自由に変えられる
🌟画像を表示
.jpgや.pngの画像ファイルをリポジトリにアップして、ページに表示
🌟複数のページを作ってリンク
about.html や contact.html を作って、トップページからリンクすることで「サイトっぽく」なる
🌟リポジトリごとに別のページ（プロジェクトページ）を作る
🌟JavaScriptで動きをつける
ボタンを押したら表示が変わる、簡単なゲームを作る、などもできる