サトリクのこだわりのモノ紹介

【Swift5/Xcode】プログラミングできない俺が、iOSアプリ開発してみた。

shortcut key
shortcut key
   開発元:Rikuto Sato
無料
posted withアプリーチ

サトリク

この度、クイズアプリを制作しました!

この記事では、アプリ制作の全過程を公開したいと思います。

僕と同じようなプログラミングが全くできない方に参考になれば幸いです。

簡単な自己紹介

21歳のプログラミングができないエンジニアです。エンジニアになってからまだ一年も経っていません。

4月から会社に入ってずっと、Webサイトの開発・保守をしていました。

が、

10月に入って、iOSアプリ担当がいなくなるというので、僕が代わりにiOSアプリの担当(仮)になりました。

そこで、ゼロからXcodeとswiftを勉強し始めたのですが、ただ勉強するだけじゃ、すぐ飽きてしまうので、自分でもアプリを制作しながら勉強すればいいのでは?と思い、自作のアプリを制作することにしました。

サトリク

まさか。自分がアプリを制作する日がくるとは。。

はじめに

アプリを制作した理由

  1. 友達に自慢したいから
  2. Xcodeとswiftのいい勉強になるから
  3. 会社の目標に「AppStoreにリリースすること」を設定したから
  4. アプリで稼げるようになりたいから

アプリ制作ルール

今回のアプリを制作するにあたって、5つほどルールを決めました。

①凝らずにアプリを開発する。

凝ろうと思えば、かなり時間がかかってしまいます。今回の目標は、あくまでもAppStoreに公開することです。なので、デザインや拡張機能は、自分が簡単にできる範囲で行います。

②広告は付けない。

広告を設定するには、フレームワークを入れないといけません。今の僕には少し早いので、今回のアプリは広告を付けません。

③二週間で制作する。

今年中に完成したかったので、二週間と期間を決めました。

④一日5時間まで。

仕事が終わって家に帰って飯食って風呂入ると、だいたい7時になっているので、そこから5時間アプリ開発に使います。

合わせるために、土曜日日曜日も同じ5時間しか行わないことにします。

アプリ開発

アプリ開発1日目、2日目:勉強

1,2日目の画像

まずは、勉強です。

今回使用する言語はswiftで、開発環境はXcodeです。

これらは、全く触ったことがなかったため、まずは勉強しなければなりません。

早速仕事帰りに、swift/Xcodeの参考書を購入しました。

購入したものはこちら

サトリク

絶対に挫折したくなかったので、この本を買いました笑

この本は、実際に手を動かしながら行う参考書で、本気でやれば2日間で終えることができます。ある程度の知識が身についたのでかなり良書でしたね。

あとは、Qiitaでswiftの基本的な記事をいくつか読みました。

1日目、2日目の成果:ある程度、Xcodeに慣れた。

アプリ開発3日目:アイデア出し

3日目の画像

2日目は、どんなアプリを制作しようかアイデア出しをしました。

出たアイデア
  1. iPhoneの通知で問題を出し、ゲーム中でも勉強できるアプリ
  2. 自分のランキングを管理し、SNSに共有できるアプリ
  3. ほしい物リストアプリ
  4. 自分が制作した漫画をアプリ化する
  5. 頑張った自分にご褒美が書かれたルーレットのアプリ
  6. ショートカットキークイズアプリ

1.は、通知機能を使うので、Xcodeだけでは、厳しい部分があるため、却下。

2.は、簡単すぎて、Appleの審査が通らないのではないか。という心配と、もうすでに存在していたので、却下。

3.は、先ほどと同じ理由で却下。

4.は、このアイデアは良かったが、漫画のレベルが少し低すぎるため、漫画を書き直してからリリースしたいと思い、却下。

5.は、なんか、ダサいから却下。

結果、一番無難で、簡単なショートカットキークイズアプリを制作することにシました。

AppStoreでショートカットキーアプリで検索してみると、超昔に制作したアプリばっかりでした。

さらに、自分はショートカットキーオタクなので、自分も勉強できます。

3日目の成果:ショートカットキークイズアプリを開発することに決定した。

アプリ開発4日目:設計書を作成

アプリ開発4日目:設計書を作成

3日目は、設計書の作成をする。設計書といっても、仕事上の設計書の完成度とは、比べ物にならないくらいのものです。

サトリク

これが簡単な設計書

画面遷移フロー図の画像

今回制作するアプリは、◯画面で構成します。1つ1つ簡単に説明します。

起動画面

起動画面の画像

アプリの起動画面。

ここは、シンプルでおしゃれなロゴを小さく表示する。

スタート画面

タイトルの画像

スタート画面

自分が覚えたいショートカットキーのジャンルを選ぶことができます。

