開発知識ゼロから学ぶIOS開発/始めようアナタのiPhoneAPP開発/Xcode7.1 Swift2.0対応！

「習うより慣れろ」で最初のアプリケーション「Hello World」を作成していきます。

本項で「UILabel」を使い、文字列「Hello World」を画面に表示させるのですが、難しいコードを書く必要はありません。まずは「見た目」を作成することを覚えていただき、「画面のデザイン」を楽しんで学習することを目的にしています。

レクチャー４で作成した「HelloWorld」を使い、Labelの文字や色を変える作業を学ぶ。

そのことで、Xcodeのユーザーインターフェイスに慣れ、機能を理解していく。

IPhoneの開発の流れでは、まずデザインを作ってからプログラムを接続するという流れを取っている場合が多く有ります。

本レクチャーでは、デザインを決めてプログラムを作ることと、今後の学習の意図を説明しています。

UIButtonのチュートリアルから

1. 画面の変遷「segue」について学ぶ
2. objectとプログラムをつなぐことを学ぶ

AppleDeveloperに関する説明

Xcodeを開き、「Create a new project」を選択した際に出る

「新規プロジェクトのオプション」に関する画面の説明

IOSアプリケーションには原則的に「１個の画面に１個の機能」ということが挙げられます。

それは最初にSingleViewアプリケーションのテンプレートを作成したとき、一つの画面に一つの「ViewContoroller」が付いていることが原則になっているからです。

本項ではその「ViewController」に関して学んでいき、「UIButton」をさらに深く学んでいきます。

UIButton機能をさらに深く学習して、プログラムに機能を追加します。

単純なアプリケーションですが、様々に応用が効く「アプリケーションの基本」を学習することができます。

swiftなどのコンピューター言語には、時として英語のようだが、全く意味が読めない文が数多く存在する

今回はswiftのルールを例文を用いて説明してみる

1. Labelを名前・Helloをつけて指定（0：36）
2. インスペクタについて（1：01）
3. String型（文字列型）について（2：01）

Xcodeの設定を行う

エラーの確認や、エラーの時に何が起こるか確認する

1. エディッタに行数を表示させる（0：48）
2. 予測変換を知る（1：56）
3. エラーで予測変換が機能しないことを知る（2：46）
4. エラーの確認（3：45）
5. コメント化する方法（4：40）
6. 簡単なエラーの種類（5：50）

XcodeのPlayground機能を使って変数と型、その周囲のエラーを学習します

1. 変数（0：03）
2. Playgroundを作成・開く（0：50）
3. 変数はvarで定義する（1：20）
4. Playgroundの機能の説明/String型（2：00）
5. エラー３種（2：20）
6. Int型（4：13）

1. Double型（0：30）
2. 型推論（1：14）
3. 型指定（1：40）
4. 型の変換３種（2：53）

1. nilについて（0：40）
2. オプショナルデータについて（2：00）

1. 以前のレクチャーの復習（0：40）
2. UILabelの接続（2：10）
3. .textの変更（3：20）
4. .textに変数を入れてみる（4：52）
5. .textColor/文字の色の変更　　
6. .backgroundColor/背景の色の変更（6：37）
7. .fontの変更/文字の大きさの変更（8：53）

UIButtonのインスペクタを学んでいきます

1. Buttonの接続（0：30）
2. 文字の変更/setTitle (1:15)
3. String型の当てはめ（2：50）
4. forStateへのUIControlState状態の３つ（3：12）
5. 長押し/Highlitedで文字の変更（3：30）
6. setTaitleColorで文字の色の変更（5：00）
7. ボタンの機能のオンとオフ/true false(6:30)

UISliderはいわゆるスライダーのことです。

デザインのパーツとして最初からあるので、表示させてみましょう。

1. UISliderの説明　（0：08）
2. 非接続での表示（1：00）
3. UISliderの接続（2：00）
4. UISliderとLabelを連携されるプログラムの記入（2：30）
5. UISliderの挙動（3：50）
6. UISliderで表現できる数字の範囲の設定（4：35）
7. UISliderの数字の範囲を変更した結果（5：30）

UITextFieldのインスペクタを見ていきます

