コンピューター基礎Ⅲ
XcodeのUIBuilder使用法学習
アプリ作成に必要なもの
アプリのアイデア（最重要）
目的
動作（仕組み）の整理（設計）
UI設計
アイデアの実現能力
動作対象の機械の理解
プログラミング言語の理解
文法とアルゴリズム・データー構造
ライブラリ（無いときは自作）
適切なリソース作成
「じゃんけん」アプリを作ってみる
学習内容
UIBuilderの使い方
プロジェクトの基本セッティングの仕方
UI部品の設置方法・調整方法（インスペクタ）
UIとコードのつなぎ方
プログラミング
配列を利用した画像操作
乱数の使い方
Timerを使って少し待つ方法
BGMの再生法
シミュレーターの使い方
「じゃんけん」アプリを作ってみる
仕様
iPhone用アプリ（5S用の画面，4inch
@2xで）
縦長（portrait）専用
PCと対戦する
PCの手を乱数で作る
画面にPCの手を表示
入力は３つのボタン（いし・かみ・はさみ）
画像をボタンに設定する
結果は画面に文字で表示
しばらく待って，対戦再開
ずっとBGMを鳴らす
画面サイズと解像度
pt（ポイント）とpx（ピクセル）
pxは、画面上の色を指定できる最小の点
ptは、画面の規格上の最小の点(座標ではこれを使う)
iOS機器は、画面のサイズと解像度が色々ある
オリジナル
1pt =
(@1x)
レチナ(4inch)1pt =
(@2x)
6(4.7inch)
1pt =
(@2x)
6plus(5.5inch) 1pt
(@2x)
(@3x)
1px(72ppi)
2px(144ppi)
2px(144ppi)
= 3px(216ppi)
320x568px
320x568pt
640x1136px
320x568pt
750x1334px
375x667pt
414x736pt
1080x1920px
1242x2208px
機種別画面サイズに対応
画面全体を「AspectFit」の設定で作ると
自動的にサイズを合わせてくれる（比率
を保って拡大縮小．多くは16:9になる）
今回は，4inch（@2x，5sサイズ）のみ
で作成する
リソース画像を、@1x、@2x、@3xの三サイ
ズ用意すると解像度に合わせて、使い分
けてくれる（ファイル名に@2x 、@3xをつ
けておく）
最低@2xだけでもOK
アイコンを用意する
２倍解像度（@2x，retina）で用意する
３種類作る
60x60pt
（120x120px） ランチャ用
40x40pt
(80x80px）
spotlight用
29x29pt
(58x58px)
setting用
ファイルタイプは，png
角の部分が丸く切り取られる（角が一辺
の約二割の直径の円弧になる）
リソースを用意する
画像ファイルを@2xサイズで用意する
pngが望ましい（透明・アルファが使え
る）
音声は，wavやmp3など色々使える
カセット化して容量を抑えることもで
きるが，今回は気にしない
画面の座標系
X軸
UIBuilder（UIKit）
画面左上が座標原点
Y軸は下向きが正の値
Y軸
Spritekit
画面左下が座標原点
Y軸は上向きが正の値
Y軸
X軸
プロジェクトの作成
Xcodeで新規にプロジェクトを作る
起動画面で「Create a new Xcode project」を選択
テンプレートを「iOS」の「Application」から，
「Single view Application」を選択し「Next」ボ
タンをクリック
途中で証明書を使おうとするが…
ゲストユーザーの時は，下のダイアログが出
ても，「許可しない」をクリックして無視す
る
標準・管理者の場合は，「OK」
プロジェクトの作成
Xcodeで新規にプロジェクトを作る
「Product name」に
アプリの名前「じゃんけん」
「Organization Identifier」に
唯一無二の文字列を入れる
・普通は，メールアドレスを逆順にして使う
「jp.ac.aichi‐fam‐u.○○」
Organaization」
に自分の名前を
入れる
プロジェクトの作成
Xcodeで新規にプロジェクトを作る
「Language」を「Swift」
「Device」を「iPhone」
「Next」ボタンをクリック
プロジェクトの作成の続き
ファイルを保存したい場所を指定し，
「Create」ボタンをクリック
日本語でアプリの名前を指定した場合，
「Genenral」欄の「Bundle Identifier」
の文字化け部分「ーーーー」を１byte文字
で直す
「Device Orientation」を「Portrait」だ
けにする
ディスプレイサイズの設定
View controllerの設定
「Navigator」で「Main.storyboad」を選択
エディター部分のワークスペース表示・非表示で，
「Document outline」を隠す
「view controller」を選択するため，「view
controller」という文字をクリック
文字をクリックすると
アイコンになる
View controllerの設定
「Inspector」ペインを「Attribute Inspector」に
する
「Simulater Metrics」の「Size」を
「iPhone 4-inch」
「Simulater Metrics」の「Orientation」を
「Portrait」
portrait
シミュレーター呼び出し設定
「set the active schem」を「iPhone5s」にする
リソースの読み込み
1.
2.
3.
1
画像や音声リソースは，「Navigator」にD&Dす
る（実際にコピーする）
「Navigator」でフォルダに整理する
1.
必要なら、Assets.XcassetsにD&D
ライブラリから使えるようになる
Show
the Media
library
2.1
2
3
UI部品の配置
ライブラリペインの「Show the Object Library」ア
イコンをクリックする
ライブラリから、View controllerにD&Dする
Show the Object Library
UI部品の配置
「Attribute Inspector」「Size Inspector」で色やサ
イズやフォントを設定する
サイズは、ハンドルで変えてもよい
Size
Attribute
位置合わせ
ディスプレイの方向や大きさを変えない
ときは、View Controllerの上で配置したも
のが、その通りに実行時に再現される
向きや大きさが、変わるようなことを想
定している場合は、「Constraint」機能を
使う
じゃんけんアプリの画面を作る
「Button」を３つと「Label」が一つ
Buttonは、
100x100pt
「PCの手」「ぐー」「ちょき」「ぱー」
の四つ
文字の後ろに背景画像を入れる
Label
「じゃんけん…」という文字列が入るサ
イズで作る
「Button」に背景画像を入れる
「Size Inspector」でサイズを指定する
「Attribute Inspector」で、
「Background」から、各ボタンの絵を指定する
「Title」の一行下で、表示する文字列を入力
「Label」に文字と背景色をセット
「attribute Inspector」で
背景色は下に少しスクロール
フォントと
サイズ
表示する文字
文字色
Labelの背景色
UIとプログラムを結びつける
1.
プログラムを表示するためにEditorを２
つにする
2.
「Asistant Editor」にViewCpntroller.swift
のプログラムを表示させる
Standard EditorにMain.storyboadをひら
いていると自動でそうなる
UIとプログラムを結びつける
入力の場合、プログラムに「@IBAction 」
を作る
出力の場合、プログラムに「@IBOutlet」
手順の始めは、どちらもMain.storyboad画面
の関連付けたいUIパーツから、「Control」
キーを押しながら、プログラムのクラス内
にD&D（場所は常識で考える）
UIとプログラムを結びつける
D&Dを行うと、ダイアログが現れるので、
出力と入力は、connectionで選ぶ
Name欄で、メソッド名（@IBAction）やOUTLET
名（@IBOutlet）をつける
「connect」ボタンをクリック
入力用に@IBActionを作る場合
出力用に@IBOutletを作る場合
UIとプログラムを結びつける
入力を受ける@IBAction は
@IBAction func 関数名(sender: AnyObject) { ここに処理を書く
}
出力する先になる@IBOutlet は大抵クラスなので、
メンバ変数にアクセスする
@IBOutlet weak var パーツ名: UILabel! であれば
パーツ名.text = “○○”
@IBOutlet weak var パーツ名: UIButton!であれば
パーツ名.setBackgroundImage(IMG○○, forState: .normal)
などとする
シミュレーターで実行してみる
「実行（Build and Run）」ボタンをク
リック
シミュレーターの起動には時間がかかる
ので，じっと待つ
「停止（Stop）」ボタンでプログラムは止
める
© Copyright 2025 ExpyDoc
