ZEALS TECH BLOG

チャットボットによる会話広告『fanp』を開発する株式会社ZEALSのテックブログです。技術やエンジニア文化について情報を発信します。

年末に『Hack Days(自由開発)』を実施してみました!

f:id:zeals-engineer:20190110120742p:plain

こんにちは! 2018年11月にジョインした中村です!

業務では主に会話広告fanp のサーバーサイドの開発をメインで行っています!

今回は年末に行った『Hack Days』という自由開発についてご紹介します! また、開発のアウトプット、作成するために使った便利なサービスなども紹介していきます!

是非最後までお付き合いください!

Hack Daysとは?

ZEALSでは、年末年始ギリギリのリリースで不具合が発生し結局休み中もバタバタするのはイケてないと判断し、hotfix以外のデプロイを12/25までとしました。そこで、12/28までの3日間業務から離れ自由にテーマを決め開発するHackDaysを開催することにしました。

Hack Daysには、「普段できない技術へのチャレンジや、リファクタリング等、2019年に向けて準備をしっかり整える
」という目的があります!

ちなみに、僕は「react・reduxに慣れる」というテーマで開発をしました!
自分で言うのもなんですが...とてもざっくりしていますね。笑

reactreduxを選んだ理由は、以下の2つです!

  1. JavaScriptのライブラリが流行っているので、触ってみたかった
  2. fanpのフロントはReactで開発されているので、今後の開発に向けての勉強

ちなみに、他のエンジニアの方の開発テーマはこんな感じでした↓↓↓

  • コンピューターシステムの理論と実装
  • RSpecでN+1 Queryの検知
  • データの整合性を確保するため、validationを書きまくる
  • ユーザーの返答に対して好感度を計算する機械学習モデル

業務に関連する開発をする人もいれば、自分の興味ある技術を使って開発する人もいました!
このように各メンバーがテーマを決め、開発を行なっていきます!

実際にやったこと

reactとreduxを使用することは今回が初めてだったため、Udemyの講義(React + Redux を使用したモダンフロントエンド開発)を参考にしながら、アプリケーションを作成しました!!

動画学習ってわかりやすくて、すごく便利。。。
Udemy以外にも、サービスを使用したので後ほどご紹介します!

f:id:zeals-engineer:20190109180014g:plain

こちらのアプリケーションは
キーワードに関連するgif画像を「GIPHY」というサービスから取得するアプリケーションです!

この他にもreacチュートリアルや、react・reduxを使用した小さなアプリケーションを二つほど作りました! レベルとしてはまだまだ未熟ですが、僕のテーマであったreactreduxに慣れることは達成できたと思います!!

開発する際に使ったサービス

CodeSandbox

codeSandboxは「React」「Vue」「Angular」などのjavascriptの様々なライブラリを環境構築せずに、ブラウザ上からWebアプリを気軽に作成できます!また、自分の作ったアプリケーションを公開する事や、githubとの連携もできるので、是非使用してみてください!

codesandbox.io

myjson

JSONを返してくれる無料APIのサービスです!
APIのエンドポイントも同時に作成してくれます!

Myjson - A simple json storage and hosting service

次は環境構築から、デプロイまで自力でやりきりたいと考えています!

他エンジニアのアウトプット

  • ユーザーの返答に対して好感度を計算する機械学習モデル

https://files.slack.com/files-pri/T1355CWF6-FFB19PKFY/tinder-frog-ml.gif

ちゃんとユーザーの返答に、絵文字で応えてくれていますね!

loveとか良い言葉を返答すると、良いリアクションをしてくれるようです!

  • コンピューターシステムの理論と実装

github.com

こちらがアプトプットのgithubです!

僕も読んでみたのですが、正直何をやろうとしているか、全くわかりませんでした。。。

  • データの整合性を確保するため、validationを書きまくる
  • RSpecでN+1 Queryの検知

こちらの業務に関連する開発に取り組んでいたエンジニアの方達も、無事PRの作成を終えることができました!!

そのPRも徐々にマージされており、全員が良い形でHack Daysを終わらせることができました!!

終わりに

普段使用していない、言語や技術で開発することは新たな発見があり、とても有意義な時間でした! ぜひ、皆さんも空いた時間を利用して、新たな技術に挑戦しましょう🔥

続きを読む

GCPでDeep LearningのためのGPU環境を構築する

f:id:zeals-engineer:20190108094205p:plain

こんにちは!サーバーサイドエンジニアのJohnです。

インターン生として、fanpの配信周りの開発を行なっています。

今回は、GCP(Google Cloud Platform)にGPUを動かすための環境を作ってみます。だいぶ長い記事になってしまいましたが、お付き合いいただければと思います。

  • Google Cloud Platform(GCP)
  • プロジェクトの作成
  • GPUの割り当て
  • インスタンスの作成
  • Google Cloud SDKのインストール
  • CUDAとNVIDIAドライバのインストール
  • cuDNN7.0のインストール
  • Kerasを使ってみる
  • まとめ

Google Cloud Platform(GCP)

GCPとは、Googleが提供するクラウドコンピューティング向けのプラットフォームです。似たようなサービスにAmazonのAWSや、MicrosoftのAzureがあります。

基本的な構成が最初から準備されているので、自分たちでデータセンターを作ったりしなくてもすぐにコンピューティングリソースを使うことができるようになります。今回はこのGCPを使って、DeepLearningをしてみたいけど自分でGPUマシンを買ったりするのは大変……という人でも学習をぶん回せるような環境を構築します。

