Gemini Canvas & GitHub Pagesでアプリを簡単に世界公開する方法

「プログラミングを始めてみたいけど、何から手をつけたらいいの？」「コードは書けたけど、URLにして友達に見せる方法がわからなすぎる……」

そんな風に悩んでいる人に、とっておきのニュースです！Googleの最新AI「Gemini Canvas」と、エンジニア御用達の「GitHub Pages」を組み合わせれば、難しい設定やサーバー代は一切なし！たった数分で、あなただけのアプリを世界中に公開できちゃいます。

今回は、以下の動画で紹介したものを参考に、ポモドーロタイマーを作りながら、その驚きの手順を紹介しますね。この記事を読み終わる頃には、あなたも立派な「アプリ開発者」の仲間入りです！

GeminiとGithubを駆使して、オリジナルアプリを無料で簡単に開発・公開してみよう！

＼動画で知りたい方はコチラ！／

この記事の目次

なぜ「Gemini Canvas」と「GitHub Pages」のコンビが最強なのか？

まずは、今回使うツールがどうして最強なのか、その理由をお話しします。

Gemini Canvasは、単なる一問一答のチャットボットではありません。ユーザーの隣で一緒にコードを書き上げ、ブラッシュアップしてくれる「専属のペアプログラマー」のような存在です。

直感的な修正と対話型開発
「もう少しボタンを大きくして」「背景をモダンなダークモードにして」といった曖昧な指示でも、AIが意図を汲み取り、該当するCSSやHTMLを瞬時に書き換えてくれます。コードのどこを直せばいいか探す必要はありません。
HTML/CSS/JSのシームレスな統合
本来、Webアプリは「構造（HTML）」「見た目（CSS）」「動き（JavaScript）」の3要素で構成されますが、Canvasはこれらを一つのファイルに高精度でまとめ上げる能力に長けています。これにより、初心者が複数のファイルを管理する手間を極限まで減らしてくれます。

GitHubは世界中のエンジニアがソースコードを管理・共有するためのプラットフォームですが、その中でも「GitHub Pages」は、初心者にとって最も恩恵の大きい機能の一つです。

維持費ゼロで「本物」のURLを持てる
通常、アプリを公開するには月額数百円から数千円のサーバー費用がかかりますが、GitHub Pagesなら完全無料です。発行されるURLはあなたのユーザー名が含まれた独自のものであり、SNSでの共有も簡単です。
ポートフォリオとしての価値
単にアプリを動かすだけでなく、GitHubにコードを置いておくこと自体が「私はコードを管理できる」という証明になります。将来的にエンジニア転職を目指す際、これらは立派な実績（ポートフォリオ）になります。

それでは、実際にアプリを作っていきましょう。まずはアプリの心臓部となるコードを生成します。

Geminiの画面で、右下の設定から「Canvas」がオンになっていることを確認してください。指示を出す際は、できるだけ具体的であるほどAIは良い回答を返します。指示を入力すると、画面右側のキャンバス領域に、HTMLコードがリアルタイムで書き込まれていく様子が見えるはずです。

一度生成されたコードに対して、追加で要望を出して「自分らしさ」を加えていきましょう。納得のいくまで対話を繰り返し、アプリを完成させます。完成したらキャンバス上部の「コード」タブをクリックし、すべてのコードをコピーしておきましょう。

コードを手に入れたら、次はそれをインターネット上に置くための場所（リポジトリ）をGitHub上に作成します。GitHubにログインし（未登録の方は公式サイトでアカウントを作成してください）、以下の手順で進めます。

リポジトリができたら、いよいよコードをアップロードします。

画面内の 「creating a new file」 というリンクをクリック。
ファイル名を index.html に設定します。
- 重要ポイント
  インターネットの仕組み上、ブラウザが特定のURLにアクセスした際、最初に探すファイル名が index.html と決まっています。この名前にしないと、URLにアクセスしてもアプリが表示されないので注意しましょう。
エディタ部分に、Geminiでコピーしたコードをペーストします。
右上の [Commit changes…] をクリックし、ポップアップは特に変更変更の必要はなくそのまま確定させます。