2017-12-09

iOSエンジニアが教える "iOS11の便利機能" 5選！

iOS

この記事は Relux Advent Calendar 2017 9日目の記事です。

iOS11の機能をきちんと使いこなせていますか？
iOSには便利なのに意外に知られていない機能がたくさんあります。
その中からiOSエンジニアの僕がおすすめする便利機能を5つ紹介します。

1. QRコード読み取り機能（カメラ）
2. Webページ内のQRコード読み取り機能（Safari）
3. 書類スキャン機能（メモ）
4. 画面収録機能
- 画面収録機能の設定方法
5. AssistiveTouch機能
- AssistiveTouchとは？
- AssistiveTouchの設定方法
最後に

※お使いの端末によって一部使えない機能もあります。

1. QRコード読み取り機能（カメラ）

最初にご紹介するのは QRコード読取り機能です。
こちらは有名なので知っている方も多いと思います。
標準のカメラアプリでQRコードを読み取ることができます。
iOS10以前はサードパーティ製のアプリが必要でしたが、iOS11ではアンインストールしてしまっても問題ありません。

f:id:wootan1102:20171127175456j:plain:w150

QRコードを認識するとこのようにバナーが表示され、タップするとリンクを開くことができます。

2. Webページ内のQRコード読み取り機能（Safari）

次にご紹介するのは Webページ内のQRコード読取り機能です。
SafariでWebページ内に設置されているQRコード画像からリンクを開くことができます。
あまり使うタイミングはありませんが知っておいて損はないと思います！

f:id:wootan1102:20171127181438p:plain:w150 　 f:id:wootan1102:20171127182450p:plain:w150

QRコード画像を 3D Touch することでメニューが表示されます。
今すぐ試したい方は↓こちらの画像でお試しください。

f:id:wootan1102:20171127182822p:plain:w150

※こちらのリンクはRelux LINEアカウントのリンクになります。

3. 書類スキャン機能（メモ）

3つ目ご紹介するのは書類スキャン機能です。
標準のメモアプリで書類をスキャンすることができます。

f:id:wootan1102:20171127184033p:plain:w150 　 f:id:wootan1102:20171127184200p:plain:w150
タブバーの＋ボタンをタップするとメニューが表示されます。
書類をスキャンをタップするとカメラが起動し、スキャンが開始されます。

f:id:wootan1102:20171127184208j:plain:w150

書類はカメラで認識されると黄色いガイドが表示され、自動的にスキャンしてくれます。
（自動的にスキャンされるのでスクリーンショットの撮影に少し苦労しました笑）

f:id:wootan1102:20171127184231p:plain:w150

スキャンが完了すると角度を自動的に補正してくれます。
結構綺麗にスキャンされるのでぜひ試してみてください。

4. 画面収録機能

次にご紹介するのは画面収録機能です。
iPhoneの操作を動画として保存することができます。ファイル形式は mov ではなく mp4 でした。
コントロールセンターをカスタマイズして、画面収録機能を追加することができます。

画面収録機能の設定方法

設定＞コントロールセンター＞コントロールをカスタマイズ
で設定することができます。順番も入れ替えることができるので使いやすくカスタマイズしましょう！

f:id:wootan1102:20171127185346p:plain:w150 　 f:id:wootan1102:20171127185812p:plain:w150
カスタマイズするとこのように表示されます。右下の丸いアイコンが画面収録機能になります。

f:id:wootan1102:20171127190212p:plain:w150 　 f:id:wootan1102:20171128135553g:plain
3D Touch でマイクの設定を変更することもできます。
他の人にアプリの操作方法などを説明する場合に使えそうですね。

5. AssistiveTouch機能

最後にご紹介するのは Assitive Touch機能です。
こちらは以前から存在する機能ですが、使いやすくパワーアップしているのでご紹介します！

AssistiveTouchとは？

