はじめに 苦労したこと コードの規模がデカい 何が大変だったか どのように克服したか 何もわからんReact, Redux 何が大変だったか どのように克服したか トリッキーすぎるCSS 何が大変だったか どのように克服したか まとめ はじめに 初めまして、2021年新卒の中島です。 いつの間にか入社から7,8ヶ月経っていることに気付き、時の流れが早すぎて焦りを感じています。 僕は入社してから半年はフロントエンジニアとしてReact, Reduxを中心としたフロントエンド開発を行ってきましたが、10月からバックエンドエンジニアとして働くことになりました。 そこで今回の記事ではこの半年間のフロン…

オープンエイト プロダクト開発部の有田です。 2021年4月、Japan Node.js Association などでも活動されている古川陽介さんがオープンエイトの技術顧問に就任されました。 open8.com この記事は、就任にあわせて古川さんが過去に発表された「エンジニアになる覚悟」を現在のフロントエンドエンジニアの周辺環境や、オープンエイトの技術スタックなども踏まえて社内勉強会での発表をお願いし、先日社内で実施された勉強会の内容についてご紹介させていただきます。 当日の資料は SpeakerDeck で公開していただいているので、本記事と合わせてお楽しみください。 speakerdec…

はじめに 皆さんはじめまして、 オープンエイト・プロダクト開発部の村田です。時が経つのは早いもので、知らない間に入社2年目となっていました。 それはさておき、今回はオープンエイト が提供するSNSの分析ツール「Insight BRAIN」において実施されている、フロントエンドのテストについて記事を書かせていただきました。プロダクトの品質を維持するために、フロントエンドでどのような取り組みを行ってきたのか、本記事では余すところなく解説させていただきます。 Insight BRAINとは？ オープンエイト が提供するAIで動画を作成できるツールVideo BRAINに対して、Insight BRA…

フロントエンドエンジニアの松井です。 サーバーサイドからAPIをもらって、リクエストを投げる事は日々業務でやっていますが、APIそのものを基礎的なものでも手を動かして作りながら、RESTサービス全体がどう動いているのかの理解を深めようとした時の学びを今回記事にしました。 VideoBRAINのサーバーサイドはRubyが採用されてますが、今回自分はJavaScriptで動かせるNode.js + Expressで、DataBaseにはSQLite3を使ってAPIを立てました。 サーバーとは？ サーバーもソフトウェアで、ネットワークで繋がったコンピュータ上で、サーバー自身がもっているデータやサービ…

はじめに Alpakka Alpakka とは セットアップ AWS SQS AWS SQS とは ElasticMQ のセットアップ Alpakka で AWS SQS 接続 Subscribe Publish さいごに はじめに こんにちは、オープンエイトの山崎です。 今回は、Akka Streams で Alpakka を使って AWS SQS と接続しデータを送受信する方法について説明します。また本記事内では AWS SQS をローカル環境でシミュレートするために ElasticMQ を使用します。ElasticMQ のセットアップについてもあわせて簡単に説明します。記事執筆時の環境は…

はじめに Akka Typed について メッセージの型を宣言できる Immutable なコードで Actor を実装できる Classic Actor から移行する さいごに はじめに こんにちは、オープンエイトの山崎です。 今回は、いわゆる Actor モデル の Scala/Java 実装である Akka に関して、v2.6.0 から導入された Akka Typed の簡単な紹介と既存の Actor (Classic Actor) から Typed Actor への移行方法について Scala 言語を用いて説明します。記事執筆時の環境は以下の通りです。 Scala 2.13.4 Akk…

Video BRAINのフロントエンドを担当している松井です。もうすっかり寒くなりました、在宅勤務になってから初めての冬ですが、朝晩の寒い中、外に出て電車に乗らなくていいのはすごい楽ですね。 さて今回の話は、フロントエンド開発をしていて、Componentにコールバック関数を渡すときにアロー関数とFunction関数を使い分ける理由が何となくフワーっとした理解のままで気持ち悪かったので、はっきりさせようと色々調べたり、教わった事をまとめてみました。 まずこの２つのClassを見てください。 どちらもClick Meというボタンを描画するだけのシンプルなClassで、handleClickという…

オープンエイト VP of Engineeringの古萱です。この度、弊社オープンエイト提供のVideo BRAINが「Ruby biz Grand prix 2020」にて 、特別賞を受賞させていただきました！ Ruby biz Grand prixについては以下のようになっております。 ビジネスの領域においてプログラム言語 Ruby の特徴を活かして、新たなサービスを創造し世界へ発信している企業、団体及び個人を対象としたグランプリです。 一方で、弊社は以下を掲げております。 VISION: 世界を豊かにするコンテンツテクノロジーカンパニーになる。 MISSION： 人の気持ちを動かす、質の…

