【Swift】プロジェクトの作成と実機での確認

どーも！

たかぽんです！

今回はSwiftを使って少しだけ遊んでいこうと思います！

といっても、基本的なデフォルトの画面を実機で動作確認してみるだけです！w

ではやっていきましょう！

プロジェクトの作成と実機での確認

まずは最初に、検証環境としては以下です。

Mac Book Pro

Xcode

では、前提が確認できたので、やっていこうと思います！

まずはプロジェクト作成からやっていきましょう！

Xcodeでプロジェクトを作成する

まずはXcodeでプロジェクトを作成します。

作成するアプリのプロジェクトですね！

Xcodeを開くと、以下のような画面が出てくるかと思います。

右側は過去に作成したものなどが出てくるのですが、初めての場合は何もないと思います。

筆者の場合はFirstSwiftProjectというアプリを作ったんだな...ということが伺えますねw

では、"Create a new Xcode project"を選択しましょう！

すると...?

上記のような画面が出てきます。

これは、どんなアプリを作るのか・・・？といったことによってあらかじめ用意されているテンプレートを使ったりすることができます。

今回は"App"を使いますので、そのまま"Next"を選択しましょう。

すると、プロジェクトの詳細を設定を行う画面が出てきます。

ProductNameだけ修正して、"Next"を選択しましょう。

ProductNameはどんなアプリかわかるような名前をつけておけば大丈夫でしょう。

今回は"TakaponTest"としておきますw

そのままNextを選択すると...以下のような画面が出てくるかもしれません。

これは、著者情報が設定されてないけど大丈夫ですか〜？というだけなので、今は"Cancel"を選択しておきます。

そして以下のような画面がひらけばOKです！

画面中央右のシミュレータ（iPhoneの画面が表示されているもの）は最初は起動していないとおもいますが、上部に"resume"というボタンがあると思うので、そちらを選択すれば起動されます。

ここまでできればプロジェクトの作成は完了です。

最初の状態だと"Hello world!"という文章が表示されるだけのアプリ...になってるんですね。

では次からこのアプリを実機のiOS端末で実行していきます！

実機で動くようにXcodeを設定する

さて、それでは次は試しに実機で動かしていきます。

もともとはAppleの開発者登録をしておかないと実機での確認はできない・・・？っぽかったのですが、新しくなってからできるようになったそうです！

ありがたいですね！

ではやっていきます。

まず、最初に画面上部のツールバーからXcodeの設定画面を開きます。

"Xcode -> Preferences... "をクリックするか、"Command" + ","で開くことができます。

すると、以下のような色々な設定ができる画面が出てきます。

ここで"Accounts"を選択します。

これは、ここで、左下の"+"ボタンを選択すると、以下のように"Apple ID"を選択することができます。

このままでOKなので、AppleIDを選択してContinueを。

すると、Apple IDを入力する画面が出てくるので、IDとパスワードを入力します。

すると、アカウント情報が登録されていることが確認できると思います。

めちゃくちゃ隠していますが、以下の黒い箇所にメールアドレスやAppleIDの登録名などが表示されていればOKです。

ここまでできたら次はManageCertificationsを選択します。

すると、今度は以下のような画面が出てくるかと思います。

左下の"+"ボタンから"Apple Development"を選択して、開発用の証明書を発行します。

筆者はすでに作成しているので作成できなかったんですが、適当な名前で作成しておけばOKです。

作成して、上記画像のように証明書が一つできていれば"Done"を選択します。

ここまでできればほとんど準備完了です！

では、次から実機を接続していきましょう！

実機をつないで試す！

次はIOS端末をPCに接続します。

普段充電をしているライトニングケーブル等があれば接続ができると思いますが、筆者の場合は以下のようにUSB-typeCをUSB-typeAに変換するハブ + lightningケーブルのUSB Type-Aを利用しました。

特に、CからAへの変換プラグは意外とすぐに手元にはなかったりするので各自ご用意ください。

画像にもありますが、筆者は以下を使用しています。

さて、では接続ができたら、次はXcodeで起動するシミュレータに実機を指定します。

指定する方法は、Xcodeの上部にある、

"Project名" > iPhone ...

となっている箇所をクリックして、変更が可能です。

現在筆者の環境だとiphone8になっていますね。

ここをクリックすると....

上記のようにその他のiPad等のシミュレーターや、もし先程のios端末が接続できていれば、"iOS Device"のところにご自身のios端末（筆者の場合本名まんまなので消してます...w）が表示されます。

それを選択して、ちゃんと画面上で変わればシミュレーターの設定はOKです。

では、実際に動かしてみます！

このまま画面左上あたりにある再生ボタンを選択します。

このボタンでシミュレーターでの起動ができるんですが、以下のようになるかと思います。

画面上部に赤いバツ丸があるとおもうので、そこを選択すると、左側にエラーログが出ます。

開発チームの指定が必要なので、してね！って言われておこられたので、やっていきましょう！

左上のアイコンがたくさん横並びになっている中から、一番左のフォルダのようなものを選択します。

そして、すぐ下のプロジェクト名ところをクリックして、青くなる状態にします。

すると、中央の項目がこんな感じになるかと思います。

ここで、上部の"Signing & Capabilities"を選択します。

そして、表示された画面から、"team"項目を修正していきます。

先程最初に登録したIDに対応するものができていると思うので、それを追加すればOKです。

そしたら、再度再生ボタンで動かしてみます。

すると、今度は以下のような画面が出てくるかもしれません。

これは、端末側でアプリを信頼する必要があるのですが、それをしていないため出てしまうものです。

では、ここから接続しているスマホ側をいじっていきましょう！

スマホ側でAppを信頼する

では最後にスマホ側でAppを信頼していきましょう！

以下は実際のつないでいるiPhone側のスクリーンショットです。

まず、設定から"一般"を選択します。

一般を開いたら、下の方へ行くと、デバイス管理...というものが出てくると思います。

もしこれがない人は、再度Xcodeを設定した上で、シミュレーターの再生ボタンを押してください。

設定が正しくできていればできるはずです...!

デバイス管理を選択すると...

デベロッパAPPというものが表示されるので、選択します。

デベロッパAPPを表示すると、上記のように先程アプリを作成したAppleIDの情報で色々と表示されます。

また、先程作ったアプリ名"TakaponTest"も表示されているのがわかりますね。

では、青い文字の部分を選択します。

すると、信頼することができるので、信頼を選択。

以下のようにAppを削除...というのが表示されていればOKです。

さて、では改めて...!

Xcodeの再生ボタンを押してみましょう！

すると...?

アプリが立ち上がり、真っ黒な画面に"Hello, world!"と表示されました！

文章を書き換えてみる

試しに、文章を少しだけ書き換えてみます。

Xcodeから左上のフォルダを開いて、"ContentView.swift"をちょっとだけ書き換えます。

今回は改行して日本語で挨拶をするようにしておこうと思います。

一部を以下に置き換えればOKです。

struct ContentView: View {
    var body: some View {
        Text("Hello, world!\nこんにちわー！")
            .padding()
    }
}

では、書き換えてセーブをしたら、再度再生ボタンを押すと...?

変わりました！

実機を接続しながらいい感じに確認もできそうですね...!

まとめ

今回はXcodeを使ってアプリのプロジェクトを作成し、その動作確認を実機でやる方法を調べてみました！

筆者、せっかくMacを新調したので、これからはアプリ開発にも少し手を伸ばしてみようかなと思います。

とはいってもまだ基本が全然把握できてないので、まずはそこからになりそうな気がしますが...

頑張っていきます...！

それでわ！