Vercel
Next.jsアプリのホスティングプラットフォームで、BenriWorksの各アプリと本サイトのデプロイ先として使用しています。
Vercelは、Next.jsアプリケーションのホスティングとデプロイを提供するプラットフォームです。BenriWorksでは、各アプリと本サイトBenriWorks Labのデプロイ先として使用しています。
「マージ=公開」の運用
BenriWorksの公開フローは、GitHubへのPull Requestマージを公開操作とみなす形に統一しています。マージするとVercelが自動でProductionへデプロイし、ブランチをプッシュすればPreview環境が立ち上がります。サーバーの保守作業は一切なく、公開の失敗はビルドの失敗として現れるため、壊れた状態が本番に出にくい構成です。
個人で10を超えるアプリを運用できているのは、この「デプロイを考えなくてよい」性質によるところが大きいと感じています。デプロイ手順書が存在しないことは、数か月ぶりに触るアプリでも公開作業で迷わないことを意味します。
マルチプロジェクトとドメイン設計
BenriWorksではアプリごとにVercelプロジェクトを分け、benriwork.jpのサブドメイン(anzen-simulator.benriwork.jpなど)を割り当てる構成をとっています。プロジェクトを分けると、あるアプリのビルド失敗が他のアプリの公開を止めないこと、アプリごとに環境変数を隔離できることが利点です。
一方で、運用のなかで学んだ注意点もあります。
- 既定ドメインの扱い。 各プロジェクトには
*.vercel.appの既定ドメインが付き、カスタムドメインを設定しても既定側は生き続けます。同じ内容が2つのURLで公開される状態になるため、vercel.jsonで既定ドメイン側にリダイレクトやX-Robots-Tag: noindexを設定し、検索エンジンから見た正規URLを一本化しています。 - リダイレクトの種類。 ドメイン移転でリダイレクトを設定する場合、一時的な307ではなく恒久的な301/308を選ばないと、検索エンジンに評価が引き継がれません。ダッシュボードの既定値が307である点には注意が必要です。
- 配信設定とアプリ設定の整合。
vercel.jsonのtrailingSlashやrewritesは、アプリ側のルーティング設定と揃っていないと、リダイレクトループや意図しない404の原因になります。本サイトをbenriwork.jp/blog配下へ統合した際は、rewriteによるプロキシ配信とbasePathの組み合わせで実現しました。
静的中心・サーバーレス最小
ホスティング費用と保守性の観点から、各アプリは静的生成を基本にし、サーバー側の処理(AI画像生成のAPI呼び出しなど)が必要な場面に限ってサーバーレス関数を使う方針です。この構成の実際の運用記録や、移行時に踏んだ問題は開発記事として発信していきます。
この技術を使うアプリ

公開中
AI Detective
暗号化された現場記録を観察し、証言や物、時系列の食い違いと、その記録がどこから来たのかを検証していく静かなSF推理ゲーム。3ステージ・全14事件を収録し、根拠が足りなければ「保留」も正式な選択肢です
ゲーム

公開中
修正月齢 & 修正日齢 計算アプリ
出産予定日と実際の生年月日から、早産児の修正月齢・修正日齢を計算するWebアプリ。予防接種と乳幼児健診の予定・完了を記録できるマイルストーン帳も備え、入力はブラウザ内にのみ保存されます
生活ツール

公開中
学歴早見表
子どもの生年月日を入れるだけで、小学校から大学までの入学・卒業年度と、その年の年齢を一覧にするWebアプリ。早生まれの学年差に対応し、兄弟姉妹を並べて進学が重なる年も確認できます
生活ツール

公開中
高圧受電設備 単線結線図ジェネレータ
設備条件を選ぶと、6.6kV高圧受電設備の単線結線図・機器一覧・要確認事項・短絡電流の仮計算をまとめて生成する設計支援Webアプリ。設計を自動確定するのではなく、検討の叩き台を素早くつくるための道具です
建設DX

公開中
MermaidLayoutFinisher
Mermaidのフローチャートを自動レイアウトで描画し、直しきれない配置をドラッグと整列で仕上げてから、SVG・PNG・PowerPointへ書き出すWebツール。データはブラウザ内にのみ保存されます
業務効率化

公開中
NanoBanana Play
Gemini APIを使って、画像の生成・編集・合成をブラウザで試せるプレイグラウンド。プロンプトと元画像を差し替えながら、生成AIで画像がどこまで扱えるかを手を動かして確かめられます
業務効率化