画面上に丸いメニューを表示させ、複雑な操作をかんたんに行えるようにサポートする機能です。
iPhoneの基本的な操作だけでなく、カスタムジェスチャーを登録して利用することができます。
ホームボタンの効きがわるくなったときに使っていた方も多いのではないでしょうか？

AssistiveTouchの設定方法

設定＞一般＞アクセシビリティ＞ AssistiveTouch
から設定することができます。

f:id:wootan1102:20171204162954p:plain:w150

最上位メニューのカスタマイズ

カスタムアクションで「メニューを開く」を設定した場合に表示されるメニューです。

f:id:wootan1102:20171204163031p:plain:w150

最大で8個のアクションを設定することができます。
カスタムを選択すると登録したジェスチャーを実行することができます。
メニューを開いてからアクションを選択する必要があるので、使用頻度があまり高くないものを設定するのがおすすめです。

カスタムアクション

シングルタップ
ダブルタップ
長押し
3D Touch

にそれぞれにアクションを設定することができます。
最上位メニューを使用したい場合は「メニューを開く」をどれかに割り当てないと機能しません。
カメラアプリなどをここに登録できたら便利だと思うのですができないようです。（Appleさんお願いします🙏）

待機状態時の不透明度

Assistive Touchの不透明度を設定することができます。
15%から100%まで設定することができます。100%だとかなり目立ってしまいますが、15%に設定するとあまり目立たなく気になりません。個人的には30%ぐらいがちょうど良いと思います。

最後に

iOS11のおすすめ機能を5つ紹介しました。いかがでしたか？
他にもたくさん便利な機能があるのでヒントアプリや Appleサポートアプリをチェックしてみてください！

ヒント

Apple
ユーティリティ
無料

Apple サポート

Apple
ユーティリティ
無料

2017-12-07

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

iOS

Today

本日 AppStoreJP のTodayタブで「Relux」のストーリーが掲載されました。

f:id:wootan1102:20171207125739j:plain:w300

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

旅行カテゴリランキング

2017年12月07日 19:30追記

旅行カテゴリランキング
無料 App 1位になりました！

f:id:wootan1102:20171207192344p:plain:w150 　 f:id:wootan1102:20171207192412p:plain:w150

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

Relux（リラックス）

Loco Partners Co., Ltd.
旅行
無料

2017-12-02

Firebase Remote Configを利用して強制アップデートをおこなう

iOS 開発

この記事は Relux Advent Calendar 2017 2日目の記事です。
Firebase Remote Config を利用して強制アップデートをおこなう方法について書きます。
qiita.com

強制アップデートとは？

f:id:wootan1102:20171127111504j:plain:w320

上記画像のようにアラートでアップデートを促すものです。
アラートを閉じるボタンは存在せず、更新ボタンを押すと強制的にAppStoreへ遷移します。
ReluxではAPIのレスポンスが大幅に変更なった場合や
致命的な不具合を含んだバージョンからアップデートさせたい場合に利用しています。

ライブラリ

こちらのライブラリを利用することで強制アップデートを簡単に実装することができます。

github.com
github.com

Reluxでもこちらで強制アップデートをおこなっていたのですが、現在は Firebase Remote Config でおこなうようにしています。

なぜライブラリを使用しないのか？

ライブラリは端末にインストールされているバージョンとAppStoreのバージョンとを比較し、事前に指定したルールで強制アップデートを表示する仕組みになっています。
例えばメジャーバージョンの変更があった場合にのみアラートを表示するといったことが可能です。
この方法では運用上でいくつか問題が発生しました。

強制アップデートを実施したバージョンで不具合が発生した場合に、強制アップデートを取り消すことができない。
事前に指定したルール以外で強制アップデートすることができない。
エンジニア以外でも強制アップデートの開始・停止をできるようにしたい。
一部のユーザのみ強制アップデートさせ、段階的に強制アップデートをおこないたい。

上記を考慮してエンジニア以外でも簡単に操作することができる Firease Remote Config を採用しました。

どうやってやるのか？

1. パラメータの追加

