ZEALS TECH BLOG

ZEALS Developers Blog

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

f:id:zeals-engineer:20180802114505p: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:20181217090524p:plain
coursera

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

まとめ

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

ちなみに

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

case.wantedly.com

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

note.mu

Read more

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

こんにちは!

主にバックエンドを担当している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

Read more

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

みなさん、こんにちは!
バックエンドエンジニアの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」
(あまり開発環境には関係ないですが、僕が好きなスティーブ・ジョブズの名言で締めます)

Read more

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

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

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

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

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

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

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

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

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

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

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

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

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

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

エンジニアとしてはPythonRubyを書くサーバサイドエンジニアとしての役割も持っており、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用で顔も拭いちゃう派です。

まとめ

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

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

Read more

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

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

「弘法筆を選ばず」ということわざをご存知ですか?

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

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

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

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

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

そこで今週から何週か、選りすぐりのZEALSエンジニアの開発・作業環境をご紹介しようと思います。
私自身まだまだ経験が浅いということもあり、色々参考になることが多かったので、エンジニアのみなさんにとって新たな発見となる項目や参考になる部分があればと思います!

そこで今回華々しいトップバッターを飾るのは。。。

縁の下の力持ちTakkunさん

今週は縁の下の力持ちTakkunさんです! f:id:zeals-engineer:20181022165107j:plain ※筆者が最近iPhone xsに変えたので、ポートレートでイケてる写真を撮れとせがまれました。

Takkunさんが、ZEALSでどんなことをしているかというと、
日々の細かなバグ対応から、大きなリファクタリング、クライアントワークまで色々なことをしています。
領域的にはRuby, Railsがメインで、業務の中でインフラっぽいことをしていたこともあったみたいです。

今はバリバリエンジニアとしてZEALSで力を発揮してくださっていますが、1年半くらい前までは福島でひな人形の営業をやっていたそうで、
日々仕事へのやりがいを感じず、このままではまずいと心機一転し、TECH::CAMPに通ってエンジニアへの道を目指し、今に至るみたいですね。

とはいえTakkunさんは今では生粋のRubiystでRubyを愛し、Rubyに愛されているかどうかはわかりませんが、日々技術に関して誰よりも感度を高くして、勉強会への積極的な参加やOSSへのチャレンジなどなど。。。

一体どのような環境で作業をしているのでしょうか、
本題の開発・作業環境に入っていきましょう。

ハードウェア

メインマシン

f:id:zeals-engineer:20181022205748j:plain TakkunさんのメインマシンはMacbookProの15インチ(2018)色はシルバーで、Takkunさんデスクトップの壁紙は変えない派。
やっぱりApple製品はシルバーに限りますね。(筆者はMacbookAir…Proがほしい…)
ちなみに今回からTakkunさんはUSキーボードに変えたようで作業効率が著しく落ちたと愚痴をこぼしていました。。。
変えた理由としては、USとJIS両方とも使える男になりたかったからだそうです。

デスクトップが結構ごちゃついていますね、個人的にデスクトップが荒れているのは苦手です。

ディスプレイ

f:id:zeals-engineer:20181022210151j:plain ディスプレイもメインマシンに続き、会社支給のDellのディスプレイ。これといってなにも特徴はない。。。
本人も特にディスプレイにこだわりはないようで。。。

キーボード

f:id:zeals-engineer:20181022210322j:plain キーボードはMagic keyboard 1 (JIS)。 キーボードにはこだわりがあるようで、新しいMacのキーボードの打感があまり気に入らないらしく、Magic keyboardの押し心地が1番だそうです。
ちなみに筆者はMagic keyboard 2を使用しています、やっぱりApple製品はかっこいい…

エディター

f:id:zeals-engineer:20181022212334j:plainソースコードの事情により少々のぼかしが入っています。

Takkunさんが一番こだわっているといっても過言ではないエディター。
上の写真をご覧の通り、彼はVimmerなのです。
写真を撮らせてくださいと言ったら大急ぎで色々なファイルを開き、画面を分割し、こっちを向いて一言
「かっこいいだろ(どや顔)いくらでも写真撮っていいぞ」

