読者です 読者をやめる 読者になる 読者になる

ネオキャリアグループ開発者ブログ

ネオキャリアグループの技術者による開発ブログ

EditorConfigでコーディングルールの統一

コーディング

こんにちはエンジニアの松崎です。
早速ですが皆さんチーム内で同じエディターを使われていますか?

  • SublimeText
  • Atom
  • Vim
  • IntelliJ IDEA

その他様々なエディターをチーム内でバラバラに使用していることが多いと思います。
またエディターだけでなく
「htmlのインデントはタブで( +・`ω・)b」
「cssのインデントはスペースで( ・`ω・´)」
のようにそれぞれの自分ルールが存在していて、新しく入った人は間違えるだけで怒られることも… ( ̄ー ̄;

続きを読む

Bitbucket Pipelinesでとりあえずユニットテストを動かす

Bitbucket CI Bitbucket Pipelines

元ネタはこちらです。

Bitbucket pilelinesって?

Atlassian製のCIツールです。 BitbucketへのアクションをトリガーとしてDockerコンテナ上でタスクを実行してくれます。 当然ながらBitbucketをリポジトリとして利用していないと意味ないです。

元々の悩み

  • Bitbucketでプルリク送ったけど、これテスト通ってんの?とかいちいち確認したくない
  • developにマージしてから確認だとプルリク閉じちゃっている場合あるし、そもそもテスト通ってからプルリク送れや( ゚д゚ )とか荒ぶることになってしまう。

やりたいこと

タイトルの通り、Bitbucket Pilelines使ってbranchへpushした時にユニットテストを動かしてしまおう作戦

問題

  • push単位だとジョブが割と頻繁に動作してしまう → とりあえずpipelinesは今の所タダだし良いか( ´∀`)

設定

Bitbucket Pipelinesを開始するには、まず以下の手順で有効にする必要があります。

リポジトリの設定 > PIPELINESのSettings > Enable Pipelinesをクリック

これで有効になるので、プロジェクトのルートにbitbucket-pipelines.ymlを設置することでタスクを実行させることが出来ます。

続きを読む

新人よう太の冒険: FactoryGirlとティータイム編

こんにちは、こんばんは!
16新卒のよう太です。

先日、マッチングアプリを起動したら、リストに知り合いがいてびびりました。

さて、今回は 「もっと!FactoryGirlをテーマに、

  • 連番のデータ
  • リアルなダミーデータ
  • 関連モデルのテストデータ

以上3種類のテストデータをモリモリ作っていこうと思います。

f:id:Yoko_Takaki:20170130115810j:plain

FactoryGirlの導入方法や、基本的な使い方に関しては
こちらの記事を見ていただけると嬉しいです⊱ฅ•ω•ฅ⊰

新人よう太の冒険: FactoryGirlとの出会い ~序章~

続きを読む

ガード句でRubyの防御力を上げる!初めてのContract

「じゃあここのメソッドに引数を渡して実行して…」
「よし!完璧に動いてる!」
「ついでにコメントを書いておこう!」

後日… 「ここのメソッドは[@params String]の型が入って動作するから」
「String型を渡して……」
「エラー…._| ̄|○」

数日後… 「この前のコードコメントが間違えてて違う型だった!(〇*>∀<)ゞ★☆」

「えっ….」
「えっ?….」
f:id:daiki-matsuzaki:20170127122147j:plain

こんにちは!冒頭からすみませんw。
ギリギリ新卒エンジニアの松崎です。
前回のこの記事以来になります。

neo-developers.hatenablog.com

今回紹介するのはRubyで型を縛る方法です!
(phperの方はごめんなさい!)

〜 読んでいただきたい人 〜

  • ジェンガコードに怯えている方
  • 人とコミュニケーションが取りづらい方
  • 人の入れ替わりが激しいプロジェクトにいる方
  • 適当なコメントやコメントが無い事に悩まされる方
  • エンジニアの皆さん

目次

型を縛る??とは

今回はRubyのgem Contractsを使用します。
このgemは「メソッドの引数と戻り値が、ある条件を満たしているかをチェック」できるものです。

github.com

使用方法

インストール

まずはgemfileに記述します。

gemfile

gem 'contracts'

ファイルへの記述

Contractsをclassやmoduleにincludeします。

sample.rb

class Sample
  include Contracts

これで使用できる準備ができました!

簡単な使用例

さっそく例に移ります! まずは成功例からです。

class MyCalculate
  include Contracts

  Contract Num, Num => Num
  def self.add(a, b)
    a + b
  end
end

puts MyCalculate.add(1, 1)

解説です。 MyCalculateClassのaddメソッドの引数として2つの引数Numeric型を指定して出力しています。

Contractsの設定は
1.MyCalculateClassのaddメソッドの引数が 2つともNumeric型 であること
2.MyCalculateClassのaddメソッドの戻り値が Numeric型 であること

を確認しています。 ここでは問題なく成功したのでなにもおこりません。

こちらは失敗例です。

class MyCalculate
  include Contracts

  Contract Num, Num => Num
  def self.add(a, b)
    a + b
  end
end

puts MyCalculate.add(1, "good!!")

解説です。
MyCalculateClassのaddメソッドの引数として Numeric型・String型を指定して出力しています。

先ほどと同様でContractの設定は
1.MyCalculateClassのaddメソッドの引数が 2つともNumeric型であること
2.MyCalculateClassのaddメソッドの戻り値が Numeric型であること

を確認しています。

しかしNumeric型を期待していたのにString型が指定されました。
そのため、これを実行すると以下のように例外が発生します。

./contracts.rb:4:in `failure_callback': Contract violation: (RuntimeError)
    Expected: Num,
    Actual: "good!!"
    Value guarded in: Object::add
    With Contract: Num, Num    

解説です。
1.Expected: Numで期待(予想)している引数はNumeric型であることがわかります。
2.Actual: "good!!"で実際に引数で指定した値を出力しています。

Numeric型が来るはずなのに値がNumeric型じゃ無いですよ!と出力されています。

値の型チェック

例1)
Contract String => nil
def greet(name)
  puts "hello, #{name}!"
end

解説です。
Contractsの設定は
1.greetメソッドの引数がString型であること
2.greetメソッドの戻り値がnilであること
を確認しています。

先ほどと違うところはメソッドの戻り値が何もない場合、nilを指定できるところです。

例2)
Contract ArrayOf[Num] => Num
def count_total_numbers(nums)
  nums.inject(:+)
