wootan's diary

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

Sketch に Create Symbol のショートカットを追加する

こちらのプラグインを使用してショートカットを追加しようとしたのですが
うまく動かずクラッシュしてしまうのでMacの設定からショートカットを追加しました。

github.com

ショートカットキーの設定方法

ショートカット設定画面を開く

システム環境設定 > キーボード > ショートカット

f:id:wootan1102:20171227164348p:plain

+からショートカットキーを追加

+をクリックするとこのような画面が表示されます。
f:id:wootan1102:20171227164528p:plain:w300

アプリケーションで 「Sketch.app」 を選択
メニュータイトルに 「Create Symbol」 を入力
キーボードショートカットに 「^S」を入力
追加ボタンをクリックすることでショートカットが追加されます。

※^はコントロールです。今回はSymbolのSにしました。

追加後はこのように表示されます。
f:id:wootan1102:20171227164837p:plain


Sketchのメニュー上ではこのように割り当てられているショートカットキーが表示されます。
f:id:wootan1102:20171227165109p:plain:w300

Sketchがクラッシュして起動できなくなってしまった場合

クラッシュ後にSketchが起動しなくなる現象が発生しました。
アプリを再インストールしても治らず、Application Support配下のファイルを削除することで解決しました。

※設定などがすべて初期化されます。
※再度ライセンスキーを登録する必要があります。
プラグインを再インストールする必要があります。

rm -rf ~/Library/Application\ Support/com.bohemiancoding.sketch3

もっと良い方法があるかもしれませんが私の場合はこれでなおりました。
Sketchpacksをつかっていて良かったです。。。

Reluxアプリ開発の舞台裏 便利な開発用機能

この記事は Relux Advent Calendar 2017 23日目の記事です。
今回は開発の舞台裏ということで、普段はユーザーの目に触れることのない開発用機能などをご紹介します。

入社時のアプリの問題

僕が宿泊予約サービス Relux を運用する Loco Partners にジョインした当初は
開発版のアプリがどのサーバに接続されているかが判別できませんでした。
本番環境と見分けがつかず、誤って本番環境のホテル・旅館を予約してしまう事故も発生していました。

改善したこと

まず、アプリがどのサーバに接続しているかわかるように、画面下端に半透明のバーを追加しました。
f:id:wootan1102:20171212160625p:plain:w300
こちらは本番環境に接続している時に表示されるバーです。

本番環境はレッド、開発環境はグレーのように環境ごとに色をわけています。
これにより色だけでどのサーバに接続されているか判断できるようになっています。
また、ジョインしたばかりの人も迷わないように右下に接続先を表示しています。
すべての画面でこのバーが表示されるようになっているので、誤って本番環境で予約してしまうということもなくなりました。


次にアプリの接続先のサーバを変更できるようにしました。
接続先のサーバは上記のバーをタップすることで切り替えられるようにしました。
タップするたびに
本番環境 → ステージング環境 → 開発環境 → ... というように接続先が変更されるようになっています。
ただし、デバッグ中に誤タップで接続先がかわってしまうということがないように
未ログイン状態でかつホーム画面でのみ切り替わるという制限を設けました。
改善前は環境ごとにアプリをビルドし、デバッグ担当者はそれを再インストールする必要があったのでかなり工数削減できたと思います。

Release版がDebug版に上書きされてしまう問題

開発版でサーバの接続先を変更できるようにしたので後回しにしていたのですが
社内で動作確認のために Release版とDebug版を入れかえている方がかなりいたので対応しました。

改善したこと

llcc.hatenablog.com
こちらの記事を参考にして Release版とDebug版を共存できるようにしました。
App Extensionsに対応している場合は、そちらもRelease版とDebug版を分ける必要があり少し大変でした。

さらにアイコンも見分けがつく用にRelease版とDebug版でわけることにしました。
上記の記事で紹介されている方法でもよかったのですが、アイコンをわざわざ用意するのが面倒だったので fastlane-plugin-badge を利用しています。

github.com

f:id:wootan1102:20171213141012j:plain:w300
アイコンはこのように表示されます。(冬仕様のトナカイさんの首が...)


Fastfileでは下記のようにしています。

add_badge(shield: "Version-#{get_version_number}-blue", no_badge: true)
...
reset_git_repo(files: icons, force: true)

add_badgeでバッジ付きのアイコンを生成し、
アプリの配信アップロードが終わったあとに git reset しています。

開発・デバッグをスピードアップするための効率化