1. 無接続での表示（0：23）
2. キーボードの表示設定（1：02）
3. UITextFieldのインスペクタ(1：53）
4. UITextField/Placeholder（3：30）
5. UITextField/Keyboard（4：55）
6. UITextField/Return Key（6：00）

TextFieldとLabel,Buttonを組み合わせ入力系のアプリケーションを作成します

1. デザイン（0：46）
2. プログラムの接続（1：06）
3. プログラムの書き足し（2：00）
4. UITextFieldに入力後、キーボードを隠すプログラム（2：30）
5. シミュレーターで確認（2：55）

UITextViewインスペクタとその実用例のアプリケーションを製作します

1. UITextViewを無接続でシミュレーターする（1：00）
2. UITextViewのインスペクタ（2：00）
3. UITextFieldとUITextViewの違い（3：05）
4. 活用したアプリケーションのデザイン（3：30）
5. UITextViewとプログラム接続（4：00）
6. 入力系のプログラムの追加（5：10）
7. UITextViewで入力できないようにする（5：50）
8. アプリケーションのテスト（6：10）

UISwitchのインスペクタを確認して、アプリケーションを作成します

1. Bool値（0：10）
2. 無接続でデザインの確認（2：00）
3. UILabelをUISwitchで表示/非表示を切り替えるデザイン（2：35）
4. UISwitchの接続（3：00）
5. UISwitchのプログラムの記述（3：30）
6. プログラムの説明（4：30）
7. シミュレーターでテスト（5：10）
8. UISwitchのインスペクタ（5：30）

UIDatePickerのインスペクタとそのチュートリアルのアプリケーションの作成を行います

1. UIDatePickerの無接続シミュレート（1：00）
2. UIDatePickerのアプリケーション作成（1：20）
3. UIDatePickerのデザインと接続（1：45）
4. プログラムの追加（3：00）
5. UIDatePickerのサンプルのテスト（6：00）
6. UIDatePickerのインスペクタ（6：45）

定数と配列のデータの型を説明していきます

1. 定数とその命名 let (0:17)
2. 配列という型（2：00）
3. 配列のデータの例（2：30）
4. 整数の配列と文字列の配列（3：15）
5. 整数型の指定/Int型(5:03)
6. 文字列型の指定/String型（6：10）
7. 型の指定と書き方が違うのでエラー（7：20）
8. 空の配列（8：18）
9. .appendでデータ追加（9：20）

PickerViewを作成してプログラムに必要なプロコトロルやメソッドの概念を学んでいきます

1. このレクチャーのガイダンス（0：05）
2. PickerViewは無接続では動かないObject（1：00）
3. プロコトロルについて（1：55）
4. プロコトロルの追加（2：20）
5. メソッドについて（3：00）
6. Delegateに関して（4：00）
7. 表示させる配列の追加（4：50）
8. PickerViewに必要なメソッド（5：25）
9. PickerViewの列数のメソッド（6：00）
10. PickerViewの行数のメソッド（6：40）
11. PickerViewのデータの表示をさせるメソッド（8：40）
12. PickerViewをシミュレーターでテスト（11：00）

コードを変化させることで表示数や内容を変化させていきます

1. 複数の配列の記述（0：20）
2. 列数の変更（1：20）
3. 各配列の中の項目を調べてその数字を行数に変更（2：42）
4. ２種類の配列のデータをPickerViewに返す（3：35）
5. カスタマイズできているかシミュレーターでテスト（5：00）

PickerViewのメソッドの書き込みの３回目です

1. デバッグエリアへの書き出しメソッド（0：32）
2. 選択された列を調べる定数の作成（2：00）
3. 調べられた定数を元に選ばれた値を出力する変数の作成（3：05）
4. printlnで出力（4：30）
5. シミュレーターでデバッグエリアを確認（5：10）

UIImageViewを活用して画像の表示を行います

1. 設定しない状態でUIImageViewのシミュレート(1：00)
2. プロジェクトファイルに画像の取り込み（2：00）
3. UIImageViewのインスペクタ（3：14）
4. 取り込んだ画像をユーティリティーで設定（5：00）
5. シミュレーターでUIImageのテスト（5：10）

UIImageViewでweb上の画像を読み込んで表示させます

1. web上の画像URLの保存（1：30）
2. UIImageViewの接続（2：40）
3. プログラムの追加（3：40）
4. URL先からデータを読み込み（4：05）
5. 表示させる画像のデータの作成（4：35）
6. アプリケーション内部での画像の生成（6：15）
7. UIImageViewに作成した画像のデータの設定（7：20）
8. UIImageViewのインスペクタで画像の表示を設定（8：49）
9. シミュレーターでUIImageViewのテスト（9：30）
10. 画像データのURLの変更だけで表示画像を変更（10：25）

UIWebViewを使い、webブラウザの機能を持つアプリケーションの作成を行います

1. UIWebViewのデザイン（0：35）
2. UIWebViewのインスペクタ（1：30）
3. UIWebViewとプログラムの接続（2：00）
4. 表示させるwebページのURLの取得（2：22）
5. UIWebViewDelegateの設定（2：42）
6. URLデータの作成（4：27）
7. URLRequestの作成（5：10）
8. UIWebViewのURL先の設定（6：38）
9. UIWebViewSampleのシミュレートテスト（8：12）
10. ストリングデータの差し替えで別のwebページの表示（8：35）

UIWebViewでwebページを読み込みする際にインジケーターを表示させます

1. インジケーターの説明（0：24）
2. 読み込みのインジケーターの追加（0：52）
3. 読み込み完了でインジケーター非表示（2：30）
4. シミュレーターで確認（4：01）

一般的なアプリケーションの代表的な表示方法であるTable表示を学習していきます

1. UITableViewの無接続でのシミュレーション（1：30）
2. サンプルを使ってのTableViewの説明（2：00）
3. TableViewの必要メソッド（2：55）
4. プログラムと必要メソッドの接続（4：00）
5. TableViewCellの設定（5：00）
6. TableViewのプロコトロルの記述（5：45）
7. TableView必要メソッドのセクション数のプログラム（6：40）
8. TableView必要メソッドの内容の設定（8：35）
9. 必要メソッドを記述した後のTableViewのシミュレーション（11：55）

UITableViewCellのインスペクタを学習していきます

1. UITableViewCellのStyle(0:37)
2. UITableViewCellのIdentifier(3:15)
3. UITableViewCellのAccessory(3:27)
4. 背景の色の変更（5：05）
5. 文字の色の変更（5：45）
6. フォントサイズの変更（6：20）
7. 変更したインスペクタをシミュレーターで確認（7：30）

UITableViewに配列の表示をする場合のプログラムを作成していきます

1. 初期設定（0：22）
2. 表示させる配列のデータ作成（2：10）
3. ショートカットを使ったプロコトロルからメソッドの取り込み（3：30）
4. データをUITableViewに設定（5：30）
5. cellの定義（6：12）
6. UITableViewに作成した配列が表示されるかシミュレーターで確認（9：13）

構造体のデータの作成を行いUITableViewで表示させる

1. 構造体の説明（0：05）
2. 構造体の作成（0：50）
3. 構造体の要素の書き込み（1：28）
4. データの追加（2：43）
5. 構造体を含んだ配列のデータ（3：03）
6. 初期化のメソッド（3：30）
7. 中身の初期化（4：22）
8. 中身の追加（4：46）
9. 構造体の中身をUITableViewCellに表示させる設定（6：37）
10. 構造体をUITableViewで表示されているかのシミュレション（8：05）
11. 要素を追加してシミュレーション（9：48）

object libraryからUITableViewControllerの追加を行い新規ファイルの設定を行う

1. UITableViewControllerの追加（0：52）
2. スタート画面の変更（1：12）
3. 新規ファイルの追加（1：52）
4. インスペクタでファイルの設定（3：53）
5. ファイルの確認（4：25）

列挙体（enum）を使ってデータの作成しアプリケーションで表示させる

1. 列挙体の説明（0：05）
2. 列挙体の記述（1：40）
3. 列挙体でのデータの表示技法（5：00）
4. コメントアウトでデータ表示メソッドを呼び出す（10：00）
5. データの変換を行い表示可能データの書き換える（10：33）
6. シミューションで表示されているデータの確認（13：55）
7. 構造体/列挙体のもつ複数のデータを表示させる記述（14：11）
8. 複数のデータをシミューションで確認（15：48）

UITableViewを応用してUIWebViewと連携してBookMarkのアプリケーションを作成します

1. 注意（0：05）
2. 完成するアプリケーションのデモ（0：35）
3. 構造体の作成（1：22）
4. 表示させるデータの設定（2：54）
5. 初期化のメソッド（4：07）
6. 途中の段階のテスト（10：50）

引き続きBookMarkのアプリケーションを作成します

1. WebViewの配置（0：30）
2. TableViewCellの接続（1：05）
3. SegueIDの設定（1：20）
4. コメントされたメソッドを流用（3：00）
5. if文を記述（4：30）
6. 移動先にデータを渡す（6：30）
7. WebVIewの設定 (8:00)
8. シミュレーターで確認（12：20）

BookMarkの仕上げ

1. 画面の変遷（0：22）
2. 画面の設計の考え方（1：00）
3. ToolBarの配置（1：48）
4. Tool Itemの変更（2：40）
5. Tool Bar ItemのSegue設定（3：00）
6. シミュレーターで確認（3：40）

Auto Layoutの学習

1. プレビュー機能を学習（0：50）
2. Viewの配置（1：09）
3. アシスタントエディッタでプレビュー（1：50）
4. 機種で見え方が違うことの認識（3：15）
5. Auto Layout機能（4：18）
6. 各機種の解像度の違い（4：45）

基礎的な見せ方の技術を学習していく

1. Constraintの説明（0：24)
2. Constraints　Alignのアラート（0：55）
3. Horizontal(2:22)
4. Vertical(3:27)
5. Main.storyboardと実機の見え方の統一（7：07）

機種ごとの画面比率で表示させるAspect Ratioを学習していきます

1. Constraintの確認（0：49）
2. Document outlineの表示（1：09）
3. Aspect Ratioの設定（2：45）
4. オブジェクトのリンク（3：54）
5. シミュレーターで確認する（4：35）
6. オブジェクトの間の見せ方の制約（6：52）
7. シミュレーターで追加した見せ方の確認（7：17）

オートレイアウトの学習も最後になりました

最後はEqualとEdgesを学習していきます

1. オブジェクトの左端を基準に並べる制御（2：17）
2. オブジェクトの上部を基準に並べる制御（3：58）
3. オブジェクトを同じ高さに揃える制御（8：15）