【Xcode】パスワードiPhoneアプリ作成してみよう|アプリ内にデータを保存する【NSUserDefaults】

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

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

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

その結果をSNSに投稿できるように設定もしましょう。

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

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

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

パスワード突破アプリを開発

ではアプリを開発していきましょう。

まずは、アプリの本体となる部分です。

プロジェクトを作成する

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

今回は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

結果をSNSに投稿する

ではこの結果をSNSに投稿できるようにしましょう。

フレームワークを使用する

それでは作成していこうと思います。

まず、下記のように左側passwordという箇所をクリックした後、下の赤い部分(+の部分)をクリックします。
xcode_pass1

すると、Social.frameworkと検索し、Addをクリックします。これで、SNSへ追加する準備が完了しました。
xcode_pass2

xcode_pass3
続いて画面を構築していきます。

SNSへの投稿用ボタンを画面の上へ追加しましょう。Buttonを右側からドラッグ&ドロップしていきます。
xcode_pass4
そして名前を「SNSへ投稿する」と変更します。ダブルクリックで変更可能です。
続いてプログラムを同時に見たいので、右上の赤い箇所をクリックします。
xcode_pass5
これでプログラムをみることができるようになりました。
xcode_pass6
次にSNSへ投稿するボタンをクリックした際に動作させる箇所を作っていきます。
左側SNSへ投稿するボタンを選択した状態でキーボードでcommandを押した状態でプログラムの方へドラッグ&ドロップします。
xcode_pass7
メソッドの名前を決めます。ここではshareと名づけました。
xcode_pass8
最後に下記もようにプログラムへSocial.frameworkを使うことをしめしてあげます。
これで使えるようになりました。
xcode_pass9

パスワード突破後SNSへ通知する

xcode_pass10
更に下記のようにコードを加えます。

   SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook];  
  
    [vc setInitialText:@"パスワードを突破しました"];

    [self presentViewController:vc animated:YES completion:nil];

Social.frameworkを使用してSNSへ投稿する際は、このコードがテンプレートとなっています。

重要なのはSLServiceTypeFacebookという箇所です。

このSLServiceTypeFacebookはFacebookへ投稿することを明示してあるのですが、これをTwitterやWeiboに変更することもできます。試しに変更してみたい方は、SLServiceTypeFacebookのSLServiceTypという部分でeを押してみてください。すると、予測でいろいろなTypeが出てきます。

コードの説明をします。

1行目で投稿準備画面のタイプを決めます。(FacebookなのかTwitterなのかWeiboなのかなど)

2行目で実際に投稿する際にはじめから入力しておく文字を決めておきます。もしここが空の場合、何も文字がセットされていない状態になります。

3行目でこの準備された画面を呼び出しています。

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

それではシミュレーターで確認してみましょう。
まず、パスワードをaiueoと決めたので、Textfieldへaiueoと入力してパスワードを突破します。
xcode_pass11
すると、SNSへ投稿するボタンを画面が遷移しました。
xcode_pass12
そしてSNSへ投稿するボタンをクリックすると、通常は投稿画面が現れます。

また、シミュレーターで試す場合は、このようなアラート画面が出てきます。

これはシミュレーター内にFacebookアカウントを登録してくださいということを意味します。
xcode_pass13
Settingをクリックすると、このような画面が出てくるので、User NameとPasswordを入力してSign inをします。
xcode_pass14
すると、今度はちゃんと投稿準備画面が表示されました。
Postをクリックすると実際に「パスワードを突破しました」と投稿されていることがわかります。
xcode_pass15

TwitterかFacebookかを選択できるようにする

ここまでは、Facebook、Twitterどちらかに投稿する設定をしました。

ですが、ユーザーはどちらかのSNSに投稿したいですよね。

ここからはTwitterかFacebookかを選択できるようにしていきます。

画面を整える

まず、「選択して投稿する」ボタンを画面へ配置したいと思います。

右側のButtonを図のようにドラッグ&ドロップしてください。そして、前回同様にボタンの上でダブルクリックをして、選択して投稿するという名前に変更してください。
xcode_pass4
次に変更が終わったら、選択して投稿するボタンをクリックしたときの処理を記述する場所を作っていきます。ボタンの上でキーボードのcommandを押した状態で、プログラムの方へドラッグ&ドロップします。

すると、下記のような画面になるので「selectPost」というメソッド名をつけます。
xcode_pass5
以下のようになっていると完了です。
xcode_pass6

この中には、アラート画面を構築する処理、ボタンの構築、ボタンを押したときの処理、ボタンをアラート画面へ貼り付ける処理、アラートを出す処理を書いていきます。

UIAlertControllerの構築

まず、アラート画面を構築することからはじめます。

