iPhoneアプリ:電卓を作る その1

このエントリーを含むはてなブックマークはてなブックマーク - iPhoneアプリ:電卓を作る その1

これから数回にわたって電卓のiPhoneアプリを作っていきたいと思います。単純に作業手順だけでなく、どうやって設計するのか?まで伝えられたら良いかなと思ってます。もともとはゼミの資料にする予定だったのですが、せっかくなので公開しちゃおうということで(笑)

今回は難しいことは考えずに最小限の機能だけ実装していきましょう。
とりあえずの目標はiPhoneにデフォルトでついているこれ。

calc1

といっても、いきなりこれだけのものを作るのは大変だから、もっと手前の段階からスタートして、徐々に電卓へと仕上げていく予定です。ということで、電卓の前身であるカウンタから作っていきましょう。雰囲気はこんな感じ。野鳥の会がもってるやつのディジタル版ですね(笑)インタフェースはこんな感じ。

calc2

プラスボタンをタップしたら、数字がカウントアップされるという、なんとも簡単なアプリです。簡単ですが、iPhoneプログラミングに必要な要素はたくさん詰まっているので、丁寧に見ていきたいと思います。

まずはプロジェクトを作成します。Xcodeの「新規作成」-> 「ファイル」->「新規プロジェクト」を選択。プロジェクトの種類「Application」でテンプレート「View-based Application」を選択。プロジェクト名は「Calc1」にします。

最初にInterface Builderを使って、インタフェースを設計します。左側にある「グループとファイル」カラムから「Resources」フォルダの中にある「Calc1ViewController.xib」ファイルをダブルクリックしてください。IBが起動し、4つのウインドウが開くと思います。次に、Viewと書かれたウインドウにライブラリウインドウからパーツをドラック&ドロップします。今回は、次のように部品を配置してください。

calc3

配置できたら、UIButtonをダブルクリックして、ボタンの中に「+」を、同様にUILabelをダブルクリックして「0」を記入してください。また、UILabelのフォントを大きくしておきたいので、Viewウインドウで一度Labelをクリックし、フォーカスを当てた状態でインスペクタを次のように調整してください。

calc4

ここまでで、インタフェースの設計は一旦終了です。
次回はXcodeに戻ってプログラムを書いていきましょう。

iPhoneアプリ:電卓を作る その2

One Response to “iPhoneアプリ:電卓を作る その1”

  1. [...] iPhoneアプリと、そのプログラム iPhoneアプリを作る際に役立つプログラムを置いています コンテンツへ移動 ホーム紹介 ← iPhoneアプリ:電卓を作る その1 [...]

Leave a Reply

You must be logged in to post a comment.