【意外と簡単】プログラミングできない俺が、iOSアプリ開発してみた。satorikublogsatorikublogサトリクのこだわりのモノ紹介ホームXcode/swift【意外と簡単】プログラミングできない俺が、iOSアプリ開発してみた。withアプリーチサトリクこの度、クイズアプリを制作しました!この記事では、アプリ制作の全過程を公開したいと思います。僕と同じようなプログラミングが全くできない方に参考になれば幸いです。まとめ簡単な自己紹介21歳のプログラミングができないエンジニアです。エンジニアになってからまだ一年も経っていません。4月から会社に入ってずっと、Webサイトの開発・保守をしていました。10月に入って、iOSアプリ担当がいなくなるというので、僕が代わりにiOSアプリの担当(仮)になりました。そこで、ゼロからXcodeとswiftを勉強し始めたのですが、ただ勉強するだけじゃ、すぐ飽きてしまうので、自分でもアプリを制作しながら勉強すればいいのでは?と思い、自作のアプリを制作することにしました。自分がアプリを制作する日がくるとは。友達に自慢したいからXcodeとswiftのいい勉強になるから会社の目標に「AppStoreにリリースすること」を設定したからアプリで稼げるようになりたいからアプリ制作ルール今回のアプリを制作するにあたって、5つほどルールを決めました。1凝らずにアプリを開発する。凝ろうと思えば、かなり時間がかかってしまいます。今回の目標は、あくまでもAppStoreに公開することです。デザインや拡張機能は、自分が簡単にできる範囲で行います。広告を設定するには、フレームワークを入れないといけません。今の僕には少し早いので、今回のアプリは広告を付けません。今年中に完成したかったので、二週間と期間を決めました。仕事が終わって家に帰って飯食って風呂入ると、だいたい7時になっているので、そこから5時間アプリ開発に使います。合わせるために、土曜日日曜日も同じ5時間しか行わないことにします。アプリ開発アプリ開発1日目、2日目:勉強まずは、勉強です。今回使用する言語はswiftで、開発環境はXcodeです。これらは、全く触ったことがなかったため、まずは勉強しなければなりません。仕事帰りに、swift/Xcodeの参考書を購入しました。RinkerKindleAmazon楽天市場Yahooショッピングサトリク絶対に挫折したくなかったので、この本を買いました笑この本は、実際に手を動かしながら行う参考書で、本気でやれば2日間で終えることができます。ある程度の知識が身についたのでかなり良書でしたね。あとは、Qiitaでswiftの基本的な記事をいくつか読みました。1日目、2日目の成果:ある程度、Xcodeに慣れた。アプリ開発3日目:アイデア出し2日目は、どんなアプリを制作しようかアイデア出しをしました。出たアイデアiPhoneの通知で問題を出し、ゲーム中でも勉強できるアプリ自分のランキングを管理し、SNSに共有できるアプリほしい物リストアプリ自分が制作した漫画をアプリ化する頑張った自分にご褒美が書かれたルーレットのアプリショートカットキークイズアプリ1.は、通知機能を使うので、Xcodeだけでは、厳しい部分があるため、却下。2.は、簡単すぎて、Appleの審査が通らないのではないか。いう心配と、もうすでに存在していたので、却下。3.は、先ほどと同じ理由で却下。4.は、このアイデアは良かったが、漫画のレベルが少し低すぎるため、漫画を書き直してからリリースしたいと思い、却下。簡単なショートカットキークイズアプリを制作することにシました。AppStoreでショートカットキーアプリで検索してみると、超昔に制作したアプリばっかりでした。自分はショートカットキーオタクなので、自分も勉強できます。3日目の成果:ショートカットキークイズアプリを開発することに決定した。アプリ開発4日目:設計書を作成3日目は、設計書の作成をする。設計書といっても、仕事上の設計書の完成度とは、比べ物にならないくらいのものです。今回制作するアプリは、◯画面で構成します。1つ1つ簡単に説明します。起動画面アプリの起動画面。ここは、シンプルでおしゃれなロゴを小さく表示する。自分が覚えたいショートカットキーのジャンルを選ぶことができます。レベル選択画面この画面では、自分にあったレベルを選択できます。レベルの段階は、Easy、Normal、Hardの三段階にします。問題画面1問題画面1問題数は10問で、選択肢は四択にします。戻るボタンを設置し、戻れるようにします。選択すると、問題画面2のように、表示されます。問題画面2問題画面2選択すると、◯か×が表示されます。10問終わると、正解数とその正解数に応じたランクが表示されます。その下には、シェアボタンと、トップに戻るボタンを配置します。シェアボタンでは、サファリなどの共有ボタンと同じ働きをするようにします。これが設計者と言えるか分かりませんが、こんな感じで機能を作っていきたいと思います。4日目の成果:簡単に設計書を作成した。アプリ開発5日目:参考になるものを探す僕は初心者なので、0からコードを書くのは時間がかかります。僕の作戦は簡単なクイズアプリのコードを見て、それと似た感じで作成し、色々と追加機能を加えるという作戦です。クイズアプリ」で検索し、クイズアプリの基本のコードがないか探しました。探したところ、クイズアプリの記事は、いくつか見つかったが、一部のコードしか乗っていませんでした。クイズアプリを制作する参考書があるということがわりました。Amazonで買うと時間がかかるので、近くの本屋をまわりやっと見つけました。サトリクそれがこの本です。RinkerAmazon楽天市場Yahooショッピング5日目の成果:クイズアプリの基盤を作れる本を手に入れた。アプリ開発6日目:プログラミング(基盤作り)昨日買った参考書のクイズアプリの箇所だけ、実践した。この参考書のswiftのバージョンが2でかなり古いものでした。今のswiftのバージョンは、5なので、swift2のコードをかくと時々エラーになってしまいます。エラーになるたびに、ネットで検索し、今のバージョンに対応していきました。いくつかバージョンが対応してなくて実装できない部分もありましたが、クイズアプリの基盤は完成しました。基盤というのは、スタート画面から問題画面に遷移し、その選択肢が正解か不正解かを見極め、答えをだし、結果画面に遷移するというものです。各画面の戻るボタンランダムに問題出題デザインです。6日目の成果:クイズアプリの基盤を作成した。アプリ開発7日目、8日目:プログラミング(機能付け足し)昨日作成した基盤に足りない機能を実装しました。戻るボタン、ランダムに問題出題は意外と簡単に作成できましたが、レベル画面がとても苦戦しました。苦戦した理由は、画面遷移時の値の受け渡しです。この処理は、初心者にはかなり理解するのが辛かったです。7日目、8日目の成果:機能ベースでは、なんとか自分の設計書通りに完成した。アプリ開発9日目:デザインの考案ルールで話した通り、デザインは、あまり凝りません。僕にはデザイナーの友達がいるので、サクッとデザインしてもらいました。!デザイン担当のりさぉです!こんな感じでやってみました!りさぉBeforeafter今回は、結構簡単にサクッとデザインしました。各ボタンのデザインは、ちゃんと押した感触が出るように、押す前と押した後のボタンの画像を作成しました!本当は、マテリアルデザインを取り入れようとしましたが、今回は、凝らないというルールで行なっているため、やりませんでした。次のアプリでマテリアルデザインを取り入れようと思います!りさぉどうでしょう。本来ならば、マテリアルデザインを使用したかったところですが、今回は、あくまでもリリースすることが目的なので、マテリアルデザインは、次回のアプリに使用したいと思います。9日目の成果:友達の魔法で、素敵なデザインになった。アプリ開発10日目プログラミング(デザインの実装)10日目は、デザインの実装をします。Xcodeだとデザインの実装がかなり簡単にできます。これは、プログラミングというか、どちらかというと、イラストレーターを操っている感じですね。画像を当てはめて、制約(Constraints)をつけて位置を固定しました。Xcodeに慣れていなかったので、結構時間がかかりました。10日目の成果:デザインの反映完了アプリ開発11日目、12日目:問題作りクイズアプリの問題は、当然自分で書かなければなりません。今回、問題として出すのは、windows、mac、excel、chrome、gmailの5項目のショートカットキーの問題を作成します。レベルを三段階にするので、それの三倍。最低でも150作らなければなりません。ネットで検索し、ひたすら問題を作成していきます。サトリクこんな感じです。dこのように、一回excelファイルに書き込んだ後、このexcelファイルをcsvファイルに変換します。dそしてこのcsvファイルをプログラムに読み取ってもらい、問題を出力します。サトリクこれを200問近くやりました。この作業がかなり辛かったです。11日目、12日目の成果:問題(200問)完成アプリ開発13日目:テスト、細かい修正13日目は、テストや細かい修正を行いました。テストは、3パターンに簡単に分けて行います。テストパターン1:機能テストまずは、機能テストです。スタートボタンをタップしたらしっかりと問題に遷移するのか。正解を選べば、正解の表示が出るのか。シェアボタンを押すと、シェアできるようになっているのか。機能が想定通りに動くかどうかを確認します。テストパターン2:問題チェック問題の文章の誤字脱字がないかをチェックします。200問あったので、全て確認するのに意外と時間がかかりました。空白がなかったり、同じ選択肢が二個あったり。そのような細かい修正をしました。テストパターン3:デザインの崩れのチェック今回は、Xcodeで作成したので、androidには対応していません。iPhoneのサイズごとにチェックすればいいのですが、iPhoneのサイズは、全7種類ありました。自分が持っているiPhone8を最優先に考え、それ以外は、ちょっとダサくても妥協することにしました。iPhoneのサイズを以下に表でまとめました。