作業ログの部屋
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

作業ログの部屋

いろいろな作業ログを公開。何かの時に便利・・・かも。記録とメモ代わりに。

サーバの機能拡張を行ったログを貼り付けて記録。後に生かせれば・・。
次ページ >>

諸々#1_Githubを使う

ソフトウェア業界にいる人なら一度は聞いたことがあるだろう「Github」。

 

個人的には聞いたことあって、ソフトウェアのソースコード管理が便利になるんだろうぐらいのイメージを持ちつつも、使うことはない世界とも感じていたサービス。仕事もソフトウェア関連ではないので、縁がない。

 

ところが、ふとしたことで使うことになったのでその手順をまとめておく。

 

きっかけは、AIでアプリが作れる

昨今はAIで誰でもアプリが作れる”バイブコーディング”が流行ってる。

アイデアさえあればAIがアプリを作ってくれる。有料でなくても無料の範囲でも簡単なものなら作れる。

 

個人用のアプリを作った

個人で使うアプリを作って、noteで紹介したところ、「公開していただきたいですね～♪」とのコメントが付いた。つたない個人用アプリなので・・と断ることもできるけど、まあ、せっかくなので公開を考えてみた。

 

どこで公開しようか

 

個人のホームぺージ、awsのEC2なども考えたが、ふとGithubを思いついた。確か、公開サイトも作れたはず。あと個人利用の範囲であれば、ほぼ無料で利用できるという噂。というわけでGithubに決まり。

 

どうする？

とはいえ使い方は一切知らないので、ここからはAI（Gemini）と伴走です。アカウントはGoogleアカウント連携で作成しました。

 

指示「Githubを使ったことがないので、初心者にもわかりやすく使い方を教えて。まずは導入方法から」

1.GitHubアカウントを作成する:

ウェブブラウザで実施。

  1. GitHub公式サイトにアクセスします。
  2. 「Sign up」 をクリックし、メールアドレス、パスワード、ユーザー名（英数字）を入力してアカウントを作成します。

2.GitHub Desktopをインストールする:

難しいコマンド入力を回避。

初心者の方には、コマンドを使わずにマウス操作だけでGitHubが使える公式ソフト**「GitHub Desktop」**がオススメです。

  1. GitHub Desktop公式サイトからインストーラーをダウンロードして実行します。
  2. アプリを起動し、「Sign in to GitHub.com」 を選択して、先ほど作成したアカウントでログインします。

3.リポジトリ（保存庫）を作成する:

コードを管理するフォルダの作成。

GitHubでは、プロジェクトごとの保存庫を「リポジトリ（Repository）」と呼びます。

  1. GitHub Desktopの画面で 「Create a New Repository on your hard drive」 をクリックします。
  2. 各項目を設定します：
    • Name：保存庫の名前（例：my-ai-project）
    • Local Path：パソコン上のどのフォルダに保存するか選択
  3. 「Create Repository」 を押すと、パソコン上に管理用フォルダが作られます。

4.ファイルを保存（Commit）してWebへ送信（Push）する:

AIで生成したコードを保管する流れ。

作成されたフォルダの中に、AIで作ったコードやファイルを保存します。

  1. ファイルを追加・変更すると、GitHub Desktopの画面左側に変更されたファイルが自動で表示されます。

  2. 画面左下の 「Summary」 欄に変更内容のメモ（例：「初期コードを追加」など）を入力し、「Commit to main」 をクリックします（これでローカルに記録完了）。

  3. 最後に画面上の 「Publish repository」 をクリックすると、GitHub（クラウド上）へファイルが送信・保管されます。

    ※この時**「Keep this code private」**にチェックを入れておけば、自分だけが見られる非公開状態になります。

手順通りに作成して、リポジトリにファイルを保存することができました。

次にこのファイルを一般に公開する方法です。今回作成したリポジトリはプライベートなので、公開用の「open」というリポジトリを作成しました。

