プログラミング

【実践で身につけるiOSアプリ開発】 10日で21個アプリを作った話

  /

クソアプリ Advent Calendar なるものを見つけたので投稿してみます．

クソアプリという言い方はあまり言葉遣いはよろしくないですが，ご容赦ください．

この記事は，クソアプリ Advent Calendar 2016の2日目です．

qiita.com


クソアプリ作成は基礎的な技術を身につけるには最適

素晴らしいサービス・プロダクトって，基本的には単純なことの組み合わせなんです．

例えば，iPhoneは，素晴らしい製品です．

しかし，とてもざっくりいうと「ミュージックプレーヤー」と「電話」を組み合わせなわけです．

はてなブックマークも，「ストックする」という機能と，「コメントを残す」という機能の組み合わせです．

このように，サービス・プロダクトを作る際には，なにかを組み合わせるということがキーになってくるわけです．

つまり，その根底にあるのは基礎的な技術です．

クソアプリとは，ここでは機能が少ないため，そのアプリ単体では使えないようなアプリのことを指します．

しかし，クソアプリ作成はシンプルであるため，プログラミング技術を習得するにはもってこいなのです．

これは，私が実際にクソアプリを短期間で集中的に作ってみた記録です．

事の発端

私は，iPhoneアプリ開発のスキルが欲しかったです．

プログラミング技術を上げるもっとも手っ取り早い方法，それは実際にコードを書くことです．

しかし，１人でよくわかんないアプリを作るのも面白くないし，続かないと考えた私は，以下のようなツイートを行いました．

f:id:McG:20161201234914p:plain

そう，Twitterという手を使い，誰かに監視される状況を自ら作ったのです．

その結果，わずか30分足らずで21個のいいねをいただき，わずか10日の冬休みにクソアプリを21個作ることになりました．．

ルール

クソアプリチャレンジを行う前にルールを決めました．

クソアプリチャレンジの期限は10日とする

大学の冬休み期間にアプリを21個作るという宣言を行ったので，必然的に10日以内に作るというルールが出来てしまいました．

アプリデザインにはこだわらず，出来ないところは妥協

細かいところまでこだわっている余裕はありません．エラーに悩んでいる時間ももったいないので，わからないところは素早く切っていきました．

1つのアプリにかけるのは5時間まで

多くのコードを書き，Swiftプログラミングになれることを目的をしているので，多くの時間を１つのアプリに掛けることはやめました．

学習費合計3000円までしか使ってはいけない

冬休みで出費も多かったので，あまりお金は使いたくありませんでしたw

ただ，なんか教材がないと勉強が出来ないので3000円までは使って良いことにしました．

今回はオンライン学習サイトUdemy
の
「完全攻略！初級者からプロになるためのiOS 9アプリ開発のすべて」※当時2500円
という動画教材を購入しました．

この動画教材は，安いかつとても丁寧と最高だったので，本当におすすめです．

他に図書館でアプリ開発の本を借りたりもしました．

作ったものはすべてTwitterにアップし，GitHubで公開する

Twitterで始めたことなので，フォロワーさんにしっかりやってることをアピールしていきます．

作ったアプリに「いいね！」をしてもらうことにより，モチベーションを保つことにもつながりました．

学んだこと，得たことは記録に取る

プログラミングって，やらないとすぐに学んだことを忘れてしまうので，軽くブログなどに記録をとっておくことにしました．

この6つのルールを行う前に決めました．

制作物一覧

10日間で作成したアプリたちを紹介します．

(注意)GitHubで公開しているソースコードはSwift2を使用しています．勉強なさる際，Swift3への読み替えを行ってください．

1個目 あなたのエネルギー量は？

f:id:McG:20151223201444p:plain:w200f:id:McG:20151223201456p:plain:w200

体重を入力すると，アインシュタインの特殊相対性理論からその人の持っているエネルギーを求めて，原発何基分が一年に作るエネルギー量かを計算するアプリです．

iPhoneアプリ開発時に，文字を表示するためのUILabel，そしてユーザがタップすることが可能なUIButtonの使い方について学びました．

また，Swiftでの四則計算，型変換の方法，ボタンやラベルとソースコードを関連付ける方法についての知識を得ました．

ソースコードはこちら

2個目 テストの点数何点？

f:id:McG:20151224001726j:plain:w200
f:id:McG:20151224001719j:plain:w200
f:id:McG:20151224001724j:plain:w200

乱数で0〜100までの点数をアプリ起動時に生成してくれます．

そして，プレーヤーは，その生成された点数を当てていきます．

プレーヤーが入力した点数が実際の点数よりも高いか低いかが表示されるので，繰り返し入力し，できるだけ少ない回数で点数を当てるゲームです．

if文，while文，for文などの基本的な構文を学びました．

