未分類

Lambda関数のローカルでの開発〜デプロイ – SAMを利用した場合

はじめにAPI Gateway、EventBridege、Webhookから呼び出すLambda関数が増えてきたので、デバッグしやすい環境をつくりなおす手順必要なツールのインストールAWS CLIAWS SAM CLI (Serverless Application Model CLI)Dockerプロジェクトの初期化AWS SAM CLIを使ってプロジェクトを作成します。% sam init SAM CLI now collects telemetry to better understand customer needs. You can OPT OUT and disable telemetry collection by setting the environment variable SAM_CLI_TELEMETRY=0 in your shell. Thanks for your help! Learn More: https://docs.aws.amazon.co

Shopify

Shopify: JotFormでのユーザー登録フォーム作成 – API Gateway+Lambdaとwebhookの利用

フォームの作成1. Jotformでフォームを作成Jotformのアカウントにログインし、新しいフォームを作成します。ドラッグ&ドロップのインターフェースを使用して、必要なフィールドを追加し、デザインをカスタマイズします。2. フォームの埋め込みコードを取得フォームビルダーの「公開」タブに移動します。左側の「プラットフォーム」を選択し、一覧から「Shopify」を検索して選択します。表示される埋め込みコードをコピーします。3. Shopifyストアにフォームを埋め込むShopifyの管理画面にログインし、「オンラインストア」>「ページ」に移動します。既存のページを編集するか、新しいページを作成します。エディタをHTMLビューに切り替え、先ほどコピーした埋め込みコードを貼り付けます。変更を保存し、ページを公開します。API GatewayとLambdaによるAPI作成Jotformから送信されるデータは、通常multipart/for

Shopify

Shopify: Emailの制御の基本

メールの認証Settings > Notifications へアクセスする確認メールを送信し、承認するドメインの認証DMARCレコードのドメインへの追加レコード名:_dmarc.example.comレコードタイプ:TXT値:v=DMARC1; p=none;4つの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

Shopify

Shopify: Liquidの変更 – ゼロ円商品の価格を非表示他

はじめにサービス予約のように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 %}

React

Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ⑤prismaとDBによるセッション管理

パッケージのインストール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

Shopify

Shopify API Library for Node.jsの利用

はじめに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使

Remix

Remix – Google Calendar 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管理者

React

Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ④Auth0によるパスワードレスログインの実装

はじめに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

Shopify

Shopify – Auth0連携(管理者ユーザー用)

注意カスタマーのSSOの方法だと思って設定していたが、最終的に管理者用のSSOであることが判明した。カスタマーのSSOをShopifyで簡単に実現する方法はありそうだが、見つかったものはShopify Plusプラン($2500/月)の契約が必要なものばかりだった。アプリの連携ではなく、パスワードレスログインで対応することにする(別途ブログを作成)はじめに以下のAuth0マーケットプレイスのShopify統合アプリを利用します。https://marketplace.auth0.com/integrations/shopify-social-connectionShopify IDを活用してAuth0のログインフローに統合することで、Shopifyに管理されるIDを使用して、アプリやウェブサイトにログインできるようになります。Shopifyのソーシャル接続を利用すると、ショップオーナーや管理者が自分のShopifyプロファイルを使ってあなたのアプリケーションにログインできるようになります。デフォルトでは、Auth0はユーザーがロ

React

Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ③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 /> <

Lang »