React

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

注意カスタマーの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

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

React

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&#39

React

はじめに以下の主な機能をもつウェブとモバイルのクロスプラットフォームアプリを紹介します。モバイル対応: Capacitor を使って、Android や iOS 向けにも対応可能。ビデオ会議機能: Zoom SDK が含まれているため、遠隔でのビデオ会議や診療が可能。APIデータアクセス: React Query や axios を使って、データアクセス管理がされている。使用している技術スタックNext.js"next": "14.1.3", "react": "^18.2.0", "react-dom": "^18.2.0"React ベースのフレームワークである Next.js を使ってアプリが構築されており、フロントエンドは React で構成されています。Next.js は SSR（サーバーサイドレンダリング）や静的サイト生成が可能なため、パフォーマンスや SEO に優れたアプリです。

AI

はじめに興味のある生成サービスを列挙します。動画の字幕生成サービスキャプション生成に特化したAIサービスは、動画や画像に自動でキャプションを付けるための強力なツールを提供しています。以下は、キャプション生成に役立つ代表的なAIサービスです：1. Google Cloud Video Intelligence概要: Google Cloud Video Intelligenceは、動画内の内容を解析し、自動的にキャプションやトランスクリプトを生成します。特に動画のシーンやオブジェクトの認識に優れ、これらをもとにキャプションを自動生成します。特徴: リアルタイムの動画キャプション生成、音声解析、タグ付けが可能で、多言語対応もしています。2. Microsoft Azure Video Indexer概要: MicrosoftのAzure Video Indexerは、動画コンテンツのキャプションを自動生成できるツールです。音声認識技術を使用し、さまざまな言語でのキャプション生成に対応しています。特徴: 音声から

AI

Llama3とはLlama 3は、Meta（旧Facebook）が開発した大規模言語モデル（Large Language Model）の最新バージョンです。Llamaシリーズは、自然言語処理（NLP）のタスクに特化したAIモデルであり、生成的AI技術の一環として開発されています。Llama 3は、文章生成、会話、翻訳、質問応答、テキスト要約など、幅広いNLPタスクに対応可能なモデルです。特徴:高度な言語理解: Llama 3は、前バージョンに比べてさらに高度なテキスト理解と生成能力を持っており、複雑なタスクにも対応可能です。効率性: Llamaシリーズは、他の大規模言語モデルに比べて計算効率が高く、リソースを抑えながら高精度な結果を提供できるように設計されています。オープンソースライセンス: Llama 3は「Meta Llama 3 Community License」に基づいて提供されており、非商用および商用利用のために利用・改変・再配布が許可されていますが、特定の商業規模を超える場合には別途ライセンスの取得が必要です。主な用途

AI

OpenAIプロジェクト別OpenAIが手掛ける革新的なAIプロジェクトは、AI技術の新たな可能性を開く先進的なものが多く、特に以下のプロジェクトが注目されています。1. GPTシリーズ（Generative Pretrained Transformer）概要: GPTシリーズは、自然言語処理（NLP）の分野で非常に革新的なプロジェクトです。トランスフォーマーアーキテクチャに基づく大規模な言語モデルで、膨大なテキストデータを基に学習しています。革新性: 人間に非常に近い自然な文章を生成できる点で画期的。GPT-3やGPT-4は数千億のパラメータを持ち、会話、文章作成、コード生成など、幅広いタスクに対応しています。応用例: チャットボット、コンテンツ生成、翻訳、プログラムの自動化など、さまざまな分野で利用されています。2. DALL-E概要: DALL-Eは、テキストから画像を生成するAIプロジェクトです。ユーザーが入力したテキストに基づき、それに対応するユニークな画像を生成します。革新性: テキストプロンプ

Shopify

はじめにShopify CLIを使用すると、テーマファイルをローカル環境にダウンロードできます。これにより、テーマファイルを編集したり、grepを使った検索が可能になります。手順テーマファイルのダウンロード方法Shopify CLIのインストールShopify CLIをインストールします。CLIを使うと、Shopifyストアとローカル環境間でテーマファイルを操作することができます。CLIのインストール方法はこちらを参考にしてください。テーマのダウンロードインストール後、ターミナルまたはコマンドプロンプトで以下のコマンドを実行すると、URLが表示されるので、ログインを許可し、themeをダウンロードする% shopify theme pull --store <store url>テーマの編集と検索テーマファイルがダウンロードされたら、エディタを使って編集したり、grepコマンドで特定のテキストを検索したりできます。テーマのアップロードテーマをダウンロードして編集した後、変更をS

Shopify

ShopifyのSales Channel（販売チャネル）とは商品を顧客に販売するためのプラットフォームを指します。複数の販売チャネルを利用することで、Shopifyストアをさまざまな方法で運営でき、顧客にリーチする方法を増やすことが可能です。主なShopifyの販売チャネルには以下のようなものがあります。1. Online Store（オンラインストア）Shopifyが提供するメインの販売チャネルで、ユーザーが自分のWebサイトを作成して商品を販売できます。Shopifyのテーマを使用して、カスタマイズされたオンラインショップを作成でき、ストアの見た目や機能を簡単に管理できます。2. Point of Sale (POS)実店舗での販売をサポートするための販売チャネルです。Shopify POSアプリを使用して、実際の店舗で商品を販売し、在庫や顧客データをShopify内で一元管理できます。オンラインとオフラインの統合をスムーズに行うためのツールとして利用されます。3. Shop（ショッピングアプリ）Shopifyが