はてなブックマーク

はじめに 本記事でお話すること 声があがるまでの経緯 アプリケーションの背景 課題 ルール策定、ドキュメント作成へ コーディングルール コーディングスタイル その他 運用中 おわりに はじめに こんにちは！フルサポート開発チーム、エンジニアの下山です。 最近は猛暑のせいでバイクに乗る回数が極端に減っています。早くライダーに優しい気温の季節になってほしいです🥵 本記事でお話すること 今回は、フルサポート開発チームがメインで取り扱う管理画面※1のコーディングルールについてお話します。 ただし、コーディングルールの詳細については触れません。 では何の話をするかというと、そのコーディングルールができるまでの経緯とか背景とか目的とか… そういった事細かにまとめられる機会のあまりない内容についてお伝えしたいと思います。 ※1：管理画面とは弊社スタッフが利用する社内アプリケーションの総称です。 声があ

インフラを管理する際にTerraform Providerのアップデートが面倒になって放置していませんか？ それ、Renovateで解決できます。 こんにちは！DPEチームの酒井です！ 弊社ではインフラの管理にTerraformを利用していますが、Providerのバージョンアップデートは後回しにされていました。 そこで導入したものが、依存関係を自動更新してくれるRenovateになります。 Renovateとは？ docs.renovatebot.com Renovateはリポジトリの依存関係を自動的に検出し、更新を効率的に管理するツールです。 機能としては、最新の依存関係に関するPRの自動作成や、条件を満たした場合の自動マージがあります。また、様々なオプション設定により、柔軟なカスタマイズをすることが可能です。 Renovateの使い方 導入 GitHubを使っている場合には、GitH

こんにちは！クライアント開発チームの安野です。 クライアント開発チームでは、クライアントポータルという to B 向けのサービス開発を担当しており、私はそこでフロントエンド・バックエンドの開発に携わっています。 クライアントポータルの内容はこちらからも確認できるので、ご興味があれば是非ご一読いただけますと幸いです！ square.visasq.com そんなクライアント開発チームですが、この度、 Dependabot というライブラリの脆弱性管理ツールを導入しました。 今回は導入にあたって調査した Dependabot について共有できればと思います。 はじめに ソフトウェア開発において、外部ライブラリの利用はもはや常態化しています。 豊富な機能や開発効率の向上といったメリットから、多くのプロダクトにライブラリが活用されています。 しかし、外部ライブラリにも脆弱性が含まれる可能性があり、発

はじめに こんにちは！DPE（Developer Productivity Engineering）チームの高畑です。 最近カーオーディオにハマっていて、スピーカーを変えたり DSP アンプを導入したりとオーディオの沼に腰あたりまで浸かってしまいました。 スピーカーケーブルをちょっと良いやつに変えたりしてみたんですが、正直違いが分かっていないので頭まで浸かるのはまだ先のようです。 現在、ビザスクでは遅ればせながら MySQL 5.7 から MySQL 8.x へアップグレードするためのプロジェクトが進行しており、既存のデータを移行するため諸々の検証を行なっていました。 検証を進めるにあたり、データの移行に DMS (Database Migration Service) を利用する方針となったので、経緯や方法をご紹介したいと思います。 移行方法の検討 当初、既存の MySQL 5.7 デー

5月に入社した、ITチームの@enpipiです。 今回はCleanShot Xのトライアルから導入までの取り組みと工夫についてご紹介します。 1. CleanShot Xトライアルから導入の背景 2. CleanShot Xとは App + Cloud Proプランについて Webアップロードを禁止制御できる SSO, JITプロビジョニングの利用ができる 3. トライアルの開始 1ヶ月のトライアル期間の成果を最大化するために 1: 最短で全員にアクティベーションを促す 2: チャンネル参加からスムーズなトライアル開始 3: 初期設定からHowToをセルフサービス化 4: コミュニティを盛り上げる 不定期でTipsを投稿 CleanShot Xお触り会の開催 即レス・即時ドキュメンテーション 口コミでトライアル利用者が広がる 4. サーベイの取得と結果 殆どの人が効率化と品質向上を実感 業

