読者です 読者をやめる 読者になる 読者になる

プログラマーの第一歩!「Hello World!」と表示する超簡単なiPhoneアプリの開発

プログラミング iPhoneアプリ

f:id:yoshitokamizato:20161125231020j:plain

「iPhoneアプリの開発」と聞くと、一見難しそうなイメージがありますが、実は驚くほど簡単に作製できるものもあるんです。

それが

 

Hello World!と表示させるだけのアプリ

 

です。

もうほんとそれだけ。

シンプルすぎてジョブズもびっくり。

しかし、シンプルが故に簡単。(当たり前か)

 

今回は、そんなアプリの開発法を紹介します。

この記事を読めば、今日からあなたもHello World!を表示させるだけのアプリを開発できるエンジニア仲間入りです。

やったね!

 

 

Hello Worldとは?

さっきからハローワールドハローワールドゆうてるけど、それなんなん?」って人のために説明します。

Hello Worldは、直訳すると「こんにちは世界」って意味です。

そのまんまでごめんなさい。

 

この言葉は、これからプログラミングを始める人たちが儀式的に表示させる、いわばプログラミング開始の呪文のようなものです。

これを、コードを書いてコンピュータ上で表示させることによって「やぁ、ぼくは今日からプログラミングの世界に足を踏み入れたよ!こんにちは!ふつつか者だけどよろしくな!」ということを伝えるんです。

 

ちなみに、Hello Worldしたからといって特に誰も答えてくれるわけではありません。

妙な期待を持って挫折しないように気をつけましょう。

あなたの友達はパソコンです。

 

それでは早速、アプリの開発にとりかかります。

 

アプリ開発

このアプリは、慣れてくると5分以内に開発できるようになるので、ぜひ根気強く挑戦してみてください。

プログラミングが難しく感じるのは最初だけです。

一度やり方がわかれば、あとはどんどんスキルが成長していくので、楽しみながらやってみましょう。

 

プロジェクトの立ち上げ

まずは、プロジェクトを立ち上げます。

Xcodeを起動すると、下のような画面が開くので、そこで「Create a new Xcode project」を選択します。

f:id:yoshitokamizato:20161125233335j:plain

 

次に、「Application」を選択します。

f:id:yoshitokamizato:20161126000002j:plain

 

「Single View Application」を選択。

f:id:yoshitokamizato:20161126000059j:plain

 

アプリ名となる「Product Name」を入力。

この場合は、Hello Worldとつけときます。(名前はなんでも構いません)

f:id:yoshitokamizato:20161126000225j:plain

 

「Organization Name」は適当に自分の名前を入れときます。

f:id:yoshitokamizato:20161126000338j:plain

 

「Organization Identifier」も適当に。

これでもかというくらい適当に。(ビジネス目的の場合は真剣に)

f:id:yoshitokamizato:20161126000421j:plain

 

「Language」は、Swiftを選択します。

「Swiftって何?」って方は、こちらの記事を参考にしてください。

f:id:yoshitokamizato:20161126000636j:plain

 

「Devices」は、作製したいアプリによってiPhoneかiPadを選ぶのですが、今回に関しては何でもいいのでUniversalを選択します。

そしたら、右下の「Next」を選択。

f:id:yoshitokamizato:20161126000816j:plain

 

保存先を選択します。

今回は、デスクトップに保存しました。

f:id:yoshitokamizato:20161126001102j:plain

 

開発開始

アプリの立ち上げが終わったので、いよいよ開発に取りかかります。

立ち上げが終わると、こんな感じの画面になります。

f:id:yoshitokamizato:20161126001146j:plain

 

画面の左側に「Main.storyboard」があるので、そちらをクリックします。

f:id:yoshitokamizato:20161126001537j:plain

 

そうすると、こんな画面になります。

f:id:yoshitokamizato:20161126001622j:plain

 

その右上にある、こういうボタンをクリック。

f:id:yoshitokamizato:20161126001911j:plain

 

そうすると、「Simulated Metrics」という項目が右上に出てきます。

f:id:yoshitokamizato:20161126002350j:plain

 

