wootan's diary

iOSアプリ開発を中心としたエンジニアブログ

App Store に Relux が紹介されました。

少し時間が経ってしまいましたが、App StoreでReluxが紹介されました。


かざすだけじゃない Apple Pay

App Store Today
f:id:wootan1102:20190720114107p:plain:w240

Apple Payのある生活
f:id:wootan1102:20190720114112p:plain:w240
※キャンペーンは終了しました。


理想の旅行プランに
‎理想の旅行プランに：App Store ストーリー

f:id:wootan1102:20190720115646p:plain:w240


Apple Pay 対応の記事はこちら
qiita.com

SketchのData機能を試してみた

Sketch

この記事は Relux Advent Calendar 2018 の2日目の記事です。
qiita.com

Sketch Version 52で追加された Data機能を試してみました。

検証環境

  • Sketch Version 52.4

Data機能とは？

Data機能とはローカルのデータ（テキスト/画像）を
選択したオブジェクトに挿入することができる機能です。

公式サイト
sketchapp.com


Data機能の使い方（テキスト）

Sketchにはデフォルトで人名が用意されているので、まずこちらを試してみます。

1. テキストを挿入するラベルを選択

f:id:wootan1102:20181126210223p:plain:w300

2. 画面上部から Data > Names を選択

f:id:wootan1102:20181126210320p:plain:w200

これで自動的にテキストに名前が挿入されます。
f:id:wootan1102:20181126210357p:plain:w300


Data機能の使い方（画像）

画像もテキストと同様にデフォルトで顔写真が用意されているので、次にこちらを試してみます。
基本的にテキストと使い方はかわりません。

1. 画像を挿入するオブジェクトを選択

f:id:wootan1102:20181126204820p:plain:w300

2. 画面上部から Data > faces を選択

f:id:wootan1102:20181126210544p:plain:w200

テキストと同様に自動的にオブジェクトに写真が挿入されます。
f:id:wootan1102:20181126205621p:plain:w300


データのリフレッシュ

データをリフレッシュしたい場合はオブジェクトを選択し、Data > Refresh Data でリフレッシュすることができます。
ショートカットキーも用意されていて、 Cmd + Shift + D でリフレッシュすることもできます。

Dataの追加方法

Sketch > Preferences > Dataタブ の Add Data... ボタンから追加
f:id:wootan1102:20181126211050p:plain:w300

テキストデータ

下記のフォーマットでテキストファイルを作成し、取り込むことで使用できるようになります。
拡張子：txt
区切り文字：改行
f:id:wootan1102:20181126211750p:plain:w300

画像データ

画像が入っているディレクトリを指定することで使用できるようになります。

シンボルにDataを組み込む

Dataを適用したオブジェクトでシンボルを作成したらどうなるか検証しました。

検証①画像Dataを適用したシンボルを作成する

OvalにData（face）を適用しシンボルを作成しました。
f:id:wootan1102:20181126213838p:plain:w300

アートボードのシンボルを選択して Refresh することができます。
また、違う画像Dataでオーバーライドすることもできます。

検証②テキストDataを適用したシンボルを作成する

TextにData（mountain）を適用したシンボルを作成しました。
画像と同様にアートボードのシンボルを選択して Refresh することができます。

f:id:wootan1102:20181126214431p:plain
このスクリーンショットはシンボルを構成するテキストに対して Data（mountain）が適用され、アートボード上のシンボルは Data（mountain） の the Matterhorn でオーバーライドされているという状態です。

まとめ

Sketch Version 52のData機能を試してみました。
他にもStyleのオーバーライドが可能になっています。こちらもかなり強力な機能です。
Symbol, Style, Data を組み合わせることでさらに効率よくデザインできるようになりそうです。
現在ある資産を活かしつつ、新しい機能を取り入れた設計にしていきたいと思います。

iOSの Status Bar のスタイルを制御する方法

iOS 開発

