【iOSアプリ】OKAIMOの制作過程を紹介するぞいッ

どうも。Reoです。

今回は最近リリースしたお買い物メモアプリ「OKAIMO」の制作過程について書いていこうと思います。制作過程とか久々に書くナァ

OKAIMOについて詳しくは前回の記事「【iOSアプリ】お買い物メモアプリ「OKAIMO 」のver1.0.1をリリースしました」を参照してください！そしてAppStoreにて入手してください！

制作期間

OKAIMOは今年(2019年)5月28日に制作を開始し、7月8日に1.0.0がリリースされました。

1.0.1の作業は、7月24日~27日で行いました。

チュートリアルのついた正式版を出すまでちょうど2ヶ月くらいかかりました。

Githubの草の生え方はこんな感じです。

◯が制作開始日と1.0.0リリース日です。四角で囲った4日がチュートリアル作業です。

何も作業してないのがバレますね。実家に帰ってブルーベリーの摘み取り作業をしてた空白なので許してほしい。

全然どうでもいいんですけど、OKAIMOの作業をしたら、仕事していてめっちゃ頑張っていたと思ってた時の草が一番薄い色になってて悲しくなりました。大してやってなかったんやなぁ(=´ω`)_з ﾄｵｲﾒ…

きっかけ

OKAIMOは、実はかなり前から作りたいと思っていたアプリでした。

私は元々「買い物リスト」というアプリを使っていました。これは、リストが１つだけの買い物リストです。

いつもこのアプリにメモして買い物をしていたんですが、スーパーで買い物中に100円ショップでしか買えないもののメモが見えている等、リストが１つしかない不便さを感じていました。

チェックと打ち消し線が入るところなんかパクリじゃん！！！と言われてしまったら終わりなんですが…でもこれが一番大事な機能でもあるし、インスパイアってことで許されてほしいです。

リスト１つしかいらないって人は是非「買い物リスト」の方を使ってください！

という感じで、既存のアプリをもっと自分の使いやすいようにしたい！というところから作り始めました。

かなり前から作りたいとは思っていましたが、まとまって時間が取れるタイミングとやる気が噛み合った5月末にようやく作り始めることができました。（その頃からニートな事実は知らないふりしてる）

使用したもの

Xcode
Sketch
Github
ノートとペン

特に変わったものは使ってません。今回初めて自分の制作物にSketchを取り入れました。脱イラレ。

また、タスク管理やスケジュール管理等は全てGithubで行いました。

構想

毎回アプリを作るときには企画書をザックリと作っていたんですが、今回は作っていません。

今回最初に決まったのは「OKAIMO」という名前からでした。

あとは「AppApp」のUIと「買い物リスト」を融合したものを作ろうと思っていたので、構想自体は既にできていました。

なので企画書を書きながら考えるという作業を省きました。

ノート晒し。

もげげってなんだろう

キッタナイノートで申し訳ない。制作過程を書くことわかってるんだからもうちょっと綺麗に書く努力とにゃんこをかくのやめなさいと言いたい。初手からおかいもって書いてるので、全く迷わずこの名前になりました。

Issue立て

構想は頭の中にあって最初にXcodeで「OKAIMO」というプロジェクトを作成し、Githubでリポジトリを作成しました。

ラベルやIssueテンプレートを作ってから、Issue立てを始めました。

最初に立てたIssueは全部で8つでした。

めっちゃザックリと立ててあります。

現在は46issueたてて、そのうち42がcloseされています。細かい奴がワサワサ出てきました。

Carthageで必要なライブラリをいれる

Issue立てるの忘れてたんで、Realmの導入と一緒に行ってしまったんですがコードを書き始める前に以下のライブラリを入れました。

直近にお仕事で使ってて慣れ親しんでしまったもの達をいれました。

SwiftLintはその名の通りLintで、ソースコードのチェックをしてくれます。: の後にスペースが入ってないと怒られるとかそういうヤツです。

SnapKitはコードで書くAutoLayoutが楽になるヤツです。これは便利便利。これなしでコードでAutoLayoutとかやってらんない。

R.swiftはリソースへのアクセスが楽になるヤツです。便利です。

RealmはRelamです。

お仕事ではこれらが既にプロジェクトに入っている状態から参画させてもらったので、自分でやるのは初めてでした(Realm以外)。

導入作業で1日が終わりましたねー。SnapKitとRealmはともかく、SwiftLintとR.swiftにちょっと苦戦しました。

ちなみにこれらの他に入れているのはFirebaseのみですよ。（AnalyticsとAdmobとCrashlytics）

コードを書くべし書くべし

環境構築が終わったら、デザインもせずにコードを書いてました。

デザインは決まっていない。

ラベルごとのページング作って、ボタン押したらセルを追加する処理して・・・みたいな感じで先に主な機能を作っちゃいました。

Realmでメモとラベルを保存するところまでは細かいデザインを決めずに作ってたんですが、保存・追加機能ができた時点で自分で使う分には十分だったので、そこからは普通に使いながら作ってました。

メモの部分以外はAppAppと同じ動きだからすぐできるよ！とか思ってたんですが、AppAppのコードほぼ見ずに作っちゃいましたねー。だってコメントアウトばっかでどこに何書いてあるかさっぱりわからんもん…（）

デザインを考えよう！

あらかたの機能ができたところでデザインを考え始めました。

10分Sketch触ってダメだーと思ってイラレ開いて30分触って、やっぱSketchでやろう…って感じで結局Sketchで作りました。

ボタン配置がつらい

最初はデザインパクリにならないように丸とかも考えてたんですが、結局角丸四角に落ち着いてます。

ボタン配置がネーーー。かなり迷いました。プラスボタンを真ん中に置くかどうかと、ゴミ箱の位置とチュートリアルボタンの位置・・・

結局チュートリアルのボタンは消えました。

この辺のデザインの反映はサクッと。

カラーセットを作ろう

カラーセットがですね。今回かなり頑張ったところなんですよ。

実際のカラーセット設定画面

Sketch上のデザイン

Sketch上でまともにデザインができてないんですが、カラーをまとめて適用っていうのをどうやってすればいいかなーってのがかなり迷いました。

最初は色を１つ選択して、ボタンを押したらカラーセットを即時で適用する仕様を考えていました。

でもわかりづらいし、できればセットで使って欲しいしと思い、最終的に前者の画像のようなセットを選択する仕様になりました。逆に単色を選ぶのがおまけみたいな感じで。

なんといっても、選択した色からトライアドや類似色のカラーセットを作成する機能が大変でした。いやー流石にライブラリ使おうとはしたんですけど、ライブラリ使う方を諦めちゃった。なので、もしかするとトライアドとかにちゃんとなってないかもしれないです。

Firebaseの導入

ほとんどの実装が終わり、Firebaseの導入をしました。AnalyticsとCrashlyticsとAdmobを設置しました。FirebaseっていうかFirebaseになってしまったもの達…って感じですね。

あ、あとLicensePlistってのを入れたのを忘れてました。ライブラリのライセンス一覧を自動で生成してくれます。これもお仕事で使ってて自分でも使ってみたくて…

プライバシーポリシーの作成

完全に忘れてたんですよこれ。慌てて作りました。

「個人開発者がAppStore用にプライバシーポリシーを書く」を参考にさせていただき、「App Privacy Policy Generator」で作成しました。

自動で作ったものなので英語なのです。でも日本語でも書かないと…。

ちなみにOKAIMOの右上の i を押すとプライバシーポリシーをWebViewで表示します。

アイコン・スクリーンショットの作成

これもSketchで行いました。

アイコンは迷ったようで結構すぐできましたね。AppAppとほぼ同じでいいじゃんと思ってましたが、テイストは大分違う感じになりました。

AppAppで幅調整

AppAppを使ってアイコンの見た目を並べて比較してみたり。

あとはストア用のスクショですね。特に迷いなくササっと作っちゃいました。

いざリリース！

はい、審査出して１回リジェクトされました(´･ω･`)

