こんにちは、パートナービジネス事業部の宇野です。 今回は、ReactのアニメーションライブラリFramer Motionというライブラリが気になったので触ってみた感想を書いていこうと思います。 アニメーションは、適切に使用することでユーザーが次に何をすれば良いか理解しやすくなる大切なツールだと思います。 Framer Motionとは？ Framer Motionはこんな特徴があります。 シンプルなAPI: 初心者でも簡単にアニメーションを追加可能。 Reactと完全統合: JSXスタイルでアニメーションを記述。 柔軟性: ジェスチャーやドラッグ機能のサポート。 インストール Framer M…

最近は業務内でAI生成ツールを活用する機会が増えており、そのおかげで今までになかった表現の実現や、業務工数の削減もできています。今回は、プレスリリースに使用された画像を例に、AIを活用した制作過程をご紹介したいと思います。

はじめに こんにちは、ATOM開発グループの廣瀬七海です。 24新卒として入社し、バックエンドエンジニアとして働いております。 ATOMプロジェクトではGo言語を用いて開発を行っており、ORMとしてGORMを採用しています。 今回は、更新処理を実行する際にタイムスタンプ updated_at カラムが自動更新されないという問題に直面したため、その事例について紹介します。 問題 GORMには、レコード更新時にタイムスタンプを自動更新する機能があります。 通常、updated_at カラムを明示的に指定しなくても自動的に更新されるはずですが、updated_at カラムが自動更新されないという問題…

