Swift

【Swift】iPhoneアプリにバナー広告を貼る方法(Firebase編)

こんにちは!KON(@pippi_kon)です。

この記事では、SwiftでiPhoneアプリにバナー広告を設定する方法をご紹介します。

広告を貼るためには以下の3つのことをしなくてはいけません。

(A)GoogleのFirebaseに登録する。

(B)アプリIDと広告ユニットIDを取得する。

(C)広告を設置するプログラムを書く。

今回は(A)のGoogleのFirebaseに登録する方法をご紹介します。

バージョン情報

この記事は以下のバージョンで記載しています。

Xcode:9.3.1

Swift:4.1(Swift4)

設定する前に

本記事内容は、基本的なプロジェクトである「Simple View App」で作成した環境を基にしています。

環境の作成方法は以下の記事をご覧ください。

あわせて読みたい
【Swift】基本的なプロジェクト(Single View App)の作成方法 この記事は、主にプログラミング言語「Swift」の初心者向けに、iPhoneアプリを作るための情報を記載しています。 今回...

 

Firebaseプロジェクトの作成

それではFirebaseの設定をしていきましょう。

まずはFirebaseのプロジェクトを作成します。

Firebase Console(https://console.firebase.google.com)にアクセスし、Googleアカウントでログインしてください。

ログインしたら以下の画面が表示されるので「プロジェクトを追加」を選択します。

 

すると以下の画面が表示されます。


プロジェクト名」に任意のプロジェクト名を指定します。

「プロジェクトID」は自動で設定されるので気にしなくていいです。

「国/地域」日本を選択しましょう。

Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する」にチェックを入れます。(すでにチェック済みかもしれません)

測定管理者間のデータ保護条項に同意します」にチェックを入れます

これらの設定が完了したら「プロジェクトを作成」ボタンを押します。

 


プロジェクトの作成が開始されます。

 


しばらく待つとプロジェクトの作成が完了しますので「次へ」ボタンを押します。

 

このような画面が表示されたらプロジェクトの作成は完了です。

 


アプリの追加

プロジェクトの作成が終わったら次にアプリの追加を行います。

アプリの追加といっても、ここではまだアプリの作成が完了してなくても大丈夫です。

Xcodeでアプリのプロジェクトさえ作っておけば問題ありません。

 

アプリの登録

Firabaseのプロジェクト画面から「iOSアプリにFirebaseを追加」を選択します。

 

すると以下のような画面が表示されます。

 

iOSバンドルID」にはXcodeに設定したプロジェクトの「Bundle Identifier」を指定します。

アプリのニックネーム」「App Store ID」は省略でOKです。

バンドルIDを入力後、「アプリを登録」ボタンを押します。

 

<バンドルID確認方法>

Xcodeのプロジェクトを開き、「ツリーのプロジェクト名」→「Generalタブ」→「TARGETSのプロジェクト名」→「Bundle Identifier」で確認できます。

 

設定ファイルのダウンロード

アプリの登録が終わったら以下のような画面が表示されます。

 

まず「GoogleService-Info.plistをダウンロード」ボタンを押します。

すると「GoogleService-Info.plist」というファイルがダウンロードフォルダにダウンロードされるので、Xcodeプロジェクトフォルダの任意の場所に移動させておきます。

移動は必須ではありませんが誤ってファイル削除などがないように退避します

移動を終えたら「次へ」ボタンを押します。

 

Firebase SDK の追加

 

こちらは後ほど設定するので今は気にしなくていいです。

次へ」ボタンを押します。

 

初期化コードの追加

 

こちらは「(C)広告を設置するプログラムを書く。(執筆中)」の記事でご紹介しますので、今は気にしなくていいです。

次へ」ボタンを押します。

 

アプリを実行してインストールを確認

 

こちらは特に何もせず「このステップをスキップ」を押します。

 

アプリ追加完了

 

このような画面が表示されればアプリの追加は完了です。

 

CocoaPodsの設定

先ほどのアプリの追加で後回しにした「Firebase SDK の追加」を行います。

 

CocoaPodsのインストール

CocoaPods」をインストールします。

すでにインストール済みの場合はこの手順をスキップしてください。

 

CocoaPodsとは、iOS/Mac向けのアプリ作成に便利なライブラリ管理ツールです。

このCocoaPodsを利用して広告用のライブラリを制御します。

 

まず「ターミナル」を起動します。

ターミナルは「アプリケーション」の「ユーティリティ」フォルダにあります。

 

上記「ターミナル」を選択すると、以下のような画面が開きます。

 

ターミナルを起動できたら、以下のコマンドを入力し、Enterキーを押して実行してください。

$ sudo gem install cocoapods

以下のようなログが出力されればインストール完了です。

Successfully installed cocoapods-1.5.3
Parsing documentation for cocoapods-1.5.3
Done installing documentation for cocoapods after 2 seconds
1 gem installed

 

Profileの作成

CocoaPodsがインストールできたら、次にCocoaPodsを制御するための「Profile」というファイルを作成します。

ターミナルにて、Xcodeプロジェクトフォルダ内の拡張子が「.xcodeproj」のファイルがある場所まで移動します。

 

私が実施している簡単な移動方法をご紹介します。

① Xcodeプロジェクトフォルダの拡張子が「.xcodeproj」のファイルがある場所を開く。

② ターミナルに「cd△」(△は半角スペース)を入力する。

③ ターミナルに拡張子が「.xcodeproj」のファイルをドラッグ&ドロップする。

④ ターミナルにファイルパスが追記されるので最後のファイル名を削除する。

⑤ Enterキーを押す。(これで移動完了)

⑥ うまく移動できたか確認のために「ls」と入力してEnterキーを押す。

⑦ コマンド結果に「.xcodeproj」があればうまく移動できた。

 

移動できたら、次にターミナルに以下のコマンドを入力し、Enterキーを押して実行してください。

$ pod init

すると、Xcodeプロジェクトフォルダの拡張子が「.xcodeproj」のファイルがある場所に「Podfile」というファイルが作成されます。

これでPodfileの作成は完了です。

なお、先ほど「pod init」を入力したターミナル画面は閉じないでください。

また後ほど使用します。

 

Podfileの修正

Podfileの作成が終わったら、次にPodfileの内容を修正します。

Xcodeプロジェクトフォルダ内のPodfileをダブルクリックして開きます。

バージョンによって多少異なりますが、初期状態だとこのようになっています。(TestAppはプロジェクト名)

 

この内容を次のように変更します。(変更点は2箇所

<1箇所目>

この行の先頭についてる「#△」(△は半角スペース)を削除します。

 

<2箇所目>

この行の下に「pod ‘Firebase/AdMob’」を追加します。

 

最終的にこのようになります。

 

修正が終わったら、テキストエディットのファイルメニューの保存を選択します。

これでPodfileの修正は完了です。

 

Podfileのインストール

Podfileの修正が終わったら、最後にPodfileのインストールを行います。

Podfileの作成で使用したターミナル画面に戻ります。

ターミナルに以下のコマンドを入力し、Enterキーを押して実行してください。

$ pod install

以下のようなログが表示されれば、Podfileのインストールは完了です。

Analyzing dependencies
Downloading dependencies
Installing Firebase (3.17.0)
Installing FirebaseAnalytics (3.9.0)
Installing FirebaseCore (3.6.0)
Installing FirebaseInstanceID (1.0.10)
Installing Google-Mobile-Ads-SDK (7.19.1)
Installing GoogleToolboxForMac (2.1.1)
Generating Pods project
Integrating client project
[!] Please close any current Xcode sessions and use TestApp.xcworkspace for this project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 6 total pods installed.

 


まとめ

いかがだったでしょうか?

今回は、iPhoneアプリへのバナー広告の貼り方(Firebase編)をご紹介しました。

広告を貼るためには以下の3つのことをしなくてはいけません。

(A)GoogleのFirebaseに登録する。

(B)アプリIDと広告ユニットIDを取得する。

(C)広告を設置するプログラムを書く。

この記事は(A)について記載したものです。

 

広告の設定は色々とやることがあって面倒ですよね。

でもアプリの収益化には必須の設定なので避けて通れません。

本記事では手順を細かくご紹介していますので少しでもご参考になれば幸いです。

あわせて読みたい
【Swift】初心者向け!iPhoneアプリに広告を貼る便利関数のご紹介 この記事では、SwiftでiPhoneアプリにAdMob広告をお手軽に設置できる便利な自作関数についてご紹介します。 すで...