Raptor開発者ブログ

期限:2016年月日 やること:次のアプリをリリースする 資格の勉強法、アプリ開発、はてブロのカスタマイズのことを書きます!

2台目のMacを新しく買って前のMacの設定等を引き継いだときに、大変だったこと

 
 
2月15日に、新しく買ったMacBook Proが届きました。
それに伴い、これまで使っていた古いMacの設定等を新しいMacに移行することに。
 
やり方は外部HDDに古いMacの設定等を丸ごと保存し、その設定等を新しいMacに丸ごと移すという。
Time MachineというMacアプリで設定等丸ごとバックアップできるので、それを移行アシスタントというシステムを使って移すのです。
ここまでは、検索してすぐにわかりやすいサイトがみつかるため、問題ありませんでした。

このTime Machineはこれまであまり使ったことがなかったです。
というのも、Time Machineは、毎日1時間ごとに設定を保存し続けるというもので、そこまでこまめにバックアップとる必要もないだろうと思ったので。
しかし、Macを新しくしたついでに、これからはTime Machineでバックアップすることに。

1日目はそうして移行作業だけで終わりました。
 
 

大変だったこと(キーチェーンアクセス)

f:id:raptor36:20160218182849p:plain:w200
2日目は、アプリ開発のための開発環境が正常に動いているかを確認することに。

Androidアプリに関しては、なんの問題もなく、これまで通りファイルをapk化でき、それをGooglePlayにアップロードできました。

ところが、iPhoneアプリの開発環境Xcodeで異常が。

iPhoneアプリのファイルをストアにアップロードするには、証明書が必要です(1年ごとにデベロッパーの更新をして1万円くらい払うため)。
昨日行ったTime Machineにより、古いMacの設定をほとんどすべて引き継げたのですが、証明書に関しては、古いMacの証明書を引き継げませんでした。
そのため、一旦古いMacを動かしてそこから証明書を書き出し、Googleドライブにアップロードして、それを新しいMacにダウンロードするという方法をとりました。
あとは、この証明書をダブルクリックすれば、自動でキーチェーンアクセスが起動して、証明書を引き継げるらしいのです。

ところが、肝心のキーチェーンアクセスが、はじめの1時間くらいは正常に動いていたものの、突然なんの反応もしなくなり、カーソルが写輪眼みたいな虹色のくるくるになりだしたので、一旦、強制終了しました。
すぐにもう一度キーチェーンアクセスを起動したところ、なんの反応もせず、写輪眼になるだけです。
パソコン自体を再起動すれば、たいていのエラーは解消するので、再起動も試しました。
しかし、それでもキーチェーンアクセスを開こうとすると、写輪眼になります。

検索して対処法を探したところ、こういう症状になる方もいたのですが、一旦キーチェーンアクセスをバックアップとった上で削除したら直ったというおそろしい対処法しか見つかりませんでした。
さすがにそれを試す勇気はなく、Mac到着2日目にして、途方に暮れてしまいました。
 
 
そうした中、落ち着いて考えてみると、Time Machineで古いMacのデータを移行したのと同じ要領で、正常に動いていた頃の新しいMacのデータを現在のMacに移行すればうまくいくでのはないかと気付きました。

幸い、昨日からTime Machineで1時間ごとにバックアップしていたので、キーチェーンアクセスが突然動かなくなる前の正常に動いていた時間のバックアップを使って復元しました。

それにより、キーチェーンアクセスが正常に動くようになり、古いMacの証明書も引き継げました。
 
 
これでうまくいったと思ったのですが、証明書の部分をよくみると、「この証明書の発行者は無効です」と赤字になっています。
案の定、Xcodeでストアにアップロードしようとしてもエラーになります。

証明書の引き継ぎがまだどこかおかしいのかと思い、いろいろ調べましたが、このようなエラーに困っている人は英語も含めてみつかりませんでした。

そんな中、やたらと検索にひっかかるのが、2016年2月15日でappleの証明書の期限が切れたので、それを削除して新しくインストールしてね、というもの。

Macを新しくしたのが原因だと思っていた自分には、てっきり無関係だと思っていましたが、これを削除したところ、iPhoneアプリをストアにアップロードできるようになりました!!

よりによって、新しくMacを買った日に証明書の期限が切れるなんて!
とんでもないタイミングのエラーでした。
 
 

今回大変だった原因

 
ようやくiPhoneアプリを無事アップロードでき、念のためもう一度Androidアプリの方でもアップロードできるか試したところ、proguardのエラーでアップロードに失敗しました。
今度はAndroidか、と思いましたが、再起動してもう一度アップロードしてみたところ、すんなりできたのでよかったです。
 
 
今回のデータ移行もだいぶきつかったです。

