コンピューター基礎Ⅲ XcodeのUIBuilder使用法学習 アプリ作成に必要なもの アプリのアイデア(最重要) 目的 動作(仕組み)の整理(設計) UI設計 アイデアの実現能力 動作対象の機械の理解 プログラミング言語の理解 文法とアルゴリズム・データー構造 ライブラリ(無いときは自作) 適切なリソース作成 「じゃんけん」アプリを作ってみる 学習内容 UIBuilderの使い方 プロジェクトの基本セッティングの仕方 UI部品の設置方法・調整方法(インスペクタ) UIとコードのつなぎ方 プログラミング 配列を利用した画像操作 乱数の使い方 Timerを使って少し待つ方法 BGMの再生法 シミュレーターの使い方 「じゃんけん」アプリを作ってみる 仕様 iPhone用アプリ(5S用の画面,4inch @2xで) 縦長(portrait)専用 PCと対戦する PCの手を乱数で作る 画面にPCの手を表示 入力は3つのボタン(いし・かみ・はさみ) 画像をボタンに設定する 結果は画面に文字で表示 しばらく待って,対戦再開 ずっと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 アイコンを用意する 2倍解像度(@2x,retina)で用意する 3種類作る 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」 の文字化け部分「ーーーー」を1byte文字 で直す 「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」を3つと「Label」が一つ Buttonは、 100x100pt 「PCの手」「ぐー」「ちょき」「ぱー」 の四つ 文字の後ろに背景画像を入れる Label 「じゃんけん…」という文字列が入るサ イズで作る 「Button」に背景画像を入れる 「Size Inspector」でサイズを指定する 「Attribute Inspector」で、 「Background」から、各ボタンの絵を指定する 「Title」の一行下で、表示する文字列を入力 「Label」に文字と背景色をセット 「attribute Inspector」で 背景色は下に少しスクロール フォントと サイズ 表示する文字 文字色 Labelの背景色 UIとプログラムを結びつける 1. プログラムを表示するためにEditorを2 つにする 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