この記事は Relux Advent Calendar 2018 の1日目の記事です。
qiita.com


iOSの Status Bar Style を制御する方法について
何度もぐぐっているので自分用にまとめました...

検証環境

  • IDE : Xcode10.1
  • Language : Swift4.2
  • iOS Development Target : iOS12.1

スプラッシュ画面の Status Bar Style を変更する

TARGETS > General > Deployment Info > Status Bar Style から変更可能です。

f:id:wootan1102:20181126165850p:plain:w400

Default : 黒字で表示
Light : 白字で表示
Hide status barにチェックをいれると非表示

全ての画面の Status Bar Style を変更する

TARGETS > Info > Custom iOS Target Propertites に以下を追加
Key : View controller-based status bar appearance
Type : Boolean
Value : NO

f:id:wootan1102:20181126170719p:plain:w400

この設定を追加することで
TARGETS > General > Deployment Info > Status Bar Style
の設定が全ての画面に反映されます。

一部の画面の Status Bar Style を変更する

UIViewControllerのプロパティをオーバーライドすることで変更可能です。
Storyboardからは変更できないようです。設定がみつけられませんでした。

ステータスバーを隠す

override var prefersStatusBarHidden: Bool {
    return true
}

ステータスバーの色を変える

override var preferredStatusBarStyle: UIStatusBarStyle {
    return UIStatusBarStyle.lightContent
}

動的に Style を変更する場合

UIViewControllerの setNeedsStatusBarAppearanceUpdate() を任意のタイミングで呼ぶ必要があります。

self.setNeedsStatusBarAppearanceUpdate()

「全ての画面の Status Bar Style を変更する」を設定している場合は
そちらの設定が優先されます。プロパティをオーバーライドしても反映されませんので注意しましょう。
また、UINavigationController を利用している場合は上記のコードだけでは反映されません。

UINavigationControllerを利用している場合

UIViewControllerの別のプロパティをオーバーライドする必要があります。
childForStatusBarStyle, childForStatusBarHidden でvisbleViewControllerを返すようにすることで、表示されている UIViewController のStyleが反映されます。

import UIKit

extension UINavigationController {
 
   override open var childForStatusBarStyle : UIViewController? {
        return self.visibleViewController
    }

    override open var childForStatusBarHidden: UIViewController? {
        return self.visibleViewController
    }

}

まとめ

以前はメソッドだったものがプロパティに変更になっています。
それに伴い setNeedsStatusBarAppearanceUpdate() を呼ぶ必要がなくなったようです。
ステータスバーは視認性が悪いとかなり目立つので気をつけたいと思います。

参考

この2つの記事がとても参考になりました！
qiita.com
qiita.com

iOS12 の Automatic Strong Passwords に対応してみた

iOS 開発

Reluxのパスワード変更画面を Automatic Strong Passwordsに対応しました。
1年前に Password Auto Fill に対応していたので工数はあまりかかりませんでした。

【関連記事】Password Auto Fill に対応した記事はこちらです。
wootan1102.hatenablog.com

Automatic Strong Passwordsとは？

Automatic Strong Passwords は iOS12のあたらしい機能です。
iOSが強力なパスワードが自動生成し、そのパスワードが画面上でサジェストされます。
パスワードはKeyChainに保存され、入力時に生体認証（顔認証、指紋認証）で自動入力することが可能です。

f:id:wootan1102:20181115104521p:plain:w200

パスワードが自動生成されるとこのように表示され、
自動生成されたものを使用するか、独自のパスワードを使用するか選択することができます。

対応方法

前提条件：Password Auto Fillに対応していること

パスワード自動生成にはキーとなるユーザ名を画面に表示する必要があります。
そして Password Auto Fill と同じように textContentTypeを指定するだけです。

ユーザ名の textContentType に username
パスワードの textContentType に newPassword
を指定することがで対応することができます。
また、パスワードの入力欄が2つある場合でも下記のようにすることで対応可能です。

