みなさんこんにちは、エディターのさんぺーです。
 |
人物紹介：さんぺー エディター。フロントエンドエンジニア連載の編集担当なのに、プログラミングの知識がなくてつらい。 |
|---|
プログラミングなんて全然できないんですけど、もしできるようになったら、アプリを作りたいんです。なぜなら！
ワンチャン大儲けできるから……！
でも、プログラミングスキルは一朝一夕で身につけられるほど簡単なものではありません。こんな無知な状態では、アプリ開発なんて夢のまた夢…………
でもなかった！
ジャジャン！ こちら、私が作った恋愛ゲームアプリです。初心者にしてはまあまあじゃないでしょうか？ 恋愛×ゲーム×美少女で、お金になりそうな要素を詰め込んでみました。
しかもこれ、わずか1日足らずで開発したものなんです。私みたいな超初心者がどうしてアプリ開発をできるようになったのか、その全容をお伝えします。
動画学習サイト「Udemy」でアプリ開発を学ぶ
アプリの作り方を教えてくれたのは、「Udemy」というWebサービス。
Udemyはオンライン学習プラットフォームで、「Javascript初心者講座」や「英語面接術」などさまざまなノウハウが動画で集められています。講座の開設は誰でもできるため、日々その数は増えてつづけて今では40,000コースを超えているそう。
その膨大な講座たちの中に、私が求めていた内容がありました。
【1日完結】超入門iPhoneアプリ開発 iOS 9 / Swift対応
超入門iPhoneアプリ開発 iOS 9 / Swift対応
（3月31日（木）まで、LIGブログ限定価格でキャンペーン中。）
はじめは「超入門とか書いてあるけど、まったくプログラミングの知識がないのは無理でしょ……？」と思っていました。
しかし、コースの概要に
本コースは、MacPC作業初心者、プログラミング・iPhoneアプリ開発未経験対象の”超入門コース”です。
えっプログラミングはおろか、PC作業が初めてレベルでも問題ないの？ うん、これなら私でもいけるかもしれない。そう感じて迷わず受講しました。
大儲けを目指し、恋愛ゲームアプリを作ります
ただ講座を受けるだけでは、私の野望を達成することはできません。学んだことを活かすために、アプリを企画してみました。
冒頭で紹介したアプリの企画がこちら。
二択で進んでいく、簡単な恋愛シミュレーションゲームです。実際のゲームアプリの作り方とは違うと思いますが、これぐらいシンプルな作りなら初心者の私でもかたちにできるはず。
Udemyで学習しながらアプリ開発開始！
どうやって開発したのか、さっそく紹介していきたいと思います。
Udemyでは、Swiftとはなにか、プログラミングやコンパイルとはどういったことなのかなど基礎知識から学んでいきました。そこで学んだ知識をもとに、アプリ開発の流れをまとめていきます。
1. アプリ開発ツール「Xcode」をインストール
まずは、アプリ開発のための環境を用意しました。アプリ開発には「Xcode」という、Appleが出しているアプリ開発ツールを使います。
https://developer.apple.com/jp/xcode/index.html
「Xcodeはユーザが直感的にアプリを作れるようになっていて、1からすべてをプログラミングするのではなく、Xcodeに搭載されているアプリ機能のテンプレートを加工していくことでアプリ開発ができます」
Xcodeを使えば、アプリ画面のデザインや、「Objective-C」や「Swift」といった言語を使用したプログラミングなど、アプリ開発に必要な作業ができるそうです。
まずは、App StoreからXcodeをインストールしました。
Xcodeを開くとこの画面が出てくるので、「Create a new Xcode project」に進みます。「Get started with a playground」に進むと、プログラミングの練習などができるようですが、今回のアプリ開発ではプログラミングの練習は一切していないので、使いません！
すると、こちらの画面に移行するので、「Single view application」を選択して「Next」を押します。これがアプリ開発の1番基本のテンプレになります。他のものは本格的なメディアアプリやゲームアプリに合ったテンプレになるのですが、まずは基本のテンプレから触っていきます。
つぎは、こちらの画面に移行するので、アプリの名前や言語、デバイスを選択しました。今回はproduct nameを「simulationgame」とし、languageでは「Swift」を選択します。
「Next」を押して、保存先をファイルやデスクトップなどに指定し、「Create」を押して、Xcodeの準備が完了！
Xcodeの準備が整うと、上記の画面になります。
こちらの記事では詳細を省きますが、Udemyの講座ではversionの扱い方やアプリアイコンの設定方法、実際のiPhoneで動作をシミュレーションする方法などを丁寧に教えてくれました！
2. アプリ画面をデザインしよう
「Main.storyboard」に移動して、企画書を元にアプリを制作していきます。
「アプリ画面のデザインでは、アプリ機能のテンプレートである“ライブラリ”を使っていきます。いろいろな機能のライブラリがあるので、ほしい機能を直感的に追加していきましょう」
まずはゲームにおけるストーリーの数だけ、画面の数を増やしていきます。1つの画面ごとにデザインして、画面遷移の流れを指定してあげました。
つぎに、画面を遷移させるためのボタンを追加していきます。追加したら、このボタンが押されたらこのページにいくんだよーっと指定してあげるだけ。簡単ですね！
そして、こちらがゲームの全体像になります。恋愛シミュレーションゲームなので、ハッピーエンド編とバッドエンド編を用意しました。ハッピーエンド編は、わかりやすいように背景を黄色に。
3. 画像やセリフを挿入しよう
画像やセリフの挿入も、「ライブラリ」の機能をドラッグ＆ドロップで追加していくだけ。
Xcodeに画像をアップロードして、その中からどの画像を使うのかを選択するのみ。今回は全画面で女の子の画像を設定していますが、サイズも調整することができます。
また、セリフでは文字色や文字の大きさを変えることもでき、GoogleドキュメントやWordのような仕様になっているので簡単です！ 今回は、セリフの背景に灰色の枠の画像を入れることで、より恋愛シミュレーションゲームっぽくしてみました。
4. アソシエイト機能でプログラミングをしよう
アプリ画面のデザインが終わったので、プログラミングに移ります。とはいっても、今回のアプリはかなり簡単な仕様なので、ほぼ自動のプログラミングだけで済みました！
「“Main.storyboard”の画面に◯が重なっているアイコンがあります。このアイコンを押すと「アソシエイト」という、画面デザインからソースコードに紐付けできる機能が使えます。画面デザインの際に紐付けしたように、機能をソースの部分に紐付けてあげれば、自動で記述してもらえます」
◯が重なっているアイコンを押すと、右側にごにゃごにゃしたコードらしきものが出てきました。この意味はとりあえずわからなくても大丈夫そうです。どこに記述すべきなのかは、講座で教えてもらうことができました！
そして、このように「ボタン」からアソシエイト機能の方へ紐を引っ張ってくることで……
こんな風に自動でコードが出現しました！ ボタンがどんなアクションを起こすかまでを自動でプログラミングしてくれるので、プログラミングがわかんなくてもかたちになります……！
あとは、パソコン上やiPhone上などで実際の動きを見てみて、想像と違うような動きをした箇所を直していきます。
5. アプリの完成！
これで、アプリが出来上がりました！！ プログラミングスキルがない私でも、ここまでかたちにすることができるなんて！
試しに、男性社員に遊んでもらうことに。
「え、クリアできない」「ツンデレめっちゃむずかしくない？ 怒られちゃったよ」「（食い入るように見つめる）」
うんうん、楽しんでもらえたみたいです。しかし、このままだとリリースするアプリとしては機能やデザインがショボいので、もっと勉強してからブラッシュアップしていこうと思います。一儲けへの第一歩だ！
講座ではこんなことも学びました
超入門iPhoneアプリ開発 iOS 9 / Swift対応
（3月31日（木）まで、LIGブログ限定価格でキャンペーン中。）
今回受講した講座ではもっと踏み込んだ内容も教えてもらえたので、その一部をちらっとご紹介したいと思います。
1. 自分でプログラミングをする方法
今回の記事ではほぼ自動のプログラミングだったため、自分でプログラミングする工程がなかったのですが、作るものによっては「アソシエイト」機能だけでは動きを指定できないものもあります。
例えば、このようなカウンターアプリでは、数字が1ずつ増えたり減ったり、リセットボタンで0に戻したりといった動きをプログラミングをする必要があるんです。また、マイナス値にはならないようにするために、1番小さい数字は0だよーということも指定してあげます。
講座では、そんな風に自分でプログラミングする方法や記述の仕方も教えてもらえました。
上記にある「ViewController.swift」に移動して、詳細なプログラムを記述していきます。どんな記述をすればいいのかもわかりやすく教えてもらえました！
2. 「AdMob」でマネタイズする方法
また、講座ではアプリをリリースする際のマネタイズ方法として、「AdMob広告の実装」までを教えてくれます。
- 「AdMob」とは？
- Googleが提供しているアフィリエイト型の広告ネットワーク。広告がクリックされる度に広告収入を得ることができる。
これでアプリ開発＆広告収入を得る方法を知ることができました。マネタイズ方法を初心者のうちから知っておくことで、アプリ開発を本格的に学ぶモチベーションが俄然上がります（☆_☆）
さらに本格的に学ぶなら
アプリをリリースするには、もっと本格的に作り込んでApp Storeの審査を通る必要があります。「もっともっとアプリ開発を勉強したい！」という方におすすめなのは、「完全攻略！初級者からプロになるためのiOS 9アプリ開発のすべて」というコース！
「完全攻略！初級者からプロになるためのiOS 9アプリ開発のすべて」
27時間の講座で、XcodeやSwiftなどの初心者向けの説明から、位置情報の取得やシェイク機能の実装まで、本格的なアプリ開発を学べるそう。こちらのコースも3/31までLIGブログ限定価格になっています。やった！
まとめ
私が受講した講座は3時間ほどのものですが、実際に手を動かしならでも5時間ほどでコースを終えることができました。自分で手を動かしながら受講していくと、アプリ開発する際に覚えていることが多いのでおすすめです！
Udemyではこうしたアプリ開発向けの講座もあれば、全くジャンルの異なる英会話やデザイン、ゴルフ、カメラなどの講座もあります。知らなかったジャンルにチャレンジするも良し、得意分野をさらに伸ばすも良しなUdemyで、ぜひ自分のスキルアップを狙ってみてください。