ベータ版
SiteVision Planner
現場図面と候補カメラから、遠隔巡視の配置案・死角・確認品質を机上で検証し、説明可能なレポートにまとめる計画支援ツール。カメラを買う前の検討に使えます
建設DX

ベータ版
白地図 Studio
日本の都道府県・市区町村を塗り分けて、プレゼン資料向けの白地図を書き出すWebアプリ。ExcelやCSVの貼り付けから一括で色分けでき、PNG・PPTX・PSD・SVGで出力できます。編集はブラウザ内で完結します
業務効率化

公開中
wavelane
陸上無線技術士の学習に向けて、電波伝搬をスライダー操作と3D断面図で体験しながら計算練習できる学習ツール
資格対策

公開中
地デジエリアマップ
現在地から地デジ中継局への方位・距離・受信の目安と放送区域を地図で確認できる、アンテナ方向合わせ支援アプリ
生活ツール

公開中
安全体感シミュレーター(クレーン・バケット車)
クレーン6シナリオとバケット車7シナリオを車種別に体験する教育用3Dアプリ。操作と危険の関係を学び、実機の訓練や作業計画を代替しないことも確認できます。
建設DX3Dシミュレーション
関連記事

Codex 集中講座 · 第15回
ガイド公開 更新
Vercelで、作ったものを自分のURLへ届ける
Codex 集中講座の第15回。GitHubとVercelを連携し、プレビューで確認して本番へ届ける流れを学びます。環境変数、ビルドの記録、戻し方も整理します。

開発記事公開
Codex と GitHub と Vercel で、Webアプリを公開するまでの流れ
Codex で書き、GitHub でレビューし、Vercel で公開する。BenriWorks のWebアプリ開発の流れを、実際のリポジトリに置いてある運用ルール、CIの門、リリース手順から記録します。動くことと公開してよいことの間に何を置いているかが主題です

開発記事公開
Claude Fable 5.1 で13リポジトリにGA4を入れた記録
16サイトに同じ計測タグを入れる作業を、Claude Code のFable 5.1に任せました。公式ドキュメントにある仕様と、13サイトで届いて3サイトで届かなかった顛末、届かなかった原因を書いたのが誰だったかを記録します

開発記事公開
GPT-6 Astra の Codex に、16サイトの疎通確認を任せた記録
GA4の管理画面の設定と、16サイトで計測が届いているかの確認をCodexに任せました。OpenAIが公開しているGPT-6 Astraの仕様と、戻ってきた報告書のどこに価値があったかを記録します

ガイド公開
自由空間の式が効かなくなる3つの場面
陸上無線技術士の伝搬問題で、自由空間伝搬損失の式を覚えたのに解けなくなるのはどこか。見通しが切れる、障害物で回折する、大地反射が乗るという3つの場面と、そこで式を切り替える判断をまとめます

ガイド公開
遠隔巡視のカメラ台数に根拠をつける
監視カメラを何台入れれば足りるのかを説明できないとき、何を先に決めればよいか。見たい水準ごとに必要な画素が変わることと、前提を書き出した資料の形をまとめます

ガイド公開
単線結線図の一枚目に、確認事項がついてくる
高圧受電設備の単線結線図を初めて起こすとき、何から決まるのか。設備条件を入れると図面と一緒に出てくる要確認事項を、人が判断すべき箇所の一覧として使う手順をまとめます

ガイド公開
Excelの都道府県データを地図の色に変える
手元の表計算にある都道府県別や市区町村別の数値を、塗り分け地図にするまでの手順。名前が一致しない原因、5段階の区切りが等間隔で決まること、色を自分で決めて渡す方法をまとめます

開発記事公開
フローチャートの配置を、実測スコアで選ぶ
MermaidLayoutFinisherの「おまかせ最適化」が、複数の配置候補をどう作り、線の交差や貫通をどう数え、なぜ現状より悪い結果を返さないのか。自動レイアウトを「良くなったときだけ適用する」ための設計判断を紹介します

開発記事公開
格子サンプリングで遠隔巡視の「見える」を判定する
SiteVision Plannerの2Dカバレッジ判定の設計を紹介します。敷地を格子に切って1点ずつ画角・距離・遮蔽・画素密度を確かめる順序、見えなかった理由の絞り方、そしてカバー率が良くても遠隔巡視を候補にしないハードゲートの考え方です

ガイド公開
Mermaidのフローチャートを、PowerPointで編集できる図形として貼る
Mermaidで描いたフローチャートをスライドに載せるとき、画像で貼ると直すたびに作り直しになります。PowerPointのネイティブ図形として書き出す方法と、図形の対応、貼った後にできること、知っておくべき制約をまとめます

