開発基礎トレ1:ライブラリで見た目を作ろう!

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > 開発基礎トレ1:ライブラリで見た目を作ろう!

2009/08/13 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

ロ儲け予備軍のみなさま、お待たせ致しました。

今回より新章突入でございます。
機材準備とウォーミングアップからの卒業、基礎トレへの仲間入り。

自分で作ってみるの巻です。

ワタクシ思いますに、
IT系モノ作り技術の身につけ方は

・STEP1 理屈を聞く
・STEP2 大雑把に情報を仕入れる
・STEP3 手当り次第やってみる
・STEP4 1個ずつ精度を上げる
・STEP5 なんとなく最初に聞いた理屈が納得できるようになる
・STEP6 理屈の上で自由自在に技術が使えるようになる

この順番が一番良いんじゃないかと。

今を過ぎ去りし昔、ワタクシがまだスーパーサ○ヤ人だった頃、
よく「(プログラム)言語は1週間で使えるようにしろ」と言っておりました。

怖っ。

で、実際にそれくらいのスピード感でやっておりました。
プロジェクト開始から2週間も言語習得に時間をかけてるヴァカがどこにおる、と。

まさに生き馬の目を抜く日々ってやつでございます。

でも今考えてみると。
これはSTEP6までを1週間って意味じゃなくて、
STEP3までを1週間でやれってことなんですよね。

どうせお勉強と実戦は違いますし、
実戦の方が精度を上げるのにいろいろと都合が良いので、STEP4以降はやりながらでOK。
ってわけです。

嗚呼、私の言葉足らずでいったいどれくらいの人に迷惑を。。。

ということで、このiボロ実験室でも、
登録、環境インストール、テンプレートチェックの次は、
手当り次第にやってみよう、という流れで進めます。

ここは基礎トレ、スクワットみたいなものです。
やっておけばやっておいただけ、あとで応用技の習得が楽になります。

準備不足の方は今一度環境設定をお願いしますね。

まず何からやりましょうか。
考えるまでもないですね。楽しいことから先です。

XcodeでView-basedテンプレートを開いて、Interface Builderまで辿り着きましょう。

開発基礎トレ1:ライブラリで見た目を作ろう!

Interface Builderのお話の時に少しだけ触れた、ライブラリの画面をご覧ください。
Interface Builderのかんたん取扱説明書

上の画像は、Library>Cocoa Touchの下にある、

・Controllers
・Data Views
・Inputs & Values
・Windows, Views & Bars

を並べたものです。

Interface Builderのお話の時に、これらは「プログラムの図書館」とご説明しました。
ゼロから自分で作らなくても、借りて使えるプログラムなんです。

ここから試してみようじゃないですか。

Controllersはパッと見なんだかよくわからないので、
Data Viewsの「Date Picker」なるものをクリック&ドラッグしてみましょう。

開発基礎トレ1:ライブラリで見た目を作ろう!

それっぽいものがくっついてきましたよ。

これを一緒に開いているビュー編集ウィンドウにポイッと置いてみましょう。

開発基礎トレ1:ライブラリで見た目を作ろう!

置けました。

何コレ。
終わり?
コレで終わり?

そうなんです。
ライブラリから借りた部品の設置はたったこれだけなんです。

調子に乗っていろいろ設置してみましょう。

開発基礎トレ1:ライブラリで見た目を作ろう!

俄然それっぽくなってきましたよ。

なんだかやたらと位置がぴったり揃っていることにA型の型なら気がつくかもしれませんが、
ビュー編集ウィンドウのスナップ機能は結構しっかりしていて、
ドラッグしてくると自動的に場所を揃えようとしてくれます。

イイ、非常にイイ。こういうの。

次にインスペクタをいじってみましょう。

開発基礎トレ1:ライブラリで見た目を作ろう!

切り替えスライダーのタイトルを直して、

開発基礎トレ1:ライブラリで見た目を作ろう!

あっちこっちのタイトルを直して、

「家電コントローラー」の完成です!

いや~、できましたね。
作業時間5分。

これを誰が5分で作ったと思いますか?

え?動かないだろって?

いいんです。

まずは「ライブラリから部品借りて設置するのは超簡単」ってことダケ
覚えればいいんです。

気が済むまでぐりぐりいじってみてください。

開発基礎トレ1:ライブラリで見た目を作ろう!

色変えたり、「Date Picker」をタイマー表示にすることもインスペクタからできちゃいます。

なにこの山手線正面のような見た目!ぷぷー!ウケる~。

と、
アナタだけのアプリケーション(の見た目)、思う存分楽しみましょう!

次回はアウトレットとアクションの使い方です。
開発基礎トレ2:アウトレットとアクションの使い方

関連する記事:


Advertisement