KazumaLab.

流行りとリラックマと嵐が大好きです。

Unity SteamVR Pluginのソースを読む Part1 導入

かずまです。

SteamVRPluginのソースを読みます。
そのメモです。
主にC#を理解できればいいかなってところです。

準備アセット

これです。
HTC Viveを持っていればこれをUnityに入れて動かすって感じです。

ここから気になったところをどんどん羅列して書いていく

SteamVR_Events.csでのイベント管理

// 189行目
static System.Collections.Generic.Dictionary<EVREventType, Event<VREvent_t>> systemEvents = new System.Collections.Generic.Dictionary<EVREventType, Event<VREvent_t>>();
	public static Event<VREvent_t> System(EVREventType eventType)
	{
		Event<VREvent_t> e;
		if (!systemEvents.TryGetValue(eventType, out e))
		{
			e = new Event<VREvent_t>();
			systemEvents.Add(eventType, e);
		}
		return e;
	}

Calibrationが有効になっているときとか、なった瞬間とかいろんなシステム側のイベントクラスになっているみたい。
Dictionaryを取り出す時にTryGetValueを使ったほうがKeyNotFoundExceptionよりも計算量的にも効率いいらしい。なるほど。

Dictionary.TryGetValue メソッド (System.Collections.Generic)

EventクラスがUnityEventを継承している

永続的にシーンにコールバックを追加できるらしい。
わざわざ毎回Callbackをセットしなくてもいいのか。便利。

確かにSteamControllerが有効になった時にいつでもCallbackが呼び出せるようにしておかないとだめか。
呼び出しはInvoke()で呼べる。

Unity - マニュアル: UnityEvent
Unity - スクリプトリファレンス: UnityEvent

SteamVR_TrackedObject.csでのトラッキングするオブジェクト

このスクリプトではMonoBehaviourを継承している。
そのためOnEnableやOnDisable()が使える。
この2つのメソッドはオブジェクトが有効になった時に呼び出されるCallcackになっている。

Unity - スクリプトリファレンス: MonoBehaviour.OnEnable()

// 74行目
newPosesAction.enabled = true;

newPosesActionは先程見たSteamEventsになる。

void Awake()
	{
		newPosesAction = SteamVR_Events.NewPosesAction(OnNewPoses);
	}

OnNewPosesというメソッドをActionに追加してオブジェクトを渡している。
ここの56行目あたりで、位置が取れそう。

  var pose = new SteamVR_Utils.RigidTransform(poses[i].mDeviceToAbsoluteTracking);
  if (origin != null)
    {
	transform.position = origin.transform.TransformPoint(pose.pos);
	transform.rotation = origin.rotation * pose.rot;
  } else {
	transform.localPosition = pose.pos;
	transform.localRotation = pose.rot;
}


ここのposeで値が取れそうな気がします。
次はSteam_Utils_SteamVR_Utils.RigidTransformを見ていこうと思いますが、
今日はここまで。
とりあえず、SteamControllerやTrackingするオブジェクトが
Steamに認識されたときに行われる部分までいきました。

以上です。

VM上のNginxからProxypassでMac上で起動しているRailsを動かすお話

かずまです。

お久しぶりです。
社会人になってはや3ヶ月、元気にやっております。
Rubyのエンジニアとしてどうにか勉強中です。


さて、今日はネットワークネタになります。
Ansibleを使ってVagrant上にNginxを起動し、ローカル環境のMacで動いているRailsを動かしてみようというお話です。
その時に詰まったのでメモしておきます。

Vagrant

www.vagrantup.com

簡単にMac上にVMを建てられます。
AnsibleやChef、Itamaeを使うと環境構築が一発にできます。

今回はCentos7を使って行きます。
Vagrant Fileにprivate ipをお忘れなく。

www.vagrantup.com
ちなみに、外からも見えるようにしたい場合はpublicを使うと良さそうです。

Nginx

静的なページを表示したりするWebサーバー。
RailsとかNodeJSはアプリケーションサーバーです。

今回の構造

f:id:kazumalab:20170628222948p:plain

あるPCからNginxのIPアドレスでアクセスして、それをNginxが受けて、Rails側にリクエストを送るという構造。
このボックス一つは一つのサーバーになっています。

ただし、今回は面倒なので、リクエストの送る先と受ける先を同じにするということです。

Nginxの設定