原因は全部の端末のスクショを↑のスクショにしてしまったせいでした。

iPhone8なのにiPhoneXのフレーム使ってんじゃねーよ！って言われちゃいました(´･ω･`)まぁそうですよね

修正して無事リリースされました。o(^∇^o)Ξ(o^∇^)oΞo(^∇^o)Ξ(o^∇^)o

チュートリアル作成作業

さてさて、リリースできたはいいんですが、チュートリアルを全く作ってなかったので、使い方がわからないアプリでした。

実家のブルーベリー出荷作業を手伝っていたので、とにかく先にリリースしておきたい！んで親に使わせるんや！って思いがあったので1.0.0はチュートリアルなしでのリリースでした。

繁忙期も終わり、脱実家してからチュートリアルを実装しました。

ver1.0.1のissue

1.0.1で修正した軽微なバグの詳細はこんな感じです。

チュートリアルで実装したのは

最初の起動後すぐに表示されるウェルカムボード
カラーセットの説明
吹き出しで一言説明
チュートリアルタブを作成

の4点です。

チュートリアルタブは用意するかどうか自体迷いました。

ウェルカムボード

一番最初に起動して出てくる画面です。

3つチェックを入れてもらうことによって、「はじめる」ボタンが有効になります。この四角はチェックボタンだよ！って教えるためのチュートリアルです。

Analytics設置するの忘れてたのでみんなここを乗り越えてくれてるかわかりません（泣いた）。

カラーセットの説明

ここはまとめて説明した方がいいかなと思ってこんな感じにしました。ドラッグでビューを飛ばせるよ。お仕事で作ったこの動きが大好きすぎて導入しちゃったんだけど、ここにしか使ってないので１回ぽっきりです。

吹き出しでの説明

「タップでカラーセットを生成」

吹き出しビューを以前お仕事で作ったのでコピペして使ってしもうた。若干比率とかの調整はしてます。書いたのは自分だからｾ

チュートリアルタブの作成

（ここで初めてタブって言葉が出てきちゃって、タブでいいじゃん！何ラベルって！って思ったりしてたんですが）

チュートリアルタブ

ここがちょっと文字の圧がスゴイなって感じになってしまったんですよねー。

一番上のタスクを順番にこなして欲しくて

ラベルの作成
メモの追加
メモにチェックを入れる
メモの削除
ラベルの編集
ラベルの並び替え
ラベルの削除

まで7ステップあるんですよね。多いですよねぇ。

一番最後にこのチュートリアルを削除してくれっていうチュートリアルは気に入っているんですが、果たしてそこまでたどり着いてくれるか…

ちなみにタスクをこなすごとに、タスクを削除して下にチェックの入ったタスクを追加していきます。

下に終わったタスクを表示

これ同じ場所でチェック入る方がわかりやすかったなーとも思うんですが、実装が大変なので諦めました。

チュートリアル作業は以上です。

全体の流れ

基本的にコーディングの作業は

GithubでIssueを立てる
Issueをこなす
PR出して自分でGithub上でコードレビュー
merge

の繰り返しです。

Issueは一度に1つしかやらないのでconflictしないしなんて幸せなんだ！って思いながらやってました。

Issueをこなす前に[WIP]ラベルをつけることで、どのくらい時間がかかってるかもわかるので良い感じです。

詰まったところとか参考にした記事は、Issueにコメントしてあるので、あとからブログも書きやすい！（書くかは不明）

個人開発なのでPR出しても自分が見るだけなんですが、一度Xcodeを離れて客観的に見れる感じがするので、ここおかしくない？ってところも見つけやすい気がします。

これまでの開発との違い

OKAIMOの前に作成した個人アプリは「AppApp」です。一番保守を頑張っているのはその1つ前に作った「Robin」というアプリです。

これらとの一番の違いは「できるところは全てIBで」実装したことだと思います。AppAppはわりと使っているんですが、Robinはゼロxibですからね。全てコードで書いてある。Fat View Controllerどころじゃないぜ。

あとは「SwiftLintをいれた」ってのも結構な違いだと思います。AppAppまでのコードなんてもう見てらんないんですよね。Lintって偉大だ。

AppAppとの共通部分が大きいのに、そのコードを全く使えない程度にはあのコードは酷い。何故公開してるんだ。公開処刑か。って感じなんですわ。

iOSアプリをGithubで管理するのも今回初めてですね。Privateリポジトリが無料になる前まではBitbucketsユーザだったので。他のアプリも移行はしてあるけど移行してからほぼ何もしてない…

最後に

個人開発アプリはOKAIMOで6個目になります。Robinは辛うじて生きていますが、その他は息をしていません。

AppAppをリリースしたのが2017年12月なので、1年半ぶりくらいのリリースです。超久々ですね。

さっき見てびっくりしたんですけど、AppAppの制作期間って14日間なんですって。思いついてから20日でリリースしてるってやばすぎるでしょ…。OKAIMOの方が細部までこだわって保守もしやすいようになってはいるけど、AppAppの方がShareExtension使ってて大変なはずなのに…化け物かよ…

OKAIMOは、後はローカライズだけしようと思っていて、それが終わったらバグ修正ぐらいに留めようかなって思っています。機能面を追加するとしたらHey Siri…ですね。これは追加するかは未定です。

今後は保守をするか新しいアプリでも作るか、仕事を真面目に探すか迷います。このブログも更新してないので更新しないと…プロフィールがまだ23歳になってるけど今24歳だからね…もうすぐｱﾗｻｰなのに

まぁでも最近仕事ZERO~で来月の収入もZERO~なのでそろそろ仕事をすることを考えないと…(´･ω･`)

それでは、かなり長くなりましたがOKAIMOの制作過程でした。

OKAIMOのここの実装どうなってんの！ってのがありましたらコメントやTwitterにて気軽に聞いてください〜。書ける範囲になりますが、頑張ってブログ書きます。

あとはバグがあったら報告いただけると助かります。

それではでは〜ヾ(*´･∀･[.:ﾟ+またね.: *:]