【初心者向け】自作Webアプリを無料で共有!GitHub Pagesの簡単な使い方

ついにスコアアプリが完成!しかし完成して終わりじゃない!? 実は今のままだと、このアプリは自分のパソコンの中でしか動きません。せっかく作ったのだから、サークルのメンバーにも使ってもらいたいですよね。 そこで本記事では、URLリンクを共有するだけで誰でも利用可能にする手順を紹介します!

今回作成したバスケスコアアプリを共有するために「GitHub(ギットハブ)」というサービスを使用します。あまり聞いたことのない名前で不安になるかもしれませんが安心してください。この記事を読めば初心者でも難しいことをすることなく共有リンクが作れちゃいます。また、費用も完全無料なので是非手順を覚えて自作したアプリを共有できるようにしましょう!

STEP1:GitHubアカウントを作成しよう

まずは、アプリの保管庫となる「GitHub」にあなたのアカウントを作成します。すべて英語のサイトですが、入力する内容はとてもシンプルなので安心してください。

準備するもの

・メールアドレス(普段使っているものでOK)

【登録の手順】

STEP

GitHub公式サイトにアクセスし、赤枠内の「Git Hubに登録」ボタンをクリックします。

STEP

画面の案内に従って、「メールアドレス」「パスワード」「ユーザー名(好きな英数字)」を順番に入力します。

注意点:ここで決めたユーザー名は、後にWebアプリを公開するときのリンク(URL)に入ります。本名などの個人情報が分かるものは避けて登録してください。

STEP

登録したメールアドレスに確認のメールが届きます。メールに記載されている数字をコピーして、数字の下の[Open GitHub]を選択します。

STEP

すると、下図のような数字を入力する画面が出て来ます。STEP3でコピーした数字を貼り付け(入力)して[Continue]ボタンを押せば登録完了です

ログイン画面に切り替わったらSTEP2で登録したメールアドレスとパスワードを入力してログインしましょう!

STEP2:鬼門突破!コードの保存場所(リポジトリ)を作る

ここでは「リポジトリ」を作る方法について説明します。
このリポジトリとは、ゲームのセーブデータと考えていいです。作成したWebアプリのデータを保管する場所になります。

リポジトリ作成画面への行き方

以下のどちらか、やりやすい方法で作成画面(New)を開いてください。

  • 方法A(おすすめ)
    こちらのリンクhttps://github.com/newをタップして直接アクセスする。
  • 方法B
    画面右上の 自分のアイコンをタップ >「Repositories」を選択し、緑色の「New」ボタンをタップする。

リポジトリ作成と保存の手順

STEP

「Repository name」に好きな名前(例:score-app)を入力し、一番下の緑のボタン「Create repository」を押します。

STEP

【🚨ここで注意!🚨】
ボタンを押すと急に暗号のような英語の画面が出ますが、安心してください!

上記の画像のように、画面の中央あたりにある「uploading an existing file(既存のファイルをアップロード)」というリンクをクリックします。ここさえ間違えなければ大丈夫です。

STEP

上記の画面になるので、作成したアプリのファイル(HTMLやJavaScriptなど)を画面にドラッグ&ドロップもしくは赤枠の[Choose youre files]から作成したファイルを選択してください

STEP

下図の下の方の緑ボタン「Commit changes(変更を保存する)」を押してセーブ完了です!

【🚨ここで注意!🚨】

GitHub Pagesには、「一番最初に表示するトップページのファイル名は、必ず index.html にしなければならない」という絶対のルールがあります。

下記のようにバスケットボールスコアブック (3).htmlという名称で保存してしまうとうまく作動しないので注意が必要です!!

名前を間違えてしまっても安心してください!

変更方法もしっかり説明していきます!

ファイル名の変え方

STEP

codeタブに切り替えて該当のプログラムを選択します

STEP

下図赤枠の・・・を選択して、[In place]を選択してください。

STEP

下図のバスケットボールスコアブック (3).htmlの部分をindex.htmlに書き換えてCommit changes…を押すと再度確認画面が出るのでもう一度Commit changes…を押せばファイル名の変更完了です!

STEP3:ボタンを押すだけ!GitHub Pagesでネットへ公開

いよいよ最後のステップです。アップロードしたファイルを、インターネット上で誰でも見られるように設定します。

公開の手順

STEP

画面の上部にある「Settings(設定)」タブをクリックします。

STEP

左側のメニューから「Pages」を選びます。

STEP

画面を下までスクロールしてください
画面中央の「Branch」という項目の下にある「None」を「main」に変更し、「Save」ボタンを押します。

STEP

Page画面の上にあなたのアプリのURL(共有リンク)が表示されます!(表示されない場合は一度別のタブに切り替えて再度Pageタブを開いてください)

STEP

URLをクリックするとアプリがWEB上で立ち上がります!このURLを共有することで誰でも自分が作成したアプリを利用することができます!

🚨 【最後に重要なお知らせ】 🚨
設定が完了してURLが表示されても、実際にアクセスできるようになるまで1〜3分ほどかかります。 すぐにリンクを押して「404 Error(ページが見つかりません)」という画面が出ても、設定に失敗したわけではありません。安心してお茶でも飲みながら、数分待ってから再度アクセスしてみてください☕

↓↓↓実際に作成したアプリになります!↓↓↓

バスケスコアアプリ

✨ まとめ:ついに「Webアプリ開発者」の仲間入り!

お疲れ様でした!無事に設定は完了しましたか? 英語の画面や「リポジトリ」といった慣れない言葉がたくさん出てきましたが、ここまでやり切ったあなたは、もう立派な「Webアプリ開発者」です!🎉

これで、あなたの作ったバスケスコアアプリが世界中どこからでもアクセスできるようになりました。 今回でバスケアプリの作成はひとまず区切りとなります。頑張って作ったアプリがスマホで動く感動を、ぜひ味わってみてください。

さっそく発行されたURLをコピーして、サークルの友達や仲間にLINEで送って使ってもらいましょう!📱🏀