end

解説です。
Contractsの設定は
1.count_total_numbersメソッドの引数が Array型で配列の中は Numeric型 はあること
2.count_total_numbersメソッドの戻り値が Numeric型であること

を確認しています。

この場合、配列の中まで確認することができます。
成功 count_total_numbers([1, 2, 3, 4]

失敗 count_total_numbers([1, 2, 3, "foo"])

そのほか、Contractsに標準で組み込まれている様々な型チェックが使用できます。
実際に業務でContractsを使用した際に、頻出した型チェック(のリスト)です。

確認できる型
Bool 真偽値(true or false)をチェックできます。
Or 型の条件が2つ存在する場合にどちらか一方の型をチェックできます。
HashOf Hash型の時に使用します。例)HashOf[Symbol,String] Hash値の中の型まで見ることができます。
Maybe 型にnilが来る場合に使用します。 Or[String,nil]と同じ意味です。
Any 型を見ずに何かしらの値が来ていることをチェックできます。
例えばHashが入れ子になりすぎている状態だと長すぎて邪魔なためAnyで省略したり
rubyでは最後に評価した値が戻り値になるので
引数や戻り値を見る必要がない場合などに使います。

もっと詳しい情報はこちらのリファレンスページに記載されています。

自作のContracts

型自体が標準で組み込まれていない、開発者側が定義した型が存在する場合
自分で型チェックを作ります!σ゚ロ゚)σ

Contractの標準で組み込まれているメソッドはこのようになっています。

class Num
  def self.valid? val
    val.is_a? Numeric
  end
end

解説です。

classメソッドにvalid?をつけることによってバリデーションを使用します。
引数で渡ってきた値をis_a?メソッドで型の判定をしています。

標準メソッドを応用して新たにチェックするメソッドを作成します。
railsのlibディレクトリの中にCustomContractsディレクトリを作成し
CustomContracts配下にUserファイルを作成しました。

module CustomContracts
  class User
    def self.valid? val
      val.is_a?(::User)
    end
  end
end  

呼び出し

Contracts CustomContracts::User => String

解説です。
基本的に標準メソッドと同じですがここでチェックしている型は
User(UserClass)型です。
呼び出し側はクラスメソッドになっているのでCustomContracts::User
で呼び出せます。

