今回は styled-components で記述したはずのスタイルがうまく反映されていないという事象に数日間悩まされたのですが、最終的にあっけない解決方法だったので同じ悲しみを背負う開発者が少しでも減るよう記事に残します。

こんにちは！！ vivit で SRE をやっている 宮本 です。 先日、開発部のメンバーで画像生成AI の Midjourney を試してみる（遊んでみる）会があったので、その模様をレポートしたいと思います！ 合わせて、vivit で導入しているエンゲージメントを高める為の福利厚生についてもご紹介します。 今回のエントリーはいつもよりネタ要素が強めです。 ためになる話は殆ど無いので、その点はご容赦ください 🙇‍♂️ 開催のきっかけ vivit には部署内メンバーのエンゲージメントを高める為の素敵な福利厚生があります。 その名も、「エンゲージメント費用」です！！ 概要 四半期ごとに支給で、繰越…

はじめに アウトドア用品のセレクトショップ hinataストア の運用チームで開発をやっている氏家です。 hinataストアはShopifyテーマによって構築されており、Liquidのコードを変更して様々な機能を実装しています。 hinatastore.jp 最近、外部から出力してきたJSONファイルをLiquidで扱いたい場面がありました。 なるべくLiquidで完結させたかったのでLiquidでのJSONの扱い方について調べていたのですが、 少し苦戦したので備忘録も兼ねてブログを書いています。 前提: Liquid ではJSONを扱えない .json ファイルをLiquidでインポートして…

こんにちは！バックエンドエンジニアの北條です。 23卒大学生で、今はインターンとして業務に携わっています。 現在「hinataメディア（以下メディア）で使用しているAPIをリファクタリングをする」というタスクを行なっているのですが、新しい発見や学びが多くありました。 メディアのエンジニア向けにドキュメントを作成したのですが、タスクの背景や個人的な感想を交えたカジュアルな記録も残したいなと思い記事にしました。 タスクの始まり メディアはバックエンドとフロントエンドが分かれており、バックエンドはAPIを作成するのが主な業務になります。 書き方にルールが決まっていなかったのでAPIの作成が人によって…

フロントエンドエンジニアの氏家です。 私は現在、アウトドア用品のセレクトショップ「hinataストア」の運用を行うストアチームで開発をしています。 hinatastore.jp hinataストアは Shopify で構築されており、フロントエンドは Shopify Theme を使用しています。 最近、hinataストアで取り扱う商品が増えてきており、連れ各コレクションに表示する商品数が多くなってしまっています。 そのため、目当ての商品をすぐに見つけられなくなってきました。 そこで、コレクションページに商品の絞り込み機能を追加し、「カラーチップを押すとその色と同系色の商品が絞り込まれる」ため…

こんにちは！vivitの技術開発部マネジャーの井島です。 開発部ではマイクロサービスアーキテクチャを採用しており、そのアーキテクチャの考え方について話したいと思います。 この分野は個人的に好きで、一生話してられます笑 はじめに 一般的な「マイクロサービス」の知識は知っている前提で、それをどれだけ自分たちの組織向けにアレンジできるかが、肝になると私は考えています。 マイクロサービスは会社の組織構造に密接に関係します。 ビジネス側の組織構造、開発側の組織構造、プロダクト、事業方針、技術方針、採用方針、（経営方針）など。 会社として最終的にアウトプットを最大化していかなければならない状況下で、どれだ…

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 今回は自分の担当しているhinataレンタルで Shopify アプリケーションと連携する必要ができ Storefront API を使う事になりました。 hinata-rental.me hinataレンタルを始めとした弊社各サービスでは元々バックエンドとの通信に GraphQL を使っており、本記事の趣旨としては新しく Storefront API の GraphQL エンドポイントに接続するために調査した結果となります。 TR;DL ApolloLink.split メソッドを使うと、もう一つ GraphQL エンドポ…

こんにちは！今年12月からレンタルチーム（hinata rental）のバックエンドエンジニアとして入社した河原田です。 私はvivitに入社する前は受託開発会社のバックエンドエンジニアとして3年弱Golangを書いていました。 自社サービスを開発するのは初めての経験だったのですが、vivitに入社して感じた４つのことを紹介していこうと思います。 すごい数のマイクロサービスが動いている vivitではキャンプに関する様々なサービスを展開しています。 キャンプ・アウトドアのWEBマガジン キャンプ用品の販売 キャンプ場の予約・検索サービス キャンプ用品のレンタル キャンプ用品の買取サービス 各サ…