暑くなってくるとだんだん食欲がなくなってきませんか？今年もそんな季節となりました。 今年の夏は北海道に行く予定です、私は本当にやるぞ。DPEチームの嶺岸です。 ところで、パブリッククラウド高くないですか？ 使った分だけお支払いいただきます、この売り文句を聞いて高くなると思うか、安くなると思うか、その感覚は人それぞれかと思います。しかし覚えておいて欲しい。使えば使っただけ支払わなければならないということを。 弊社のGoogle Cloud、高くない？ 私のコスト感覚を一言で言うと、「なんとなく」です。身も蓋もない。 この費用……なんか、変？何が高いのかな……？（裏声） という感じでなんとなくGoogle Cloudの請求レポートを眺めます。 期間を1年くらい、グループ条件を月 > サービスに設定すると、毎月どのサービスにどれだけ課金しているかが分かります。 そこから上位3サービスくらいをピッ

ビザスク開発１グループ エキスパート/lite 開発チームのよしけーです！ もうすぐ風来のシレン6が発売されますね。自分は初代とアスカ見参！しか経験がないのですが、14年ぶりの新作ということで久しぶりに手を出してみようかと思ってワクワクしている今日この頃です。 にしても。自分は現在30代後半なのですが、スラムダンクが映画化したり、るろうに剣心が再アニメ化したり、幽☆遊☆白書が実写化したり、紅白でポケビブラビが出たりしたりで子どもと一緒にワイワイできるコンテンツが多くていい時代ですね！自分は子どもいませんけど！ 本記事について 弊社では現在、サービスの成長に伴いモノレポからのサービス分割に取り組んでいます。 サービスごとに技術スタックが多少異なるのですが、自分が担当しているサービスのバックエンドでは FastAPI を使用しています。 FastAPI のマニュアルでは SQL のツールキット

こんにちは、今年の10月に入社したプラットフォーム開発グループ　DPEチームの酒井です。 先日 GitHub Actions に TFLint と Trivy を導入しました。 まとめて書くと長くなってしまうので、今回は TFLint 導入編です。 今回説明する部分は以下になります。 TFLint の設定 TFLint を GitHub Actions で動かす TFLintとは？ TFLint は、Terraform ファイルの命名規則や、インスタンスタイプのエラー、非推奨の構文、未使用の宣言など、静的解析してくれるフレームワークです。 github.com TFLint 導入 TFLint の install ビザスクの Terraform 環境周りではCLIパッケージマネージャーとして aqua を利用しています。 TFLint は aqua registry に存在していますので、

はじめに こんにちは！DPE（Developer Productivity Engineering）チームの高畑です。 ちょっと前に iPhone 15 Pro に変えてようやく USB-C ケーブルに統一できる！と思っていたら、手元にある Magic Trackpad が Lightning ケーブルでしょんぼりしました。 さて今回は、ビザスクのインフラ周りで利用している Terraform をエンジニア全員が安心・安全に利用できる仕組みづくりを行なっている話をしていきます！ これまで ビザスクではインフラの構築・運用に Terraform を利用しており、依頼ベースで DPE のメンバーが Terraform の修正を行なってレビュー＆リリースをしていました。 開発メンバーから Terraform の PR をあげてもらうこともありますが、plan / apply の権限を持っていない

はじめまして。エキスパート/lite 開発 の倉光と申します。 今回初の記事投稿として、私が日々愛用している tmux の紹介ができればと思います。 自己紹介 本編に入る前に、簡単に自己紹介をさせてください。 私は 2022 年 8 月にビザスクに入社し、気がついたら約 1 年ほど経っていました。 ビザスクに入社する以前は、インフラ系のメーカーで開発職として製品開発に従事していました。また、大学の出身学部も物理系であったため、 ビザスクに入社するまではプログラミングとは無縁のいわゆるエンジニア未経験として異業種異分野からジョインして、今は既存サービスの改善であったり、プロジェクトの開発に日々従事しています。 そして、テックブログって一体どんな内容を書けばいいんだ・・ネタが思い浮かばん・・と先延ばしにしていたら日々の開発に圧倒されているうちに丸 1 年経過していたことに驚き、遅ればせながら今

