Nuxt– tag –
-
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第12回】本番公開前チェック:APIキー制限・クォータ・予算アラート・性能
Google Maps APIとNuxt 4の連載最終回。本番公開前に確認すべきAPIキーの制限、クォータと予算アラート、Map ID、性能、PostgreSQLへの切り替え、座標の保存期間をコード付きで解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第11回】少人数通話へ:メッシュ実装と SFU という選択肢
NuxtとWebRTCで作るビデオチャット連載の最終回。宛先付きシグナリングと参加者ごとの接続で最大4人のメッシュ通話を実装し、人数による通信量の増え方を実測。SFUの選択肢と本番までの残作業も整理。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第11回】本番運用へ:S3への切り替えとデプロイ
Nuxt 4でPDF管理システムを作る連載の最終回。保存先をAmazon S3に切り替え、署名付きURLでのダウンロード、本番での起動と環境変数、バックアップを解説。全12回の目次と本番までの残作業も掲載します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第11回】CSVで既存の台帳を一括取り込みする
Google Maps APIとNuxt 4の連載第11回。Excelの台帳をCSVで一括取り込みし、住所だけの行はサーバーでGeocoding APIにより変換する方法を、費用を確認できるプレビューや重複判定のコード付きで解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第10回】切断・再接続とエラーハンドリング
NuxtとWebRTCで作るビデオチャット連載の第10回。WebSocketの指数バックオフ再接続、restartIceによる経路の復旧、利用者向けの状態表示を実装。サーバー再起動やTURN障害で検証した結果も紹介。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第10回】見積書・請求書をデータから生成する
Nuxt 4でPDF管理システムを作る連載の第10回。明細データから見積書・請求書PDFをpdf-libで生成します。税率ごとの消費税計算と単体テスト、改ページ、国税庁が示すインボイスの記載事項も確認します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第10回】現在地から半径◯km/描いたエリア内の地点を探す
Google Maps APIとNuxt 4の連載第10回。ブラウザの位置情報で現在地を表示し、半径の円や地図上に描いた多角形の中の地点だけを絞り込む方法を、廃止済みの描画ライブラリに頼らないコード付きで解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第9回】MediaRecorder で録画する前に考えること
NuxtとWebRTCで作るビデオチャット連載の第9回。MediaRecorderとisTypeSupportedでブラウザ内の録画を実装し、了承の確認と相手への録画中表示を追加。保存・同意・管理など発注前に決めることも解説。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第9回】PDFフォーム(AcroForm)に入力する
Nuxt 4でPDF管理システムを作る連載の第9回。pdf-libでAcroFormの入力欄を一覧化し、日本語で入力して保存・フラット化します。日本語フォントでの外観更新や文字サイズ自動の落とし穴も実測で解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第9回】マーカーが数千件でも重くしない:クラスタリングと表示範囲読み込み
Google Maps APIとNuxt 4の連載第9回。地点が数千件でも地図を重くしないために、markerclustererのクラスタリングと、表示範囲(bbox)だけを読み込むAPI、差分更新をコード付きで解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第8回】DataChannel でテキストチャット
NuxtとWebRTCで作るビデオチャット連載の第8回。DataChannelをnegotiatedで作り、サーバーを通さずにテキストチャットを送受信。offer衝突を避ける作成タイミング、文字数の数え方、受信データの検証を解説。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第8回】注釈・スタンプ・署名画像を貼る
Nuxt 4でPDF管理システムを作る連載の第8回。画面の座標をPDFの座標に変換し、日本語テキスト・日付印・手書き署名をpdf-libで焼き込みます。fontkitのサブセット埋め込みで文字が欠ける問題の実測結果も紹介します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第8回】カテゴリで絞り込み、一覧と地図を連動させる
Google Maps APIとNuxt 4の連載第8回。カテゴリのチェックボックスで地点を絞り込み、一覧と地図のピンを連動させる方法を、選択状態の共有・computed・ピンの強調表示のコード付きで解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第7回】画面共有
NuxtとWebRTCで作るビデオチャット連載の第7回。getDisplayMediaで画面を取得し、replaceTrackで再交渉なしにカメラ映像と差し替える画面共有を実装。停止ボタンでの自動復帰や対応端末の注意点も解説。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第7回】PDFの結合と分割
Nuxt 4でPDF管理システムを作る連載の第7回。pdf-libのcopyPagesでPDFの結合・分割を実装し、元のPDFを上書きしない版管理と過去の版のダウンロード、pdf-libの限界までコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第7回】施設名で検索して地点を取り込む(Places API (New))
Google Maps APIとNuxt 4の連載第7回。Places API (New)のPlaceAutocompleteElementで施設名を検索して地点を登録する方法と、要求フィールドで決まる料金区分・保存の規約を解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第6回】STUN/TURN と本番デプロイ:「社外とつながらない」を解消する
NuxtとWebRTCで作るビデオチャット連載の第6回。社外とつながらない原因とTURNの役割を解説し、時間制限付きTURN認証情報を発行するAPI、relayモードでの検証、HTTPS・WebSocketのデプロイ構成を紹介します。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第6回】ブラウザでPDFをプレビューする
Nuxt 4でPDF管理システムを作る連載の第6回。pdfjs-distでPDFをCanvasに描画するプレビュー機能を、ワーカー設定、日本語PDF用のcMap配信、ページ送り・拡大縮小まで実装します。コード付きで解説。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第6回】住所を入力して緯度経度に変換する(Geocoding API v4をサーバー経由で)
Google Maps APIとNuxt 4の連載第6回。Geocoding API v4をNuxtのサーバー経由で呼び、住所から緯度経度の候補を出して登録する方法と、キーの分け方・課金・座標の保存期間の規約を解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第5回】ミュートとカメラオフ
NuxtとWebRTCで作るビデオチャット連載の第5回。track.enabledでマイクのミュートとカメラオフを実装し、シグナリングで状態を相手に伝えて表示します。途中参加者への状態同期や発注時の確認点も解説。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第5回】権限管理と「認可つきダウンロード」
Nuxt 4でPDF管理システムを作る連載の第5回。閲覧のみ・編集可・管理者の3ロールによる権限管理、DBで最新の権限を確認する認可ヘルパー、日本語ファイル名に対応した認可つきダウンロードをコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第5回】地図をクリックして新しい地点を登録する
Google Maps APIとNuxt 4の連載第5回。地図クリックで仮ピンを立て、Advanced Markerのドラッグで位置を調整してから地点を登録する方法と、API費用・入力検証の注意点を解説します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第4回】ルーム作成と招待リンク、入室前プレビュー
NuxtとWebRTCで作るビデオチャット連載の第4回。UUIDでルームを作成して招待リンクをコピーし、入室前にカメラを確認。定員超過はシグナリングサーバーで断ります。入室管理で発注時に決める点も解説。 -
連載:Nuxtで作るPDF管理システム
【Nuxtで作るPDF管理システム 第4回】ログイン機能を入れる
Nuxt 4でPDF管理システムを作る連載の第4回。nuxt-auth-utilsの暗号化Cookieセッションとパスワードハッシュでログイン機能を実装し、サーバーミドルウェアでAPIをログイン必須にする方法をコード付きで解説します。
12