項目は、Windows、Mac、Excel、Chrome、Googleの5つだけにします。

難易度選択画面

難易度選択の画像

レベル選択画面

この画面では、自分にあったレベルを選択できます。

レベルの段階は、Easy、Normal、Hardの三段階にします。

問題画面①

問題画面の画像

問題画面①

問題数は10問で、選択肢は四択にします。

戻るボタンを設置し、戻れるようにします。

選択すると、問題画面②のように、表示されます。

問題画面②

問題画面(答え合わせ)の画像

問題画面②

選択すると、◯か×が表示されます。

下には、答えと、次の問題へのボタンが配置されています。

結果画面

結果画面の画像

結果画面

10問終わると、正解数とその正解数に応じたランクが表示されます。

その下には、シェアボタンと、トップに戻るボタンを配置します。シェアボタンでは、サファリなどの共有ボタンと同じ働きをするようにします。

これが設計者と言えるか分かりませんが、こんな感じで機能を作っていきたいと思います。

4日目の成果:簡単に設計書を作成した。

アプリ開発5日目:参考になるものを探す

アプリ開発5日目:参考になるものを探す

僕は初心者なので、0からコードを書くのは時間がかかります。

ですから、僕の作戦は簡単なクイズアプリのコードを見て、それと似た感じで作成し、色々と追加機能を加えるという作戦です。

Googleで「swift クイズアプリ」で検索し、クイズアプリの基本のコードがないか探しました。

探したところ、クイズアプリの記事は、いくつか見つかったが、一部のコードしか乗っていませんでした。しかし、クイズアプリを制作する参考書があるということがわりました。

Amazonで買うと時間がかかるので、近くの本屋をまわりやっと見つけました。

サトリク

それがこの本です。

5日目の成果:クイズアプリの基盤を作れる本を手に入れた。

アプリ開発6日目:プログラミング(基盤作り)

アプリ開発6日目:プログラミング(基盤作り)

昨日買った参考書のクイズアプリの箇所だけ、実践した。

しかし、この参考書のswiftのバージョンが2でかなり古いものでした。

今のswiftのバージョンは、5なので、swift2のコードをかくと時々エラーになってしまいます。エラーになるたびに、ネットで検索し、今のバージョンに対応していきました。

いくつかバージョンが対応してなくて実装できない部分もありましたが、クイズアプリの基盤は完成しました。基盤というのは、スタート画面から問題画面に遷移し、その選択肢が正解か不正解かを見極め、答えをだし、結果画面に遷移するというものです。

足りないのは、

  • レベル画面
  • 各画面の戻るボタン
  • ランダムに問題出題
  • デザイン

です。

6日目の成果:クイズアプリの基盤を作成した。

アプリ開発7日目、8日目:プログラミング(機能付け足し)

アプリ開発7日目、8日目:プログラミング(機能付け足し)

昨日作成した基盤に足りない機能を実装しました。

戻るボタン、ランダムに問題出題は意外と簡単に作成できましたが、レベル画面がとても苦戦しました。苦戦した理由は、画面遷移時の値の受け渡しです。この処理は、初心者にはかなり理解するのが辛かったです。

7日目、8日目の成果:機能ベースでは、なんとか自分の設計書通りに完成した。

アプリ開発9日目:デザインの考案

アプリ開発9日目:デザインの考案

ルールで話した通り、デザインは、あまり凝りません。しかし、僕にはデザイナーの友達がいるので、サクッとデザインしてもらいました。

どうも!デザイン担当のりさぉです!

こんな感じでやってみました!

りさぉ

Before

after

今回は、結構簡単にサクッとデザインしました。各ボタンのデザインは、ちゃんと押した感触が出るように、押す前と押した後のボタンの画像を作成しました!

本当は、マテリアルデザインを取り入れようとしましたが、今回は、凝らないというルールで行なっているため、やりませんでした。次のアプリでマテリアルデザインを取り入れようと思います!

りさぉ

どうでしょう。かなりよくなりました。

本来ならば、マテリアルデザインを使用したかったところですが、今回は、あくまでもリリースすることが目的なので、マテリアルデザインは、次回のアプリに使用したいと思います。

9日目の成果:友達の魔法で、素敵なデザインになった。

アプリ開発10日目プログラミング(デザインの実装)

アプリ開発10日目プログラミング(デザインの実装)

10日目は、デザインの実装をします。

Xcodeだとデザインの実装がかなり簡単にできます。これは、プログラミングというか、どちらかというと、イラストレーターを操っている感じですね。

10日目のデザインの画像

画像を当てはめて、制約(Constraints)をつけて位置を固定しました。Xcodeに慣れていなかったので、結構時間がかかりました。

10日目の成果:デザインの反映完了

