F@N Ad-Tech Blog

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

1週間でFlutterを使ってアプリ開発させていただいた話

こんにちは。初めまして。
9月3日〜9月7日までの5日間で1週間インターンでお世話になりました澤です。

1週間のインターンの内容を紹介させていただきます。

F@Nにたどり着くまで

何社もインターンに応募しましたが、実力不足でなかなか決まらずに焦っていた矢先
偶然、WantedlyでF@Nの募集サイトを見つけ応募させていただきました。
運よく拾っていただいたので非常に感謝しています。

1日目

入社書類をたくさん書いた後、アドネットワークとは何かの説明を受けました。
今まで、何気なくアプリなどの広告を見ていましたが、裏ではこんなドラマがあるのかと非常に感動しました。
アドネットワークの世界は奥が深いのだと感じました。 

今回私は、nendSDKのチームにお世話になりました。
1日目は、nendSDKを理解するために、簡単な時計アプリを作成しました。
公式ドキュメントが充実しており、短時間で非常に簡単に広告を埋め込むことができて、感動しました。

 f:id:fan_k_sawa:20180907143901p:plain

今後アプリを開発した時は、是非とも広告を入れてみたいです。

2日目〜5日目

さて、ここからが本題です。
今回、定期テストの範囲を共有できるアプリをFlutterとFirebaseを使って作成しました。
 

Flutterとは?

Googleがオープンソースとして提供しているクロスプラットフォーム開発ツールです。
簡単に言えば、1つのコードで、iOS、Android両方のアプリを作れちゃう優れものです。
開発言語は、Dartという言語を使います。
僕の感想としては、Javaに似ている印象です。

Firebaseとは?

こちらもGoogleが提供しているモバイルアプリ開発のためのプラットホームです。
通常実装しようと思うと手間と時間がかかるユーザ認証やデータアクセス管理などを
簡単に実装することができる優れものです。
今回のアプリでは、リアルタイムデータベースを使用しました。
文字通りリアルタイムにデータベースを更新できるので、非常に便利でした。

2日目

テスト範囲共有アプリの大まかな構造とデザインを決めました。
Flutterとは何かということから、調べながら進めていきます。
また、FlutterとFirebaseの導入もしました。
FlutterもFirebaseもやらなければならない設定が多くて大変でした。
初めてのFlutterでのアプリ開発で慣れないことだらけでしたが、徐々にDartの作法などに慣れていきたいと思いました。

3日目

若干デザインを変更しつつ、
Firebaseを用いてテスト範囲を共有できる簡単なチャットのような機能を実装しました。
FirebaseとFlutterの連携は難しかったですが、様々なサイトを参考にしながら進めていきました。
また、この日はAndroidのエミュレータだけでなく実機でも正常に動かすことができました。
Dartに触れるのが初めてなのですが、Dartの作法などがJavaとは少し違い悪戦苦闘しました。
ドキュメントなどで調べながら慣れていきたいと思います。

4日目

アプリケーションのUIの細かな修正を入れつつ、全科目に対応できるよう機能拡張しました。
また、iOSのエミュレータでも動作することを確認しました。
今までAndroidのみでデバッグしてきましたが、iOSでも同じものが簡単に動きクロスプラットホーム開発の凄さを実感しました。
Flutterってすごい!
ただ、前日同様、Dart言語の作法に悪戦苦闘し、多くの時間をかけてしまいました。

5日目

複数科目のテストに対応できるように機能拡張し、科目詳細を表示できるようにしました。
また、テスト範囲共有ページで、一度投稿したものを編集できるようにもしました。
Flutterは、日本語の文献が少なく悪戦苦闘しましたが、無事編集もできるようになって嬉しかったです。

5日間で作ったアプリ

以下のようなリアルタイムでテスト範囲の共有ができるアプリを作りました。
5日間で、一通りの機能をつけることができました。iOSでもAndroidでも動きます。

まず、アプリを開くと、どの時期のテストなのかを聞かれます。
 f:id:fan_k_sawa:20180907181048p:plain

その後いくつかのステップを踏んで、科目一覧が表示されます。
 f:id:fan_k_sawa:20180907181213p:plain

科目を選ぶと、チャット形式で試験範囲や科目の情報を共有することができます。
 f:id:fan_k_sawa:20180907181604p:plain

コメントをタップすると編集画面になり、編集を行うことができます。
 f:id:fan_k_sawa:20180907182139p:plain

やり残したこと

投稿の削除機能の追加

編集はできるけど、削除はできないので、今後追加していきたいです。

日本語の表示がおかしくなる

Android、iOSで実行すると文字が中国語っぽくなってしまいます。
Flutterの仕様のようなので、改善されるのを待ちます。

ログイン機能の追加

現在は、誰でも読み書き可能な設定にしているので、セキュリティ的に問題が残ります。
Firebaseを使って簡単に実装できるそうなので、今後実装してみたいです。

などなど更に実装を進めていきたいです。

まとめ

今回のインターンでは、初めて一からアプリ開発を行いました。
インターン前はとても不安でしたが、1週間やり遂げることができてよかったです。

自分のやりたいことを比較的自由にやらせていただいたので、非常に感謝しています。

メンターの方には、Flutterを使った開発を行なったことがないにも関わらず、
Flutterでの開発を勧めてくださったり、レビューまでしていただいて感謝の気持ちでいっぱいです。
質問にも的確に答えてくださり、開発を効率よく進めることができました。
nendSDKが使えないアプリになってしまい申し訳ないです。

社員さんも皆優しく接してくださり、非常に居心地がよかったです。

F@Nのインターンに応募するか迷っているあなた、ぜひ応募することをおすすめします。

5日間という短い期間でしたが、ありがとうございました。