本日（2020年10月某日）のランチにマンチズバーガー シャックさんのハンバーガーを食べてご満悦だった、VP of Engineeringの古萱です。おいしいランチは一日を充実させる要素になりますね。 本日の幸せの素、ハンバーガー(※本文とは一切関係ありません) 勉強会開催報告 去る9/24にFinatext、Hacobu、ユニファと弊社オープンエイトの4社共催、かつAWSからソリューションアーキテクトの針原さんをゲストとしてお招きして『Startup テックリード勉強会 -AWS編-』というイベントを開催させていただきました。（ご報告まで時間が空いてしまいました、、） connpass.co…

はじめに こんにちは。VIDEO BRAINでフロントエンドを担当している田村です。いつの間にか新卒２年目になっていました。 最近全く外に出られないのでアニメを見始めました。「かぐや様は告らせたい」めっちゃ面白いですね。速攻で漫画全巻買いました。 で、早速仕事の話なのですが、最近PRのレビューしてるとコンポーネントのふるまい再利用できそうだなぁと思うことがちょくちょくありました。 よく使われる手法として、Render PropsとHigh Order Componentという手法があるので紹介しようと思います。 Render Props 例えば、レンダリング時の月を表示するコンポーネントがある…

What is AWS DeepRacer? It is a miniature racing car that is 1/18th of a real car in term of scale*1. Furthermore, it comes with different type of cameras and sensors that enable autonomous driving. Following are the available sensors (image courtesy of Amazon Web Service): Image Name Description Sin…

はじめに オープンエイトの大津です。 在宅勤務が始まり、かなり日にちが経ちましたね。僕は在宅勤務開始時にPCデスクや椅子がなくコタツ机で仕事を行なっていたのですが、最終的にデスク・椅子ともに買い揃えました。 デスクと椅子がほぼ同時期に届いたため、部屋がダンボール等の荷物で埋め尽くされることになりました！ 僕は現在、VBA(VIDEO BRAIN Analytics)のフロントの開発を年明け頃からしています。 このVBAの開発で印象に残っているものとして、マージンに対する取り組みをご紹介したいと思います。 open8.com VBAは、SPA（React + TypeScript）で開発されてい…

VIDEO BRAINのフロントエンドを担当している松井です。入社して早8ヶ月が経ち、毎月進化していくスピード感にようやく慣れつつあります。前回はVIDEO BRAINのフロントエンドの全体アーキテクチャについて書きましたが、今回はもっとコードレベルの事を書こうと思います。 言わずと知れた名著リーダブルコード。 この本はコードは他の人が最短時間で理解できるように書くという考えの基に具体的なTipsを色々と紹介しています。 今回はこの考えの重要性をVIDEO BRAINの開発を通じて体験できたので、実例を交えながら書いていこうと思います。 コードは他の人が最短時間で理解できるように書く よく言わ…

ブログへの登場は初めてとなります、VP of Engineering(以下VPoE)の古萱(@emfurupon777)です。 2020年2月にオープンエイトに参画し、VPoEとして活動させていただいております。 COVID-19環境下において、これまで盛んに行われてきたエンジニアの交流イベントが一旦なくってきたものの、 オンライン開催のイベントも徐々に増えつつあり、次にはどんな世界が待っているのかと不安な中にもワクワクも感じ始めている今日この頃です。 今回は改めて弊社の置かれている状況を改めて確認しておくべく、筆をとり・・・もといキーボードをうっています。 弊社の現在位置について 弊社略歴 …

こんにちは、オープンエイトのエンジニアの中野です！ 今月の1/15にメドピア株式会社さんとエンジニアイベント「あなたの知ってるRubyGemsTips」を共同開催しました。 今回はRubyのGemに関するTipsついて、いろいろと情報を交換するというテーマでLTを行いました。主催枠として、私もLTを行ったので、簡単に発表内容を紹介します。 イベントの概要は以下のURLから確認出来ます。 connpass.com 発表内容 LTのテーマは「algoliasearch-railsを用いて検索機能を実装してみた」 登壇資料は以下になります。 speakerdeck.com Algoliaとは Alg…

はじめまして、10月にフロントエンドエンジニアとして入社した松井と申します。 最近通勤時間にAmazon Audibleで読書ならぬ聴書をする様になりインプット量が大幅に増えました。歩きながらでも本が読める（聞ける）のでお勧めです。 さて弊社の事業の一つにVIDEO BRAINというAI自動動画編集クラウドがあります。 video-b.com フロントエンドはReact＋ReduxのSPAで開発されており、私はOPEN8入社前はNuxt.jsを使っていて、Reactはこれが初でした。Nuxt.jsと共通点も多いですが、異なる点も多く、特にディレクトリ構成がいまいち理解できていませんでした。 し…