アプリ開発11日目、12日目:問題作り

アプリ開発11日目、12日目:問題作り

クイズアプリの問題は、当然自分で書かなければなりません。

今回、問題として出すのは、windows、mac、excel、chrome、gmailの5項目のショートカットキーの問題を作成します。さらに、レベルを三段階にするので、それの三倍。つまり最低でも150作らなければなりません。

ネットで検索し、ひたすら問題を作成していきます。

サトリク

こんな感じです。

問題 答え番号 選択肢1 選択肢2 選択肢3 選択肢4
コピーするショートカットキーは? 3 ctrl + b ctrl + x alt + c ctrl + c
タスクマネージャーを表示するショートカットキーは? 2 ctrl + shift + n ctrl + Shift + esc shift + alt + esc shift + alt + t
デスクトップを表示するショートカットキーは? 4 ctrl + d ctrl + t alt + d windowsキー + d

このように、一回excelファイルに書き込んだ後、このexcelファイルをcsvファイルに変換します。

csvファイル

そしてこのcsvファイルをプログラムに読み取ってもらい、問題を出力します。

サトリク

これを200問近くやりました。。この作業がかなり辛かったです。

11日目、12日目の成果:問題(200問)完成

アプリ開発13日目:テスト、細かい修正

13日目は、テストや細かい修正を行いました。

テストは、3パターンに簡単に分けて行います。

テストパターン①:機能テスト

まずは、機能テストです。

スタートボタンをタップしたらしっかりと問題に遷移するのか。正解を選べば、正解の表示が出るのか。シェアボタンを押すと、シェアできるようになっているのか。
など、機能が想定通りに動くかどうかを確認します。

テストパターン②:問題チェック

問題の文章の誤字脱字がないかをチェックします。200問あったので、全て確認するのに意外と時間がかかりました。空白がなかったり、同じ選択肢が二個あったり。そのような細かい修正をしました。

テストパターン③:デザインの崩れのチェック

今回は、Xcodeで作成したので、androidには対応していません。

なので、iPhoneのサイズごとにチェックすればいいのですが、iPhoneのサイズは、全7種類ありました。

流石に、この全画面に合わせたレイアウトにするのは、まだ僕には技術が足りないので、

自分が持っているiPhone8を最優先に考え、それ以外は、ちょっとダサくても妥協することにしました。

iPhoneのサイズを以下に表でまとめました。

iPhoneの機種 サイズ 対応内容
iPhone 1,3G,3GS,4,4s 3.5 古いので対応しない。
iPhone 5,5s,5c,SE 4.0 古いので対応しない。
iPhone 6,6s,7,8 4.7 対応する。優先度1※自分がもってるサイズだから。
iPhone 6,6s,7,8 plus 5.5 対応する。優先度5
iPhone X,XS,11Pro 5.8 対応する。優先度4
iPhone XR,11 6.1 対応する。優先度2
iPhone XS,11Pro Max 6.5 対応する。優先度3

しかし、ここで僕は気づいてしまいました。

サトリク

iPadも対応しなければならないじゃん!!

恐る恐るiPadで起動してみます。

iPadでレイアウト崩れる現象
iPadで起動したらレイアウトが崩れる。

超崩れてる〜〜〜

絶望しながら他のアプリは、どうやって対応しているのかを探っていると、インスタグラムがこのように、iPadに対応していました。

InstagramのiPad対応の画像

iPadでもiPhoneのサイズ感に出来るだけ合わせて表示する方法です。

これなら、わざわざiPadようにレイアウトを調整しなくて済みます。

少しダサいですが、この方法で行うことにしました。

iPadの対応も終わり、やっと終わったと思って自分のiPhoneでアプリを起動してみると、超真っ黒。

は?なんで?と思って少し考えたら、原因は、ダークモードだということに気づきました。

ダークモード対応の画像

もし、ダークモードに対応するのであれば、ダークモード用のデザインを考えなければならなかったのですが、めんどくさかったので、

強制的にライトモードにするように設定しました。

サトリク

iPhoneのデザイン・レイアウトを考えるときは、あらかじめ、iPad、ダークモードに対応するかどうかを検討しなければならないってことがわかりました。

13日目:テストと修正が終わり、アプリ完成!!!

アプリ完成!

13日でやっと完成しました!1日5時間とはいえ、簡単なアプリにも関わらず、2週間もかかりました。。

まだまだ細かいレイアウトのずれや、実装したい機能などありますが、もう疲れました。。。

サトリク

追加機能や、細かい修正は、今後のアップデートで行うことにしました。

AppStoreにアプリの申請

※ここからは、Appleの審査待ちなど入るので、日数は数えません。