こんにちは！DPE（Developer Productivity Engineering）チームの高畑（Sorarinu (@int_sorarinu) / Twitter）です。 最近は月一のキャンプを楽しみに日々を生きていて、栃木県のとあるキャンプ場が最高すぎてリピートしまくっています。 今回は、ビザスクのメンテナンスを行う際の仕組みを刷新したお話をしてみようと思います！ これまでのメンテナンスの仕組み ビザスクではアプリケーションの定期メンテナンスを行う際に「メンテナンスモード」へと移行して、メンテナンス期間中にアクセスされた場合にメンテナンス画面を返すようにしています。 その際、アドバイザー用の画面、クライアント用の画面、社内の管理画面のそれぞれでメンテナンス用のインスタンスをデプロイ・トラフィックの切り替えを行なっていました。 メンテナンスの画面を返すだけであればこの仕組みで問題

こんにちは、プラットフォーム開発グループ SREチームの西川 (@taxin_tt) です。 皆さんTerraform使ってますか? 弊社では既存サービスのマイクロサービス化を進めており、GCPベースのインフラはTerraformを利用して整備するようにしています。 一方で、サービス数の増加などに比例してtfファイルのコード量も増えていき、ディレクトリ構成や個別のリソースの定義などマイクロサービスのインフラ整備において負担になる部分があり、昨年末からSREチーム主導でリファクタリングを行っています。 今回は、そのリファクタリングの背景や進め方についてお話しできればと思います。 (本記事は、Terraform v1.3系を前提にしています。) リファクタリング後のTerraformのディレクトリ構成は下記をベースにしているので、下記の記事も合わせてどうぞ。 tech.visasq.com リ

こんにちは！フルサポート開発チーム兼 Embedded SRE の高畑（Sorarinu (@int_sorarinu) / Twitter）です。 最近、スノーボードだけでなくキャンプにも手を出してしまった結果、どんどん沼にハマっていっている私ですが皆さまいかがお過ごしでしょうか。 先日のシルバーウィークで 3 連休それぞれキャンプに出かけていたのですが、両日とも台風の影響で生憎の大雨となり雨濡れ耐性が格段に向上してしまいました。 さて今回は、弊社でも利用している Terraform のディレクトリ構成について、改めてベストプラクティスってなんだっけというものを考えてみたのでご紹介いたします。 事の発端 今ではマイクロサービス化も進み、各サービスそれぞれで Terraform のコードが増えてきている状態となっています。 既存の Terraform では変数（ creation フラグ）

こんにちは。SREチームでリーダーをやっている木村です。 座右の名は「明日自分が交通事故にあっても、システムの運用を滞りなくする」です。 2021年から SRE 責任者の役割をしていますが、その中でいわゆるマネジメントという業務を行っています。 本日は、この答えのないマネジメントについて少しお話をさせていただけたら。と思っています。 そもそもマネジメントとは何をすれば良いものか？ 初めてマネジメント業務をすると大体の人がこの疑問を最初考えると思いますが、 大きく分けると2つに分類されるかと思います。 成果を上げるための仕組みを作る 業務の割り振りや、メンバーの成長するための仕組み等を整えたりすること リーダーシップ その場に集まっているメンバーに目標やビジョンを共有し、周りのモチベーションを高めチームの成果が メンバー = 1 のエンゲージメントではなく、 メンバー = 1.xx にするた