is_a?(::User)is_a?(User)にしてしまうとCustomContractsのUserクラス
を見てしまうのでこのようにしています。

最後に

最後までご覧いただきありがとうございます!

実際にContractsをプロジェクトに導入すると
メソッドの引数に制限が加えられたので、想定していない型で引数が
セットされることがなくなりました。
つまり、型の不一致によるバグを事前に防ぐことが出来ます!

皆さんも是非使ってみてはいかがでしょうか?

弊社について

ネオキャリアでは、エンジニアの募集を行っています。
ぜひ!募集記事をチェックしていただけると嬉しいです!(*>ω<)b

www.wantedly.com

www.wantedly.com

参考サイト

Contracts.ruby by egonSchiele

こちらの記事は、Qiitaに投稿したものと同じ内容になっています。

ガード句でRubyの防御力を上げる!gem Contract - Qiita

新人よう太の冒険: FactoryGirlとの出会い ~序章~

こんにちは!こんばんは!

あけましておめでとうございます!

新卒エンジニアのよう太です。


突然ですが、皆さん


『きれいなおねえさんは、好きですか。』

f:id:Yoko_Takaki:20170113210827j:plain


私は大好きです。
かわいい女の子も好きです。

と、いうことで
今回は私が大好きな『Factory Girl』について書こうと思います。

 

こちらの記事は、Qiitaに投稿したものと同じ内容になっています。

世界一やさしいFactoryGirlの使い方:入門編 - Qiita

 

FactoryGirlって誰?


FactoryGirlとは、テストデータの作成を手伝ってくれるgemです。
テストデータ...
それはテストコードを書く上で切っても切り離せない存在です。
自力でテストデータを用意することも可能ですが、
FactoryGirlを使用すると、複数のテストデータなどを簡単に作成することができます!


FactoryGirlのインストール


それでは、FactoryGirlをインストールしてみましょう。

まず、Gemfileに'factory_girl_rails'を追加してください。
今回私は新規アプリを作成したので、'rspec-rails'も一緒に追加しました。

group :development, :test do
gem 'rspec-rails',
gem 'factory_girl_rails'

 

このままbundle installを行うと、最新バージョンがインストールされるので、
バージョンを指定したい方は

'factory_girl_rails', '~> 4.0'


このように、gemの後ろに指定したいバージョンを書いてください。


 FactoryGirlと出会ってみる

 

ファクトリーファイルの作成


インストールが終わったら、早速ファクトリーをアプリケーションに追加してみましょう。
FactoryGirlをインストールしている状態でモデルを作成すると、
モデルと一緒にファクトリーも作成されます。

$ rails g model Blog title:string word:text writer:string
Running via Spring preloader in process 7449
invoke active_record
create db/migrate/2016**********_create_blogs.rb
create app/models/blog.rb
invoke rspec
create spec/models/blog_spec.rb
invoke factory_girl
create spec/factories/blogs.rb

既にアプリケーションをお持ちの方は、
specディレクトリの配下にfactoriesディレクトリを作成し、

モデル名.rb


上記のようなファイル名を作ってください。

 

デフォルトのテストデータ


ファクトリーファイルの作成ができたら、テストデータを作成してみましょう。


先ほど rails gコマンドでBlogモデルを作成したので、
spec/factories/blogs.rbで定義します。

モデルと一緒に作成されたspec/factories/blogs.rbを見てみると、
下記のようなテストデータが自動的に作成されています。

*注意 FactoryGirlをインストールする前に作成したモデルに対しては、手動で定義する必要があります。

FactoryGirl.define do
  factory :blog do
     title "MyString"
     word "MyText"
     writer "MyString"
  end
end


せっかくテストデータを用意してくれたので、
テストを実行するとどのようなデータができるのか試してみましょう。

FactoryGirlと遊んでみる


テストデータの生成

FactoryGirlの挙動を確認するために、簡単なテストコードを書いてみました。

spec/controllers/blogs.rb

require 'rails_helper'
RSpec.describe BlogsController, type: :controller do
describe '#create' do
context '正常系' do
context 'DBに登録されていないBlogのtitleである場合' do
it '新しいモデルが生成される' do
# setup
blogs_model = FactoryGirl.create(:blog)

# exercise
post :create

# verify
actual = Blog.find_by({title: blogs_model.title})
expect(actual).not_to be nil
end
end
end
end
end

