Web Technologies

Firebase Hosting × AdSense｜フロントエンドのみのWebアプリをデプロイして広告収益化する方法

1. はじめに

フロントエンドのみで動作するWebアプリを作成したら、それを 公開して多くの人に使ってもらいたい ですよね。さらに、Google AdSense を活用すれば 広告収益化 も可能です。

本記事では、Firebase Hosting を使ったWebアプリのデプロイ と AdSense広告の設定 について、初心者でもわかるように ステップごとに詳しく解説 します！

✅ この記事を読むとできること

  • Firebase Hosting を使って Webアプリを公開できる
  • AdSense を設定し、広告収益化ができる
  • WordPress と Webアプリを連携して活用できる

2. Firebase Hosting に Webアプリをデプロイする

まずは、Webアプリを Firebase Hosting にデプロイする手順を解説します。

2-1. Firebaseプロジェクトの作成

  1. Firebase Console にアクセス
  2. 「プロジェクトを作成」をクリック
  3. 任意のプロジェクト名を入力（例：resize textures）←こちらがWebAppのurlになります。
  4. 「Google アナリティクスの設定」は 不要ならオフ にしてOK
  5. 「作成」をクリックしてプロジェクトを作成

2-2. Firebase CLI をインストール & ログイン

Firebase CLI（コマンドラインツール）を使って、ローカルPCからデプロイ作業を行います。

（1）Firebase CLI をインストール
ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します。

npm install -g firebase-tools

（2）Firebase にログイン

firebase login

ブラウザが開くので、Google アカウントでログイン します。

2-3. Webアプリの Firebase セットアップ

Firebase Hosting を設定します。

  1. Webアプリのプロジェクトフォルダで、以下のコマンドを実行 firebase init
  2. 「Hosting」 を選択（矢印キーで移動し、スペースキーで選択）
  3. 「既存のFirebaseプロジェクトを使用する」を選択
  4. 公開フォルダを指定（Reactなら build、Viteなら dist）
  5. 「シングルページアプリケーションとして設定しますか？」 → 「Yes」

Firebaseの初期化（firebase init）を実行した際の流れをステップごとに説明します。

1. 初期化開始

最初に表示されたメッセージは、Firebaseプロジェクトの初期化が始まったことを示しています。作業を開始するディレクトリ（C:\Users\sekkeiya\02-WebApp\022-ResizeTextures\frontend）が確認され、続いて設定を進める準備が整っています。

質問:

  • **「Are you ready to proceed?」**で「Yes」を選択した場合、次のステップへ進みます。

2. Firebaseプロジェクトの選択

Firebaseプロジェクトを選択する画面が表示され、現在使用するFirebaseプロジェクトを選択します。

選択したプロジェクト:

  • 既存のプロジェクト「resize-textures」が選ばれ、これがデフォルトのFirebaseプロジェクトとして設定されました。

3. Data Connectのセットアップ

次に、「Data Connect」というFirebaseサービスのセットアップが始まりました。このサービスは、SQLデータベースなどとの接続をサポートします。

  • sqladmin.googleapis.com APIが有効化され、必要な設定ファイル（YAML、GraphQLスキーマなど）が作成されました。
  • コネクタの設定：コネクタSDK（この場合はfrontend/default）が生成され、そのためのコード（JavaScript SDK）が作成されました。

進行状況:

  • 必要な設定ファイルやSDKコードが生成され、ダウンロードされたファイルを基に、データ接続機能が適切に構成されました。

4. SDKのインストール

SDKが生成された後、依存関係（パッケージ）がインストールされる手順が始まりました。npm installが実行され、必要なライブラリがインストールされています。

5. Firebase設定ファイルの更新

  • firebase.jsonにFirebaseの設定が書き込まれ、プロジェクト情報が.firebasercに記録されました。

6. 完了メッセージ

初期化が完了し、Firebaseプロジェクトが正しく設定されたことが確認されました。

結果として、以下の内容が実行されました:

  • Firebaseプロジェクトとの関連付け
  • Data Connectサービスの設定とSDKの生成
  • Firebase Hostingの設定（初期化）や必要なファイルの書き込み

次に進むために、ビルドしてFirebaseにデプロイする準備が整いました。デプロイを行うためには、アプリケーションをビルドしてfirebase deployコマンドを実行するだけです。

2-4. Webアプリをデプロイする

アプリをビルド（Reactの場合）

npm run build

Firebase Hosting にデプロイ（only hostingを付けることでキャッシュしてデプロイできます）

firebase deploy --only hosting

公開されたURLを確認（例：https://resize-textures.web.app/）

✅ これで、Webアプリがインターネット上に公開されました！

3. WebAppを修正して再度デプロイする方法

修正した内容を反映させるためには、修正後に再度アプリをビルドします（Reactの場合）

npm run build

Firebase Hosting に再度デプロイします。（only hostingを付けることでキャッシュしてデプロイできます）

firebase deploy --only hosting

Chromeで確認する際にはブラウザを開いて「Ctrl＋Shift＋R」でキャッシュを削除します

4. Firebase Hosting に AdSense 広告を設定する

次に、Firebaseアプリに Google AdSense を設定 します。

4-1. AdSenseのアカウントについて

「設計屋の作業部屋」で AdSense の審査が通っている場合、新規申請は不要です。
ただし、FirebaseアプリのURLをAdSenseに追加 する必要があります。

4-2. FirebaseのURLをAdSenseに追加する

  1. Google AdSense にログイン
  2. 「サイト」→「新しいサイトを追加」 をクリック
  3. FirebaseアプリのURL（例：https://your-app.web.app）を入力して追加
  4. 審査を待つ（通常1〜3日で完了）

✅ 審査完了後、広告の設定ができるようになります！

4-3. Webアプリに広告コードを埋め込む

審査が通ったら、Webアプリに広告コードを追加しましょう。

  1. AdSense の管理画面で広告コードを取得
    • 「広告」→「自動広告」→「コードを取得」
  2. Webアプリの index.html にコードを追加 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
  3. 広告を表示する場所に ins タグを追加 <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXX" data-ad-slot="YYYYYYYYYY" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

✅ これで Firebase アプリに AdSense 広告が表示されるようになります！

5. WordPress と Webアプリの連携方法

5-1. リンクを貼る（最も簡単）

  • WordPress のメニューや記事内に FirebaseアプリのURL を貼る

5-2. iframe で埋め込む（ページ内に直接表示）

<iframe src="https://your-app.web.app" width="100%" height="600px"></iframe>

5-3. CTAボタンで誘導する

WordPressの投稿やサイドバーに以下のようなボタンを追加

<a href="https://your-app.web.app" class="btn btn-primary">画像リサイズアプリを使う</a>

✅ これで WordPress から Webアプリへの流入を増やせます！

5. まとめ

✅ Firebase Hosting を使えば、フロントエンドのみのWebアプリも簡単に公開できる！
✅ AdSenseを組み合わせれば、収益化も可能！
✅ WordPressとの連携で、より多くの人にアプリを使ってもらえる！

Webアプリを作成したら、デプロイ & 収益化 に挑戦してみましょう！

-Web Technologies