※以降、GCPへの登録は済んでいる前提で進めていきます。もしまだ登録していない場合は、こちらから登録できます(GCPのページへ飛びます)。また、GCPでGPUを使うためには有料アカウントへアップグレードする必要があるので注意してください。

プロジェクトの作成

GCPにはプロジェクトという概念があります。GCPで利用する各リソースやAPIは全てプロジェクトと紐づいていて、課金などもプロジェクト単位で行われます。そのため、プロジェクトごとにアカウントを作ったりする必要がなくなります。

まずは今回のプロジェクトを作成しましょう。ページ上部のMyFirstProjectをクリックすることで、プロジェクト管理モーダルが表示されます。今回のプロジェクト名は「DeepLearningWithGCP」とします(筆者が作成した複数のプロジェクトがありますが気にしないでください)。

f:id:zeals-engineer:20190106221208j:plain

GPUの割り当て

GCPでGPUを使用するには、GPUの割り当てを行う必要があります。

ナビゲーションメニュー(左上の3本線)からIAMと管理割り当てを選択します。さらに、指標:なしを選択した後に指標:GPUs (all regions)を選択します。 f:id:zeals-engineer:20190106233839j:plain この状態で割り当てを編集をクリックし、割り当て申請を行います。新しい割り当て上限に使いたいGPUの台数、リクエストの説明には簡単に使用用途を書いておきます。100個とかあんまり大きな数を書くとサポート担当者とのやりとりが必要になるので、常識的な数字を入力しましょう。 f:id:zeals-engineer:20190106233923j:plain しばらくすると承認メールが届きます。これで割り当てが完了しました。

インスタンスの作成

プロジェクトを作成したら、今度はインスタンスを作成しましょう。

ナビゲーションメニューからCompute EngineVMインスタンスと選択すると、次のような画面が表示されます。ここで作成をクリックすることでインスタンス作成画面へ遷移します。 f:id:zeals-engineer:20190106221557j:plain

今回作成するインスタンスの設定は以下の通りです。

リージョン: asia-east1
マシンタイプ:vCPU x 1
GPUの数: 1
GPUのタイプ: NVIDIA Tesla K80
ブートディスク: Ubuntu 16.04 LTS (ストレージ:10GB)
サービスアカウント: Compute Engine default service account(デフォルト)
アクセススコープ: デフォルトのアクセス権を許可(デフォルト)
ファイアウォール: HTTP トラフィックを許可する

GPUに関しては、マシンタイプのカスタマイズから選択します。 f:id:zeals-engineer:20190106234231j:plain ここまで設定したら、作成をクリックします。しばらくするとインスタンスが作成され、緑色のチェックマークがつくと作成完了です。 f:id:zeals-engineer:20190107033339j:plain

Google Cloud SDKのインストール

インスタンスへの接続など、Google Cloud SDKをインストールしておくと便利です。リンク先を参考に、まずこちらをインストールします。

CUDAとNVIDIAドライバのインストール

GPUを設定しましたが、利用するにはドライバが必要になります。また、GPUで学習を並列処理するにはCUDAが必要です。ここでは公式ドキュメントを参考にそれらをインストールします。

まず、インスタンスにSSH接続しましょう。VMインスタンスの画面で、接続のプルダウンメニューからgcloudコマンドを表示し、それをコピペすれば接続できます。 無事接続できたら、以下のコマンドでCUDAとドライバをインストールします。

$ curl -O http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/cuda-repo-ubuntu1604_9.0.176-1_amd64.deb
$ sudo dpkg -i cuda-repo-ubuntu1604_9.0.176-1_amd64.deb
$ sudo apt-key adv --fetch-keys http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/7fa2af80.pub
$ sudo apt-get update
$ sudo apt-get install cuda-9-0

これでCUDAとドライバが入りました。一般に、次の設定でGPUのパフォーマンスを最適化できるようなので、やっておきます。

$ sudo nvidia-smi -pm 1
Enabled persistence mode for GPU 00000000:00:04.0.
All done.

加えて、今回はK80を使っているので、自動ブーストを無効化します。

$ sudo nvidia-smi --auto-boost-default=DISABLED
All done.

cuDNN7.0のインストール

cuDNNはNVIDIA社が提供するDeep Learning向けのライブラリで、ほとんどのDeep Learningライブラリで使われています。利用にはアカウント登録が必要です。

https://developer.nvidia.com/developer-program

ここでdeveloperアカウントを作成して、

https://developer.nvidia.com/rdp/cudnn-download

ここでcuDNNをダウンロードします。今回はubuntu 16.04向けのcuda-9.0 versionをダウンロードしました。三つのファイルありますがすべてダウンロードします。

これをインスタンスにアップロードする必要があるので、GCPストレージを使います。scpコマンドでもいいんですが、どうも遅いらしいです。ナビゲーションメニューからStorage を選択すると、バケットの作成画面になるので、名前などを適当に入力して、バケットを作成します。場所はインスタンス同様asia-east1とします。

バケット作成後は、アップロードボタンからファイルをアップロードします。アップロードが完了したらgsutilコマンドでそのままインスタンスへの転送が可能です。

