フォームの作成1. Jotformでフォームを作成Jotformのアカウントにログインし、新しいフォームを作成します。ドラッグ＆ドロップのインターフェースを使用して、必要なフィールドを追加し、デザインをカスタマイズします。2. フォームの埋め込みコードを取得フォームビルダーの「公開」タブに移動します。左側の「プラットフォーム」を選択し、一覧から「Shopify」を検索して選択します。表示される埋め込みコードをコピーします。3. Shopifyストアにフォームを埋め込むShopifyの管理画面にログインし、「オンラインストア」>「ページ」に移動します。既存のページを編集するか、新しいページを作成します。エディタをHTMLビューに切り替え、先ほどコピーした埋め込みコードを貼り付けます。変更を保存し、ページを公開します。API GatewayとLambdaによるAPI作成Jotformから送信されるデータは、通常multipart/for
メールの認証Settings > Notifications へアクセスする確認メールを送信し、承認するドメインの認証DMARCレコードのドメインへの追加レコード名：_dmarc.example.comレコードタイプ：TXT値：v=DMARC1; p=none;４つのCNAMEレコードのドメインへの追加レコード名：vkl._domainkey, vkl2._domainkey, vkl3._domainkey, mailervklレコードタイプ：CNAME値：承認画面で確認注文完了メールSettings > Notifications > Order confirmation > Edit code へアクセスするテンプレートコード内の変数例shop.emailSettings > General > Store detailsshop.phoneSettings > General > Store detailsshop.na
はじめにサービス予約のようにFREEだが、ゼロ円と表示したくないので、Liquidを編集して表示できなくできるか確認する手順テーマのドットメニューからEditコードを選択し、Liquidを編集するテーマによってLiquidファイルの構成は異なるため、参考程度にしてください（テーマ名：Sense）商品ページのゼロ円を非表示{%- liquid if use_variant assign target = product.selected_or_first_available_variant else assign target = product endif assign compare_at_price = target.compare_at_price assign price = target.price | default: 19 assign money_price = price | money・・・ {% if price != 0 %}
パッケージのインストールnpm install @prisma/clientスキーマの定義datasource db { provider = "postgresql" url = env("DATASOURCE_URL")}generator client { provider = "prisma-client-js"}model Session { id String @id @default(uuid()) userId Int user User @relation(fields: ) accessToken String ipAddress String? userAgent String? status String? createdAt DateTime @default(now()) updatedAt Da
はじめにhttps://github.com/Shopify/shopify-app-jshttps://github.com/Shopify/shopify-app-js/tree/main/packages/apps/shopify-api#readmeShopify API Library for Node.jsとは、Shopify Admin APIを利用するための公式Node.js SDKです。このライブラリを使うことで、Shopify Admin APIや他のAPIに簡単にアクセスできます。Shopify API Library for Node.js ShopifyのAdmin API、Storefront API、その他のAPIに簡単にアクセスできる。認証やリクエストの構成を自動化。特定のAPIバージョンやエンドポイントに対応。インストール方法まず、Node.jsプロジェクトでこのライブラリをインストールします。npm install @shopify/shopify-api使
参考https://developers.google.com/meet/api/guides/quickstart/nodejs?hl=jahttps://dev.to/arindam_1729/i-built-an-event-scheduler-in-nodejs-using-google-calendar-api-4c5b準備Google Cloud アカウントが必要Google Workspaceの管理者アカウントが必要注意Google meetの生成（conferenceDataVersion: 1）は生成に失敗するInvalid conference type valueエラーが発生、あきらめてGoogle Meet APIを試す手順Google Calendar APIを有効にするサービスアカウントの作成サービスアカウントを作成し、IdとEmailを取得する秘密鍵を作成するjsonタイプで作成Google Workspace管理者
はじめにShopifyストアのカスタマーがログインできる、Next.jsのクライアントアプリを提供することにした。SSOを実現したかったが、Shopify Plus契約が予算的に難しいため、Auth0によるパスワードレスログインを実装することにした。Auth0 の設定Auth0 ダッシュボードにログインし、パスワードレスログインを有効にします。Authentication > Passwordless に移動し、Email オプションを有効にします。ソースpasswordless-login-pageメールアドレスを入力し、Auth0へ送信するフォームを持つページ'use client';import { useState } from 'react';import Image from 'next/image'import Link from 'next/link'import { Button } fr
注意カスタマーのSSOの方法だと思って設定していたが、最終的に管理者用のSSOであることが判明した。カスタマーのSSOをShopifyで簡単に実現する方法はありそうだが、見つかったものはShopify Plusプラン（$2500/月）の契約が必要なものばかりだった。アプリの連携ではなく、パスワードレスログインで対応することにする（別途ブログを作成）はじめに以下のAuth0マーケットプレイスのShopify統合アプリを利用します。https://marketplace.auth0.com/integrations/shopify-social-connectionShopify IDを活用してAuth0のログインフローに統合することで、Shopifyに管理されるIDを使用して、アプリやウェブサイトにログインできるようになります。Shopifyのソーシャル接続を利用すると、ショップオーナーや管理者が自分のShopifyプロファイルを使ってあなたのアプリケーションにログインできるようになります。デフォルトでは、Auth0はユーザーがロ
はじめにAuth0のユニバーサルログインを使用したログインを実装するpage.tsx以下のコードは、Next.js の App Router 構造（app ディレクトリ）で page.tsx ファイルを使用して、LoginComponent をクライアントサイドでのみレンダリングする実装です。/loginに遷移した時に実行されます。'use client'import dynamic from 'next/dynamic'const LoginComponent = dynamic( () => import('./components/LoginComponent').then((module) => module.default), { ssr: false, })export default function Login() { return ( <> <LoginComponent /> <
layout.tsxlayout.tsx ファイルは、Next.js の App Router 構造における共通のレイアウトコンポーネントです。すべてのページで共通して使用される要素（例えば、ヘッダーやフッター、スタイルの読み込みなど）をこの layout.tsx ファイルで定義します。import './styles/globals.scss'import { Metadata, Viewport } from 'next'import { App } from '@/components/App'import { Toaster } from '@/components/ui/sonner'import { inter } from '@/constants'import { cn } from '@/lib/utils'export const viewport: Viewport = { width: 'device-width'