2016-12-26

【Unity】BestHTTP(PRO)を触ってみた

Unity Tech

いやー、ここのところ忙しさとめんどい私用と体調不良で、
バタバタしすぎてバタコさんになりそうな年の瀬の今日この頃です。
はい、ちょっとだけやさしいUnityが書けてない言い訳です。。。orz

今回はタイトルの通り、BestHTTPを仕事で使ったので、
ちょっと書いておこうと思いマウス！

BestHTTPって何？

BestHTTPを見てね！
$60ですって！>< 高い。。いかつい。。orz
まーけど、REST、WebSocket、Socket.IO、SignalR、Server-Sentここらへんが結構いい感じに使えるぽいので、
これ一回買えばあとは楽チンになるので、
買って損はなさそうな気しかしてません！！多分ww
(まだ、全然全部見てないし、そんなに使ってないからそこまでまだ言えないww)

BestHTTPってどー？

んー、実装して思ったのは意外と簡単に導入できた印象です。
WWWとかWebClientとか結局いじらなダメじゃん。。
(UnityWebRequestはまだちゃんと見てないしorz)みたいな感じになるんですが、
さすが、有料ですね！全然スっとそのまま使えましたね。
どんな感じで実装できるかは、ここ見てね！
見た感じ簡単でしょ？カスタマイズもすぐできそうだし、こいつは使えそうだ！！

ちょっと使いやすくしてみた

いやはや簡単でとてもいいのですが、ちょっと物足りない気がしたので、
よく使うGetとPostを使いやすく且つ可読性高くしたいと思い改良？してみました。
ちょっとUniRxに興味があったので、UniRxのObservableWWW風にしてみた。(とゆーかまんまw)

うわ。。意外と長くなってもうた。。
まーいーか。
こんな感じで簡単に使えるようにしてみましたー！！
(わかりやすいようにいろいろ端折って簡単に書いてみましたが。実際はもっとごにょってます)

ハマったとこ

ちょっとまだそこまで使っていないので、特にハマりポイントはまだ来てないですねー。
これからもっといろいろ触ってみたら出てくると思うので、
その時にまたBestHTTPに関して書こうと思いますー
UnityWebRequestもまだちゃんと見てないので、そこ含め書けたら良いなーと。多分書かないなww

今AssetBundle周りを調べて作ってるので、
次はAssetBundle周りの事かちょっとだけやさしいUnityの続きを書きますー

ちょっと落ち着いたら一気に連載系は終わらせます＞＜
がんばりマウス。。
ちゅーちゅー

2016-11-28

【Unity】ちょっとだけやさしいUnity #2

Unity Tech Tutorial

はい。という事で(どうゆうこっちゃねん)今回はUI作っていきましょうかねー
見た目を作っちゃいましょー！！

前回までで、とりあえずUnityをインストールして、Projectを作成して、
Sceneまではできましたね！！
そしたらUIを作成していきませう。

さて今回のアプリはどんな画面が必要でしょうかね？？
考えていきましょー！！

どんな画面が必要？

まずはこのアプリでしたいことは

・SNSと連携したいですねー
・SNSのフィード(タイムライン)が見たいですねー
・SNSに投稿したいですねー

とりあえずはこんな感じですかね！

では、上記で考えると必要な画面は、

・設定画面　：SNS認証だったりログイン状態管理画面
・ホーム画面：フィード(タイムライン)画面
・投稿画面　：投稿！！

の、上記3画面が必要ですね！！

これらを踏まえて画面を早速作っていきましょー！！
とはいえ、一気にいろいろってのもあれがあれであれなんで、
とりあえず、全体の基本になる下地の画面だけ作っていきましょー！！

UI作成の前に準備しよー！！

まずは何はともあれ「File」>「Build Settings」を開きませう
そしたら、PlatformがPCになってると思うので、「Android」を選択して下の「Switch Platform」を押しましょー！！

はい、切り替えれましたねー

そしたら次に作業するにあたっての画面のアスペクト比を設定しましょー！
「Game」タブを開いてとりあえず縦持ちの画面になるアス比を選択してくださいー
最近、多いので、一旦1080*1920にでもしときましょうかねー。
多分無いので、一番下のプラスボタンから作成してくださいー

