#1 はじめに
みなさんはじめまして。塚原卜伝と申します。
仕事ではC,C++,pythonを扱っています。
仕事の合間に外国人道案内ボランティア団体であるask me!での活動に参加しています。
ask me! HP : https://askme.ne.jp/
Twitter : https://twitter.com/askmeJAPAN
Facebook : https://www.facebook.com/weareaskme
Instagram ：https://www.instagram.com/we.are.askme/?hl=ja
2020年の3月にask me!での活動の効率化のためにAndroid&iOSアプリ(ask me! app)をリリースしました。
今回初めての個人開発で大変な所も多かったですが、楽しい所もありました。
今回は自分がどのように「ask me! app」を作っていったのかをまとめたいと思います。
#2 ask me!の活動紹介
ask me! appはask me!での活動がベースになって作られたものなので、まずは活動内容の説明をしたいと思います。
活動中は困っていそうな外国人に積極的に話しかけていき、彼らの困っている内容を聞き出します（例：おすすめの寿司のお店はどこ？など）。
外国人の方を目的地までご案内いたしますが、我々はプロではないので、あくまでも自分たちの知っている範囲でorGoogle やスマートフォンで調べて分かる範囲でお伝えしています。
#3 アプリを作成しようと思ったきっかけ
きっかけとしては２つあります。
一つ目は人数集計作業の簡素化のためです。
活動中に案内した方々の国籍や人数等は下記のシートに記入しています。
一番最後に活動で関わった人達の合計人数を大陸別に集計するのですが、この作業を簡素化することを目指しました。
２つ目は、活動中に撮影した写真を参加者の間で共有するツールが必要だったためです。
今までは参加者同士でLINEのアカウント交換をしてLINE上で写真の共有を行っていましたが、LINEに頼らなくても写真を共有できるツールが必要でした。
以上の２点からask me!のオリジナルのアプリを開発することにしました！
#4 UI
開発したアプリの主なUIを下記に示します。
①ログイン画面
②活動する前に参加者や今日の目標等を登録する画面
③統計シート入力画面
④案内した合計人数を確認できる画面
⑤サイドバーメニュ
⑥写真共有機能画面
#5 アプリの機能説明
①ログイン画面
ask me! appはask me!の活動参加者が使うことを想定していますので、一番最初にログイン画面を設けています。
②活動する前に参加者や本日の目標等を登録する画面
統計シートでは活動前に参加者の名前や本日の活動目標を記載していましたが、それをスマホアプリでも記入できるようにする画面です。
③統計シート入力画面
活動中に案内した外国人の国籍や人数を記入する画面です。
④案内した合計人数を確認できる画面
活動中に案内した人数一覧を確認できる画面です。
⑤サイドバーメニュ
ask me!のHPやSNSおよび写真共有機能画面へのリンクを貼っています。
⑥写真共有機能画面
活動中に撮影した写真はこの画面で参加者と共有します。
#6 技術選定
ask me! app作成にはFlutterを利用しました。理由は同じソースコードでiOSとAndroidの開発が同時にできるからです。
バックエンドにはFirebaseを利用しました。
#7 技術習得方法
私はFlutter初心者だったため、まずは本で勉強しました。Flutterに関する本は少ないのですが、下記の本で勉強しました。
Android/iOSクロス開発フレームワーク：https://books.rakuten.co.jp/rk/8f657c363ada3ef9bd62b9abafc2fa28/
全部読んでいると非常に時間がかかるので、最初の２章までを読みました。２章までを読むだけでも、基本的な内容はわかると思います。
なお、Flutterで分からないことを知らべる際は英語の記事が多いので、英単語を入力して調べるといいとおもいます。
実現したい機能を英語で入力するとサンプルコードが出てくるのでそれを見て勉強していました。
（例：写真共有機能なら「Flutter photo share」で検索してみる、など）
#8 まとめ
今回はask me! appの簡単な紹介をさせていただきました。
次回以降は各画面についてソースコード例と共にどのように実装したのかを記載したいと思います。
また、興味があれば読んでいただけると幸いです（次回は８月下旬に投稿予定です）。
アプリは下記から
Android: https://play.google.com/store/apps/details?id=com.askme.flutter_app4
iOS : https://apps.apple.com/us/app/ask-me/id1481671421?l=ja&ls=1