キャンプ場を検索・予約できるサービス(以下hinata スポット)などの開発を担当している名嘉眞です。 hinata スポットなどvivitのいくつかのプロダクトでは、フロントエンドとバックエンドの間にBFFが存在しており、BFFではGraphQLを採用しております。 またBFFはGoで書かれていて、gqlgenというライブラリを使用しています。 今回は画像ファイルのアップロード機能をgqlgenを使って実装した話をします。 実装内容としては、gqlgenのドキュメントに記載されているファイルアップロードの例とほぼ同じです。 gqlgen File Upload このドキュメントを見てもらえれ…

こんにちは！！ vivit で SRE をやっている 宮本 です。 今回は hinata レンタル で行っている E2E テストを GitHub Actions で実行できるように CI パイプラインを構築したので、構成やポイントなどを紹介したいと思います！！ 要件とか コミットを GitHub に push したタイミングで E2E テストを実行する E2E テストなので、依存する複数のマイクロサービスも立ち上げる必要がある マイクロサービスのソースコードは CI を実行するリポジトリとは別のリポジトリに存在するものもある 多少実行時間がかかったとしても、なるべくマイクロサービスをモックにす…

これを見れば vivit の技術スタックが全て分かります！！

こんにちは！技術開発部の北條です。 今回は僕が改めて新卒としてエンジニア就活をするならどういったことを重要視するかを考えてみました。 インターンとして5ヶ月経過し、就活の時点で「知っておければ良かった、勉強しておければ良かった」という点があるので紹介します。 尚、この記事はメディアチームでの経験なので他のチームとは異なる部分があるかもしれませんが予めご了承ください。 掲げていた就活の軸 僕は「人生を豊かにするようなサービスを提供する」「ビジネスサイドとの距離が近い開発体制がある」の2点を就活の軸として掲げていました。 vivit.hatenablog.com 大学の授業でC言語を触っていたもの…

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 hinataレンタルでは先日会員機能をリリースいたしました。 当記事は会員機能実装にあたり調査していく上で適当なパスワード変更のサンプルを探しても現在の環境に丁度よく流用できそうなものが見当たらなかったため執筆に至りました。 hinata-rental.me 前提 Next.js v9 以降 TypeScript v4.2.3 Firebase v9 この記事で利用している各技術の詳細な説明は省きます。 利用例 パスワード変更機能にも様々あると思いますが、今回は「現在のパスワード」と「新しく設定するパスワード」を渡す形式を採…

こんにちは。 vivit で SRE をやっている 宮本 です！ 素晴らしい Kubernetes（以降 k8s） ライフを送るために欠かせないのがダッシュボードです！ ダッシュボードには見やすさ、網羅性、操作性など沢山のものが求められます。 k8s の場合はさらに、多くのコンポーネント（Deployment、それに紐づく ReplicaSet 、 Pod など）が絡み合っており、使いやすいダッシュボードを作るのは結構難しいです。 一般的なダッシュボードと違って、k8s ではリソース（特に Pod）の更新やオートスケーリングが頻繁に行われるため、今現在の Cluster の状態を自動更新で即座…

はじめに こんにちは、技術開発部 事業横断チーム データエンジニアの多田です。 入社時はアプリエンジニアだった私、hinataアプリの保守・運用をたまにやっております。 最近、Amazon SNSのiOS Push通知認証方法を証明書形式から認証キー形式に変更しました。 ただ、Amazon SNSでの認証キーを使ったPush通知認証についてネットにあまり情報がなかったため、記事にまとめてみます。 概要 hinataアプリのPush通知にはAmazon SNSを使用しています。 最近、Amazon SNSに登録しているiOS Push通知証明書を更新する必要がありました。 作業する際に、2021…

こんにちは！技術開発部マネージャーをしている井島です。 今回はvivit に私が入社当時（2020年1月）に開発部で社内LTをやっていたことがあり、趣味全開の内容があったので、それを紹介しようと思います！ vivitでは2021年8月からマネージャーを行っていますが、それ以前はSREでした。前職では新卒からインフラエンジニアをやっており、この分野は好きです。 なんだかんだ20万円以上かかっている まずは全体の写真です。 ブログ執筆現在もこの構成なのですが、高スペックPCが買えるくらいですね... ベアボーンという小さな筐体を使ってます。バッファローのHubはジャンボフレーム対応。電源タップは業…