こんにちは。SREチームでリーダーをやっている木村です。 座右の名は「明日自分が交通事故にあっても、システムの運用を滞りなくする」です。 先日、ビザスク SRE チームでオフサイト (半日程時間をとって集中して、テーマに関して議論する時間です) を行って「次の半年でやりたいこと」を議論しましたので、 こちらの内容を生々しくお伝えしていきたいと思います。 なぜオフサイトを開いたのか？ 日々の業務で SRE チームは同期・非同期的な積極的にコミュニケーションを取りながら日々の仕事をしていますが、 日々の中だとどうしても目の前の課題にフォーカスした内容になり、中長期的なちょっと遠い目線の話しは後回しになりがちです。 とはいえ中長期的にどこに目指すのか？の目線あわせをしないと、意思疎通や認識齟齬が発生をして「こう思っていた」や「そうだと思っていた」 という思い込みによる無駄が発生します。 そのよう

こんにちは！フルサポート開発チームの高畑（Sorarinu (@int_sorarinu) / Twitter）です。 つい最近、ISUCON 12 の予選があったようで、 Twitter のトレンドに「SQLite」が上がっていて DB 屋さんたちがザワザワしていたようですが、皆さんいかがお過ごしでしょうか。 自分は ISUCON 9 以来参加できていなくそろそろ参加したいなと思っているのですが、その前に社内の管理画面をパフォーマンスチューニングして ISUCON の雰囲気を思い出してきたのでご紹介します。 これまでの現状 ビザスクの管理画面が出来てから結構年数が経ってきており（first commit が 2012 年）、所々 N+1 を許容する実装や DB の JSON カラムなどが存在しており、ユーザが増えていくにつれて段々とパフォーマンスに影響が出てきていました。 情報量が多いペ

はじめに こんにちは。SREチームの西川です。 現在、ビザスクではサービスのインフラ基盤のリプレイスに伴い、Sentry+Datadogを用いたサービス監視体制を整備しています。 その中で、継続的に抱えていた「運用の属人化」という課題に対して、ツール面からアプローチできないかという思いがありました。 今回は、「運用の属人化」に対する課題意識、ツール利用の観点から属人化へのアプローチについてまとめます。 課題意識 ビザスクでのサービス監視系の運用作業 (e.g. エラー対応) に関しては、各サービスチーム+SREチームで実施しています。 上記の運用作業を行う中で、下記のような課題が挙がっていました。 エラー対応などの運用作業が特定のメンバーに集中している社内からの問い合わせ・事象調査の際に、複数のツールの使い分けが必要になったり、調査に必要な情報にリーチしづらいケースがあるエラー対応の過去ロ

アドバイザー/lite開発チーム フロントエンドエンジニアの小柳(@mascii_k)です。 はじめに 弊社サービス「ビザスクlite」では、Vue 2.6 向けのプラグイン @vue/composition-api を 2020/02 から導入しています。 tech.visasq.com ビザスクliteでの導入実績とノウハウ蓄積の結果、社内で利用している管理画面のフロントエンド(Vue 2.6)環境にも @vue/composition-api を導入することになりましたが、当時の判断で古いバージョンのものを導入してしまいました。 しくじりの経緯 2020/09 当時の最新バージョンであった @vue/composition-api 1.0.0-beta.14 を導入しようとしたところ、vue 本体のバージョンが 2.6.10 (当時の最新バージョンは 2.6.12)だったため、コンパ

エンジニア採用広報担当のぐりこ ( @glico800 ) です。 前回の基本編に続き、今回も最近開発チームで試しに使っている Gather.town について、はじめて触るときに押さえておきたい基本操作をまとめてみました。 今回は「初級ビルド編」として、自席の周りの飾り付けや間違えて消してしまった Object の復元について解説したいと思います。 ※今回はブラウザ版を前提に解説を進めるので、アプリ版をご利用の方は若干ボタンの位置などが違うかもしれません。予めご了承ください。 ※本記事に書かれている内容は 2022/03/16 時点での仕様に基づいて書かれています。最新の情報は 公式ページ を参照してください。 2つのビルド方法 スペース内でのビルド スペース内でのビルドでは、Object を自由に配置することができます。 こちらは Build 権限が不要なため、誰でもビルド可能。 ただ

