10秒のコーディングで収益化する方法【Ionic】

はじめまして、ますみです！

はじめに

この記事は、Ionic Advent Calendar 2018の8日目の記事です。
ionicというフレームワークの中で、「とりあえず広告バナーをつけて、収益化させる方法」を紹介します。
広告の申請などは完了していることを前提としますが、この記事では申請についても軽く触れています。

Step①：nendの登録

まずは、nendへの登録を行います。
URL：https://www.nend.net/mediapartner

ここでの説明は省略しますが、大まかに説明すると、
① アカウントの作成
② 新規サイト/アプリの作成
③ 広告枠の作成

この時、広告枠は、**静止画 < バナー < インライン（ヘッダー） < 320×50**というように作成してください。

より具体的な手順は以下のサイトが参考になるかもしれません。
URL：【スマートフォン広告】Nend（ネンド）の登録～設置方法までを徹底解説

Step②：JSタグをIonicに組み込む

nendの中の、**アプリ < 広告 < 広告コード**から、以下のような広告コード（JSタグ）を取得します。

AdCodeSample.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の中など）

home.html

<div class="HeaderAdSpace">
  <br>
</div>

続いて、この改行の高さをバナーの高さに合わせます。
ionicの中の**src < theme < variables.scss**を開きます。

ここの一番最後の部分に次のコードを追加します。
（もしも320×100のバナーを指定した場合は100pxに設定。）

variables.scss

.HeaderAdSpace{
  line-height: 50px;
}

実際に書くコードは以上です！
以下のように、表示されれば成功です！

以上のコンテンツを実装すると、以下のアプリ(v1.4.1)のように表示されます。
もしよろしければご覧くださいm(_ _)m

アプリ名：【Smart Memo -Tab Style-】

最後に

最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

問い合わせフォームはこちら

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（詳しくはこちら）

1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。

おまけ

エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑（職種20選）」のPDFをお送りします◎