【はじめてのiPhoneアプリ開発】文字の出力


【はじめてのiPhoneアプリ開発】文字の出力

【はじめてのiPhoneアプリ開発】では、 「XCodeを触ったことがない」 「プログラミングは初心者」 という方を想定して、 各ステップをご紹介させて頂きます。
今回は 「文字」 を表示するアプリを作ってみました。

本稿で使用する XCode のバージョン: XCode 10.1、 Swift 4.2

目次
  1. 【はじめてのiPhoneアプリ開発】文字の出力
  2. 【今回の目標】文字の出力
  3. XCodeの起動&設定
  4. まとめ

【はじめてのiPhoneアプリ開発】文字の出力

【今回の目標】文字の出力

image

今回は単純に、文字のみを出力するアプリを作成してみました。単なる文字出力ですが、 XCode初心者の方にとっては十分やりごたえのある作業であり、達成感も味わえるでしょう。それでは各ステップをご紹介していきます。

XCodeの起動&設定

Step.1 XCodeの起動

image

XCodeを起動した後、ウィンドウ左側の 「Create a new XCode project」 を選択

Step.2 テンプレートの選択

image

XCodeプロジェクトの開始を選択した後、今度は開発のベースとなるテンプレートを選びます。たくさん種類がある中で、最初の方は 「Single View App」 を主に使っていきますね。今回も 「Single View App」 を選択。

Step.3 プロジェクト名の決定

image

テンプレートの選択後、プロジェクト名などを入力する必要があります。学習初期の段階では、上記のように必要事項を入力し、後半のチェック項目は未選択のままで NEXTボタンを押します。

【各項目の概要】

  • Project Name: (プロジェクト名)
  • Team: (Apple ID の登録名、 None(なし)でもOK )
  • Organization Name: (組織名、個人の場合は名前)
  • Organization Identifiler: (組織ID、メールアドレスを逆にするのが常)
  • Bundle Identifiler: (アプリ固有のID、自動作成される)
  • Language: (プログラミング言語の選択)
  • Use Core Data (データベース・フレームワーク Core Data の使用有無)
  • Include Unit Tests (テスト環境の有無)
  • Include UI Tests (UIテスト環境の有無)

Step.4 保存先

image

今回作成するアプリの保存先を指定。今回は TestAppフォルダ を選択。

Step.5 XCodeプロジェクト開始時の初期画面

image

XCodeの初期設定を終えると、いきなりすごい高機能な感じの画面が登場。すべて説明すると本一冊分になりますので、今回は大まかな配置と機能をご紹介。

image

Step.6 Main.storyboard

image

先ほどの画面の左側にあるファイル群の中から Main.storyboard を左クリック。するとスマホのような画像が表示されます。そうです、ここがこれから主に作業をしていくメインプレートになります。

Step.7 文字機能の呼び出し

image

今回は 文字を出力 することがゴールなので、まず文字を表示できる Label 機能を呼び出します。Label機能の呼び出しは、画面右上の Library を左クリックして、 label と検索欄に入力すると表示されます。

Step.8 Label機能のセット

image

Step.7 で探した Label機能を使うには、先ほど検索表示させた水色背景の Label を 左クリック したまま、スマホ画面にドラッグ&ドロップ。すると小さく Label と文字がセットできたことが確認できます。

image

Step.9 画面の拡大

image

文字機能 Label をセットできたものの、編集画面が小さいですよね。編集しやすくするために、まず画面右上のサイドバー ON/OFF ボタンで 左サイドバー を非表示に。そしてスマホ画面下の + ボタンを押して編集しやすいサイズに変更します。

image

あとは Label と書かれた文字を適当な文言に変更。

image

Step.10 はじめてのアプリを実行

image

文字を入力できたら、画面左上の シミュレーター欄の ▶ を左クリック。すると Build Succeeded と表示されて、 30秒ほど待つと先ほどの Label が表示されます。

image

ファイルの保存

image

作成した XCodeプロジェクトは、画面上部ツールバーの File から Save を選択すると保存できます。

プロジェクトの再開

image

プロジェクトを再開するときは、先ほど保存した TestApp フォルダ内の .xcodeproj ファイルをダブルクリック。もしくは XCodeアプリ起動時のウィンドウ右側に表示される最近のプロジェクトを選択。もしくは XCode画面上部のツールバー File から Open を選択するとプロジェクトを再開できます。

Webサイト担当者としてのスキルが身に付く!!

無料カウンセリングはこちら

まとめ

アプリ開発をするために Swift学習をしてきた方にとっては、意表を突かれたかもしれません。今回の文字出力ではなんと一回も Swiftコードが登場していないんですね。

しかし、これから 「タップしたら文字が変わる」 などアプリらしく動きをつけていく際に Swift は登場してきますので、今回は XCode の慣らしとしてご参考頂ければ幸いです。


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp