F@N Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・nex8・viidleのエンジニア・技術ブログ

IT用語辞典アプリの作成とnendSDKによる広告表示

こんにちは、はじめまして。

8月6日から8月10日の1週間、ファンコミュニケーションズさんでインターンに参加しました、ししどです。

このインターンでの活動について綴ろうと思います。

なぜ、インターンに参加することになったか

 6月の中旬に東京で行われた「逆求人フェスティバル」に参加しました。
就職活動サイト[逆求人ナビ] 就活セミナー 2021年卒,2020年卒,2019年卒,2018年卒, 就職活動 逆求人フェスティバル

 そこで、ファンコミュニケーションズの社員の方とお会いしました。ファンコミュニケーションズさんの名前は知らなかったのですが、nendというサービスがあることは知っていました。社員の方からお話をきき、nendSDKを導入するインターンを行うことを知りました。

 私はもともと、スマートフォンアプリを趣味で作っていたのでこのインターンに非常に興味を持ちました。

 後日インターンの詳細メールを頂き、参加することを決めました。
 特別選考枠に合格したため、交通費や宿泊費等の補助が出、遠方住みの私には非常にありがたいお話でした。

インターンで何をしたのか

 大まかにやったことはこの3つです。

  • 作成済みのiOSアプリにnendSDKを導入、ネイティブ広告を表示
  • IT用語辞典アプリを新規作成
  • IT用語辞典アプリにnendSDKを導入、ネイティブ広告を表示

 以下は各日の詳細です。

1日目

 午前中はアドネットワークに関する大まかな仕組みについて教えて頂いた後、1週間の課題を設定しました。

 午後は自分が作ったiOSアプリにnendSDKを導入しました。バナー広告は既にこのアプリに実装していたので、動画ネイティブ広告をリストの一番上に表示される様にしました。

f:id:fan_t_shishido:20180810155718p:plain

2日目

 iOSアプリへのnendSDKの導入の残り作業を少しやった後、新たに作成するAndroidアプリの仕様を確認しました。新たにアプリを作るアイディアは特に持っていなかったので、社員の方が事前に考えておられたものを作ることになりました。IT用語の一覧が閲覧できるというアプリで、最低限実装する内容は以下の様な感じです。

  • WikipediaのAPIを使って「プログラミング用語一覧」を取得、リスト表示
  • リストの用語をタップ → WebViewの画面に遷移して詳細を表示
  • nendSDKを使って広告を組み込み

 これ以外にも単語のお気に入り機能など、付加機能をいくつか考えていましたが、期間的に実装できる量は限られるので、余裕があればやることにしました。Androidアプリを作成するための言語はKotlinを選びました。JavaでAndroidアプリを作成したことはあって、Kotlinも少し触ったことはあったので、せっかくなので新しい方のKotlinで作ることにしました。

 この日に出来たのは、プロジェクトの作成と使用するライブラリ等の導入、Wikipediaからプログラミング用語一覧をJSONで取得することでした。

 まだ、使ったことのないアーキテクチャを利用してみてはと、社員の方から参考文献やこんな技術があるというのを教えて頂きました。リアクティブプログラミングやDataBindingなど、目を通してみましたが、自分の技量ではすぐに開発に利用するのが難しいと思ったので、とりあえず、やったことのあるやり方で実装しました。余裕があれば、新しいアーキテクチャも取り入れたいと思いました。

3日目

 Wikipediaから取得したプログラミング用語一覧はJSONで取得した後、パースする必要がありました。スクレイピングは上記のiOSアプリでも利用していたので、特に戸惑うことはなかったです。あとは、ListViewに取得した用語一覧を表示して、用語の詳細を表示するWebViewを作成しました。用語一覧と詳細の画面はどちらもフラグメントとして作成したのですが、遷移の処理がうまく出来なかったので、アドバイス頂いた結果、詳細画面はActivityとして発行することに決めたところで、3日目が終わりました。

4日目

 詳細画面をアクティビティとして発行させて遷移するように実装しました。用語を選択すると、その用語のWikipediaのページが表示されるようになりました。あとは、1日目にやったのと同じようにnendSDKを導入して、用語一覧の一番上の行にネイティブ広告が表示されるようにしました。あとは、細かなところだと、用語一覧をあかさたなでセクション分けされるように処理を追加しました。

5日目

 用語一覧のセクションヘッダやタブの色、行の間隔などデザインの調整を軽く行って、アプリの実装作業としては終了にしました。
 残った午後の時間は1週間のフィードバックと今後についてお話ししたあと、この記事を作成しました。
 
 最終的に出来上がったアプリのスクリーンショットです。

f:id:fan_t_shishido:20180810170228p:plain
f:id:fan_t_shishido:20180810170236p:plain

感想、所感

 1週間、非常にあっという間でした。メンターとして面倒を見てくださった福岡さん、他社員の皆さんありがとうございました。自由に自分のやり方で作業を進めることができたので、とても居心地の良い空間でした。ランチにも毎度誘って頂き、お話ができたのでとても楽しかったです。nendSDKを実際に組み込むことで、どのようにして広告をアプリにあった形で表示するかを知ることができました。1週間の作業としてはいくつか心残りもありますが、インターンに参加できたことをとても感謝しています。