はじめに 前回の記事ではHonoにPrismaを導入してCloudflare D1と接続して簡単なAPIを作成しました。 今回はこれに続きZod OpenAPIを利用して、リクエストのバリデーション処理を実装し、それをそのままOpenAPIスキーマとして生成、Swagger UIで表示させるところまでやってみます。 環境 Hono v4.3.4 Zod OpenAPI v0.11.0 Zod OpenAPIのインストール まずはパッケージのインストールから始めます。 pnpm add zod @hono/zod-openapi Zodスキーマ 次にZodスキーマを書いて、リクエスト値やレスポンス値を定義します。 schema.tsというファイルを作成しました。 import { z } from "@hono/zod-openapi"; export const ErrorSchema =

はじめに 先日PrismaのCloudflare D1サポートが発表されたので早速使ってみます。 ただ動かすだけではつまらないので、実践的にHonoと組み合わせて簡単なAPIを作っていきます。 Together, Cloudflare and Prisma make it easier than ever to deploy globally available apps with a focus on developer experience. To further that goal, Prisma ORM now natively supports Cloudflare Workers and D1 in Preview 環境 Node.js v20.12.0 pnpm v8.15.6 Hono v4.2.3 Prisma v5.12.1 Honoのプロジェクト作成 まずはHonoの

はじめに これまで画像から日本語のテキスト認識（OCR）の機能を実現する場合は、GoogleのCloud Vision APIなどを利用していました。 この方法の問題として、テキスト認識を行いたい画像を一度サーバー側へアップロードする必要があり、解析結果を取得するまでにある程度は時間がかかってしまうことでした。さらにCloud Vision APIの場合は料金が発生してしまいます。 しかし、Googleが公開しているML Kitの中の一つであるText Recognition v2(Beta)では日本語がサポートされ、デバイス上のみで日本語のテキスト認識処理を完結できるようになりました。 今回はML Kit Text Recognition v2を導入してFlutterアプリでテキスト認識機能を実現したいと思います。 環境 Flutter 3.3.5 プロジェクト作成 $ flutter

何に使ったか？ 個人電話ブースの空き状況を、信号灯でお知らせするシステムを開発しました。 Fusic には、オンラインミーティング等をするときに使用する小さなブース(通称、サテライト)が6部屋あります。 そのうち3部屋は予約が必要な部屋で、残りの3部屋はあいていれば誰でも自由に使うことができる部屋です。 今回は、あいていれば誰でも自由に使うことができる3部屋のサテライトを対象にしています。 Fusic には弊社松山がOJTで制作したサテライト番長というシステムがあり、Slack コマンド経由、もしくはWebブラウザ経由でサテライトの空き状況を知ることができる仕組みがあります。各部屋に独自開発した超音波センサーを使ったデバイスを設置しており、凝った作りになっています。詳細はIoT でオンライン会議スペースを監視し Slack に表示する をご覧ください。 今回は、サテライト番長と連携してサテ

はじめに Rails7になってからjsbundling-rails が使われるようになり、esbuild/rollup/wepackなどJavaScriptをバンドルしてRailsアプリで配信する方法の選択肢は増えました。 これらを使うのも良いですが、より強力なフロントエンドツールであるViteを使うことで効率的なフロントエンド開発を行うことができます。 さらにvite_railsというgemを導入することで以前のwebpackerのようなTag HelperによるJSファイルの読み込みや、Rakeタスクassets:precompile でのViteアプリのビルドを行ってくれるようになります。 今回はvite_railsを使って、Vite + React(TypeScript)環境の構築を目指します。 Railsアプリを作成 まずは rails new でRailsアプリを作成します。

🌱 はじめに こんにちは。 自社プロダクト「360（さんろくまる）」を手掛けている技術開発第一部門の みやがわ です。 今日は、昨年2021年からフロントエンド界隈を盛り上げている 高速ビルドツール「Vite」を非SPAな従来のWebアプリに導入してみる、という内容をご紹介します。 タイトル通りバックエンドフレームワークにCakePHPを題材としてあげていますが、 対応方針はどのフレームワークでも変わらないのでLaravelやRailsを使ってる方にも参考になるかと思います。 🌱 内容まとめ MPAでもHMRとホットリロードの恩恵を受けられる✨ CakePHPに導入するためのヘルパーを作ろう✨ フロントエンドの世界はViteに、バックエンドの世界はvite-plugin-live-reloadに頼る✨ 🌱 環境 CakePHP: 4.3 Vite: 2.8.4 vite-plugin

筆者の技術スタック AWSに出会う前 筆者の技術スタックは以下のとおりです。 Webに関するフルスタックエンジニアエンジニアというのがわかりやすいのかもしれません。 フロントエンドからバックエンドまでいっしょくたに提供してた時代からのエンジニア その名残で今もフロントエンド、バックエンド、インフラ構築までおしなべて行ういわゆるフルスタックエンジニア 前職にて社内のインフラ整備だったりお客様の環境構築を任されることが多かった 現在の会社からAWSを学び始める とりあえずやってみよう！という精神を生かして 何でも手を出してた事から、アプリケーションを構築する会社で絶対数が少なくなりがちな インフラ部分を任されることが多かったと思います。 さくらのVPSなどに対して すべてのアプリケーションが整うお手製のシェルをメンテナンスしながら、 一発で環境を整えることに快感を覚えておりました。 Ansib