f:id:ado3s:20161128024329p:plain

できたら、こんな感じで指定してね！

はい、おkそーですねー

できたら、次にHierarchyにある「Main Camera」をクリックしてInspectorを開いてくださいー
この中のサイズを「960」に変更してくださいー
// 1920(縦サイズ) / 2 の値ですー。(気になったら調べてねw)

f:id:ado3s:20161128011920p:plain

はい、大まかな下準備はできましたね

UIを作ろー！！

では、作っていきましょー！

Hierarchy上で、右クリックして「Create」>「UI」>「Canvas」を押してCanvasを作成して名前を「Base」にリネームしてくださいー
「Canvas」を作成すると「Event Systems」なんてオブジェクトも一緒にできますが、まー気にしないでください。
そしたら、「Base」をクリックしてInspectorを開きましょー

Canvas Componentの
RenderMode を「Screen Space - Camera」
RenderCamera に Hierarchy上のMainCameraをドラッグアンドドロップ

CanvasScalerの
UI Scale Mode を「Scale With Screen Size」
Reference Resolution を「X:1080」「 Y:1920」
Matchを「１」にしてね

f:id:ado3s:20161128012603p:plain

次に「Base」を右クリックして、「Create」>「UI」>「Image」で作成して、名前を「Body」にリネームしちゃってくださいー

そしたら、下の方にタブでも作りましょうかねー！
タブにつけるアイコンがほしいので、
ここからダウンロードしちゃいましょ！！

とれたら「Conn」フォルダに下のイメージのようにフォルダを作成してぶっこみましょー！！

f:id:ado3s:20161128022839p:plain

ぶっこんだら今度はこのイメージをクリックしてInspectorを開いてね！！
SpriteMode を「Multiple」
Pixels Per Unit を「1」にして、SpriteEditorボタンを押してね！
出てきた画面の左上にSliceってのがあるので、特には変更しないで「Slice」してくださいー！！

おｋですかねー。

そしたら、「Body」で右クリックして「Panel」を追加して「Footer」にリネームしましょー
そしたらその「Footer」で下のイメージみたいにボタン(Button)とボーダー(Image)を配置してね！！
ちょっと考えて作ってみてね♪(べ、別にめんどくなったわけじゃないんだからね！！)

f:id:ado3s:20161128023608p:plain

とりあえずホーム(フィード)画面と設定画面の切り替えができるであろう感じになりましたね！！

まーこんな感じでとりあえずベースは出来上がりですね！
このキャンバスがいろんな画面のベースになりますよー！！
ベースができたので、今回は一旦ここまでですかね。

次は細かくどーゆー出力が必要か見て行きましょう！

更新頻度なるべく早くできるようにちゃちゃっと作れるようにがんばりマウス
ちゅーちゅー

2016-11-21

【Unity】ちょっとだけやさしいUnity #1

Unity Tech Tutorial

第一回の今回はインストールをして、プロジェクトを作って、シーンの作成までやりまっしょい！
って感じでちょこちょこ作っていきましょー！！

Unityをインストールしよう！！

まずは、ここからインストーラをダウンロードしてね。
プラン何種類かあるけど、とりあえず無料のPersonalで遊びましょう！！

ダウンロードしたら、インストールしてね！
よくやっちゃうのが、

f:id:ado3s:20161113225124p:plain

Visual Studio Tools、Android Build Support、iOS Build Supportチェックしないで入れちゃうから気を付けて！！
インストールが終わってUnityを起動すると、

f:id:ado3s:20161113230720p:plain

こんな画面が出てくるので、Signinして始めましょー！
上のcreate oneってリンクを押せばアカウント作成ページに飛ぶので、ない人は適当に作ってくださいー。

Projectを作ろう！！

んじゃー、Projectを作りましょー
Signinしたら右上にあるNEWを押しませう

今回はSNS連携で何となくConnectってイメージなので、
Project name は Conn にしましょう！(センスないとか言わない！)
Locationは好きなところでいいですよー
んで、今回は2Dなので、2Dにして、
右下のCreate projectを押しませう

