iPhone X対応に向けて。デバイスに寄らないコンテンツ表示のtips的なの

こんにちは、こがです。

春ですね、例年はなんともないのですが今年はどうしてかとても花粉症に悩まされています。こがです。
そして春と言えば、iOSアプリの新規リリースでとうとうiPhone Xへの対応が必須になりましたね。
そんな対応をする際に役に立つと思うものを記事にしてみようと思います。

説明

一つのサンプルとして下端に広告をレイアウトする際にどうするのかというのを紹介しようと思います。

まずは、イメージ画像から見てもらうのがイメージしてもらいやすいのかなと思います。

一つ目がiPhone 8 Plusでの表示です。
二つ目がiPhone Xでの表示です。

ナビゲーションバーが青色で、コンテンツ領域が水色、広告が白という風になっています。
iPhone 8 Plusでは広告が下端にぴったりくっついています。
iPhone XではHome Indicatorの領域がナビゲーションバーと同じ青色になっています。

こんな感じでiPhone Xとそれ以外で表示の切り替えをスマートにする方法です。

やりかた

前提として今回表示する広告コンテンツは高さが50(px?)とします。

下端に表示するViewのAutolayoutの制約として以下の感じに設定します

  • Viewの上端をSafe Areaの下端に対して-50(広告の高さの負値)を設定します
  • Viewの下端をSuper viewの下端に揃えます
  • 表示したい広告をこの対象のViewの上端に揃えます

どうでしょう?とっても簡単だと思いませんか!
しかも、簡単でかつiPhone Xとそれ以外とで同じ方法での実装が出来るのでとてもスマートだと思っています。
是非この方法を使ってみてください!

ということで今回はデバイスに寄らないコンテンツ表示のtipsでした!
ではでは

早くなったと噂のCircleCI 2.0を使ってみた!

こんにちは、こがです。

今回とある処理の自動化を兼ねてCircleCIを触ってみました!
最近では2.0がリリースされており、しかも結構早くなっているようで、早速というかいきなりですが2.0を触ってみることにしました!

CircleCIとは

CI(継続的インテグレーション)をクラウド上で行えるWEBサービスです。
色々と使い方はありますが、基本としては新しいコミットをトリガーとしてそのアプリが正しく機能するのかどうかをテストする感じです。
他の使い方としてAndroidやiOSのビルドなんかも出来たりします。

CircleCI 2.0

2.0になって大きく変わった部分は、設定ファイルの書き方(互換性なんてそんなものはないらしい)、Dockerのサポート拡充、実行時間が大幅に短縮などが大きなところでしょうか(あまりよく分かっていない)

設定ファイルは本当に大きく書き方が変わっていて、何も知らなかった自分はここで結構時間を使いました・・・。
特に、設定ファイルの置き場所が.circleci/config.ymlに変更になっていてしばらくなんで動かないんだろうと頭を悩ませていました。

Dockerのサポート周りでは、以前のバージョンでは利用するコンテナが固定だったようです。
2.0からは公開されているコンテナイメージから自由に選択することが出来るようになりました。これによって、公開しているのが前提ですが自前のコンテナも利用可能になります。

Schedule-Workflow

新機能の一つにWorkflowという仕組みが導入されています。Workflowを使うことで、今まで乱雑になっていた設定を目的ごとに整頓したり、作業プロセスに依存関係を付けたり出来るようになります。
と、まあWorkflow自体はこの辺にしておいて今回はSchedule-Workflowにフォーカスして行こうと思います。

簡単に言えば今までコミットベースのCIだったのをその名の通りスケジューリングして出来るようにしましょうという感じです。
スケジューリングの指定はcrontab形式で行います。

今までCircle CIのAPIとAWS Lambdaを組み合わせたりしていた方も居ると思いますが、それが公式の機能で出来るようになります。

ハマり所

一つは先にも挙げましたが、設定ファイルの置き場所が変更になっていることです。
これを知らずに以前のファイルを2.0用に書き換えてて動かない!なんてことも・・・。

二つ目はymlのインデントが特殊?なのか自分の環境では上手く動きませんでした。
普段2スペースでインデントしているのですが、他の部分は認識するのにrestore_cache/save_cacheやworkflow内で使うscheduleのパラメータ部分では上手く認識しませんでした。この部分だけ4スペースにすることで動いています。
きっと同じような構文の部分共通で発生しているはず・・・。

終わりに

ざっと軽くではありますが、触った機能に関して書いてみました。
これから色々とまた使っていく内にネタに出来たらなと思います。

今日はこの辺で。ではでは

ブログ開設(移転)しました

こんにちは、こがです

せっかく利用してるドメインをフルに活用すべく、はてなブログからWordPressに乗り換えてみました。

これを契機にブログももうちょっと頑張れたらなと思うのでしたまる。

どうぞこれからもよろしくお願いします。