こんにちは！技術開発部の北條です。 私は23卒エンジニアとして入社が決まっており、2022年3月からインターンとして参加しています。 今回はvivitへ入社を決めた理由や一ヶ月間のインターン内容、vivitの雰囲気について紹介します。 本ブログでは、21卒の氏家さんが入社した理由やインターンの体験談についての記事も公開されています。私自身、就職活動において「年齢の近い新卒の言葉」がとても参考になったので、この記事が24卒以降の方や技術開発部に興味のある方の参考になれば幸いです。 vivitの内定を決めた理由 私はWantedlyでvivitのミートアップに参加したのが初めての出会いでした。 ミ…

キャンプ場を検索・予約できるサービス(以下hinata-spot)の開発を担当している名嘉眞です。 hinata-spotではbackendにGoを、backend間の通信にgRPCを採用しています。 今回はgRPCのServer Streamingでメタデータも一緒にレスポンスする方法をブログにします。 どんな時に使うのか あまり多くはないかもしれないですが、Server Streamingで通信したいユースケースで、かつそのユースケースで使うメタデータなどもレスポンスしたい場合です。 例えば、1つ1つが容量の大きなデータを複数レスポンスする必要があり、そのデータ総数などのメタデータも送信し…

フロントエンドエンジニアの氏家です。私が新卒としてvivitに入社してから早くも1年が経過しました。 入社してすぐのとき、アウトプットとしてこのエンジニアブログを頻繁に更新していたのが懐かしいですが、今回はそんな私がvivitで1年間働いて、具体的にどんなことをやってきたか四半期ごとに振り返りたいと思います。 4~6月 (チームローテーション期間) 新卒エンジニアとして入社してからまず最初にやったことは、MAU350万を超えるアウトドアメディア「hinata」の開発です。入社前のインターンでもお世話になったmediaチームで、フロントエンド開発に携わりました。 チーム開発による業務に慣れておら…

こんにちは！技術開発部 media開発チームリーダーの河村です。 今回はvivitで使用しているタスク管理ツールの「asana」について、こんな使い方をしているという事例を交えつつ紹介します。 asanaについて asanaとはvivitで使っているタスク管理ツールです。 vivitでは入社当時の2020年初頭から無料プランで使っていましたが、当時は技術開発部だけが使用しており、主なプロジェクト管理はスプレッドシートで行われていました。 その後、スプレッドシートより圧倒的にタスク管理がしやすいということで全社的に使うようになりました。 私はいろんな現場でRedmine, Wrike, back…

こんにちは。 vivit で SRE をやっている 宮本 です！ 今回はサービスを Dos 攻撃から守るためにレート制限を導入した際に得られた知見をまとめてみたいと思います。 vivit の各サービスは GKE 上で動いており、 GKE Ingress から最初に転送する Pod は基本的に Nginx のリバースプロキシです。 Nginx からユーザーが利用するフロントや API などにアクセスします。 図にすると、以下のようになります。 どうやったのか やり方自体はシンプルで、 Nginx が提供しているレート制限の仕組みをそのまま利用しただけです。 こちらの Nginx 公式ブログ が分…

こんにちは、技術開発部の河村です。 アウトドアメディア、hinataの開発リーダーをしています。 2021年9月-12月にかけてvivit社内で「エンジニア組織論への招待」の輪読会を行いましたが、今回はその中で普段使っている言葉の意味を改めて知ることで目から鱗だったものをまとめてみました。 gihyo.jp 輪読会を始めたきっかけ vivit社内では2週間に1度のペースで1on1を行っており、より1on1が有意義なものになる方法がないかと「メンタリング」というキーワードからこちらの書物に辿り着きました。 それ以外にもチームをより強くするために有益な情報がありそうだったので、社内でも私のようにこ…

はじめに フロントエンドエンジニアの関です。 vivit株式会社では一部の社員がリモートワークでの業務を行っています。 リモートワークの詳細な取り組みについては下記の記事をご覧ください。 vivit.hatenablog.com 私個人としては感染症リスクについてはともかくとして、リモートワークはしたいもののオフィスでの顔を合わせる業務もバランス良く行いたいと思っています。 今回は最近流行りのデスクツアーと題してオフィスと自宅の両方で快適に作業をするための工夫や商品の紹介ができればなと思います。 オフィス こちらがオフィスでの私のデスクです。(写真は一部加工しています) 恐らく社内でも随一好き…

