20220323のiOSに関する記事は5件です。

Qiita始めました!

目次 1.はじめに 2.自己紹介 3.おわりに 1. はじめに 初めまして! 日報アプリgamba!(ガンバ)でエンジニアをしている池田です! この度、日報アプリgamba!のメンバーでブログを始…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Swift】カスタムインプットビュー対応のキーボードで隠されない文字入力欄を作る

iOSには普段利用するシステムキーボードがあります。 これとは別にサービスによってスタンプや絵文字など独自の入力を行いたい場合があります。 そのような場合に独自入力は別UIViewで表示/非表示を制御する方法もありますが、 UITextField ではカスタムインプットビューを使うことでキーボードの一部として扱うことが出来ます。 この記事では以下のような表示の作り方や入力しやすい工夫について記載します。 キーボードで隠れないようにする UITextFieldを追加しただけではキーボードを表示した際に隠れてしまいます。 その為、キーボードが表示されている場合にキーボードの真上に UITextField が表示されるように移動させます。 キーボードの表示/非表示イベントは以下のように Notification を登録することで取得することが出来ます。 SampleViewController.swift import RxSwift import RxCocoa public final class SampleViewController: UIViewController { private var disposeBag = DisposeBag() public override func viewDidLoad() { super.viewDidLoad() bindNotification() } func bindNotification() { NotificationCenter.default.rx.notification(UIResponder.keyboardWillShowNotification) .takeUntil(rx.deallocated) .subscribe(onNext: { [weak self] notification in // キーボードが開く際の処理を記載 }) .disposed(by: disposeBag) NotificationCenter.default.rx.notification(UIResponder.keyboardWillHideNotification) .takeUntil(rx.deallocated) .subscribe(onNext: { [weak self] notification in // キーボードが閉じる際の処理を記載 }) .disposed(by: disposeBag) } } また、取得できる情報からキーボードの高さやアニメーション等も取得することが出来ます。 SampleViewController.swift NotificationCenter.default.rx.notification(UIResponder.keyboardWillShowNotification) .takeUntil(rx.deallocated) .subscribe(onNext: { [weak self] notification in guard let self = self else { return } guard let userInfo = notification.userInfo else { return } // アニメーションカーブ guard let curve = userInfo[UIResponder.keyboardAnimationCurveUserInfoKey] as? Int else { return } // キーボードのサイズ情報 guard let keyboardInfo = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return } // アニメーション秒数 guard let duration = userInfo[UIResponder.keyboardAnimationDurationUserInfoKey] as? TimeInterval else { return } }) .disposed(by: disposeBag) この動きに合わせてUITextFieldをアニメーションさせることにより、キーボードに隠れないように表示することが可能です。 SampleViewController.swift // UITextFieldのBottomのNSLayoutを設定 @IBOutlet private var textFieldBottom: NSLayoutConstraint! // キーボードを表示する時のアニメーション private var showKeyboardAnimation: UIViewPropertyAnimator? // キーボードを隠す時のアニメーション private var hideKeyboardAnimation: UIViewPropertyAnimator? func showTextField(curve: Int, keyboardInfo: CGRect, duration: TimeInterval) { if let curve = UIView.AnimationCurve(rawValue: curve) { let height = keyboardInfo.size.height let safeAreaHeight: CGFloat = 34// SafeAreaの高さを取得、こちらは省略させて頂きます。 self.hideKeyboardAnimation?.stopAnimation(true) self.showKeyboardAnimation = .init(duration: duration, curve: curve) { self.textFieldBottom.constant = -(height - safeAreaHeight) self.view.layoutIfNeeded() } self.showKeyboardAnimation?.startAnimation() } } func hideTextField(curve: Int, duration: TimeInterval) { if let curve = UIView.AnimationCurve(rawValue: curve) { self.showKeyboardAnimation?.stopAnimation(true) self.hideKeyboardAnimation = UIViewPropertyAnimator(duration: duration, curve: curve) { self.textFieldBottom.constant = 0 self.view.layoutIfNeeded() } self.hideKeyboardAnimation?.startAnimation() } } アニメーションにはUIView.animateのメソッドも存在しますが、 こちらはアニメーション中にキャンセルが出来ません。 表示→非表示や、システムキーボード→カスタムインプットビューを素早く行った際に アニメーションがぶつかってしまう為、UIViewPropertyAnimatorを利用しています。 カスタムインプットビューを追加する カスタムインプットビューとは The custom input view to display when the text field becomes the first responder. 引用元:UITextField.inputView UITextFieldにフォーカスが当たったときに表示するViewを独自に作成したViewに変更させることが出来ます。 こちらにnilの場合はデフォルトのシステムキーボードが表示され、デフォルトではnilになっています。 カスタムインプットビューは絵文字やスタンプ、 入力プリセット等サービスに特化した入力欄を用意する場合に用いられます。 カスタムインプットビューを表示/非表示する UITextField.inputViewに対してカスタムインプットビューを追加します。 SampleViewController.swift @IBOutlet private weak var textField: UITextField! func showCustomInputView() { // 表示するカスタムインプットビューを生成 let customInputView = generateCustomInputView() textField.resignFirstResponder() textField.inputView = customInputView textField.becomeFirstResponder() } inputViewに対してカスタムインプットビューを設定する際に前後でresign, becomeを行っています。 これを行わなかった場合、システムキーボード表示中にカスタムインプットビューに切り替えることが出来ませんでした(要調査) 非表示にする場合はnilを代入します。 SampleViewController.swift @IBOutlet private weak var textField: UITextField! func hideCustomInputView() { textField.resignFirstResponder() textField.inputView = nil textField.becomeFirstResponder() } 今回は例として下記のような定型文を入力する用のカスタムインプットビューを作成しました。 組み込んだ際の実際の動作は下記のようなものとなります。 システムキーボードとカスタムインプットビューの切り替えにはUIButtonのTapで行っています。 前述したとおり、UITextFieldのアニメーションにUIViewPropertyAnimatorを使っており、 表示/非表示をそれぞれキャンセル可能にしている為、 キーボードが切り替わってもスムーズに追従します。 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初めてiOSアプリをリリースした話

はじめに こんにちは!初めましてsoraと申します!   カレンダーアプリをリリースしたのでこちらにて紹介させてください! ちなみに私は現在、22年卒の大学生でSwift歴は2020年9月~です。 リリースしたアプリの紹介 今回リリースしたアプリは「Re:スケ」というカレンダーアプリです。このアプリは大学のゼミの卒業制作として3人でチームを組み作ったアプリです。 カレンダーアプリを作った理由は、みんなが使えるアプリを作りたいってなったのと今までカレンダーを扱ったアプリを作ったことがなかったので勉強したいからという割とざっくりとした理由でカレンダーアプリを作ることにしました。 AppStore: https://apps.apple.com/jp/app/re-%E3%82%B9%E3%82%B1/id1607735456 ソースコードはこちらです。 よろしければインストールして試してみて欲しいです! アプリ概要 このアプリはカレンダーでスケジュール管理するスマホアプリです。 主な機能としては 日付ごとのイベント管理機能(CRUD) リマインダープッシュ通知 カスタマイズ可能なカレンダー表示(スライド方向の切り替え設定、曜日順、土日祝のみと平日のみの表示機能) 六曜の表示 Widget Googleカレンダーアプリと同期、iOS標準カレンダーアプリと同期 となっております。    開発環境 Swift5.5.2 Xcode13.2.1 使用ライブラリ FSCalendar カレンダーの実装 RealmSwift 日付ごとのイベント管理 CalculateCalendarLogic 祝日判定 TextFieldEffects TextFieldのUI IQKeyboardManager キーボード表示時の画面のスライド PKHUD 通信時のローディングインジケーター SwiftLint ソースコードの品質管理 AppAuth OAuth2.0およびOpenIDConnectプロバイダーと通信するためのクライアントSDK GTMAppAuth AppAuthでリクエストを認証するためGTMFetcherAuthorizationProtocolの実装を提供する GoogleAPIClientForREST/Calendar Googleの様々なAPI へのアクセス・データの取得などを簡単にできるようにしてくれるもの(今回はGoogleカレンダー) Google-Mobile-Ads-SDK Googleモバイル広告の最新世代で、洗練された広告フォーマットと、モバイル広告ネットワークや広告ソリューションにアクセスするため LicensePlist CocoaPods、SwiftPMなどで管理しているライブラリのライセンス表示を自動的に生成するツール Firebase Firebaseのアナリティクスでユーザー解析をするため 特徴 カスタマイズ可能なカレンダー表示 これは土日祝に予定を追加する際、その月の土日祝や平日がくっきり瞬時に分かります。普段土日祝の休日にしか予定を入れない人や学生には便利な機能ではないかと思います。    作ってみた感想 今まで何個かアプリを個人で作っていましたが、今回初めてカレンダーを扱うアプリを作りました。その中でデータベースのRealmも初めて実装しました。ですので、最初はその勉強から始まりましたが、無事に完成させることができて良かったです。 苦労した点は、Realmはこれまで利用していたSQLiteやFirebaseと比べて設計思想や使い方が少し違うので、理解して実装しなければクラッシュがよく起こるところとシンプルなアプリですので既存アプリとどう差別化するかについては苦労しました。 アプリをリリースして良かったこと ユーザーから意見やアイデアをもらえる やはりなんといってもユーザーからの声が一番嬉しいですね。このアプリはまだまだ知名度が低いですが、周りの友人から「便利やな」や「もっとここをこうして欲しい」とか「今までカレンダーアプリ使ったことないけどこれを機に使ってみる」などのポジティブなフィードバックをもらった時は「これがアプリ開発か~」と嬉しかったことを覚えています。 もし、アプリ開発の勉強しているけどリリースしたことがない人はなにかしらのアプリを作ってリリースすることをおすすめします。 私はもっと早くにアプリを作ってリリースしていればよかったと少し後悔しています。(笑) おわりに 既存のカレンダーアプリに比べて劣るとこはたくさんあると思いますが、大学のゼミの卒業制作としてしっかり完成させてリリースできて良かったです。技術的にも、興味があったものや実装したことがないものを中心に採用できたので自己成長にも繋がりました。 今後はSwiftUIも勉強し、どんどんアプリを作っていきたいと思っています。 あと、Flutterにも興味あるので余裕があれば勉強してみようかなと思っています。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

IoT用MEEQのSIMをiPhoneに刺してみた

「霊園ガイド」サイト開発日記の高橋です。<誰も知らんがな さて、最近は、IoTのSIMもいろいろ提供されているけど、「ソニーネットワークコミュニケーションズ スマートプラットフォーム株式会社」という長い名前の会社から提供されてる月130円のSIMを発行してもらってiPhoneに刺してみたので、その手順をメモしておきます。 スクショをそのまま貼っていったので画像がでかくて見にくいかな。Qiitaのマークダウンに画像サイズを指定できないのだったけ?まぁ、引越しで忙しいから許してね。 MEEQとは https://www.sonynetworksmartplatform.co.jp/meeq/about.html SIMの発行はWebコンソールでまぁはじめてだと戸惑いながらも割と簡単にできるのだけど、今日は申し込んでSIMが届いて、アクティベーションまでは終わり、IPhonに「構成プロファイル」をダウンロードするところから書いていきます。 ちなみに届いたMEEQのSIMはこんな感じでマルチカットなタイプで、nanoSIM microSIM 標準SIMがどれでも使えます。 さて、構成プロファイルとは、アクセスポイントへの接続に必要なAPN(Access Point Name)設定に必要なファイルで、iPhoneやiPadなどiOSの各種設定が書かれたXML形式のファイルです。 ちなみにAndoridならAPN設定は「設定」>「無線とネットワーク」>「モバイルネットワーク」>「アクセスポイント名」あたりから設定できるのではないかと思います。 では、iPhone用の「構成プロファイル」をダウンロードするところから始めます。 下記ページを開くと構成プロファイルをダウンロードできるので、SIMを刺したいスマホで開きます。 構成プロファイルをインストールすると、今まで使っていたキャリアSIMが使えないので、とりまWiFiは使える場所でやると良いかもしれません。 iOS端末でAPN構成プロファイルを設定したい https://support.meeq.jp/hc/ja/articles/4408968748431-iOS%E7%AB%AF%E6%9C%AB%E3%81%A7APN%E6%A7%8B%E6%88%90%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%9F%E3%81%84 1■画面下のダウンロードリンクをタップします 2■ダウンロードを許可します 3■閉じてiPhoneの「設定」を開きます 4■設定を開くと、、、 5■「プロファイルがダウンロード済み」と表示されてるのでタップします 6■右上の「インストール」をタップします 7■iPhoneのパスコードを入力します 8■右上の「次へ」をタップします 9■右上の「インストール」をタップします 10■下の「インストール」をタップします 11■インストール完了 というわけで、いろいろ見て回ったら、、、 うんともすんとも言わなくなる。 え? と思ってPCでMEEQダッシュボードを見ると 「月刊寄生虫」もとい「月間規制中」とある。あれ? 申込んだプランは一番安い奴でこの料金表の一番上の「定額10Mプラン」 つまり、月間10M超えたのかな(^^? 今時普通のページ見てもそれくらいすぐにいってしまう。 データ容量10Mで、規制後は容赦なく「切断」されてしまうプランでしたorz。 そこで、とりま、データチャージ「100MBチャージ」(3ヶ月有効)プラン300円!を申し込んだらその瞬間に動き出した! でも、プラン名が「100MBチャージ」でその「データ量」が10Mと書いてる意味がよくわからない。うーむ。まぁ動いたので回線速度テストしてみた。 だがしかし、こうなるとスピードテストのスクショをここへアップロードするのも容量がもったいないので、他のスマホで上げてみました。 こうです。 まぁ、低用量のioT SIMで 普通のWebページなど見てはいけませんね(^^; ■おまけ■もとのキャリアSIMへの戻し方 テストを終えて、SIMを差し替えただけでは元のキャリア(今回はahamo)へ戻らなかったので、電話も掛けられないということで、なんとかいくつか試してうまくいった方法を書いておきます。 1■「設定」>「一般」>「VPNとデバイス管理」を開き「構成プロファイル」をタップする 2■プロファイルを削除をタップする 3■パスコードを入力する 4■「削除」をタップする 5■SIMを変える。 もしうまくいかなけれは、再起動してみる、とか回線試験用番号111にかけてみるとか試したけど。 まぁ、いまのところうまくいってる。 とはいえ、私もまだよくわからない事だらけのひとばしらなので、試す場合は自己責任でお願いします。 では、今日はここまで。 P.S. あと、SIM利用を発行する時にキャリアを自由に選べますが、利用可能な通信方式はこんな感じ。 一応、霊園ガイドサイトはこちら https://reien.top/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Pod install がエラーになる

You may have encountered a bug in the Ruby interpreter or extension libraries. Cocoa Podsをインストールした後、Pod installで上記のエラーが出たときは、ターミナルを一回閉じてみよう。 ? フリーランスエンジニアです。 お仕事のご相談こちらまで rockyshikoku@gmail.com Core MLやARKitを使ったアプリを作っています。 機械学習/AR関連の情報を発信しています。 Twitter Medium GitHub
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む