f:id:ado3s:20161114015321p:plain

はい！Project作れましたね！！

f:id:ado3s:20161114015910p:plain

やったね！！

Sceneを作ろう！！

では、Project作れたので、早速Sceneを作りましょう！

まずは下のイメージみたいにAssets下にフォルダを作成してください。

f:id:ado3s:20161114020355p:plain

作成したらそのフォルダの中にSceneを作成します。
右クリックで「Create」>「Scene」で作成したら名前を「New Scene」から「Main」に変更してくださいー

これでSceneの作成もできましたね！！

とりあえず今回はここまでにしませう。
次回はSwitch PlatformだったりCameraの設定だったりやっていきましょー

なるべく早めに次回分書きマウス
ちゅーちゅー

2016-11-20

【Unity】ちょっとだけやさしいUnity #0

Unity Tech Tutorial

と、いう事で(どうゆうこっちゃねん)ちょっといろいろ思うことがあり、
書籍とかでよくある導入からとりあえずアプリ1本作っちゃお！的なことを書いていこうかと思いマウス。
書籍だけじゃわからないところとかをちょっとでも補完できれば幸いでござる。
タイトルも書籍によくありそうなタイトルにしてみましたw
けど、あくまでオレオレスタイルで書いていくので良かったら参考にしてねって感じで見てくださいー
あと、こまいところの説明は基本的にしません！！ww
(なので、ちょっとだけやさしいにしてますー)

あ、環境はWindows10でUnity5.4.2f2(書いてる時最新)でやろうと思いますー

想定対象の方

Unity始めたor始めたい！書籍を読みだした！ブランクあるからリハビリしたい！
他の人ってどうやって作ってるの？って感じの方たち向け

どんなアプリ作るの？

ねー、どんなアプリを作りましょうかねー。。
とりあえずゲーム作りたい人がUnity触ってるはずなので、ゲーム作りましょうかねー
うーん、でもこの連載サクッと終わらせたいから何かユーティルなアプリにしようかなー
せっかくこの前SNS連携ちょっと触ったからSNS連携のアプリでも作りましょうかね。
つぶやいたり、投稿見れたりみたいな、そんなん作りながらやっていきませう。

今回の目標

アプリを１個作ろう！！

そしたら下記の事がきっとわかるはず

・UnityのインストールからどうやってUnityでアプリを作るかがわかるはず
・アセットをUnityに組み込む方法がわかるはず
・SNS連携のしかたがわかるはず

大まかにはこんくらいかな？

今回はWWWやWebClientとかのネットワーク系は触らないです。
サーバサイドまで含めてやるのはちょっとめんどいのでorz

とりあえず次回から始めてみよう！そうしよう！！
インストールからプロジェクト作成してシーンを作成までやりませう！

ブログって自分との戦いでもあるので、がんばりマウス
ちゅーちゅー

2016-11-10

【Unity】iTween触ってみた

Unity Tech

前に書いたSNS認証周りの時のプロジェクトにiTweenが入ってたので、触ってみたー

iTweenとは

iTweenはPixel Placementってとこが作ってるアセット。
アニメーションがとても楽に実装できまっせーっていう代物！
大体のさせたいアニメーションのメソッドがあるので、実装するのがとても楽！！
設定値をこっちで適宜変更してあげるだけなので、使い方わかったらとても簡単で感動しマウス。

今回の概要

まー今回2Dなんですが、画面遷移時にアニメーションで画面遷移させたいってことで、使いました。
コンテンツも少なかったので1SceneでベースのCanvasを置いて、
その子要素に複数Canvasを作って子要素の各Canvasをアニメーションで入れ替えるって感じ。

ex:)
MainView(Canvas) -> DetailView(Canvas)でiTween.MoveToする感じ

Unityにいれよう

UnityAssetStoreからiTweenをインポートしませう。
ザ・これだけ！！wwめっちゃ楽！
基本的にnamespaceないし、staticなんで、どこでもiTween.○○で使えちゃうよー。

動きの種類

