読者です 読者をやめる 読者になる 読者になる

wootan's diary

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

Xcodeのビルド時間を短縮する

iOS 開発 Xcode

Xcodeのビルド時間が気になってきたので
調査してすぐにできそうなものを試してみました。

Xcodeが使用するコア数を設定

Macのコア数を確認

以下のコマンドを実行

$system_profiler SPHardwareDataType
Model Name: MacBook Pro
      Model Identifier: MacBookPro12,1
      Processor Name: Intel Core i5
      Processor Speed: 2.7 GHz
      Number of Processors: 1
      Total Number of Cores: 2
      L2 Cache (per Core): 256 KB
      L3 Cache: 3 MB
      Memory: 16 GB…

Total Number of Coresがコア数なのでこの場合のコア数は2です。

Xcodeの設定を変更

上記コマンドで調べたコア数を設定します。
これよりも大きな値を設定しても意味はなく、パフォーマンスが悪化することがあります。

以下のコマンドを実行

$defaults write com.apple.dt.Xcode IDEBuildOperationMaxNumberOfConcurrentCompileTasks 2

Debug Information Formatを変更

SchemeがDebugのときのみ
DWARF with dSYM FileからDWARFに設定を変更します。
dSYMファイルはクラッシュログを調査するのに必要なもので開発時は必要ないです。

CocoaPodsのコンパイルをスキップ

※効果はありますが戻し忘れに注意です。

Product -> Scheme -> Edit SchemeからBuildを選択し
Find Implicit Dependenciesのチェックをはずします。

f:id:wootan1102:20170112175515p:plain

Podfileを変更してもビルドは走らないので注意しましょう。

CocoaPodsではなくCarthageを使用

Carthageはライブラリを事前にビルドし、フレームワークを作成するのでビルド時間を短縮することができます。
対応していないライブラリ以外はCarthageを使用するのが良さそうです。
試せていませんがSwiftPackageManagerでも効果があるようです。

github.com
github.com


ビルド時間を確認するには?

以下のコマンドを実行

$defaults write com.apple.dt.Xcode ShowBuildOperationDuration YES

Xcode上ではこのようにビルド時間が表示されます。

f:id:wootan1102:20170112174619p:plain

最後に

設定を少し変更するだけでもビルド時間が改善されました。
Swiftはコードレベルでも改善できることがあるので
パフォーマンスを意識してコードを書くように心がけたいと思います。

ReluxがAppStoreでフィーチャーされました!

iOS

5ヶ国同時フィーチャー!

2016年12月9日から台湾、韓国、香港、オーストラリア、ニュージーランドの5ヶ国のAppStoreでフィーチャーされています。
※Reluxは英語、中国語(繁体字簡体字)、韓国語に対応しています。(ローカライズについては別の記事で紹介したいと思います。)

フィーチャーの影響

海外のRelux会員数が急増しています。
それに伴い予約やアプリのレビューも増えています。

海外のユーザにも日本の旅館・ホテルの魅力をしっかり伝えられるよう
さらに良いサービスにしていきます!

お知らせ

Reluxでは一緒にアプリをつくってくれるエンジニア・デザイナーを募集しています!
興味ある方はこちらからご応募ください。

www.wantedly.com

www.wantedly.com

Relux Androidアプリ がベストアプリに選ばれました!

Android デザイン

play.google.com

ベストアプリとは?

Google Play がこの 1 年を振り返って選んだ「2016年 ベストアプリ」をご紹介します。思わず家族や友人にすすめたくなるアプリ、画面にくぎ付けになってしまうアプリ、ランキングを賑わせたアプリ、洗練された美しいアプリなど、多彩なラインアップ。さらに12/8 (木) 受賞イベントにて、2016年 ベストアプリ並びに各カテゴリー大賞が発表されます。発表をお楽しみ!

2016年 ベストアプリ

ベストデザインアプリ

ベストデザインアプリとしてReluxが選ばれています!
Androidユーザの方はダウンロードしてみてください。

f:id:wootan1102:20161201105532p:plain

play.google.com

Xcodeで覚えておくべきショートカット

iOS 開発 Xcode

本エントリーではXcodeでよく使う(使いそうな)ショートカットについてまとめました。
Breakpoint操作はいつもマウスでポチポチしてしまうので、しっかりショートカットを使うようにしたい...

コード操作

選択範囲のコメントアウト

Cmd + /

インデント操作 左にずらす

Cmd + [

インデント操作 右にずらす

Cmd + ]

カーソル位置を行の先頭に移動

Ctrl + A

カーソル位置を行の末尾に移動

Ctrl + E

カーソル位置から行の先頭まで選択

Cmd + Shift + ←

カーソル位置から行の末尾まで選択

Cmd + Shift + →

変数、メソッドにジャンプ

Cmd + Click

変数、メソッドのDescription表示

Opt + Click

Xcode操作

左ペイン表示/非表示切替え

Cmd + 0

右ペイン表示/非表示切替え

Cmd + Opt + 0

デバッグエリアの表示/非表示切替え

Cmd + Shift + Y

スタンダードエディタ切替え

Cmd + Return

アシスタントエディタ切替え

Cmd + Opt + Return

1つ前に選択していたファイルに戻る/進む

  • 戻る Cmd + Ctrl + ←
  • 進む Cmd + Ctrl + →

ヘッダーファイル / 実装ファイルの切替え

Cmd + Ctrl + ↑ または Cmd + Ctrl + ↓

検索

プロパティ・メソッド一覧表示

Ctrl + 6

ファイル内検索

Cmd + F

プロジェクト内検索

Cmd + Shift + F

  • 選択時にEnter スタンダードエディタに反映
  • 選択時にOption + Enter アシスタントエディタに反映

クイックオープン

Cmd + Shift + O

ビルド/デバッグ

Project Clean

Cmd + Shift + K

Build

Cmd + B

Run

Cmd + R

Stop

Cmd + .

Breakpoint操作

  • Step Over F6
  • Step In F7
  • Step out F8
  • Continue Cmd + Ctrl + Y

Breakpoint 追加削除

Cmd + \


これを覚えるだけでかなり効率よくなるので頑張って覚えましょう!

iMessageAppへの対応

iOS 開発

PSStore10周年セールでブラッドボーンを購入しました。
今月末はFF15が発売になるので積まないように頑張ってクリアします!
www.jp.playstation.com

本エントリーではiMessageAppの対応について簡単にご紹介したいと思います。
ReluxではiMessageApp内で旅館・ホテルの検索を行い、シェアすることができます。
Storeでもフィーチャーされているのでぜひダウンロードして触ってみてください!

プロジェクトの作成

File > New > Project > iOS > iMessage Application で新規プロジェクトを作成することできます。

f:id:wootan1102:20161114192646p:plain


ターゲットの追加

既存のアプリにExtensionを追加する場合は
プロジェクトの + からターゲットを追加してください。

f:id:wootan1102:20161114192659p:plain


アイコンの設定

通常のアプリとは異なるサイズのアイコンが必要になります。
一番大きなサイズは 1024✕768なのでそこから縮小・トリミングして必要なサイズを作成しましょう。

f:id:wootan1102:20161114201759p:plain


レイアウト作成

MainInterface.storyboard

通常のアプリケーションのStorybaordと同様にレイアウトを組むことができます。
コントローラはUIViewControllerではなくMSMessagesAppViewControllerを継承したものになります。
後ほど説明がでてきますが2種類の画面モードが存在するのでしっかりAutoLayoutに対応する必要があります。


Viewのライフサイクル

MSMessagesAppViewControllerではメッセージ専用のメソッドが用意されています。
通常のアプリケーションをつくり慣れている方なら名前から挙動を予測することができます。

Extensionの状態