$ gsutil cp gs://{YOUR_BUCKET_NAME}/libcudnn7_7.4.2.24-1+cuda9.0_amd64.deb .
$ gsutil cp gs://{YOUR_BUCKET_NAME}/libcudnn7-dev_7.4.2.24-1+cuda9.0_amd64.deb .
$ gsutil cp gs://{YOUR_BUCKET_NAME}/libcudnn7-doc_7.4.2.24-1+cuda9.0_amd64.deb .

{YOUR_BUCKET_NAME}には設定したバケットの名前を入れてください。転送が完了したらファイルを展開してインストールします。

$ sudo dpkg -i libcudnn7_7.4.2.24-1+cuda9.0_amd64.deb
$ sudo dpkg -i libcudnn7-dev_7.4.2.24-1+cuda9.0_amd64.deb
$ sudo dpkg -i libcudnn7-doc_7.4.2.24-1+cuda9.0_amd64.deb

これでひとまず、GPU環境が完成しました。

Kerasを使ってみる

作成した環境で、KerasのチュートリアルであるMNISTの学習をしてみましょう。

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install python3-pip
$ pip3 install --upgrade pip
$ pip install tensorflow-gpu
$ pip install keras
$ wget https://raw.githubusercontent.com/keras-team/keras/master/examples/mnist_cnn.py
$ python3 mnist_cnn.py

f:id:zeals-engineer:20190107033059j:plain 1 epochあたり11秒!筆者のマシン(Mac Book Pro)のCPUでは1 epochあたり2分だったので、GPUすごいですね。

これで、GPUインスタンスでKerasを実行するところまで構築できました。

まとめ

今回はGPUでDeep Learningの学習を回せるようなGPUインスタンスを作成しました。自分でマシンを買うと場所や管理、初期費用など大変ですが、クラウドだと手軽に始めることができますね。これからどんどん学習させちゃいましょう!(GPUインスタンスは結構お高いので、使わないときはインスタンスを停止しておくといいかもしれません)

続きを読む

【年始のご挨拶】2019年もよろしくお願いいたします!!

f:id:zeals-engineer:20190103230141j:plain

(写真は移転前のオフィスで撮影しました。このエントリーとは特に何も関係ありません。)

こんにちは、CTOの島田です。 皆様、あけましておめでとうございます!

2018年は1月の4.2億円の資金調達から始まり、弊社代表の清水が唐突にForbes「アジアを代表する30才未満の30人 (Forbes 30 Under 30 Asia) 」に選出されたり、オフィスを拡張移転したり、気がついたらメンバー(業務委託/インターン等含む)の合計が60名を超えていたりと、会社として大きく前進した1年だったように思います。

続きを読む

Gem Fakerで簡単に始めるOSS活動

f:id:zeals-engineer:20190101235733p:plain

こんにちは、サーバサイドエンジニアの後藤です!

2018年10月にジョインして https://fanp.me/ のサーバーサイド側の開発をメインで行っています。

今回はエンジニアチームでもよく使われている Faker というGemを紹介します

Fakerって?

https://github.com/stympy/faker

This gem is a port of Perl's Data::Faker library that generates fake data.

ざっくり訳すると 嘘のデータを作ってくれるgem です

もともとは Perl のExtensionにあるものをRubyでも使うために作られたGemっぽいです。

https://metacpan.org/pod/Data::Faker

FactoryBot でテストデータを作るときに手打ちで

FactoryBot.define do
  factory :user do
    name { '島田' }
  end
end

といちいち考えるのは面倒ですし この場合は 島田 でしか通過しないテストの可能性もあるので、「ランダムにデータを生成しましょう」といった具合です。

この記事を書く背景

GithubのPull requestを出したときに下のようなコメントが来ました。

f:id:zeals-engineer:20181129195549p:plain

よくあるのダミーデータだと面白くないなぁと思ったので、Fakerのドキュメントを読んでました。すると、ポケモンの名前が使えることを発見して使ってみたら意外にも好評だったので、書くことにしました!

導入

至ってシンプルで

# Gemfile
source 'https://rubygems.org'
gem 'faker'

Gemfileを編集した後に bundle install で導入が完了します。

使い方

README にも書いてあるのですが、至って簡単でRequiredすればOKです。

require 'faker'
Faker::Name.name # => "藤田 亮"
Faker::Internet.email # => "gilbert_gibson@kub.info"

Fakerには一般的なものから独特なものまであります。

個人的に独特だと思われるものをいくつかピックアップします。(バージョンが HEAD Unreleasedの書き方です)

require 'faker'
Faker::Beer.name # => "Trois Pistoles"
Faker::Company.name # => "株式会社菅原食品"
Faker::JapaneseMedia::DragonBall.character # => "Mr. Satan"
Faker::Matz.quote # => "I believe consistency and orthogonality are tools of design, not the primary goal in design."
Faker::Games::Overwatch.hero # => "D.va"
Faker::Game::Pokemon.name # => "ギャロップ"
Faker::TvShows::SiliconValley.character # => "Peter Gregory"
Faker::Movies::StarWars.character # => "Sabine Wren"
Faker::University.name # => "中島工業大学"
Faker::Game::Zelda.game # => "Twilight Princess"

他にも様々あるので使ってみてください!

OSS活動

Faker::Game::Zelda.game はゼルダシリーズのゲームタイトルを返すメソッドになりますが、英語のままです。

ポケモンの名前を返すメソッドである Faker::Game::Pokemon.name は日本語化対応されているので、真似すればゼルダのゲームも日本語化できるかと思ったのでPull requestを送ります。

