遠隔監視や自動運転の分野において、画面内の「どこまでが空で、どこからが海面（地面）なのか」をシステムに理解させることは、状況を正しく認識するための基本です。この技術は、ドローンの姿勢制御や、船舶の安全運航、あるいは海岸線における広域監視システムなど、多彩なシーンで求められています。本記事では、どのような画像処理技術を使って過酷な海の環境に立ち向かったのか、その技術原理をわかりやすく解説します。今回使う画像は以下の通り、霧、山岳などのノイズがある動画の一部です。赤外線ではなく、可視光線の画面を使っており、濃霧、激しい波、夜などの肉眼も認識しにくい場合は本文の討論範囲外です。また、Sema...

０. はじめにどうも、株式会社WOGOでインターンをしている奥田です！現在僕は、3D CADデータ（3Dモデル）と2D CADデータ（図面）を対応づけるアルゴリズムの開発を行っています。この実現には、「3Dモデルを特定の方向から投影した形状」が「2D図面上のどの投影図と一致するか」を自動判定する仕組みが不可欠です。つまり、「位置や角度が違っていても、2つの図形が同じ形かどうか」を見抜けるマッチングアルゴリズムが必要になります。そこで本記事では、この課題を解決する「平行移動・回転に対して不変な、ベクタ画像のマッチングアルゴリズム」について、グラフ理論を用いたアプローチで解説し...

はじめに株式会社WOGOでインターンをしている中川です。Pythonで3Dビューアを備えたデスクトップアプリを作ってみたいと思います。今回は3DビューアにPyVistaを使い、PySide6によるGUIに載せることにしました。 ライブラリ選定 3Dビューア3Dの描画ができるライブラリで、有名なものには、Matplotlibがあります。しかし、デスクトップアプリを作るうえで、描画するだけでなく3Dデータへの操作もできるようにしたいです。そこで、3Dデータの描画、操作をできるライブラリである PyVista を使用することにしました。 PyVistaとは3Dデータの...

はじめに2D平面上で、伸び縮みしない棒と関節からなる部品を考えてみよう。三角形は変形しない。四角形は潰れるように変形する。四角形に対角線を１本加えると、変形しなくなる。では一般に、頂点と辺からなる構造が変形しないための条件は何か？辺が何本あれば良いのか？本数だけで決まるのか？つなぎ方も関係するのか？この問いに対して、2DではLamanの定理(1970)が必要十分条件を与えている。答えは「本数だけでは決まらない」。全体の変数に加えて、どの部分を取り出しても辺が偏りすぎていないことが必要になる。この条件を満たすグラフをLaman Graphという。Laman Graphは構造...

こんにちは、WOGO の河野です。この記事では、SVG を使って、ドラッグした要素をはみ出す効果線を実装してみたいと思います。 0. canvas でもいいのでは？ある要素をドラッグしたときに、ドラッグ元から現在のカーソル位置まで矢印が伸びるようなインタラクションを実装したいとします。単純に考えると、ドラッグ対象の要素に canvas を重ねて線を描けば良さそうです。しかし、カーソルが要素の外に出ると線が途切れてしまいます。より良い方法として、画面全体を覆う SVG を fixed な div 上に配置することで、DOM の構造を気にせず、要素の端で途切れさせずに効果線を描...

はじめに株式会社WOGOでインターンをしている高橋です。最近、社内Slack用のSlack Appの開発に取り組んでいます。Slackの自動化手段は一つではありません。ノーコードで使えるWorkflow Builderから、ホスティングが必要なBolt SDKまで、選択肢に幅があります。要件によっては、シンプルな方法で十分に解決できるケースもあります。この記事では、いくつかの場面を取り上げて、どの手段を選ぶべきか整理します。 自動化手段の選択肢手段コーディングホスティング向いているケース既製品App不要不要メジャーサービスとの連携Inc...