さらに開発・デバッグの効率をよくするために
繰り返し行う操作や面倒な操作をサポートする機能を実装しました。
この中からいくつか紹介したいと思います。

f:id:wootan1102:20171213165320g:plain
端末を振るとUIAlertControllerで開発・デバッグ用のメニューが表示されます。
このメニューはどの画面からでも呼び出せるようになっています。

サーバの接続先バーを非表示にする

開発途中のスクリーンショットが必要な場合や
デザイン確認などで一時的にバーをはずしたいという要望があったので実装しました。
操作後にはずしたままにするとRelease版と間違えてしまいそうだったので
画面遷移すると表示されるようにしています。

アプリからSlackへスクリーンショットを送信する

弊社ではデバッグ用にテスト端末をレンタルしているのですが
特定のアカウントで App Store や Slack にログインしたままにするわけにはいかず、
AirdropMacスクリーンショットを転送し、MacからSlackへアップロードするという手順を踏んでいました。

何枚も送信したい場合はこれでは手間なので
アプリ上でスクリーンショットを擬似的に合成して送信することにしました。
ソースコードをみていただければわかりますが、Windowのlayerを重ねて描画しています。

 UIApplication *application = [UIApplication sharedApplication];
UIWindow *window = application.keyWindow;
UIGraphicsBeginImageContextWithOptions(window.bounds.size, NO, 0.0f);
CGContextRef context = UIGraphicsGetCurrentContext();
for (UIWindow *aWIndow in application.windows) {
    [aWIndow.layer renderInContext:context];
}
UIImage *captureImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return captureImage;

ここで生成したUIImageをSlackに送信しています。

f:id:wootan1102:20171213171209p:plain

Slackではこのように表示されます。
不具合の報告などにも使われるので
ユーザID、言語、接続先サーバなども送信するようにしています。

FirebaseデバイストークンをSlackへ送信する

Relux では Push Notification に Firebase を採用しています。
FirebaseデバイストークンはDBで保存しているのでSELECTすれば良いのですが
こちらもSlackに送信するようにしました。
アプリを再インストールするとデバイストークンが変更されるので地味に便利です。

Firebase Remote Config の設定値を表示する

Firebase Remote Config は便利なのですが現在設定されている値がわからず困ることがありました。
そこで Key, Value を表示する一覧を実装しました。また、値をすぐ反映するためのフェッチ機能も実装しています。

f:id:wootan1102:20171222195507p:plain
ほとんど中身はお見せできないのですがこのように表示されます。

初回起動時の挙動を確認するためにローカルデータをすべて削除する

初回起動時の挙動を確認するためにアプリを一度アンインストールしてからインストールする必要がありました。
それではあまりにも効率が悪すぎるのでローカルデータをすべて削除する機能を追加しました。
こちらもかなり工数が削減できたと思います。

最後に

いかがでしたか?
紹介した機能以外にも画像のキャッシュクリアなどの基本的なものから
ちょっとマニアックなデバッグ用機能もあります。
どれも最初は自分が楽をするためにおこなっていた改善ですが
いつの間にかチームのためにもなっていました。これからもそんな改善を繰り返していきたいと思います!

そしてアプリを一緒につくってくれる仲間を募集中です。
興味がある方はお話だけでも聞きにきてください!
www.wantedly.com

「エンジニアを褒めるネコ」スタンプをSlackに導入しました。

「エンジニアを褒めるネコ」とは?

note.mu

こばかなさんが作成したLINEスタンプです。
Slackでもつかえるようにと無料配布されています。ありがとうございます!

導入しようと思ったきっかけ

きっかけはこちらのツイート

Slackのカスタム絵文字だと小さいなと思っていたのですが
こちらの動画をみて大きく表示できることがわかり導入しました。
もっとエンジニアを褒めてほしいという理由もあります 笑

どうやってやったか

スタンプコマンドはこちらを利用しました。ありがとうございます!

github.com

インストール方法はREADMEに丁寧に書かれていて超簡単です。

実際の画面

Slackのスラッシュコマンドはヒントと短い説明文を設定することができるので
このように表示することができます。

f:id:wootan1102:20171220143038p:plain

スタンプの表示はこんな感じです。

f:id:wootan1102:20171220142919p:plain


たくさんつかってたくさん褒めてもらえるように
社内に浸透させていきたいと思います!

Reluxアプリ開発で使っているデザインツール

この記事は Relux Advent Calendar 2017 16日目の記事です。
Reluxのアプリ開発で使っているデザインツールについて書きたいと思います。
qiita.com