■ はじめに 初めまして、24卒として今年からSOTに入社しました馬場です。 現在は、ATOM事業部で、広告代理店を救うプロダクトを作るエンジニアをしております。 今回、自分にとって最高な会社に入社するまでの紆余曲折を今世に残し、 就活に悩んでいる人が、良い就活ができる手助けができればと思っております。 ■ 筆者はこんな人 自分の背景を並べるとざっとこんな感じです。 大学は情報学部に通い、単位を取ることに興味がなく、卒業までに六年かかりました。(∴ GPAは、2.0を切ります...) 大学時代は、就職前にしかやれない仕事がやりたいと思い、エンジニア以外のバイトを主にしていました。 (ライブハウ…

こんにちは。 CTO室のyuinaです。 4月からCTO室に異動し、某CTOからの無茶振りを捌いています。 いろいろな会社のテックブログで「突撃！隣のキーボード」を見かけ、SO Technologies版もやってみようと思います。 テックブログなので、本来ならば開発に携わっているエンジニアを対象とするかと思いますが、 今回はエンジニアに限らず、全社員と業務委託で携わっていただいている方々も対象として、調査してみました。 普段業務を進める上でパソコンのキーボードは何を利用していますか？ 全社の回答をまとめると、以下のような結果になりました。 6割の方が本体に付属しているキーボードを利用。 残りの…

エンジニアの石崎です。 今回は、Reactの初回レンダリングのコストを下げる方法についてお話しします。 私が開発しているプロダクトでは、大量のレコードを含む表のレンダリングに時間がかかっていました。 特に初回マウント時に顕著だったため、その対策について共有したいと思います。根本的な解決策というよりも対処療法的な方法になりますが、参考になれば幸いです。 画面内に入った要素のみ詳細をマウントする 大量のレコードやカードを一覧で表示する場合、初回マウント時に全ての要素をマウントしていたため、画面のレンダリングコストが高くなり、初回表示に時間がかかっていました。そこで、画面内に入った要素のみを詳細にマ…

本記事ではフロントエンドの重たい処理をWeb WorkerやWebAssemblyを用いてどのように改善できるかを検証し、その効果を測定しました。サンプルはNext.js, Rustで作成しました。

■ はじめに こんにちは。SREの平です。今回はたくさんのログからサーバーがもしもなにか危ない状態だったら通知してくれるような状態を作ってみました。 概要としては、自宅の余っているGPU(NVIDIA GeForce RTX 2060 6GB)を使い、ローカルLLMを立ち上げて、自宅サーバーの/var/log/syslogを投げて、サマリーと重要度を出してもらい、重要度がwarnであればdiscordに投げてもらって私がサーバーの異変に気づく！という仕組みです。 ただ生成AIなので、レスポンスが100%絶対指定した通り、にはならないことがあります。その場合parseエラーが出たり出なかったりと…

はじめに こんにちは、AG-Boost事業部でエンジニアとして内定者バイトをしている井上健人です。 この度、AG-Boostの事業部内管理画面（以下、管理画面）に分析用のGTMを埋め込む機会があり、 試行錯誤しつつ0から勉強しましたので、ご紹介しつつ、自分の備忘録として残したいと思います。 1. そもそもGTMって何？ GTMとは、正式名称Google Tag Manager、Google AnalyticsやWeb広告などを利用する際に埋め込む「タグ」を一元管理するものです。無料で使えます。 従来であれば、役割ごとのタグ（分析用のタグや広告用のタグ等）をWebサイトやアプリに埋め込んで、一つ…

1. CloudFlareとは みなさん、こんにちは。パートナービジネス（AG-Boost）事業部でエンジニアの清水です。 今日はCloudFlareに興味があり使ってみたところAWSとの違いに感動したのでそのことについて書きます。 CloudFlareは、ウェブサイトをより速く、安全にするためのサービスを提供している企業です。 CDNというイメージがありますが、AWSの「S3」に対応する「R2」や「CloudFront」「Route53」「S3」全ての機能を持ったPagesなどWebサービスを運用するための機能全般的に揃っています。 国内の大手企業でWebエンジニアをスタートした人はAWSか…

はじめに こんにちは。CTO室でアジャイルコーチとして働いている府川です。 今回は、私が最近ハマっている「NotebookLM」を1on1のアドバイザーとして活用する方法を共有します。NotebookLMは、ブラウザ上で動作するAIツールであり、独自のデータを学習させることでパーソナルAIとして活用できます。1on1の議事録、過去のフィードバック、目標設定シートなど、様々なデータをアップロードすることで、AIはよりパーソナライズされたアドバイスを提供してくれます。 NotebookLMを選んだ理由 AIツールは様々なものがありますが、その中でもNotebookLMを使おうと思ったのは以下が理由…

こんにちは。 新規プロダクト開発に携わっているエンジニアの島田です。 私は社会人大学生として放送大学で情報工学の勉強をしておりまして、直近受けた授業では、データ構造やアルゴリズム、データの符号化といったものが扱われていました。中でも文字列については普段から業務で扱っているのもあって非常に興味深かったです。 せっかく大学で体系的に学びましたので、文字列の扱いについての振り返りも兼ねて、とりわけ Web アプリケーション上で扱う上で個人的に気になった点にフォーカスし、この記事にまとめたいと思います。 コンピューターはどのように文字を扱うのか 世の中で使われている文字や数値、記号は、それぞれ所定の非…

はじめに こんにちは、ATOM 事業本部のエンジニアの岸田 (@mwudo) です。 集計基盤の機能開発や保守、API サーバー、バッチ処理などを担当しており、ATOM のバックエンド周りを見守っています。 趣味はボルダリングで、最近肩関節のインナーマッスルが弱いことがわかり、今後のレベルアップのためにインナーマッスルの強化がテーマです。 イベントで登壇したので、ご紹介したいと思います。 イベントについて findy.connpass.com システムの開発を行う中で起きた課題に対してリアーキテクチャを行い、その際に踏んでしまったアンチパターンの紹介とアンチパターンの解消について事例を共有する…

CTO室所属の高橋と申します。皆からはニャンさんと呼ばれております。そして私は特に無茶振りはされていません。 さて、developブランチに変更が入ったらdev環境にリリース、mainブランチに変更が入ったら本番環境にリリースを行う仕組み、いわゆる継続的デリバリーを構築しているプロジェクトは多いことと思う。我々のチームではCircle CIで行なっていたが事情があってGithub Actionsに移行することになった。ところがGithub Actionsではdevリリースと本番リリースの手順をどう共通化すればいいのか分からず迷ってしまった。 近年のソフトウェア開発の現場ではCI/CDは当たり前…

Github Actions と AppEngine Standard環境 と Identity-Aware Proxy を組み合わせて、ER図を最新状態に保ちながらいつでも閲覧できるようにしたことを紹介します。

はじめに こんにちは、ATOM 事業本部のエンジニアの岸田 (@mwudo) です。 集計基盤の機能開発や保守、API サーバー、バッチ処理などを担当しており、ATOM のバックエンド周りを見守っています。 趣味はボルダリングで、毎週、そびえ立つ壁に挑戦しています。 タイトル通り、Go Conference 2024 の LT枠で登壇をしたので振り返りをしたいと思います。 Go Conference 2024 gocon.jp Go Conference 2024 はプログラミング言語 Go に関連した発表やスポンサーブースなどの企画がたくさん用意されたカンファレンスです。 今回は 2024 …

CTO室所属のnyanと申します。日本語版のMac OSが漢字Talk 7という謎の名称で呼ばれていた頃からのmacユーザです。 現在のmacOSはBSD UNIXをベースとするオペレーティングシステムであり、同じ名前のコマンドでもGNU由来のLinuxのものとは異なる点があります。このためLinuxユーザーはmacでコマンドを使う際に違和感を覚えることもあるでしょう。例えばawkやsed、grepなどの各種コマンドの挙動の違いなどが一例ですが、一般的にLinuxのコマンドの方が機能が充実している傾向があります。またipやssコマンドのように、そもそもmacOSには存在しないコマンドもあります…

こんにちは、AG-Boost事業本部の大塚です。 今回は、MUI（Material-UI）のDataGridについて紹介します。 チームのフロント開発では、以前までCore UIやSemantic UIを使っていましたが、最近はMUIを使う方向にシフトしています。 MUIの理解を深めるために、DataGridを触ってみた所、簡単に見栄えのいいデータテーブルを作成できたので、紹介したいと思います。 MUIとは MUI（Material-UI）は、React向けのコンポーネントライブラリで、GoogleのMaterial Designガイドラインに基づいてデザインされています。 MUIを使用するこ…

こんにちは、ATOM事業本部の古川です。 今回、5月21日と22日の二日間で行われたAWS主催のAWS JumpStart 2024 for NewGradsというイベントに、弊社から馬場、廣瀬とともに3名で参加して来ました。 本ブログではそのイベントで体験してきたことや学んだこと、その感想を共有しようと思います。 AWS JumpStart 2024 for NewGradsとは AWS JumpStart 2024 for NewGradsは、新卒エンジニアを対象としたクラウドネイティブアプリケーションの設計を学習するための実践的な研修プログラムになります。 1日目はクラウドネイティブアプ…

はじめに こんにちは、数ヶ月ほど前からCTO室に異動した伊藤です。 今回はLangfuseを用いたLLMアプリケーションのモニタリングについて紹介いたします。 Langfuseとは Langfuseは、LLMアプリケーションの開発者がトレースや評価、プロンプト管理、メトリクス等を使用してアプリケーションのパフォーマンスを向上させるためのツールです。 公式サイト: https://langfuse.com/ 各機能の詳細については以下の通りです。 トレース: 各LLMの呼び出しと関連ロジックの詳細ログを取得し、処理の流れを追跡 プロンプト管理: プロンプトのバージョン管理と変更履歴の追跡 応答評…

こんにちは ATOM事業部エンジニアの渡部です。 昨今OpenAIのみならず、色々な企業からLLM(Large Language Models 大規模言語モデル)がでて面白い状況が続いていますね。 そんな中、去年の年末あたりで色々話題になりました「Gemini Advanced」を実際に契約したので 私がよく使っている「プログラムコード生成」を実際にお願いしてみて、同じくWebから使用できるChatGPT4との比較を行っていきたいと思います。 また今回は実験ですので、コード生成を１から「丸投げ」して自分自身ではコード修正を行わないようにしていますが、実際にコード生成で使う場合、ある程度自分でプ…

こんにちは。バックエンドエンジニアの上野です。 近年、どんどん便利に進化し続けているWebサービスは AWS,GCPなどを含む外部プラットフォームとの連携が必須になっています。 僕が開発を担当しているATOMというサービスでも数多くの外部サービスと連動しています。 特にATOMでは、さまざまな広告媒体からAPI経由でデータを収集を行う性質上、 自社管理のインフラに加え、外部との連携をしっかりと監視していく必要があります。 今回は自分が外部サービスとの連携を行う際に気をつけているポイントをご紹介したいと思います。 API連携時におこる、よくある問題 まず、外部サービスとAPI連携を行う時に基本的…

こんにちは。ATOM事業部の下江です。 昨年秋に育児休業を取得しました。 実際に取得してみてどうだったのか、ご共有できればと思います。 育休取得期間の決定 子供が一人目ということ、義母が1ヶ月休みを取ってヘルプしてくれることを考慮し、 出産予定日の1ヶ月後から計2ヶ月間取得しました。 生後3ヶ月まで育休を取得するのは期間的にはちょうど良いと感じました。 育休取得前 出産前後、突発的な有給をとらせていただきましたが、 チームのメンバーのサポートに非常に助けられました。 自分だけが持っているタスクを作らない、突発的にいなくなって良いようにサブ担当を必ずつけるということは出産予定日あたりから意識する…

こんにちは。ATOM 事業部エンジニアのyuinaです。 2023 年 10 月 3 日、Google はスパム対策強化のため、Gmail へ送るメールが満たすべき条件を 2024 年 2 月から厳しくすると発表しました。 support.google.com Google からのガイドラインの公開もあり、各社対応に追われていたと思います。 ATOM でもメール送信を行う機能を持っているため、この対応を行う必要がありました。 今回は私が担当した、ATOMリニューアル版での対応について書いていこうと思います。 Google のメール送信者のガイドラインへの対応 Google からのガイドラインを…

はじめに こんにちは。AG-Boost事業本部の宇野です。 現在チームで開発しているサービスはReactを採用しており、状態管理ライブラリはReduxを使用しています。私は今までRedux以外の状態管理ライブラリを触ったことがありません。Redux以外の状態管理ライブラリには以前から興味があったため、今回@tanstack/react-queryを触ってみようと思いました。 この記事では@tanstack/react-queryの使い方について記述しています。 tanstack.com 環境 React 18.2.0 @tanstack/react-query 5.22.2 インストール np…

はじめに こんにちは。AG-Boost事業本部のF石崎です。 この記事では、従来webpackを使用していたプロジェクトのビルドシステムをViteに置き換えた過程について書こうと思います。この記事が、同様の転換を検討しているエンジニアの方への参考になれば幸いかもしれません。 webpackからViteへの移行の動機 webpackのビルド時間に対する不満 開発サーバーの起動時間の長さ（プロジェクトのサイズが大きくなってより顕著に感じるようになった） モダンなフロントエンド開発ツールの進化に興味を持ったから Viteとは まず、Viteとは何か、その特徴を簡単に説明します。Viteは、現代のJa…

こんにちは、ATOM事業本部のプロダクト開発グループの松尾です。バックエンドを中心に開発を行なっています。 広告媒体の実績値取得やレポートの生成などを中心に開発しています。 先日、社内PCのリース期間が近づいてきたとのお知らせが来ました。 新しいモデルが届くみたいなので、とても楽しみにしています。 届いた後の移行作業について考えていました。その時、業務ツールやサービスの利用方法もこの機会に見直したくなってきました。 普段のエンジニアの業務では、コードを書くだけでなく、情報を検索し収集している時間も多いかと思います。 今回はその情報収集にスポットを当てて、知らない便利な機能はないか調べてみること…

こんにちは。 ATOM事業部の田村です。 最近 MySQL 5.7 から 8.0 へのバージョンアップを行う機会があったのですが、 その際に MySQL の日時データ型でちょっと面白い挙動に遭遇しました。 「WHERE 句で日時型カラムに条件を入れて期間で絞り込む」というよくある SQL なのですが、右辺の値に '' （空文字） を指定した場合に、5.7 ではエラーにならず 8.0 では SQL エラーになるというものです。 mysql> SELECT * FROM table WHERE date_column = ''; ERROR 1525 (HY000): Incorrect DATE…

はじめに こんにちは。 ATOM事業部でデータエンジニアをしている小宮です。 2023年6月までは事業部横断のデータ部署（以下データ戦略室）にいたのですが、 色々あって弊社SaaSのATOM事業部専任でデータを扱うことになりました。 異動後の約半年間で、 データ戦略室に居た頃には見えなかった気づきを得ることができたので今回はそれらを共有したいと思います。 データ戦略室でやっていたこと まず前提として、データ活用推進のために以下のことを行っていました。 社内の点在したデータを1箇所に集める（データ基盤の構築） データ基盤を安定的に保守・運用する データを活かして事業部に貢献する データ基盤を作る…

デザイナーの村田です。 2024年のデザイントレンドを調べてみると、サイトの多くに「生成AIの活用」というキーワードが含まれていました。 rotusdesign.com 社内でアーティスティックな画像を生成して使う機会はないので、あくまでも補助的な役割で今後使っていきたいなと思っています。 それにちなみ、今回はAdobe製品のAI機能を使って、画像制作する過程を記事にしたいと思います。 また、この記事のタイトルもはてなブログの「AIタイトルアシスト」機能を活用し決めてみました。 「新しい創造の世界へ」って…恥ずかしい🙈 と思いつつ、修正せずそのままいきたいと思います！ 新しい創造の世界はないか…