この記事についてCloud Functions（第２世代）による Firestore の拡張のテストコードの書き方は Cloud Functions（第１世代）とほとんど同じなので、基本的には Unit testing of Cloud Functions を読んで実装していけば良く、Zenn にも参考となる記事が複数あります。しかし第１世代との違いが一点あり、その一点に関する情報をうまく探せず時間を費やしたため第２世代の書き方として記事にしました。テストコードを書く前提となる部分（テスト対象となる関数の書き方、Firebase CLI のインストール、エミュレータの導入等）は...

Webエンジニアのわでぃんです。個人開発で、Capacitor（キャパシター）を使ってアプリを作り完全に理解した（？）ので紹介します。Capacitorの記事はちらほら見かけますが、入門系の記事がなかったためまとめています。この記事を見ることで、Capacitorでできることを知り、最低限の機能のアプリを作ることができます。実際にReactプロジェクトをモバイルアプリ化し、シミュレータで起動するまでを行います。＊今回は、App Store ConnectやGoogle Play Console、リリース周りは触れません🙅‍♂️ Capacitorとは？ひとことで言うと、W...

はじめに 🚩この記事では、Next.js の Route Handlers の代わりに Hono を使って、API ルートを置き換える方法について説明します。Hono の RPC 機能を使って、Next.js の API ルートを置き換えることで、API のエンドポイントの URL や戻り値の型を自動で取得し、堅牢的なコードを書くことができます。 実装例 📝簡単な記事投稿デモを作成し、Hono を使って API ルートを置き換える方法を説明します。 前準備Next.js プロジェクトを作成し、先日 GA された Neon Database を使ってデータベースを作成し...

この記事について!ここで出てくるSlackのトークンは公式で明示されていないトークン使用例のためおすすめできる方法ではありません。トークンは個人ユーザに対してのものになりますので問題などは個人責任でよろしくお願いします。この記事を閲覧するモチベーションとして下記を意識し、アイデアを広げるためのものと認識して閲覧してください。裏技的に個人ツールが作成できるChrome拡張でできることの幅を広げる 作例したサンプルコードhttps://github.com/igara/slack_message_chrome_extension内容としては所属しているSlack...

まえがきこの記事は、Astro DB / Astro Studio を使ってページごとに押された「いいね」を管理する Web サイトを Vercel にデプロイするまでの流れを簡単に紹介する記事です。 バージョン情報"@astrojs/check": "^0.5.10","@astrojs/db": "^0.10.4","@astrojs/preact": "^3.2.0","@astrojs/vercel": "^7.5.3","astro": "^4.6.1","preact": "^10.20.2","typescript": "^5.4.5"Node.j...

技術構成API: microCMS(ヘッドレスCMS)Next.jsVercelTypeScript はじめにプレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？プレビュー機能は、コンテンツの...

ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。https://adventar.org/calendars/8910みなさんこんにちは、chot Inc. の Web エンジニアです。Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpe...

ちょっと株式会社 アドベントカレンダー2023 12月23日の記事です。https://adventar.org/calendars/8910 環境のセットアップAWS上でのIAMの作成Dockerのセットアップ便利ツールのインストールここでは1~3に関しての詳細は割愛します。今回は簡易的なものであるため、IAMロールにはAdministratorAccessをアタッチしました。また、VSCode上でAWS CLIを使えるようにもしておきましょう。https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/c...

ちょっと株式会社 アドベントカレンダー2023 12月22日の記事です。https://adventar.org/calendars/8910 はじめにどうも、デジタルネイティブ世代の息子（4歳）を持つエンジニアです。子供の成長は日々早く、いつの間にかタブレットの使い方を覚えて、器用にスワイプしたり、YouTubeを見たりしています。アプリで遊ぶ息子の姿を見て、「パパが作ったアプリで遊ばせてみたい」という気持ちから、音声入力・自動出力アプリを作りました。 作ったアプリ■mic.https://mic-web-speech-recorder.vercel.app/...

https://adventar.org/calendars/8910ちょっと株式会社アドベントカレンダー 12月18日の記事です。この記事ではRaspberry Pi Pico(以下ラズパイピコと呼ぶ)を使ってLEDマトリクスパネルを制御します。 ラズパイピコの購入ラズパイピコはC/C++やMicroPythonでプログラミングできるマイコンボードです。AliExpressというECサイトで購入しました。日本語表記が怪しいですが、問題なく届きました。 ラズパイピコとPCの接続PCとラズパイピコをUSBケーブルで接続します。thonnyというIDEを使ってプログ...

https://adventar.org/calendars/8910ちょっと株式会社 Advent Calendar 2023年 12月 16日の記事です。 はじめにこんにちは、ちょっと株式会社のフロントエンドエンジニア、かこなーるです。今回は先日検討する機会のあった、機械翻訳を含む多言語化対応についての記事を書きます。近年i18n対応を行うプロダクトも多いかと思いますが、その中でもNext.jsでブログのようなコンテンツに機械翻訳を利用した構成の記事はあまり見かけませんでしたので、今回はそれについて書きたいと思います。 なぜ機械翻訳なのか通常、Next.jsで多言...

