1、Xcodeの画面仕様を確認する。
前回Xcodeのインストールができましたので、今回は早速操作していきましょう。
といっても最初から全てを使いこなすのは到底無理な話ですので(なんせ全て英語…)、
これからの学習でよく使う部分をまず覚えてしまいましょう。
前回の続きの画面から見ていきます。
最初の画面では特に手を加える必要がないので気にしなくて結構です。
左上の部分を見てください。「test」の部分が選択されていますが、その中でも
特に赤枠の部分にあるファイルを操作していきます。
ではそのなかにある「ViewController.swift」をクリックして見てみましょう。
するとなにやらカラフルな英語の文章が表示されますね。そう、これこそがプログラムコード
というものです!この部分にiPhoneに行わせる処理を記述する形になります。
次に「Main.storyboard」をクリックしてみましょう。
真ん中に四角い画面のようなものがでてきましたね。ここではボタンなどの部品の配置やレイアウトなど、
私たちユーザの目に見える部分の設計を行うことができます。
これからはこの「ViewController.swift」と「Main.storyboard」を主に使って
勉強していきます。では全体の画面の見方を覚えましょう。
2、画面上の各エリアのおおまかな役割を覚える!
Xcodeの画面は大きく5つのエリアに分かれています。
・ツールバー(赤枠)
シミュレータの起動や停止、下の各エリア画面を表示したり隠したりすることができます。
左上の▶︎を押すと、シミュレータ上で現段階のアプリが起動するので動作確認をすることができます。
■でストップすることができます。
試しに▶︎を押してみましょう。
するとiPhoneらしき形をしたものが表示されました。画面が大きい場合は図のように
「Window」→「Scale」→「50%」あたりを選択するとちょうどいいサイズになると思いますので調整して
ください。今の段階では画面は真っ白で何も表示されていないと思います。それもそのはず、
まだ何もコードを記述していないし、画面上に何も部品もを設置していないからですね。
■ボタンの右側に「test > iPnone6」と書かれている部分がありますが、このiPhone6部分を
クリックするとタブが出現します。ここで様々なiPhoneのサイズに変更をすることができるので、
いろいろな機種でシミュレートすることができます。
次に右上の部分を見てみます。6個ボタンがあると思いますので、それぞれを押してみましょう。
左3つは押してみると真ん中の画面が2分割されて表示されるのが確認できるかと思います。
2つのファイルを比較するときや結びつける時に使用します。(詳しくはいずれ説明します)
最初のうちは一番シンプルな一番左を選択して1画面にしておいてください。
(ポチポチ押していると真ん中画面の表示も変わってしまうと思いますので、左側の
「ViewController.swift」をクリックしてもとに戻しておいてください。)
右3つはそれぞれのブロックを隠したり表示したりすることができます。自分の快適な画面にして
ストレスなく作業できるようにしましょう。
・ナビゲータエリア(青枠)
ファイル一覧が表示されます。これから主に使っていくのは「ViewController.swift」と「Main.storyboard」
ですが、アプリは様々なファイルが組み合わさってできているのです。
また、画像などを取り込む際にはこのナビゲータエリアに追加していきます。
・エディタエリア(紫枠)
アプリ作成のメインエリアになります。「ViewController.swift」ではプログラムコードを記述していきます。
また、「Main.storyboard」では画面配置などのレイアウトを作成することができます。
・デバッグエリア(黄枠)
実行したアプリにエラーがあると動作がストップしてこの部分にエラーメッセージが表示されます。
また、画面上に表示されない内部での処理などを表示させることもできます。
・ユーティリティエリア(緑枠)
「Main.storyboard」で使用する、画面に配置する部品一覧などがあります。また、その部品の設定も
このエリアで変更することもできます。
3、つまり、まとめると…?
文字で書くと結構複雑そうですが、こんなものは実際に操作して覚えるのが1番です。
今日覚えておくポイントは
・主に使用するのは「ViewController.swift」と「Main.storyboard」
・「ViewController.swift」ではプログラムコードを、
「Main.storyboard」では画面設計をすることができる
・いろいろなエリアがあるけど、メインで使うのは真ん中のエディタエリア
ということになります。
今日はここまで。
このままだと何も面白くないので、次回からはいよいよ実際にコードを記述してみましょう!
TechProjin 開発系基礎講座 連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
AIなどで注目急上昇!これから学ぶならPython!!
独学で学ぶ-pythonプログラミング 連載
汎用性◎ 定番プログラミング言語JAVA
Java基礎講座 連載