Help us understand the problem. What is going on with this article?

customPopupView×提案

More than 3 years have passed since last update.

Xmasまであと10日!
通常業務と並行してAdvent Calendarに参加している皆様、お疲れさまです!

Advent CalendarといえばGoogleのAdventCalendarもとても楽しいです。
:snowflake:Google サンタを追いかけよう:snowflake:

さて、一通り遊び終わりましたら、リフレッシュした頭でこちらの記事にも目を通してみてくださいね。

customPopupView

既存のUIAlertControllerでは画像を載せる・ボタンをデザインするといったことができません。
テキストのみで構成されるUIAlertControllerではものさびしかったので、
UIViewControllerを使って自由なレイアウトのpopupViewを作成する方法を調べました。

提案について

私の務める会社のサービスはまだまだ若いので、実装したい機能がたくさんあります。

開発計画はしっかりみんなで決めるのですが、
”これけっこう簡単だからすぐ実装できるのにな〜”だったり、
”問い合わせ状況からこれは早めに実装したほうがいいのではないか。”
というのが出てくることもあります。

この時提案の仕方もエンジニアとして大事なスキルだと思います。

今回の記事では言語的に難しい内容ではありません。
でも、コーディング技術やエンジニア暦関係なく、一生懸命自社サービスに向き合う姿勢があれば、新人でも提案はできるし、そういうところでバリューを発揮できるようになるのも成長の1つだと思います。

ということで、この記事では私なりに学んだ提案の方法を共有しようという思いに至りました。

※popupViewはライブラリもたくさんありますが、ライブラリが多いとSwiftのバージョンが上がった時に書き換えが大変な事になる上にビルド時間を長くするので自作する方法を紹介します。

準備

新規プロジェクトを作って機能を切り出す

新規プロジェクトを作成し、動くものを見せたいので必要な機能だけ盛り込んだアプリを作成します。
ブランチを切って作らないのは、Xcode8.0(8.1)はフルビルドでビルドが遅いので開発効率をあげるためです。

UI関連の修正をした際にものすごく苦しめられたので色々調べました。
参考にどうぞ。

関連記事
- XCodeのビルド時間を算出する
- Xcode8に移行してビルドが遅くなったのを直す

scrollViewで画面を生成

viewの下にscrollViewを配置し、
その中にさらに画面キャプチャでパソコンに取り込んだアプリの画像を
imageViewに設定してハリボテの画面を作成します。
スクリーンショット 2016-12-05 0.53.40.png

実装したい機能のトリガーを用意

今回はこの[チームを削除する]というボタンをタップした際に出力されるアラートを実装したいので
トリガーとなる[チームを削除する]ボタンだけbuttonObjectを配置しました。
スクリーンショット 2016-12-05 0.56.34.png

これで準備は整いました。
さっそくpopupViewの生成に移ります。

実装

1.popupのViewControllerを用意

新しいViewControllerをObjectLibraryから追加し、
背景用のviewもドラッグ&ドロップで追加します。
今回は透けるグレーにしたいので、viewのbackground colorをblackにしました。
スクリーンショット 2016-12-09 12.26.41.png

:baseball:Tips

ここで1つ注意なのが、viewに透過性を出したい場合、
Attributes InspectorのAlphaの値で調節すると、そのviewにぶら下がっている子view全てにalpha値が影響します。

なので、backgroundの項目の上のAlphaではなく、
backgroundの項目のプルダウンを開き、
1番下のOther...からOpacityで透過度を設定します。
スクリーンショット 2016-12-09 12.26.53.png スクリーンショット 2016-12-09 12.23.42.png
ちなみにAplhaとOpacityの違いって何だろうと思って調べてみました。
もともとはWebのCSSから流用した考え方ですが、実際の挙動と逆になっています。

opacityは透明度を指定するために用意されたCSS 3のプロパティで、アルファチャンネルと同じ値(0〜1.0)を指定することができる。現在のところ、Firefox、Safari、Operaが対応している。

アルファチャンネルが要素の背景色や文字の色の透明度を個別に指定するのに対して、opacityプロパティは要素全体の透明度を指定する。

私の情報に誤りがあるor詳しい方がいたら是非コメント欄にお願いします。

2,popupViewを作成する

フレームとなるview,あとは好みで画像やtextを配置します。
スクリーンショット 2016-12-11 13.05.24.png

3,ソースコードと接続

Control + N でpopupView用のViewControllerを作成します。
継承はUIViewControllerです。
VCファイルを作成したらstoryboardでpopupViewを選択した状態でIdentity Inspectorを開き、Classを先ほど作成したVCに設定します。
スクリーンショット 2016-12-11 13.11.50.png

これでソースファイルとstoryboardのpopupViewControllerが結びつきました。

4,開閉挙動の実装

popupViewを開く

buttonObjectをAction接続し、その中にpopupViewを開く処理を記述します。
スクリーンショット 2016-12-11 13.19.13.png

:soccer:Tips

この時、サービスがiOS9.0以上の対象であればStoryboard Referenceを使う方法をお勧めします。
理由は後述します。

もしiOS9.0以下をまだサポートしている場合はソースコードでの遷移設定がお勧めです。
popupViewは様々な画面から呼ばれる可能性があるので、大きな1つのstoryboardで接続すると、遷移を確認する際に大変になるからです。

ここではソースコードで遷移させるコードを掲載しておきます。
※popupViewのidentity inspectorのstoryboard IDを設定することをお忘れなく!

:basketball:Tips

