ReluxがAppStoreでフィーチャーされました!
Relux Androidアプリ がベストアプリに選ばれました!
ベストアプリとは?
Google Play がこの 1 年を振り返って選んだ「2016年 ベストアプリ」をご紹介します。思わず家族や友人にすすめたくなるアプリ、画面にくぎ付けになってしまうアプリ、ランキングを賑わせたアプリ、洗練された美しいアプリなど、多彩なラインアップ。さらに12/8 (木) 受賞イベントにて、2016年 ベストアプリ並びに各カテゴリー大賞が発表されます。発表をお楽しみ!
2016年 ベストアプリ
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への対応
PSStore10周年セールでブラッドボーンを購入しました。
今月末はFF15が発売になるので積まないように頑張ってクリアします!
www.jp.playstation.com
本エントリーではiMessageAppの対応について簡単にご紹介したいと思います。
ReluxではiMessageApp内で旅館・ホテルの検索を行い、シェアすることができます。
Storeでもフィーチャーされているのでぜひダウンロードして触ってみてください!
ターゲットの追加
既存のアプリにExtensionを追加する場合は
プロジェクトの + からターゲットを追加してください。
アイコンの設定
通常のアプリとは異なるサイズのアイコンが必要になります。
一番大きなサイズは 1024✕768なのでそこから縮小・トリミングして必要なサイズを作成しましょう。
レイアウト作成
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種類の画面モードが存在します。
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に設定できる値については公式のこの画像がとてもわかりやすいです。
左上のアプリアイコンは自動的に挿入されます。
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を作成する方法もありますが、一部のみであれば本体アプリのソースを参照する方法がおすすめです。
共有したいファイルを追加するとこのような画面が表示されます。
このときに「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施設詳細画面のリニューアル
iPhone7でSuicaが使えるのが想像以上に快適
今まで気づかなかったのですがSuicaの支払いに対応しているお店って結構あるんですね!
財布を忘れてもiPhoneがあればなんとかなりそうです。
www.jreast.co.jp
Reluxアプリの施設詳細画面(旅館やホテルの情報を表示するページ)のリニューアルをおこないました。今回はリニューアル時に気をつけた点などを中心に紹介したいと思います。
施設詳細画面のリニューアル
タブ表示から1画面へ
以前は「施設紹介」「プラン」「アクセス」「レビュー」の4画面のタブで構成されていましたが、リニューアルで1つの画面に統合しています。
また、部屋タイプの一覧は画面遷移せずにみられるように改善しました。
片手で操作できるように工夫
画面を下にひっぱると写真が画面中央に表示され、片手でも無理なく操作できるようになっています。
画面左上の戻るボタンは×ボタンに変わり全画面表示が解除されるようにしています。もちろん上にスワイプしても解除されます。
リニューアルの効果
- 予約完了までの画面がひとつ減ることによりCVRが数%改善
- アプリに関する良いレビューが増加
- Reluxコンシェルジュへの旅行の相談が増加
数値の改善だけでなく社内外から「使いやすくなった」と評価してもらえました。
最後に
今回のリニューアルではアプリエンジニアもSketchを使用したり、
プロトタイプを作成するなど様々なチャレンジをしました。
何度も つくって、触って、壊して を繰り返し
試行錯誤しながら気持ち良い動きになるかを確かめました。
良かったらダウンロードして触ってみてください!
リニューアルプロジェクトのインタビューも
Wantedlyで紹介されているので興味あったらこちらも読んでみてください!
Relux iOSアプリ開発にfastlaneを導入してAppStore申請を自動化
本エントリーはこちらの記事の続きになります。
凄く間が空いてしまいました...(反省)
wootan1102.hatenablog.com
前回は fastlane のテストアプリ配信についてを紹介しました。
今回は AppStore への申請について紹介したいと思います。
AppStore申請の自動化
AppStore申請作業
通常の手順は以下のようになります。
fastlaneでは全ての工程を自動化することができます。
Fastfile
fastlane/Fastfileの自動生成されたappstoreレーンを使用します。
deploygateの配信よりも時間がかかりますが、
コマンドを実行するだけで良いので簡単です。
appstoreレーン
- sigh プロビジョニングファイルの更新
- gym アプリケーションのビルド
- deliver AppStoreへのアップロード
lane :appstore do cert sigh(force: true) gym(scheme: "relux", configuration: "Release") deliver(force: true) end
after_allでSlackに通知するようにしておけば
AppStoreへのアップロードが終わった時点でSlackに通知されます。
Tips
パスワードを変更した場合
パスワードの情報はKeychainに保存されています。
iTunesConnect上でパスワードを変更し fastlane を実行するとエラーになります。
その際に下記のようにコンソール上で新しいパスワードを入力できるようになっています。
新しいパスワードを入力すると自動的にKeychainに保存されます。
Starting login with user 'XXX@XXX.XXX' ------------------------------------------------------------------------------------- The login information you enter will be stored in your Mac OS Keychain You can also pass the password using the `FASTLANE_PASSWORD` env variable More information about it on GitHub: https://github.com/fastlane/fastlane/tree/master/credentials_manager ------------------------------------------------------------------------------------- Password (for XXX@XXX.XXX):
AppleIDを変更した場合
fastlane 配下にある2つのファイルを変更する必要があります。
team_idやapp_identifierなどもこのファイルで変更することができます。
project_dir/fastlane/Appfile
apple_id "XXX@XXX.XXX"
project_dir/fastlane/Deliverfile
username "XXX@XXX.XXX"
メタ情報の更新/スクリーンショットの更新をスキップする
Deliverfileに追記することでスキップさせることができる
project_dir/fastlane/Deliverfile
#メタ情報の更新をスキップ skip_metadata true #スクリーンショットの更新をスキップ skip_screenshots true
※ 詳細な使い方などはドキュメントに書いてあるので一度読んでみるのがおすすめです。
github.com
AppStoreへの申請を自動化してよかったこと
Schemeの指定ミスを防ぐ
Releaseを選択していたつもりがDebugになっており
アップロードしなおすというミスが完全になくなりました。
頻繁に発生する問題ではありませんが自動化したことで
Schemeが正しいかを確認する必要がなくなりました。
工数大幅削減
AppStoreへの申請作業は月に数回しか行わないものですが
それなりに時間がかかるのでかなり負担になっていました。
作業自体は難しいものではありませんが工数が大幅に削減することができ、
誰でも簡単に申請作業ができる状態になりました。
Gitでの管理
メタ情報(アプリ概要、アップデート情報)やスクリーンショットをGit上で管理できるようになります。
Gitで管理することによりAppStore上の情報の更新に対してレビューを行えるようになりました。
セットアップも簡単でドキュメントもしっかりしているので
設定でつまづくことはないと思います。ぜひ試してみてください!
※チーム無いで証明書を共有して管理するツールもあります。こちらのやり方が推奨されているようです。
fastlane/match at master · fastlane/fastlane · GitHub