基本的な構文については，他の言語とあまり変わらなかったので，それほど苦労はしませんでした．

UITextFieldを使って入力を受け取る方法や，アンラップについて理解しました．

ソースコードはこちら

3個目 世界のナベアツさんアプリ

f:id:McG:20151225134809j:plain:w200f:id:McG:20151225134811j:plain:w200f:id:McG:20151225134813j:plain:w200

一昔前にブレイクした芸人，世界のナベアツさんを覚えているでしょうか？

ボタンを押すとカウントが上がって，「3の倍数もしくは3の付く数字の時にアホになり，5の倍数もしくは5の付く数字の時に世界のナベアツさんがナルシストになる」というアプリです．

UIImageViewを使用して画像を表示する方法，UIImageクラスから画像のインスタンスを作成することが出来ること，constraintで画面サイズに依存せずにきれいにレイアウトをする方法を学びました．

ソースコードはこちら

4つめ タイマーアプリ

5分間で発表をする，LT(ライトニングトーク)専用のタイマーアプリ

スタート，リセット，ポーズ機能がついています．

f:id:McG:20151225161009j:plain:w250f:id:McG:20151225161044j:plain:w250

残り時間が少なくなると，真ん中のイラストがどんどん小さくなっていきます．

時間が来ると，別のイラストへと切り替わります．

f:id:McG:20151225161026j:plain:w250f:id:McG:20151225161048j:plain:w250

Timerの使い方，画像の拡大縮小を行う方法，ナビゲーションバーについて，バーにボタンを設置する方法，ボタンの見た目を変更する方法を学びました．

ナビゲーションバーっていうのは，アプリの上部のバーのことです．

いろんなアプリで使われているもので，これが使えると作れるアプリの幅がぐっと増えてきます．

f:id:McG:20161202004812j:plain:w350

ソースコードはこちら

5個目 RGB確認機

RGB値を視覚的に確認することが出来るアプリです．

f:id:McG:20151228220148g:plain:w300

一番上に，スライドバーがあり，それを調整することによって，RGBを指定できます．

指定した色と少しずれた色も同時に表示してあげることにより，色の細かな違いを確認することが出来ます．

SlideBarの使い方について学びました．また，TableViewと呼ばれる，一覧表示ができるUIパーツを使いました．

TableViewを使い時に，DelegateやProtocolについても学習しました．

ソースコードはこちら

6個目 タスク管理アプリ

iPhoneアプリ初心者が作る定番のタスク管理アプリです．

2画面で構成されていて，タスクリスト表示画面とタスク新規追加画面からできています．

完了したタスクはスワイプで削除することができます．

NSUserDefaultを使って，データを保存しておく方法を学びました．

これにより，アプリを終了しても消えないデータを扱えるようになりました．

また，今までは1画面によって構成されているアプリばっかりだったのですが，セグエを使うことにより，2つの画面を行き来するアプリを作れるようになりました．

ソースコードはこちら

7個目 情報収集アプリ

GithubとQiita，はてなブックマークが一括でみれるアプリです．

今回はWebコンテンツを扱ってみたかったので，3サイトが切り替えてみれるサイトを作りました．

Webコンテンツを表示する方法について学びました．デフォルトでは，httpは拒否されて，httpsだけしか許可しない設定になっているので，info.plistをいじって上げる必要があります．

Webサイトをアプリ内で表示できるということは，ブラウザを作ることができますね．

ソースコードはこちら

8個目 天気予報アプリ

入力した地域の天気を見ることが出来るアプリになります．

f:id:McG:20151230003101j:plain:w300

この写真では，「Uji」と地域を指定しています．

結果は，ただ天気予報サイトから撮ってきた情報を表示しているだけです．

これは，内部では，入力された地域に対応した天気予報ページのURLを生成する処理を書いています．

例えば，Ujiと入力されたら，http://天気予報のサイト/ujiといったようなURLを生成して呼び出しているわけです．

その為，UJIと入力されても，ujiと入力されても，Ujiと入力されても対応できるように，すべて一旦小文字に変換する処理を噛ませました．

入力された文字を切り抜いたり，大文字小文字に変換したりする文字列処理について学ぶことが出来ました．

ソースコードはこちら

9個目 エイリアンダンス

エイリアンがくるくる踊るだけのアプリです．

そろそろネタ切れになってきました．

アニメーションはなかなか使い所も多いと思います．

スタートとストップボタンもついてますが，それはタイマーアプリの知識を使って実装することが出来ました．

viewDidLayoutSubviewsメソッドや，viewDidAppearメソッドに関することも学びました．

ソースコードはこちら

10個目 3目並べ Twitter VS LINE

2人でプレイできる3目並べです．TwitterもしくはLINEを3つ並べたほうが勝ちです．

