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

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

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
この記事は、[Ionic Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ionicframework)の8日目の記事です。
[ionic](https://ionicframework.com/docs/)というフレームワークの中で、「**とりあえず広告バナーをつけて、収益化させる方法**」を紹介します。
広告の申請などは完了していることを前提としますが、この記事では申請についても軽く触れています。

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

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

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

<img width="1500" alt="52090474-94D4-4232-B922-6152207B9D07.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/240280/af602983-e7ec-4845-a360-abcd39c4e884.jpeg">

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

# 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`**のディレクトリの**`<body>`**タグの中に埋め込みます。
<img width="180" alt="スクリーンショット 2018-12-04 14.08.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/1b4f317e-c40c-8fd5-41db-1d2585f54b0b.png">

# Step③：バナーの重複を調整する
このままだと、以下のようにバナーが被ってしまいます。
<img width="400" alt="スクリーンショット 2018-12-04 14.12.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/b15b1026-f4cb-2a0f-f758-72dde6dd82d0.png">
そのため、「**バナーの高さ分の空白**を作っていきたい」と思います。

広告バナーをつけたい場所のhtmlファイルの先頭に以下のコードを追加し、改行（`<br>`）による空白を作ります。（例えば、`src` < `pages` < `home` < `home.html`の中など）

```home.html
<div class="HeaderAdSpace">
  <br>
</div>
```

続いて、この改行の高さをバナーの高さに合わせます。
ionicの中の**`src` < `theme` < `variables.scss`**を開きます。
<img width="180" alt="スクリーンショット 2018-12-04 14.29.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/08667927-ad40-2d14-fadb-897b21b3ebdf.png">
ここの一番最後の部分に次のコードを追加します。
（もしも320×100のバナーを指定した場合は100pxに設定。）

```variables.scss
.HeaderAdSpace{
  line-height: 50px;
}
```

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

<img width="400" alt="スクリーンショット 2018-12-07 12.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/8bf7535b-0eb1-43a5-c5e1-1d4d2d6ea6ee.png">

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

アプリ名：[【Smart Memo -Tab Style-】](https://itunes.apple.com/gb/app/smart-memo-tab-style/id1441934860?mt=8)
<img width="200" src="https://qiita-image-store.s3.amazonaws.com/0/240280/a77e311c-fa2f-f8b4-4f3b-d39b13261086.png">

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

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

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

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

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

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

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

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

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

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

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

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

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

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

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

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

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)