こんにちは、ビザスクアドバイザー開発チーム、フロントエンドエンジニアの山元(@yamagen0915)です。 はじめに 弊社にはいくつかのフロントエンド環境があり、その中には TypeScript の strict mode が有効でない環境もあり、それらを strict mode が有効な環境へ移行を進めようとしています。 しかし移行と並行して新規開発も行われるため、strict mode でエラーとなるコードを増やさないようにする必要があることと、各チームのメンバーに strict mode な環境に慣れてもらう必要がありました。 そこで vue-tsc を使ってデプロイには影響を与えずに開発時のみ strict mode が有効な環境で開発ができるようにし始めたのでその方法を紹介したいと思います。 vue-tsc とは vue-tsc とは VSCode の Vue 向け Exten

ビザスクlite事業部フロントエンドエンジニアの小柳(@mascii_k)です。 弊社では Vue.js 2.6 を利用していますが、AngularJS や jQuery などで実装された古いフロントエンド実装を Vue.js でリプレイスしている状況です。 そんな状況の中、ビザスクlite の「事前相談画面」のデザインリニューアルと同時にフロントエンド実装もリプレイスすることとなり、フロントエンド設計・実装を担当することになりました。 今回は「事前相談画面」のリプレイスで Vue Composition API を導入するに至った経緯やモチベーションを紹介いたします。 デザインリニューアルの経緯について、デザイナーの長岡の記事(UI/UX改善！事前相談リニューアルの歩み)もぜひご覧ください。 事前相談画面について 事前相談画面とは、ビザスクのアドバイザーと依頼者がスポットコンサルを実施す

ビザスクlite事業部フロントエンドエンジニアの小柳(@mascii_k)です。 弊社ではモダンなフロントエンド開発手法にシフトしつつあり、Figma で構築したデザインシステム上でデザインし、それに対応するものを Vue.js 2.x 系で実装する開発がスタンダードとなっております。 現在 Vue.js 3.0.0 の正式リリースが間近とされていて、弊社としても積極的にマイグレーションをしていきたいと思っております。 今回は Vue 2.x 系向けに作られた UI コンポーネントの Vue 3.0 系へのマイグレーションに向けた検証結果を公開します。 弊社の UI コンポーネント事情 弊社では Vuetify や Element UI といったコンポーネントフレームワークには依存せず、極力スクラッチで UI コンポーネントを作って開発しています。 Figma を活用して管理されているデザ

こんにちは! 2020年2月からSREチームにJoinしました木村です! 仕事をする上での座右の銘は「明日交通事故にあってもシステムと仕事を回せるようにすること」です。 基本に戻って始める。と表題では書いていますが、私元々はAWS職人でGCPに本格的にコミットしてからまだ3ヶ月位です! なのでヒィヒィ?言いながらGCPのキャッチアップに努めているわけですが今回は過去にAWSで得たInfrastructure as Codeの知識とビザスクに入社してキャッチアップで培ったGCPの知識を元に基本に戻って始めるGCPのInfrastructure as Code再入門ということで書かせていただきます。 前回はAnsibleのplaybookの実践的な使い方迄を説明しましたので、今回はAnsibleをProvisioningしたOSImageをPackerで作成する所までやっていきたいとおもいます

はじめまして！11月よりビザスクにジョインした渡部と申します。 現在UXチームに所属して、Visasqの使い勝手の向上に日々奮闘しております。 さて、本投稿ではAngular2の簡単なTIPsをご紹介します。 こちらの画像は今回の内容を元に実際のサービスに組み込んだものになります。 私自身Angular2を使うのは初めてで、勉強しながら覚えたことを記載しています。 拙い部分もあるかと思いますがご容赦くださいませ。 ビザスクでのAngular2 実はビザスクでのAngular2の利用はまだ一部に留まっています。 もともとはAngularJS（いわゆる1.x系）をfrontendのフレームワークとして採用していて、ある機能をリニューアルするにあたり新規実装部分をAngular2で実装した、というのが経緯のようです。 1.x系ではなく2.x系を採用した理由や、移行について考えたことなど、興味深い