そもそもの原因は、データ移行はTime Machineを使えばカンタン、と油断していたことにあります。
基本的に、調子に乗って油断しているとどえらいことになる、ということを散々学んできたはずなのに、もう忘れていました。
 
 

Time Machine

f:id:raptor36:20160218182425p:plain:w200
とにかく、今回身にしみてわかったことは、Time Machineのありがたさです。
1日刻みのバックアップでは、1日の間にだいぶ色々いじれてしまうので、それをまたやり直すというのは想像するだけできつすぎます。
1時間刻みでバックアップって、必要だったんですね!

エラーが起こる前の時間に戻りたいという願いを叶えてくれる、まさにTime Machineです。
 
 
そして、このTime Machineの使い途がわかったのもよかったです。

よく、Xcodeとかアプリ開発環境をアップデートする方がいますが、自分の場合、アップデートして取り返しのつかないことになるのが恐ろしいのでやりません。
しかし、Time Machineがあれば、いざという時には元に戻せるので、試しにアップデートとかができるということに!
 
 
ホントにTime Machineの重要さがわかりました。
 
 
あらためて、これまでは、何か立ち行かなくなったとき、色々検索して、場合によってはstackoverflowとか日本語以外のサイトからも情報を得て、それでもダメなら諦めるしかありませんでした。
これからは、それに加えて、Time Machineで時を戻すという選択肢が増えました。
 
 

久しぶりにプログラミングをするときに、速攻で感覚を取り戻すやり方

 
 
別のことをやっていて、プログラミングから離れているということがよくあります。

また、しばらくAndroidアプリ開発を行っていて、久々にiPhoneアプリ開発を行うと、eclipseXcodeの使い方の違いや、JAVAobjective-cの文法の違いに戸惑うことがあります。

f:id:raptor36:20151204180735p:plain
 
 
そんなときに、短時間で感覚を取り戻す方法は、すごくシンプルです。

それは、自分が以前書いたコードを読むことです。
コードを書くときは、自分で使い方を理解した上で書きます。
そのため、一度自分の頭で理解したという経験があるため、コードを見るとそのときの感覚を思い出すことができるのです。


というわけで、久々にプログラミングしなければならないときは、完全に忘れたからどうしようと迷う前に、以前のコードを読むべきです!

以上、プログラミングから遠ざかったときの未来の自分に向けてのメッセージでした。

storyboadでカードUIっぽい背景にする方法

 
 
以前、storyboardを使ってそこそこ複雑なレイアウトを実現しました。
 raptor36.hateblo.jp


今回は、そのレイアウトをベースに、カードUIっぽい見た目にしたいと思います。
 
こういった感じにします。

f:id:raptor36:20151124104631p:plain:w200
 
もちろん、ライブラリとかでいいのがあれば、それを用いるのが一番簡単なのですが、ちょうどいいのが見つからなかったので、storyboardでレイアウトすることにしました。
 
また、storyboardの中をざっとみると、Containerをうまく使えば簡単にカードUIを実現できそうです。
ただ、Containerの使い方がいまいちよくわからなかったので、今の自分のレベルで思いつくやり方でやってみました。

カードUIぽくするときのポイント

 
今回重要なのは2点です。
1点目はviewを用意していく順番で、2点目はスクロールがうまくいくためのルールです。
 
 
前回はこのようにできました。
これをベースに変更していきます。
f:id:raptor36:20151121171530p:plain
 
 
最終的には、こういうレイアウトを目指します。
f:id:raptor36:20151124104625p:plain
 
これを実機で表示すると最初の画像のようになります。
f:id:raptor36:20151124104631p:plain:w200
 
 
これを実現するために、viewをつけていきます。
おおまかな順番としては、左、真ん中下、右にviewを設置し、あとは、真ん中の部分にviewをいくつか追加していきます。


左用のviewを貼ります。
f:id:raptor36:20151121171531p:plain


左に配置します。この辺のやり方は、前回の記事に書いてあります。
f:id:raptor36:20151121171532p:plain

真ん中下に配置します。
f:id:raptor36:20151121171539p:plain


右用のviewをはりつけます。
ここは、何も考えずにやるとうまくいかない場合ああるので、少し詳しく説明します。
f:id:raptor36:20151121171540p:plain

右用のviewの高さと幅は、左用のピンクのviewとイコールにしています。
そして、上はscrollviewに接地した制約をします。
f:id:raptor36:20151121171542p:plain

