Rails7でService Workerを導入し、プッシュ通知を実装する手順をまとめました。 環境ruby: 3.3.6Rails: 7.2.2web-push: 3.0.1 1. Railsプロジェクトの作成まずは新しいRailsプロジェクトを作成します。rails new pwa_notificationcd pwa_notification 2. serviceworker-rails の追加Gemfileに以下を追記します。gem 'serviceworker-rails'記述後、インストールと初期ファイルを作成します。bundle instal...

!この記事は「mofmof Advent Calendar 2024」10 日目の記事です。 はじめにhttps://astro.build/blog/astro-5/Astro v5 がリリースされたので、TIL サイトで使用していた Astro v4 からアップグレードしました。この記事では、アップグレードに伴い変更が必要だったところや v5 で利用できるようになった実験的な機能についてご紹介したいと思います。https://kmkkiii.github.io/til Astro v5 へのアップグレードhttps://docs.astro.build/ja/g...

!この記事は「mofmof Advent Calendar 2024」4 日目の記事です。昨日は @kmkkiii さんのsimple_formとStimulusを併用していて地味に詰まったポイントでした。こんにちは。Go言語でつくるインタプリタを読んでます！！！！（まだ読んでる途中）自分の理解の整理のために、読んだところまでを自己流でまとめてみようという記事です。詳しくは書籍「Go言語でつくるインタプリタ」を読んでくださいhttps://www.oreilly.co.jp/books/9784873118222/めちゃくちゃ端折って簡単なコードについて書くことにします。l...

!この記事は「mofmof Advent Calendar 2024」1 日目の記事です。 New Package: drizzle-seedDrizzle ORM に待望の drizzle-seed パッケージがリリースされました(2024-11-22)。https://github.com/drizzle-team/drizzle-orm/releases/tag/0.36.4ドキュメントはこちらhttps://orm.drizzle.team/docs/seed-overviewこれまでは migration ファイルを作成して INSERT 文を書いていました。...

Web サイトやアプリの開発において、画像の最適化はパフォーマンス向上のために重要なタスクです。特に SVG 形式の画像は、ベクター形式のため拡大や縮小をしても画質が劣化しませんが、ファイルサイズが大きくなりやすいという特徴があります。開発中のアプリで使用されている画像を WebP に変換して最適化を行ったため、やったことを記録として残しておきます。また、SVG から PNG に変換するにあたって一部の画像でクリッピングパスの問題があったため対応した内容を共有します。 PNG 画像を WebP 形式に変換するWebP は Google が開発した画像形式で、PNG や JPE...

はじめにNext.js v14 から Stable になった Server Actions。それに対応した フォームライブラリとして TanStack Form を試してみます。TanStack Form は現時点で v0 の β 版ですが、以下の特徴を備えた フォームライブラリです。ファーストクラスの TypeScript サポートシンプルで簡潔な APIクライアントサイドとサーバーサイド両方のバリデーションに対応ヘッドレス任意の UI フレームと組み合わせて実装可能アグノスティックな設計React、Vue、Angular, Solid, Lit と複...

はじめに!この記事は「mofmof Advent Calendar 2023」22 日目の記事です。wicked_pdfを使わない場合の代替案としてFerrumという gem を使ってみました。元々は PDF 生成機能を実装するためにwicked_pdfを使おうとしていましたが、依存しているwkhtmltopdfが今年に入ってアーカイブされていたことを知りました。内部的に利用しているQT Webkitレンダリングエンジンのメンテナンスが止まったことで、wkhtmltopdfもメンテナンスが継続できなくなってしまったようです。 wicked_pdf の現状wicke...

こんにちはmofmofでエンジニアをしているshwldです。最近仕事で既存のシステムと連携する新しいプロダクトの設計をEventStormingで行いました。 はじめに新しいプロジェクトの設計に悩んでいるチームメンバーがいました。そのプロジェクトの状況は、以下のようなものでした。Railsで作られたサーバ、PHPで組まれたサーバ、Node.jsで動いているサーバなど、既存のシステムが複数存在するShopifyとの連携を筆頭にネットワーク越しに依存しているサービスが複数存在するバッチ処理が走ったあとでないと連携されない項目など、連携の条件が複雑それぞれのサービスのドキュ...

こんにちはmofmofでエンジニアをしているshwldです。イベントストーミング、ユーザーストーリーマッピングはどちらも、ホワイトボードと付箋を使って、プロジェクトの全体像を明らかにするワークショップです。イベントストーミングとユーザーストーリーマッピングの違い、使い分けについて考えました。また、似てるので実際に両方やってみました。その感想も書いています。ちなみにこのようなイベントをオンラインで実施する場合は付箋も扱えるMiroが便利なのでおすすめです。https://miro.com/ja/online-sticky-notes/ イベントストーミングとは?ドメインイベ...