Firebase Remote Config で強制アップデートに使用するパラメータを追加します。
キー名は「force_update_for_ios_app」とし、値は「3.11.0」としました。
ここで指定したバージョンよりも古い場合のみ強制アップデートを表示するようにします。

f:id:wootan1102:20171127153934p:plain

パラメータの取得に関しては公式ドキュメントを参照
Firebase Remote Config を iOS で使用する | Firebase

2. バージョンの判定

バージョンの判定は以下のように行います。
trueの場合に強制アップデートのアラートを表示します。

NSString *targetVersion = self.firRemoteConfig[@"force_update_for_ios_app"].stringValue;
if ([installedVersion compare:targetVersion options:NSNumericSearch] == NSOrderedAscending) {
    return true;
}
return false;

3. アラートの表示

アラートは通常のものと同様に UIAlertController を使用します。
更新ボタンを押したときの遷移先はAppStore（
https://itunes.apple.com/app/id843104033
）にします。

NSURL *iTunesURL = [NSURL URLWithString:@"https://itunes.apple.com/app/id843104033"];
dispatch_async(dispatch_get_main_queue(), ^{
    [[UIApplication sharedApplication] openURL:iTunesURL];
});

これで実装は完了です。

4. 強制アップデートの実施

強制アップデートは 1. で設定したバージョンを変更するだけでおこなうことができます。
逆に停止する場合はもとの値に戻すだけで問題ありません。

AppStoreの反映は最大で24時間かかると公式サイトには書かれていますが、反映に1週間近くかかることがありました。
強制アップデートを実施する場合は余裕があればリリース直後ではなく、しばらく経ってからおこなうのが良さそうです。
developer.apple.com

今後やっていきたいこと

現在はバージョンのみを指定して強制アップデートのアラートを表示していますが、
今後はアラートに表示する文言なども、Remote Config で設定できるようにしたいと考えています！
本来はA/Bテストなどをおこなうためのツールですが、他のものにも色々と応用できそうでした。

2017-11-16

iPhoneXに対応しました！

iOS 開発

ReluxをiPhoneXに対応しました！
発売前に対応は完了していたのですが...時間がとれず...（反省）

そしてAppタブの「iPhoneXにおすすめ」に掲載してただきました🎉

f:id:wootan1102:20171116124523p:plain:w320

iPhoneX対応についてはいくつか記事があがっていますが、同じようにReluxでやったことについて書きたいと思います。載せているスクリーンショットはクリックで拡大することができます。~~拡大すると蟹が食べたくなるかも...~~

f:id:wootan1102:20171116124313p:plain:w320

f:id:wootan1102:20171116124318p:plain:w150 　 f:id:wootan1102:20171116124323p:plain:w150

f:id:wootan1102:20171116124328p:plain:w150 　 f:id:wootan1102:20171116124333p:plain:w150

f:id:wootan1102:20171116124337p:plain:w150 　 f:id:wootan1102:20171116124345p:plain:w150

iPhoneX対応

開発環境

Xcode9以降
iOS SDK 11以降

セーフエリア

セーフエリアとは

アプリのコンテンツやUIが正しく表示され、操作しやすいように安全な領域（セーフエリア）が新たに設けられています。セーフエリアはAutoLayoutに対応していれば簡単に対応することができます！

参考URL
Update Apps for iPhone X - iOS - Apple Developer

画面上部の扱い

f:id:wootan1102:20171116170723p:plain:w320

セーフエリアに基づいてステータスバーに自動的にスペースが挿入されます。
ステータスバーの高さを20pxとして扱っているアプリは、レイアウト崩れなどが発生する可能性があります。

丸みを帯びたディスプレイになったのでコンテンツやUIをコーナーに配置してはいけません。また、センサーハウジング（切り欠き部分）にもかぶらないように配置する必要があります。

画面下部の扱い

f:id:wootan1102:20171116170753p:plain:w320

ホームインジケータに干渉しないようにする必要があります。
特に画面下部に固定するようなUIは特に注意です。