willBecomeActive(with: MSConversation)
  • アクティブ状態に遷移する前に呼ばれる
didBecomeActive(with: MSConversation)
  • アクティブ状態に遷移した後に呼ばれる
willResignActive(with: MSConversation)
  • 非アクティブ状態に遷移する前に呼ばれる
didResignActive(with: MSConversation)
  • 非アクティブ状態に遷移した後に呼ばれる

メッセージのイベント

選択されたメッセージの値をつかって処理をおこなう場合は
didSelect内でおこなう必要があります。willSelect内だとselectedMessageが更新されていません。

willSelect(MSMessage, conversation: MSConversation)
  • メッセージオブジェクトを選択したあと、selectedMessageを更新する前に呼ばれる
didSelect(MSMessage, conversation: MSConversation)
  • メッセージオブジェクトを選択したあと、selectedMessageを更新した後に呼ばれる
didReceive(MSMessage, conversation: MSConversation)
  • 新しいメッセージを受け取ったときに呼ばれる

プレゼンテーションスタイル

iMessageExtensionは2種類の画面モードが存在します。

Expanded


  • 全画面表示
  • メッセージタップ時に切り替る
  • Compact時に右のボタンタップで切り替る

Compact


  • コンパクト表示(ソフトウェアキーボードと同じサイズ)
  • Expanded時に右のボタンタップで切り替る

いつでもユーザが切替えることができるので両方に対応する必要があります。

プログラム側からも画面モードをリクエストすることができます。
requestPresentationStyle(MSMessagesAppPresentationStyle)
で指定したPresentationStyleに切り替えることができます。
画面が切り替る際には下記のメソッドが呼ばれます。

willTransition(to: MSMessagesAppPresentationStyle)

  • 画面モードが切り替る前に呼ばれる

didTransition(to: MSMessagesAppPresentationStyle)

  • 画面モードが切り替った後に呼ばれる

これらの用意されたメソッドを使用して処理を行います。
ここで紹介した以外のものも存在するので詳しくはドキュメント参照。
https://developer.apple.com/reference/messages/msmessagesappviewcontroller


メッセージの送信

MSMessageTemplateLayoutを使用しメッセージを設定します。
(これ以外のやり方がわからなかったのでカスタムする方法とかあったら教えてください...)

MSMessage *message = [MSMessage new];
MSMessageTemplateLayout *layout = [MSMessageTemplateLayout new];

// ここでlayoutに値を設定

message.layout = layout;
[self.activeConversation insertMessage:message completionHandler:nil];

Layoutに設定できる値については公式のこの画像がとてもわかりやすいです。
左上のアプリアイコンは自動的に挿入されます。

f:id:wootan1102:20161115164814p:plain

https://developer.apple.com/reference/messages/msmessagetemplatelayout


iMessageAppに対応する際のポイント・Tips

キーボードについて

ソフトウェアキーボードはCompactでは表示することができません。
UITextFieldなどでキーボードを表示する場合は気をつけましょう。
Expandedになる前にソフトウェアキーボードを表示しようとするとクラッシュします。

Podsを共有するには?

複数のターゲットでPodsを共有するには以下のように書きます。

def shared
  pod 'hoge'
end

target 'SampleApp' do
  pod 'foo'
  shared
end

target 'SampleAppExtension' do
  pod 'bar'
  shared
end

Modelなどの共通クラスはどうするか?

Modelなどは本体アプリとExtensionでかわらないので共通のクラスを使うようにします。
EmbeddedFrameworkを作成する方法もありますが、一部のみであれば本体アプリのソースを参照する方法がおすすめです。

共有したいファイルを追加するとこのような画面が表示されます。

f:id:wootan1102:20161115171100p:plain

このときに「Copy items if needed.」のチェックをはずすと
ファイル自体はコピーされずに参照することができます。

本体アプリとKeychainStoreを共有するには?

Keychain Sharingを使用します。
Project > Capabilities > Keychain Sharing をONにし
Keychain Groupsを揃えるだけで共有することができます。

