iPhoneアプリを0から2か月でリリースするまでにした20のこと.m

SPONSORED LINK

20tasks0_00
20tasks0_00 Photo by Kaito Miwa

2か月間の全て公開します!

前回の記事iPhoneアプリを0から2か月でリリースするまでにした5つの事前準備.h に続いて、私が2か月の間実際に何をしていたのか、以下の20のカテゴリーに分けて紹介します。

【目次】
1.バイブル
2.ブレスト
3.初体験
4.はじめてのC
5.成功体験×2
6.必見①「サルでき」
7.必見②「もとまか日記」
8.必見③「Youtube」
9.必見④「海外サイト」
10.辞書×4
11.必読書
12.情報収集
13.ロゴ作成
14.写真撮影
15.追い込み
16.小技①「画像編集」
17.小技②「アイコン」
18.実機テスト
19.申請
20.待つ

それでは、一つずつ細かく説明していきます。

20tasks1_00
20tasks1_00 Photo by Kaito Miwa

小さな達成感を積んだスタート

まず、最初の2週間で行った7つのことをご紹介します。小さな成功体験を沢山積むことでモチベーションを維持でき、アプリ開発の基礎が身に付きました。

1.バイブル 〜まずはこの1冊!〜

何はともあれこの1冊です!

この本では、アプリを0から開発する上で必要なプロセス全てに加え、躓いたときの対処法やモチベーションを維持する方[email protected]本を書いて頂き、本当に感謝です。

2.ブレスト 〜アプリのコンセプトの効率的な決め方〜

「KJ法」ってご存知でしょうか?

KJ法について
複数人のアイデアをまとめるのに凄く便利です!

集団で意見を出し合うことをブレインストーミング(通称ブレスト)と言いますが、KJ法とはブレストで生まれた意見を整理する方法のことです。今回は3人で意見を出し合ってまとめる際にこの手法を使い、「バングラデシュの?を!に変える」というコンセプトが決まりました。

3.初体験 〜たった5分で完成した最初のプログラム〜

プログラミングの知識が全くない状態から本当に5分でプログラムが完成しました。

詳しくは『C言語すら知らなかった私がiPhoneアプリをリリースするためにやったこと』(以下、『すらぽん』と呼ばせて頂きます)のP30~P34に記されていますが、コードを1行も書かずに文字をiPhoneの画面に表示させることができます。

iPhoneアプリの開発ではXcodeというMacさえあれば誰でも無料で使えるソフトを使用するのですが、付随しているInterface Builderというツールを活用すると、Windowsのペイントやパワーポイントのように画像を編集したり、文字を打ちこんだりできるのです。初心者にとって非常に親切であり、私自身今回のアプリ作成でも多いに役立ちました。

※Xcodeを0から導入するまでの手順等は、Web上でも丁寧な解説がありますが、下の10.で紹介する開発本の方が図が多く、個人的には分かりやすかったです。

4.はじめてのC 〜苦しんでC言語を覚える〜

いよいよ基礎の習得です。

先ほど紹介したXcodeでiPhoneアプリを開発するにはObjective-Cというプログラミング言語を学ぶ必要があるのですが、私のようにプログラミング経験0の方はObjective-Cの基礎と言えるC言語を学ぶ必要があります。気が遠くなりそうですが、C言語は以下のサイトで、Objective-Cはアプリのサンプルを作っているうちに覚えることができますので、ここが踏ん張りどころです。

苦しんで覚えるC言語
本当に0からC言語の基礎をじっくり学べます!

正直に告白すると、この基礎勉強の段階が一番(文字通り)苦しかったです。ただ、『すらぽん』の言葉を信じて1週間で全20講座×2回を目標に、分からないところがあっても気にせず講座を進めました。今でも分からないところがありますが、それでも2回繰り返すことで今回アプリをリリースするだけの基礎力はつきました。

5.成功体験×2 〜1週間でアプリ2つ完成!〜

苦しい基礎学習の後の楽しい実践授業です♪

C言語の基礎学習が終わったので次はObjective-Cの基礎学習・・・はせず、ここでいきなり実践に入りました。『つくって覚えるObjective-C入門』の“スライドショー”アプリと、後述の「もとまか日記乙」のサイトにある“じゃんけん”アプリ、この2つのアプリの作り方を約1週間かけて覚えました。

つくって覚えるObjective-C入門 iOS対応
スライドショー、Twitter、RSSリーダーなどのアプリが0から簡単に作れます!

