athome-developer’s blog

https://dblog.athome.co.jp/

不動産情報サービスのアットホームの開発者が発信するブログ

フィード

記事のアイキャッチ画像
2D間取り図からの転換、近未来3D間取り図
athome-developer’s blog
はじめに: 自己紹介と挨拶 簡単な自己紹介 ブログの趣旨説明 第1章: 現在の間取り図の問題点 2D間取り図の限界 実際の空間把握の難しさ 第2章: 3D間取り図の登場 3D間取り図のメリット 3D間取り図のデメリット 第3章: 近未来の3D間取り図 Three.jsについて 間取り図の作成方法 Three.jsの前の準備 壁と床の作成 天井の作成 テクスチャによるリアリズムの追求 第4章: メタバースの融合 まとめ 今後の3D間取り図の可能性 さいごに はじめに: 自己紹介と挨拶 簡単な自己紹介 お久しぶりです。以前 「メタバース打合せサービス」開発をしました!(後編)を書かせていただきまし…
10日前
記事のアイキャッチ画像
AMIを駆使したリリースバージョン管理の仕組み
athome-developer’s blog
お久しぶりです。以前こちらの記事を書かせていただきました、Cメディア開発グループの伊藤です。 今回は、「不動産情報サイト アットホーム」のリリース運用について紹介できればと思います。 新しいプロジェクトの開発において、リリース作業は必要不可欠ですよね? 多くのユーザーが快適に不動産情報サイト アットホームを利用できるように、常に最新の情報や使いやすい機能を提供することが求められます。 そのためには定期的なバージョン更新が必要です。 また、本番環境のリリースが行われれば、それに合わせて複数ある検証環境も随時更新していかないと環境自体がどんどん古くなってしまいます。 基盤チームで環境を管理している…
1ヶ月前
記事のアイキャッチ画像
紙とWebのデザイン:知っておきたい共通点と相違点
athome-developer’s blog
このブログでは、流れやデザイン原則など、紙とWebの特徴を考慮して、自分に合った方を選ぶための情報を提供しています。紙とWebのデザインの共通点と相違点について詳しく説明しており、どの媒体を選ぶかを判断する参考にしてください。
2ヶ月前
記事のアイキャッチ画像
「社内版ChatGPT」ツールの開発について
athome-developer’s blog
デジタルイノベーショングループのチンです。 2020年に新卒で入社し、不動産情報アプリ「アットホーム」の開発・保守に2年ほど携わってから、 今はメタバース・生成AIなどの新しい技術を用いた実験的なプロジェクトを担当しております。 今回は、最近参画した「社内専用ChatGPTサービス開発プロジェクト」について紹介したいと思います。 「社内版ChatGPT」とは? 社内から「ChatGPTを業務利用したい」との声が増え、実験的に導入したいと考えましたが、 ChatGPT Web版よりも、 社内版ChatGPTの方がメリットが多いため、作成しました。 「社内版」にしたい理由 最初に「利用者全員にOp…
2ヶ月前
記事のアイキャッチ画像
Webデザイナーが考えるショート動画クリエイティブ
athome-developer’s blog
はじめまして、WEBデザイングループの森です。新卒で入社して今年で2年目になります。私が所属するWEBデザイングループでは、不動産情報サイト アットホームや不動産情報アプリ「アットホーム」のデザインやコーディングはもちろんなのですが、他にも広告用の画像やショート動画の制作も行っています。 さて、皆さん「ショート動画」と言われてどのようなモノを想像しますか?TikTok、YouTube ショート、LINE VOOMなどさまざまなプラットフォームが存在し、ショート動画は近年急速に人気を集めています。 そんなショート動画ですが、皆さんも動画と動画の間に流れてくる広告を目にしたことがあるのではないでし…
4ヶ月前
記事のアイキャッチ画像
再現手順が不明なスマートフォンアプリの不具合調査をしました!
athome-developer’s blog
はじめまして。Cシステム開発グループの内方です。 2022年入社で、今年で2年目になります。 Apache Cordova+Angular(TypeScript)を用いたハイブリットアプリという形式で、スマートフォン向けの不動産情報アプリ「アットホーム」(以下、アットホームアプリ)の開発業務を行っています。 ハイブリットアプリについてはこちら↓ dblog.athome.co.jp 入社から2023年1月に現部署へ配属されるまではずっと研修を受けていたため、アプリ開発業務を担当してからは1年ほどです。 突然ですが、皆さんはアットホームアプリをご存知でしょうか? アットホームアプリは、iOS・A…
4ヶ月前
記事のアイキャッチ画像
API Gatewayを用いた、サーバーレスマイクロサービスでのAPI実装
athome-developer’s blog
初めまして、Cシステム開発グループの清水です。 2022年入社で、今年で2年目になります。 普段の業務では主に、AWSとPythonを用いて不動産情報サイト アットホーム(以下ポータルサイト)の基盤周りの開発や、バッチ処理の開発を担当しています。 さて、皆さんはポータルサイトをご覧になったことはあるでしょうか? ポータルサイトは、全国6万店以上の不動産会社からお預かりしている250万件の物件情報(2023年10月10日時点)など膨大な量のデータを管理しているとても大きなサイトです。 そんなポータルサイトですが、サービス開始から長い年月が経つので、時代に合ったデザインや操作性にするべく、リニュー…
6ヶ月前
記事のアイキャッチ画像
未経験エンジニアが挑む反響・再来訪予測モデル開発
athome-developer’s blog
初めまして、デジタルイノベーショングループの橋本です。 2022年に新卒入社し、今年で2年目になります! アットホームのお部屋探しアプリの開発保守を半年ほど担当したのち、今年の6月からデジタルイノベーショングループに配属され、現在は「不動産情報サイト アットホーム」の反響・再来訪予測モデル開発に取り組んでいます。 さて、皆さんは「予測モデル」と聞いてどういったものか想像がつくでしょうか? AIについて知識がある方は、「機械学習」や「アルゴリズム」といったワードが思い浮かぶかもしれません。 ですが、私は最初「予測モデルってなにそれ?美味しいの?」といった感じで、知識ゼロの状態からスタートしました…
7ヶ月前
記事のアイキャッチ画像
デザイナー目線で探る:ジェンダーレスデザインの挑戦と成果
athome-developer’s blog
はじめまして。WEBデザイングループの森田です。 2020年に新卒で入社し、不動産情報サイト アットホームや不動産情報アプリ「アットホーム」のデザイン・コーディング、各ページへ誘導するバナーの作成、記事をより魅力的にする画像の作成… 皆さんが目にする機会の多いデザイン業務を担当させていただいています。 新学期になり、出社のタイミングが近所の登校する小学生と重なるようになりました。色とりどりのランドセルが駆け回る様子に癒されています。 昔と比較すると、デザインや機能性に加え、赤・黒以外の色展開が増えていて、自分だけのランドセルを選ぶのが楽しそうですね。 今回は、ランドセルの色を増やす素因の一部に…
8ヶ月前
記事のアイキャッチ画像
画像生成AIは業務で活用できるのか
athome-developer’s blog
はじめまして。WEBデザイングループの伊東です。2019年に新卒で入社し、早いもので5年目になりました。 私の所属するWEBデザイングループでは、不動産情報サイト アットホーム や 不動産情報アプリ 「アットホーム」 のデザイン~コーディング、バナーの作成、記事に載せる画像作成 などなど‥ 主に消費者向けサービスのあらゆるデザイン業務を担っております。 本題に入りますが、ここ数年でよく耳にするようになった「AI」。「ChatGPT」のような対話形式で質問に答えてくれるものから、「Ponanza(将棋AI)」のような一部の機能に特化したものまで、多種多様なAIが存在しています。 中でも私が気にな…
9ヶ月前
記事のアイキャッチ画像
未経験エンジニアが挑むAWS DynamoDB設計
athome-developer’s blog
はじめまして。Cシステム開発グループの伊藤です。 アットホームには2021年に新卒で入社し、主に「不動産情報サイト アットホーム」の基盤周りの新規開発と運用保守を担当しています。 私はプログラミングはもちろん、IT系の知識は全くない未経験からのスタートだったので、入社時は「変数」の意味すら理解できないほどのポンコツ具合でした(笑)。 そんな私ですが配属後たくさんの先輩方に支えられ、今ではサイト内サービスのAPI開発や社内向けシステムの開発などなど、多方面の開発を任せてもらえるようになりました。 日々新しい経験を積む中で、今回は社会人2年目の夏に経験したとあるサービスの基盤リプレースプロジェクト…
10ヶ月前
記事のアイキャッチ画像
検証サイトに「物件情報がない…」ーAWS「Fargate・Lambda・SQS」を調査せよ!ー
athome-developer’s blog
初めまして。Cメディア開発部の黒田です。 新卒で入社して4年目となり、「不動産情報サイト アットホーム(以下サイト)」の「基盤」開発・運用保守を担当しています。 学生時代は、ITとは無縁のゴリゴリの体育会系でずっと野球をやっていました。 当時の私にとってPCは、プログラミングやコマンドを叩くためのものではなく、映画を観たり大学のレポートを提出するためだけのものでした。 タイトルにある「AWS」なんて存在すら知りませんでした。 今回はそのような私がしばしば対応する「検証サイトに物件情報が表示されない」というトラブルを切り口に、サイトに物件情報が公開されるまでのAWSサービスと運用業務の紹介をしな…
1年前
記事のアイキャッチ画像
「メタバース打合せサービス」開発をしました!(後編)
athome-developer’s blog
初めまして。Cシステム開発Gの松山です。 「メタバース打合せサービス」開発をしました!(前編)の続きを担当させていただきます。 私はアットホームに2021年に新卒で入社しました。現在は不動産情報サイト アットホームの企画や新サービスの研究開発に取り組んでいます。今回も前編に続き研究開発として取り組んだ「メタバース打合せサービス」の「機能開発」についてご紹介していこうと思います。 初めてのメタバース空間 ダイレクトメッセージ機能とは どのようにダイレクトメッセージ機能を作った? ワープ機能とは どのようにワープ機能を作った? まとめ さいごに 初めてのメタバース空間 前編でも少し触れましたが、初…
1年前
記事のアイキャッチ画像
「メタバース打合せサービス」開発をしました!(前編)
athome-developer’s blog
はじめまして。Cシステム開発Gの月村です。 アットホームには2020年に新卒で入社し、主にAngularベースのアプリ開発をしています。 今回は、研究開発として取り組んだ「メタバース打合せサービス」開発について 「技術選定」や「開発してみての気づき」をご紹介していこうと思います。 後編では「機能開発」について具体的な実装を含めてご紹介予定ですので よろしければそちらもご覧ください。(2023年4月公開予定) 実際にVRゴーグルを利用 「メタバース」をやってみよう! 「メタバース」をどうやって作ろう? 社内向け「メタバース 打合せサービス」爆誕 「メタバース」開発してみての気づき さいごに 「メ…
1年前
記事のアイキャッチ画像
NgRxを用いたAngularアプリの状態管理をする話
athome-developer’s blog
はじめに こんにちは、Cシステム開発グループのチンです。前回(入社3年目に体験したハイブリッドアプリ開発 - athome-developer’s blog) で紹介した通り、当社ではAngularでハイブリッドアプリケーションを開発してます。今回はフロントエンドで使用している状態管理ライブラリ(NgRx)について、簡単に紹介したいと思います。 前提知識 Angular - Webアプリフレームワークの一種 TypeScript - Angularの推奨言語 - JavaScriptの上位互換言語なので、JSを書けば大体分かる RxJS - リアクティブプログラミング用のライブラリの一つ Ng…
2年前
記事のアイキャッチ画像
入社3年目に体験したハイブリッドアプリ開発
athome-developer’s blog
はじめまして。情報システム部の比留間です。 アットホームには2018年に新卒で入社し、 コンシューマー向けサービスの開発グループに所属しています。 現在は、「お部屋探しアプリ 作成プロジェクト」で開発リーダーをしており このプロジェクトでの新しい取組みを、1つご紹介したいと思います。 目次 アプリを開発するに至った経緯 問題解決 スマートフォンアプリって? 問題の解決方法 プロジェクト発足から約半年を経ての感想 最後に アプリを開発するに至った経緯 まずは、開発するに至った経緯です。 現在、お部屋探しアプリは、iOS版・Android版の2種類を配信していますが それぞれを別の言語(iOS版:…
3年前
記事のアイキャッチ画像
新入社員研修ふりかえり
athome-developer’s blog
こんにちは、情報システム部の高野です。 だいぶ久しぶりのブログになってしまいました。 以前のブログでも書いた通り当社では2019年度の新入社員から長期のプログラミング研修を行うようになりました。 今回は、その新入社員研修を振り返ってみたいと思います。 メインの作業は社内SNSの構築です。 この作業が研修の8〜9割を占めていて、 このシステム構築を通してWebシステムの構築全般を学びます。 以下が技術スタックになります。 Git 当社では基本的にどのプロジェクトでもGitでソース管理を行いますので外せないです。 ASP.NET Core MVC(C#) ASP.NET Core MVCはWebF…
4年前
記事のアイキャッチ画像
今年も情報システム部にクリスマスがやってきました
athome-developer’s blog
情報システム部の河野です。 気がつけば12月も半ばですね。 リフレッシュルーム運営委員会は今年もクリスマスの飾り付けを行いました! この飾り付けを行うのも、早いもので今年で3回目となります( ˘ω˘) ツリーがあるだけで印象がガラッと変わりますね! 見ているだけで楽しい気持ちになります。 みんなのお楽しみ、アドベントカレンダー(技術的じゃない方)も設置しましたよ♪ 中に入れるお菓子はメンバーからの提供です。 アドベントカレンダーは毎年、優しい先輩方の差し入れによって運営されています(ありがとうございます) 毎年おなじみの飾り付けも登場です。 (最近のペッパーは隣に設置されている電子レンジに話し…
4年前
記事のアイキャッチ画像
新入社員研修
athome-developer’s blog
こんにちは、情報システム部の高野です。 今回は、技術的な話ではなく社内の取り組みについて書きたいと思います。 当社では、例年ですと情報システム部に配属された新入社員は、 1〜2ヵ月ほど外部研修に行きコンピューター基礎やプログラミングを覚えます。 これはこれで良いのですが、 当社の新卒はプログラミング未経験の者も多く、研修についていけないことがある 外部に出てしまうのでフォローが難しい 研修で学ぶ知識や技術が古く習ったことが役に立たないこともある*1 などなどありまして、今年から社内で研修することになりました。 最初の2〜3週は普通にプログラミング言語の勉強をし その後は、プロジェクト形式でシス…
5年前
記事のアイキャッチ画像
AngularでAtomicDesign的にコンポーネントを作ってみた3
athome-developer’s blog
こんにちは、情報システム部の高野です。 AngularでAtomicDesignの第三弾です。 以前の記事はこちら dblog.athome.co.jp dblog.athome.co.jp 今回は、前回までに作ったボタンとテキストボックスを使って 検索フォームコンポーネントを作ってみます。 前回まではAtomとしてコンポーネントを作っていましたが 今回の検索フォームはAtomとAtomをくっつけたMolecule(分子)になります。 バージョンなど 前回同様です。 Angularは7.2.0 ブラウザはChromeのバージョン73を使用しています。 IEでは利用できないCSSの機能があると思…
5年前
記事のアイキャッチ画像
AngularでAtomicDesign的にコンポーネントを作ってみた2
athome-developer’s blog
こんにちは、情報システム部の高野です。 AngularでAtomicDesignの第二弾です。 第一弾はこちら dblog.athome.co.jp 前回はボタンをAtomとして実装しましたが 今回は、テキストボックスを実装したいと思います。 バージョンなど 前回と同じですが一応。 Angularは7.2.0 ブラウザはChromeのバージョン73を使用しています。 IEでは利用できないCSSの機能があると思うので試す時はその他のブラウザをご利用ください。 テキストボックスコンポーネントを作る テキストボックスと言っているのは、input[type=text]のことです。 テキストエリアも兼ね…
5年前
記事のアイキャッチ画像
AngularでAtomicDesign的にコンポーネントを作ってみた1
athome-developer’s blog
こんにちは、情報システム部の高野です。割とまとまって考える時間がとれたので AngularでAtomicDesign的*1にコンポーネントを作るにはどのようにするのが良いのか考えてみました。 AtomicDesignに関してはググっていただければと思います。今回は、Angular Materialなども使わずにボタンからなにから自分で作ってみます。 (と言ってもここで紹介するのはその一部ですが) バージョンなど Angularは7.2.0 ブラウザはChromeのバージョン73を使用しています。 IEでは利用できないCSSの機能があると思うので試す時はその他のブラウザをご利用ください。 ボタン…
5年前
記事のアイキャッチ画像
re:Invent2018 5日目 Keynote2と6日目
athome-developer’s blog
情報システム部の白石です。 5日目 re:Invent2018の5日目です。 メッセージボードは更新しました。これは日課です。 午前中はCTOのワーナー・ヴォゲルスによるKeynoteがありました。 最悪の日として2004/12/12の話 Oracleのバグでシステムが停止しそれは制御できないことが分かった 制御するために最初にシャーディングすることを決めた 信頼性の点では失敗の影響を最小限にするためにセルベースアーキテクチャにいきつく リレーショナルデータベースはクラウド向けにデザインされていないことから、シャーディング、シェアードナッシング、シェアードディスクといったアーキテクチャでも本当…
5年前
記事のアイキャッチ画像
re:Invent2018 4日目 Keynote1
athome-developer’s blog
情報システム部の白石です。 re:Invent2018の4日目です。 いつも通りメッセージボードは更新しておきました。 午前中にCEOのアンディー・ジャシーによるKeynoteがありました。 ここで多くの新サービスが発表されます。 6:30頃から朝食を摂り7:00頃に並び始めたのですがすでに長蛇の列でした。 係の人の案内のままに進みます。 DJが朝からハイテンションで踊っています。 運よく最前列になりましたが左の端から2列目で中心は点にしか見えないほど遠かったのが残念でした。 遅く並んだとしても中央付近の席になることもあるらしく運次第のようです。 中央にアンディー・ジャシーがいます。オーラを感…
5年前
記事のアイキャッチ画像
re:Invent2018 3日目
athome-developer’s blog
情報システム部の白石です。 re:Invent2018の3日目です。移動とレジストレーションの日が1日目で、 昨日からセッションが始まり今日で3日目です。 メッセージボードは新しくなっていましたのでまた書きました。 まず、朝Expoを少し覗いてみましたが、飲み物もなくブースに人がいないところもありまだ準備中といった印象でした。 すぐに出てシャトルバスでヴェネチアンからベラージオへ移動しました。 中心通りを避け裏通りを進みMGMグラウンドやアリアの横を素通りしていきました。 時間的には15分程度でした。 ベラージオもまた広いです。右下のシャトルバス乗り場から、左上の四角で囲んだ会場まで歩いて移動…
5年前
記事のアイキャッチ画像
.NET Coreの汎用ホストを使ってバッチを作ってみる
athome-developer’s blog
こんにちは、情報システム部の高野です。 とある方のつぶやきで初めて知ったのですが、 .NET Core 2.1で汎用ホストなるものが追加されていたのですね。 docs.microsoft.com これでバッチ処理などのバックエンドのプログラムも ASP.NET Coreのようにインジェクションなどの設定ができそう! ということでサンプルを作ってみたので手順を書いておきます。 とりあえず環境 .NET Core SDK v2.1.403 VisualStudio Code v1.29.0 プロジェクトの作成 汎用ホスト用のテンプレートは今のところ無いのでconsoleで作成します。 dotnet…
5年前
記事のアイキャッチ画像
re:Invent2018に来てます!
athome-developer’s blog
情報システムの白石です。 今はアメリカのラスベガスにいます。 AWSの最大のイベントであるre:Invent2018に2018 年 11 月 26 日~11 月 30 日のすべての期間参加するためです。 弊社からは2名参加しています。 私はアメリカもラスベガスも初めてで、街のスケールに圧倒されました。 レジストレーションは多くの人であふれかえっています。 ホテルの通路もre:InventのIDを首から下げた人たちで埋め尽くされています。 通路脇ではノートPCを広げている人もたくさんいました。 AWSの勢いを感じました。 初日の午前中はWorkShopに参加してきました。 ハンズオン形式でセキュ…
5年前
記事のアイキャッチ画像
不動産情報サイト アットホームをAWS化しました
athome-developer’s blog
こんにちは、情報システム部の白石です。 2016年12月にB向けシステムのグループから、C向けシステムのグループに異動し、初めてAWSを使う案件を進めていました。 はじめは静的リソース配信のCloudFront化。次にインプレッションログをサーバレスの仕組みで収集する案件。 そして2017年2月から不動産情報サイト アットホームをAWSへ移行する案件を開始しました。 3人から始めて最後は10人程度のメンバーで、皆AWSはほぼ初心者状態でのスタートでした。 途中、数回案件の仕切り直しがあり、サイトのすべてではなく2段階に分けて移行させることになり、 2018年9月に不動産情報サイト アットホーム…
5年前
記事のアイキャッチ画像
Angularのコンポーネント間の値受け渡しについて
athome-developer’s blog
こんにちは、情報システム部の高野です。 ここのところバタバタしていて全然ブログが書けませんでした。 本当に継続は難しい・・・ということでブログが書けているってことは少し落ち着いてきたってことです(笑) まだリリースはしていないのですが、現在携わっているシステムはフロントをAngular*1で作っています。 かなり入力項目が多いシステムなのでカテゴリごとにコンポーネント化しています。 Angularをはじめ最近のWebフロントエンドのフレームワークはコンポーネント化が簡単にできるので便利ですよね! 今回の仕組みは下図のようにコンポーネントを分けています。*2 親コンポーネントは、Angularの…
6年前
記事のアイキャッチ画像
Visual StudioでC#とTypeScriptのUnitTestを一覧してみる。
athome-developer’s blog
ASP.NET WebForm系システムの駆逐まであと一歩。情報システム部の中嶋です。 弊社のシステム(特に社内向け)は、ASP.NET MVCやASP.NET Coreで構築しているものが多数*1あります。そして、ASP.NET MVCの開発にはVisual Studioを使用*2しています。また、Web UIの開発を行っている以上、当然、.NET系の言語だけでは収まらずTypeScript*3も併用しながらの開発となります。 Visual Studio 2017は、C#などの.NET系の言語だけではなくTypeScriptでも定義や参照の検索が行え、インテリセンスも効くので非常に便利です。…
6年前