ココナラで初めて質問を受け付けた話
こんばんは。ひろし@Y.C.LABです。
今日、目押しKINGがアップデートされました。
新たにランキング機能が追加されたので、世界チャンピオン目指して目押しを決めてください。
さて、そんな中、先日ココナラで初めて売り上げをあげることができました。
アプリ作成の疑問・質問にワンコインで答えます スマホアプリを自作していて困った時にご利用ください。
これ、人生の勝算を書いた前田裕二さんが言っていたことで、上達したいなら無理にでも教える側になってしまえということを見習って始めたことなんです。
ちなみに前田さんは英語が話せないのに英会話の先生になるというとんでもない方法で英語を習得したらしいです。
そんなことが書いてある人生の勝算めっちゃ面白いです。
で、本題だけど、今回ココナラで購入者の方とやり取りした内容を公開したいと思います。（了承を得ています）
「こんな感じでやり取りをしてるよ」ってのを見てもらえればココナラを使いやすくなるだろうし、何より、同じようなことで困っている人の助けになればいいなと思います。
それではスタート！
（購入者の方：Q、私の回答：A）
まずはスクリーンショットを送ってもらい、開発したいアプリの感じを確認。
Q：
何から始めればいいのかもいまいちわからないのですが、とりあえずキャラの立ち絵と背景のみは発注済みでしてその背景画像のサイズなどのご助言もいただきたく思います。
対応予定はiphonex系xmax系8系8plus系となっております。
A：
内容確認できました。
当初のご質問から順にお答えしたいと思います。
1.iosなどでいうuitabbarの様な物の実装方法やそれをシーンごとに共通して使う方法
unityでtabbarのようなものは、そのもので用意されていないと思いますので、私は、添付（回答１）のようにCanvas内にFooterというパネルを用意して、その中にボタンを子オブジェクトとして入れています。
このFooterを全てのシーンに入れることで、tabbarのような動作になります。
（回答１ ちなみにポスコレの開発画面）
2.アプリ全体で使用する画像のサイズやiphonex対応はどうすればいいのか
様々な画面サイズに対応させるため、Canvasの設定を添付（回答２）のようにあるサイズを指定し（今回の場合750x1334）Scale With Screen Sizeを指定し、Expandにしています。
色々なサイトでShirinkにしておけばいいという記述がありますが、iPhoneXのような縦長の画面に対応するにはExpandの方がいいと思います。
そして、そこに配置する画像は、全てCanvasのサイズに合わせて配置します。（今回の場合ですと750x1334です。）
あとは、配置した画像のInspector内の、Image内にあるPreserve Aspectにチェックを入れておけば、画像の縦横比が乱れることはありません。
（回答２ あとで追加説明してます）
3.ソシャゲの様なアプリの開発手順がよくわかりません(クライアントのみ)
今回、添付していただいたようなアプリですと、おみくじで出てくるものと、その先の画面の組み合わせを常に更新していかなければいけないと思いますので、unityのプロジェクト内に、その画面を登録していると、アップデートに追われることになると思います。
そこで、アプリ側は更新することなく、アプリから外部のサーバに問い合わせにいくようなシステムがいいと思います。（添付回答３少し雑ですみません。。）
（回答３ スピード重視のため雑です。。）
まずは上記ご確認いただき、さらにご質問あれば、よろしくお願いします。
A：
追加ですが、私の場合は、iPhone6のサイズで始めたために上記のような設定になっていますが、iPhone XのサイズでCanvasを作成（1125x2436）した場合は、Shrinkに設定すればいいと思います。
Q：
回答ありがとうございます。
1に関してはですがその子オブジェクト自体は画像をボタンにしたいのですが、設置時の方法はUIimageを使用してでしょうかそれともヒエラルキーに直接DDするのでしょうか？
またそのオブジェクト同士を等間隔かつ端末サイズが変わった時に自動で伸び縮みさせる方法はどうすればいいのでしょうか？
そしてそのできたパネル自体はそれぞれのシーンにコピペして使用するのでしょうか？
それだとシーンごとに毎回修正を入れないといけないのでしょうか？
２に関してはまだ理解が追いついていないので、質問が出てきたらまた後日伺ってもよろしいでしょうか？？
３に関してはサーバ側のapiや処理は出来上がっています。
画像はイメージでしたので、ガチャ時の演出はlive2dとunityのエフェクト？でどうにかしようと思っていました。
ですので、先ほどのプロトタイプみたいな物をどうやって実装していけばいいのか検討もつきませんでした。
当方クライアント側は全くの素人なので、どうやって綺麗なUIに仕上げられるかそもそもunityでの開発手法などを教えていただけたらなと思いました。
お手数ですがご回答よろしくお願いいたします。
Q：
いま手元で試してみたのですが、パネルにbuttonオブジェクトを配置し、そのボタンに画像を設定してみたのですが、このパネルごと最前面に表示固定させる方法はどうすればいいのでしょうか？
作ったものを別のシーンにコピーしたらbuttonオブジェクトが背後の方に行ってしまいました。
A：
１についてですが、設置時の方法はGameObject→UI→ImageでもGameObject→UI→Buttonでもいいと思いますが、私の場合は、まずImageで配置した後に、Footerパネルの子オブジェクトとし、InspectorのAdd ComponentからUI→Buttonを追加しています。
オブジェクト同士を等間隔に配置するには、パネルオブジェクトのサイズから位置を計算して、Rect TransformのPos Xで調整しています。
端末サイズが変わった時の伸び縮みは、前述のCanvasの設定によるので、まずはFooter用のPanelを画面幅（Canvasの幅）いっぱいにしておいて、そこにボタンを均等配置しておけば、端末サイズに追従できます。
また、Footerオブジェクト自体はコピペして各シーンに貼り付けることはできるのですが、ご指摘の通り、この方法ですと、何か変更や修正が出た時に全てのシーンで修正するまたはコピペし直す必要が出てきます。
３についてですが、UIについては、１や２の内容をご確認していただくとして、unityからサーバ側とのやり取りの仕方はもうご存知でしょうか。
私はPOSTを利用してデータのやり取りをしています。以下に参考ソースを載せておきます。
[Serializable]
public class MyClass
{
public string test; //サーバ側から返ってくるデータ用
}
private IEnumerator data(){ //ここでデータのやり取りをする
string url="http://hogehoge.php"; //URL指定
//データ送信準備
WWWForm wwwForm = new WWWForm();
wwwForm.AddField( "data1", data1 );
wwwForm.AddField( "data2", data2 ); //以下wwwForm.AddFieldでPOSTで送信するものを追加できます
//データを取得しにいく
WWW result = new WWW(url,wwwForm);
// レスポンスを待つ
yield return result;
MyClass myObject = JsonUtility.FromJson<MyClass>(result.text); //Jsonで返ってくるので変換。これでmyObject.testにサーバ側からのデータが入る。
}
こんな感じでPOSTによるデータのやり取りをしています。
以上ご確認よろしくお願いします。
（クライアント側の質問をされているのに変な答えになってしまった。この時点でだいたい深夜１時過ぎ）
A：
ボタンやパネルの表示順序ですが、Hierarchyの下の方のオブジェクトが前面に表示されるので、パネルごとCanvas内の一番下に持って来れば前面に表示されると思います。
ご確認よろしくお願いします。
Q：
サーバとの通信に関してはとくに問題はありません。
どちらかというとuiと画面遷移周りの開発手法が知りたいです。
またフッターオブジェクトをコピペする以外に同じオブジェクトをシーンごとで使い回す方法はないのでしょうか？
よろしくお願いいたします。
A：
フッターについては、例えば、シーンを変えずに、フッター上の画面を全てPanelで作ってしまって、フッターのボタンが押された時にPanelの表示のON,OFFの切り替えで実装することも考えられます。
ちなみにアクティブになっていないオブジェクトをアクティブにするには、その親オブジェクトから探すとできます。
GameObject.Find ("Canvas").transform.Find("Panel1").gameObject.SetActive (true);
みたいな感じです。
こうすればシーンをまたがずにフッター上部の画面を切り替えることができます。
いかがでしょうか。ご確認よろしくお願いします。
Q：
なるほど、だいぶ理解できてきました
では例えばですがcanvasの中にheader、複数のbody、fotterを設置して
このbodyを表示非表示で切り替えるということでしょうか？
またサンプル画像にあるようにポップアップウィンドウなどを表示する場合はどうすればいいのでしょうか？
ちなみによくあるソシャゲなどの画面遷移みたいなものは一つのシーンで表示非表示で分けているものなのでしょうか？
それとiPhonexなどのセーフエリアの実装方法も軽く教えていただきたいです
A：
おっしゃる通り、bodyの表示非表示で切り替えるということで実装できると思います。
ポップアップウィンドウなどの表示はまさにPanelを使用すれば実装できます。
よくあるソシャゲというのがどのように作られているのかはわかりません。ただ、unityでシーン遷移せずにPanelで切り替えるというのは私はよくやります。シーンが多くなるとハンドリングも悪くなるので。
Q：
ポップアップを表示した時フェードインで表示させた場合ポップアップウィンドウ内の文字や画像などはそれぞれにコードを書いてフェードインさせるのでしょうか？
またその手法だと作成時のシーン内のがごちゃついて開発がしにくくなるような気がするのですがいい方法などないでしょうか？
A：
まず、セーフエリアについてですが、正直そこまで際どいところにUIを配置していないので、あまり気にしていませんでした。
ちなみにBuild Setting内にStatus Barを表示するかなどのオプションはあります。（ちょっと話が違いますが）
フェードインについては、文字や画像などをポップアップするPanelの子オブジェクトにしておけば、Panelのフェードインに追従すると思います。
開発時は確かにごちゃごちゃしてしまうので、原始的ですが、Inspectorのすぐ下のチェックボックスをオフにして見えないようにしたりしています。
Q：
なるほど、大変参考になりました！
今持つ疑問に大体回答していただけたのでとても助かりました。
500円という安い値段でここまで親切に教えていただいきありがとうございました。
また、分からないことがあった場合質問させていただければ幸いです。
どうもありがとうございました。
最終的には深夜２時を回っていました。
みんな遅くまで頑張ってるんだなーと、負けてられないなと。
こんな感じで５００円という値段設定ながら、本気で質問に答えさせてもらってます。
是非アプリ作成で疑問・質問が出た際は、ココナラの出品をご利用ください。
また、今回の購入者の方とのやり取りの内容で、ここは違うんじゃない？ってとこがあればご指摘ください。
購入者の方にも展開させてもらいます。
よろしくお願いします！
