【Swift】ボタンをタップすると画面が遷移するアプリを作ってみよう!

スポンサーリンク


みなさんこんにちは!
みやごん@pokki1216です。
 
今回はiOSアプリ開発用のプログラミング言語、”Swift“について学習していきます。

Swiftはプログラミング言語を勉強したことがない人でもお手軽にアプリを作ることができる言語ですので、この機会にぜひ学習してみてください。

Swiftってなに?

まずSwiftについて軽く紹介します。

Swiftは2014に発表されて始まった言語で、作成元はiPhoneやMacでおなじみのAppleです。

この言語はアイデアさえあれば誰にでも画期的なアプリケーションを作ることができるそう。

僕が少し触れてみていいと思ったところは、iPhoneの画面を視覚的に作っていくことができるところ。

上の図のように、iPhoneの画面上にボタンを設置したり、テキストをかいたりすることができるんです。

初めて触れた時は「こんな簡単にアプリが作れるんか!」とびっくりしました。

プログラミング言語を勉強する上で最も大切なことは”楽しんで勉強できる“ということだと思っていて、実際にアプリケーションを作って勉強を進めることができるのはありがたいですね。

特に僕はAppleが大好きで、初めてのスマートフォンからずっとiPhoneを使用していることもあり、iOSアプリを作れるこのSwiftはとても魅力的です。

ただ、1つだけ欠点があって、Windowsでは扱えないということ。

なので残念ながらWindowsしかお持ちでない人には縁がないんですけれども、macのパソコンを持っている人はぜひ一緒に学習していきましょう!

Xcodeのインストール

まずは、XcodeというSwiftを使うために必要なアプリケーションをダウンロードおよびインストールします。

以下のリンクからダウンロードを行ってください。
Xcode – Apple

そしてダウンロードが終わった後にアプリケーションを開きます。

そうすると、インストールが実行できるのでインストールしましょう!

これで準備は完了です。ちなみに、僕が使っているのはXcodeのバージョン9.2でSwift4となっています。

他のバージョンの場合は内容が少し違っている可能性があるのでご了承ください。

画面遷移するアプリを作ってみよう

今回目指す最終形はXcode上で以下の画面のようなプログラムを作ること。

シミュレーターを開くと以下の画面になり

画面遷移する“というボタンを押すと

この画面になる。ということをやっていきます!

この学習で習得できることは

  • テキストラベルの作り方
  • ボタンの作り方
  • テキストラベルやボタンのフォントの変え方
  • 画面遷移する方法
上記の4つです。

ではいってみましょう!

Xcodeを開いてプロジェクトを作ろう

まずはXcodeを開いてプロジェクトを作ります。

アプリケーションを開くと、以下の画面になるので、”Create a new Xcode project”をクリックしましょう。

そして次の画面で”Single View App“が選択されていることを確認してNextをクリック。

すると以下の画面になるので、必要事項を入力していきましょう。

まず①の”Product Name“を決めます。今回は”swift4DisplayShift“としましょう。その時の作るアプリに合わせて決めましょう。

次に②の”Organization Name”ですが、こちらは企業名や個人名などを入れます。特に入れなくても問題はありませんが、僕は自分の名前を入れています。

そして③のOrganization Idenfitierを決めます。

こちらも好きな名前を入れて構いません。

全て入力が終わったら、Nextをクリックします。

そうすると次の画面が出てくるので、保存先を指定してCreateをクリック。

以下の画面が表示されたらプロジェクトの作成はオッケーです。

ではアプリの作成に移りましょう。

みやごん

シミュレーターの設定

まずはじめに画面の左側にある”Main.sroryboard“というところをクリックしましょう。

すると以下の画面がでてきます。

ここでまず”シミュレーター“の設定をしておきましょう。

アプリの作成をする上で、シミュレータというものを使用します。

シミュレーターは実際にiPhoneを模擬したものをパソコンで動かせるものです。はじめにも示しましたが、下の画面のようなものです。

今、画面がiPhoneXに設定されていますが、初期の状態は違う種類に設定されています。

これは自分が使うことを想定して好きな種類を設定すればいいと思います。

設定の方法として、まず画面の上部分と下部分にあるところをいじります!