そこの、「Size」プルダウンメニューから、「iPhone 4.7-inch」を選択。

f:id:yoshitokamizato:20161126002453j:plain

 

そうすると、こんな画面になります。

f:id:yoshitokamizato:20161126002800j:plain

 

ここの、赤枠の部分にiPhoneと同様の表示がされるのですが、このままではものっそい見づらいです。

f:id:yoshitokamizato:20161126003042j:plain

 

なので、境界を左側に引っ張って画面を広げます。

f:id:yoshitokamizato:20161126003538j:plain

 

そうすると下のようになるので、隠れているiPhone画面を左に二本指でスライドさせて引っ張り出してきます。

f:id:yoshitokamizato:20161126003855j:plain

 

そうするとこんな感じ。

やっとiPhone画面が見えましたね。

f:id:yoshitokamizato:20161126004013j:plain

 

次に、画面右下のパネルから「Label」と表示されているものを探します。(このLabelにHello World!と入力します)

f:id:yoshitokamizato:20161127204000j:plain

 

少し下の方にスライドすると「Label」があります。

f:id:yoshitokamizato:20161126004256j:plain

 

これを、iPhone画面の方にドラック&ドロップ。

f:id:yoshitokamizato:20161126004523j:plain

 

次に、画面右上のパネルから「Label」の内容を「Hello World!」に編集します。

f:id:yoshitokamizato:20161126004906j:plain

 

「Label」と書かれた部分を「Hello World!」に変更。

f:id:yoshitokamizato:20161126004739j:plain

 

そうすると、iPhone画面の方にこのような表示が。

でも、このままでは何を書いているかよくわかりませんね。

f:id:yoshitokamizato:20161126005038j:plain

 

なので、この文字を選択し、領域を広げます。

f:id:yoshitokamizato:20161126005311j:plain

 

そうすると、「Hello World!」という文字が見えてきます。

f:id:yoshitokamizato:20161126005356j:plain

 

シミュレーターで実行

いよいよシミュレーターを立ち上げ、きちんと「Hello World!」が表示されるか確かめます。

緊張の一瞬ですね。

落ち着け落ち着け。

 

こちらから、シミュレーターの種類を選びます。

f:id:yoshitokamizato:20161126005602j:plain

 

今回は、何となく「iPhone6」を選択。

f:id:yoshitokamizato:20161126005741j:plain

 

で、再生ボタンをポチッ!

f:id:yoshitokamizato:20161126005848j:plain

 

少し時間はかかりますが、シミュレーターが立ち上がって「Hello World!」が表示されます。

f:id:yoshitokamizato:20161126010145j:plain

 

というわけで、これで「Hello World!」を表示するアプリを開発することができました。

これであなたも、プログラマーとして小さくも大きな一歩を踏み出したわけです。

 

で、だから何?

 

とか言わないでね。

心折れるから。

これでも一応、立派なアプリです。

シンプル・イズ・ザ・ベスト。

ぜひ友達に自慢しまくりましょう。

そうするともれなく「で、だから何?」と言われるでしょう。

 

 まとめ

ここまでくると気づくかもしれませんが、iPhoneアプリはあまりプログラムコードを書かなくても開発することができるんですよね。

今回に至っては、一度もプログラミングらしいことしてませんからね。

部品を配置して、そこに「Hello World!」と文字を打って終わりです。

 

同じように、もし他のアプリを開発するにしても、Rubyほどたくさんコードを書く必要はありません。(そもそもRuby自体もコード短いけど)

だから、プログラミング初心者にはiPhoneアプリの開発はオススメです。

簡単に楽しく、プログラミングの基本的な概念を学べるので。

 

もしこれからプログラミングを始めるなら、ぜひあなたも「Hello World!」と表示させるだけのアプリから開発してみてください。

そしてぼくに、TwitterやFacebookなどで「Hello World!って表示させるアプリ開発できたよ〜!!」ってメッセージを送ってみてください。

そうするともれなく

 

で、だから何?

 

と返します。

あなたのご報告、お待ちしております。