どうすれば公開できるのだろうか・・・。

 

指示「githubを使って作成したページ（HTML）を公開できますか？」

はい、公開できます！

GitHubで作ったリポジトリは、「Public（公開）」 に設定を変更するだけで、世界中の誰でも見られる状態（オープンソースなど）にできます。

具体的には、以下の3つの運用方法が選べます。

  1. Private（非公開）

    自分（または自分が招待した人）だけが見られる状態。デフォルトではこれで作るのが安全です。

  2. Public（公開）

    誰でもコードを閲覧・ダウンロードできる状態。自分で作った便利なスクリプトやツールを公開したい時に使います。

  3. GitHub Pages（Webサイトとして公開）

    HTML/CSS/JavaScriptなどで作ったWebページやWebアプリなら、GitHubの無料機能（GitHub Pages）を使って、そのままWebサイトとしてURL発行・公開することもできます。

公開（Public）にする際の注意点

AIを使ってプログラミングしている場合、「APIキー」や「パスワード」をコード内に直接書いたまま公開してしまうリスクがあります。

  • OpenAIやGeminiなどの API Key
  • データベースの接続パスワード
  • 個人情報やローカル環境の絶対パス

これらを誤ってPublicで公開すると、外部の人にAPIを悪用されて高額請求が発生するなどの事故につながります。

そのため、まずはPrivate（非公開）で作成し、公開したくなった段階で設定を変更（または必要なファイルだけを選んで公開）するのが一番安全です。

指示「アクセスしてもらうURLを取得するには」

URLを取得して他の人にアクセスしてもらう方法は、「何（コードそのものか、動くWebサイトか）を公開したいか」によって手順が異なります。

目的別に一番簡単な方法を解説します。

1. コードそのもの（リポジトリ）を見てもらいたい場合

GitHub上のコードやフォルダをそのまま誰かに見せたい場合のURLです。

  1. ブラウザで GitHub.com にログインし、該当のリポジトリを開きます。
  2. ブラウザのアドレスバーに表示されているURL（例: https://github.com/ユーザー名/リポジトリ名）をそのままコピーして共有します。

※ リポジトリの設定が Private（非公開） になっていると、他の人がアクセスしてもエラー（404）になります。共有する前に、リポジトリの Settings ＞ 画面最下部の Change repository visibility から Public（公開） に変更しておいてください。

2. 作ったWebサイトやアプリを「動く状態」で公開したい場合

HTML/CSS/JavaScriptなどで作成したWebページを、実際のホームページとしてアクセスできるURL（例: https://ユーザー名.github.io/リポジトリ名/）で公開したい場合は、無料の GitHub Pages 機能を使います。

設定手順（GitHub Desktopを使った場合）

  1. ブラウザで GitHub.com のリポジトリページを開きます。
  2. 上部メニューの 「Settings」（設定）をクリックします。
  3. 左側のサイドメニューにある 「Pages」 を選択します。
  4. 「Build and deployment」 の Branch 項目で、None になっている箇所を main（または master）に変更し、右側の 「Save」 を押します。
  5. 1〜2分ほど待ってページを再読み込みすると、画面上部に 「Your site is live at https://...」 とURLが表示されます。このURLをコピーして相手に伝えてください。

注意点:

GitHub Pagesで表示させるには、フォルダの直下に index.html という名前のファイルが存在している必要があります。

今回は「2. 作ったWebサイトやアプリを「動く状態」で公開したい場合」の方法です。

手順通り実施して、無事、公開用サイトのURLが作成されました。

index.htmlファイルも作成しつつ、公開したいファイルを置いてアクセスすることができることも確認できました。

 

使ってみた感想

便利ですね。これまで公開しようとしたらローカルで作成してFTPでアップロードしていましたが、Githubではローカルの指定フォルダに置いて、Explolerで、Commitして、Pushするだけで、公開完了です。

 

次ページ >>