Vimとemacsとか，きのこの山とたけのこの里にしようかとか迷いましたが，TwitterとLINEになりました．

今回は，ほとんど1〜9個目のクソアプリの知識で出来ました．

コードをきれいにするために，Tagという機能を使い，コードの共通化を図りました．

例えば，プログラムでボタンにTagをつけておけば，ボタンがタップされた時にどのボタンがタップされたかをTagを使って判定できるというわけです．

ソースコードはこちら

11個目 私が通った道

私の居場所をリアルタイムで地図にマッピングするアプリです．(アプリを閉じてるときは動きません)

iPhoneアプリ開発で地図関係を使うときの手順について学びました．

MapKit，Core Location Frameworksを使いました．その周辺の地図を表示する方法，ピンを立てる方法などを学びました．ピンを立てる際には，メモなどを残しておくことも可能です．

ソースコードはこちら

12個目 私は今ここにいます

11個目で地図アプリを作ったので，もっと遊んでみました．

ユーザの状況をお知らせするアプリです．

移動速度まで測れます．

f:id:McG:20160101172316j:plain:w300

緯度・経度をもとにして住所を探索する方法，逆に住所から緯度・経度を求める方法，そして移動速度や方位，高度などを求める方法を学びました．

locationManagerメソッドを使うと，本当に簡単に移動速度や方位などをとれます．

せっかくiPhoneには優秀なセンサが数多くついているので，使わないと損ですね．

ソースコードはこちら

13個目 お年玉をください

1回シェイクすると，10000円以下のお金がランダムがもらえるが，3%の確率で死んでしまうゲームです．

死んでしまう前に，「やめておく」ボタンを押す必要があります．

死んでしまうと0円という扱いで，以下に多くのお年玉をもらうかというゲームです．

たまに死ぬ確率が2倍になったり，もらえるお金が2倍になったりする確変もあります．

シェイク・スワイプに反応する方法や，効果音の出し方を学びました．

加速度センサを用いて，シェイクに反応させてみました．

ただボタンをタップするだけではなく，シェイクという動作によってお年玉をもらえるというシステム，面白いかなって思いました．

ソースコードはこちら

14個目 音楽プレイヤー

13個目のアプリで，効果音を出すことが結構簡単にできたので

次は音楽プレイヤーを作ってみることにしました．

タイマーアプリの知識も使って，スタート，ポーズ，巻き戻し，スクラブ再生なども出来るようにしました．

シャッフル再生にも対応しております．

再生できる音楽は，すべてこなつくんの曲．

こなつくん… 彼もまた，冬休みにいいねきた数だけ作曲をするなどという無謀なことにチャレンジした方です．

音楽の再生は，割りと簡単にできました．

しかし，音楽再生時には，try〜catch構文を使って，音楽の再生に失敗したときなどのエラーを考えなければいけませんでした．

そのため，ちょうどいい機会なので，Swiftの例外処理についても学びました．

ソースコードはこちら

15個目 天気予報その2

天気予報アプリその2です．

8個目のアプリでも，天気予報を作っているのですが，あの天気予報アプリは，既存の天気予報サイトを貼り付けただけでした．

そこで，今回はWebサイトから必要な情報だけを取ってきて表示してあげる形式に変えることにしました．

f:id:McG:20151230174127j:plain:w250

必要な情報だけを取ってきているので，8個目で作った天気予報アプリよりもシンプルになっています．

Webページから情報を選定して取得するために，WebページのHTMLを切り出す，スクレイピングという技術について学びました．

エンコード・デコード処理，そして取得したHTMLから要素を抽出する方法について学びました．

地図アプリの知識を活かして，自分が今いる場所の天気を自動で取得する処理も書いたりしました．

ソースコードはこちら

16個目 ブログリーダ

ブログを読むことが出来るブログリーダーアプリを作りました．

GoogleのAPIを使用して，JSON形式でブログタイトルや記事を取得します．

そして，CoreData(データベース)を使ってデータを保存したので，一旦読み込んでおけば，ブログ記事をオフラインで読めることが出来るようにしました．

CoreDataの本当に基礎的な使い方を学びました．

iOSでデータを保存する際，6個目のタスク管理アプリで使った，NSUserDefaultを使うこともあるのですが，大規模なデータはNSUserDefaultでは扱えません．

そこで，CoreDataを使う，もしくはNiftyCloudMobileBackendなどのMBaaSを使う必要があります．

いい機会だと思い，CoreDataについてとても軽く触れました．

CoreDataは奥が深いので，触らなかった部分も多数あります．

ソースコードはこちら

17個目 クソ画像送りつけ機

知り合いが運営しているTwitterアカウントで，クレイジー(´・∀・｀)bot(@kusorep_crazy)というのがあります．

そのクレイジー(´・∀・｀)botへクソ画像を送りつけるためだけのアプリです．