Pull requestの内容

https://github.com/stympy/faker/pull/1484

内容は 「ゼルダのゲームタイトルを日本語訳にしました!」 です。Pull requestのテンプレもなかったので、ざっくりで出しておきました。。

Pull requestを送った翌日くらいにマージされて、次回のFakerのリリースで世界中のエンジニア(主に日本人)に使われるとなるとうれしい気持ちです。

ちなみにこれの作業時間は3時間くらいです。主にゲームのタイトルを調べるのに使ってました...

終わりに

Fakerは簡単にダミーデータ作れるところがいいですし、すでにある例を日本語化したり新たなデータ例を追加したりなどで比較的簡単にOSS活動ができるのがいいと感じています。

読者のみなさんも使ったりコミットしたりしてはいかがでしょうか?

続きを読む

courseraのMachine Learningコースに挑戦してみた

f:id:zeals-engineer:20190101235302p:plain

こんにちは! 最近機械学習の勉強を始めた、エンジニアのkeitoです!

今回はcourseraというオンライン上で受講できるMachine Learningのコースを修了したので、内容や進め方を記事にしてお伝えしたいと思います!

ちなみに、受講したコースはこちら↓です。

www.coursera.org

今回の記事で書くことと、書かないこと

いきなり内容に入る前に、この記事では

  • どういう経緯でこのコースに取り組んだのか
  • 実際どうだったか

などを書いていきます。

具体的な

  • 実際のアルゴリズムの説明
  • 実装の話

などといった内容には触れません。

今回の記事の対象者としては、「これから機械学習にチャレンジしていきたい!」「チャレンジしてるけど、いまいち感覚がつかめていない」といった人に読んでもらえると役に立つかと思います!

なぜcourseraに取り組んだのか?

僕はZEALSではバックエンドの実装やマネジメントといったところが主な業務内容だったのですが、最近改めて機械学習に取り組んでいます。

今までの取り組みとしては、KaggleでTensorFlowを少し触れてみたり、DeepLearningについて調べてみたりといった感じで、自走しての実装はまだまだ難しいという状態でした。 よくある話だと思うんですが、とにかくアウトプット出したくてフレームワークの書き方だけ学んでいるような状況ですね。

本格的に機械学習に取り組むにあたり、表面的に進めても応用が効かないのではないかと考え、体系的に学ぶためにこのコースに挑戦しました。 ちなみにこのコースを知ったのは、 以下のQiita記事を読んだのがきっかけです。

qiita.com

実際どうだったのか

正直、めちゃくちゃ良かったです! 今まで雰囲気で理解していた部分も理解して進めることができました。

特に大きかったのが数学で、「これ何に使うんだろう...??」と疑問を抱えて勉強していたことが「こういう場面で使うのか!」と実践的な部分まで腹落ちして学べたことです。

数学の範囲的には”線形代数”、”微分・積分"、"確率”あたり理解できれば問題なさそうです。 僕も学習を進めていく中で、忘れていたり知らなかった部分などを調べながら進めていくことができました。

コースを受けてどうだったのかをまとめると、

いいところ

  • アルゴリズムをイチから丁寧に説明してくれる
  • 途中で理解しているかを確認する問題が出題される
  • アルゴリズムだけじゃなくて、効率よく開発するための考え方、ノウハウ的なのも教えてくれる
  • 講師であるアンドリュー先生がめちゃくちゃ優しい

辛いところ

  • 全編英語での受講
    • 字幕はありますが、たまに無いときもあります
  • 目安となる受講期間が長く、学習に時間がかかる(11 weeksが目安です)
  • 課題を提出するための言語として『octave』という、アプリケーションプログラミングでは馴染みのない言語を使うこと
    • 難易度的には、他にプログラミング言語を使って開発した経験があれば問題ないようなレベルかと思います

という感じでした。

www.gnu.org

さてさて、コースを最後まで終了したらcourseraからメールが届きました。

f:id:zeals-engineer:20190101235302p:plain

どうやら修了証も発行できるらしいですが、有料みたいです(断念しました...笑)。

まとめ

「機械学習に興味があってチュートリアルを進めているけど、この進め方で良いのか不安」という人はぜひチャレンジしてみてください! 今後の勉強の進め方としてはcourseraで学んだことをベースに、Kaggleなどに挑戦していきたいと思っています。

ちなみに

先日、ZEALSでは「日本をぶち上げる」という志のもと『iNTERFACE SHIFT 2018』というテクノロジーのカンファレンスを開催しました!

case.wantedly.com

「キーノート」や「ミレニアル世代の起業家」で登壇したZEALSの代表の清水が、開催に至るまでの決意や苦難を記事にしています。 来年も開催したいと考えているので、ご参加頂いた方や行きたかったけど都合の悪かった方、ZEALSにご興味を持っていただいている方はぜひ読んでみてください!

note.mu

続きを読む

Google Cloud Visionを用いてCTOを分析してみた。

f:id:zeals-engineer:20181119192305j:plain

こんにちは!

主にバックエンドを担当しているkanacchiです。

今回はCTOの顔をGoogle Cloud Visionを用いて解析したいと思います!

実際にGoogle Cloud Platform のアカウントを作成してAPI KEYを取得してもいいのですが、今回はCTOの顔を数回解析するだけなのでwebページ上で誰でも使えるベータ版で試してみたいと思います。

解析する画像はこちら。