Relux ではメインのUIデザインツールとして Sketch を採用しています。
最近は Zeplin を導入しようと思い、少人数でつかいはじめたところです。
今回はSketchとZeplinの便利機能をご紹介したいと思います。


Sketchとは

SketchはUIデザインに特化したデザインツールです。
複雑な画像処理には向いていませんが、動作が軽く直感的な操作で使用することができます。
フリーのテンプレート素材も充実しており、プラグインで機能を拡張することもできます。
多くの企業で採用され Relux でも1年以上愛用しています。

公式サイトはこちら
Sketch - The digital design toolkit


Sketchの便利な機能

今回はSketchの便利な機能とその使い方を3つご紹介します。

  1. スタイル
  2. シンボル
  3. Sketch Mirror

1. スタイル

Sketchは複数のオブジェクトに対して、共通のスタイルを適用することができます。特にテキスト周りはスタイルを使いこなすことで作業効率がアップします。

スタイルの作成方法

1. スタイルのもとにしたいオブジェクトを選択
スタイルは選択しているオブジェクトに設定されているパラメータをもとに作成されます。

2. Create New Shared Styleをクリック

f:id:wootan1102:20171206183426p:plain

3. 任意のスタイル名を入力

f:id:wootan1102:20171206183500p:plain:w200

スタイル名はあとから変更することができます。

スタイルの適用方法

1. スタイルを適用したいオブジェクトを選択

2. スタイルの一覧から選択

f:id:wootan1102:20171206184845p:plain

クリックだけで簡単に適用できます。
切り替えも一瞬なので、いくつかパターンを用意して比較検討することもできます。


スタイルの変更と反映

スタイルを設定したオブジェクトは自由に変更を加えることができます。
変更した内容は、同じスタイルが設定されたオブジェクトには即時反映されません。

f:id:wootan1102:20171206185451p:plain:w200
オブジェクトが変更されるとスタイル名の横に更新ボタンが表示されます。
この更新ボタンを押すことで、すべてのオブジェクトに変更が反映されます。
既存のスタイルに変更を加えて新たなスタイルを作成したい場合は
更新ボタンをおさずに Create New Shared Style からスタイルを作成することもできます。

スタイルの管理

作成したスタイルは Organize Shared Style… で管理することができます。

f:id:wootan1102:20171206185615p:plain:w300
名前部分をダブルクリックで名前変更
左下の [-] で削除をおこなうことができます。
スタイルは名前順でソートされる仕様になっています。

2. シンボル

次はシンボルについてご紹介します。シンボルは再利用可能なオブジェクトです。
ボタンのように何度も利用するオブジェクトはシンボル化することで作業効率がアップします。

シンボルの作成方法

1. シンボルにしたいオブジェクトを選択

2. CreateSymbolをクリック

f:id:wootan1102:20171208153847p:plain:w300

3. 名前を入力

f:id:wootan1102:20171208153858p:plain:w300

シンボルの名前はあとから変更可能です。
Send Symbol to "Symbols" Page にチェックをいれると
Symbolページが作成され、ここでシンボルの編集などをおこなえるようになります。

f:id:wootan1102:20171208154151p:plain:w300


シンボルの利用

シンボルはツールバーのメニューから挿入します。
Insert > Symbols から選択します。

f:id:wootan1102:20171208160625p:plain:w300

画面の任意の位置をクリックすることでシンボルを挿入することができます。

シンボルの数が多くなってくると縦に長くなってしまいますが、
名前をスラッシュで区切ることでグルーピングすることができます。

f:id:wootan1102:20171208171513p:plain:w300

f:id:wootan1102:20171208171533p:plain:w300

選択画面ではこのように表示されます。
命名規則をきちんと決めてからシンボルをつくるようにすると良さそうです。

シンボルの変更とオーバライド

シンボルはスタイルと違い変更を加えると即時反映されます。
シンボルの良いところは、設定されている値をオーバーライドできることです。

f:id:wootan1102:20171208175708p:plain:w300

例えばボタンの場合はOverridesでテキスト部分を任意の値に設定することで
ボタンのテキスト値を変更することができます。

3. Sketch Mirror

最後にSketch Mirrorをご紹介します。
Sketch Mirror はSketchのアートボードやシンボルをプレビューするアプリです。
iPhone上でリアルタイムに表示することができます。
使い方はiPhoneにSketch Mirrorをインストールし、USBで接続するだけです。

if:id:wootan1102:20171208180234j:plain:w300