*テストの対象はblogs_controllerです。

app/controllers/blogs_controller.rb

class BlogsController < ApplicationController
def create
Blog.find_or_create_by(title: "TestTitle")
end
end

 

テストコードの中に、下記のようなコードが書かれています。

spec/controllers/blogs.rb

blog_model = FactoryGirl.create(:blog)

 

このように、FactoryGirl.create(:モデル名)と記述した場合
DBにテストデータが保存されます。

試しにtest環境のDBを覗いてみると...

mysql> select * from blogs; 
+----+----------+--------+----------+---------------------+---------------------+
| id | title | word | writer | created_at | updated_at |
+----+----------+--------+----------+---------------------+---------------------+
| 1 | MyString | MyText | MyString | 2016-**-** **:**:** | 2016-**-** **:**:** |
+----+----------+--------+----------+---------------------+---------------------+

 

Blogテーブルにテストデータが保存されていることが確認できました!

 

* createの他にも、buildやattributesといったテストデータの生成方法があります。

テストデータ生成方法の例
FactoryGirl.build(:モデル名)
FactoryGirl.create(:モデル名)
FactoryGirl.attributes_for(:モデル名)

テストデータの上書き


テストコードを書いていくと、デフォルトのテストコードではなく
より現実的なデータを使用したくなるかもしれません。
そんな時は、テストデータを生成する際に、引数として「任意のテストデータ」を追加してみましょう。

Blogモデルには[writer]というブログの著者の名前を格納するカラムがあるので、
著者の名前を指定してみます。

spec/controllers/blogs.rb
blog_model = FactoryGirl.create(:blog, writer:'asopasomaso')

 

このテストコードを実行すると、

著者の名前が"asopasomaso"なテストデータが生成されます。

test環境のDBを検索してみると...

mysql> select * from blogs where writer = 'asopasomaso'; 
+----+----------+--------+-------------+---------------------+---------------------+
| id | title | word | writer | created_at | updated_at |
+----+----------+--------+-------------+---------------------+---------------------+
| 2 | MyString | MyText | asopasomaso | 2016-**-** **:**:** | 2016-**-** **:**:** |
+----+----------+--------+-------------+---------------------+---------------------+

 asopasomasoがDBに存在することが確認できました。

複数のテストデータ作成


ここまで取り上げてきたテストデータの生成方法では、
一度に1つのテストデータしか作成することができません。
複数のテストデータを生成したい場合は、create_listの引数に「生成したいテストデータの数」を追加してください。
例として、5つのBlogを作成してみます。

spec/controllers/blogs.rb

blog_model = FactoryGirl.create_list(:blog, 5)

 

このテストコードを実行して、test環境のDBを見てみます。

mysql> select * from blogs;
+----+-----------+--------+-------------+---------------------+---------------------+
| id | title | word | writer | created_at | updated_at |
+----+-----------+--------+-------------+---------------------+---------------------+
| 8 | MyString | MyText | MyText | 2017-01-11 07:33:02 | 2017-01-11 07:33:02 |
| 9 | MyString | MyText | MyText | 2017-01-11 07:33:02 | 2017-01-11 07:33:02 |
| 10 | MyString | MyText | MyText | 2017-01-11 07:33:02 | 2017-01-11 07:33:02 |
| 11 | MyString | MyText | MyText | 2017-01-11 07:33:02 | 2017-01-11 07:33:02 |
| 12 | MyString | MyText | MyText | 2017-01-11 07:33:02 | 2017-01-11 07:33:02 |
| 13 | MyString | MyText | MyText | 2017-01-11 07:33:48 | 2017-01-11 07:33:48 |
| 14 | MyString | MyText | MyText | 2017-01-11 07:33:48 | 2017-01-11 07:33:48 |
+----+-----------+--------+-------------+---------------------+---------------------+

 idが8から12の行のcreated_atのカラムに注目してください!

モデル名の後ろに追加した「生成したいテストデータの数」分、テストデータが同じ時間に作成・登録されています。

 


FactoryGirlと付き合ってみる?


FactoryGirlの便利な機能はこれだけではありません。
連番データの作成や、関連データの作成などなど、
様々なテストデータを作成することができます。