let userTextField = UITextField()
userTextField.textContentType = .username
 
let newPasswordTextField = UITextField()
newPasswordTextField.textContentType = .newPassword
 
let confirmNewPasswordTextField = UITextField()
confirmNewPasswordTextField.textContentType = .newPassword

※ユーザ名は hidden にしてしまうとパスワード自動生成されなくなってしまいます。

パスワードルールについて

パスワードルールはサービスによって異なると思います。
自動生成されたものがサービスに対応していないと、KeyChainの中身だけ変更されログインができなくなってしまいます。
その点もきちんと考慮されていて、コード上でパスワードルールを設定することができます。

パスワードルールはこちらのツールで生成することができます。
Password Rules Validation Tool
Password Rules Validation Tool - Apple Developer

例えば
小文字必須
大文字必須
10文字以上 20文字以内
という設定だった場合はこのようなルールになります。

UITextInputPasswordRules
required: lower; required: upper; minlength: 10; maxlength: 20;

<input type="password">
passwordrules="required: lower; required: upper; minlength: 10; maxlength: 20;"

iOSアプリだけでなくHTML用の設定も吐き出されるようになっているので
Safari でもアプリと同じような体験を提供することができます。


Automatci Strong Passwords はユーザにパスワード入力させる手間を省くだけでなく、
使いまわされた脆弱なパスワードを回避する方法としても有効です。
実装も比較的簡単にできるので徐々に対応したアプリが増えてきそうです。

参考リンク

Apple WWDCセッション動画

https://developer.apple.com/videos/play/wwdc2018/204/
https://devstreaming-cdn.apple.com/videos/wwdc/2018/204jfuuku83cex/204/204_automatic_strong_passwords_and_security_code_autofill.pdf?dl=1

Xcode10 で error: Fabric: Info.plist Error と出たときの対処方法

Crashlytics のドキュメントが更新されていました。

Crashlytics Installation — Fabric for Apple documentation
Get started with Firebase Crashlytics  |  Firebase

If you’re using Xcode 10 on a new project, Xcode 10 adopts a new build ordering that is independent of the ordered list in the Build Phases of Xcode. Put "$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)" into your Fabric Run Script’s “Input Files” section to ensure your installation of Fabric goes smoothly.

Xcode10のみ追加で設定が必要になります。

Project -> Build Settings -> Run script の
Input Files に下記を追加します。

$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)

この状態で Clean しても解決しない場合は DerivedData を削除すると解決します。

【2度目】AppStore の Today タブに Relux のストーリーが掲載されました！

Today

2018年09月13日(木)に AppStoreJP のTodayタブで「Relux」のストーリーが掲載されました。

f:id:wootan1102:20180919144757j:plain:w300


総合ランキング（無料 App）31位！
f:id:wootan1102:20180919151115p:plain:w300


Twitterでも紹介されました！


AppStoreからぜひご覧ください！
‎理想の宿を見つけよう：App Store ストーリー

ストーリーでも紹介されている「テーマ別まとめ」は眺めているだけでも楽しいです。
ダウンロードして触ってみてください！

Relux（リラックス）

Relux（リラックス）

  • Loco Partners Co., Ltd.
  • 旅行
  • 無料

【解決済】fastlaneをアップデートしたら What target would you like to use? と聞かれるようになった

fastlaneを軽い気持ちでアップデートしたら What target would you like to use? と毎回聞かれるようになってしまいました。
これを毎回指定するのは面倒なので Issues をみてみるとわかりやすいタイトルでありました 笑

github.com


どうやら get_version_number の仕様が変更になったようです。
get_version_number - fastlane docs


get_version_numberは開発版のアイコンに使用していたので
add_badge部分の記述を変更しました。

add_badge(
  shield: "Version-#{get_version_number(target: 'relux', configuration: 'Debug')}-blue",
  no_badge: true
)

これで What target would you like to use ? と聞かれないようになりました。