未分類

Google AppSheetを久しぶりにつかってみたら、結構使いやすかった話

はじめに以前、ノーコードでモバイルアプリを作成できる Google AppSheet を評価しました。簡単にアプリを作れる一方で、ユーザーごとの課金体系が本番運用には適さず、導入には至りませんでした。しかし今回、Shopify 用の商品マスタや仕入ロットを Google Sheets で管理し、それを Shopify に一括登録する機能が必要となりました。調べたところ、2023 年から Google Workspace プランに AppSheet Core が含まれることが分かり、改めて利用してみることにしました。AppSheetで実現する機能Google Sheet(商品マスタ、仕入ロット)をデータソースとするSKUを自動生成、2テーブルをSKUでJOIN商品一覧、登録・編集ページ仕入ロット一覧、登録・編集ページ商品検索機能Shopify登録用の商品マスタ、仕入ロットデータ生成所感Google AppSheetがGoogle Workspaceに組み込まれたことで、メンバーは無料で使

その他

Monorepoでの設定例 – NestJS, Next.js

はじめにmonorepoは設定が決まるまで、かなり大変な作業ですが、一度うまくいけば、まとめて管理できるメリットがあり、少人数のプロジェクトにはむいていると思います。うまくいった設定を以下にメモし、今後の設定の見直しなどに利用しようと思います。アプリ全体の設定 ルートで、pnpm build, pnpm devで開発できるように設定./package.json{ "name": "my-app", "private": true, "packageManager": "pnpm@9.4.0", "scripts": { "dev": "turbo run dev --parallel", "build": "turbo run build", "lint": "tur

その他

Firebaseによる認証機能の実装

Firebaseプロジェクトの設定Firebaseプロジェクトを作成するFirebase 構築 > Authenticationを開くプロバイダから「匿名」を選択し、有効にする次に、プロバイダの追加で、「Google」を選択し、有効にするGCPサービスアカウントの所得Firebaseプロジェクトと同名で、GCPプロジェクトが作成されているIAMには、Firebase管理用のサービスアカウントが作成されているprivate keyを作成する、これは、後述のfirebase-adminの初期化に使用するNext.jsアプリの構築Next.jsアプリを生成する% npx create-next-app@latest apps/web✔ Would you like to use TypeScript? … No / Yes✔ Which linter would you like to use? › ESLint✔ Would you like to use Ta

その他

NestJS – LLMアダプタを抽象化するようにリファクタリング

はじめにDIを使っているのに、OpenAIとの結びつきが強いので、先に抽象化したコードを検討するLLM 抽象化アーキテクチャ1. LLMの抽象インターフェースを定義libにadaptersを生成する% npx nest g lib adapters✔ What prefix would you like to use for the library (default: @app or 'defaultLibraryPrefix' setting value)? CREATE libs/adapters/tsconfig.lib.json (222 bytes)CREATE libs/adapters/src/index.ts (71 bytes)CREATE libs/adapters/src/adapters.module.ts (202 bytes)CREATE libs/adapters/src/adapters.service.spec.ts (474 bytes)CREATE libs/adapters/

その他

NestJSとは – バックエンド用フレームワークでチャットAPIを実装してみる

NestJSとは?NestJSは、効率的でスケーラブルなサーバーサイドアプリケーションを構築するための、プログレッシブなNode.jsフレームワークです。TypeScriptをベースにしており、クリーンで整理されたコードを書くための構造を提供します。NestJSは、ただのライブラリではなく、アプリケーション全体の骨組み(フレームワーク)を提供することで、大規模なプロジェクトでも一貫性を保ち、開発を効率化することができます。本家の情報は、こちらを参照してください。NestJSの主な特徴1. TypeScriptファーストNestJSはTypeScriptを完全にサポートしています。これにより、静的型付け、インターフェース、デコレーターといったTypeScriptの強力な機能を利用でき、エラーを早期に発見し、保守しやすいコードを書くことができます。2. モジュール化されたアーキテクチャアプリケーションを再利用可能なモジュールに分割して構築します。これにより、コードの管理がしやすくなり、チーム開発や大規模なプロジェクトでも一貫性を保つことがで

その他

n8n – Community nodeの作り方

はじめにこちらのドキュメントを参考にします。n8n のコミュニティノードリポジトリに自作ノードを公開するための手順は以下の通りです:パッケージ名n8n-nodes- または @<scope>/n8n-nodes- で始める。例: n8n-nodes-weather。キーワードn8n-community-node-package を package.json の keywords に含める。package.json の設定n8n 属性の中に自作ノードと認証情報を追加する(starter node の例を参照)。動作確認Linter でチェックし、ローカルでテストして問題がないか確認する。公開npm レジストリにパッケージを登録・公開する(詳細は npm の公式ドキュメント参照)。👉 要するに、命名規則・package.json 設定・テスト・npm 公開が必須です。手順スターターノードをテンプレートレポジトリとして用意されています。このスターターリポジトリを基に、自分用のノードを開発し、npm に

その他

Firebase+Nextjsでチャットアプリをつくってみる

はじめにConvexでチャットアプリをつくるのは手軽だったが、GoogleのFirebaseも同じようなツールであるため、同じようなアプリをつくって、比較することにします。「Building a Real-Time Chat App with Firebase and Next.js」という記事を見つけたので、こちらを参考に進めてみます。詳細は、元ネタの方を参照してください。また、記事で紹介しているソースはこちら開発以下のツールを使いますNext.js:ReactフレームワークFirebase Firestore:リアルタイムデータベースTailwind CSS:スタイリング用shadcn/ui:事前構築済みのUIコンポーネントZod:メッセージの実行時バリデーションFirebaseコンソールからプロジェクトを作成するプロジェクトにFirestoreを追加するテストモードで開始するプロジェクトの設定を開き、マイアプリを表示する</>をクリッ

その他

Convex – チュートリアル:外部サービス連携

はじめにこちらのドキュメントにしたがって、チュートリアルを実行します。前回作成したアプリに機能を追加します。 データベースのトランザクションとリアルタイム性を維持するため、Convexのquery関数とmutation関数は、外部へのfetch(データ取得)呼び出しができません。しかし、実際のアプリケーションでは外部サービスと通信する必要があるため、Convexはaction関数を提供しています。action関数を使うと、同期エンジンが外部世界にアクセスできるようになり、その結果をミューテーション関数を通じてデータベースに書き戻すことができます。 本チュートリアルでは、このaction関数を使って、チャットアプリからWikipedia APIを呼び出し、トピックの要約を取得する機能を実装します。実装アクション関数 getWikipediaSummaryこの関数を公開APIとしないようにするため、internalActionを使用。この関数は、指定されたトピックでWikipediaのAPIに単純なfetchを行う。ctx.sch

その他

Convex.dev とは?- フルスタックBaaSの紹介

はじめにConvex.devは、モダンなアプリケーション開発者向けに設計されたフルスタックのバックエンド・アズ・ア・サービス(BaaS)です。特に、リアルタイム性とTypeScriptによる型安全な開発を重視している点が大きな特徴です。Convexの主な特徴リアルタイムデータベース: Convexは、データベースの変更をすべての接続中のクライアント(フロントエンド)に自動でリアルタイムに同期します。これにより、リアルタイムなチャットアプリやコラボレーションツールを、WebSocketなどを自分で管理することなく簡単に構築できます。TypeScriptによるフルスタック開発: データベースのスキーマ、クエリ、バックエンドのロジック(サーバーレスファンクション)をすべてTypeScriptで記述できます。これにより、フロントエンドからバックエンドまで一貫して型安全な開発が可能になります。サーバーレスファンクション: バックエンドのロジックはサーバーレスファンクションとして実行され、データベースに直接アクセスできます。cronジョブや、外部サービス

その他

turborepoとは? – monorepoのためのビルドシステムの紹介

モノレポ(monorepo)とは複数のプロジェクトやアプリケーションのコードを、一つのGitリポジトリで管理する開発手法のことです。これは「マルチレポ(multirepo)」という、プロジェクトごとに個別のリポジトリを持つ手法とは対照的なアプローチです。モノレポの具体的な構成例モノレポの構成は、親となるリポジトリの中に、複数の独立したプロジェクトが子ディレクトリとして配置されているのが一般的です。/my-monorepo <-- 親リポジトリ├── /packages <-- プロジェクトをまとめるディレクトリ│ ├── /web-app <-- 子プロジェクト1:ウェブアプリケーション│ ├── /api-server <-- 子プロジェクト2:APIサーバー│ ├── /ui-library <-- 子プロジェクト3:共通UIコンポーネント│ └── /shared-utils <-- 子プロジェクト4:共通関数└── package

Lang »