de:code振り返り はじめまして。今年の４月に入社＆上京した新卒の田村です。今年の夏はサーフィンを始めようと考えているのですが、身体がだらしなさすぎるので先日ジムに入会しました。 東京のご飯が美味しすぎるのが悪いですね。東京のせい。 さて、先日Microsoft主催のde:codeというカンファレンスが催されました。 幸運なことにそれに参加する権利をいただけたため、簡単ではありますが、面白かったセッションの振り返りをしたいと思います。 HoloLens2 今回のde:codeで最も心が揺さぶられたのが、HoloLens関連のセッションです。 僕はde:codeの会場で初めてHoloLens…

こんにちは、オープンエイトでインフラ全般を担当している武田です。オープンエイトではサービス全般をクラウドサービスで実現していることから、AmazonのAWS・マイクロソフトのAzure・GoogleのGCPといたメジャーなクラウドサービス、akamaiのCDNサービスといった特化型のサービスなど数多くのサービスなど扱っています。インフラ担当とは、それらクラウドサービスの設計・構築・運用（つまり全て）を行っています。その関係から、各企業とはお付き合いがあり、この度日本マイクロソフトよりde:code2019へのお誘いがありましたので、参加してまいりました。 今回のテックブログでは少し遅くなってし…

新卒2年目の梅川です。部屋の中が暑すぎて、例年より大分前倒ししてクーラーを解禁しました。皆様も熱中症にはお気をつけください。 さて、今回は弊社の広告事業で用いている管理画面を様々な事情で新しく作り直すことになったため、その時の開発環境用のDockerとNginxを用いたロードバランサ（以下LB）設計についてお話ししようと思います。 全体の方針 作り直すことになった管理画面ですが、全てのページを一度に移行するわけではなく、完成したページから徐々に移行する方針をとりました。 そして、移行過程で必要になってくる適切なパスの振り分けを、LBで管理することにしました。 ステージング環境や本番環境では、A…

こんにちは、オープンエイトでiOSアプリエンジニアをしている常盤です。 通勤時間に小説を読むようにしたらQOLが爆上がりしました。 さて、私は約半年前にオープンエイトにジョインし、その時初めてSwiftに触れました。 弊社のサービスである女性向けおでかけ動画メディア、Letronc。iOSアプリではRxSwiftが使われています。 初めて触るSwiftという言語に加え、Rxという概念を理解するまでは艱難辛苦の日々でした。。。 そこでRx初心者に向けて、どうやって概念を理解してコードを書けるようになったかポイントを伝授しようと思います。 Rx is 何 Rx(Reactive X)とは、「オブザ…

こんにちは、最近ほんのり？ふくよかになったオープンエイトの正原です。 ダイエットをしたいとは思ってはいるのですが、 「まだ寒い、まだ慌てるような時間じゃない」と自分に言い聞かせています。 そもそも一度に10kgのみかんが届くことなどないよう、ふるさと納税は計画的にすべきでしたね。 さて、今回のテックブログなのですが、 最近私が設計しているiOSアプリケーションにおけるクリーンアーキテクチャとRxSwiftを導入する際につまづいた点についてお話したいと思います。 クリーンアーキテクチャ [引用元] : The Clean Code Blog クリーンアーキテクチャはよく分からなくても「この図は見…

2018年度に新卒で入社した東度です。配属当初はRailsでサーバーサイドを書いていたのですが、最近はReactでフロントを書いています。 自社プロダクトの一つであるVIDEO BRAINでは、CSS in JSのライブラリの一つであるstyled-componentsを使ってスタイリングをしているのですが、中でも度々登場するスタイル拡張について自身の勉強も兼ねて記事をまとめてみました。 styled-componentsとは 現在、CSS in JSの中で最も人気のあるライブラリで、要素にスタイルを付加したコンポーネントが作成できるというのが特徴です。 styled.div``のように記述す…

こんにちは、インフラ・データ基盤部の川島です。最近寒くなってきましたね。今年も終わりますね。心はすでに年末休みです。 先日、エンジニア交流イベント「スタートアップテック vol.1」を開催しました。 今回のテーマは、みんなが大好きな「Ruby」です。弊社のプロダクトもほとんど全てと言ってもいいくらいRubyを使っています。 主催枠として、私もLTを行ったので、発表内容を紹介できればと思います。 発表内容 LTのテーマは、「Rubyとffmpegのfilter_complex」について発表しました。オープンエイトのプロダクト全てが動画をベースに展開しているため、Rubyと同じく、全てのプロダクト…

こんにちは。初めまして。 OPEN8の大津( @14__oz )です。 技術ブログを始めることになりました！！ 編集長に抜擢され、初回の内容を任されています。 頑張っていきますのでよろしくお願いします！ OPEN8には2017年新卒エンジニアとして入社し、ルトロンのアンドロイドアプリを初期開発からやってきました。 ReactNativeを使っています。 詳しくは、Wantedlyインタビュー記事があるので読んでみてください。 www.wantedly.com 早速、初回のテーマですが、「技術書典5」に出展したときの話をします！ 新機能の開発が忙しいなか、時間を作って書き上げた技術書を頒布してき…