こんにちは、コン(@pippi_kon)です。
SwiftでiPhoneアプリにバナー広告を貼るためには以下の3つのことをしなくてはいけません。
- GoogleのFirebaseに登録する。
- アプリIDと広告ユニットIDを取得する。
- 広告を設置するプログラムを書く。
今回は①のGoogleのFirebaseに登録する方法をご紹介します。
設定する前に
本記事内容は、基本的なプロジェクトである「Simple View App」で作成した環境を基にしています。
環境の作成方法は以下の記事をご覧ください。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/06/150415342006_TP_V.jpg?resize=320%2C180&ssl=1)
Firebaseプロジェクトの作成
それではFirebaseの設定をしていきましょう。
まずはFirebaseのプロジェクトを作成します。
Firebase Console(https://console.firebase.google.com)にアクセスし、Googleアカウントでログインしてください。
ログインしたら以下の画面が表示されるので「プロジェクトを追加」を選択します。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_21_25_35.png?resize=2246%2C1628&ssl=1)
すると以下の画面が表示されます。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_21_42_21.png?resize=500%2C688&ssl=1)
「プロジェクト名」に任意のプロジェクト名を指定します。
「プロジェクトID」は自動で設定されるので気にしなくていいです。
「国/地域」は日本を選択しましょう。
「Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する」にチェックを入れます。(すでにチェック済みかもしれません)
「測定管理者間のデータ保護条項に同意します」にチェックを入れます。
これらの設定が完了したら「プロジェクトを作成」ボタンを押します。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット-2018-05-26-21.42.47.png?resize=500%2C451&ssl=1)
プロジェクトの作成が開始されます。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット-2018-05-26-21.42.57.png?resize=500%2C458&ssl=1)
しばらく待つとプロジェクトの作成が完了しますので「次へ」ボタンを押します。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_22_02_18.png?resize=2252%2C1614&ssl=1)
このような画面が表示されたらプロジェクトの作成は完了です。
アプリの追加
プロジェクトの作成が終わったら次にアプリの追加を行います。
アプリの追加といっても、ここではまだアプリの作成が完了してなくても大丈夫です。
Xcodeでアプリのプロジェクトさえ作っておけば問題ありません。
アプリの登録
Firabaseのプロジェクト画面から「iOSアプリにFirebaseを追加」を選択します。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_22_02_18b.png?resize=2252%2C1614&ssl=1)
すると以下のような画面が表示されます。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_09_44.png?resize=2188%2C1586&ssl=1)
「iOSバンドルID」にはXcodeに設定したプロジェクトの「Bundle Identifier」を指定します。
「アプリのニックネーム」「App Store ID」は省略でOKです。
バンドルIDを入力後、「アプリを登録」ボタンを押します。
<バンドルID確認方法>
Xcodeのプロジェクトを開き、「ツリーのプロジェクト名」→「Generalタブ」→「TARGETSのプロジェクト名」→「Bundle Identifier」で確認できます。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_14_55_59c.png?resize=2218%2C1510&ssl=1)
設定ファイルのダウンロード
アプリの登録が終わったら以下のような画面が表示されます。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_29_39.png?resize=2020%2C1618&ssl=1)
まず「GoogleService-Info.plistをダウンロード」ボタンを押します。
すると「GoogleService-Info.plist」というファイルがダウンロードフォルダにダウンロードされるので、Xcodeプロジェクトフォルダの任意の場所に移動させておきます。
(移動は必須ではありませんが誤ってファイル削除などがないように退避します)
移動を終えたら「次へ」ボタンを押します。
Firebase SDK の追加
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_46_20.png?resize=2090%2C1606&ssl=1)
こちらは後ほど設定するので今は気にしなくていいです。
「次へ」ボタンを押します。
初期化コードの追加
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_46_38.png?resize=2050%2C1614&ssl=1)
こちらは「広告を設置するプログラムを書く」の記事でご紹介しますので、今は気にしなくていいです。
「次へ」ボタンを押します。
アプリを実行してインストールを確認
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_45_33.png?resize=2070%2C1600&ssl=1)
こちらは特に何もせず「このステップをスキップ」を押します。
アプリ追加完了
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-26_23_57_54.png?resize=2246%2C1644&ssl=1)
このような画面が表示されればアプリの追加は完了です。
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」があればうまく移動できた。
![](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/スクリーンショット_2018-05-27_1_33_41b.png?resize=2024%2C1300&ssl=1)
移動できたら、次にターミナルに以下のコマンドを入力し、Enterキーを押して実行してください。
$ pod init
すると、Xcodeプロジェクトフォルダの拡張子が「.xcodeproj」のファイルがある場所に「Podfile」というファイルが作成されます。
これでPodfileの作成は完了です。
なお、先ほど「pod init」を入力したターミナル画面は閉じないでください。
また後ほど使用します。
Podfileの修正
Podfileの作成が終わったら、次にPodfileの内容を修正します。
Xcodeプロジェクトフォルダ内のPodfileをダブルクリックして開きます。
バージョンによって多少異なりますが、初期状態だとこのようになっています。(TestAppはプロジェクト名)
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp end
この内容を次のように変更します。(変更点は2箇所)
<1箇所目>
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp end
この行の先頭についてる「#△」(△は半角スペース)を削除します。
# Uncomment the next line to define a global platform for your project platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp pod 'Firebase/AdMob' end
<2箇所目>
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp end
この行の下に「pod ‘Firebase/AdMob’」を追加します。
# Uncomment the next line to define a global platform for your project platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp pod 'Firebase/AdMob' end
最終的にこのようになります。
# Uncomment the next line to define a global platform for your project platform :ios, '9.0' target 'TestApp' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for TestApp pod 'Firebase/AdMob' end
修正が終わったら、テキストエディットのファイルメニューの保存を選択します。
これで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つのことをしなくてはいけません。
- GoogleのFirebaseに登録する。
- アプリIDと広告ユニットIDを取得する。
- 広告を設置するプログラムを書く。
この記事は(A)について記載したものです。
広告の設定は色々とやることがあって面倒ですよね。
でもアプリの収益化には必須の設定なので避けて通れません。
本記事では手順を細かくご紹介していますので少しでもご参考になれば幸いです。
![初心者向け!Swift入門にオススメの参考書_サムネ](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/05/初心者向け!Swift入門にオススメの参考書_サムネ.jpg?resize=320%2C180&ssl=1)
![無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ](https://i0.wp.com/pippi-pro.com/wp-content/uploads/2018/08/無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ.jpg?resize=320%2C180&ssl=1)