Storyboardでセーフエリアを有効にする

User Safe Area Layout Guides にチェックをいれることで有効になります。
有効にするとUILayoutGuideが追加されます。

f:id:wootan1102:20171124160157p:plain:w320

ソースコード上からセーフエリアを取得する

safeAreaInsetsを使用します。
UIView の layoutSubviews もしくは UIViewController の viewWillLayoutSubviews で正しい値が取得できます。

参考記事
qiita.com

Swiftの場合

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    if #available(iOS 11.0, *) {
        let safeAreaInsets: UIEdgeInsets = view.safeAreaInsets
    }
}

Objective-Cの場合

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];    
    if (@available(iOS 11.0, *)) {
        UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
    }
}

スクリーンエッジジェスチャー

iPhoneXではスクリーンエッジジェスチャーで様々なことができます。

ホームスクリーンに戻る
アプリスイッチャー
通知センター
コントロールセンター

この操作と干渉しないようにする必要があります。
干渉してしまう場合はエッジプロテクトを使用します。
エッジプロテクトを使用すると
1回目にアプリ固有のジェスチャーが呼び出され、
2回目にシステムジェスチャーが呼び出されます。

Swiftの場合

override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {
    return .bottom
}

Objective-Cの場合

- (UIRectEdge)preferredScreenEdgesDeferringSystemGestures {
    return UIRectEdgeBottom;
}

Reluxではセレクションズ（テーマ別まとめ）、人気宿ランキングでエッジプロテクトを使用しています。

f:id:wootan1102:20171116124318p:plain:w320

Reluxで対応した内容は以上になります。
iPhoneXの画面いっぱに表示される写真が綺麗なので
ぜひダウンロードして触ってみてください🙏

Relux（リラックス）

Loco Partners Co., Ltd.
旅行
無料

2017-09-21

iOS11の Password AutoFill に対応してみた

iOS 開発

iOS11がリリースされましたね！
アプリの審査がかなりギリギリでしたが、対応したものをリリースすることができました笑
今回はPassword AutoFillについて書きたいと思います。

Password AutoFillとは？

Password AutoFillはiOS11のあたらしい機能で、
iCloud Keychainに保存されたアカウント/パスワードをアプリ上で自動入力することができます。

保存されたアカウント/パスワードはiOSの設定画面から閲覧、編集することができます。
また、新しく追加することも可能です。
設定 > アカウントとパスワード > AppとWebサイトのパスワード

Password AutoFillが有効な条件

Webとアプリにログイン機能がある。
ユーザがiCloudキーチェーンを有効にしている。
ユーザがSafariを使用している。

※Safari以外のブラウザをつかっていたり、サードパーティのパスワードマネージャを使っている場合は使えません...

対応方法　アプリ編

1. TextFieldのContentTypeにUsernameとPasswordを設定する

Swift

if #available(iOS 11.0, *) {
    usernameTextField.textContentType =  UITextContentType.username
    passwordTextField.textContentType = UITextContentType.password
}

Objective-C

if (@available(iOS 11.0, *)) {
    [usernameTextField setContentType:UITextContentTypeUsername];
    [passwordTextField setContentType:UITextContentTypePassword];
}

※StoryboardからContentTypeを設定することもできます。

2. Associated Domainsを有効化する

https://developer.apple.com/account/ios/identifier/bundle

f:id:wootan1102:20170921010410p:plain

※Universal Linksなどに対応していれば対応済のはずです。

3. Associated Domainsを設定する

Xcode > Project > Capabilities > Associated Domains
f:id:wootan1102:20170921010550p:plain

「webcredentials:ドメイン名」を追加

対応方法　サーバ編

apple-app-site-associationファイルを設置する

設置場所はドメインのルート配下
httpsでアクセスできるように設定（httpの場合は署名が必要？）
jsonファイルだが拡張子はつけない

apple-app-site-association

{
  "webcredentials": {
    "apps": ["TeamID.BundleIdentifier"]
  }
}

