【iOSアプリ】Repotchの制作過程を紹介するよ

どうも。Reoです。

先日無事に新作iOSアプリ「Repotch」をリリースしました。リリースしました記事はこちら「【iOSアプリ】がんばりを可視化するタスクレポートアプリ「Repotch」をリリースしました!

新作のアプリをリリースしたら、毎度制作過程のブログを書いているので、今回もまったりと書いていこうと思います!

Repotch とは

Repotchは「がんばりを可視化するタスクレポートアプリ」というキャッチコピーで、タスクの記録を残すアプリになります。

英語の方のキャッチコピーの「Visuallize Your Efforts」の方がかなりシックリきてたりします。

AppStoreにて配信中です。

 

制作期間

プロジェクト作成日が2020年8月29日です。ver1.0.0のリリース日が2020年11月4日でした。

制作期間は丸っと2ヶ月くらいですね。

GitHubでみるとこんな感じ。

ここまでモチベーション下がらずに開発できたのは大分すごい。

Repotch でデータを保存機能ができてから記録は以下です。

 

Repotchで記録始めてから(9月27日から)コミットしてない日が1日しかないあたり、モチベ維持にめちゃくちゃ効果あるのでは?って思ったり…

コミット数は現時点で952です。がんばったね。

 

きっかけ

このアプリを作り始めたきっかけは、私がマルチタスクが苦手なことでした。

8月頃、友達と一緒にアプリ制作してたり、お互い新作アプリも作ろうぜって話をしてたり、さらに仕事で Vue.js の勉強をしないといけないというので、複数のタスクがありました。

優先順位を決めなかったら、もう完全に自分がやりたいことを優先してしまう。優先順位を決めてしまうとそれしかやらなくなってしまって、結局新作アプリなんてずっと作れない。

それで、「時間を決めて作業をしよう!」と思い、Playgroundで以下のコードを書きました。

このコードがRepotchの始まりですね。

1日の始まりにPlaygoundで作業時間と比率を決めて、今日は○時間はやるぞーってiPhoneでタイマーをセットして作業をしていました。

そして、これわざわざPlayground開くの面倒だし、アプリ化しちゃえばいいんじゃね?と思い立ち、制作を決めました。