両アプリの解説ではXcodeの動かし方から、.hファイルと.mファイルの違いなど、0からアプリを作ろうという人にとって非常に分かりやすい開発の基礎が書かれており、ほとんど苦労なくアプリを2つ作ることが出来ました。実際にプログラミングしたアプリが思い通りに起動した時の喜びは計り知れず、この小さな成功体験が後で躓いたときの大きな支えになりました。

6.必見①「サルでき」 〜さるでもできるiPhoneアプリ開発〜

先ほど飛ばしたObjective-Cの基礎学習や、アプリをリリースする上で必要なDeveloper登録の手続きが面白いほど分かりやすく書かれています。必見です。※Developer登録は申請をしてから登録完了するまでに時間がかかる(1週間くらい?)のでお早めに!

サルにもできるiPhoneアプリの作り方
本当にサルでもできるかのような分かりやすさ&面白さです!

7.必見②「もとまか日記」 〜誰もが一度は利用するお役立ちサイト〜

上で紹介した“じゃんけん”アプリの他に7つのチュートリアルがあり、どれも非常に丁寧かつ分かりやすい内容になっています。他にも非常に分かりやすくまとまったiPhoneアプリ開発サイトリンク集があり、アプリ開発をしていれば誰もが一度は活用するサイトかと。必見です!

iPhoneアプリを作ってみよう:目次エントリー – もとまか日記乙
時間があればぜひ8つ全てのアプリ作成に挑戦してみて下さい!

20tasks2_00
20tasks2_00 Photo by Kaito Miwa

ゴールが見えてきた特訓期間

続いて3週目~4週目の活動内容です。この2週間でiPhoneアプリをリリースできるかもしれないという大きな期待と小さな自信を持てました。

8.必見③「Youtube」 〜ネットにはお宝チュートリアル動画が沢山♪〜

「アプリ開発成功の鍵はここにあり!」

と言えるくらい、Youtubeにはアプリ開発の勉強に役立つ動画がいっぱいです。ThenewbostonさんはObjective-Cの基礎学習からiPhone開発のノウハウまで100本近い動画をアップしていますし、iTunes Uを活用してスタンフォード大学で実施されたApple社のエンジニア等による授業も全て無料で見ることができます。

TheNewBoston – Free Educational Video Tutorials on Computer Programming and More! » Tutorials
自分が見たいテーマだけ絞ってみるのがお勧めです!

Youtubeで動画を探す時はちょっとしたコツがあります。それは自分が目指しているアプリの一部のコードを検索で入力することです。たとえば、私の場合スイッチで画面が切り替わるアプリを作りたいということで勉強していたところ、UISegmentedControlとうコード(クラス)が鍵になっていることが分かり、これを検索ワードにした結果、まさに自分が目指しているアプリの原型となるサンプルコードとチュートリアルに出会うことが出来ました。

9.必見④「海外サイト」 〜ネットにはお宝サンプルコードも沢山♪〜

チュートリアル動画はどのようにプログラムされているのか最初から最後まで見える点で非常に便利ですが、慣れてくるとサンプルコードを見るだけである程度の内容は分かるようになります。

そこでお勧めなのがStack OverflowGitHubという2つの海外サイトです。Stack Overflowは驚くほどの意見交換(質疑応答)がなされており、GitHubではアプリのサンプルをそのままダウンロードすることができます。どちらのサイトでも実際に販売可能なレベルのサンプルまで置かれており、アプリ開発で役立つこと間違いなしです。

ちなみに、英語力を懸念される方もいるかと思いますが、上記のサイトではあまり英語を必要としません。それよりも、大切なのはやはりコードそのものであり、コードの中身を理解できるかの方がよほど重要なのです。海外サイト以外にも日本語で意見交換の出来るWebサイト(サルできの寺子屋)Twitterアカウント(@iphone_dev_jp)もありますので、英語が苦手だからといってiPhoneアプリの開発を諦めないでください!

10.辞書×4 〜開発本のつかいかた〜

チュートリアル動画やサンプルコードを見ていると、「なんとなく分かった」気になるのですが、このままではバグが生じた時などに対処できません。

そこで、前回紹介した4冊の登場です。

・よくわかるiPhoneアプリ開発の教科書【Xcode 4対応版】
・つくって覚えるObjective-C入門 iOS対応
・iOSプログラミング逆引きリファレンス108 ~知りたいことがすぐわかるiPhoneプログラミングテクニック~
・iPhoneプログラミングUIKit詳解リファレンス

