はじめに 駅メモ！チームでエンジニアをしている id:wgg00sh です。 この記事では、駅メモ！内で地図クライアントとして使用している mapbox-gl-js を使うにあたって工夫した点などを紹介していきます。 【✨新機能リリース✨】6/1 12時頃より、アプリ版駅メモ…

はじめに 駅メモ！開発チームエンジニアの id:kaidan388 です。 駅メモ！のフロントエンドは Vue で書かれており、およそ 1500 コンポーネントあります。 Vue2 が EOL を迎えるに際して、これをどう Vue3 に移行するかが問題になりました。 具体的には以下の…

こんにちは、駅メモ！開発チームエンジニアの id:hayayanai です！ 私が開発に関わる駅メモ！は、今年で 10 周年を迎えたゲームです。フロントエンドは Vue.js で開発されていて、現在もコード量が増加しています。 今回は、そんな駅メモ！のフロントエンド…

こんにちは。駅メモエンジニアの id:dorapon2000 です。 約半年前の 6 月 1 日にステーションメモリーズ！（駅メモ！）10 周年を記念してタイムラインと地図の切替機能をリリースしました。大変好評を頂いておりとても嬉しいです。 今回は、その機能の中で毎…

みなさん、こんにちは。新卒エンジニアの id:matsuda0528 です。 今日は、Mapbox GL JS を使用して地図の描画領域を変更するアニメーションを実装する方法についてお話します。 TL;DR 以下のように、setInterval() 関数を用いて resize() 関数を繰り返し実行…

皆さんこんにちは、最近ずっとポットのお湯を沸かし続けないと寒くて耐えられないエンジニアの id:Dozi0116 です。 今回は、 dayjs で相対時間を求める方法、自由自在に操る方法を紹介します。 TL; DR 以下は今日紹介する出力をいじるための設定と、利用例で…

こんにちは！この記事では Flutter でカメラを扱うアプリを作成する際の工夫について、紹介します。 はじめに 弊社で開発されている駅メモ！おでかけカメラ（以下「おでかけカメラ」）は 2022 年 11 月にリニューアルし、UI の刷新や動作不良の解消、機能の…

こんにちは、駅メモ！でフロントエンドを良い感じにしたかったチームの id:yunagi_n です。 今回は、駅メモ！にて使用している Vue.js を 2 系から 3 系へあげて行くに当たって、採用した手法とマイグレーションプロセスについて紹介します。 今回、マイグレ…

こんにちは、 id:yunagi_n です。 本日の記事は React のお話です。 React で良い感じにスクロールしてくれるライブラリで、有名なものに react-scroll というものがあります。 これは、 JS からライブラリのメソッドを呼び出すことで、もしくは組み込みコン…

はじめに id:wgg00sh です。 この記事では、2022年9月にリリースされた iOSの新バージョン 16.0 に向けて、駅メモ！の地図クライアントで行った対応について紹介します。 駅メモ！の地図について 昨年度のアドベントカレンダー で紹介していますが、駅メモ！…

こんにちは、エンジニアの id:yunagi_n です。 みなさんは JavaScript において、 URL をパースするとき、どの API を使用していますか？ もっとも簡単なのは、 URL Interface を使用することだと思います。 今回は、その URL Interface が、 JavaScript の…

駅奪取エンジニアのid:dorapon2000です。駅奪取では11月にゲーム内の地図のリプレースを行いました。地図そのもののスタイルも変わりましたが、地図の表示に使うライブラリも変更しています。今回は、アプリに地図を埋め込むだけであれば、ほんの少しのコー…

はじめに 駅メモ！チームでエンジニアをしている id:wgg00sh です． 駅メモ！では2021年11月に「未取得の駅を地図で確認できる機能」をリリースしました． 今回はこの機能を実現するにあたって発生した問題の一例と，その問題をどのように解決したかについて…

はじめに offsetWidthやoffsetHeightなどの幅や高さを取得する関数たちは、display: noneになっている場合、0を返します。 Vue.jsで要素の表示非表示にv-showを用いている場合、v-showはその要素にdisplay: noneを付与して制御を行うので、非表示中のoffsetW…

こんにちは、エンジニアの id:i1derful です。 2020年モバイルファクトリーアドベントカレンダーの21日目の記事です。 はじめに 僕は、とあるプロダクトチームのフロントエンドユニットに所属しています。 主に何してるかですと、フロントエンド改修プロジェ…

こんにちは、ブロックチェーンチームでソフトウェアエンジニアをしている id:odan3240 です。 ページをまたぐエラーを制御したい場合、グローバルな状態管理を行えるVuex が選択肢に上がるかと思います。しかし、Vue.js 2系に対応する 3系の Vuex は公式の T…

はじめに この記事は モバイルファクトリー Advent Calendar 2019 の18日目の記事です。 こんにちは、ブロックチェーンチームのエンジニアの id:odan3240 です。 NestJS では @nestjs/swagger を用いることで、コントローラーの定義から OpenAPI (swagger) …

こんにちは、モバイルファクトリー Advent Calendar 2019 17日目担当の yunagi_n です。 さて、2019年も暮れになった今、 PixiJS や Konva など、便利な Canvas フレームワークがありますが、 このたび初めて生の Canvas (Context2D) を触ることになりまして…

はじめに この記事は モバイルファクトリー Advent Calendar 2019の11日目の記事です． こんにちは，今年度よりモバイルファクトリーに入社した yasuda です 今回は，ブラウザ上で地図を描画するライブラリである MapboxGL JS と，その使用例について紹介し…

この記事は モバイルファクトリー Advent Calendar 2019の4日目の記事です。 こんにちは、ブロックチェーンチームでエンジニアをしている id:odan3240 です。 今回は Ethereum のスマートコントラクト (以下コントラクト) を TypeScript から型安全に扱う方…

これは、モバイルファクトリー Advent Calendar 2018 の16日目の記事です。 こんにちは、エンジニアのid:tenmihiです。 今日の記事は、vue-routerのナビゲーションガードを利用してページ遷移時のローディング処理を実装する方法のご紹介です。 概要 業務で…

こんにちは、フロントエンド寄りのエンジニアの @1derful です。 2018年モバイルファクトリーアドベントカレンダー 15日目の記事です。 前日は mattak さんの「フリーランスになって変化したこと」でした。 はじめに フロントエンド分野の技術は移り変わりが…