みんな大好きVim
Vimのよさといえば周知の事実ではありますが、なぜVimを使用しているのか一応訪ねてみました。
すると一言。。。
Takkunさん「かっこいいから」
私「むむむ!??!!」

確かにかっこいいですが、それだけ!?と思いまた質問を重ねると、
Takkun「根本的にかっこいい…」
私(この人にインタビューをしたのは間違いだったのだろうか)
頑張って聞き出してみると、かの有名なVimmerの言葉をあたかも自分の言葉のように語ってくれました。
Takkunさん「エディタって編集するものだよね?Vimは色々なモードがあって(途中省略)モードがなきゃエディタじゃない」
という答えをもらい、Vim愛がたくさん伝わりました。(言っていることはあまり理解できませんでした…) また他の理由としては、インフラでテスト環境や検証環境を作成していて、リモートファイルを直接書き込めるVimを覚えざるを得なかったそうです。
それ以来Vimの虜になったそうです。

よく使うソフト

Jasper

https://jasperapp.io/image/ss.png

JasperGithubをふんふんできるをソフトみたいで、自分の気になるリポジトリをチェックして、そのリポジトリに変更やプルリクが上がれば通知をくれるっていう機能を使いたくてインストールしたみたいです。
OSSなどにすごく関心が高いTakkunさんならではですね。

Hyper Switch

Macではアプリ切り替えが「⌘ + tab」でできますが、アプリのウインドウ切り替えがかなり使いづらいです。。。
「⌘ + F1」でかつデスクトップをまたいではウインドウを切り替えてくれません。
そんな時どうしたらいいか、そう「Hyper Switch」をインストールすればいいんです。 これが正直めちゃめちゃ便利で、筆者も利用しているのですが、Chromeとかエディタで開く内容によってウインドウを分けていて、そうするとかなり見やすく、かつすぐにウインドウも移動できます!!(本人の感想を載せてない…)

TweetDeck

https://s.aolcdn.com/hss/storage/midas/fb1bc21d10e0cc3fa81df68269af3dff/205087450/tweetdeck-premium.jpg

TweetDeckは上記の画像の様にツイッターを複数画面に分けて活用することができるようです! インフラ、RubyVimなどなど自分の気になるジャンルごとにフォローしている人を分けてフィードを見やすくして活用していました。そうすることによって自分が尊敬するエンジニアのどんな呟きも逃さないようです。

よく使うChrome拡張機能

Vimium

Vimmerならではの拡張機能ですね!
VimiumChromeVim likeに動かせるようになる拡張機能です。
ちなみにTakkunさんはあまりコマンドを覚えていませんでした。

Go back With backspace

Go back With spaceはその名の通りバックスペースでページを戻ることができます!! ちなみにVimiumでは「SHIFT + h」で前のページに戻ることができますが、あまりコマンドを覚えていないようで…
この拡張機能とVimiumを共存させる意味はTakkunさんにしかわかりません。

開発のお供

コーヒー

f:id:zeals-engineer:20181022210804j:plain 開発のお供はコーヒー。
本人曰く1日に3本は飲むらしい。。。インタビューをした時間は夜だが、これは1本目。

個人的にはカフェイン取り過ぎると気持ち悪くなるのでみなさんもカフェインの過剰摂取には気をつけましょう。

まとめ

今回は縁の下の力持ちTakkunさんにお時間をいただいて、開発・作業環境についてや、エディターへの熱い思いをお聞きしました。
普段のコミュニケーションではあまり聞けないこだわりなどが聞けたので、シンプルに人の開発・作業環境について話を聞くのは面白い!

次回も自分の環境についてはこだわっているメンバーにお話を伺うのでぜひ楽しみにしていてください。
この記事、次回の記事によりみなさんの環境が少しでも向上することを祈ります。

Read more

テクノロジーお師匠さんにトレタ元CTO 増井氏、ドリコム元技術担当執行役員 白石氏、MUGENUP CTO 横山氏がジョインしました!

