Page: 10 / 106

Reactremix

Remixでroot.tsxにClerkのUI Componentを使いたい

提供されたUI Componentをレイアウト要素で使用する際の覚書。Remixを使用する場合、app/route.tsxにコンポーネントを配置。ヘッダーナビゲーションコンポーネント内にログインやログアウトボタンを配置したいが、エラーが発生。ClerkProviderの外でUI Componentを使うことがエラーの原因。Layout要素をProviderの内側に配置すると問題解消。ただし、キャッシュとSSRに関して懸念があり、Cloudflareのレポートを参考に検証を行う予定。

Okamoto Hidetaka
1adde6671de223e93300c82596bc1275-20241001084709

AI / MLLLMProductsPython

Google Colaboratoryでセッション動画から、YouTubeやサイトに掲載する文章を生成する

DevRelとして企画運営に携わるJP_Stripesコミュニティでは、登壇者のセッションを動画アーカイブ化しており、Google ColaboratoryとWhisperを使用して動画の説明文やコミュニティウェブサイトの文章作成を行っています。動画のアーカイブ化により、過去のセッション内容の理解を深める取り組みをしており、Shifterを用いてウェブサイトの保守時間を短縮しています。文字起こしや動画紹介文章の生成を自動化するためにWhisperやClaude 3.5 Sonnetを活用しています。

Okamoto Hidetaka

CloudflareremixStripeSupabaseサイト制作覚書

10年続いているHeadless WordPressサイトのフロントをリニューアルしたので振り返り

. 今回のリニューアルでは、インフラ環境やフレームワークの変更など、大幅な刷新が行われました。WordPressをHeadless WordPressとして利用しているため、一般的なWordPressサイトと異なる点に注意が必要です。SaaSを組み合わせた複数のサービス構成に変更し、生成系AIやStripeなど新たなサービスも導入されました。技術選定ではRemixに置き換えたり、Clerkに認証系を変更するなど、サービスの導入や切り替えが行われました。今後は生成系AIの改善や広告管理、キャッシュコントロールの調整などが課題として挙げられます。.

Okamoto Hidetaka

JavaScriptReactremix

RemixのLayoutではuseRouteLoaderDataを使おう

Remixでloaderの情報を使う際、useLoaderDataよりも他のフックを利用するケースもある。LayoutコンポーネントでClerkの認証情報を使用しようとした際に、HTTP404エラーがHTTP500エラーに変わる現象が起きた。ErrorBoundary周りを調査し、useRouteLoaderDataを使うことで問題が解決した。エラーが発生する原因はloaderの情報が正しく取得できないこと。useLoaderDataとuseRouteLoaderDataを使い分けることが重要。

Okamoto Hidetaka

ReactremixSaaS / FaaSSupabase

Remixで@supabase/ssrを使ったログイン処理を実装する

サーバー側の処理を利用して、Supabaseのログイン処理をRemixに実装する方法についてまとめました。 @supabase/ssrを使うことで、Cloudflare Pages上でクライアントを作成し、Cookieに関する処理を行います。ログイン処理後は、作成したクライアントを使用してCookieに情報を設定し、ログイン画面から移動できるようにします。さらに、参考資料に従い、ログイン処理を実装します。

Okamoto Hidetaka

CloudflareremixSaaS / FaaS

Cloudflare PagesでRemixアプリを公開する場合、環境変数を.envと.dev.varsで管理できる

この記事では、CloudflareにRemixアプリをデプロイする際の環境変数の取り扱い方を紹介しています。開発時やビルド時には.envファイルを使用し、Cloudflare向けには.dev.varsファイルを利用します。公開可能な値は.envに、秘匿すべき値は.dev.varsに設定することで、セキュリティリスクを軽減できます。異なる環境用に設定する場合、.envファイルを分けて管理し、.dev.varsでCloudflare Pagesの環境変数を設定することがポイントです。

Okamoto Hidetaka

LLMWordPress

[小ネタ] LLMで作成した記事を、簡単にWordPressへ取り込めるようにする方法

生成系AIを使って技術記事を作成し、NotionやWordPressに組み込む方法が記載されています。WordPressに記事を取り込む際はMarkdown形式で生成し、必要に応じてブロックに内容を割り当てます。WordPressのブロックエディターを使用して生成結果をペーストし、編集作業を行うことで、編集しやすい記事にすることができます。記事を編集しやすくするため、ブロックを使用する方法が紹介されています。

Okamoto Hidetaka

SaaS / FaaSSupabase

@supabase/ssrを使うときは、ブラウザ側の操作にも利用しよう

Supabaseのサーバー側での認証状況確認に@supabase/ssrパッケージを使用し、ログアウト処理での問題点や解決方法を紹介。@supabase/subapase-jsのログアウト処理でCookieが削除されず、@supabase/ssrを使用することで解決可能。ログアウト時にcreateBrowserClientを使用することで正常にCookieを削除。SSR用のライブラリを統一することが望ましい。

Okamoto Hidetaka

JavaScriptReactremixSaaS / FaaSSupabase

Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。

Okamoto Hidetaka

SaaS / FaaSSupabase

@supabase/ssrでサーバー側にてユーザー情報を取得するときは、getUserを使おう

この記事では、Supabaseを使用してNode.jsアプリケーションでユーザー情報を取得する方法が紹介されています。具体的には、サーバー側でStripeの契約情報を取得し、ログイン中のユーザー情報を利用してリダイレクトする機能を実装しています。初期実装ではauth.getSession()を使用していましたが、より安全な方法としてauth.getUser()を使用することが推奨されています。ユーザー情報の取得は明示的に行う必要があります。

Okamoto Hidetaka
Home
Search
Bookmark