React
2024.11.6
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
2024.11.6
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
2024.10.31
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
2024.10.18
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
2024.10.17
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
2024.10.16
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 /> <
React
2024.10.16
Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ②エントリーポイント
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'
React
2024.10.16
Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ①技術スタック
はじめに以下の主な機能をもつウェブとモバイルのクロスプラットフォームアプリを紹介します。モバイル対応: 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
2024.10.14
AI関連サービス調査(2024.10) – その他
はじめに興味のある生成サービスを列挙します。動画の字幕生成サービスキャプション生成に特化したAIサービスは、動画や画像に自動でキャプションを付けるための強力なツールを提供しています。以下は、キャプション生成に役立つ代表的なAIサービスです:1. Google Cloud Video Intelligence概要: Google Cloud Video Intelligenceは、動画内の内容を解析し、自動的にキャプションやトランスクリプトを生成します。特に動画のシーンやオブジェクトの認識に優れ、これらをもとにキャプションを自動生成します。特徴: リアルタイムの動画キャプション生成、音声解析、タグ付けが可能で、多言語対応もしています。2. Microsoft Azure Video Indexer概要: MicrosoftのAzure Video Indexerは、動画コンテンツのキャプションを自動生成できるツールです。音声認識技術を使用し、さまざまな言語でのキャプション生成に対応しています。特徴: 音声から
AI
2024.10.14
AI関連サービス調査(2024.10) – Meta Llama3
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」に基づいて提供されており、非商用および商用利用のために利用・改変・再配布が許可されていますが、特定の商業規模を超える場合には別途ライセンスの取得が必要です。主な用途