移動、回転、拡縮、色、音とかもうホントにいろいろある。
とにかく、いっぱいある。。ホントにそんなにあっても使わんがな！ってくらい。
ちょっとめんどいので、こちらを参照してくださいー。
ちなみにEaseTypeの参考はここがめっちゃわかりやすくてステキでしたー。

ザ・実装

実装といってもただ設定値を設定するだけなので、実装ってほどでもないけど、
今回自分が実装した雰囲気を書いてみようかしら。
あくまでこんな感じって程度だけど。
一番上の今回の概要を見てから見てね。

とりあえず、今回はiTweenのアニメーションは1種類しか使ってないので、
メソッドを後で改修とかやりやすくするためViewUtilみたいなファイルにメソッドを書いた。
んで、画面側Scriptからそのメソッドを呼び出すって感じ。

// ViewUtil.cs

public class ViewUtil
{
    // 画面遷移
    public static void ChangeView(
        GameObject gObj, Transform parent, string prefabPath, string method)
    {
        var position = new Vector3(-2000f, 0);
        var view = GameObject.Instantiate(
            Resources.Load(prefabPath)
            , position
            , Quaternion.identity) as GameObject;

        view.transform.SetParent(parent, false);

        iTween.MoveTo(view, iTween.Hash(
            "x", 0,
            "y", 0,
            "easeType", "easeOutExpo",
            "delay", .1,
            "oncomplete", method,
            "oncompletetarget", gObj));
    }

    // 画面遷移後
    public static void ChangeViewComplete(GameObject gObj)
    {
        GameObject.Destroy(gObj);
    }
}

とりあえず上記の感じでメソッドを作っておく。

一応説明すると遷移先Canvasをx＝-2000fでInstantiateして、
iTween.MoveToでx＝0まで移動させるってことでござる。
(今回横画面でござる)

Scene上に複数Canvasを出しておきたくないので、
遷移先CanvasをInstantiateして、iTweenで移動させる。
んで、遷移先Canvasが移動完了後(アニメーション終了後)に、
遷移前CanvasをDestroyする。
↓Hierarchy上での感じ

１．Base
　　　MainView
↓
２．Base
　　　DetailView
　　　MainView
↓
３．Base
　　　DetailView

んで、呼び出し元が、

// MainView.cs

public class MainView : MonoBehaviour
{

    void Start ()
    {
        var btn = transform.FindChild("DetailButton").GetComponent<Button>();
        btn.onClick.AddListener(ChangeView);
    }

    // 画面遷移
    private void ChangeView()
    {
        ViewUtil.ChangeView(
            gameObject
            , transform.root
            , "Prefabs/DetailView"
            , "MoveComplete");
    }

    // 画面遷移完了後
    private void MoveComplete()
    {
        ViewUtil.ChangeViewComplete(gameObject);
    }

}

呼び出し元はこんな感じでござる。
これでいろんなとこで画面遷移するときはこれ書けばおｋなので、楽ですね！
ViewUtilみたいな感じでメソッド書いておけば後々幸せになります。

ハマったとこ

今回はハマるとこがホントになくてとても簡単に実装できましたー！！
とにかく簡単で、楽させてもらいました！楽な割に実装したら喜んでもらえたので、
こいつは今後もちょいちょいお付き合いさせてもらおうかと思っておりマウスww

いやー、iTweenとても楽で良いですねー。便利ですね！！

また何か思いつき次第、書きマウス
ちゅーちゅー

2016-11-08

【Unity】Fabric(Twitter Kit)導入のしかた

Unity Tech

前回と同じでTwitter認証でログインできるようにしてくれーとのことで、
こっちも対応したので、書いておきマウス。
※Twitterアプリは既に作成済みの前提で書きます
 ※Fabric登録も済んでる前提で書きますので、あしからず

今回の概要

Facebookの時と同じでござる。
Twitterアカウントで登録できるサイトがあり、
アプリの方でそのTwitterアカウントを使用して
登録したユーザIDで情報を取ってくる。

Unityに入れよう

今回はFabricでTwitterKitを使用するので、TwitterKitをインポートしませう。
Unityのメニューに「Fabric」ができてると思うので、
そこから「Prepare Fabric」を押して、登録したアカウント情報を入力しましょう。
そんで、Twitterを選択してインポートしマウス。

