kazumalab tech log

流行りとリラックマと嵐が大好きです。技術的ログ。

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

RailsのプロジェクトにRSpecを導入したお話

かずまです。

前回の記事で徳島を紹介するサイトを作ったお話をしました。
今回はそのRailsプロジェクトにテストコードを書いていこうということでRSpecを導入しました。

RSpec

github.com

Ruby用のGemもありますが、今回はRailsのプロジェクトということrails_rspecをインストールします。
Gemfileの中に書いてbundle installです。

忘れないうちにrspecの初期化をやっておきます。

$ rails g rspec:install

ちなみにテスト用のデータベースを用意する必要があるので、MySQLを使っている方などはRakeでRAILS_ENV=testを指定して作って上げる必要があります。

qiita.com
そこら辺はここを参考にするといいかも。

あとはGoogleで"rails mysql env"とかで検索すると情報が出てきますね。

テスト用のテストコードを書く

RSpecをインストールされるとspecディレクトリが出来ています。
ここにディレクトリを作成してRSpecのコードをカタカタ打っていきます。

ひとまずサンプルコードを書きたいと思います。
まずは言語のはじめに必ず書くとされる"Hello world!!"を出力してみます。

require 'rails_helper'

RSpec.describe ApplicationHelper, :type => 'helper' do
  describe "sample spec" do
    it "should print" do
      p "Hello World!!"
    end
  end
end 

いいですね。これで後は

rspec spec/sample/sample_spec.rb

ここで僕の場合、以下の様なwarningが...

DEPRECATION WARNING: alias_method_chain is deprecated. Please, use Module#prepend instead. From module, you can access the original method using super. (called from <top (required)> at /Users/kazuma/Documents/github/Prefecture/config/environment.rb:5)
DEPRECATION WARNING: alias_method_chain is deprecated. Please, use Module#prepend instead. From module, you can access the original method using super. (called from <top (required)> at /Users/kazuma/Documents/github/Prefecture/config/environment.rb:5)

これはググったところ、Rails5がサポートしていないGemがあるそうで、その警告でした。
まぁ警告してくれるのはありがたいですが毎回出るのは面倒なので切っておきます。

書くのはconfig/application.rb

ActiveSupport::Deprecation.silenced = true

これで消えました...!
あとは色々書いていくんですね。

Controllerのテストを書いてみる

今回はPictureという名前のモデルを使います。
そのPicturesControllerをテストします。

まずはRSpecのコード。

require 'rails_helper'
RSpec.describe PicturesController, :type => :controller do
  describe "GET #index" do
    it "respons success with an http 200 status code" do
      get :index
      expect(response).to be_success
    end

    it "renders the index template" do
      get :index
      expect(response).to render_template("index")
    end
  end
end

itの後ろは目的を書くらしいです。
何をするためのテストか?みたいな。

後は動作した結果、こうなってほしいというのを書くだけですね。
今回だとindexのレスポンスのステータスが200だと嬉しいよねってことでhave_http_status(200)です。

やる動作とそれに対応する返ってきてほしいものをit ... endの間に書くんでしょうね。

これはサンプルとか結構出回ってるので書いたという問題ではないけど....。
ちなみにここらへんを見るといっぱい書いてます。

File: README — Documentation for rspec-rails (3.6.0)

そんでRspecで叩く!

$ rspec spec/controllers/pictures_controller_spec.rb

Failures:

  1) PicturesController GET #index renders the index template
     Failure/Error: expect(response).to render_template("index")
     
     NoMethodError:
       assert_template has been extracted to a gem. To continue using it,
               add `gem 'rails-controller-testing'` to your Gemfile.
     # ./spec/controllers/pictures_controller_spec.rb:12:in `block (3 levels) in <top (required)>'

Finished in 0.0513 seconds (files took 3.57 seconds to load)
2 examples, 1 failure

Failed examples:

rspec ./spec/controllers/pictures_controller_spec.rb:10 # PicturesController GET #index renders the index template