(´-`).。oO(年明けにまとめようかな...)


弊社について


ネオキャリアでは、エンジニアの募集を行っています。
ぜひぜひ、募集記事をチェックしていただけると嬉しいです!

 

www.wantedly.com

www.wantedly.com

 

References

- [いまさら聞けないfactory_girl入門](http://tech.grooves.com/entry/2015/04/28/173025)
- [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)

 

 

参考になるデザインまとめ!

デザイン 自己紹介

 

f:id:shinjimiyamoto:20161202120120p:plain

自己紹介

こんにちは!

自分は、美容師 → 料理人 → WEBデザイナー → エンジニア(いまここです。)エンジニアとしては、初心者です。

20 〜 24 歳の頃に、美容師の仕事をしたり、料理人もしたり、、、 以前の会社では、フロントエンジニア兼webデザイナーとして働いてました。

最近はプライベートでプロジェクターと一眼レフを買いました。プロジェクターを使ってプロジェクトマッピングとかやりました。映像編集のソフトが使えないと、楽しめないとわかったので、今はアフターエフェクトプレミアプロを使って遊んだりしてます。よく、アマゾンビデオをプロジェクターで鑑賞しています(^^)

ネオキャリアでは、以下プロダクトのデザイナー&フロントエンジニアを担当しております。

人事部と総務部のお役立ち専門用語ならjinjer

 

前置きが長くなりそうなのでようやく本題です。 \(^o^)/  

今日は、デザインする時、エンジニアにアニメーション等を伝える時に参考になるサイトを厳選してご紹介します。

ライセンスは、自己責任でお願いします。
 

クリエイティブ系WEBサイトギャラリー編

  

  

クリエイティブ系WEBサイトギャラリー(海外)編

Behance

Dribbble - Show and tell for designers

アプリ(UIUX)編

http://www.inspirationde.com/ui-ux/

 

おしゃれなLP編 

 

フォント編

アイコン編


  

エンジニアに伝える時アニメーション編
Pixate

 

よく使うWEBサービス
Grid Designer 2

余白の調整で使います

 

 

配色編

BrandColors – Official color codes for the world's biggest brands

配色の参考に

 

ダッシュボード編(htmlもあり)

 

UIUXガイドライン編 
ユーザインターフェイスのデザインのヒント - Apple Developer 

パワポテンプレ編
PowerPoint Templates from GraphicRiver 

無料写真素材編(海外)
picjumbo — free stock photos

写真のクオリティーはそこそこよいです。枚数が少し少ないです。

クオリティは高いです。ただ、種類が少ないのと、ジャンルがかたよってます。

 

 

無料写真素材編(国内)

数と種類は沢山あります。

 

個人的に結構使います。

 

かわいい女性向けの画像に特化した素材集です。

 

 

無料、ポスター素材(ai) 

いろいろ無料でダウンロードできます。

 

PSD Templates elemisfreebies

BrandsClap -

 

おわりに

さて、少しは参考になったでしょうか。
自分は、デザイン周りの記事を書いていこうかと思ってます。
ネオキャリアはエンジニア、UI/UXデザイナー採用を行っています。
インターンも募集してます!
ぜひ弊社のサイトや募集内容をチェックしてください!!


 

 ちなみに、新宿は美味しいごはんのお店も沢山あります。


UnityとNeuronでお手軽モーションキャプチャをやってみた!

自己紹介

f:id:vr_sasa:20161108154803j:plain

こんにちは!ネオキャリアで働くVRエンジニアのsasaです。

 

昨年度までは自社の求人サイト『FINE!保育士』の開発責任者を務めさせていただき、今年度からは、VR専門エンジニアとして、研究開発の分野に携わるようになりました。

f:id:vr_sasa:20161107180052p:plain

sasa
コーヒーとphpが大好き。

2013年に入社し、ネオキャリアの新卒エンジニア第1号として頑張っています。

 ネオキャリアにはVRブースがあるんです

実は、ネオキャリア新宿オフィス内には社員なら誰でもVR体験ができるよう、VRブースを設けています。

f:id:vr_sasa:20161108124726j:plain

ブース立ち上げ直後で雑多ですが、そのうちPepperくんとお片付けする予定です。

今回の本題です。

ところで皆さん、一度は思ったことはないでしょうか。

「俺もパソコンの画面の中に入り込んで、ディスプレイの先でしか会えないあのキャラクターとキャッキャしたい。」

これだけ技術が発達した世の中なのだから、その恩恵にあずかればお手軽にできる気がします。

 

まず、夢の実現に必要なものを用意していきましょう。

続きを読む