ガイド公開
遠隔巡視のカメラ配置は、何から決めればよいか
建設現場に遠隔巡視のカメラを入れるとき、機種選びより先に決めるべきことを解説します。「映る」と「確認できる」の違い、死角の潰し方、遠隔化してはいけない現場の見分け方、そして机上検証を実機PoCにつなげる手順をまとめます

ガイド公開
移動式クレーンの定格荷重とは何か。作業半径との関係をわかりやすく
移動式クレーンの定格荷重・定格総荷重・つり上げ荷重の違いと、作業半径が大きくなるほど吊れる重さが減る理由を解説します。転倒災害の典型パターンと必要資格の区分もまとめます

ガイド公開
自由空間伝搬損失の計算に出てくる32.45の意味と覚え方
無線工学の頻出計算「自由空間伝搬損失」を、公式の意味から解説します。32.45+20log f+20log d の由来、距離2倍で6dB増える理由、試験での計算のコツをまとめます

ガイド公開
早生まれはなぜ1学年上になる? 学年の区切りと年齢計算のしくみ
学年の区切りが「4月2日から翌年4月1日」になる理由を、学校教育法と年齢計算のルールから解説します。4月1日生まれが上の学年になる仕組みもわかります

ガイド公開
地デジが映らないときに原因を順番に絞り込む手順
テレビが映らない・特定チャンネルだけ乱れるときに、症状から原因を絞り込む手順を解説します。E202などのエラー表示の見方、確認する順番、業者に頼む前にできることをまとめます

ガイド公開
修正月齢とは何か。早産児の月齢の数え方と計算方法
出産予定日を基準に数える「修正月齢」の意味と計算方法を、具体例つきで解説します。暦月齢との違い、いつまで使うかの一般的な目安もまとめます

ガイド公開
高圧受電とは何か。低圧との違いとキュービクルの基本
建物の電気の受け方には低圧受電と高圧受電があります。契約電力による使い分け、キュービクルの役割と中身、保安管理の義務、CB形とPF-S形の違いまで、基本を一気に解説します

ガイド公開
白地図をパワポ資料に使う方法と、権利の注意点
営業資料や報告書に日本地図を載せるときの実務手順を解説します。地図画像の著作権・利用条件の確認ポイント、塗り分け地図の作り方、PowerPointで崩れない貼り付け方をまとめます

開発記事公開
教科書の式の不連続を、直さずにテストで固定する
学習ツールwavelaneで、ナイフエッジ回折の近似式に残る区分境界の不連続を、式を歪めずに既知の性質としてテストで文書化した判断を紹介します

開発記事公開
支持多角形でクレーンの転倒を判定する
クレーン安全シミュレーターで、支持多角形と安定余裕から転倒の危険を判定し、アウトリガーの張出しが効く理由を体感できるようにした実装を紹介します

開発記事公開
標高タイルで電波の見通しを判定する
地デジエリアマップで、国土地理院の標高タイルから地形断面を作り、中継局への見通し(山かげ)を判定した実装を紹介します

開発記事公開
物理エンジンでクレーンの荷振れとワイヤー破断を表現する
クレーン安全シミュレーターで、振り子近似からRapier3Dの剛体とバネダンパーケーブルへ移行し、荷振れと破断を創発させた実装を紹介します

開発記事公開
買い切りアプリのライセンスをオフラインで検証する
学習ツールwavelaneで、Ed25519署名トークンによりサーバー通信なしでライセンスを検証し、個人情報も持たない設計にした実装を紹介します

開発記事公開
スマホのコンパス方位をWebで取得する
地デジエリアマップ(旧ARコンパス)の開発で、iOSとAndroidの方位センサーの違いを吸収し、安定した方位表示を実現した実装を紹介します

ガイド公開 更新
テレビアンテナの向きを方位で合わせる方法
地デジアンテナを中継局に向けるための手順を、中継局の調べ方から方位合わせ、受信確認まで順に解説します

開発記事公開
Three.jsで移動式クレーンの荷振れを表現する方法
振り子運動と減衰を使った荷振れ表現の設計方針を、運動モデルとフレーム更新の観点から解説します

ガイド公開 更新
クレーン安全教育に3Dシミュレーターを使う利点と限界
3Dシミュレーターをクレーンの安全教育に取り入れる場合の一般的な利点と、実機訓練や法令上の教育を代替できない限界を整理します