こんにちはmofmofでエンジニアをしているshwldです。graphqlでエラーを返す方法はいくつかあり、それぞれメリデメありますが、Unionで返すのが好みです。例えば、以下のようにmutationで実行時のバリデーションエラーを共通のフォーマットで返すことを考えてみました。mutation createPost($input: CreatePostInput!) { createPost(input: $input) { result { ... on Post { id name } ... o...

こんにちはmofmofでエンジニアをしているshwldです。今回はTypeScriptで「DateRange型」のような型を作る利点とその正しさを保証する方法を書きます。DateRange型の例type DateRange = Readonly<{ since: Date; until: Date; }>; 利点についてDomain Modeling Made FunctionalはF#で関数型によるDDDを実践する本ですが、型の表現力によってドキュメンテーションすることを書いています。TypeSciprtも型の表現力が豊かです。F#と同じように型によるドキュメ...

こんにちはmofmofでエンジニアをしているshwldです。mofmofでは今年の1月から毎週水曜日にみんなで個人開発する時間が設けられています。https://note.com/shwld/n/nfb1a2abfc9eb水曜日と、毎日1時間半程度(やってない日や逆に多くやった日もありますが、均すと多分このくらい)を使って2ヶ月でSNSのようなサービスをリリースできそうなところまで持っていけたので、やったことをログとして書きます。 作っているものエンジニア向けの、フローメモを投稿できるSNSを作っています。デスクトップアプリで、すぐに起動してさっと書けて投稿内容を友達と...

パッケージ側で定義されているもの・自動生成されるものに乗っかっているだけでも十分に便利なTypeScript。ですが、思わぬエラーに悩まされる・エラーメッセージが読み解けなかったり、やりたいことを実現する手段がわからないこともしばしばあります。そんな時に役立つなんやかんやが書いてある記事を目指して書きます。 ※随時アップデート d.tsファイルとは型定義ファイルです。アンビエント宣言というものを書くのに使われます。例えばTypeScriptをインストールする際に付属している型定義ファイルlib.d.tsには windowやdocumentなどのアンビエント宣言が書かれています。...

こんにちはmofmofでエンジニアをしているshwldです。今日はmofmofで行っている技術1on1という試みについて書きます。 mofmofで行っている技術1on1とは過去2回実施しており、その際はこのような形で実施しました。#1 技術習得・向上のための1on1①#2 技術習得・向上のための1on1② どのように進めたか。意識したことは何か「継続的に学習することをサポートする」をメインの価値に据えて実施しました。過去2回実施してきました。前期、前々期は1on1の中で「技術について深く考える」というところにフォーカスしていました。今回はそこを辞めました。今期は基本...

はじめにこの記事は、mofmof Advent Calendar 2022 15 日目の記事です。10 月から株式会社 mofmof に入社し、研修として Ruby on Rails × GraphQL × React × TypeScript を使ったタスク管理アプリを作りました。その中から GraphQL に関する実装内容を抜粋してまとめてみました。これから GraphQL を使っていこうとしている方のとっかかりとして、少しでも参考になれば幸いです。 導入 サーバーサイド(Rails)graphql を使うための gem をインストールします。Gemfile...

こんにちはmofmofでエンジニアをしているshwldです。今日はmofmofで行っている技術1on1という試みについて書きます。 mofmofで行っている技術1on1とは実は以前に実施したことがあり、その際はこのような形で実施しました。https://zenn.dev/shwld/articles/22ee6e9e8970c8この度、前回のふりかえりを活かし2期目の実施をしました。主目的はエンジニアの技術力を上げるためとおいていたのですが、今回ちょっと目的が変わってきたのを感じます。最後にどう変わったのか書こうと思います。 前回のふり返りに対してのアクションは?...

こんにちはmofmofでエンジニアをしているshwldです。アジャイルな開発でよく用いられる、ユーザーストーリーについてあらためて考えました。より良いユーザーストーリーを作るための原則をBill Wakeという方が提唱している「INVEST」という指標があるのでこれをみながらやっていることや思ったことを書いていきます。I – IndependentN – NegotiableV – ValuableE – EstimableS – SmallT – Testable Independent（独立している）ユーザーストーリーはそれぞれ独立して重複しないようにしま...

こんにちはmofmofでエンジニアをしているshwldです。今日はmofmofで行っている技術1on1という試みについて書きます。 技術1on1とは1on1の実施目的として、「部下の問題解決を支援し、業務の振り返りの場を設けることで、部下は日々の業務から多くの気づきや改善を意識することができます。」があります。これを技術的課題に当てはめ、「メンバーひとりひとりの技術的課題について深く考える場を設けることで、課題について多くの気付きや仮説、手段を意識することができます。」という効果を見込むものとなります。 なぜ始めたのかエンジニアは成長のために、実践の機会が必要です...