※Universal Linksなどに対応していればファイルは設置済のはずです。

対応は以上になります。
Universal Linksなどに対応していれば、アプリもサーバサイドもほとんど工数はかかりません。

実機での動作

TextContentTypeが設定されているTextFieldにフォーカスがあたると鍵アイコンが表示されます。
このアイコンをタップすることでTextFieldにアカウント/パスワードを自動入力することができます。

iOS11の Password AutoFill は工数をあまりかけずに対応することができます！
ちょっとしたことですが、メールアドレスやパスワードを入力しなくても済むようになるので
ユーザの離脱率の改善にもなりそうです。ログイン機能がある場合はぜひ実装してみてください。

参考

developer.apple.com
qiita.com

2017-06-30

Firebase Performance Monitoring を導入してみた

iOS 開発

前回の記事から少し間があいてしまいましたが
Firebase Performance Monitoringを導入しました！
β版ですが十分つかえるレベルだと思います。

developers-jp.googleblog.com

Firebase Performance Monitoring とは？

アプリの起動時間、ネットワークリクエストなどのパフォーマンス情報を自動的に測定し、Firebaseコンソール上で確認することができるようになります。
アプリのパフォーマンスで問題がある部分を把握するのに役立つサービスです。

導入方法

Firebaseを導入済であればかなり簡単に導入することができます。

0. 前提条件

Xcode8.2.1以降
iOS8以上をターゲットとするXcodeプロジェクト
CocoaPods 1.0.0以降

1. Podfileの編集

pod 'Firebase/Performance'

2. インストール

pod update

3. コードの変更

// Objective-C
@import <Firebase.h>

[FIRApp configure];

ハマったところ

インストール時にこのようなエラーがでて焦りました。

[!] Unable to satisfy the following requirements:

- `Firebase/Performance` required by `Podfile`

Specs satisfying the `Firebase/Performance` dependency were found, but they required a higher minimum deployment target.

すぐに気づいたのですが update せずに install しており
Firebase/Coreが古いバージョンでロックされていました。

Firebase Remote Configをつかって有効/無効を切替え

公式サイトにもやり方が掲載されています。
Peformance Monitoring はβ版なので切替えられるようにしておいたほうが良さそうです。
Disable the Firebase Performance Monitoring SDK | Firebase

1. コードの変更

公式とは違うのですがこのように設定しました。

if (self.remoteConfig[@"performance_enable"].numberValue.boolValue) {
   [FIRPerformance sharedInstance].instrumentationEnabled = YES;
   [FIRPerformance sharedInstance].dataCollectionEnabled = YES;
} else {
   [FIRPerformance sharedInstance].instrumentationEnabled = NO;
   [FIRPerformance sharedInstance].dataCollectionEnabled = NO;
}

2. Firebase Remote Configの設定

Firebaseコンソール上ではこのようになっています。
値を0に変更することで無効化できます。
また、この設定自体を誤って消してしまった場合にも無効になります。
f:id:wootan1102:20170630210112p:plain

確認可能な情報

ダッシュボードではこのように表示されます。

f:id:wootan1102:20170630210637p:plain

端末、国、OS毎の起動時間や
ネットワークリクエストごとの応答時間、成功率など
細かくデータを確認することができます。

アプリの起動時間、ネットワークリクエストの応答速度で
ユーザ体験が大きくかわってしまうので
Firebase Performance Monitoringで計測して、
問題がある部分を少しずつ改善していくのが良さそうです！

2017-05-31

Firebaseのカスタムパラメータレポートをつかってみた

開発 Android iOS

Google I/O 2017でFirebaseの新機能が発表されました！
Analyticsの強化やパフォーマンス測定ツールの提供など盛りだくさんです。
詳しくはこちらのブログを御覧ください。

developers-jp.googleblog.com

今回はカスタムパラメータレポートを試してみました。

カスタムパラメータレポート