ローカルストレージやUserDefaultsを共有したい場合はApp Groupsを使用します。
Keychain Sharingと同様にProject > Capabilities > App Groups をONにすることで共有することができます。

本体アプリを起動するには?

AppExtensionにはUIApplicationが存在しません。
AppExtensionではNSExtensionContextを使用します。
open(URL, completionHandler: ((Bool) -> Void)? = nil)で
カスタムスキームを指定することで本体Appをひらくことができます。
Reluxではメッセージをタップすると
メッセージに設定されている施設の詳細ページに遷移するようになっています。

最後に

iMessageAppに対応することで
アプリ間を行き来することなく情報をシェアできるようになり、
iMesssage上でやりとりを完結することが出来るようになります。

より良いユーザ体験のためにもiMessageApp対応を検討してみてはいかがでしょうか?

Relux(リラックス)

Relux(リラックス)

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

ReluxがAppStoreでフィーチャーされました!

iOS

11月11日(ポッキー・プリッツの日)から
ReluxがAppStoreでフィーチャーされています!


ユーザ目線で改善を繰り返し
さらに使いやすいアプリにしていきたいと思います。

Relux(リラックス)

Relux(リラックス)

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

Relux施設詳細画面のリニューアル

iOS UIUX 開発

iPhone7でSuicaが使えるのが想像以上に快適
今まで気づかなかったのですがSuicaの支払いに対応しているお店って結構あるんですね!
財布を忘れてもiPhoneがあればなんとかなりそうです。
www.jreast.co.jp


Reluxアプリの施設詳細画面(旅館やホテルの情報を表示するページ)のリニューアルをおこないました。今回はリニューアル時に気をつけた点などを中心に紹介したいと思います。

施設詳細画面のリニューアル

タブ表示から1画面へ

以前は「施設紹介」「プラン」「アクセス」「レビュー」の4画面のタブで構成されていましたが、リニューアルで1つの画面に統合しています。
また、部屋タイプの一覧は画面遷移せずにみられるように改善しました。


片手で操作できるように工夫

画面を下にひっぱると写真が画面中央に表示され、片手でも無理なく操作できるようになっています。
画面左上の戻るボタンは×ボタンに変わり全画面表示が解除されるようにしています。もちろん上にスワイプしても解除されます。


項目のアイコン化

施設の情報はアイコンで見やすく整理
文字を少なくすることで情報が詰まりすぎないように工夫しています。


写真・地図のパララックス

施設写真と地図にはパララックスを取り入れ、奥行きと立体感を表現しています。
画面の構造がおかしくならないように注意しながら取り入れました。


コンシェルジュ導線の追加

部屋タイプの一覧のすぐ下にReluxコンシェルジュ(カスタマーサポート)の導線を配置することで旅行の予約や相談を気軽におこなっていただけるようになっています。


どこからでも部屋タイプ一覧にジャンプ

1つの長い画面になっているのでどこからでも部屋タイプ一覧にジャンプできるよう
画面下部にボタンを設置しています。このボタンは部屋タイプ一覧が画面上に表示されると非表示になります。


リニューアルの効果

  • 予約完了までの画面がひとつ減ることによりCVRが数%改善
  • アプリに関する良いレビューが増加
  • Reluxコンシェルジュへの旅行の相談が増加

数値の改善だけでなく社内外から「使いやすくなった」と評価してもらえました。

最後に

今回のリニューアルではアプリエンジニアもSketchを使用したり、
プロトタイプを作成するなど様々なチャレンジをしました。
何度も つくって、触って、壊して を繰り返し
試行錯誤しながら気持ち良い動きになるかを確かめました。
良かったらダウンロードして触ってみてください!

Relux(リラックス)

Relux(リラックス)

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



リニューアルプロジェクトのインタビューも
Wantedlyで紹介されているので興味あったらこちらも読んでみてください!

www.wantedly.com