Mobile Factory Tech Blog
https://tech.mobilefactory.jp/
技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!
フィード
1500コンポーネントある巨大なVue2アプリのVue3移行
Mobile Factory Tech Blog
はじめに 駅メモ!開発チームエンジニアの id:kaidan388 です。 駅メモ!のフロントエンドは Vue で書かれており、およそ 1500 コンポーネントあります。 Vue2 が EOL を迎えるに際して、これをどう Vue3 に移行するかが問題になりました。 具体的には以下の 2 点をどう達成するか、というのが問題になります。 普段の機能開発を止めずに、Vue3 移行を進めたい 普段のリリースを止めずに、Vue3 のリリースをしたい 駅メモ!開発チームでは、途中メンバーの交代もありつつですが、基本的に 3 名で 1 年半かけて、上の要件を満たしつつ Vue3 へ移行を完了しました。 こ…
13日前
駅メモ!フロントエンドの型チェックを強化してCI(GitHub Actions)を導入した話
Mobile Factory Tech Blog
こんにちは、駅メモ!開発チームエンジニアの id:hayayanai です! 私が開発に関わる駅メモ!は、今年で 10 周年を迎えたゲームです。フロントエンドは Vue.js で開発されていて、現在もコード量が増加しています。 今回は、そんな駅メモ!のフロントエンドに vue-tsc を導入して、GitHub Actions で型チェックを実行し、reviewdog に Pull Request で指摘してもらえる状態を作った話を紹介します。 駅メモ!のフロントエンドの状態 はじめに駅メモ!のフロントエンドの簡単な概要を紹介します。 フレームワークは Angular → Vue 2 → Vue…
18日前
駅メモ!開発チームにおける機能開発と改善を並行して進めるためのチーム構成
Mobile Factory Tech Blog
はじめに こんにちは。駅メモ!開発チームの横井です。 今回はプロダクトの機能開発をしながら改善に取り組むためのチーム構成について話します。 背景 駅メモ!はありがたいことに今年で 10 周年を迎えました。 10 年もの間、機能追加や改修をしていくことでアプリケーションは使いやすく進化してきましたが、それとともにコードベースも肥大化し、保守性の面での課題が浮き彫りになっていました。 そんな中、エンジニアとしてその課題を認識しながらも、開発チーム全体として改善に割くリソースが不足していることに気づいたのが 2022 年頃。 ビジネス側の協力を得て、機能開発と並行して改善を進められるチーム体制を構築…
1ヶ月前
AIコードレビューツール Qodo Merge(旧:PR-Agent) を使ってみた
Mobile Factory Tech Blog
駅奪取チームの id:kimkim0106 です。 駅奪取チームで Qodo Merge(旧:PR-Agent) を使ってみた感想の記事になります。 結論から言いますと、人間のレビューや作業をある程度代替できており、業務の効率化につながっていると感じました。 Qodo Merge とは Qodo 社(旧:Codium-AI 社)が提供する、AI コードレビューツールです。 さまざまな LLM モデルを使ってコードレビューができるほか、GitHub や GitLab などの API を使用してプルリクエストにコメントをしてくれます。 github.com 導入背景 駅奪取チームは限られたエンジニ…
1ヶ月前
毎秒現在地を使った最近傍探索をしたい
Mobile Factory Tech Blog
こんにちは。駅メモエンジニアの id:dorapon2000 です。 約半年前の 6 月 1 日にステーションメモリーズ!(駅メモ!)10 周年を記念してタイムラインと地図の切替機能をリリースしました。大変好評を頂いておりとても嬉しいです。 今回は、その機能の中で毎秒最寄り駅を計算するロジックをどのように実現しているのかについてお話します。様々なスペックの端末で遊ばれているため、可能な限りリソースを節約するような工夫をしました。堅い言い方をすれば、過去の計算情報を使った最近傍探索アルゴリズムを実装しました。 記事中のサンプルコードは TypeScript で記述しています。 2024/11/2…
1ヶ月前
Perl5.40の変更点
Mobile Factory Tech Blog
こんにちは、エンジニアの id:mp0liiu です。 かなり遅くなってしまいましたが、今年も6/10にPerlの最新安定バージョンである5.40がリリースされたので新機能や変更点についてまとめます。 安定化した実験的機能 try-catch 構文 5.34 で追加された try-catch 構文が安定化して use feature 'try' もしくは use v5.40 で有効にできるようになりました。 use v5.40; try { die 'Some error occurred.'; say 'Success'; } catch ($e) { say 'Failure'; } fi…
2ヶ月前
フルリモートでもコミュニケーションが発生する新卒技術研修
Mobile Factory Tech Blog
はじめに モバイルファクトリーは、21 年度から完全リモートワークに移行しています。 リモートワークではコミュニケーション不足に陥りがちです。まだ会社に慣れていない、社員の顔と名前が一致していないような状態にある新卒のエンジニア達はなおさら、コミュニケーションに困難を感じるのではないかと想像されます。 リモートワーク下でも、新卒エンジニア同士 / 新卒エンジニアと先輩社員 がコミュニケーションしやすい状況を作りたい! というわけで、今年の新卒技術研修を担当しました(id:kaidan388)が、コミュニケーションしやすい状況作りのために新人技術研修で行った工夫について説明します。 端的にいえば…
2ヶ月前
復旧用クラスターとB/GデプロイでAmazon Aurora MySQL v2をv3へ安全に移行しました
Mobile Factory Tech Blog
駅メモ!開発基盤チームです。 今回はサービスで利用している Amazon Aurora MySQL を v2 から v3 へ移行したときのことを書きます。 概要 駅メモ!をはじめとする弊社のサービスでは、データストアとして Amazon Aurora MySQL(以降 Aurora MySQL) を利用しています。すでにアナウンスされている通り、Aurora MySQL v2 は 2024 年 10 月 31 日に 標準サポート終了を迎えるため、Aurora MySQL v3 への移行が重要な課題になっていました。これに対し、駅メモ!開発基盤チームでは綿密な計画を立て、今年の初め頃に無事に移行…
3ヶ月前
YAPC::Hakodate 参加レポート
Mobile Factory Tech Blog
駅奪取チームエンジニアの id:kimkim0106 です。 「レポートを書くまでが YAPC」とのことなので、自分も書こうと思います。 YAPC::Hakodate の概要 2024/10/5(土)に、北海道函館市の公立はこだて未来大学にて開催されました。 YAPC は Yet Another Perl Conference の略で、Perl を軸とした IT に関わる全ての人のためのカンファレンスです 前夜祭 会場入口の看板 前夜祭会場のスクリーン 前夜祭のトークテーマも気になるものが多かったので、前夜祭から行きたいと思っていました。 特に印象に残ったトークをいくつか紹介します。 アンカン…
3ヶ月前
今更vimに目覚めた男がLunarVimを使っている話
Mobile Factory Tech Blog
はじめに vim に最近目覚めた。そこから NeoVim、LunarVim を使うようになった流れについて、自分が思う好きなポイントと絡めてまとめる。 書かないこと エディタ戦争 VSCode も、vim も、emacs も、みんな違ってみんないい あくまでも vim のココスキをまとめるので比較はしない どうして vim か VSCode を今まで使っていて、remote の接続が悪かったり重かったりしていたのでこれを機に、気になっていた vim に乗り換えてみた vim を選んだ理由は、 慣れるとコーディングスピードがすごいらしい 脳とコーディングを直結したい 軽そう 使ってる人が多い つ…
6ヶ月前
MySQLで「無ければINSERT、あればUPDATE」を実現する方法
Mobile Factory Tech Blog
こんにちは、駅奪取エンジニアの id:kimkim0106(旧: id:kaoru_k_0106)です。 今回の記事は、駅奪取でテーブルにレコードが「無ければ INSERT、あれば UPDATE」(いわゆる UPSERT)をする箇所で Duplicate entry が出ていたのを修正したり、未然に防ぐ実装をしたときに得られた知見です。 このような処理はよく使われますが、うまく実装しないとエラーが発生したりパフォーマンスの問題が生じたりします。 この記事では、自分が試した方法のメリット・デメリットについて説明します。 目次 前提条件 Duplicate entry とは 1. Duplicat…
7ヶ月前
バッファ傾向グラフを用いてプロジェクトのバッファ消費量を可視化してみた話
Mobile Factory Tech Blog
駅奪取チームでエンジニアをしている id:kebhr です。 今回は、駅奪取チームにおけるプロジェクト管理のツールとして、従来利用していたガントチャートに加え、新たにバッファ傾向グラフを導入してみた経験について書きます。 バッファ傾向グラフとは このプロジェクトでは、プロジェクト管理手法として CCPM (Critical Chain Project Management) を採用しました。 CCPM では、個別のタスクにはバッファを設けず、すべてのバッファをプロジェクトの終盤に設けます。このバッファをプロジェクトバッファと呼びます。 必然的に、プロジェクトが進行するにつれて、プロジェクトバッ…
8ヶ月前
OverlayFS でデータ入りのテスト用 DB を素早く起動する
Mobile Factory Tech Blog
駅メモ!開発基盤チームの id:xztaityozx です。 今回はテスト実行のボトルネックを OverlayFS を利用することで解消した話と、OverlayFS の動作を調べるためにbpftraceを使った話をします。 かんたん概要 Test::mysqldを使って挿入済みのデータを持ったmysqldをテストごとに起動していた データが増えてきたことでコピーがめちゃくちゃ遅くなり、開発体験が最悪になった コピーを OverlayFS でのマウントに置き換えてすごく速くした 動作について気になる点があったのでbpftrace を使ってトレースを行い、カーネル関数の呼び出しも観察した 前提 こ…
8ヶ月前
私が 1on1 でしていること
Mobile Factory Tech Blog
言葉の定義 モバファクの 1on1 の目的 1on1 で自分が大事にしていること 1on1 はメンティーの時間である 1on1 はメンターの時間でもある 1on1 初回 今使っている 1on1 のフォーマット 体調 半期目標の進捗振り返り ネクストアクションの振り返り うまくいかなかったこと・もっとよくなりそうなところ・うまくいったこと・その他に話したいこと ネクストアクション 1on1 の中でのやりとり お休みの取り方がわからない 最近見積もりの精度が高くなっている 朝会の議事録をとるようにしたい 最近チームの動きがぎこちないと感じている 1on1 定期的な振り返り まとめ こんにちは。駅メ…
9ヶ月前
NFTコントラクトにメタトランザクションを導入する
Mobile Factory Tech Blog
こんにちは、ブロックチェーンチームの id:charines です。 今回は ERC-721 コントラクト(NFT コントラクト)にメタトランザクションを導入した開発事例について紹介します。 主にブロックチェーンに関する開発者の方を対象とした内容になります。 メタトランザクションの導入理由 1. マーケットプレイスのユーザが NFT を出品しやすい 2. NFT クリエイターがコントラクトを管理しやすい 実装方針 実装 フォワーダー ERC-721 まとめ メタトランザクションの導入理由 メタトランザクションとは、トランザクションの実行に必要なガス代を実行者ではない第三者が払うシステムです。 …
9ヶ月前
Mapbox GL JS でresize animationを実装する
Mobile Factory Tech Blog
みなさん、こんにちは。新卒エンジニアの id:matsuda0528 です。 今日は、Mapbox GL JS を使用して地図の描画領域を変更するアニメーションを実装する方法についてお話します。 TL;DR 以下のように、setInterval() 関数を用いて resize() 関数を繰り返し実行する方法で実装しました。 const onClickMapResizeButton = () => { clearInterval(mapResizer) mapResizer = setInterval(() => { map.value.resize() }) } const onTransit…
10ヶ月前
コスト削減のため Redis の sorted sets で実装していたランキング処理を MySQL に移行しました
Mobile Factory Tech Blog
駅メモ!チームエンジニアの id:yumlonne です。 この記事では Redis の sorted sets で実装していたランキング処理を MySQL に移行した仕組みを紹介します。 背景 駅メモ!には複数のランキングがあり、Redis の sorted sets を使うことでパフォーマンスの高いランキング処理を実現していました。 中にはリリースからの全期間に渡るデータを利用するランキングもあり、Redis のメモリ使用率は日に日に増えていく一方でした。 何度か Redis をスケールアップしてメモリを増やすことで対応していましたが、根本的に対応しなければ今後も Redis をスケールア…
1年前
dayjsで相対時間を操る
Mobile Factory Tech Blog
皆さんこんにちは、最近ずっとポットのお湯を沸かし続けないと寒くて耐えられないエンジニアの id:Dozi0116 です。 今回は、 dayjs で相対時間を求める方法、自由自在に操る方法を紹介します。 TL; DR 以下は今日紹介する出力をいじるための設定と、利用例です。 import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime.js" import updateLocale from "dayjs/plugin/updateLocale.js" import "dayjs/locale/ja.j…
1年前
緊急度が低く重要度が高く、そして重いプロジェクトを進める
Mobile Factory Tech Blog
こんにちは!ブロックチェーンチームでエンジニアをしている id:dorapon2000 です。寒暖ある中でインフルも流行っているようで、私も咳がなかなか収まらず困っています。皆様におかれましても体調にはお気をつけください。 今回はタイトルの通り「緊急度が低く重要度が高く、そして重いプロジェクト」を私が担当した際に感じたことや学んだことをまとめた記事になります。前半で私の担当したプロジェクトの経過について感じたことをお話して、後半で学びをまとめます。 第二領域 重い第二領域の問題 私の場合 初期 中期 後期 重い第二領域プロジェクトを通しての学び まとめ 第二領域 「緊急度が低いが重要度が高いタ…
1年前
Ethereumにおけるアップグレード可能なコントラクトの開発
Mobile Factory Tech Blog
こんにちは、ブロックチェーンチームの id:charines です。 今回はアップグレード可能なスマートコントラクトの開発事例について紹介します。 コントラクト開発者のみなさんの参考になればと思います。 アップグレード機能の必要性 アップグレード可能なコントラクトの仕組み 今回行った実装 コントラクト実装 プロキシをデプロイする仕組みの実装 まとめ アップグレード機能の必要性 ブロックチェーン上に展開されたコントラクトはオフチェーンのアプリケーションと異なり、通常は後から実装を修正したり機能を追加することはできません。しかしアップグレード可能なコントラクトとして設計することで、変更の余地を持た…
1年前
Git の Squash マージをやめた話
Mobile Factory Tech Blog
こんにちは!ブロックチェーンチームでエンジニアをしている id:dorapon2000 です。最近買ってよかったものは「潮の華 あおさといわしふりかけ」です。 今回は Git の Squash マージについての知見を共有したいと思います。端的に言うと、 チーム開発で Non Fast-Forward マージをやめて Squash マージを採用し、再び Non Fast-Forward マージに戻した経緯の説明です。Squash マージを運用に導入するか考えたことがある方の参考になればと思います。 Squash マージとは マージには 3 種類ありますね。みなさんはトピックブランチを main …
1年前
MemcachedとRedisの統合によるコスト削減の紹介
Mobile Factory Tech Blog
駅メモ!チームエンジニアの id:yumlonne です。 この記事では駅メモ!で使っていた Memcached を廃止し Redis に統合した経緯や流れを紹介します。 記事内で提供するサンプルコードは、駅メモ!の実装に合わせ Perl となってます。 簡単なコードなので Perl に詳しく無い方でも十分理解できると思います。 KVS 統合の背景 駅メモ!は AWS を使ってサービスを提供しています。 統合前は Amazon ElastiCache で Memcached と Redis の両方を運用していました。 Memcached はプライマリノードのみ、Redis はプライマリノードと…
1年前
Flutter でカメラ映像と Widget を重ね合わせて劣化させずに撮影する
Mobile Factory Tech Blog
こんにちは!この記事では Flutter でカメラを扱うアプリを作成する際の工夫について、紹介します。 はじめに 弊社で開発されている駅メモ!おでかけカメラ(以下「おでかけカメラ」)は 2022 年 11 月にリニューアルし、UI の刷新や動作不良の解消、機能の拡充を行いました。 内部的には、これまでの Unity 製だったおでかけカメラ(以下「旧おでかけカメラ」)を一度全て捨て、新しく Flutter で作り直すということをしています。 社内には Flutter に関する知見がほとんどなかったため、おでかけカメラのリニューアルは技術のキャッチアップから始まり、試行錯誤を重ねた開発となりました…
1年前
駅メモ!開発チームにおける Vue.js のマイグレーションプロセス
Mobile Factory Tech Blog
こんにちは、駅メモ!でフロントエンドを良い感じにしたかったチームの id:yunagi_n です。 今回は、駅メモ!にて使用している Vue.js を 2 系から 3 系へあげて行くに当たって、採用した手法とマイグレーションプロセスについて紹介します。 今回、マイグレーションするに当たって、以下の要件がありました: 機能開発を止めてはいけない 駅メモ!では 6 月と 10 月に周年リリースがあり、それの開発を止めるわけにはいきませんでした もちろん、その間にあったイベントなどについても、開発は継続し続けています 多くのメンバーは割けない 基本はわたしが中心に、追加で 1 人〜2 人に手伝っても…
1年前
社内で「朝Rustもくもく会」を開催しました
Mobile Factory Tech Blog
こんにちは!エンジニアの id:mkan0141 です! モバイルファクトリーでは「シェアナレ」という 1 日の業務時間のうち 1 時間であれば自習・勉強に使って OK という制度があります。 今回はその制度を利用して 8 月に「朝Rustもくもく会」というものを開催したので紹介します。 朝 Rust もくもく会とは 8 月の平日毎朝 08:30~09:30 に Rust に関することをもくもくと勉強・作業する会です。 目的は「Rust を触ったことがない・少し触ったけど続かなかった人に Rust をちゃんと勉強する機会を作る」と「早起きして健康になる」です。参加するだけで Rust の知識と…
1年前
PerlパッケージからC#クラスの雛形を作ってみる
Mobile Factory Tech Blog
駅メモ!開発基盤チームの id:xztaityozx です! 皆さんは Perl を書いていますか?モバイルファクトリーが長く提供しているサービスなどでは、バックエンドが Perl で書かれています。 しかしながら、自分は普段インフラ領域をやらせてもらっているということもあり、Perl で新機能開発をする!といった機会がそんなにありません。 せっかく Perl だらけの環境にいるのに、あんまり Perl に触れられないのはもったいないな〜と思い、今年のゴールデンウィークは PPI を使ったメタプログラミングで遊んでいました。 metacpan.org で、ちょっと遊んでいたら Perl のパッ…
1年前
Perl で App Store Server Notification V2 の検証をする
Mobile Factory Tech Blog
こんにちは、エンジニアの id:kaoru-k_0106 です。 駅奪取のサブスク機能である「駅奪取er定期券」は、App Storeのサーバ通知の実装の際に App Store Server Notification V2 を用いました。 他の言語での Server Notification V2 の実装例は見つかりますが、Perl のものはありませんでした。 そこで、今回は Perl での検証部分の実装方法について触れようと思います。 App Store Server Notification V2 について V1 のときは、通常の App 内課金と同じように、サーバ通知で送られてきたレシ…
1年前
TypeORMのData Mapperパターンにおけるリレーションの型安全性を担保する
Mobile Factory Tech Blog
こんにちは!BC チームでエンジニアをしている id:d-kimuson です。 今回は外部リレーションに関して型安全性の乏しい TypeORM の Data Mapper パターンを独自のユーティリティ型を使ってちょっとマシにする方法を紹介します。 前提: TypeORM の外部リレーションについて TypeORM では ManyToMany 等のデコレータを使ってスキーマに Foreign Key を書くことができます。 // 公式ドキュメントのサンプルです @Entity() export class Category { @PrimaryGeneratedColumn() id: nu…
1年前
GitHub ActionsのSelf-hosted Runnerで複数設定のRunnerを使う
Mobile Factory Tech Blog
駅メモ!開発基盤チームの id:xztaityozx です!今回は CI/CD のお話です。 現在、駅メモ!チームでは Jenkins を使った CI/CD が構築されています。今回ここに GitHub Actions を加えることとなりました。チームでは段階的に GitHub Actions に移行していく計画です。 GitHub Actions を採用した理由としては、技術スタックの変化による需要の増加と Jenkins で抱えていた問題を解決するためという 2 点が主です。この記事では後者について書こうと思います。 現在の Jenkins 構成で困っていたこと 現在の Jenkins 構…
1年前
Perl5.38の変更点
Mobile Factory Tech Blog
こんにちは、エンジニアの id:mp0liiu です。 今年も7/2にPerlの最新安定バージョンである5.38がリリースされたので新機能や変更点についてまとめます。 5.38 はかなり変更点が多いですが、ニッチな機能に対する変更も多いので影響の大きそうな箇所だけ知りたい方は最初の方だけ読んで頂くといいと思います。 重要な変更点 class構文の追加 実験的機能としてですが、ついに Perl にclass構文が追加されました。 次のような構文になります。 use v5.38; use experimental 'class'; class Point; field $x :param = 0;…
1年前