はじめにReactで setState した直後に関数を呼んだら、更新前の古い値が使われてしまった。——そんな経験はないでしょうか。本記事では、業務中に遭遇したこの問題をきっかけに、Reactのstate更新タイミングとライフサイクルを整理し、具体的な対処法をまとめます。 業務で遭遇した問題検索ボタンの実装中に、次のようなコードを書きました。const handleSearch = () => { setState(newQuery); // refetch用のクエリ更新 refetch(); // 新しいクエリstateを元にデータ再取得};期...

はじめにこんにちは、WOGO鶴岡です。Terraform使ってますか？Terraformで立てたリソース、今すぐ削除できますか？Terraformを使用してクラウドリソースを作成していくことのメリットはいくつかありますが、とりわけ重要なのはtfファイルを変更することで実際のリソースも即座に変化させられるという即応性と言えます。例えばサービスをスケールアウトしたいと思えばtfファイル上の数値を書き換えるだけで済みますし、ステージング環境をまるごと作り直したいと思えば terraform destroy してから terraform apply するだけで完了します。つまりT...

こんにちは、WOGOの千葉です。2026年度も始まるのでWebPからAVIF画像に乗り換えていきたいと思い、画像の変換やブラウザのことなど必要な情報を整理してみました。 AVIFについてAVIFは高い圧縮率と画質維持を両立できる画像フォーマットです。詳しいメリットについてはMDNの記事を参照してください。https://developer.mozilla.org/ja/docs/Web/Media/Guides/Formats/Image_types#avif_画像 ブラウザ対応状況AVIFのブラウザ対応状況ですが、2024年以降は主要なモダンブラウザでサポートされていま...

0. はじめにはじめまして。株式会社WOGOでインターンをしているそのじゅんです。この記事では、複数の図形から「外周」だけを取り出す問題について解説していきます。具体的には、座標空間上に複数の凸な閉路グラフ（凸多角形）がの頂点座標が与えられたときに、それらの和集合の外周を求めるという問題です。人間に解かせれば一瞬でできるタスクです。ところがこれを 「任意の凸図形に対して必ず正しく動くアルゴリズム」としてコンピュータに教え込もうとすると、意外と一筋縄ではいきません。使うアルゴリズム自体はそれぞれ難解ではありませんが、幾何学グラフ理論数値計算の扱いといった知識を...

はじめに株式会社WOGOで開発インターンをしているmanato1fgです。本記事では、大量の図面データを保存することを題材に取り、数ある画像の保存形式について定量的・定性的な比較を行います。JPEGやPNGといった古くからある保存形式に加え、近年ではAVIFやWebPなどの新しい規格も登場してきました。画像を専門に扱わない場合、JPEGは不可逆圧縮でPNGは可逆圧縮であるといったざっくりした特徴だけを知っていたり、AVIF/WebPは新しくてJPEG/PNGよりも圧縮効率がいいと思っていたりする方も多いのではないでしょうか。もちろん、後発の規格が古くからある規格よりも優れている...

こんにちは。WOGOのインターンをしている野口です。前回の記事ではWPFのBlazorアプリにTailwindcssをミニマムに導入する方法を解説しました。今回はその記事の中でできないと言っていたBlazorのHot Reloadと、TailwindcssのJITモードを共存させる方法について考えていきたいと思います。https://zenn.dev/wogo_techblog/articles/811ec4e5c7a0e4 時代はDXなんだ.NET Hot Reload applies code changes, including changes to styleshee...

0. はじめにはじめまして、株式会社WOGOでインターンをしている原と申します。AIの進化により、エンジニアリングのハードルは劇的に下がりました。これまで「実務経験の壁」に阻まれていた未経験者でも、適切な課題解決アプローチさえあれば、現場の負を解消するツールを爆速で生み出せる時代です。本記事では、実務経験ゼロだった私が、社内の日程調整業務を自動化するChrome拡張機能をわずか2週間で開発した経験を通じ、なぜ今、既存サービスを待つのではなく、自分たちで『ワンポイントの最適解』を作るべきなのかについてお話しします。 1. 背景現在、多くのSaaS（外部サービス）が存在します...

はじめまして。WOGOのインターンでエンジニア部門の野口です。この記事ではWPFのBlazorアプリにTailwindcssをミニマムに導入する方法を解説します。 Tailwindcssを使えば救われるはず、、、Tailwindcssは今やモダンフロントエンド開発において欠かせない存在となりつつあるユーティリティファーストなCSSフレームワークです。BlazorはC#と.NETを用いたフロントエンド開発を可能にするMicrosoft製のフレームワークであり、BlazorWebViewはWPF上で動作するWindowsネイティブアプリ用のBlazorです。C#を用いてフロントエン...

自己紹介初めまして、WOGO でソフトウェアエンジニアのインターンをやっている坪井星汰です。普段は東京大学の大学院で量子計算機やコンピュータアーキテクチャなどの研究を行っています。インターンでは Web 開発や Unity を使ったソフトウェアの開発などに取り組んでいます。WOGO はとてもアットホームな雰囲気ですが、技術的には手加減をせず本当に高度なことに取りくむことができる環境で、エンジニアとして大きく成長していると感じています。 本題上でも述べましたが、最近はUnityを使ったソフトウェアを作っています。そんな中でこのような要件が生まれました。「Unityで3D C...

こんにちは。株式会社WOGOでインターンをしているArashoといいます。この記事では「板取り問題」(Cutting Stock Problem)という組合せ最適化問題の解法である、列生成法を用いたアプローチを紹介します。 「板取り問題」(Cutting Stock Problem) とは？板取り問題とは、定形サイズの母材から所要サイズの製品を切り出す際に、廃材を最小化する切断計画の最適化問題のことです。オペレーションズ・リサーチにおける板取り問題（いたどりもんだい、英: cutting stock problem）、またはカッティングストック問題とは、定形の母材（ストック...

こんにちは、WOGOの千葉です。普段フロントエンドエンジニアとして、ReactとTailwind CSSを使った開発をしています。この記事では、再利用性の高いコンポーネントを作るために、自分が意識しているいくつかのポイントを紹介します。 1. SVGアイコンはJSXにしてcurrentColorを使うアイコンコンポーネントを作る際、SVGを直接JSXとして扱い、色の指定にはcurrentColorを使うようにしています。export function ArrowRight({ className }: { className?: string }) { return (...

はじめまして、株式会社WOGOでエンジニアをしている松本です!今回は、開発中に遭遇した「S3 内の動画をダウンロードさせたいのに、URL を叩くとブラウザで再生されてしまう」という問題をきっかけに、ブラウザが Content-Type / Content-Disposition をどのように解釈して挙動を決めているのかについてまとめていきます。 発生した問題：S3 の動画 URL を叩くと動画再生されてしまうAWSのS3 に保存している動画ファイルをダウンロードできるようにするため、<a href="S3のURL" download> でシンプルなダウンロードボタンを...

はじめにはじめまして、株式会社WOGOでエンジニアをしている千葉です。本記事では、私たちが日々の開発で採用しているフロントエンド関連の技術スタックをご紹介します。技術選定の理由や実際の使用感も含めてまとめていますので、これからフロントエンド開発を始める方や、技術選定で悩んでいる方の参考になれば幸いです。 技術スタック一覧 フレームワーク・ライブラリReact - UIを構築するためのJavaScriptライブラリreact-router - SPAルーティング 状態管理Zustand - 軽量グローバル状態管理Redux - 大規模状態管理...

こんにちは！ WOGOの開発チームです！本記事では、2025年現在のWOGOの開発環境について、具体的な数字を交えながらご紹介します。私たちは「3D×AI」を活用し、製造業のデジタルツイン実現に取り組んでいます。本ブログを通じて、私たちの開発チーム、技術スタック、そして働く環境について、具体的な数字とともにお伝えします。製造業のデジタル化を支援する私たちのバックグラウンドに、どのような開発体制や技術的な特徴があるのか、皆様の疑問にお答えできれば幸いです。チーム構成や技術スタック、働き方など、WOGOの開発部門の「今」を数字でお見せします。それでは、チーム・技術・環境の三つの観...