この2つを自分の使っているiPhoneや作りたい機種を選択したらシミュレーターの起動時にそのiPhoneがでてきます。

テキストラベルを作っていこう

ではアプリを作っていきましょう。

まず、”はじめの画面“というテキストを作ります。

テキストを作るために必要なテキストラベルは右下部分にあります。

アプリに使用するラベルやボタンなどはここに揃っているので時間があればみてみてください。

このLabelというものをドラッグ&ドロップで画面のところに持っていきます。

すると画面上にLabelとかかれたものを作ることができます。

このテキストラベルは範囲の大きさやかかれているテキストを変更することができます。

画面のテキストラベルが選択されている状態で右上のメジャー部分をクリックしましょう。するとラベルの位置や大きさを変更するところがあります。

ここの”x“,”y“はそれぞれ横と縦の位置、”width“,”height“はラベルの幅と高さを意味しているので、好きな位置に変更しましょう。

※この幅と高さは文字の大きさを表しているわけではありません。

変更するとこんな感じです。

そして中の文字を変えます。右上のホームベースのような形をクリックすると、Labelとかかれた部分があるので変更します。

そうすると

文字が変わりました。はみでているのは嫌なので真ん中に持っていっておきましょう。

また、文字も真ん中に持っていきたいですよね。先ほどのホームベースをクリックしてある状態で、下の画像部分をクリックしましょう。

これではじめの画面のテキストラベルはオッケーです!

ボタンを作っていこう

それではボタンを作っていきます。先ほどの右下部分から”Button“を探して、iPhone画面にドラッグ&ドロップ。

こちらもテキストラベルの時と同じように、右上のホームベースの形から文字の内容を変更します。

このままだと、Buttonの範囲が小さいので下の画像のように”画面遷移する”という無事が入りきっていません。

テキストラベルの時と同様に右上のメジャーから大きくすることもできますが、画面上のButtonの端にある白い部分をいじって大きくすることもできます。

これができたら、フォントの大きさを変えましょう。テキストの時は忘れてましたね。笑

おいっ!

右上のホームベースを選択した状態で、Font“部分にあるTをクリックしましょう。

そうすると、①文字のフォント、②文字のスタイル(太さなど)、③文字の大きさを変えることができます。

大きくしたものが下の画像、大きさは60です。

さっき忘れていたテキストラベルも同じようにして大きさを変えてください。

これではじめの画面は完成です!

次は画面遷移した後の画面を作りましょう。

画面遷移後の画面

新しい画面を作るには”View Controller“というものを使用します。

テキストラベル、ボタンの時と同じように右下からView Controllerを探します。

これをドラッグ&ドロップではじめの画面の右横に持っていきましょう!

そして、はじめの画面と同様にテキストラベルを使ってつぎの画面を作ってください。

ここまでくるともうすぐ完成です!

あとは画面遷移させていきましょう。

画面遷移する方法

ここで行いたいことは、シミュレーターを開いたときに”画面遷移する“をおすとつぎの画面にいくということ。

その方法について学習していきます。とても簡単なのですぐできます!

キーボード上の”control“を押した状態で、”画面遷移する“というボタンをドラッグして、もう1つの画面上の空白部分にドロップします。

すると下の画像のものがでてきます。

ここの”show“をクリックしましょう。そうすると

真ん中に矢印がでてくるはずなので、これで完了です。

めっちゃ簡単ですね!

シミュレーターを起動しよう

画面が完成したので、無事に動くかどうかシミュレーターを起動して確認します。

左上の再生マークボタンをクリックするとシミュレーターが起動します。

画面遷移するをクリックすると

画面遷移しました!

これで画面遷移アプリの完成です!お疲れ様でした

最後に

今回画面遷移アプリを作ったのですが、みなさん気付きましたか?

プログラムのコードを全くかいていませんよね。

このように、swiftは簡単なアプリならコードをかかずに作ることもできちゃうんです!

今の所このアプリの実用性はありませんが・・・笑

他のプログラミング言語と比べると非常に簡単なことが少しはわかっていただけたなら嬉しいです。

今後もSwiftの知識やアプリの作り方を勉強しながらシェアしていきますのでよろしくお願いします。

最後までありがとうございました。

ブログランキング・にほんブログ村へ

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です