上記本たちは途中から辞書のように使っていました。だから、現在もなお本の内容全てを理解してはいません。ただ、必要なところのみに集中して効率良く勉強すること(=遅延評価勉強法)を心がけ、これが短時間でのアプリ作成に大きく役立ちました。

11.必読書 〜ヒューマンインターフェイスガイドライン〜

そして忘れてはならない必読書がアップル公式ドキュメントである『ヒューマンインターフェイスガイドライン』です。このガイドラインに沿っていないアプリはリジェクト(拒否)される可能性があるそうなので要熟読です。

150ページ近いボリュームで読む気が失せるかもしれませんが、どの章でもApple社のこだわり(哲学)が丁寧に述べられていますので、時間が許す限り読むことをお勧めします。

20tasks3_00
20tasks3_00 Photo by Kaito Miwa

とにかく足を動かしたバングラデシュ

5〜7週目はひたすらネタ集めでした。バングラデシュに実際に渡航し、ヒアリングしたり写真を撮ったりと慌ただしい日が続きましたが、足を動かすことをとにかく意識しました。

12.情報収集 〜考える前に足を動かすべし!〜

百聞は一見にしかず。

今回のアプリのメインテーマである「バングラデシュ」はアジア最貧国と呼ばれる国であり、『地球の歩き方』も昨年ようやくできたばかりです。そんな国の情報を集めるには、やはり現地に行くしかない。ということで、会社の夏期休暇全ての日にちを活用してバングラデシュに渡航しました。

バングラデシュではデザイナー1人、写真家2人との打ち合わせに加えて、1週間で50人近い人にヒアリングや写真撮影の協力をお願いしました。とにかく足を動かす、これがバングラデシュで一番心がけたことです。

13.ロゴ作成 〜絶対に譲れないアプリの芯〜

バングラデシュで最も時間をかけたのが、ロゴとアプリ名の検討でした。iPhoneアプリはiPhoneの画面上でも、iTunesストア上でも基本的にはロゴとアイコンしか表示されません。だからこそ、開発者誰もがロゴとアプリの名前にこだわるのです。

半角11文字(全角6文字)しか表示されないアプリの名前と、57×57ピクセルのアイコン。これらの制約とアプリのコンセプトを考慮して2日間悩み続けて生まれたのが、「Banglab(バングラブ)」という名前と、「!」と「B」を組み合わせたロゴになります。

14.写真撮影 〜今回使わなかった便利な方法の紹介〜

今回のアプリでは最終的に全て自分たちで撮影した写真を利用することが出来ましたが、写真が撮れなかった時の代案もありました。

それがCreative Commonsというライセンスのついた写真の活用です。Creative Commonsのライセンスのある写真は一定の条件を守れば2次活用ができるようになっています。以下の「igosso画像検索」というサイトでは2次利用ができる写真のみを検索できるようになっており、アプリ開発のみならずブログやHPを作る上でも役立つことでしょう。

igosso画像検索 : 無料で商用利用可能なフリー素材/写真
検索の条件も何種類か選べます!

20tasks4_00
20tasks4_00 Photo by Kaito Miwa

気合いで乗り越えたラストスパート

最後1週間はちょうどシルバーウィークと重なり、連休のほぼ全ての時間をアプリ開発に費やしました。精神的にも体力的にも苦しかったですが、それでもAppleストアにアプリが並ぶ光景を夢見て一気に走りました。

15.追い込み 〜諦めと拘りのバランス〜

「完成目標日まであと1週間、果たして何ができる?」

自問自答が続きました。嬉しいことにアプリや電子書籍は「更新」という機能があるおかげで、小さな誤字脱字や修正は容易に出来るのですが、それでも全体の方針は中々変更できるものではありません。

どうにかしてアプリを面白いものに出来ないか?再度ブレストを行って意見を出し合った結果、アプリの中に「!」するような秘密のページを入れようというアイデアが生まれました。残り2日でそれまでの1.5倍のコードを書く必要がありましたが、それでもアプリを少しでも面白くしたい一心で書ききりました。このこだわりのおかげで、(親バカながら)アプリが1.5倍は面白い内容になったのではないかと思います。

16.小技①「画像編集」 〜KeynoteとSkitchでAdobeいらず!?〜

最後の“仕掛け”を短時間でつくる過程で2つほど面白い小技を身につけることができたので紹介します。