Sketch Mirrorでデザインを確認すれば
実機で思ったとおりに表示されないということも少なくなるはずです。

Sketchの紹介は以上になります。
Sketchはプラグインも充実しているので別の記事にまとめたいと思います。
次は最近つかいはじめた Zeplin についてご紹介します。

Zeplinとは

Zeplin は Sketch や Photoshop のアートボードからレイアウト指示書(スタイルガイド)を作成するツールです。
デザインツールを持っていないメンバーにも、サイズやマージン、色などを共有することができます。
それだけでなくレイアウト指示書上にコメントを記入することもできます。
Slackと連携することもできるので、デザインの更新があった場合やコメントなどをSlackで確認できます。

公式サイトはこちら
zeplin.io

Zeplinの便利な機能

今回はZeplinの便利な機能について4つご紹介します。

  1. Sketchとの連携
  2. デザイン指示書(サイズ、マージンの確認)
  3. コメント機能
  4. スタイルガイド

1. Sketchとの連携

Sketchとの連携はSketchのプラグインを利用しておこないます。

f:id:wootan1102:20171208190132p:plain:w300

Plugins > Zeplin > Export Selected Artboards... から選択しているアートボードをエクスポートできます。
アートボードを更新したい場合は、再度エクスポートし直すだけでZeplinに反映されます。

2. レイアウト指示書(サイズ、マージンの確認)

Zeplin は Sketch や Photoshop のアートボードのデータからレイアウト指示書を作成してくれます。
特に設定などは必要ありません。
エクスポートしたアートボードはプロジェクトのダッシュボードに表示されます。
アートボードを開くとレイアウト指示書が表示されます。

f:id:wootan1102:20171208192336p:plain

要素をクリックするだけでサイズや色などを調べることができます。
もちろん要素間のマージやフォントサイズなども表示されます。
デザインファイルを直接やりとりする必要もなく、デザインツールを購入する必要もありません。
デザインツールをもっていないメンバーでもデザインが確認できるのです。

3. コメント機能

次にコメント機能をご紹介します。
Zeplinではレイアウト指示書上にコメントを残すことができます。

f:id:wootan1102:20171208194929p:plain
Cmdを押しながらクリックするとこのようにコメント入力欄が表示されます。

UI上にコメントを残せるので、どの要素に対してのコメントなのか
ひと目でわかるようになっています。通常のチャットツールと同じようにメンションすることもできます。
コメントには5種類の色がつけられるようになっています。
色自体に意味はないのですが、コメントの内容によって色を変更するなどチーム内で工夫すると良いと思います。

f:id:wootan1102:20171208201118p:plain

また、コメントはResolveボタンが用意されていてディスカッションが終わったら解決済にすることができます。

f:id:wootan1102:20171208204526p:plain

もちろん Reopen したり、過去のやりとりを表示する機能も用意されています。


4. スタイルガイド

最後にスタイルガイドをご紹介します。
スタイルガイドはダッシュボード画面から切替えることができます。
Zeplin の画面上部に切り替えボタンが配置されています。

f:id:wootan1102:20171208205725p:plain

カラーパレットではプロジェクト全体で使用されている色の一覧が表示されます。
名前も自由に変更することができます。

f:id:wootan1102:20171208210147p:plain

そしてコードジェネレート機能もついています。

f:id:wootan1102:20171208210210p:plain

言語は Swift4, Swift3, Objective-C, ReactNative など複数の言語に対応しています。

Zeplinの紹介は以上になります。
デザインの共有だけでなく、やりとりをZeplin上でおこなうことができるので
導入できればスムーズに開発がすすめられそうです。

最後に

いかがでしたか?
Zeplinはこんなチームにおすすめです。

  • UIデザインツールとして Sketch をつかっている。
  • デザイン・開発に関わるメンバーが増えてきて、チャットでのやりとりに限界を感じている。
  • デザインの指摘や文言変更のやりとりに時間がかかっている。
  • 実装に必要な情報を共有する方法がきまっていない。

Zeplinはまだまだ使い始めたばかりなので
チームで試行錯誤しながらデザインフローを改善していきたいと思います!
そして一緒にReluxを良くしたいデザイナーさんも募集中です!
興味がある方はこちらもご覧ください。
www.wantedly.com


おまけ①

Sketchのナッジの設定を変更したい場合はNudg.itを使うのがおすすめです。
nudg.it

ナッジの変更は設定ファイル(com.bohemiancoding.sketch3.plist)で可能ですが、こちらのツールはGUIで簡単に設定することができます。