App情報を設定

Assetsフォルダ下に「Editor Default Resources」というフォルダがあるので、
「Fabric Settings」を押してTwitterのKeyとSecretを設定しマウス。

ザ・実装

とりあえず、↑の感じで書けばユーザIDとってごにょごにょできマウス。
ちょー簡単ですね！！

と、見せかけて上の感じだけだと全然動かなかったorz
調べても全然どこにも記載されてなくてだいぶハマったある。。
「Fabric」>「Kits」>「Twitter」>「Runtime」の中の「TwitterInit」を
対象シーンに置いておかないとダメっぽい。(誰か書いておいてくれよ。。)

TwitterInitをSceneに置いたら動いたー！！！ヤッホーイ！！！
って喜んだら、iPhoneで動かなかったorz
なぜじゃー。。と、調べたり、xcodeでログとったら、
Twitterアプリ側でコールバックURL設定してなかっただけだったwww

ハマったとこ

・実装したのに、全然動かないやん。。
　→対象シーンにTwitterInitを配置

・TwitterInit置いたのにiPhoneで全然動かないやん。。
　→Twitterアプリ側でコールバックURLを設定

くらいかなー

とりあえず、また何か思いついたら書きマウス。
ちゅーちゅー

2016-11-07

【Unity】Facebook SDK導入のしかた

Unity Tech

仕事でFacebook認証でログインできるようにしてくれーとのことで、
今回導入してみたので、忘れる前に書いておこう、そうしよう！
※Unityへの導入の仕方なので、FacebookDeveloperでのアプリ作成とかは割愛しマウス。

今回の概要

WebでFacebookアカウントで登録できるサイトがあり、
アプリの方でそのFacebookアカウントを使用して登録したユーザIDで情報を取ってくる
書いてて思ったけど、これログインじゃなくね？ん？ログインか。よくわからなくなってきたw

Unityに入れる

UnityのAssetStoreからFacebookSDKをインポートしませう。
Facebookだけで良いと思いますが、必要なら適宜Exampleも入れてくださいー

App情報を設定

インポート終わったらUnityのメニューに「Facebook」が追加されてるので、
そこから「Edit Settings」押して、AppNameとAppIdを設定しちゃってくださいー
Android Build Facebook SettingsのDebug Android Key Hashが空欄の場合は
OpenSSLいれてからここ見てくださいー
結構ハマる人が多い気がする。。というか自分がハマったww

ザ・実装

とりあえず、↑の感じで書けばユーザIDとってごにょごにょできマウス。
ちょー簡単ですね！！

ハマったとこ

・ Android Debug Key HashがUnityに出てこねーじゃん。。
　→ OpenSSLをいれてからここ見てくださいー

・ユーザIDでDBから情報引っ張れないやん。。
　→ WebとNativeで別々で作業していたため、アプリを2個作ってテストしてたので、
　　ユーザIDが一致しなかったorz

くらいかなー

この時にTwitterアカウントで同じことしたので、次はTwitterの導入を書きマウス。
ちゅーちゅー

ザ・ゆるふわ

nora fullstack engineer

NFE ado3s blog

【Unity】BestHTTP(PRO)を触ってみた

BestHTTPって何？

BestHTTPってどー？

ちょっと使いやすくしてみた

ハマったとこ

【Unity】ちょっとだけやさしいUnity #2

どんな画面が必要？

UI作成の前に準備しよー！！

UIを作ろー！！

【Unity】ちょっとだけやさしいUnity #1

Unityをインストールしよう！！

Projectを作ろう！！

Sceneを作ろう！！

【Unity】ちょっとだけやさしいUnity #0

想定対象の方

どんなアプリ作るの？

今回の目標

【Unity】iTween触ってみた

iTweenとは

今回の概要

Unityにいれよう

動きの種類

ザ・実装

ハマったとこ

【Unity】Fabric(Twitter Kit)導入のしかた

今回の概要

Unityに入れよう

App情報を設定

ザ・実装

ハマったとこ

【Unity】Facebook SDK導入のしかた

今回の概要

Unityに入れる

App情報を設定

ザ・実装

ハマったとこ