メッセージングアプリの作成

はじめに

今回、メッセージングアプリ(LINEみたいな)を開発しようと思ったのは

• iOSアプリを一度は開発してみたかった
• ペルソナ5で登場するメッセージングアプリがカッコイイ

という理由からです。ペルソナファンでしたら知っていると思いますが、既にAndroid版ではペルソナ5のメッセージングアプリ風のものは開発されています。

play.google.com

しかし、iOSアプリ版では開発されていません！！
なら自分で作ってみようと思った次第です。 ちなみに、Swift初心者でXcodeも使ったことはありません。

開発環境

• Swift (version: 4.0.3)
• Xcode (version: 9.2)

実装機能

開発アプリの実装する機能としては以下のものを開発しようと思います。

• トークルーム(実装途中)
• アカウント登録(未実装)
• ルームリスト(未実装)
• リアルタイム更新(未実装)
• フレンド登録(未実装)
• フレンドリスト(未実装)

項目を見たら分かりますが、全く進んでいません(汗)。 この記事ではstoryboardを用いた画面遷移とルームトークの機能の一部の実装を書いていきます。

storyboardを用いた画面遷移

Xcodeを用いた開発で特徴であるstoryboardで画面遷移を設計しました。 storyboardとは、iOSなどのアプリケーション開発の際に画面遷移やユーザインタフェースを視覚的に設計できるのが魅力であるXcodeの機能のひとつである。 実際にstoryboardを用いて設計したのが下のようにしました。

また、storyboardで設計したものでシミュレートを行うと下のように動作します。

トークルームの部分的実装

次に、特定のアカウントと会話を行うルームの機能開発です。
画面の構成は画面下にUITextFieldとUIButtonを配置しています。
この配置で問題となったのは、TextFieldをタッチした場合、キーボードが表示されるがTextFieldとButtonがキーボードの下に隠れてしまう現象が起こってしまう。 この問題を解決するために、トークルームのViewControllerクラスに以下のコードを書くことで解決する。

class TalkRoomViewController: UIViewController {

     @IBOutlet weak var messageTextField: UITextField!
     @IBOutlet weak var sendButton: UIButton!
    
    let screenHeight = UIScreen.main.bounds.size.height
    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        NotificationCenter.default.addObserver(self, selector: 
            #selector(TalkRoomViewController.keyboardWillShow(_:)), 
            name: NSNotification.Name.UIKeyboardWillShow, object: nil)
        
        NotificationCenter.default.addObserver(self, selector: 
            #selector(TalkRoomViewController.keyboardWillHide(_:)), 
            name: NSNotification.Name.UIKeyboardDidHide, object: nil)
        
        // Delegateを設定する.
        messageTextField.delegate = self as? UITextFieldDelegate
    }

     //UIKeyboardWillShowによって、実行される関数
    @objc func keyboardWillShow(_ notification: NSNotification){
        
        let keyboardHeight = (notification.userInfo!
             [UIKeyboardFrameEndUserInfoKey] as AnyObject).cgRectValue.height
        messageTextField.frame.origin.y = screenHeight - keyboardHeight - 
            messageTextField.frame.height
        sendButton.frame.origin.y = screenHeight - keyboardHeight - 
            sendButton.frame.height
    }
    
    //UIKeyboardWillShowによって、実行される関数
    @objc func keyboardWillHide(_ notification: NSNotification){

        messageTextField.frame.origin.y = screenHeight - 
            messageTextField.frame.height 
        sendButton.frame.origin.y = screenHeight - sendButton.frame.height
    }
}

コードを記入後はキーボードの上にTextFieldとButtonが表示されるようになりました。

また、このままではキーボードを閉じることができないのでさらに以下のコードを先程のViewControllerクラスに追加します。

 // キーボード以外をタッチすることでキーボードを閉じる
    @IBAction func touchView(_ sender: UITapGestureRecognizer) {
         self.view.endEditing(true)
    }

これにより、キーボード以外をタッチすることで閉じるようになりました。

うーん。でも、キーボード閉じてからTextFieldとButtonが下に降りるのが遅いですね。次回までには直しておきたいです。 今回は、ここまでしか実装できませんでした(汗)。

さいごに

何もかもがはじめてのことばかりで思うように開発が進みませんできたが、少しずつ開発していこうと思います。 しかし、Swiftのバージョンアップが少し違うだけでここまで違うのかと思いました。後、シミュレーションで起動するiPhoneの動作は重いですね。