f:id:wootan1102:20171206181701p:plain:w300


おまけ②

Adobe XD の正式版がリリース!
Adobe XD を使えば デザイン、プロトタイプ、共有 を簡単におこなうことができます。
Sketch, Zeplin, Prottが1つになった夢のようなツールです 笑
www.adobe.com

現在 Sketchを使っていなければ、Adobe XDのみでデザインするのが良いかもしれません。
まだまだ足りない機能もありますが今後のアップデートにも注目ですね。こちらのアカウントをフォローしておくと最新情報をキャッチアップできます。
twitter.com

SKStoreReviewController で App Store の評価数が急増した話

SKStoreReviewController で評価数が増えるという噂は聞いたことがあったのですが
まさかここまで増えるとは思いませんでした。

Reluxの評価数

11月01日時点のスクリーンショット
f:id:wootan1102:20171215123927p:plain:w300
528件

12月14日時点のスクリーンショット
f:id:wootan1102:20171215123946p:plain:w300
1,609件

1ヶ月半で1,000件以上増加!


実際の画面

f:id:wootan1102:20171215124952j:plain:w300

こちらは開発版の画面ですがこのように表示されます。

以前のUIはアラートで「レビューを書き込みませんか?」と表示し
「レビューを書き込む」ボタンを押すと App Store に遷移するようにしていました。
また、そこで評価をつけるためにコメントを入力する必要がありました。

SKStoreReviewController は★をタップして送信するだけで良いので
評価のハードルがかなり低くなり、評価数が増加したのだと思います。


対応方法

Swiftの場合

import StoreKit
SKStoreReviewController.requestReview()

Objective-Cの場合

#import <StoreKit/StoreKit.h>
[SKStoreReviewController requestReview];

対応はこれだけで良いので簡単です!

注意事項

  • iOS10.3以降対応
  • iOSの設定でオフにすることができる。
  • 1年で3回までしか表示することができない。
  • App Store 以外から配信されたものでは評価を送信することができない。

ガイドラインではどうなっているか?

App Store Review Guidelines - Apple Developer

1.1.7 App Store Reviews:
App Store customer reviews can be an integral part of the app experience, so you should treat customers with respect when responding to their comments. Keep your responses targeted to the user’s comments and do not include personal information, spam, or marketing in your response.
Use the provided API to prompt users to review your app; this functionality allows customers to provide an App Store rating and review without the inconvenience of leaving your app, and we will disallow custom review prompts.

こちらに記載がある通り提供されているAPIを使わないといけません。
APIを使わずにレビュー依頼をするようになっているとリジェクトされる可能性があります。


requestReview() - SKStoreReviewController | Apple Developer Documentation

When you call this method in your shipping app and a rating/review request view is displayed, the system handles the entire process for you. In addition, you can continue to include a persistent link in the settings or configuration screens of your app that deep-links to your App Store product page. To automatically open a page on which users can write a review in the App Store, append the query parameter action=write-review to your product URL.

APIドキュメントをよく見るとこのように書いてあるのでディープリンクを設置するのは良いようです。

親切にパラメータまで用意してくれています。
https://itunes.apple.com/app/id843104033?action=write-review
このようにURLのパラメータとして action=write-review をつけることで
レビュー画面に遷移するようになっています。便利ですね。


最後に

レビュー依頼を表示するタイミングは工夫する必要がありますが、
ほんの少しの工数で評価数を増やすことができました。
同じようにアクションのハードルを下げることで改善できること
たくさんありそうだなと感じました。既存のUIも一度見直してみたいと思います。

App Store の予約注文とは

App Store でアプリの予約注文機能が提供されました!
Offering Your Apps for Pre-Order - App Store - Apple Developer

ザッと翻訳してまとめたので
もし間違いなどがあればご指摘いただけると助かります m(_ _)m

概要

iTunes Connect でレビュー用のアプリとメタデータを送信すると、
すべてのAppleプラットフォーム上で予約注文を利用できるようになります。
リリース日は2日〜90日後を選択することができます。
アプリがリリースされるとユーザに通知され、24時間以内に自動的にダウンロードされます。

対象のアプリ

App Store で公開されたことのない新しいアプリは、予約注文の対象となります。
既に公開されたことがあるアプリ(他の国などを含む)は予約注文の対象外となります。

プロダクトページ

アプリの予約注文が可能になると、リリース予定日が表示された限定ページが App Store で公開されます。
App内課金を提供するアプリの場合は、事前予約中はApp内課金のプロモーションは表示されません。

