bgm付きタイマーアプリ作成#1:iPhoneアプリ

iPhoneアプリ
JESHOOTS-com / Pixabay
スポンサーリンク

Xcode、Swiftを使ってアプリを作る過程をタイマーアプリを作りながら初心者の方でも分かりやすいように細かく説明して行きます

今回作るタイマーアプリ

よく初心者向けのiPhoneアプリ作りで紹介されるタイマーアプリですが、今回僕が作るタイマーアプリは勉強する時に使うことを想定したbgm付きのタイマーアプリで50分の集中タイムと10分の休憩タイムを繰り返すようなものを作ろうと思います。

完成したものがこちら

はじめに Xcode, Swift とは

XcodeはAppleが提供しているアプリを作るための開発ツールでレイアウトなどを細かいプログラムを書くことなく直感的に作成することができる便利なソフトウェアです。Macでのみインストールすることができます。残念ながらWindowsなどのMac以外のPCではXcodeがインストールできないのでiPhoneアプリを作ることはできません(可能かもしれませんが非常に難しいでしょう)。

SwiftとはAppleが発表したオープンソースのプログラミング言語でiPhone, iPad, Mac, Apple Watchなど様々なApple製品で動くアプリを開発することができます。

しかし他の言語と比べてもSwiftは発表されてからまだまもなく現在でもすごい勢いで進化、バージョンアップしている言語です。そのため去年まで書いていたコードが書けなくなったり書き方が変わったりなど変化についていく必要があります。

 

Xcodeのインストールは非常に簡単で他のアプリケーションと同様にApp Storeでインストールできます。少し容量が大きいので注意してください。

 

タイマーアプリ作成

では実際に作って行きましょう、まずはどんなアプリでも作る際に

  1. どんなアプリを作るか
  2. どんな機能があるか
  3. レイアウトはどうするか

を決めておかなければなりません。まだ慣れていない方でも自分がどんなアプリを作るのか決めていないとそれを作ることはできませんし、作りながら決めていくという方法は非常に効率が悪くなります。できるだけ最初に紙にでも書いてこれらのことを決めておきましょう。

新規プロジェクト作成

Xcodeで新規プロジェクトを作成します。

Xcodeを起動するとこのような “Welcome to Xcode” という起動画面が出てきます。

①はPlayground(プレイグラウンド)というツールを立ち上げ、新規ファイルを作成します。Playgroundではプログラムを書くとすぐに結果が表示されるのでSwiftでのプログラミング練習やちょっとしたプログラムを試したい時などに非常に役立ちます。機会があればPlaygroundの使い方のことも書こうと思います。

 

②は新規のプロジェクトを立ち上げ、プロジェクトファイルを作成します。アプリを新しく作る際はこれを選択します。今回はこちらを選択してください。

 

その下にある”Clone an 〜”っていうやつは初心者はほとんど使うことがないのでここでは触れません。

 

③のチェックボックスをクリックしてマークを消すとXcodeを起動した際に”Welcome to Xcode“という起動画面が出てこなくなります。戻そうと思えばすぐに戻せますし、出てこなくても画面上部のメニューバーから新規作成はできるので問題はありませんがそのままにしておいて良いと思います。

 

②を選択すると以下のような画面が出てきます。

ここでは作成するアプリのテンプレートを選択することができます。テンプレートを使用することで簡単に作りたいアプリの形を自分で作ることなく使えます。

また作るアプリのOSもここで選択します。

今回はiOSアプリ、真っ白な何もない状態の”Single View App“を選択し、”Next“で次にすすめます。

 

次に出てくる画面がこちらです。

ここではプロジェクト情報を入力します。

 

自分で決めた好きなアプリの名前を入力します。今回は”5:1 Timer“。

Xcodeに登録したApple IDを選択します。これは自分のiPhoneなど実機で動作確認するとき必要になりますが、Xcodeのシュミレーター(PC内)で動作確認するまでは設定しなくても大丈夫です。実機テストに関しては下にまとめていますのでそちらを確認してください。

組織名や会社名を入力します。個人の場合は名前やニックネームなど好きに決めても大丈夫です。

組織識別名を入力します。組織識別名ってなんぞや?ってなりますよね、私が初めてXcodeに触れた時ここですごく苦労しました、、、笑

でも安心してくださいめちゃ簡単です! 組織識別名とは世界で唯一1つのあなたの識別名を決めてくださいってことです。まだ難しい、、  例えばよくSNSのアカウントを作成するときに名前とパスワードを決めますよね。その時に「このパスワードはすでに使用されています」とか言われることがあります。組織識別名はそれと良く似ています。

ここでよく使われるのは逆ドメインや逆メールアドレスです。私は”saharablog.com“を逆にして逆ドメイン”com.saharablog“を入力しています。

自分のドメインを持っていない方はメールアドレスを逆にしたものを使いましょう。例えばメールアドレスが”sahara111@gmail.com“なら”com.gmail.sahara111“というように。(もしそれで作成できない場合は違うメールアドレスを使うとうまくいくときがあります。)

⑤ここには自動的にアプリの名前と組織識別名が組み合わされた識別名が作成されるので入力する必要はありません。

アプリをどのプログラミング言語で作るか選択します。今回はSwiftを選択します。

下3つのチェックボックスは全てチェックを外したままで大丈夫です。

 

ここまで入力できたら”Next”で保存先を決めると下のような画面が出てきて新規プロジェクト作成完了です。保存先はどこでも自分のわかりやすいところ(デスクトップなど)で大丈夫です。

コメント