Vercel

以降のきっかけ Xreaサーバーでの実情 Vercelでは まずは新サイトを作る 旧サイトからリダイレクト Search Console analyticsはどうなるの？ まとめ 以降のきっかけ Pythonを触っていたので、FlaskでApp、サイトを作っていました。 JavaScriptでもなくnextでもないので、Vercelはまったく検討していませんでしたが、テンプレートの中にPythonのFlaskがあることを知ったので、レンタルサーバーから移行しようとなりました。 その備忘録です。 Xreaサーバーでの実情 レンタルサーバーXreaではcgiでpythonを実行させていました。 ま…

概要 Web アプリやスマートフォンアプリ、ブラウザゲームなどを個人開発した後、デプロイ先はどこにしていますでしょうか？ 私はよく Google（GCP）を使っていたり、Next.js で Web ページなどを作成しているので Netlify などにあげ、基本的に利用料が無料になるようにしています。 個人開発となるとなるべく金額を抑えたいので、できるだけ無料のサービス、もしくは仕方がない場合は金額が低く収まるようにデプロイ先を決めたりしています。 最近では Heroku の無料枠がなくなったことで、デプロイ先をどこにしようか迷っている方も多くいるのではないでしょうか？ そんな中、自己ホスト可能…

あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイン (b.com/foo) からサイトを見たときだけページ内リンク (next/link) で遷移時にアプリがクラッシュしてしまう問題が発生した。 すっごくレアケースだと思うけど記録としてメモしておく 環境 Next 13.5.4 React 18.2.0 TypeScript 5…

この記事は Next.js を使っている方を対象にしています。 物話は少しフィクションです。 始まり ある日、お世話になっているお店の店主からこんな依頼がありました。 パソコン得意なんだよね、うちの店のホームページ作ってよ！ お知らせと商品情報は更新出来るようにしたい！ WordPress… なにそれ？ Google スプレッドシートだったら使ったことあるよ。 こういう場合はノーコードツールが望ましいかと思ったのですが、Google スプレッドシートを CMS 替わりに出来たら何かと便利だと思い、実際に作ってみることにしました。 構成 普段キカガクの業務でも使っている Next.js と、GA…

これは、 「Slackの無料アカウントだと90日前のログが見えなくなってしまうから、とりあえずDiscordに転送しておいて見れるようにだけはしておきたいよね」っていうコミュニティ運営問題先送りマンが、 「まあメッセージ転送アプリならboltとdiscord.js使えばサクッといけるっしょ！Vercelの無料枠で大丈夫そうだし」 という感じで作業したら8時間もかかってしまったよ。 という話です。 改めて文章にするとホントSlackにお金払うかDiscord使おうよって話ですね・・・ 1. コード作成 実装方針 処理コード next.config.jsの変更 2. Slack側の設定 Reque…

はじめに こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 先日、JavaScriptランタイム最新動向という記事を書いたのですが、 synamon.hatenablog.com Bunが非常に興味深く、TypeScript、Next.jsに標準対応しているということで、Vercelにデプロイできるか調べてみたところ、Bunをサポートしたというアップデート記事が見つかりました。 vercel.com 記事を見る限り、bun.lockbファイルをプロジェクトに入れて、VercelのInstall Commandにbun installを設定するだけで良さそうです。 早速…

昨日に引き続きDependencyBotでセキュリティアラートに対応していますが ３件あって ２件は脆弱でないバージョンが見つからず、 １件はVercelでエラーが出てマージせず、 で解決０件。 なので手動で対応しました。 Vercelのエラーのnextバージョンアップ対応メモ ①VercelのエラーをChatGPTに入れる ②next パッケージのバージョン 13.5.0 が npm レジストリに存在しないため、インストールに失敗している、ということが判明。 ③npm info next で最新情報を確認。14.0.3が最新だった。 ④npm install next@14.0.3 でpac…

2024年10月5日に函館で開催されたYAPC::Hakodate 2024に参加してきました。初函館！！ 今回は会社がプラチナスポンサーとしてブース出展をしたので、ブース企画運営担当として参加してました。プロポーザルはLTと合わせて2つ出していたんですが通らず残念... 次回頑張ります。 fortee.jp fortee.jp やってたこと ブース企画担当だったので、パーセントバルーンクイズに答えてご当地お菓子掴み取り企画だったり、B/43ユーザーの招待コードを交換し合う企画だったり、登壇者向けのアンケート企画だったり、参加者全員向けの洗濯ネットノベルティとかをosyoyuさんといっぱい考え…

良かったところ SSG＋CSRのWebアプリ作成が体験できる 悪かったところ(もしあれば) 内容が古く実行が困難 学んだこと SSG＋CSRのWebアプリ作成におけるポイント(下記参照) 難しかったこと 内容が古く環境構築から実行が困難 よってGithubからcloneしたものをベースに検証 要件定義 N/A 設計 SSRはシンプルだがUXを損なう恐れがあるため、SSG＋CSRがおすすめ SSG＋CSRはSSGで共通部分は先に表示させて必要な箇所はCSRで非同期で表示させる Pages Routerは安定しているが、App Routerはまだ不安定な所がある 今後はApp Routerが推奨さ…