https://cdn.user.blog.st-hatena.com/default_entry_og_image/152935579/1533178284500194

こんにちは!ZEALS CTO島田です。

弊社開発チームで“テクノロジーお師匠さん制度”を導入しました。
テクノロジーお師匠さん制度では、テック界隈で第一線で活躍なさっている方々に参画していただくことで、開発体制の組織化や技術力向上など、組織的な課題解決を目的としております。
今回、テクノロジーお師匠さん制度でジョインなさったのは、トレタ 元CTO増井氏ドリコム 元技術担当執行役員白石氏MUGENUP CTO横山氏です。

増井師匠

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

経歴

「風呂グラマー」や「IT芸人」の相性で呼ばれ、トレタやミイルを始めとしたB2C、B2Bプロダクトの開発を行う傍、業界著名人へのインタビューや年30回を超える講演、オープンソースへの関わりなど、外部へ向けた発信を積極的に行なっている。
「ムダに動いて、面白い事を見つけて、自分で手を動かして、咀嚼して、他人を巻き込んで、新しい物を楽しんで作る」を信条に日夜模索中。
日米で計4回の起業をしたのち、2018年10月に独立し"Product Founder"として広くプロダクトの開発に関わる。


レジュメはこちら

白石師匠

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

経歴

さまざまなBtoB・BtoCのサービスやインターネットインフラ構築のプロジェクトに携わる。
ソフトバンクグループ、 株式会社レコチョク等を経て、2012年ドリコムに入社、技術担当執行役員に就任。
2018年より株式会社メルカリに参画、テックカンパニーを目指す同社のエンジニア組織の強化を担当。
並行して株式会社スライストーンを創業、株式会社ZEALSを始めスタートアップから上場企業まで複数社の技術アドバイザーを務めている。

横山師匠

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

経歴

金融SIerにおいて業務管理システムの開発・運用に携わったのち、2012年よりドリコムに参画し、海外向けブラウザゲーム、ネイティブゲームをテックリードとして担当。
2014年から株式会社MUGENUPに参画し、サービスの企画からインフラ構築、アプリ開発全般に従事する。
2015年より同社CTOに就任し、技術戦略の策定、情報セキュリティ管理支援基盤の構築、新規事業開発に取り組む。
これまでのエンジニアリング経験を社会に活かしたいという思いから、ITサービス企業数社の技術アドバイザーおよびプロダクト開発を行っている。

さいごに

株式会社ジールスの開発組織では豊富な経験を持つお師匠さん方をお招きし、私達のVISIONである”日本をぶちあげる”という志を胸に日々思考して開発して参ります。
採用も積極的に行っておりますので、ご興味のある方はwantedlyからお気軽にご応募ください。
ランチでもなんでも、ご連絡お待ちしております!

www.wantedly.com www.wantedly.com zeals.co.jp

Read more

ZEALS初のエンジニア開発合宿に行ってきました!! @伊東

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

皆さんこんにちは!
プロダクトマネージャー兼サーバサイドエンジニアの福本です!

10月5日(金)〜6日(土)の2日間をかけて、ZEALSでは初となる『エンジニア開発合宿』を行いました!!
今回はZEALSの全社合宿でもお世話になっている旅館『山喜』にて合宿を行いましたので、その様子をご紹介できればと思います。

開発合宿の目的とZEALSの企業VALUE

  • From Zeal:業務から切り離された集中できる環境で、エンジニア全員が課題解決に熱狂する
  • Bet On Paradox:普段の業務では扱わない技術や分野に取り組むことで、チームの技術力やプロダクトの品質向上を行う
  • United Will:エンジニア全員が時と場所を同じくし共通の活動に取り組むことで、組織の力を向上させる (※ZEALSの企業VALUEについて、詳しくはこちらです!)

タイムテーブル

10月5日(金):1日目

  • 12:00~:旅館『山喜』にて現地集合
  • 13:00~:オープニング、チームに分かれ開発開始
  • 18:30~:各チームより中間発表!
  • 19:00~:夜ご飯
  • 21:00~:レクリエーション

