はてなブックマーク

目次 目次 はじめに 状態管理したいデータ構造と機能要件 atom と atomFamily について atom atomFamily atom と atomFamily の使い分け atomFamily を使った実装 atom で実装した場合 atomFamily で実装した場合 atomFamily だからこその課題 atomFamily からデータを取得するためにはパラメータが必要 atomFamily の default に selector を設定できない 課題に対応した結果 リファクタリング前の状態一覧 (atom を使った実装の場合) リファクタリング後の状態一覧 (atomFamily を使った実装の場合) まとめ 最後に はじめに フルスタックエンジニアとして開発を行っている五十嵐です。弊社でリリースしている パノラマ変換 3D プレイヤー について、サーバサイドの Ru

はじめに スペースリーの研究開発チームでエンジニアをしている植木です。この記事ではスペースリーで行っている研究開発について紹介します。 弊社は空間データプラットフォームを提供しており、具体的なアプリケーションとしては、不動産領域でのVR/Web内覧サービスや、研修領域に向けたVR研修サービスなどがあります。 VRというと3DCGのゲームやエンタメのイメージが強いと思いますが、弊社では360°カメラで撮影した実写の画像や動画をコンテンツとするサービスを展開しています。 VRを扱う会社でありつつ実写画像をメインで扱うため、画像や空間を認識するComputer Visionと、その結果をユーザに提示するComputer Graphicsの両方の研究開発を行っている点がユニークで魅力的かなと思います。 この記事を通じて弊社の研究開発に少しでも興味を持ってもらえたら幸いです。 弊社のサービスについて

1　はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ

まえがき 株式会社スペースリー Androidエンジニアのふかまちです。 普段は弊社サービスのツールであるAndroidアプリ「Spacely Photo Task」を開発しています。 現在、後述するパノラマ画像の360°Viewerをキャプチャーした動画を生成する開発に取り組んでおり、 本記事では開発で得た知見を元に、GLSurfaceViewの活用方法を一部ご紹介します。 Android x OpenGLならGLSurfaceView GLSurfaceViewとは、OpenGL ESをサポートしている、Androidの3D描画を行うためのViewです。描画にはGPUを活用していることでメインスレッドの負荷を軽減でき、高速なフレームレートでの描画が可能だという特徴があります。 弊社では、パノラマ画像の360°Viewerで使用しています。 (参考)GLSurfaceViewを使ったパノ

株式会社スペースリーのRailsエンジニアの海老原です。 スペースリーが提供するサービスの反映は、CSチームでテストを実施してから本番環境にリリースする業務フローになっております。各featureブランチごとに、テストを実施できるように、プルリクエストに動作確認の手順を記載し、動作確認をCSに依頼するという流れです。今回は、ラベルごとにPRの記載内容を書き分けて、自動でプルリクエストを作成できるようにする設定を、GitHub Actionsを使って行いましたので、コードを交えて紹介したいと思います。 以下のようなプルリクエストをGitHub Actionsから自動で作成できます。赤枠が自動で埋められる部分です。 1. ローカルデバッグ環境構築 まずは、作業の準備として必要なツール類のインストールを行ってローカルの開発環境を整えて行きます。 4章のインテグレーションテストで利用することになり

Introduction Recently I've had to work on code which seemed to be based on clean architecture, but after a while I concluded that it is probably not and it made me think about clean coding in general and the principles of clean architecture in particular. Is it about a set of rules, and we are guaranteed to achieve cleanness as long as we follow them? Or is it about abstract principles, which we c

株式会社スペースリー Railsエンジニアの大津です。 弊社サービスでは物件画像データの管理機能を提供しており、サーバーサイドのフレームワークにはRuby on Railsを、データベース管理にはMySQLを採用しております。これまで物件画像は用途ごとにテーブルを分けて管理していましたが、 アップロードした後に用途を変更できないため画像テーブルを１つに統合しました。 今回は統合する際に実施した旧テーブルから新テーブルへのレコード移行の手順をご紹介します。 統合前後の画像テーブルの構成 まず、統合前の物件画像の管理方法について説明します。 統合前は物件画像テーブルは部屋の写真を管理する内観画像テーブルと建物の写真を管理する外観画像テーブルの２つに分かれていました。 画像ファイルは各テーブルのimageカラムに格納され、Rails GemのCarrierWaveによりAWS S3バケットにアッ

はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分

インフラエンジニアの thaim です。 スペースリーではインフラの構築にTerraformを、Terraformのコードに対する静的解析にtflintを利用しています。 このtflintを上手く活用するために取り組んだこと、OSSコントリビュートに取り組んだことについて紹介します。 スペースリーにおけるインフラ開発の背景 始めにスペースリーのインフラ開発におけるtflintの活用状況について紹介します。 tflintを実行する Terraformのコードの静的解析ツールはいろいろと存在しますが、lintツールとしてtflintがあります。tflintはTerraformコードのコード規約を設定したり、terraform applyコマンドを実行できない不正な設定を検出したりできます。 スペースリーではTerraformコードの静的解析ツールとして terraform fmt (インデント

はじめに 株式会社スペースリー Railsエンジニアの海老原です。 スペースリーではメインのデータベースとしてMySQLを採用していますが、今後、MongoDBの活用も視野に入れて検討をしています。 最適な活用方法を日々模索するなかで、一覧形式で機能を比較検討したいと思いまとめました。 スペースリーでは、マスタの系のデータでは既にRDBによるデータ設計がなされています。 RDBの世界では先にエンティティとリレーションシップを用いたデータ設計を行い、正規化を経てテーブルという実態に落とし込みます。 事前に、各オブジェクトの役割や関係性が明確になっていることが前提です。 一方で、試行錯誤して開発するアジャイル体制の開発現場では、データの役割や関係性が変化することがしばしば起こります。 データ構造の変更に対する柔軟性が乏しいRDBではスキーマ変更の対応をするのに時間がかかってしまいますので、スキ

はじめに 株式会社スペースリー iOSエンジニアの樋川です。 普段は弊社サービスの、物件の撮影を補助/管理をするアプリのiOSの開発をしています。 今回は、研究開発チームが作成した、画像を台形補正する社内向けのライブラリをiOSプロジェクトに入れた時の内容をまとめます。 現在、iOSプロジェクトでは、Swift Package Manager(以下”SPM”と略)でライブラリ管理をしており、今回も他のライブラリと同様にSPMで対応することにしました。 今回は通常のSPMへの対応に加えて、下記のケースに対応する必要がありました。 ライブラリがC++で書かれている ライブラリがOpenCV, Eigenを利用している はじめに 前準備 (C++で書かれたライブラリをSwiftで使えるように) SPMへの対応 完成したPackage.swiftの中身 対応手順 1. OpenCVをXCFrame

株式会社スペースリー エンジニアの出口です。 普段は弊社サービスの建物や物件といった情報の管理画面を開発しています。 バックエンドはruby on railsで開発されており、今回は建物一覧のレイテンシ改善のためActiveRecordのcounter_cacheを導入した経緯と実装内容についてまとめます。 概要 サービスに登録されているアパートやマンションといった建物の一覧を表示するページでは、建物の情報に加えて建物に紐づいている物件(個々の部屋)の数や撮影された画像の数などを表示しています。 各モデルのリレーションは下図の通りです。建物と物件が親子関係にあり、建物と物件それぞれに属する画像があるというポリモーフィックの関連付けがされています。 建物一覧では建物の情報の他に紐づく物件数や画像数、画像を持っている物件数などを表示します。しかし、建物一覧のデータ取得のたびに物件数などの値を集