開発基礎トレ３：オリジナル画像への切り替え

見た目のドレスアップ、今日はオリジナル画像の設定方法のお話です。

開発基礎トレ１と２で、
ライブラリの部品を使った簡単アプリ開発をやってみました。

まだ読んでない人はこちらへ。
開発基礎トレ１：ライブラリで見た目を作ろう！
開発基礎トレ２：アウトレットとアクションの使い方

テンプレート＆ライブラリの部品を使いましたので、
まぁ当然って言えば当然ですが、見た目が地味です。

こんなiPhoneっぽい見た目を指して地味とは何事かと怒られそうですが、
見慣れりゃ地味に映るわけです。

オリジナルアプリを作ろうってわけですから、
見た目は「iPhoneっぽさをギリギリ残して、遊べ」の心意気が欲しいところです。

さて、では料理を始めましょう。

開発基礎トレその２で使った、「あと何日？カウンター」を使います。

このままでもいいのですが、1点だけ改造します。
以前のバージョンでは、「カウンターが止まったら日数を再計算」という方式でした。

覚えていますか？
「calc」というメソッドを作って、それを「Date Picker」の「アクション」「Value Changed」として接続するんです。

はい、これが暗号に見える人は開発基礎トレその２まで戻りましょう。

今回の改造では、

・ライブラリから新たな部品「Round Rect Button（角が丸いボタン）」をViewに配置
・「Round Rect Button（角が丸いボタン）」のタイトルを「あと何日？」に変更
・前回設定した「Label」「あと何日？」を削除
・「calcアクション」の接続先を「Date Picker」から「Round Rect Button」「Touch up Inside」に変更

を、します。

何をしたかというと、
再計算のタイミングを、「Date Pickerの止まったとき」から「ボタンを押したとき」に変更しました。

ボタンが欲しかったんです。

さて、ここで一旦Xcodeから離れてお絵描きソフトを立ち上げて下さい。
私はPhotoshopのCS2（古）を使っていますので、以降それで説明します。

iPhoneの仕様から言うと、

・画像フォーマットとしてJPGかPNGで出力できること
・縦480ピクセル×横320ピクセルの画像が出力できること

を満たせればどんなお絵描きソフトでも問題ありません。
フリーソフトでもいけますので、普段お絵描きソフトを使わない人も大丈夫です。

準備できましたか？それでは画面イメージを描いてみましょう。

笑点しかないでしょう。そこは。

こういう画像って、
参考書なんかで見るとサラッとかっこいい画像が用意されていたりしますよね。
そりゃお絵描き参考書じゃないんでいちいち説明してくれないのはしょうがないんですけど、
そんなかっこいい画像が用意できたら苦労しねぇよ、って思いません？

私はいっつも思います。

なので極力ここではいろんなやり方を書いていきたいのですが、
とりあえず基本的なところを。

たぶんグラフィックデザイナーとか、イラストレーターとか、
それを生業としている人じゃないと「かっこいい絵」をいきなり生み出すのは無理です。

「頭の中の雰囲気」を「線」と「塗り」に落とす基本的な訓練ができてませんから。

私も無理です。

なので、私はイカす！と思ったものを見よう見まねでパクります。

パクると言っても、コピペじゃなくて「私ができるやり方」でゼロから作ります。

当然まるっきり同じにはできませんが、
まるっきり同じでも困るわけで。

私が欲しいのは「かっこいい絵」ではなく「かっこいいアプリのためのそれっぽい絵」ですから、
このくらいのアウトプットで充分なわけです。

「私ができるやり方」は、「誰でもできるやり方」です。
ITバブル期の経済学部出身者が独学で学んだ方法です。特別な素養が要るわけない。

アプリ作りと平行して書いていきますので、
絵でつまずいてしまう人は、参考にして下さい。

では、今回はそこをすっ飛ばして。
できあがった絵をXcodeに登録してみましょう。

Xcodeの「グループとファイル」の中にある「Resources」を右クリックして、
「追加」＞「既存ファイル」を選択して下さい。

そうするとお使いのパソコンのフォルダが出て来ますので、
登録させたい絵が入っているフォルダ（ファイル）を選択して、「追加」。

なんだかよくわからないウィンドウが出て来ますので、
とりあえず「追加」と。

画像ファイルが「Resources」に追加されましたね。

Xcodeのお話のときに書きましたが、Xcodeは管理するためのツールです。
Xcodeのかんたん取扱説明書

ですので、使用する画像もパソコンに入っていればいいわけではなく、
Xcodeにちゃんと認識させておく必要があります。

それが、この登録です。

さて、登録ができたらInterface Builderで見てみましょう。
これは背景画像用の「Image View」をライブラリから引っ張りだしてきたところですが、

Image選択のプルダウンに先ほど登録した画像が入っています。

「Resourcesに登録すればあっちこっちで使える」というわけです。

では、遠慮なく。

イカすー！

「あと何日？カウンター」が、
「山田君、あと何日？カウンター」になりました。

「ライブラリ＋ちょっと」で、ぐっとオリジナリティ溢れるアプリになりましたね！

・ジャマイカ風
・ポールスミス風
・Windows風

ただのライブラリなんてツマラナイ。
アナタの遊び心をビッシビシ発揮してみてくださいね！