<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<p>「Firebase Hosting」を使って、AdMobの「app-ads.txt」を設置する手順です。</p>
<p>個人開発などで、アプリ専用のドメインやウェブサイトが無い場合でも、取り急ぎ無料で対応可能です。</p>
<h2 id="firebase-cli-%E3%81%AE%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#firebase-cli-%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> Firebase CLI の準備</h2>
<p>homebrew、nodebrewをアプデ</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token comment"># homebrew</span>
brew update
<span class="token comment"># nodebrew</span>
brew upgrade nodebrew
</code></pre></div><p>nodebrewがなければインストール</p>
<div class="code-block-container"><pre><code>brew install nodebrew
</code></pre></div><p>npmアプデ</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token comment"># node -v</span>
<span class="token comment"># npm -v</span>

nodebrew install-binary stable

nodebrew use stalbe

<span class="token function">npm</span> update <span class="token parameter variable">-g</span> <span class="token function">npm</span>


<span class="token comment"># node -v</span>
<span class="token comment"># npm -v</span>
</code></pre></div><p>以下の様なエラーが出る場合</p>
<div class="code-block-container"><pre><code>Fetching: https://nodejs.org/dist/v16.3.0/node-xxxxxxxx.tar.gz
Warning: Failed to create the file 
Warning: ~/.nodebrew/src/v16.3.0/node-xxxxxxxx.tar.g
Warning: z: No such file or directory
...
</code></pre></div><p>インストール先のDirectoryを作成してから上の諸々を実行する</p>
<div class="code-block-container"><pre><code>mkdir  ~/.nodebrew/src
</code></pre></div><p>Firebase Toolsアプデ</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> firebase-tools
</code></pre></div><p>認証</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">firebase login:ci
</code></pre></div><p>払い出されたトークンをセット</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">export</span> <span class="token assign-left variable">FIREBASE_TOKEN</span><span class="token operator">=</span><span class="token string">"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"</span>
</code></pre></div><h2 id="firebase-hosting">
<a class="header-anchor-link" href="#firebase-hosting" aria-hidden="true"></a> Firebase Hosting</h2>
<p>初期化</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token comment"># 作業ディレクトリで実行</span>
firebase init
</code></pre></div><p>対話、選択式でプロジェクトを設定していくと初期化ファイルなど構成が作成される</p>
<p>※内容とフローは変わる可能性あり</p>
<div class="code-block-container"><pre><code>＞ Hositingを選択
＞ 既存のプロジェクトを選択
＞ プロジェクト選択
＞ パブリックディレクトリを設定（publicで良ければそのままEnter
＞ SPAとして構築するか？ → No
＞ Githubへの自動デプロイ → No
</code></pre></div><p>→ 完了後、一連の初期ファイルが生成される</p>
<h2 id="%E3%80%8Capp-ads.txt%E3%80%8D%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%80%8Capp-ads.txt%E3%80%8D%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 「app-ads.txt」を作成</h2>
<ol>
<li><a href="https://apps.admob.com" target="_blank" rel="nofollow noopener noreferrer">AdMobにログイン</a></li>
<li>サイドバーで [アプリ] をクリック</li>
<li>[すべてのアプリ] をクリック</li>
<li>[app-ads.txt] タブをクリック</li>
<li>[app-ads.txt の設定方法] をクリック</li>
<li>表示される <code>パブリッシャーIDコード</code>をコピー</li>
<li>空のapp-ads.txtを作成</li>
<li>コピーしたコードをapp-ads.txt ファイルに貼り付け</li>
</ol>
<p>作成したapp-ads.txt</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">google.com, pub-XXXXXXXXXXXXXXX, DIRECT, XXXXXXXXXXXXXXXX
</code></pre></div><h2 id="%E3%80%8Capp-ads.txt%E3%80%8D%E3%82%92%E8%A8%AD%E7%BD%AE">
<a class="header-anchor-link" href="#%E3%80%8Capp-ads.txt%E3%80%8D%E3%82%92%E8%A8%AD%E7%BD%AE" aria-hidden="true"></a> 「app-ads.txt」を設置</h2>
<p>Firebase Hostingの初期化ステップで生成した公開ディレクトリ（デフォルト<code>public/</code>）に</p>
<p>作成した <code>app-ads.txt</code> を設置する。</p>
<div class="code-block-container"><pre><code>├── firebase.json
└── public
    ├── 404.html
    ├── app-ads.txt
    └── index.html