はじめにX(旧:Twitter)のシェアリンクは、https://twitter.com/intent/tweet?text=***の***部分に投稿本文を設定できます。しかし、コンテンツのタイトルなど可変長の文字列を含める場合、文字数上限をオーバーすることがあります。ユーザーに手間を取らせないよう、溢れる分は「…」などの省略文字で適切に置き換えたいところですが、Xの文字数カウントは独自仕様なため、lengthプロパティでは正確にカウントできません。この記事では、オーバー分を省略文字に置き換えつつ、文字数上限ぴったりに収めて気持ちよくなる実装例を紹介します。 twitt...

https://adventar.org/calendars/8910 はじめにこの記事では Node.js アプリケーションを OpenTelemetry を使って計装し、 API リクエストのトレーシングを試してみます。アプリケーションは大きく三つのレイヤーに分かれている API サービスです。RouterUsecaseDB Accessリクエストからレスポンスまでの間、それぞれのレイヤーでどれだけ処理時間がかかっているのか確認できる状態を目指していきます。 OpenTelemetry とはOpenTelemetry（以下 OTel ）はメトリクスやログ、...

https://adventar.org/calendars/8910この記事は、ちょっと株式会社 Advent Calendar 2023 の8日目の記事です。私はいま、ちょっと株式会社の技術基盤部で働いています。この部署は、色々な課題を取り扱っていて、名前の通り開発基盤を整える役割、新規事業の立ち上げ、また、チョット難しそうなプロジェクトを手助けする遊軍でもあります。 導入〜はじめに〜この記事では、Jamstackへのリニューアルプロジェクト中に直面した、FTPシステムの課題と、私達のアプローチについて共有します。私は普段バックエンドで、サーバーレスや、コンテナアプリケー...

ちょっと株式会社 Advent Calendar 2023 12 月 6 日の記事です。https://adventar.org/calendars/8910 こんなレイアウトありますよね1 カラムは 240px 以上を維持しつつ、横幅に入るだけのカラム数を自動で増やしてくれるようなグリッドレイアウトです。画面幅ではなく親要素の幅によってカラム数が決まるので、コンポーネント指向の Web アプリ開発に向いていて重宝しています。 CSS で書く場合CSS では次のように display: grid を使います。.autoFill { display: grid; ...

https://adventar.org/calendars/8910 はじめに2023年3月27日に公開されたiOS 16.4で、iOSおよびiPadOSでホーム画面に追加されたWebアプリにWeb Pushがサポートされました。今回は超カンタンにWebプッシュ通知機能が使えることを証明するため、iOS SafariにWebプッシュ通知を送るまでのRTAに挑戦してみたいと思います。多分これが一番早いと思います。https://github.com/alpaca1231/next-pwa-onesignal-example レギュレーション達成条件Next.jsで新...

記事をブックマークしてターミナルから開く様子 はじめに以下の図の構成でサイトのブックマークを管理できるツールを作成しました。構成図 構成の説明構成図の説明をします。ブックマークのデータ保存にはSupabaseを使います。Supabaseにarticlesテーブルを作成し、記事を登録します。記事のデータ構造は、以下のようにしました。記事のデータ構造 ブックマークの登録筆者はブラウザにFirefoxを使っているため、Firefoxから簡単にブックマークを登録できるようにしました。TridactylはVim操作や特定のキー入力でプログラムを実行できるようにな...

こんにちは、hanetsukiです。今回は、Next.js v13.3のAppRouterで利用できるようになっているIntercepting Routesを使って、モーダルと詳細画面を別々に作成できるようになりました。本記事では、実際に作成したサイトを元にIntercepting RoutesとParallel Routesについてお話しします。 今回作ったものInterceptiong RoutesとParallel Routesの試験用に、簡単なWebサイトを作成しました。https://midjourney.tsuki-lab.net/リポジトリも公開しているので、...

みなさんこんにちは。chot Inc. の Web エンジニアです。Next.js で Web アプリを開発している時に、ログインしているユーザーが管理者かどうかで出しわけをしたいケースがありました。次のようなイメージです。/posts ← 一般ユーザーも閲覧可/posts/:postId ← 一般ユーザーも閲覧可/mypage ← 一般ユーザーも閲覧可/dashboard ← 管理者のみ閲覧可/settings ← 管理者のみ閲覧可これを Route Groups で対応してみたら、コードがスッキリして良いなと思ったので紹介します。 Route Groups とは...

この記事の目的今まで Web アプリケーション製作を行った経験が無い方が「ちょっと個人開発で何か作ってみようかな！」と思ったときにうっかり脆弱性を作りこんでしまうことを少しでも防げたらいいなと考えました。そのためにはまず脆弱性を他人事だと考えないことが大事だと思ったので、私が過去の開発現場において実際に遭遇したことがある Web アプリケーションの脆弱性の事例を幾つか紹介します。紹介の前に注意喚起をします。自分が管理しているわけではない Web アプリケーションに対し、依頼されてもいないのに脆弱性を探す行為は絶対にしないでください。その行為の内容によっては犯罪になる可能性もあ...