『初めてのスマホアプリ開発 24hチャレンジ』結果報告

この記事は、[Android #2 Advent Calender 2020](https://qiita.com/advent-calendar/2020/android-2) 16日目の記事です。

また、同日に[こちらのイベント](https://rakus.connpass.com/event/195026/)で、この記事をLTサイズにまとめたスライドを使用した発表を行います。

# そうだ、アプリを作ろう ※未経験

ある秋の夜、ふと思い立ちました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">よーし！今から１日でダイエット用のスマホアプリを作るぞぉ！！</p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304432644831158272?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


この時、これからダイエットに励むことは確定事項でした。
その為、そのダイエットで出てくる色々な情報を管理できるアプリを作ってみよう、そう思い立ったのです。

※ダイエット関連のまとめは[エンジニアライフ(別サイト)のコラム『コレざま』](https://el.jibun.atmarkit.co.jp/korezama/2020/12/korezama0068.html)に掲載中

この記事では、その時にやったアレコレを、Twitterに投稿した内容に情報を補足する形で追っていきます。

ベストプラクティスだったり、入門だったりの役に立つものでは有りません。
ただの失敗の記録です。

# アプリ？そんなのヨユーっしょ！！

> 白栁は思い立った。
必ず、かのダイエットアプリを制作せねばならぬと決意した。
白栁にはスマホアプリ開発がわからぬ。
白栁はは、SESの底辺エンジニアである。
Windowsを使い、VisualStudioで開発して来た。
けれども技術に対しては、人一倍に敏感であった。
きょう深夜白栁はAndroidStudioをインストールし、Googleを問い詰め、未経験のはAndroid開発の入り口にやって来た。

ということで開発をスタートしたわけです。
太宰治の名作「走れメロス」の冒頭調に紹介しましたが、普段はVisualStudioでWindows向けの業務システムを作ってます。※GUIはWinFormです。
スマホアプリは全く分かりません。

ただそれでも、Androidスタジオのインストールだけなら、数年ぶりn度目です！（キリッ

そして、業務システムとはいえ、幾つかのシステムをゼロから作った経験もある。
**もう負ける姿は見えないねっ！！（フラグ**

# 初めに計画をしよう

仕事でもプライベートでも、まずやることは一緒です。
「何を作るかを明確にすること」です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">必要機能の書き出しも充分！<br>これでもう何も怖くないッ！！<br>既に二次開発の予定まで入ってしまっているとは… <a href="https://t.co/4moPp7nh1a">pic.twitter.com/4moPp7nh1a</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304442275766779905?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

ということで、30分程で作成した資料は、以下にアップされています。
この時点で、必要そうな技術的な情報の下調べまでを終わらせています。
※参考資料のページは消しました。

[![thumbnail](https://files.speakerdeck.com/presentations/0ba19607a5f043e387be5c9dc413ae09/slide_0.jpg)](https://speakerdeck.com/shirayanagiryuji/daietutoyong-apurizuo-cheng-ji-hua)

[ダイエット用アプリ作成計画 - SpeakerDeck](https://speakerdeck.com/shirayanagiryuji/daietutoyong-apurizuo-cheng-ji-hua)

この計画を指標に、以後の開発を進めていくことにしました。

# 開発環境を作ろう

実際に開発を行うにしても、環境がない状況では何も始まりません。

[Android Studioのインストールと日本語化(3.0日本語化手順追記) - FIDS CREATE](https://fidscreate.com/tool/android-studio)
上記のページを参考にして、インストールと日本語化を進めました。

若干手間取りましたが、情報通りに進めることで無事にインストールを完了しました。
ただ、Cドライブに余り情報を入れたくない性分なので、以下の設定でちょっとミスをしたな、と感じています。
今回は「だからこうすればいい」という解決策もありません。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">しっかり日本語化もしよう！<br>インストール時にconfig関係のフォルダ設定を間違ってしまった気がしてる… <a href="https://t.co/Tli554uCkO">pic.twitter.com/Tli554uCkO</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304446321156268033?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# AndroidStudioを触ってみる＆仮想デバイスの作成

しっかり日本語されている事を確認しながら、適当にプロジェクトを作成します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初めてのAndroidプロジェクト…<br>ドキドキである<br><br>しかし、アレだな<br>アクティビティの種類が豊富過ぎて、これだけで何でも作れそうな気になってくる<br>（まずは参考資料通りに…） <a href="https://t.co/lnscFUoCcf">pic.twitter.com/lnscFUoCcf</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304450664743854080?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

適当なアクティビティを作成して、エミューレータの作成に入ります。
ここで設定が間違っていたら、最初からプロジェクトを作り直せばいいんだ、そう考えて進んでいます。

[Android StudioでAndroidアプリのエミュレータを使う方法【初心者向け】 - TECH ACADEMY マガジン](https://techacademy.jp/magazine/2396)

[Kotlinで始めるAndroidアプリ入門（前編） - @k-ysd - Qiita](https://qiita.com/k-ysd/items/4efdecdfd60afe333a3a)

これらのページを参考にしながら、設定を進めます。
Androidはバージョンや画面サイズの種類も多く、どの環境を選んで作成すればいいのか、ベストプラクティスがわかりません。

とりあえず、自分が使っている環境を…と思ったのですが、プリセットには入っていませんでした。
OSバージョンの設定も、使う予定の最新スマホではなく、今は使ってない古いスマホに合わせています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえず、なんとか仮想デバイス作成にたどり着けたぞ！<br>イメージの一覧にOPPOA3がなかったので、FullHDサイズ縦のPixel2を選んでみた<br>AndroidOSのバージョンは…適当に10でいいだろ？<br>だって、自分が使えればいいんだもの！<br>（といいつつ、手持ちの最古OSである7.1.1に合わせるチキンプレイ） <a href="https://t.co/GAAYMnAnTX">pic.twitter.com/GAAYMnAnTX</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304457687539752961?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# エミュレータ、永遠に遊べる

エミューレータの中にはしっかりとAndroidが入ってます。
なので、環境設定したり色々してると、これだけでマジで遊べすぎます。

程々（1時間）で見切りをつけて、初めてのアプリ制作へ突入。
トラブルに悩まされつつ、Git入れたりしつつ（省略）2時間ぐらいかけてようやく動くものができる。

参考にしたのは設定でもお世話になった記事の中編と後編。

[Kotlinで始めるAndroidアプリ入門（中編） - @k-ysd - Qiita](https://qiita.com/k-ysd/items/f428072e9b5db9285cf3)

[Kotlinで始めるAndroidアプリ入門（後編） - @k-ysd - Qiita](https://qiita.com/k-ysd/items/48aaf6de44e878c87c13)

基本はこれに沿って色々配置しただけ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初めてのスマホアプリができたよ！<br>ボタンの位置が変なのはご愛嬌ということで…（遠い目 <a href="https://t.co/WGXByDs9tP">pic.twitter.com/WGXByDs9tP</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304491971566645248?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

流石にここら辺で活動限界を迎えた為（午前3時半）一旦睡眠を取る。
流石に眠くて頭回らなくなったらダメですからね。

# メニューGUIを作る

7時間程寝てスッキリ！
具体的な画面づくりを始めるに当たり、まずはメニュー作成から。

たまにお世話になっているフリー素材サイトからそれっぽいアイコンをダウンロード。

[ICOON MONO](https://icooon-mono.com/)

ただ、これをプロジェクトに取り込もうとすると、うまく出来ない。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます🌅<br>作業を再開します<br><br>メニュー用のフリー素材アイコンを画像として使うのにドハマリした<br>分かったこと：日本語名の画像は使えない <a href="https://t.co/dG8Av71LXA">pic.twitter.com/dG8Av71LXA</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304594515777318912?ref_src=twsrc%5Etfw">September 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

ドハマリすること30分以上。
**日本語名ファイルだとリソースとして取り込めない**っぽい。
ナンジャソレ！

そこから4時間ぐらい掛けて、なんとかメニューのレイアウトが形になる。
コントロールの相対位置の設定で、どうにも思い通りに設定ができなかったのだ。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">レイアウトに四苦八苦して、進捗報告止まってた<br>大分できてきた感あるよね？ <a href="https://t.co/mxnPT7VB3y">pic.twitter.com/mxnPT7VB3y</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304659784344322052?ref_src=twsrc%5Etfw">September 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

この時点で開始から14時間。
でもまだ、ちょっと登録画面作るぐらいなら今日中にイケるって！

# 遷移先の画面を追加しよう

登録画面は、いちばん重要な「食事登録」の画面から作る。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なるほど。２つ目の定義（ハイライト部分）があるのが原因だったか！<br>よしよし、これで食事登録が進められるぞ <a href="https://t.co/70IddF6Uks">pic.twitter.com/70IddF6Uks</a></p>&mdash; 白栁隆司@エンジニアカウンセラー (@ShirayanagiRyuj) <a href="https://twitter.com/ShirayanagiRyuj/status/1304661533549502464?ref_src=twsrc%5Etfw">September 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

だが、プロジェクトに新しい画面を追加した所、今まで表示されていた画面が表示されなくなってしまった。

ローカルなGitで、メニュー作成完了時点でコミットしていた為、差分を見ながら原因となりそうな箇所を特定していく。

正確な意味は調べていないが、恐らく「起動時に使用する画面」という設定が2箇所（L13～17、L25～29）あるのが問題なのだろう。
後書き優先ということか。

# 方針転換：体重登録が先！

もう少し簡単に、HTMLや、VisualStudioのWPFの様にGUI画面が作れると予想していた。
だがしかし、初めて体当たりで扱うには、AndroidStudioのGUI画面作成のハードルは高かった。

食事登録画面でやろうとしたことは２つ

- 日時と食事内容のフリー入力
- 写真も登録出来るようにする
- 一覧表示と登録の画面遷移

残念ながら、これらを実現する為の良い資料が見つからなかった。
そもそも、**一覧の作り方判らねぇっ！！**

ということで、画面難易度が低い体重登録画面を先に作ることにした。

運良く、画面イメージのレイアウトを解説しているページを見つけることができた。

[ScrollViewでAndroidアプリの画面スクロールを実現させる - RAKUSU Developer Blog](https://tech-blog.rakus.co.jp/entry/20190108/android-application/scrollview)

この通りに実装して、画面っぽいガワはできた。


ただ、どうしても日付の自動入力や数値項目の書式設定がうまく出来ない。
仕方がない、使うのはどうせ自分だけ。
「その辺りの面倒は運用でカバー！」と割り切って進めることにする。

そして最大の問題に直面する。

# DBの選定に大失敗する！

ファイル書込みでもローカルDBでも良いのだが。
ここまで来て、データを保存する仕組み、というのが全く実装できていなかった。
後々、表にしたりする事を考えれば、ローカルDBが好ましいだろう。
適当なフリーのDBが、DAO通して簡単に使えるだろう、その程度に考えていた。

今考えれば、MariaDBを利用するのが、一番手っ取り早かったかもしれない。
PHPで使っていた経験もあるからだ。

だが、このときはその頭がなかった。
色々なサイトを当たってみて「AndroidのローカルDBにはRealmが流行ってるらしい」という情報を掴んだ為、Realm以外の選択肢が無くなっていた。

Javaの資料も公式から豊富に出ているっぽいし、とりあえず大丈夫だろう。
そう考えての見切り発車だったが、その後激しく後悔することになる。
このRealm、公式サイトのKotlinの最新ドキュメントが存在しないっぽい。
Javaは最新版の10.0.0に対応している（当時）のだが、
Kotlinは7.0.0-bataだからだ。
それは、今もって変わっていない。

DBのインストールはできたが、どうやってデータを格納する入れ物を作るのか。
それはテーブル定義が必要なのか？
何らかのデータを流し込めばいいだけなのか？
全くわからないまま、ここで時間切れを迎えた。

# まとめ：失敗の原因

こうしてチャレンジは失敗に終わった。
失敗も失敗。大失敗である。

最後に、その失敗の要因を、幾つか分析してみよう。

## 1. 体系立てた情報を使わなかった

最初にアプリを作るなら、体系立てて手順が書かれている、最新のバージョンに対応した入門書に沿った方が良かったのだろう。
残念ながら、思い立ったのが深夜で本もなにもない。
**「ある程度の開発経験があるから、ネット上の断片的な情報でも組み合わせて、うまく乗り越えられ楼だろう」**
この考えが甘かったと思い知らされる。


## 2. 写経で作るファーストアプリを軽んじた

入門書であれば、最初に簡単な要素を適度に詰め込まれたアプリを写経する。
こういうのを無視して、いきなり自分のやりたいアプリを組み立てた事は、悪いプラクティスだ。
その開発環境に対するノウハウがないのだから、失敗しながら覚えていくしかない。
ただ、正解も判らず無闇に失敗するのは、徒労でしか無い。

また、最初に写経したアプリは、色々と設定を弄ることにより、仕組みの理解にも役立つ。
しっかりと学ぶのであれば、これを軽んじてはいけない。
とりあえず、まずは写経なのだ。

## 3. 入力系の設定が判らなかった

これは、上記の写経を怠ったことに付随するものだ。
世の中、入力エリアはフリーテキストばかりではない。
情報を入力する為のルールというのは、必ず設定できる。

うまく調べることが出来なかった、というのも大きな敗因だ。
しかし、これは僕の能力不足なだけでもある。

## 4. Kotlin使ってない

いや、**実際使ってない**。
記事のタグに入ってるけど、本文で1行も触れてない！
タグ詐欺と言われても仕方がないレベル。

## 5. DBわからん

Androidのアプリ上で、ローカルな情報管理をする場合に、どう保持するのがベストなのか、結局全くわからなかった。
後々で考えれば、MariaDBを利用するという手段もあっただろう。
幸い、MariaDBであれば、以前触った経験もある。
もう少し楽に導入できたかもしれない。
ただ、Realmを知って、**冒険してみたかった**だけなんだろう。

## 6. 豊富なActivity設定を活かせない

これは完全な知識不足だ。
何処を見れば、これらの効果的な使い方がわかるのか？すら調べていないのだが。

だが、これらのActivityを活かすことで、見た目の良い機能的なスマホアプリを簡単お手軽に実装できるようになるのだろう。
とりあえず、食事内容と体重を管理することがメインのアプリには必要なさそうだけれど。

# 最後に

チャレンジから３ヶ月が経った。
だがこれ以後、１行たりともコードに触れていない。
開発環境の起動すら、この記事を書くまでしていない。※書いていてもしてない

では、もうスマホアプリ開発はしないのか？
いや。スマホアプリ開発は、いつかリベンジもあるかもしれない。
その時は、家計簿アプリに挑戦するだろう。
画面からWebAPIを呼んでデータを登録するような…（無茶振りは続く）