アラート画面は基本的に、タイトル、メッセージを決めることで成立します。下記のように書くのが一般的です。
xcode_pass7
タイトルは投稿画面、メッセージはどこへ投稿されますか?としました。

  // コントローラを生成
    UIAlertController *ac =
    [UIAlertController alertControllerWithTitle:@"投稿画面"
                                        message:@"どこへ投稿されますか?"
                                 preferredStyle:UIAlertControllerStyleAlert];

ボタンを構築する

次に、このアラート画面へのせるボタンを構築していきます。

今回ボタンは3つです。キャンセルボタン、Facebookへの投稿ボタン、Twitterへの投稿ボタンです。
まずは、キャンセルボタンを作成していきます。
xcode_pass8
キャンセルボタンに限らず、ボタンは主にタイトル、スタイル、ボタンを押したときの処理を記述することができます。
まず、actionWithTitleという後にキャンセルと書かれた箇所を見てください。
ここでボタンのタイトルを変更することができます。
続いて、

style:UIAlertActionStyleCancel

と書かれた箇所に注目してください。
ここで、ボタンのスタイルとボタンを押したときの処理を決めます。

//キャンセル用のボタンとアクションを生成
    UIAlertAction *cancel =
    [UIAlertAction actionWithTitle:@"キャンセル"
                             style:UIAlertActionStyleCancel
                           handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理

                           
                           }];

今回の場合はキャンセルボタンを構築するので
UIAlertActionStyleCancel
としています。
このスタイルは主に

UIAlertActionStyleDefault
    UIAlertActionStyleCancel
    UIAlertActionStyleDestructive

があります。そして、上の2つを使用して構築していきます。

また、

 handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理

                           
                           }];

と書かれた箇所の//ボタンタップ時の処理と書かれた下に本来であれば、ボタンがタップされたときの処理を書いていきます。
キャンセルの場合、ボタンを押してもなにもしないということを実行します。
よって何も書きません。
同じようにTwitterボタン、Facebookボタンも構築していきます。

 
// Twitter用のアクションを生成
    UIAlertAction *twitter =
    [UIAlertAction actionWithTitle:@"Twitter"
                             style:UIAlertActionStyleDefault
                           handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理
                                                            
                               
                           }];

今回はキャンセルボタンではないので、styleがUIAlertActionStyleDefaultになっていることに注目してください。
また、タイトルはTwitterとしています。
xcode_pass9
キャンセルボタンと異なるのは、ボタンを押した時にTwitterへ投稿するということです。
なので、

handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理
                                                            
                               
                           }];

の中に「Twitterへ投稿する画面を出す」という前回行った処理をそのまま書いていきます。
すると全体はこうなります。
xcode_pass10

 // Twitter用のアクションを生成
    UIAlertAction *twitter =
    [UIAlertAction actionWithTitle:@"Twitter"
                             style:UIAlertActionStyleDefault
                           handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理
                               
                               SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
                               
                               [vc setInitialText:@"パスワードを突破しました"];
                               
                               [self presentViewController:vc animated:YES completion:nil];

同じように、Facebookも作っていきます。
xcode_pass11
xcode_pass12

 
// Facebook用のアクションを生成
    UIAlertAction *facebook =
    [UIAlertAction actionWithTitle:@"Facebook"
                             style:UIAlertActionStyleDefault
                           handler:^(UIAlertAction * action) {
                               // ボタンタップ時の処理
                               
                               SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook];
                               
                               [vc setInitialText:@"パスワードを突破しました"];
                               
                               [self presentViewController:vc animated:YES completion:nil];
                               
                               
                               
                           }];

ボタンをアラート画面へ貼り付ける

さて、ボタンが完成したので、最後にボタンをアラート画面へはりつけていきます。
xcode_pass13

 
 //コントローラにボタンたちを追加
    [ac addAction:cancel];
    [ac addAction:twitter];
    [ac addAction:facebook];

上から、キャンセルボタン、Twitterボタン、Facebookボタンをacというアラート画面へ貼り付ける処理を行っています。

最後に完成したアラート画面を出すという処理を書きます。
xcode_pass14

    // アラートを呼び出す
    [self presentViewController:ac animated:YES completion:nil];

acとはアラート画面のことですね。

シミュレーターで確認する

それでは、いつものように左上の▶ボタンを押して、シミュレーターを起動してみましょう。
まず、パスワードはaiueoです。

次へを押してパスワードを突破します。
xcode_pass15
すると、下記のように選択して投稿するボタンが新しく加わっています。
xcode_pass16
クリックすると、アラート画面が出現しました。
xcode_pass17
Twitterボタンを押すと、
xcode_pass18
このように、投稿画面が現れます。
Facebookも同様です。
xcode_pass19

まとめ:NSUserdefaultsを使ってアプリ内にデータを保存

いかがでしたか?

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

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

この記事をかいた人

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