iOSのカメラ・アルバム機能及びTwitterへの投稿機能を使ってみたかったので作成したアプリです．

カメラを使ってアプリ内で写真を撮る方法，及びカメラライブラリに保存されている写真を使用する方法を学びました．

また，Socialフレームワークを用いて，Twitterへの投稿，Twitterログイン機能などを実装しました．

ソースコードはこちら

18個目 iOSでARをやってみる

クソアプリとは言え，これだけの量作れば，iOSアプリ開発もだいぶ慣れてきました．

そこで，AR(拡張現実)をやってみました．

Appleの3DフレームワークSceneKitと，VuforiaというAR向けモバイルビジョンプラットフォームを使用して作りました．

ARということで，シミュレータでは起動できず，実機を使わないとビルドすら通りません．

なんかすごいことやってるように見えますが，圧倒的時間不足に付き，ほとんどサンプルを動かしただけです．

参考リンク: Xcode + vuforiaでARアプリを動かしてみる – しめ鯖日記

19個目 立体物認識アプリ

18個目で使用したVuforiaは，立体的なARマーカも検出できるということで，物体を検知し，その周辺にラーメンどんぶりを表示させてみました．

Vuforiaのリファレンスをみながらチマチマと作業した結果，良い感じになりました．

参考リンク: SceneKit + Vuforia でARアプリを作ろう – Qiita

20個目 記念地記録アプリ

21個のクソアプリチャレンジも終盤ということで，それなりにしっかりしたものを作ってみました．

今まで行ってよかった場所などを記録しておくことが出来るアプリです．

MapKitの知識，そして場所やコメントを保存するためにNSUserDefaultの知識を使って作りました．

また，複数ページからなるアプリのため，セグエも使いました．

今まで学んできたいろいろな知識を統合して作りました．

これくらいになると，デザインや機能面でのブラッシュアップをかければリリース出来るレベルにも持っていけそうです．

ソースコードはこちら

21個目 障害物避けゲーム

ラストは，ゲーム作成にチャレンジしました．

許可を頂いたフォロワーの皆さんのアイコンを拝借し，障害物避けゲームを作成しました．

Flappy Birdのようなゲームを目指しました．

BGMには14個目の音楽プレイヤーのところで紹介したこなつくんの音楽を使用しています．

SpriteKitを使用してゲームを作りました．

ゲームづくり自体が始めてなので，かなり多くを調べながらやりました．

記念すべき21個クソアプリチャレンジのラストなので，結構頑張って作りました．

SpriteKitの使い方，アニメーションの仕方，重力のかけ方，衝突判定やスコアの付け方など，様々なことを学びました．

ソースコードはこちら

最後に

こんな長文記事を読んでいただきありがとうございました．

見ての通り，はじめはXcodeの使い方もよくわからず，iPhoneアプリなんて全く作ったことなかった私が，たった10日でかなりスキルを上げることが出来ました．

クソアプリでも，作ったものをTwitterなどで公開することによってフィードバックを得られ，モチベーションも維持されます．

黙々と本を読んで勉強するってめちゃめちゃ難しいので，お時間がある方はやってみるのも面白いと思います．

このクソアプリチャレンジを行ってから約11ヶ月，今ではiPhoneアプリの作り方を教えるメンターとしても活動しています．

www.yukisako.xyz

また，このクソアプリチャレンジで学んだことを使って，実際にアプリリリースも行っています．

www.yukisako.xyz

クソアプリチャレンジの目的は，クソアプリ作成を通して，基礎的なスキルを楽しく学ぶことでした．

最終的にその基礎スキルの組み合わせでアプリリリースまで行けることを考えると，決して無駄な行動ではなかったと思います．

みなさんも，挑戦してみてはいかがでしょうか．

関連記事

プログラミングスクール無料体験!! 1週間無料でプロに質問しまくってみませんか？

１ヶ月でWebサービスをリリースできる!? TechAcademyを受講してみました!!

公式LINEに登録してビジネスを学ぼう
無料LINEマガジンへの登録で、5つの豪華特典をプレゼント！
  1. 日本一わかりやすい「経済的自立を果たす人生攻略の10ステップ」（33分23秒）
  2. 見るだけで売上3倍は確実。「時給10円から年商10億」に至るまでの全ての道のり（39分15秒）
  3. 有料講演会の内容を公開。最短最速で0→1を立ち上げる起業術（1時間08分35秒）
  4. 起業初心者へ向けた即金で10万円を稼ぐ具体マニュアル（PDF24ページ）
  5. 資本主義社会においてお金持ちになる5つのルール（17分36秒）
その他、有益なコラムを完全無料で閲覧し放題！
\豪華特典を今すぐゲット/
LINEマガジンの登録はこちら
RELATED POST