共有:XcodeのインストールiOSアプリの開発に使用するツールであるXcodeのインストールから始まります。Store」を開いてください。右上の検索バーで「Xcode」と入力し、検索してください。検索結果の左上に青いボートと金槌のアイコンのXcodeが見つかるので、「入手」をタップしてください。(僕はすでにインストール済みのためアップデートと表示されています)インストールには時間がかかるので、テキストを読み進めてください。そもそもXcodeとは?Xcodeとは統合開発環境(IDE)です。基本的にiOSアプリ開発に使用されます。Studioという統合開発環境を使用します。統合開発環境とは、コンパイラ、テキストエディタ、デバッガなどなどの開発に必要なツールがセットになっている便利なツールです。「これさえあればiOSアプリ開発できるよ!」ということです。iOSアプリ開発はXcodeをインストールするだけで終わるのでとても楽でいいですね!Xcodeのインストールが終わったら、次に進みましょう。Xcodeを起動するこのような画面が表示されれば成功です!お試しアプリ作成このまま簡単なアプリを作成していきます。設定1この画面ではどういったアプリケーションを作成するのか設定していきます。上段でOSの種類を決めます。今回作成するのはiPhoneアプリなので1でiOSを選択します。中段はアプリケーションの形式を選択することができます。App」を選択します。1、2の選択が完了しましたら、3でNextを選択してください。設定2ここではアプリの名前などなどを設定します。アプリの名前(英語で入力しましょう)です。アプリということで「FirstApp」という名前にしました。会社などのチームで開発する場合に設定します。今回は必要ないので、「None」とします。会社などで開発する場合の名前を設定します。今回は必要ないので、入力しません。会社のドメインを逆にして設定する場合が多いです。例;mycompany.comというドメインを取っていた場合com.mycompanyと設定する。アプリ固有のIDです。Store内で一意である必要があります。Identifierは固有であることを保証できるメールアドレスや上記の通りドメインを選択することが多いです。開発に使用するプログラミング言語を選択します。Swiftや、その前身となるObjective-cを選択することができます。今回はSwiftを選択します。関してはどこでも大丈夫です。見つけやすい場所に保存しましょう。Builder」と呼ばれる機能(ファイル)です。ようにコードを書かずに、パーツをペタペタ貼って画面を作成することができます!まずは画像の1、2の手順で進みましょう。Main.storyboardを開くとわかりますが、水色の枠が表示されているかと思います。これはViewControllerというiOSアプリでの画面になります。このViewControllerに色々なテキストやボタンを置いてアプリの画面を作成していきます。ViewControllerにUIパーツを置くそれでは本格的にアプリ開発をしていきましょう!画面の右下に注目してください。1四つあるボタンの右から2番目の五円玉のようなマークをタップしてください。2でStoryboardで配置することができるパーツを選択することができます。今回は最初にLabelというパーツを配置していきます。2の枠内でスクロールしてLabelを探しましょう!見つけることができたら、ドラッグ&ドロップでViewControllerの上に配置していきましょう。場所は適当で大丈夫です!アプリ起動!!Labelの配置が完了したら、実際にアプリを起動してみましょう!画面の左上の再生ボタンをタップしてください!すると、Simulatorが起動するのでみてみましょう!動きましたか??これがアプリ開発の第一歩です!!それでは、もう少しカスタマイズしていきましょう。「アプリ開発!」にLabelのテキストが変化します。Labelのカスタマイズまずは1ViewControllerに配置したLabelをタップして選択してください。2ホームベースのようなマークをタップしてください。このマークをタップすることでパーツをカスタマイズすることができる画面が表示される。3「Label」と表示されているところに「はじめての」と入力しましょう。入力が完了するとViewControllerに配置したLabelにも反映されます。うまく表示されない場合Labelにうまく「はじめての」が表示されない場合があります。「...」となってしまっています。これはLabelの横幅をテキストの横幅が超えてしまっている場合に起こります。これを修正するには、テキストの横幅よりLabelの横幅を大きくする必要があります。Labelを選択すると周りに四角形が8つ出てきます。これを引っ張るとLabelのサイズを変更できるので、テキストがしっかりと表示されるように修正しましょう!Buttonを配置するLabelと同じようにドラッグ&ドロップでButtonを配置しましょう。場所はどこでもいいですが、Labelと被らないようにしましょう。今回作成しようとしているアプリはButtonをタップした時にLabelの文字が変わる仕組みです。そのためにはSwiftでコードを書く必要があるため、ViewController.swiftを開いてみましょう。ちなみに、ViewController.swiftはStoryboard上に置いてあるViewControllerはリンクしています。recreated.}}今回は詳しい説明はしませんが、とりあえずこのファイルにコードを書いていきます!次にStoryboardのViewControllerに置いたLabelやButtonをViewController.swiftファイルのコード上から編集できるようにするため、ViewController.swiftにViewController上のLabelとButtonを紐付けます。labelを接続する1ViewControllerを選択状態にしましょう。2輪っかが二つ重なっているマークをタップする。これをすると画面が二つに別れます!これで準備が整ったので、labelをIBOutlet接続します。viewDidLoad()」の間の隙間まで伸ばしてドロップしましょう。すると、画像のようにグレーのポップアップが表示されるので、「Name」の部分を「label」にして、Connectをしましょう。このような記述が自動的に足されたら成功です。これでStoryboardのViewController上に置いたLabelをViewController.swift(コード)で触ることができるようになりました。UILabel!Buttonを接続する同じようにStoryboardのViewController上に置いたButtonもViewController.swift(コード)と繋いでいきましょう。注意することがあります。ドラッグでファイル内で最後の「}」の一段上に青い線を引っ張りドロップする。ConnectionをOutletから「Action」に変える。NameをchangeTextにする。Labelを設定するときのConnectionはOutletなのに、Buttonの場合はActionなのか。それはLabelは単純にStoryboardに置いたLabelをコード上からも触れるようにするための繋ぎ口(Outlet)でButtonはタップしたときの処理(Action)を定義したいからです。間に記述することができます。ここに書く!}今回はlabelのテキストを変更するため、このような記述になります。!最後にアプリを起動してみましょう!覚えていますか??左上の再生ボタンです!どうでしょうかうまくいきましたか?今回はアプリ開発の最初の最初の最初ということで詳しい説明をせずに進んできました。「思ったより簡単だったなぁ」と思っていただけたら嬉しいです!次回からはもう少し本格的に解説していきたいと思います。(新しいウィンドウで開きます)iOSアプリ開発超入門ささお3年目iOSエンジニア。スタートアップで働いておりやす。プログラミングスクールとエンジニアのキャリアを考えたい。*メールアドレス(公開はされません。簡単な自己紹介ささお2年目のiOSアプリエンジニア。プログラミングスクールに通い、プログラミングスクールで講師を経験したのち、スタートアップに就職。プログラミングスクールとエンジニアのキャリアを考えたい。普段は渋谷あたりにいます。教育に興味があります。キャリアを考えないとなぁ。ささおのTwitter初めてのフリーランスにポテパンは登録がとにかく楽。ほんとに”魅力的なお仕事が多数”かは知らないけど、最初にごちゃごちゃ記入させない感じが好き。