接続先の画面と接続設定ができたら、遷移方法と遷移先画面のの表示方法を設定します。
storyboardでpopupViewを選択し、Attributes Inspectorを開くと
Transition StyleとPresentationの項目があるので、それぞれ下記の通り設定します。

Transition Style Presentation
Cross Dissolve Over Current Content

遷移方法をCross Dissolveにすることで次の画面が下(画面の奥)からふわっと出現、
表示方法をOver Current Contentにすることで次の画面の後ろにうっすら遷移前の画面が見えている状態で表示させることができます。

設定値についてこれらの記事が動画もあってとてもわかりやすいです
モーダルビュー表示時のアニメーションを変更する
【Swift】Segueの設定 その2。モーダル表示の重ね方や登場シーンを設定する。

popupViewを閉じる

スクリーンショット 2016-12-11 13.11.06.png
ボタンをそれぞれAction接続でソースコードに繋ぎこみ、
dismissメソッドでpopupViewを閉じます。

確認

ここまでで一度RUNしてみるとボタンタップでpopupが表示され、
popupのボタンタップで閉じて前の画面に戻るというところまで実装できたかと思います。

提案準備

実装イメージを膨らませる

ここからが本当に大切なところです。
提案する際に1番大切なのが
どのくらいの工数がかかるのか
をイメージしてもらう&説明できるということ。

今回はiOS既存のAlert Controllを使用しているところを一貫してカスタムpopupViewに変えませんかという提案なので、
・現状のalert Controllerから作成する必要のあるpopupViewの網羅
・メンテナンス・管理方法
・上記を考慮した上での実際の工数
の情報が必要そうです。

popupViewの網羅

スクリーンショット 2016-12-11 16.11.24.png
Xcodeで"UIAlertController"で検索をかけ、
カメラの起動時などは逆にiOSのデフォルトのAlertControllerを使ったほうが、
ユーザーも慣れているらいいかな〜と棲みわけを考えて自分なりに3パターン必要だという答えに至りました。

必要な分はVCコピー&ペーストして作った新しいVCをちょっちょっと修正します。

メンテナンス・管理方法

先ほど作成したVCは同じVCで管理するのか、別にするのかも考えてみましょう。

小さな規模のアプリなら同じVCでも良さそうですが、
閉じるだけではない選択肢のあるpopupはAPIを叩く処理なんかがページによって異なるので
まとめて書くとあとあと読みにくい管理しにくいファイルになってしまいそうなので、
別に作ったほうが良いと判断しました。

また、どこのページからもよばれうるpopupViewは同一storyboard上のsegue接続だと参照する大変そうです。
大きなプロジェクトになってくると、線を選択して辿って辿って。。ってなります。

なのでpopupView用のstoryboardを作成し、
そこでデザインを一元管理。
遷移もstoryboardReference名でわかりやすい命名をしておけばstoryboardのユーザーストーリー(画面遷移図)としての機能も損ないません。
スクリーンショット 2016-12-11 17.41.05.png

工数

上記でただ作るだけでなく、今後の開発や管理を考慮した開発作業が洗い出せました。
これを元に工数を考えます。

<レイアウト>
-popupViewの作成×3
-segueの設定×(検索して算出)

<処理>
-ボタン押下時の処理をデリゲートに移動×(検索して算出)
(今までAlertViewControllerのクロージャーの中に書かれていたメソッドを、
デリゲードを作成してデリゲードメソッドの中に移動する。
処理自体は変更不要な上にデリゲートを使えば結局処理をするのは遷移元なので値の受け渡しなど気にしなくて良い)

<テスト>
-テスト×(検索して算出)

これでだいたいの時間が算出できるかと思います。

最後に

上記のようにして作った挙動・レイアウト確認用のアプリと
工数の話を頭にいれて提案の準備完了です!
工数はわざわざまとめなくても口頭で伝えることができればよいかな〜と思いますがこれは会社によって異なるかな。

余談

今回はとても簡単な例だったのでサンプルアプリ作るまでしなくとも
Sketchでイメージ作って見せればええやん。レベルの話でした。

実際であればもうちょっと挙動を確認したいような処理だったり
もしくはあえてあまり賛成されなさそうなものをチョイスして提案したほうが良いと思います。

みんなが満場一致で良いと思えば口頭でやります〜ですみますが、
実際にアプリ作ることによって熱意と実際に作ったんだから工数の見積もりは信頼できますよという証明になり真剣に考えてもらえますし、
自分なりに他のメンバーから声が上がらなそうなものほど提案の価値があると思います。

みんなが同じ方向を向くのって大切で、
こういう提案は通るor通りにくいってだいたいわかるのですが、
あまりに同じ意見しかない集団はたくさんのユーザーの声をひろえるアプリを作れないと思うのです。

アプリを開発していく上で、いつまでにユーザーを増やす、利益を出すといった
ただ単純に”アプリをよくする。”
という観点では判断軸におさまらない開発計画というものがあります。

そんななか、これ、実装した方が絶対ユーザー離れないよ!
とか、あっているかもしれないし間違っているかもしれないけど
自分が良いと思うことを提案するということは間違いではないはず。

ただやりたいっていうだけじゃなく、
チームの仲間の時間を多分に奪うでもなく、
スマートに自分の提案をしていけるエンジニア、
いいですよね。

yuri_htt
2016年5月にエンジニアとして活動を開始 活動範囲は React Native / React / Go / GraphQL / AWS / Swift
https://yuri-hotate.hatenablog.com/archive
linksports
「スポーツをしている人を幸せにする」ことをコンセプトに、スポーツ関連サービスの企画・開発を行っているスタートアップです。
https://linksports.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした