はじめまして、ますみです！
はじめに
この記事は、Ionic Advent Calendar 2018の8日目の記事です。
ionicというフレームワークの中で、「とりあえず広告バナーをつけて、収益化させる方法」を紹介します。
広告の申請などは完了していることを前提としますが、この記事では申請についても軽く触れています。
Step①：nendの登録
まずは、nendへの登録を行います。
URL：https://www.nend.net/mediapartner
ここでの説明は省略しますが、大まかに説明すると、
① アカウントの作成
② 新規サイト/アプリの作成
③ 広告枠の作成
この時、広告枠は、**静止画 < バナー < インライン（ヘッダー） < 320×50**というように作成してください。
より具体的な手順は以下のサイトが参考になるかもしれません。
URL：【スマートフォン広告】Nend（ネンド）の登録～設置方法までを徹底解説
Step②：JSタグをIonicに組み込む
nendの中の、**アプリ < 広告 < 広告コード**から、以下のような広告コード（JSタグ）を取得します。
<script type="text/javascript">
var nend_params = {"media":12345,"site":123456,"spot":123456,"type":1,"oriented":2};
</script>
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
次に、そのJSコードをionicの中の**src < `index.html`**のディレクトリの**`
Step③：バナーの重複を調整する
このままだと、以下のようにバナーが被ってしまいます。
そのため、「バナーの高さ分の空白を作っていきたい」と思います。
広告バナーをつけたい場所のhtmlファイルの先頭に以下のコードを追加し、改行（<br>）による空白を作ります。（例えば、src < pages < home < home.htmlの中など）
<div class="HeaderAdSpace">
<br>
</div>
続いて、この改行の高さをバナーの高さに合わせます。
ionicの中の**src < theme < variables.scss**を開きます。
ここの一番最後の部分に次のコードを追加します。
（もしも320×100のバナーを指定した場合は100pxに設定。）
.HeaderAdSpace{
line-height: 50px;
}
実際に書くコードは以上です！
以下のように、表示されれば成功です！
以上のコンテンツを実装すると、以下のアプリ(v1.4.1)のように表示されます。
もしよろしければご覧くださいm(_ _)m
最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？
この記事を通して、少しでもあなたの学びに役立てば幸いです！
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。
もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。
info*galirage.com（*を@に変えてご送付ください）
🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。
Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN
※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。
【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（詳しくはこちら）
- 受託開発（例：生成AIを使った社内システムの開発）
- コンサルティング（例：技術戦略のアドバイス）
- 講演（例：社内研修、イベント登壇）
※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。
【これまでの相談事例】
以下のようなご相談が多くあります。
🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉
「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）
とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！
友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑（職種20選）」のPDFをお送りします◎