開発を始めた当時の日記が出てきたので貼り(2020-08-29

 

ちなみに、当時のタスクは気付いたら全部フェードアウトしてました。なんでだろう…。作っていた新作アプリは技術的に詰まってて途中だし、共同で作ってたのは二人で飽きちゃってるし、仕事はなんかないし不思議だね…。連絡とらないと…

 

最初のアイディアメモ

開発するかどうか決めずにとりあえずアイディアだけ書き殴っていたやつが出てきたので、貼ってみる。iPadでメモに書いていたやつ。多分8月23日って書いてあるし、開発決める1週間前くらいに書いてたみたい。

あー半分以上は実装できてないなー。

 

仕様を決める

実際に作るって決めてからは、ノートにゴリゴリとUI書いたり画面遷移を書いたりしていきました。

とか

今回はわりと真面目に先にちゃんと決めてある気がする。8割型この通りな気がする。

ただ、デザインはAppleの公式アプリに寄せるって決めていたので、Sketch等でデザインをちゃんと作るのはしてないです。

 

GitHubでIssue立て

あらかた決まったら、GitHubでIssueを立てておきました。

ノートの写真撮ってペッて貼るだけのIssueだけれど。

こんな感じで洗い出して、あとはもう開発していくだけですね。

 

開発

あとは、Issueをこなしてくだけ!

一人開発だけど、Issueごとにプルリクエスト出して、マージしながらするやり方が本当に捗る。

開発面とデザイン面についての話は別の記事で、追々したいなーと思っています。。

 

一番大変だったところは、いうまでもなくグラフです。流石にね。

あと最後の最後までデザインが決まらなかった画面は、スタート画面です。あの「スライドで始める」を思いつくまでがまじできつかったです。なので、スタート画面が一番最後に作られました。

UI面は全部自作でライブラリ使ってないので、やれば意外となんでもつくれるもんだね。

 

名前決め

リリース1週間前くらいに、ようやく「Repotch」という名前が決まりました。

お布団の中で思いついて、同じ名前のアプリがあるかどうかを調べたり、ついでに競合アプリを調べたりしてました。

リリースが近づくにつれて、段々怖くなってきていました。

ストップウォッチで調べると似たようなアプリが出てくる出てくる。競合を調べてから作れよって話なんですが、競合があっても自分の作るアプリが一番自分好みなのは間違いないので…。実際に、競合アプリを入れてみても、あー自分のが一番だわってなって、それだけでメンタルを保っていました。

 

名前は「Report」と「Stopwatch」を繋げただけの超安直な名前です。

ただ、同じ名前のプロダクトとか無いし、現時点で「Repotch」で調べるとこのブログが出てくるくらいには美味しい名前だったかなって思います。あと響きが可愛くて好き。れぽっち。

 

アイコン作り

アイコンは、開発のビルド待ちの時間とかにアイディアを出してあったので、1日かからずにできました。

タイマーとグラフを組み合わせて「R」を作っています。

紙に書いてあったアイディアをiPadのProcreateでまずは下書き(?)をしました。

アイコンとして設定してみてこの方向性でいいかを決めました。

これをSketchで清書して細かい部分の調整を行いました。

左上が決まったアイコンですね。めちゃよいのできた。

 

ストアのスクショ作り

ストアのスクショ作りで2日くらいかけてた気がします。まじできついね。

キャッチコピーとかも難しくて、なかなか思いつかなくて、そもそも誰ターゲットにこのアプリ作ってんだ?みたいになってきて、しんどかった。ターゲット俺だと難しい。

端末ごとのスクリーンショットを持ってくるのもかなり大変でした。

私は実機はiPhone7しか持ってないので、そのサイズはまぁいいんですけど、iPhoneX以上のを用意するのが大変でしたね。(本当に個人アプリ開発者か?)

データがあってなんぼのアプリなので、ダウンロードしてシミュレーター上に配置してスクリーンショットを撮りました。

やり方は以下の通りにやりました。ありがとうございます…

iPhone シミュレーター上のアプリにデータをセットする #iOS #iphone #Xcode

 

スクショのローカライズもしたので、結構キツかったー。

 

審査提出

これは結構スッとできました。英語から書く方がなぜかうまく書けた。不思議。

とりあえず審査に提出してから、TestFilght でチェックしてみると、直前に修正した部分が反映されてなくて、アレ?!ってなって確認してみると、ブランチマージし忘れてて、慌てて審査取り消しをしました。

再度アップロードして審査待ち。

デザインをApple公式に寄せに寄せたので、模倣って言われてリジェクトされるかなって心配していたんですが、大丈夫でした。でも、今後もその心配はあると思っていて、毎回ちょっと怖いですね。

 

リリース!!

審査通って、いざリリース!って思っていたら、バージョンアップしてねってアラートが出るバグが発生して、慌てて修正して再度審査にかけることになりました。

AppStore側で 1.0 でバージョン指定してて、アプリ側で1.0.0だったのでバージョンが違っていたせいっていう凡ミスでした。

いやー。完璧を目指したもの作っても、何かしらのバグが出てくるし、本当に厳しい。完璧だと思っているからリリースしているのにね。

 

こんな感じで約2ヶ月、がんばりました。

 

おわりに

10月22日リリースを目標にしていたのに、2週間も遅れてしまいました。見積もりが難しい。全部本当に思ってる3倍ぐらいはかかる…。

 

Repotch に似たようなアプリのアイディアは、実は結構前から考えていました。SwitchLog っていう、途中まで作ってやめたアプリがあるんですが、それもスイッチでオンオフして作業を記録するアプリでした。

データモデルを作ってるあたりに、アレこれ前もやったぞ?ってなってました。あの時は時間の計測まわりが面倒くさすぎてやめてしまったけれど。

 

今回は全体の流れの紹介をしましたが、次はデザイン面や実装の話もしたいですね。

公式アプリのどこを真似して作っているかっていう話をしたいです。……でもこれ本当に模倣で死なないかな…?怖いね…

実装面は、このブログで話してしまうのはもったいなくね?ってちょっと思っちゃってるので、Zenn とかで書いてみるかもしんないです。まだ迷い中です。

 

今回はとりあえずこの辺で。久々にこういうブログ書くのも楽しいね。

ダウンロードもよろしくね。

Repotch
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

UITableView.RowAnimation の .none はアニメーションするよ

UITableView.RowAnimation の .none はアニメーションがnoneなわけじゃなく、デフォルトの設定を使うよという意味らしい。

The inserted or deleted rows use the default animations.

なのでアニメーションしちゃう。今更の気づき。

 

iOS

記事を書くほどでもないけれどメモっておきたいこと

テスト投稿。

例えばiphone7 の画面サイズ

750 × 1334
半分375 × 667

iOS

UINavigationController + UIScrollView の組み合わせで使っている時に謎の余白ができる時

UINavigationController + UIScrollView の組み合わせで使っていて、UIScrollView 上に AutoLayout で上下左右0で View を設置しているのに、30px程度上にずれてしまうとき。

`navigationController.navigationBar.isTranslucent = false` にすると直るかもしれない。

ScrollView上のコンテンツとNavigationBarの重なっているところが透過していたら多分これで直せるはず。

通常のターゲットではちゃんと動いているのに、iOSSnapshotTestCase を用いたテストでだけこの対応が必要なのよくわからないけれど。。。

iOS
more