アプリをAppStoreに出すには、Apple Developer Programに入会しなければなりません。入会金は、1年契で約12,980円です。

サトリク

たっか!

早速注文しました。

Apple Developer Programに入荷した画像

すぐに承認してもらえると思っていましたが、承認してもらうのに約一週間かかりました。

Apple Developer Programの審査が2日以上たっても保留中(Pending)になって遅いので、お問い合わせしてみた。

サトリク

色々ありましたが、なんとかAppleDeveloperProgramに登録できました。

早速アプリを審査に出したいと思います。

アプリ審査で必要なもの

  • アプリ名
  • サブタイトル
  • カテゴリ
  • プロモーション用テキスト
  • 検索のためのキーワード(100文字)
  • アプリの説明
  • サポート用サイト
  • プライバシーポリシーのサイト
  • AppStoreに載せる画像
  • 作成したプロジェクト(ソース)

など、意外と大変です。

これだけでも2日かかりました。

サトリク

実際には、こんな感じでAppleに提出しました。

アプリ名:shortcut key quiz

サブタイトル:クイズでショートカットキーをマスター

カテゴリ:仕事効率化、ビジネス

プロモーションテキスト

パソコン作業が遅い人は、マウスを常に持っている。
パソコン作業が早い人は、マウスを使わない。
ショートカットキーは、ロマンである。

検索のためのキーワード(100文字)

ショートカットキークイズ,しょーとかっときー,ショートカットキー,パソコン,ぱそこん,作業効率,作業,きーぼーど,キーボード,クイズ,くいず,アプリ,Excel,Chrome,Mac,Windows

アプリの説明

本アプリは、ショートカットキーのクイズアプリです。
覚えたいショートカットキーのジャンルが選べます。
Windows、Mac、Excel、Gmail、Chromeと、パソコン作業で役立つショートカットキー、255問用意しました。
Windows
「Ctrl + Shift + esc」で何ができる?
Mac
「command + i 」で何ができる?
Excel
「Ctrl + +」で何ができる?
Gmail
「G + A」で何ができる?
Chrome
「Ctrl + L」で何ができる?
自分のレベルに合わせた問題が選べます。
問題のレベルを、Easyモード、Normalモード、Hardモードの三段階に分けました。
パソコン触りたての新社会人の方は、Easyモードから問いていきましょう
パソコンは、基本毎日触っていてそこそこショートカットキーは覚えているよという方は、Normalモードを試してからHardモードに挑戦してみてください。
パソコンのコマンドは、すべて把握していて、何もかもわかるよという方は、Hardモードに挑戦してみてください。
パソコンのキーの設定などで、問題に出題されているショートカットキーが使えない可能性があります。
もし、そのようなことがあっても、ご容赦ください。
今後のアップデートでは、ジャンル、問題の追加、エンドレスモードの追加、ショートカットキー一覧表の追加をしていきたいと思っていますので、宜しくお願い致します。
また、こんな機能が欲しいという要望があったら、レビューからご連絡ください。

サポート用のサイト

https://twitter.com/rikuto_app/

プライバシーポリシー用のサイト

https://sites.google.com/view/shortcut-key-quiz

サトリク

ざっとこんな感じです。

アプリの説明を書くのがとても面倒でした。他のアプリをみてみるとたくさん書いているので、たくさんか書かないとアプリの審査が通らないのかなと思い、700文字くらい書きました。

サポート用のサイトは、アプリに問題が会った時、問い合わせできればいいというものだったので、Twitterのアカウントを作成しツイッターのリンクを挿入しました。

プライバシーポリシーのサイトは、Googleサイトでプライバシーポリシーをコピペし、内容を少し書き換えました。

サトリク

アプリのプロジェクト(ソース)の提出は、かなり苦戦したので、別で記事にしようと思います。

審査結果

審査結果のメールが届いたのは、土曜日の午前1時頃でした。

メールはなんと英語でした。

実際のメール
Google翻訳

ということで、一発合格してしまいました

本当であれば、リジェクト(却下)されて、その対応のことまで書きたったのですが、、、

このアプリの実際の制作の仕方は、こちらの記事で書いていますので、よかったらみてみてください。

【swift入門】ゼロからのiOSアプリ開発〜誰でもアプリは作れる〜【Swift5/Xcode】『Step0』

まとめ

こんな簡単なアプリでも、リリースはかなり大変です。。

もっと本格的なアプリだと、ログイン機能や、課金機能、データベース機能などがあるので、一発で審査が通ることなんてほとんどないらしいです。

次は、本格的なアプリを制作して、このブログで報告したいと思います。

ここまで読んでくださりありがとうございます。

 

いいねと思ったら共有お願いします。

この記事のURLをコピーする

コメントを残す

メールアドレスが公開されることはありません。