f:id:zeals-engineer:20181119192305j:plain

悪い顔してますね笑

ではさっそくこの画像をアップロードしましょう!!

f:id:zeals-engineer:20181119191952p:plain

Joy(喜び)が最も多いですね!

ただそれでもUnlikelyと比率が低いのが気になります。。

返ってきたJSONを見てると、広角や上下の唇の位置を図っているのでこれらの数値の開き具合で比率の強弱を決めているのかなと思います。

        {
          "type": "UPPER_LIP",
          "position": {
            "x": 2149.567,
            "y": 1477.6831,
            "z": -259.99683
          }
        },
        {
          "type": "LOWER_LIP",
          "position": {
            "x": 2155.813,
            "y": 1656.3391,
            "z": -240.01262
          }
        },
        {
          "type": "MOUTH_LEFT",
          "position": {
            "x": 2031.4382,
            "y": 1556.9113,
            "z": -54.190556
          }
        },
        {
          "type": "MOUTH_RIGHT",
          "position": {
            "x": 2384.7437,
            "y": 1541.4597,
            "z": -226.56876
          }
        },
        {
          "type": "MOUTH_CENTER",
          "position": {
            "x": 2161.9004,
            "y": 1564.5712,
            "z": -231.29558
          }
        },

次にLabel検出(画像に何が写っているか判定してくれる機能)を見てみます。

f:id:zeals-engineer:20181119192648p:plain

Chin(あご)が85%ともっとも比率が大きくなっており、

Hairstyle, Long Hairは髪型関連、

Vision Care,Glasses,Eyewearはメガネ関連となってます。

Google Cloud Visionの解析度すごいですね!

