よるみる

Swift初心者が20時間で入門してQRコードを読み取るiPhoneアプリを作った話。

iPhoneアプリを作ってみたくなったので、参考書を一冊買ってざっと勉強して作ってみました。

Swift初心者が20時間で作ったアプリ

公開ができるアプリを作ったわけではないですが、自分が作りたかった機能をまとめて、実装してみました。

Swift、iPhone開発歴は全くの0時間で、Androidアプリは5年前に一度、少しだけ作ったことがあるくらいのレベルです。完全なSwift初心者ですが、作ってみたいアプリができたので作ってみました。

最初に、私のプログラミング歴についてですが、C言語とかアセンブリは一通りやっていて、ArduinoやAVRで好きなものを作れるレベルで、主にバックエンドやアルゴリズム(制御系)を書いていた経験があり、中級と上級の境目くらいかなと、個人的には思っています。このWebはWordpressですが、自作のテーマを作っているというような感じです。

では、全くの初心者ではないじゃないか?と言われてしまいそうですが、iPhoneやAndroid開発は、画面の遷移などの処理やグラフィックの処理が入り、ここは今までやってきたプログラミングとはちょっと感覚が違うものだと思います。

個々の部分が8割以上を占めていた気がしますので、ここが肝なのだとも思っています。この画面遷移などを殆どやってこなかったので、初心者ということですすめます!

さて、実際に作ったアプリですが、Twitterにアップしたのでこちらの動画を見るのが一番早いかと思います。

作ったものは、QRコードを読み込むと、そのQRコードに対応した、バッジを取得できるというスタンプラリーのようなアプリケーションです。また、「koma2019」のように特定のIDを入力することでも取得することができます。これは、オフラインでのクイズイベントなどを想定して作りました。

QRコードを読み取る決済方法が増えてきているので、自分もQRコードを使って何か作ってみたいということで作ってみました。

時間の内訳

全くわからないことが多いと思ったので、とりあえず、本を買おうと思ってその本を一冊やることから始めました。

購入したのは、『本気ではじめるiPhoneアプリ作り Xcode 10.x対応』という本です。

Yahoo!の優れた技術者に与えられる黒帯という資格があるのですが、この黒帯を持った人が書いた本を購入しようと思ったら、最新版は出版されていなかったので、同じSBクリエイティブの本を購入しました。

基本はこの本で勉強することを主にして、5日間で作りたいものを作りました。

時間の内訳

  • 一日目(2時間)1章、2章を読む
  • 二日目(5時間)3章、4章を読みながら作る
  • 三日目(4時間)5章、6章を読みながら作る
  • 四日目(3時間)7章を読みながら作る
  • 五日目(6時間)実際にiPhoneアプリを作る

殆どを、iPhoneアプリの作り方、Xcodeの使い方を本で勉強をしました。

結論を言ってしまうと、『本気ではじめるiPhoneアプリ作り Xcode 10.x対応』がとても分かりやすかったです。

特に役に立ったのは、4章の計算機のようなアプリを作るところでの、画面の遷移の方法(データを受け渡して画面を遷移させる方法)、5章のTodo Listアプリを作りながら学ぶ、データの保存方法とTableViewの使い方、そして、この本の最大の特徴であろう、7章の外部のサーバーとの連携の3つです。

2章では、Swiftの文法のざっくりとした解説があり、個々の部分をじっくりと読むとプログラミングの幅を広げることができると思います。

本では、作りながら学べ、さらにはサンプルをダウンロードすることができるので、このサンプルとの見比べたりしながら、エラーを直していきました。

最終日の5日目は、ほとんど本から離れてSwiftのリファレンスを読み漁ったり、GitHubで使い方を読み漁るというようなことをやっていました。このあたりは、プログラミングの全くの初心者だと難しい部分かもしれませんが、徐々に慣れていくと思っています。

作ったQRコードアプリの解説

基本的に、QRコードや任意の文字列を読み込んだら、サーバーに問い合わせて、画像と対応するタイトルを取得するという処理をしています。

バックエンド(サーバー)は今回はGoogleのmBaaS、Firebaseを使いました。

アプリの遷移としては、まずはじめに、保存されている(すでに取得した)バッジを読み込み、表示を行います。QRコードではカメラを起動し、QRコードを読み取り、任意の文字列入力では、任意の文字列を入力するウィンドウを表示します。

それぞれ、任意の文字列を取得できたら、サーバーに問い合わせを行い、取得可能であれば、バッジの画像のURLとバッジの名前を取得します。

FirebaseではFirestoreに簡単なデータベースをつくり、Storageに直接画像をアップロードしました。

Komercoの画像取得の記事があったので、こちらを参考に設計をしました。

躓いたところやあったらよかったもの

最初に躓いたのは、Xcode10から11にアップデートされていたため、XcodeのUIが少し変更されていて、一部どこにあるのかがわからないものがありました。(Storyboardでボタンなどを追加するプラスボタンなど)

今回、Firebaseを使ったので、外部のライブラリを導入することとなったのですが、CocoaPodsというライブラリ管理ツールの追加たがわからず苦戦しました。どうやったらインストールされるのかや、Xcodeの再起動の仕方など、調べなかった私がいけないのですが、ざっくりやって反映されずにかなり時間をロスしました。

MacBook ProのTouchBar付きのモデルで開発を行ったのですが、iPhoneでの実機をテストする際にType-Cの変換ケーブルを使う必要があったのですが、ただただ、Type-CとLightningの一本の変換が必要ないケーブルがあったら、どれだけ、抜き差しが楽だったろうか。。。と思ってしまいました。

今回は、Kindle版の本を購入したので基本的にiPadで読んでいたのですが、目線が下に行きがちだったので、デュアルディスプレイや、iPadを上に持ち上げるアームなどがあったらもう少し、ストレスが少なったのかなと感じています。

最後に

殆ど、Xcode、iPhone開発の基礎知識の勉強ということになりましたが、ひとまず、自分の作りたかったアプリケーションを作ることができました。

まだまだ、初心者で、わからないことが多いので引き続き勉強をしていく必要があります。

CocoaPodsで様々なライブラリを作ったり、そもそものプロジェクトの管理の方法などの基礎知識を身に着けたいです。

時期MacOSで使えるようになるであろうSwiftUIにはかなり注目しているのでそちらを使っての開発も勉強してみたいです。

一度、自分でアプリをリリースしてみたいです。