こんにちは。 vivit で SRE をやっている宮本（https://github.com/tatsuro-m）です！ 今回は Datadog で「リリース後にだけ」利用するモニタリングリソースをどうやって作成、運用していったかを書いてみようと思います。 基本的には常時 OFF（ミュート）で、リリース後に ON（アンミュート）になり、1時間後に自動で再度ミュートします。 背景 一般的に、何らかのリリースが起点となって障害が発生することは多いと思います。 vivit では常時 Datadog モニターを利用してエラー率、 SLO の監視をしていますが、タイムウィンドウが１週間と長くなっています…

はじめに vivitで hinata spot というキャンプ場の検索・予約サービスのbackendを担当しています名嘉眞です。 hinata spot のbackendはGoで書かれています。 今回は、Goでコンストラクタ関数(完全コンストラクタ)を定義した際の問題や対応策について書きます。 ※この記事の内容はチームの方針や実装者の考え方、サービスの仕様やユースケースにより変わる部分もあると思いますので、ひとつの参考になればと考えています。 Goでコンストラクタ関数(完全コンストラクタ)を実装 hinata spot では全ての箇所ではないのですが、値オブジェクトの生成などで、 コンストラク…

はじめに こんにちは！開発部マネージャーをしている井島です。 開発部では以下で紹介されているように、強みとして「ナレッジ・ドキュメントが豊富」も挙げられています。 vivit.hatenablog.com 今回は、実際にどんなドキュメントがあるか少し紹介していきたいと思います。 vivitはドキュメントのツールとしてDocBaseを主に使っており、必要に応じてGoogleのドキュメント、スプレッドシート、スライドも使っています。 開発部 全般的な資料 各画像はDocBaseの画面になります。 開発部全体、各プロダクト開発チーム毎の振り返り資料で、主にKPT(Keep, Problem, Try…

はじめに こんにちは、技術開発部 事業横断チーム ひよっこデータエンジニアの多田です。 前回の記事を書いてから一月ほどでしょうか。 前回は自称データエンジニアでしたが、今はひよっこデータエンジニアをしています。 vivit.hatenablog.com 最近分かったのですが、弊社の選考に進まれる方は結構このブログを見てくれるようです。 そのため、今後vivitに興味を持ってくれたエンジニアの方々に少しでもvivit開発部の特徴・雰囲気が伝わればいいなと思い、定量的にそれを解説してみます。 ということで、以下の項目を部内でアンケートを取ってみました。 せっかくなので業務委託の方にもご回答頂いてま…

技術開発部の小原です。 アウトドア用品専門買取・販売サービス、hinataリユースでバックエンドの開発を行なっています。 www.hinatareuse.jp はじめに 新型コロナウイルス感染症の拡大に伴う出勤抑制の方策として、一部リモートワークでの業務を行なっています。 現在、技術開発部では水曜・金曜の週二日を出勤日として、それ以外はテレワークでの業務を行なっていますが、 家庭の事情や体調不良の場合は、申請することでフルリモートワークでの業務が行えるようになっています。 私としては、このご時世感染リスクを考えると、出社に伴う移動は最小限に減らしたいですし、 PCとネットワークの環境さえあれば…

フロントエンドエンジニアの氏家です。 最近、JavaScript のフレームワークであるSvelteに関する記事を多く見かけるようになりました。 僕の中で「何か新しいフレームワークが出てるなぁ」から「面白そうだし触ってみよう」という気持ちに変わったので、vivit の数多くのプロダクトで採用している React と新進気鋭な Svelte を比べてみて、何がどう違うのか体系的に学んでいこうと思います。 そもそも Svelte とは https://svelte.jp/ では以下のように説明されています。 Svelte はユーザーインタフェースを構築する先鋭的で新しいアプローチです。React …

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 プログラマとして自分で新しくコードを書いたり、誰かの書いたコードをメンテナンスする中で「良いコードとは」を悶々と考える日々を送る中、先日 Twitter のタイムライン上で mithi/react-philosophies というリポジトリを偶然見かけました。 github.com things I think about when I write React code. (Reactコードを書くときに考えること。) のイントロダクションで始まるこの文章が、普段自分が React でアプリケーションを書いてる中でぼんやりと考…