こんにちは！今回は、アプリやWebサイトのUIデザインとコードを生成できるAIサービス「v0」をご紹介します。 v0はVercel社のアプリやWebサイト等のUIデザインとReactベースのコードを生成してくれるチャット形式の生成AIサービスです。 今回は、v0の概要や使い方、生成できるものをご紹介します。 1. v0概要 1.1. 概要 1.2. 料金プラン 2. 新規登録 3. 使い方 3.1. 生成 3.2. 修正 3.3. コードの確認 3.4. デザインの公開 4. 生成できる範囲の確認 4.1. LP 4.2. フロントエンドの処理 4.3. API・データベースとの連携 5. ま…

こんにちは、UXライティング部のibulogです。社内では「サポートコンテンツマネージャー」というポジションでお仕事をしています。 普通は記事の最後で「We Are Hiring!」するのが相場と心得ておりますが、逸る気持ちを抑えきれませんので、もう求人情報を貼っちゃいます。 サポートコンテンツ戦略・基盤担当 / 株式会社SmartHR さて、SmartHRではヘルプセンターを自社開発しており、かつ現在はエンジニアの支援を得ながらライター上がりのサポートコンテンツマネージャーが主体となって開発・運用をしています。 ヘルプセンター｜SmartHR ヘルプセンターのトップページ 開発に関わるいずれ…

www.publickey1.jp www.publickey1.jp ⇧ シンプルにしようとしてくれるのは素晴らしいんですが、破壊的変更が無いのが利用者にとっては嬉しい気がしますな、自分はRuby on Railsを利用していませんが... Next.jsのPages RouterとApp Routerと React単独での利用が非推奨っぽいので、Next.jsを利用せざるを得ないことになったので、Next.jsを利用しようとしたところ、どうも、Next.jsの端境期に遭遇したようで、 Pages Router App Router の切り替えの時期に、Next.jsの入門をすることになった…

先日作成したMeta Quest向けのWebVRコンテンツ ですが、Meta Questのパススルーを使い、背景を実写にしてみます。blog.kimizuka.orgかつて、getUserMediaを使って、どうにかQuestのカメラにアクセスできないかを試行錯誤していた時期もあったのですが、パススルーに対応させるためにはそんな実装はまったくもって不要で、結論から言うと、three/addons/webxr/ARButton.js を使うだけであっさりと実装できました。developer.mozilla.org github.com DEMO https://next-js-ar-button…

眠すぎて合歓の木になったわね。

こんにちは、トレタ VPoEの北川です。 カジュアル面談などでよく聞かれる質問として「開発プロセスはアジャイルですか？」という質問とあわせて「リリースサイクルはどれくらいですか？」という質問を受けることがあります。 そこで今回は弊社のフロントエンドチームでのリリースサイクルとそれに対応するブランチ運用を例にして紹介しようと思います。 リリーストレインによる定期リリースサイクル 弊社のモバイルオーダー・トレタO/Xのオーダーアプリチームのリリースサイクルは週1回となっています。毎週水曜日の定期リリースという形でいわゆるリリーストレイン(ReleaseTrain)の手法となっています。 背景として…

ENECHANGEの Yuto Ono です。エンジニアリングマネージャーをしながら、フロントエンドの開発もしています。 2024年4月に、React 19 Beta がリリースされました。2024年9月現在、 React 19 はRC版となっており、正式リリース間近となっております。そこで、早めに React 19 の新機能をキャッチアップし、正式リリース時にスタートダッシュをきれるようにしたいと思いました。 最近、実務でアンケート機能の実装をしていることもあり、このようなアンケートアプリケーションを作ってみました。React 19 の機能をふんだんに使ってみましたので、その解説を書いていこ…

サイト 通知許可 出すタイミング PWA 通知のスタイル 送る頻度や時間 React Next.jsでの実装（途中） サイト Webのプッシュ通知って、たまに出てきては即ブロックするから使ったことなかった。 いざ、どのサイトがプッシュ通知送ってくれるか思い出そうとしても思い出せない。 ２週間ぐらいWebプッシュ通知許可しまくったけど、ほぼ送ってきてくれない。夜とかに送ってるから昼間PCで作業してるときに気付かないのかな・・・？ 以下のふたつは結構送ってきてくれた ・Qiita ・Insta360 その他プッシュ通知があるもの（なお送られたことはない） ・旅色 当サイトのプッシュ通知について｜旅…

出典：v0 新しく登場して話題となっているデザインAIツール「v0」。あのnext.js（ JavaScriptフレームワーク）を開発したvercel（バーセル）という企業がリリースしたAIツールです。 v0公式サイト v0.dev v0は、人工知能（AI）を活用したデザインツールです。これを使いこなすと、簡単なプロンプト入力だけでプログラミングの知識がなくてもWebサイトやUIコンポーネントコードを作成することができるようになります。 Claude 3.5のArtifacts（アーティファクト）機能と似たようなものですね。 使う場合はユーザー登録（メールや他アカウント認証）だけで簡単に無料版…

「ato de yomu」(あとで読む) というリーディングリストのWebアプリを作りました。 atodeyomu.morishin.me リーディングリストというのが一般的な用語かわかりませんが、Safari についてるリーディングリスト機能のイメージです。ato de yomu には次の機能があります。 あとで読みたいウェブの記事を保存しておける 読んだ記事の履歴を残せる 他人のリストを閲覧・購読できる アプリ画面 僕のページはこれです。 atodeyomu.morishin.me