これまでカスタムパラメータはFirebaseの画面上では確認できず、BigQueryと連携して分析する必要がありました。
これからは画面上で簡単に分析が可能になります。
カスタムパラメータのためにクエリを書かなくてよくなります。

設定方法

1. Analytics > イベントのイベント一覧を表示

f:id:wootan1102:20170531221517p:plain

2. カスタムパラメータを追加したいイベントのアイコンからパラメータレポートを編集

3. パラメータ一覧から分析したいデータを追加

f:id:wootan1102:20170531223047p:plain

4. タイプを設定して保存

これで設定は完了です！かなり簡単ですね！
これから追加するカスタムパラメータをあらかじめ追加しておくこともできます。

データの閲覧

イベント一覧からカスタムパラメータを設定したイベントを選択すると詳細画面に遷移します。
この画面でカスタムパラメータの内容を確認することができます。

f:id:wootan1102:20170531224702p:plain
こちらはRelux開発版の検索キーワード一覧です。
（動作確認に北海道で検索している人が多いようです！）

数値は伏せていますがイベント発火件数とユーザ数を確認することができます。
通常のイベントと同様にフィルタをかけることができるので
ユーザプロパティやユーザリストで絞り込んでデータをみることもできます。

※データが多い場合はこのようなエラーが発生することがありますが
　待機してしばらく待つと問題なく表示されます。

f:id:wootan1102:20170531224612p:plain

あまりにも時間がかかる場合は期間をフィルタすると良さそうです。

制限

カスタムパラメータレポートは設定してから蓄積されるようになっています。
他のデータと同様に反映されるまでに最大24時間かかることがあります。
過去分について分析する場合やすぐにデータが見たい場合は
BigQueryを使用して分析する必要があります。

また、カスタムパラメータレポートを設定できる数は
テキストは10個まで、数値は40個まで設定することができます。

参考URL

support.google.com

複雑な分析はBigQueryを使う必要がありますが、
簡単なデータならエンジニア以外でも確認できるようになるので凄く便利ですね！
よくみるデータはここで確認できるようにしておくと良さそうです！

1. QRコード読み取り機能（カメラ）

2. Webページ内のQRコード読み取り機能（Safari）

3. 書類スキャン機能（メモ）

4. 画面収録機能

画面収録機能の設定方法

5. AssistiveTouch機能

AssistiveTouchとは？

AssistiveTouchの設定方法

最上位メニューのカスタマイズ

カスタムアクション

待機状態時の不透明度

おすすめ設定

最後に

Today

旅行カテゴリ ランキング

強制アップデートとは？

ライブラリ

なぜライブラリを使用しないのか？

どうやってやるのか？

1. パラメータの追加

2. バージョンの判定

3. アラートの表示

4. 強制アップデートの実施

今後やっていきたいこと

iPhoneX対応

開発環境

セーフエリア

セーフエリアとは

画面上部の扱い

画面下部の扱い

Storyboardでセーフエリアを有効にする

ソースコード上からセーフエリアを取得する

スクリーンエッジジェスチャー

Password AutoFillとは？

Password AutoFillが有効な条件

対応方法 アプリ編

1. TextFieldのContentTypeにUsernameとPasswordを設定する

2. Associated Domainsを有効化する

3. Associated Domainsを設定する

対応方法 サーバ編

apple-app-site-associationファイルを設置する

実機での動作

参考

Firebase Performance Monitoring とは？

導入方法

0. 前提条件

1. Podfileの編集

2. インストール

3. コードの変更

ハマったところ

Firebase Remote Configをつかって有効/無効を切替え

1. コードの変更

2. Firebase Remote Configの設定

確認可能な情報

カスタムパラメータレポート

設定方法

1. Analytics > イベントのイベント一覧を表示

2. カスタムパラメータを追加したいイベントのアイコンからパラメータレポートを編集

3. パラメータ一覧から分析したいデータを追加

4. タイプを設定して保存

データの閲覧

制限

参考URL

旅行カテゴリランキング

対応方法　アプリ編

対応方法　サーバ編