今回はインストールなどの導入は省きます。
Ansibleを使う場合は一度手動でサーバー構築してからやるほうが良さそうです。

とりあえず今回はdefault.confをいじることにします。
アクセスしたものをプロキシーパスでローカル環境のMacを指し示しているわけですね。

# on VM Terminal
# vim /etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;

    access_log  /var/log/nginx/log/host.access.log  main;
    error_log   /var/log/nginx/log/host.error.log;

    location / {
        # rails ip address in other server
        proxy_pass http://192.168.0.2:3000;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

一応、ミニマムな感じで書きました。
実際に運用する場合はヘッダーに色々記述する必要があると思いますので。

後はログは出力する設定にしたので、もしディレクトリがなければ生成してください。
権限はrootでも大丈夫なはずです。書き込み権限だけは与えてください。

proxy_passに自分のローカル環境のip + Railsを立ち上げたポートを記述しておきます。

Railsを立ち上げる

# on Mac Terminal
$ rails s -b 0.0.0.0

これで同じネットワーク内であればIPでアクセスが可能です。
一応、Macのip+ポート番号でアクセスできるか確認して、VM側でもCurlとかして確認すると良さそうです。
Headerのみ返す場合は

# on VM Terminal
$ curl --head http://192.168.0.2:3000

多分こんな感じだったはず。

アクセス時にPermissionがないといわれる

これでNginxを再起動してIPでアクセスしたところ、一応反応はあるけど502が返ってくるようになりました。
先程設定したログを見てみるとパーミッションでコケているらしいです。

# on VM Terminal
failed (13: Permission denied) while 
connecting to upstream, client: 192.168.0.2, server: localhost, request: "GET / HTTP/1.1", upstream:

ぐぐってみたところ似たような問題が!

stackoverflow.com

SELinuxがだめっていっているそうですね。
まぁそもそも違うサーバーにプロキシーで飛ばすのおかしいよというお話だと思いますが、とりあえず、動かすことが目的なので、
SELinuxをDisableにしてみます。
もちろんSELinuxにProxypassを有効にしてあげればいいのですが、その前にまず原因がSELinuxなのかを判別したかったのでとりあえずオフにしました。

# on VM Terminal
$ setenforce 0

これでNginxを介して、ローカルのRailsを動かすことに成功しました。

参考URLに書いてある感じで、止めるのではなくSELinuxの設定をすると良さそう。
以上です。

LINE SIMを契約してみました件。

かずまです。

今月全く更新していなかったようです。
Uniteに行ってきたよ!ぐらいしか報告できることはないです...笑

さて、今回はタイトルの通りLINE SIMを購入してみたというお話なので技術系ではありません。

LINE SIMとは?

今流行の格安SIMの一つで、株式会社LINEが手がけるサービスの一部になります。
ちなみにLINEの回し者ではありません。

ドコモのユーザーであれば今持っているスマホにSIMを差し込み簡単な設定をするだけで使えます。
同じくSIMフリー端末を持っているユーザーでも可能です。

特徴

値段が安い!

結論から言うとdocomo + LINE SIMで4500円になりました。(以前は9000円なので約半額)

docomoの回線を使っている

docomoの通信回線を借りているので、docomoが入る場所であればサクサクつながります。
回線が混雑している場合は除くそうです。

契約したもの

僕は音声通話はdocomoのカケホーダイを使っているので、データのみSIMプランを選択、
さらにInstagramFacebookTwitter、LINEはよく使うのでコミュニケーションプランの5GBにしました。

f:id:kazumalab:20170521212200p:plain
https://mobile.line.me/plan/communication-free/より


月額は1640円です。
初月はこれに400円のSIMカード発行料金がかかるそうです。

利点

これはかなり利点だと思います。
僕の場合TwitterInstagramはよく観るし、通信の割合としてもブラウザを見ている通信量よりも多いので
すごくうれしいです。なのでTwitterを見るだけであればずっと合計0バイトです。
ちなみに5GBを超えてしまった場合はWeb閲覧等は遅くなりますが、SNS系は速度は早いままです。便利!

  • 契約はWebからも店舗からもできる(即日渡しもあり)

僕はwebでやったのですが、うまく契約できず(保険証+補助書類でうまく契約できなかった)、結局店舗にいきました。
店頭で受付しているのは

mobile.line.me

ここでできるそうです。また、申込みをしてすぐに受け取れるのは

mobile.line.me
ここの店舗のみだそうです。
ちなみに僕はヨドバシカメラ秋葉原店に行ってきました。

即日渡しは20時までに申し込み完了しなければいけない

みたいです。
店舗で即日渡しを希望される方は19:00までに行くといいと思います。

  • 契約情報などがLINE上で見られる

LINE Mobileの公式アカウントとお友達になると契約情報を確認したりできます。

f:id:kazumalab:20170521213746p:plain:w300
これはかなり便利です。リアルタイムで見られます。

f:id:kazumalab:20170521213820p:plain:w300
ここからサイトに飛んで詳細情報も確認できます。

  • LINEポイントがたまる

毎月使用料金が請求されると思います。
その金額の100円につき1ポイントはいるそうです。

何ヶ月かするとスタンプなど買えますね。

注意点

Webブラウザから見る公式のTwitterInstagramのカウントされない(言ってた気がする)

Messengerや非公式のTwitterクライアントはカウントされる

支払いはクレジットカードのみ

僕みたいにdocomo+LINE SIMだとスマホが2台もつかデュアルシムの端末が必要

UnityのTerrainで地形を自動生成させてみた!

かずまです。

そろそろ5月、6月も近づいてきました。
6月といえばそう、ゲーム大賞です。

awards.cesa.or.jp

出たい、ただそれだけです。
なので一部ずつ作って行かねば行けませんね。

今日のお題

みんなだいすき、「Terrain」の話題です。
Terrainは結構重いと評判のようです。

さて前にこんな記事を拝見しました。

kan-kikuchi.hatenablog.com
これは単純なブロックで展開しています。
それをごっそりTerrainに置き換えてしまおうということです。

Perlin Noise

Generate 2D Perlin noise.

Perlin noise is a pseudo-random pattern of float values generated across a 2D plane (although the technique does generalise to three or more dimensions, this is not implemented in Unity). The noise does not contain a completely random value at each point but rather consists of "waves" whose values gradually increase and decrease across the pattern. The noise can be used as the basis for texture effects but also for animation, generating terrain heightmaps and many other things.[1]

波の様なものを生成してくれるそう。
しかもただランダムなだけでないみたいですね。
ココらへん勝手にやってくれるあたりC#優しい。

PerlinNoise Terrainでググってみたところ、
...お、日本語の記事が全然ないじゃ~ん!ってことで書いちゃいます。

まぁ、リファレンス読めばできるっしょ!って話みたいなんですが。

TerrainのAPIを読む

正直PerlinNoiseは値を入れてそれに対してシード値を与えて上げるだけなのでサンプルコードをまるまる取ってきてもOKみたいなところがあります。

ここで重要なのはTerrainのAPIをどう使うかです。

重要なクラス

TerrainDataクラス

Terrainを構成している部分になります。
こいつから波形などを生み出しています。

SplatPrototypeクラス

これはTerrainに反映するテクスチャを表すものになります。
インスタンス作って、Texture2Dを渡してあげて、TerrainDateのSplatPrototypeに渡す必要があります。
後に説明。

重要なメソッド

terrainData.SetHeights(int, int, float[,])メソッド

terrainDataのインスタンスメソッドです。
前半2つの引数はどの位置から始めるかというものです。
float[,]が厄介なのですが、これはx,y座標番目の高さを表しています。

ちょっとむずーい。
前回やろうとした時にここで躓いた。

terrainData.SetAlphamaps (int, int, float[,,])メソッド

terrainDataのインスタンスメソッドです。
これも厄介。特にfloat[,,]が。
x,y座標番目になんのTextureが入っているかを表すものです。

このTextureの配列をどう渡すの?かというと、先程説明したSplatPrototypeを使います。
ここにtextureを登録して、terrainDataにセットするとその番号によってTextureが呼ばれます。

さらに紐解くと、terrainDataがSplatPrototypeを受け取るのは複数つまり配列で渡してくれと言っています。
その観点から行くとメソッドを間に挟んであげるといいかもですね。

// TerrainController.cs

public SplatPrototype[] getSplatProttypes (Texture2D[] texs) {
		SplatPrototype[] splayPrototypes = new SplatPrototype[texs.Length];

		for (int i = 0; i < texs.Length; i++) {
			splayPrototypes [i] = new SplatPrototype ();
			splayPrototypes [i].tileSize = Vector2.one;
			splayPrototypes [i].texture = texs [i];
		}

		return splayPrototypes;
	}

もうわからなくなってきましたね。
では次に行きましょう。

その作ったのを受取ます。データサイズは面倒なので一緒にしておきます。

// TerrainController.cs

terrainData.alphamapResolution = 33;
terrainData.heightmapResolution = 33;

terrainData.splatPrototypes = getSplatProttypes (textures);

これであとはSplatPrototypeで高さが決まったらTextureの色を高さに合わせて変えて上げればOKです。
それもメソッドで用意してあげます。

// TerrainController.cs
private int getTextureIndex (float height) {
		if (height < 0.3f)
			return 0;
		if (height >= 0.3f && height < 0.6f)
			return 1;
		if (height >= 0.6)
			return 2;
		return 1;
}

heightのパラメーターの中身はご自由に!
Texture3枚だとこのままで動きますが、5枚とかになる場合はgetTextureIndexも変更してください。
ほんとは可変させたい感。笑

Github

ちなみにgithubにもありますのでそちらもCloneすると使えます。
github.com
それを動かすとこんな感じになります。

動かしてみた

f:id:kazumalab:20170425001838g:plain
おぉー動きました。
Coroutineを使っているのでリアルタイム生成みたいになってます。

Partynote

これから結婚式の季節?!ですので。
party.mwed.jp
めっちゃ投稿簡単なのでぜひ。

hamlを導入し、マテリアルデザインについて学んでみた!

かずまです。

今日は東京ドームでプロ野球観戦をしてきました。
控えめに言って最高でした。

すごい、ジャビットくんとトラッキーのバク転!

さてさて本題へ行きます。
今回は今まで導入を怠っていたhamlの導入を行いました。
それに加え、Googleがものすごい推しているマテリアルデザインについて学ぼうということでRailsの新たなプロジェクトを立ち上げ、
ぱちぱちコードを書いていました。

hamlについて

Haml』とは簡単にいうとHTMLをより簡単に書くためのビューテンプレートエンジンです。
これをつかいこなせるようになるとHTMLよりもシンプルに記述できます。[1]

確かに見た目はすごくシンプルなのでこれは!と思っていたのですが、html.erbから抜け出せず...今の今になってしまいました。

ちなみにhamlをもっとシンプルにしたものでslimというものもあるそうです。[3]

例えばですが、Contents一覧ページを作ろうとした時にhamlを使うとこうなります。

.row
  - @contents.each do |content|
    .col.s12.m6
      .card
        .card-image
          %img{:src => "http://materializecss.com/images/sample-1.jpg"}/
          %span.card-title= content.name
          %a.btn-floating.halfway-fab.waves-effect.waves-light.red
            %i.material-icons add
        .card-content
          %p= content.memo
        .card-action
          %a{:href => "#{content.url}"} This is a link

インデントで識別されるのでちょっとpythonっぽいですね。

divが省略できる

普段良く使うdivタグですが、hamlでは省略出来ます。
.cardとか、.rowみたいな感じ。

Rubyをコードに入れるときは=をつける、もしくは#{}を使う

erbだと<%= %>でしたが、=とか#{}とかで書けるのでタイプ数が減って便利です。
あとはendが必要ないので楽。

Javascriptの生コードを書く場合

:javascript
  $(document) {

  }

これで変換してくれます。便利。
hamlいいですね。はじめはSyntax Errorでメンド!!と思ってましたが、慣れて来るともうerbには戻れない...です。

マテリアルデザインについて

マテリアルデザインの説明が結構複雑かもしれないのでここは引用でわかりやすいものを貼っておきます。
matome.naver.jp

よく動く

ボタンが特徴的!

操作に対してのレスポンス

Googleのアプリケーションはほとんどマテリアルデザインを使用しています。
f:id:kazumalab:20170424015815p:plain:w200
上の写真はストリートビューアプリ。

Googleガイドラインを出しています。
Introduction - Material design - Material design guidelines


今回使うのはマテリアルデザインのガイドラインにそって作られたCSSフレームワークを導入します。

materializecss.com

materializecssです。
ちょっとシンプルすぎるかなとも思いましたがまぁ初心者の僕にはこれが優しいかと...!

色々試してます。

ちょっと気になる文献

morizyun.github.io