10月6日(土):2日目

  • 09:30~:朝ごはん
  • 11:00~:オープニング、チームに分かれ開発開始
  • 16:00~:最終プレゼンテーション!
  • 17:00~:クロージング、解散

内容

  • 合宿で取り組みたいテーマをエンジニアが事前に考えてきて出し合いました!
  • テーマの中にやりたいものがあれば、エンジニア自らそのテーマに参加する方式を取りました!

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

1日目

  • チームによって協力しながら進めるチームもあれば...

f:id:zeals-engineer:20181005215334j:plain f:id:zeals-engineer:20181005221219j:plain

  • 個人で考え抜いて課題を前に進めるチームもありました!

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

  • 機械学習に取り組んだチームは、機能の設計からガッツリと取り組んでいましたね!

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

  • 1日目の終わりには各メンバーから中間発表を行い、経過のフィードバックを受けました!

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

  • 夜はメンバーお待ちかねのご飯...

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

  • その後は、持ち寄ったゲームをメンバー全員で楽しみました!!

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

2日目

2日目は朝ごはんを食べてから、夕方まで1日目の続きに取り組みます!

  • 各チーム集中して開発、さすがみんなエンジニアですね f:id:zeals-engineer:20181006185034j:plain

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

  • 16:00からは開発したもののアウトプットを全員に向けて発表しました!

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

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

各チームやメンバーの発表に対して、

  • こうしたらプロダクトに取り入れられるんじゃないか?
  • 今後はこうやって改善していこう!

という、とてもポジティブな意見が集まっていたのが印象的でした!

その後はついにクロージングということで、開発合宿のプログラムは終了。
振り返ればあっという間の2日間でした!

良かったところ・反省

良かったところ!

  • 開発合宿の目的3つをすべて達成できたこと!
  • 各メンバーの興味のある技術領域を知ることができたこと
  • 思いがけない観点からプロダクトに活かせる技術を発見できたこと
  • 開発から離れているメンバーが久しぶりにコードを書けたこと

反省...

  • 「何に取り組むのか」の粒度をもう少し下げるべきだった
    • 当日になってから何をするか考えるメンバーやチームもあり少し時間をロスしました
  • チームメンバーのまとまり方に差があった
    • 各個人で自由に取り組むチームもあれば、全員でがっちり協力するチームもありアウトプットに差がありました

最後に

2日間に渡って行われた、ZEALS初のエンジニア合宿の様子をご紹介させていただきました!
そして、業務時間を使っての合宿の機会を用意してくれたエンジニア以外のメンバーには改めて感謝です!
得られたものはたくさんありましたが、この10月から始まる下期に向けてチーム一丸となって最高のスタートを切れたことが、ZEALSにとって一番の収穫でした!
ZEALSは『次なる産業革命を起こし日本をぶち上げる』というVisionの達成のために、これからも変わらず全力で走り続けます!
そんなZEALSで日々開発をする僕たちエンジニアチームを、今後とも応援よろしくお願いします!

Read more

Getting started with Three.js basics.

This tutorial requires that you have a basic understanding of javascript and some knowledge of codepen and how to set up a project there. We’ll be recreating the project from the codepen below. It is quite simple and can be set up in around 15 minutes.

https://codepen.io/licebeam/pen/KGzWOw

Three.js is a javascript library that allows you to render 3d in html5 canvas dom elements using webGL. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

To setup, we need to create a basic html page that we can insert our "render" into via javascript. First we’ll add the following code to our index.html file.

 <html>
 
 <head>
 </head>
 
 <body>
 </body>

</html>

Secondly we’ll need to add a few css properties to our project. We’ll give the body a margin of zero to have it fill the page correctly. Additionally when we render our canvas element to the dom it will need to have it’s height and width set to fill the body. The code required is below.

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

Finally we can move on to setting up our Three.js project. Go ahead and add the Three.js cdn link to your javascript in the settings section. https://cdnjs.com/libraries/three.js/

To begin we need to create a new scene object in our javascript code.