エラった、なんかgem rails-controller-testingを入れろ見たいなことを書いてますね。
念のためググって見る。

github.com
Readmeに書いてある、更にこっちも

github.com
Issueでも解決してるっぽい。

これを使ってみる。
Gemfileにgem rails-controller-testingを入れてbundle!!
localにも入れてもいいかも...と思ったけどまぁ今回は止めておくことにします。

入れ終わったら、今度こそ!

..

Finished in 0.06619 seconds (files took 2.64 seconds to load)
2 examples, 0 failures

通ったぽい!
これでガリガリテストも書けますね!

まとめ

すごく簡単に単体のテストができました。
次の課題としては一連の流れのテストと自動化ですね。

サービスとしてはテストの通ったものだけを入れたいので、CircleCIを使って検証します。

ついでにコード規約用のRubocopも導入してみました。
参考にしたURLはこちら。
qiita.com

最後に徳島を紹介するサービスはこちら!

tokushima.sinariovr.com

オープンデータとかも使っています。

余談

機械学習を始めようと思ってpyenv入れたり、pipでTensorflowとか入れてみたけどいまいち方法がわからなくてあたふたしてます。
Unityでゼルダも途中で終わっちゃってるので遺伝的アルゴリズムとかで最強の敵を作ったりしてもいいかなーと思って試行錯誤してる最中です。

時間かかりそうです。

RubyでOpenGLを動かすところまでのお話

かずまです。

今日は入社式とか研修とかでした。
帰ってバタンキューだったのですがなんか妙な時間に目覚めてしまったのでRubyOpenGLAPI叩けないかなーってことで調べてたら
あった!


別にRubyでゲーム作りたいとか、ではないのですが、使えると便利かな、ぐらいです。

github.com

ちゃんとありました。
DirectXは基本WindowsAPIになっているのでMacLinuxユーザーとしてはOpenGLかなって感じですね。
まぁVM立ててWindows立ち上げるみたいなので力技はできますが。

Sampleを動かす

先程のgithubからCloneしてきてSampleを動かしてみることにします。

GemのOpenGLとかを入れるのですが、まぁプロジェクトごとに管理できるのが一番いいのでBundlerを入れてしまいます。
入ってる場合は飛ばします。

こことかを参考にして

blog.tokoyax.com

$ gem install bundler

Fetching: bundler-1.14.6.gem (100%)
Successfully installed bundler-1.14.6
Parsing documentation for bundler-1.14.6
Installing ri documentation for bundler-1.14.6
Done installing documentation for bundler after 4 seconds
1 gem installed

OK、これでExampleディレクトリに移動して、

$ bundle init
$ vim Gemfile

ここでGemfileの中身を書き加えます。

gem 'opengl'
gem 'glu'
gem 'glut'

これで後は

$ bundle install --path=vendor/bundle

これでここのディレクトリのみにGemがインストールされるはずです。
よしこれで動く環境は整いました、examples/Neheに移動してrubyで叩いてみます!

$ bundle exec ruby nehe_lesson02.rb 

f:id:kazumalab:20170404023612p:plain

おぉー表示されました。
いいですね。

頂点をきめたりするところ

glBegin GL_POLYGON do
    glVertex3f  0.0,  1.0, 0.0
    glVertex3f  1.0, -1.0, 0.0
    glVertex3f -1.0, -1.0, 0.0
end

ここで三角形の頂点を決めてますね。
GL_POLYGONの部分でどんな形をレンダリングするかです。

ちなみにGL_QUADSのところを

glBegin GL_POINTS do
    glVertex3f -1.0,  1.0, 0.0
    glVertex3f  1.0,  1.0, 0.0
    glVertex3f  1.0, -1.0, 0.0
    glVertex3f -1.0, -1.0, 0.0
  end

GL_POINTSに変更すると

f:id:kazumalab:20170404033516p:plain

見えにくいですが点がレンダリングされます。

使うとよさそうな一覧が乗ったページがありますのでこちらを参考にするといいかも。
glBegin

今日は時間も遅いのでここまで。
お疲れ様でした。