ユーザからはどう見えるか

ユーザはプロダクトページ、検索結果からアプリを予約注文することができます。
また、アプリがフィーチャーされていれば Today, ゲーム, アプリタブからも予約注文することができます。
リリース日に予約注文をリクエストしたデバイス
自動ダウンロードが有効になっている他のデバイスに自動的にダウンロードされます。
また、アプリが利用可能になったお知らせが通知されます。

有料アプリを先行予約したユーザは、アプリがリリースされるまでは請求されません。
アプリの価格が事前予約中に変更された場合は、予約注文時の価格とリリース時の価格の安い方の価格が適用されます。
ユーザは App Store の設定や iTunes の設定から予約注文をキャンセルすることができます。
予約注文は iOS 11.2, tvOS 11.2, macOS 10.13.2以降の端末でおこなうことができます。
予約注文のプロダクトページは上記以前のOSを利用しているユーザでも、リンクからアクセスすることができます。
ただし、購入ボタンは無効になっており、最新のOSバージョンにアップデートしてアプリを予約注文するように促されます。

事前予約のレポート

Sales and Trends からアプリの予約注文の掲載結果をトラッキングできます。
そこで 注文済み、キャンセル済み、ネット予約済の注文数を確認できます。

マーケティング

Webサイト、メーリングリストSNSアカウントなどのマーケティングチャネルを使用して、
閲覧者が App Store にアクセスしてアプリを予約注文できるようにします。
たとえば、「App Storeで先行予約」など明確な行動を促すフレーズを含めて、プロダクトページへの直接リンクを提供します。

プロダクトページにリリース予定日が表示されますが、この日付が変更される可能性がある場合はアナウンスすることをおすすめします。
アプリを事前予約しているユーザには、Appleからは日付の変更が通知されないので、この変更を伝える必要があります。
同様に AppStoreから予約注文を削除する必要がある場合は、ユーザに知らせるメッセージングを準備する必要があります。

リリース日にマーケティング資料をすべて更新し、AppStoreのダウンロードバッジを更新しましょう。

ダウンロードバッジについてはこちら

App Store マーケティングガイドライン - Apple デベロッパ向け

最後に

Appleにフィーチャされれば事前予約段階でも Today に掲載されるというのは大きいですね。
通常の審査と同じようにアプリとメタデータをアップロードしないといけませんが
これから新しいアプリをリリースする予定がある方はこちらも検討してみてはいかがででしょうか?

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

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

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

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

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%ぐらいがちょうど良いと思います。

おすすめ設定
  • シングルタップ → 通知

よく使うアクションをシングルタップに登録するのがおすすめです。
中でもおすすめなのが通知です。通知は画面上端からスワイプする必要がありますが、シングルタップに登録することでワンタップで通知をひらくことができるようになります。

こちらもシングルタップと同様によく使うアクションを登録するのがおすすめです。
特に iPhoneX ユーザの方はコントロールセンターがおすすめです。
この機能に気づくまでは両手で操作していたのですが Assistive Touch を使うようになってからは片手で操作できるようになりました。

長押しのみ継続時間(アクションするまでの時間)を設定することができます。
時間は0.2秒から8.0秒まで設定することができます。継続時間を長くしてSOSを設定するのも良いかもしれません。

最上位メニューを使用したい方は長押しに
メニューを開くを設定するのがおすすめです。直感的な操作でメニューを開くことができます。

最上位メニューを使わない方にはスクリーンショットを設定するのがおすすめです。
スクリーンショットは2つのボタンを同時に操作する必要があります。
操作ミスでスクリーンショットがうまく撮影できなかったなんてことはありませんか?
Assistive Touchに設定すれば簡単に撮影することができます。
シングルタップやダブルタップなどに設定すると誤操作してしまうことがありますが
長押しに設定すれば誤操作する心配はほとんどありません。

  • 3DTouch → 画面向きのロック

3D Touch は 画面向きのロック がおすすめです。ここにスクリーンショットを設定するのも良いと思います。
画面向きのロックは長押しが良いかと思ったのですが、操作時のフィードバックがなく切り替わったかどうかがわかりにくいです。
3D Touch であればアクション時に振動するので切り替わったことがすぐにわかります。

最後に

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

ヒント

ヒント

  • Apple
  • ユーティリティ
  • 無料

Apple サポート

Apple サポート

  • Apple
  • ユーティリティ
  • 無料