var scene = new THREE.Scene();

The scene is where all of our other objects will render to in the future. Next we’ll set up our perspective camera, this will allow us to move around the scene as we please and it also allows us to change how much of the scene is viewable to the user.

var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

Next we’ll set up our webGL renderer which will in turn will allow us to render to our desired dom element.

var renderer = new THREE.WebGLRenderer();

We need to set the height and width of the renderer to match our window.

renderer.setSize(window.innerWidth, window.innerHeight);

Now we’ll create our canvas dom element to render into using document.body.appendChild.

document.body.appendChild(renderer.domElement);

Now that you’ve set up the rendering you’ll notice you still have nothing but a blank screen. This is because we need to create some geometry, meshes and materials to render to the screen don't worry it's easier than it seems. We’ll start with a simple square.

var geometry = new THREE.BoxGeometry(8, 8, 8);

The 3 values passed into BoxGeometry are the x, y and z scales of the object. You can make your geometry as big or as small as needed. Now that we have our cube we’ll need a material to apply to it. Think of a material as a skin that covers our cube's geometry.

var material = new THREE.MeshBasicMaterial({
  color: 0xff00f0,
  wireframe: true
});

Our material has two properties a color which takes a hex value and wireframe which is a boolean.

Material creation can be extremely daunting so I suggest you take a look at the different properties on the Three.js documentation here to gain a bit more understanding. https://threejs.org/docs/#api/en/materials/MeshBasicMaterial

Let’s create two more materials, we’ll use them for the other cubes we'll make later.

var material2 = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  wireframe: true
});

var smallMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true
});

Feel free to experiment with other properties sizes and colors for this example.

Next let’s try another method of creating geometry and create a triangle using vertices. Geometry is extremely complex and requires some knowledge of math in advanced situations. Take a look at the documentation for a more detailed example of what we’ll be doing next. https://threejs.org/docs/#api/en/core/Geometry

Let’s assign our new Geometry object to the variable smallGeometry.

var smallGeometry = new THREE.Geometry();

Each geometry has a property called vertices. Vertices are points in space that can be rendered. Essentially every polygon is made up of multiple vertices in different position.

Let’s make a triangle shape by pushing three vertices to the object in different positions. One thing to note is the term Vector3. If you are from a javascript background you may not be entirely familiar with this but simply put; it is just a set of x, y and z positions in space.

smallGeometry.vertices.push(
  new THREE.Vector3(0, 3, 1),
  new THREE.Vector3(-3, -1, 0),
  new THREE.Vector3(1, 2, 0)
);

Next we’ll push faces to our object, faces are just how each of our vertices connect. Allowing us to apply our materials over the faces of our object.

smallGeometry.faces.push(new THREE.Face3(0, 1, 2));

Next we’ll compute the boundaries of our object.

smallGeometry.computeBoundingBox();

Finally we need to create something to render with our new geometries and materials. We’ll begin by creating three different mesh objects that take two arguments: geometry and material, luckily we’ve already created these so feel free to mix and match.

var cube = new THREE.Mesh(geometry, material);
var cube2 = new THREE.Mesh(geometry, material2);
var centerCube = new THREE.Mesh(smallGeometry, smallMaterial);

Lastly we’ll add our new cubes to the scene so we can see them and setup our camera position to make sure they are in view.

scene.add(cube);
scene.add(cube2);
scene.add(centerCube);

camera.position.z = 5;

But wait, we should make them move. Animating your cubes is very simple. First we’ll create an animation function. Lastly when it comes to animation we’ll need to make sure we render the scene and camera correctly every frame with renderer.render.

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  cube2.rotation.x -= 0.01;
  cube2.rotation.y -= 0.01;

  centerCube.rotation.y -= 0.12;
  centerCube.rotation.x -= 0.0;

  renderer.render(scene, camera);
};

All we have to do now is call our animate function and our cubes should be animating on the screen.

animate();

Thanks for checking out this blog post, I hope it gave you a little bit of insight on how to set up a basic Three.js project.

-Dustin Front End Engineer at Zeals