パスワードiPhoneアプリ作成してみよう(Part1)

公開日:2016/03/17
更新日:
iPhoneアプリ開発

xcode_passtop

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「パスワードiPhoneアプリ」を開発していきたいと思います。

このアプリはパスワードをあらかじめ設定しておいて、そのパスワードが合っていたら次の画面へ、違っていたら現状維持という概要のアプリになっています。

今回は、アプリの中にデータを保存しておく方法、コードで画面遷移をする方法などを中心にみていきたいと思います。このアプリを作成できるようになると、アプリにデータを半永久的に保存しておく方法、パスワードのようなものを設定できるようになります!

また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう!

Xcodeの環境構築がまだの方はこちら

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)
嘘電話アプリを開発してみよう


プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。

今回はpasswordとしてプロジェクト名を決めてあげます。

次に「Device Orientation」と書かれた箇所があるかと思います。これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

xcode_web3
今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。
xcode_web4

画面とファイルを整える

画面を準備する

Storyboard上の画面の上部をクリックすると、右側に「Size」という箇所が出てくるかと思います。
ここをクリックして、「iPhone4.7-inch」を選択します。

それぞれ画面の大きさには意味があります。
下記にその一覧を記述しました。今回は「iPhone6」の大きさに対応したアプリを作成していきたいと思います。

  • iPhone6Plus→iPhone5.5-inch
  • iPhone6→iPhone4.7-inch
  • iPhone5→iPhone4-inch
  • iPhone4→iPhone3.5-inch

画面を整える

画面デザインする

それでは次にいきましょう。次は画面をデザインしていきます。

左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。
xcode_pass1
赤い部分に注目しながら進めてください。
xcode_pass2
また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。
次に、画面上の赤い部分をクリックして、右側のSizeを変更していきます。
今回はiPhone6に対応させたいと思うので、

iPhone4.7-inch

と設定します。
xcode_pass3
それでは続けていきます。

右側のパーツ欄より、ViewControllerを1つ、TextFieldを1つ追加していきます。

TextFieldに関しては、はじめの画面の上へ置きます。
xcode_pass4
このままでは、判別しにくいので画面の色を変更していきたいと思います。
画面をクリックした後に、Colorを黒へ変更します。
xcode_pass5
続いて、新しく追加した画面にプログラムファイルを設定していきます。
下記のように、File→New→Fileと選択してください。
xcode_pass6
続いて、CocoaTouchと書かれた箇所をクリックした後に名前を決定する場所へたどり着くので、
OKViewContollerと名付けます。
このように設定できました。
xcode_pass7
次に画面とプログラムを一致させていきたいと思います。
右側の赤い部分にOKViewControllerと設定します。
xcode_pass8
そして、今回はコードで画面遷移をしていきたいと思いますので、下記のようにIDを設定します。
ここではokと設定しました。
xcode_pass9
続いて、下記のようにcontrolを押しながら画面へ矢印を伸ばします。
xcode_pass10
さらにPresent Modallyを選択して画面遷移をするStoryboard上の設定は完了です。
xcode_pass11
このように矢印が出てきました。
xcode_pass12
次に画面上のテキストフィールドをプログラムへ反映させていきます。
テキストフィールドをクリックし、controlを押しながら画面へドラッグ&ドロップをします。
xcode_pass13
名前をpassWordとつけます。
xcode_pass14
これでプログラムへの認識は完了です。
xcode_pass15
続いて、次へボタンを作っていきます。
右側からButtonを画面上へドラッグ&ドロップし、ボタン上でダブルクリックしたあとに、次へと名づけます。
xcode_pass16
さらにこの次へボタンを押した後に行いたい処理を記述する場所をつくりたいので、プログラムへ認識させます。

controlを押しながらプログラムの方へドラッグ&ドロップします。nextを名づけて完了です。

xcode_pass18

アプリ内にデータを保存するとは

NSUserDefaultsについて

次に、アプリ内にデータを保存する方法について説明します。

アプリ内にデータを保存する場合は、NSUserDefaultsというものを使うのが一般的です。NSUserDefaultsは値(今回の場合はあらかじめ決めておくパスワード)に、鍵(プログラム上で認識するidのようなもの)を決めて保存します。

また、値を取り出す(参照する)際は、この鍵を頼りに取り出します。

まず、NSUserDefaultsを使用できるように下記のように宣言をします。
xcode_pass19

次に初期化します。

初期化とは、今からこのNSUserDefaultsを使いますよという意味です。
xcode_pass20
さらに、aiueoという予め決めたパスワードをpasswordという鍵で保存します。

これで、画面が開いたときにはaiueoというパスワードが設定されます。
xcode_pass21
今回は、テキストフィールドの中に文字をいれ、次へボタンを押したときに、aiueoであれば次の画面へ、そうでなければ何もしないということをしていきます。
xcode_pass22
ボタンを押したときに反応する場所に

if ([passWord.text isEqualToString:@"aiueo"]) {

}

と記述します。
これは日本語に訳すと
もし([passWordと名付けられた画面上のテキストフィールドのテキストが、aiueoであれば]){

}
という意味になります。

aiueoの時に画面遷移をしていきたいので、遷移先のプログラムをとりこんでおきます。次に、その遷移先のプログラムを変数にして、okというidがついた場所だということを認識させます。

xcode_pass23
次に、その遷移先のプログラムを変数にして、okというidがついた場所だということを認識させます。
xcode_pass25
最後に、この1行で画面をさせることができます。
xcode_pass26
以上で完了です!

シミュレーターで確認してみよう

左上の▶ボタンを押してシミュレーターを立ち上げてみます。

aiueoと入力して次へボタンを押し、白い画面が出てきたら完成です。
xcode_pass27
また、aiueo以外の文字を入れたときに白い画面へ遷移しないのであれば完了です!
xcode_pass29

最後に

いかがでしたか?

このNSUserdefaultsが使えるようになると、さまざまな値をアプリ内にとりこんで置くことができます。

また特別な処理をしないかぎり(アプリの消去など)、値は半永久的に残り続けることになります。さまざまな場所で応用が効くものになっているので、オリジナルアプリを作る際は是非参考にしてみてください!次回は、このパスワードを突破したことをSNSで知らせてみたいと思います。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!