今度は左右の制約についてですが、右には何も制約をつけません。
左についてだけ、左に接地している黒い線のviewに接地した制約をします。
右に接地した制約をやるとレイアウトがなぜか崩れるからです。
f:id:raptor36:20151121171541p:plain
 
さらに、真ん中の黒viewの下に、緑viewを設置します。
f:id:raptor36:20151121171545p:plain
 
 
今度は、左右のピンクviewのbottomをscrollviewに接地した制約をします。
ここで、ものすごく大事なこととして、左右のピンクviewの高さについては、scrollviewと同じにするなどの制約を一切つけません。
左右のピンクviewの高さに何か制約をつけてしまうと、スクロールしなくなってしまいます。
これに気づかずに2時間くらいスクロールがうまくいきませんでした。
f:id:raptor36:20151121171546p:plain



ここからまた少し大事なので、少し詳しく説明します。

kaitourireki直下に黒と緑のviewを設置しましたが、同じような感じで、今度はkaisetsu下に黒viewと緑viewを設置します。
そのために、まずは黒viewをはりつけます。
サイズはkaitourireki直下の黒viewと同じ要領です。
f:id:raptor36:20151121171548p:plain

さらにkaisetsu直下の黒viewの下に緑viewをつけたいです。
そこで、緑viewを適当に貼り付けます。
f:id:raptor36:20151121171549p:plain
 
 
緑viewを、kaisetsu直下の黒viewの下に接地するためには、kaisetsu直下の黒viewと緑viewの間に何もないようにします。
こうしないと接地できません。
他のviewに重なっても大丈夫です。
そうしたら、緑viewをkaisetsu下の黒viewに接地する制約をします。
f:id:raptor36:20151121171550p:plain

こうして緑viewを黒viewの下に接地できましたが、このままだと緑viewがkaitourirekiにカブってしまっています。
f:id:raptor36:20151121171552p:plain
 
そこで、kaitourirekiを選んだ状態で、右側のカラムの中を修正してkaitourirekiとkaisetsuとの距離を50から200に広げます。
f:id:raptor36:20151121171553p:plain
 
広がりました。
f:id:raptor36:20151121171554p:plain


広がったら、kaitourirekiとkaisetsuの制約を消去して、新しく、kaisetsu下の緑viewに、kaitourirekiを接地する制約をします。
f:id:raptor36:20151121171558p:plain
 
 
この要領で、toi直下にも黒bviewと緑viewをつけていきます。
f:id:raptor36:20151121171609p:plain


ここまでできたら、toiの上に青viewを設置します。
やり方はだいたい今までと同じ感じです。
f:id:raptor36:20151121171616p:plain
 
 
さらに、label2つを問題のしたにつけたらレイアウトは出来上がりです。
左右の高さを少し修正しましたが、本篇には直接関係ありません。
f:id:raptor36:20151121171625p:plain
 
 
ここまできたら、あとは色を整えると、最初に提示した完成型になります。
f:id:raptor36:20151124104625p:plain

 
 
 
今回どうしてわざわざまとめたのかというと、カードUIを作りたい場合のviewを用意していく順番と、スクロールがうまくいくためのルールを書きたかったからです。
 
viewを用意する場合、左、真ん中、右に設置します。右、真ん中、左でも大丈夫です。
とにかく大事なのは、最初にviewを設置したら、そのviewに接地させた状態でレイアウトを追加していくことです。
そして、今回の真ん中のレイアウトのように、縦にたくさんレイアウトする場合は、下の方から設置していきます。
そうしないと、たくさんレイアウトしていった結果、下の方が見えなくなる可能性があるからです(今回は薄っぺらくしたので、全て画面上の見える範囲でできましたが。)

スクロールをうまくやるには、上下の接地に関して余計な制約をつけないことです。前回はそれについて書きました。
今回は、新たに、高さの制約をしてはいけないということです。
もちろん、高さを1000とかに制約すればスクロールできます。
しかし、もっと柔軟にしたい場合に、高さをscrollviewとイコールにしてしまうと、スクロールできません。
今回私は、左右のピンクviewの高さ(hight)をscrollviewとイコールにしてしまっていたために、スクロールできませんでした。
その高さの制約を外したとたんに、うまくスクロールできるようになりました。
この場合におそろしいのは、何が原因なのかヒントが全くないので、気づくのが困難ということです。
なので、scrollviewを使うときはお気をつけください。
 
 
 

QLOOKアクセス解析