まず1つ目は画像編集の方法です。これは以前AppBankのロゴはKeynoteで作成されているという動画を見て学んだのですが、Keynoteを使えばとても簡単に画像を編集できます。

Keynote: 画像作成もできてしまう最強プレゼンアプリ。インスペクタ・アルファ機能が神。村井の操作動画付き! : MacBank -Mac App Storeのおすすめアプリ-
テキスト&画像の配置やアルファ機能等、本当に便利なソフトです!

上記動画のようにして編集した画像をSkitchという画像切り取りソフトを活用して1ピクセル単位で切り取る。この2つのソフトを活用することでPhotoshopやillustratorといった高価で少々難易度の高いソフトを利用せずに画像を加工できました。

17.小技②「アイコン」 〜アイコンを一瞬で作る&見つける方法〜

そして2つ目の小技がアイコン作成です。icon makerというサイトでは512×512ピクセルの画像を用意すれば簡単にiPhoneアプリ風のアイコンを作成することが出来ます。自分のHPなどでアプリを紹介するときに役立つことでしょう。

それから、TwitterやFacebookをはじめとしたSNSのアイコンであれば、Iconfinderというサイトで見つけることができます。今回のアプリではこの2つのサイトには最後非常にお世話になりました。デザインに時間をかけることが出来ないという方はぜひ利用してみてはいかがでしょうか?

18.実機テスト 〜感動体験〜

あと3つです!

ここが最も盛り上がったところですが、Macに自分のiPhoneを接続してXcodeからプログラミングした内容を書き出します。詳しい方法は以下のサイトを参照して頂ければと思いますが、実際にiPhoneでアプリが動くのを確認できた時は思わず涙が出ました。

[上からお世話になった順] iPhoneアプリを実機で動かす | iPhoneアプリ
[iPhone 開発メモ] iPhone/iPod touch に自作アプリを転送する方法 | Sun Limited Mt.
iPhone実機テスト – iPhone プログラミング トピックス
[トラブル対応] iPhone実機転送エラー|cowのブログ

19.申請 〜最後に立ちはだかる難関〜

あと2つ!!

実際にiPhoneでアプリが正常に動くことを確認できたら、いよいよApple社にアプリを申請します。iTunes ConnectというWebサービスを活用して申請するのですが、これが少々面倒くさいのです。

ただ、ここまで来たらもう引き下がる訳にはいきません。私は2度ほど失敗しましたが、その失敗の原因と解決策もWeb上でしっかりカバーされていました。以下、申請時にお世話になったサイトです。

[上からお世話になった順] 各種データを用意 | iPhoneアプリ
iPhoneApp申請方法3:iTunes Connectへの申請登録 | デザイン × レゴ × アート
App StoreへのiPhoneアプリの登録手順のまとめ(Xcode4環境) | Facebook
[トラブル対応] Manson’s Theory: iPhoneアプリ申請の流れ
Manson’s Theory: iPhone アプリ申請時に気をつけるべきこと

20.待つ 〜焦って待つ事なかれ〜

これでラストぉぉぉ!!!

申請が無事に終わるとiTunes Connectで[Waiting for Review]というステータスになります。これが[in Review]を経て[Ready for Sale]になるという流れは知っていたのですが、いつ変化するかが分からないのです。

そこで、毎朝起きてはiTunes Connectをチェックし、昼休みの時間もチェックし、夜寝る前にもチェックし・・・という生活を送っていたのですが、結論から言うとステータスの変更については、メールでリアルタイムなお知らせが届きました。誰かのように焦ってApple社に電話をかけたりしないようお気ををつけくださいませ。

20tasks5_00
20tasks5_00 Photo by Kaito Miwa

アプリをリリースして思ったこと

そして10月1日、晴れて「Banglab」がAppleストアでリリースされました!その日の枕が水浸しになったことは言うまでもありません。

以上、あっという間の2ヶ月でしたが、生まれて初めてプログラミングに挑戦して実際にアプリをリ[email protected][email protected][email protected]いという思いでした。

だから、私の経験がどこまで参考になるか分かりませんが、出来る限り沢山の方にこの素敵な2ヶ月をシェアできればと思い、ブログにまとめた次第です。

最後になりますが、今回の「20のこと」の要旨を以下のスライドにまとめました。PDFとしてダウンロードも出来ますので、どうぞ自由にご活用ください。

以上、最後まで読んで頂きありがとうございました。
24歳の1年間でお世話になった全ての方々、本当に有り難うございました。

SPONSORED LINK