</code></pre></div><p>※ 404.html や index.html は適宜編集しておく</p>
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> デプロイ</h2>
<h3 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF" aria-hidden="true"></a> ローカルで表示チェック</h3>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">firebase serve <span class="token parameter variable">--only</span> hosting

<span class="token comment"># hosting: Serving hosting files from: public</span>
<span class="token comment"># hosting: Local server: http://localhost:5000</span>
</code></pre></div><p><code>app-ads.txt</code> の表示を確認</p>
<div class="code-block-container"><pre><code>http://localhost:5000/app-ads.txt
</code></pre></div><h3 id="%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF" aria-hidden="true"></a> プレビュー チャンネルで表示チェック</h3>
<p>Firebase Hostingの <a href="https://firebase.google.com/docs/hosting/test-preview-deploy?authuser=1#preview-channels" target="_blank" rel="nofollow noopener noreferrer">プレビュー機能（ベータ）</a> を使った確認方法</p>
<p>一時的に発行されるURLでデプロイ可能(公開はされるので注意)</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token comment"># firebase hosting:channel:deploy 任意の名前</span>
firebase hosting:channel:deploy appads_preview
</code></pre></div><p>完了後に発行されるURLでチェック</p>
<div class="code-block-container"><pre><code>hosting:channel: Channel URL (XXXX-app): https://xxxx-app--appads-preview-xxxxx.web.app [expires 2021-XX-XX 12:00:00] [version XXXXXXXXXXXX]
</code></pre></div><p><code>app-ads.txt</code> の表示を確認</p>
<div class="code-block-container"><pre><code>https://xxxx-app--appads-preview-xxxxx.web.app/app-ads.txt
</code></pre></div><h3 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4-1">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4-1" aria-hidden="true"></a> デプロイ</h3>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">firebase deploy <span class="token parameter variable">--only</span> hosting <span class="token parameter variable">-m</span> <span class="token string">"Deploying app-ads.txt"</span>
</code></pre></div><p><code>app-ads.txt</code> の表示を確認 🙌</p>
<div class="code-block-container"><pre><code>https://xxxxxxx-app.web.app/app-ads.txt
</code></pre></div><h2 id="%E8%A3%9C%E8%B6%B3">
<a class="header-anchor-link" href="#%E8%A3%9C%E8%B6%B3" aria-hidden="true"></a> 補足</h2>
<h3 id="admob%E3%81%AB%E8%AA%8D%E8%AD%98%E3%81%95%E3%81%9B%E3%82%8B%E3%81%AB%E3%81%AF">
<a class="header-anchor-link" href="#admob%E3%81%AB%E8%AA%8D%E8%AD%98%E3%81%95%E3%81%9B%E3%82%8B%E3%81%AB%E3%81%AF" aria-hidden="true"></a> AdMobに認識させるには</h3>
<p>App Storeの場合、 <code>app-ads.txt</code> を設置したURLを</p>
<ul>
<li>App Store ConnectのマーケティングURL</li>
</ul>
<p>に設定することでAdMob側に認識される</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/de777ce23021cd547105d14f.png" alt loading="lazy" class="md-img"></p>
<p>なお、デプロイしたサイトを非公開にする場合は</p>
<div class="code-block-container"><pre><code>firebase hosting:disable
</code></pre></div><hr>
<ul>
<li><a href="https://support.google.com/admob/answer/9363762" target="_blank" rel="nofollow noopener noreferrer">AdMob「app-ads.txt ファイルの設定」</a></li>
<li><a href="https://firebase.google.com/docs/hosting" target="_blank" rel="nofollow noopener noreferrer">Firebase Hosting</a></li>
<li><a href="https://firebase.google.com/docs/hosting/test-preview-deploy" target="_blank" rel="nofollow noopener noreferrer">Firebase Hositing/プレビュー</a></li>
</ul>


【AdMob】アプリ用のウェブサイトが無くてもapp-ads.txtに対応する

プレビュー チャンネルで表示チェック

Discussion