以下JSON。( patientが検出されているのは服装が白いからなんでしょうか笑 )

  "labelAnnotations": [
    {
      "mid": "/m/0f9swq",
      "description": "chin",
      "score": 0.8474933,
      "topicality": 0.8474933
    },
    {
      "mid": "/m/0ds4x",
      "description": "hairstyle",
      "score": 0.8272674,
      "topicality": 0.8272674
    },
    {
      "mid": "/m/0h8jxfl",
      "description": "vision care",
      "score": 0.8026547,
      "topicality": 0.8026547
    },
    {
      "mid": "/m/0jyfg",
      "description": "glasses",
      "score": 0.78919524,
      "topicality": 0.78919524
    },
    {
      "mid": "/m/0j272k5",
      "description": "eyewear",
      "score": 0.6094156,
      "topicality": 0.6094156
    },
    {
      "mid": "/m/02pd__z",
      "description": "long hair",
      "score": 0.6044168,
      "topicality": 0.6044168
    },
    {
      "mid": "/m/0dzd8",
      "description": "neck",
      "score": 0.5968413,
      "topicality": 0.5968413
    },
    {
      "mid": "/m/0ds5b",
      "description": "facial hair",
      "score": 0.58375347,
      "topicality": 0.58375347
    },
    {
      "mid": "/m/05r655",
      "description": "girl",
      "score": 0.563655,
      "topicality": 0.563655
    },
    {
      "mid": "/m/028hfb",
      "description": "patient",
      "score": 0.5354568,
      "topicality": 0.5354568
    },
    {
      "mid": "/m/014cnc",
      "description": "student",
      "score": 0.50019,
      "topicality": 0.50019
    }

そしてかなり驚いたのが、テキストの解析度です。

画像を見てもらうとわかるのですが奥にあるZEALSの「ZEAL」という文字も検出しているんです!

f:id:zeals-engineer:20181119192036j:plain

    "description": "ZEAL",
      "boundingPoly": {
        "vertices": [
          {
            "x": 4036,
            "y": 1708
          },
          {
            "x": 4183,
            "y": 1533
          },
          {
            "x": 4240,
            "y": 1582
          },
          {
            "x": 4093,
            "y": 1756
          }
        ]
      }

今回は画像解析して返ってきたJSONを眺めただけなのですが、非常に面白かったです。

ベータ版の画像解析は画像をwebにアップロードするだけので、画像解析ってどうやってるんだろうと思った方はぜひ試してみてはいかがでしょうか。

【Cloud Vision】

cloud.google.com

続きを読む

「弘法筆を選ばず」はエンジニアには関係ない|ZEALSエンジニアの開発・作業環境 part 3

f:id:zeals-engineer:20181116204332j:plain

みなさん、こんにちは!
バックエンドエンジニアのRyutoooooです!

Part1, Part2に引き続き、ZEALSエンジニアの開発・作業環境についてPart3です!
(今回で予定しているのは最後です…)

ではでは前回のおさらいから

能書家の弘法大師はどんな筆であっても立派に書くことから、その道の名人や達人と呼ばれるような人は、道具や材料のことをとやかく言わず、見事に使いこなすということ。

下手な者が道具や材料のせいにするのを戒めた言葉…

つまりエンジニアに置き換えると、スペックの悪いパソコンを使ったり、劣悪な環境であろうといいコードを書かなくてはならない…

なかなか厳しいですね(’・ω・`)
エンジニアにとっては生産性が命!!!
自分が常に最大のパフォーマンスを発揮できるよう自分が作業する環境を整えますよね。
というわけで自分の知らないエンジニアが精魂込めて作り上げた環境気になりませんか?

私は気になる方です!誰かの作業を見ていて、知らないツールやコマンドがあることってありませんか?
自分以外のエンジニアは、自分の知らない便利ななにかを使っているかもしれない…いや多分使っている!?はずです!!!

先々週から引き続き、選りすぐりのZEALSエンジニアの開発・作業環境をご紹介しようと思います!
気になる最終週は…

味わい深い名人フルスタックKodyさん

f:id:zeals-engineer:20181116204332j:plain 味わい深いってなに!?って感じかと思いますが、
ZEALSでいう味わい深いとは、 新しいエンジニアのオンボーディングや採用、ZEALSでエンジニアをやっていく上でのルール作り、環境づくりなどなどエンジニアリングだけでなく、エンジニアが仕事をしていく上で必要不可欠なことを指しています。
それだけではなく開発面でも、フロントエンドからバックエンドまで広い領域で読み書きし、レビューもしています!

そんな今のZEALSに欠かせない存在であるKodyさんが今ZEALSで味わい深いこと(↑のようなこと)をしているのは前職のエンジニアスクールで講師をやっていたということが影響しているのだと思います。

エンジニアスクールで自分でカリキュラムを作成し、スクール生にどうしたらわかってもらえるか、どんな質問が飛んでくるのか、どうやって説明したら理解してもらえるかなどを突き詰めたからこそ今のKodyさんがいるのだと思います。

そんなKodyさんはどんな環境で仕事をしているのでしょうか!
早速見ていきましょう↓

f:id:zeals-engineer:20181116204458j:plain

全体的にきれいにまとまっていますね!
筆者は個人的にすごく好みのデスクです。

ハードウェア

メインマシン

f:id:zeals-engineer:20181116204603j:plain まずはメインマシンから!!
メインマシンは定番のMacbookPro15インチ(2018)
壁紙は特に変更なくデフォルトですね、Dockは左派のようです。

モニター

f:id:zeals-engineer:20181116204659j:plain iiyamaの23.8インチ。高さ角度ともに調整可能!!なんと回転にも対応!!!(使っているところは見たことがありません)

キーボード

f:id:zeals-engineer:20181116204821j:plain USのHHKBのLiteを使用されているみたいです。(結構ZEALSはUSキーボードが多い)
HHKBといえば定番中の定番!エンジニアといえばというくらいポピュラーですね。
キーボードの手前になにやら気になるものが…これはキーボード使用中の腕置きのようです。
体への気遣いを感じられますね。(体の凝り方が20代ではないと愚痴をこぼしているのを聞いたことがあります…)

ポインタ

f:id:zeals-engineer:20181116204940j:plain Logicoolのマウスですね、見ての通り通常のマウスよりボタンが多く、Macのデスクトップ切り替えもボタン1つでできて手軽なようです!!
お値段なんと8,000円、マウスに8,000円は個人的に出せないです…(とは言いつつも12,000円のMagic Trackpadなら筆者は買いたい)

地味にスルーしてしまいましたが、パソコンが置いてあるスタンドもなかなか気に入っているみたいです。
形といい、スタンドがあることにより、肩こりや目の疲れを軽減させてくれるようです!筆者も同じものを愛用しております。

エディター

Kodyさんの使用しているエディターはみんな大好きvisual studio codeことvscode!! f:id:zeals-engineer:20181016153205p:plain

なぜだかわかりませんが、ZEALSはvscodeが圧倒的に多いです…
圧倒的なパッケージの多さや、カスタマイズ性、Atomの重さからの開放!!色々と推測はできますが、ある社内エンジニアが布教したとか?なんとか?

その沢山のvscodeの中でもKodyさんが愛用しているのが、

  • Codic
  • Jsx snipet
  • Path Autocomplete

だそうです。ちなみに入れているパッケージの数は39個らしいです。

よく使うソフト

Boostnote

https://boostnote.io/assets/img/ogp.png Boostnoteというソフトで簡単に説明するとマークダウンができるメモツールだそうです!
愛用の理由はなによりもUIがいいそうで…エンジニアにとって自分が使うソフトはUIも大事ですね!

Omni forcus

f:id:zeals-engineer:20181016154516j:plain Omniforcusは超多機能なタスク管理ツールとして有名ですね!
タスクが多いKodyさんにとってはタスクを可視化、吐き出しやすいということがポイントのようです!!

よく使うChromeの拡張機能

ググるという行為をエンジニアほどする職業は他にないのでは?というくらいエンジニアはググりますよね
その「ググる」を支えるChrome、どのような機能を載せてChromeを走らせているのでしょうか!!

The Great Suspender

なにかリファレンスを開いたり、スプシを参照しながらだったり、なにかドキュメントを作成したりなど日々業務をしているとどれがどれかわからなくなるくらいタブを開いてしまいますよね。。。
パソコンのメモリが多ければいいですが、メモリが少ないとタブの数が増えるほどメモリが圧迫されて動きが遅くなってしまいます!!

それを救ってくれるのがThe Great Suspender名前の通り任意の時間で触れてないタブを自動で止めて、メモリの消費を抑えてくれます。
Kodyさんは結構な数のタブを開くそうでこれを使用し始めたみたいです(実際にChromeを見せてもらったら結構な数が…)

React developtool

こちらは言わずもがなフロントエンドも開発をするKodyさんにとっては必ず必要な拡張機能だそうです。

Clear cash

Chromeのキャッシュを細かく削除できるツールみたいです!
僕がインタビューをしている時に「Chromeってデフォルトでキャッシュ消せますよね?」と訪ねたら「細かくは消せないよね?」という返事がきて、黙ってこの記事に載せることにしました。
Chromeのキャッシュって放置すると結構な量になって、逆に細かく消すと色々なサイトでログインがしづらくなったりで痒いところに手が届く系ですね。

開発のお供

カシューナッツ

Kodyさんはデスクにカシューナッツを置いていましたね。
理由を尋ねると「ナッツは数時間ごとにつまむといい感じに脳に糖を送れる」ということで集中力をキープするために置いているそうです。

癒やし枠

f:id:zeals-engineer:20181116205217j:plain 今までの2人にはなかったデスクに癒やしです!!!
2匹の猫が技術書立てに佇んでいます。ちなみに名前もついているらしいのですが教えてくれませんでした…

まとめ

3週に渡りZEALSメンバーの開発環境を見させていただいたのですが、お三方とも自分の使うツールや道具にはこだわりがあり、聞いていて純粋に楽しかったです。
ZEALSには今日ご紹介した以外のメンバーでもっともっと開発環境へのこだわりが強い方がいるのでまたの機会にご紹介できればと思います!
筆者自身も自分の作業する環境をこだわるのは好きなので次の機会に自分の内容もぜひ掲載したいですね笑

今週も色々とご紹介させていただきましたが、これにより少しでもみなさんのエンジニアライフが向上することを心より祈っております!!

「Stay hungry stay foolish」
(あまり開発環境には関係ないですが、僕が好きなスティーブ・ジョブズの名言で締めます)

続きを読む

「弘法筆を選ばず」エンジニアには関係ない|ZEALSエンジニアの開発・作業環境 part 2

f:id:zeals-engineer:20181106103627j:plain

みなさん、こんにちは!
バックエンドエンジニアになりたてRyutoooooです!

Part1に続き、ZEALSエンジニアの開発・作業環境についてPart2です!

では前回のおさらいから
「弘法筆を選ばず」ということわざをご存知ですか?

能書家の弘法大師はどんな筆であっても立派に書くことから、その道の名人や達人と呼ばれるような人は、道具や材料のことをとやかく言わず、見事に使いこなすということ。 下手な者が道具や材料のせいにするのを戒めた言葉。

下手な者が道具や材料のせいにするのを戒めた言葉。。。

つまりエンジニアに置き換えると、スペックの悪いパソコンを使ったり、劣悪な環境であろうといいコードを書かなくてはならない…

なかなか厳しいですね(´・ω・`) エンジニアにとっては生産性が命!!!
自分が常に最大のパフォーマンスを発揮できるよう自分が作業する環境を整えますよね。
というわけで自分の知らないエンジニアが精魂込めて作り上げた環境気になりませんか?

私は気になる方です!誰かの作業を見ていて、知らないツールやコマンドがあることってありません?
自分以外のエンジニアは、自分の知らない便利ななにかを使っているかもしれない…いや多分使っている!?はずです!!!

先週に続き、選りすぐりのZEALSエンジニアの開発・作業環境をご紹介しようと思います。
気になる第2週目は…

ZEALSのプロダクトを引っ張るスーパーPM てるぴーさん

f:id:zeals-engineer:20181106103627j:plain

今週はプロダクトマネージャー(PM)兼サーバサイドエンジニアの@てるぴーさんです!

てるぴーさんは、ZEALSが開発している会話広告「fanp」のプロダクトマネージャーをしていて、プロダクトのビジョンやロードマップ、あるいは、どのような機能を優先して実装すべきかを考える役割を担っております!

エンジニアとしてはPythonとRubyを書くサーバサイドエンジニアとしての役割も持っており、PMとなった現在でも細かいリファクタリングや機能実装を工数が足りない時に行っています!

ZEALSのオフィスで毎月行われている音声・チャットボットのコミュニティ『VOT』のイベントで司会進行や登壇もしているので、参加されたことのある方でてるぴーさんを見たことがある方もいらっしゃるかもしれませんね!

  • そんなVOTのイベントはこちらでご案内しています!

https://vot.connpass.com

  • VOTでご案内しているカンファレンス『iNTERFACE SHIFT』も、ぜひチェックしてみてください!

https://interface-shift.com/

そんなてるぴーさんは、エンジニアとしてのキャリアをこの4月のZEALS入社と同時にスタートさせていて、以前まではSIerで法人営業をされていたみたいです。 社員インタビューも公開されていますので、気になる方はご覧ください!

  • 営業からエンジニアへ!その身一つで関西から東京のスタートアップにジョインした訳。

https://www.wantedly.com/companies/zeals2/post_articles/123572

さて、てるぴーさんはどのような環境で仕事をされているんでしょうか.. それでは、実際に環境を見ていきましょう!!

こんなデスクです↓ f:id:zeals-engineer:20181105191608j:plain

突っ込みたいところがありすぎる…とはいえ一旦一通りの流れを!!

ハードウェア

f:id:zeals-engineer:20181105191638j:plain メインマシンはおなじみMacbookpro15インチ(2018)シルバー続きでしたが、ここでスペースグレイです。
さらにTerupi-さんは画面にのぞき見防止のカバーをつけています!!セキュリティ意識が高く見習いたいです!!
デスクトップもきれいですし、Wall paperのPM感がすごいですね。。。

ディスプレイ

f:id:zeals-engineer:20181105191743j:plain 会社支給のDellの23.8インチのディスプレイ。
よく見るとevianのAmazon dashがありますね、味は気に入ってないらしいです。

キーボード

f:id:zeals-engineer:20181105195101j:plain USのMagic keyboard1を使用されているようです。やっぱりAppleの純正品はかっこいい…
ちなみに筆者はMagic keyboard2を使用しています。

ポインタ

f:id:zeals-engineer:20181105195201j:plain またもやApple製品。。。てるぴーさんはAppleがお好きなようです(きっとみんな好き) Magic Trackpad1を使用されています。
キーボード、ポインタともに旧型なので心から新調したいそうです。

その他

写真を見ると色々と突っ込んでいきたいところがありすぎますね。
PCスタンドの高さといいディスプレイ上のカメラといい、iPadといい、扇風機、AmazonDash、ブックスタンド、各所に散りばめられたステッカー等々全体的にデスクがボリューミーです。
ラーメン屋で例えるところ二郎系でしょうか。ZEALSのオフィスでは1位2位を争うほどデスクがボリューミーです。

どれもめちゃめちゃ気になりますが、尺の都合で一部割愛させていただきます(お時間いただいたのに申し訳ないです)

カメラ

まずは気になるカメラから!! f:id:zeals-engineer:20181105193052j:plain カメラはLogicoolのもので、Macbookにもカメラがついているのになぜこのカメラを使うのか。。。
正解はセキュリティのためだそうです!!
セキュリティのため!?って思いますが、Macの内蔵カメラを塞ぐのが目的のようで、Facebookのマーク・ザッカーバーグもやられているようです!!
どうやら、PC内臓のカメラをハックされると情報を取られるかもしれないので、必要なときだけ外部のカメラを使い内蔵カメラは塞ぐということらしいです!!

先程ご紹介したのぞき見防止のカバーとの合わせ技のようです。。。
セキュリティに対してここまでの姿勢…会社全体で見習っていくべきですね。。。

iPad

f:id:zeals-engineer:20181105194747j:plain お次はiPad!一見トリプルディスプレイのように見えますが、違うんです。
電子書籍や図や画像などをPCで開いてしまうとMacのプレビューウインドウがいちいち起動してしまいウザいので、そういった時はiPadでやるそうです!
さらに、AirDisplayを使いこなしていますね。。。
(結構色々なところにステッカーがペタペタしてありました)

よく使うソフト

Skitch

https://assets.pcmag.com/media/images/358801-skitch-for-mac.jpg?width=333&height=245

知ってる方も多いのでは?「Skitch」を使えば簡単に既存のPDFや画像に文字や注釈を入れられることができます! Evernoteのサービスのため既にEvernoteを利用している方は連携などがあり、なかなか便利だそうです。
てるぴーさんがPMということもあり、ビジネス側への仕様書などで使うことが多いみたいです!

Airmale beta

https://bddf794624247cea6a0b-b4761d2ba0154d0278c36dbf2b3c114d.ssl.cf1.rackcdn.com/image1463936110977.jpeg

こちらもMacを使用されている方は結構知っているかと思われます。
UIがかっこよく、アカウントの切り替えがスムーズでMacを使っていたら一度はインストールを考えたはず!! Airmaleは本来料金を支払わないと使えませんが、Beta版は無料で機能制限なく使用可能な上に、新規で追加される機能が一番早く使えるみたいです!
てるぴーさんいわく今どきメーラーにお金を払うのは癪だそうで(笑)、うまく無料で活用している印象を受けました。

よく使うChromeの拡張機能

Evernote web clipper

https://lh3.googleusercontent.com/Ze2VdQ0PATuxVrRRcV3fD9iGFBoMAKVpt7312xTE3z-hUvuqIV6V5JEDWMFEkG-xKCD7_W1X=w640-h400-e365

またまた登場Evernote!!
これで自分が見たサイトをめちゃめちゃきれいに整理していてアカウントにログインさせてほしいくらいでした。。。

てるぴーさんがここでPMとして語ってくれました。

Evernote、よく使ってるんだけどPM的にはアンチパターンなんだよね。
すごく機能も豊富だし、人によって色々な使い方ができる。けどそこが良くなくて、人によって使い方が違うってことはプロダクトの価値が発散しているということ。ある機能を改修したり追加しても一定のユーザーにしか届かないし、機能を削った時にその機能をメインで使っていたユーザーがバッサリいなくなってしまう。つまり、レバレッジの効いた開発がどうしてもできなくなってしまうんだよ。


とても勉強になります。。。。
PMだという以前に、サービスを開発する者としてこういうことを意識して開発をしていきたいですね!

開発のお供

フェイシャルシート

f:id:zeals-engineer:20181105220900j:plain 開発のお供はフェイシャルシートだそうです!!
前職の営業の時、更に昔の学生の時からリフレッシュするために使われているみたいです!!
きちんとFace用とBody用を用意されていますね。筆者はBody用で顔も拭いちゃう派です。

まとめ

今回はてるぴーさんにお時間をいただいて、開発・作業環境についてお話をお聞きしました。
前回に続き、普段では聞けない環境やプロダクトへのこだわりがたくさん聞けて、シンプルに僕が楽しんでしました。

予定しているのは次回が最後ですが、今後も他のメンバーにインタビューをして記事を載せていきたいと思っております!
このシリーズの記事で、みなさんの環境が少しでも向上することを祈ります。

続きを読む