How to Build a Backend for htmx?

はじめに このチュートリアルでは、back4appを使用してhtmxウェブアプリの完全なバックエンドを構築する方法を学びます。 データベース管理、cloud code functions、restおよびgraphql api、ユーザー認証、ファイルストレージ、リアルタイムクエリ（ライブクエリ）など、back4appの重要な機能を統合する方法を説明し、htmxフロントエンドとシームレスに通信する安全でスケーラブル、かつ堅牢なバックエンドを作成します。 htmxを使用すると、クライアントサイドのインタラクションを処理するためにhtml属性を活用する現代的なjavascriptライブラリであり、サーバーサイドレンダリングに焦点を当てながらユーザーエクスペリエンスを大幅に向上させることができます。 htmxとback4appの強力なサーバーサイドフレームワークおよびテンプレートエンジンを組み合わせることで、開発者はフルスタックウェブアプリを簡単かつ効率的に作成できます。 このチュートリアルの終わりまでに、htmx統合に合わせたバックエンドを構築し、完全なページのリロードなしで動的なhtmlページの更新を行い、クライアントサイドの体験を向上させるスムーズなデータ操作を可能にします。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なhtmxのセットアップ 次のようにして、あなたのhtmlページに htmxライブラリ https //htmx org/ を含めてください ウェブ開発環境 ローカルサーバーをセットアップするか、サーバーサイドフレームワークを使用してhtmlテンプレートを提供することを確認してください。 html、css、およびjavascriptの知識 htmxドキュメント https //htmx org/docs/ を参照して、html属性やウェブアプリ開発の詳細を確認してください。 始める前に、これらの前提条件がすべて整っていることを確認してください。back4appプロジェクトを設定し、ローカルのhtmx環境を準備しておくと、より簡単に進めることができます。 ステップ 1 – back4appプロジェクトの設定 新しいプロジェクトを作成する back4appでhtmxバックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください。 back4appアカウントにログインします 「新しいアプリ」ボタンをクリックします あなたのback4appダッシュボードで。 アプリに名前を付けます （例：「htmx backend tutorial」）。 プロジェクトが作成されると、back4appダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルで説明されるすべてのバックエンド設定の基盤となります。 connect via rest api back4appは、データを管理し、リアルタイム機能を提供し、ユーザー認証を処理するためにparseプラットフォームに依存しています。htmx自体はクライアントサイドのライブラリですが、htmxフロントエンドをback4appに接続するには、htmlとjavascriptから直接rest api呼び出しを行う必要があります。 parseキーを取得する back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動して、次の情報を見つけてください。 アプリケーションid , rest apiキー , および parseサーバーurl （通常は次の形式です： https //parseapi back4app com ）。 これらのキーを使用すると、htmxを使ってバックエンドのエンドポイントを呼び出し、それに応じてhtmlテンプレートを操作できます。たとえば、javascriptのfetchリクエストをhtmx属性と組み合わせて、rest呼び出しを介してデータと対話することができます。 step 2 – setting up the database saving and querying data back4appプロジェクトが設定されたので、htmxリクエストやプレーンjavascriptからトリガーできるrest api呼び出しを使用してデータを保存および取得することができます。レコードを作成する最も簡単な方法は、parseサーバーにpostリクエストを送信することです。 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo 同様に、データをクエリできます curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo クライアント側からデータベースと対話するために、必要に応じてgraphqlクエリを使用することもできます。 schema design and data types デフォルトでは、parseは スキーマを動的に作成することを許可します が、より多くの制御のためにback4appダッシュボードでクラスとデータ型を定義することもできます。 「データベース」セクションに移動します あなたのback4appダッシュボードで。 新しいクラスを作成する （例：「todo」）およびタイトル（string）やiscompleted（boolean）などの関連する列を追加します。 back4appは、次のようなさまざまなデータ型をサポートしています： string , number , boolean , object , date , file , pointer, array, relation , geopoint , そして polygon これらを使用して、htmx駆動のアプリケーションの堅牢なスキーマを設計してください。 back4appは、データモデルの設計を手助けするaiエージェントを提供しています aiエージェントを開く アプリダッシュボードまたはメニューから。 データモデルを説明してください 簡単な言葉で（例：「バック4アプリで完全なクラススキーマを持つ新しいtodoアプリを作成してください。」）。 aiエージェントにスキーマを作成させましょう aiエージェントを使用することで、データアーキテクチャの設定にかかる時間を節約し、アプリケーション全体での一貫性を確保できます。 relational data リレーショナルデータがある場合、タスクをカテゴリにリンクするなど、 ポインタ または リレーション をrest api呼び出しを介してparseで使用できます。例えば、ポインタを追加するには // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } クエリを実行する際は、必要に応じてポインターデータを含めてください // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } live queries リアルタイムの更新について、back4appは ライブクエリ を提供しています。htmxはサーバーサイドレンダリングとhtml属性に焦点を当てていますが、ライブ更新を統合することでユーザーエクスペリエンスを大幅に向上させることができます。 ライブクエリを有効にする あなたのback4appダッシュボードで、アプリの サーバー設定 の下で。 “ライブクエリ”がオンになっていることを確認してください。 ライブクエリサブスクリプションを初期化する 必要に応じてjavascriptとhtmxトリガーを使用して （注：ライブクエリは通常、parse sdkを必要とします。ただし、データが変更されたときにページの一部を更新することでhtmxと一緒に動作することもできます。この例はその概念を示しています。） import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } このサブスクリプションは、htmxリクエストをトリガーしたり、クライアント側の変更を反映するためにhtmlテンプレートを動的に更新したりすることができます。 step 3 – applying security with acls and clps back4app security mechanism back4appは、セキュリティを真剣に考え、 アクセス制御リスト (acl) と クラスレベルの権限 (clp) を提供しています。これらの機能により、オブジェクトごとまたはクラスごとにデータの読み取りや書き込みを制限でき、認可されたユーザーのみがデータを変更できるようになります。 access control lists (acls) acl は、個々のオブジェクトに適用され、どのユーザー、役割、または一般の人々が読み取り/書き込み操作を実行できるかを決定します。例えば async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } オブジェクトを保存すると、それには指定されたユーザー以外の誰も読み取りや変更を行えないaclがあります。 class level permissions (clps) clp（クラスのデフォルト権限） は、クラスが公開されているか書き込み可能か、または特定の役割のみがアクセスできるかなど、クラス全体のデフォルト権限を管理します。 back4appダッシュボードに移動します , アプリを選択し、次に データベース セクションを開きます。 クラスを選択 （例：「todo」）。 クラスレベルの権限を開く タブ。 デフォルトを設定します。たとえば、読み取りまたは書き込みの「認証が必要」や、公開の「アクセス不可」などです。 これらの権限は基本を設定し、aclは個々のオブジェクトの権限を微調整します。堅牢なセキュリティモデルは通常、clp（広範な制限）とacl（オブジェクトごとの細かい制限）の両方を組み合わせます。詳細については、 アプリセキュリティガイドライン https //www back4app com/docs/security/parse security をご覧ください。 step 4 – writing and deploying cloud functions cloud codeは、サーバー側でカスタムjavascriptコードを実行できるparse server環境の機能です。cloud codeを書くことで、back4appのバックエンドを追加のビジネスロジック、バリデーション、トリガー、およびparse server上で安全かつ効率的に実行される統合で拡張できます。 how it works cloud codeを書くときは、通常、javascript関数、トリガー、および必要なnpmモジュールを main js ファイルに配置します。このファイルはその後、parse server環境内で実行されるback4appプロジェクトにデプロイされます。 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); back4app cliまたはダッシュボードを使用してcloud codeをデプロイします。 calling your function htmxを強化したインターフェースから、javascriptのfetchを使用してcloud code関数を呼び出し、それに応じてhtmlページの一部を更新できます。例えば async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } htmxトリガーやhtml属性内に同様の呼び出しを統合することで、クライアント側で動的で応答性のある動作を作成し、全体的なユーザーエクスペリエンスを向上させることができます。 step 5 – configuring user authentication user authentication in back4app back4appは「 parse user 」クラスを認証の基盤として活用しています。デフォルトでは、parseはパスワードのハッシュ化、セッショントークン、および安全なストレージを処理します。htmxアプリケーションの文脈では、ユーザー認証はhtmlフォームの送信やjavascriptのfetchリクエストによって開始されるrest呼び出しを介して管理できます。 setting up user authentication 例えば、新しいユーザーを作成するには async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } 同様に、ユーザーログインの場合 async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } session management 成功したログインの後、parseはセッショントークンを作成します。このトークンは、htmxアプリケーション内で保存および管理し、以降の認証されたリクエストに使用できます。 social login integration htmxはhtml属性とサーバーサイドのインタラクションに焦点を当てていますが、googleやfacebookなどのソーシャルログインを統合することは、oauthフローを開始し、サーバーサイドでコールバックを処理することで実現できます。 ソーシャルログインのドキュメント https //www back4app com/docs/platform/sign in with apple の詳細なガイダンスを参照してください。 email verification and password reset メール認証とパスワードリセットを有効にするには メール設定に移動する あなたのback4appダッシュボードで。 メール確認を有効にする そして必要なテンプレートを設定します。 htmxフローでfetchを使用して、必要に応じてパスワードリセットリクエストをトリガーします。 step 6 – handling file storage uploading and retrieving files parseには、htmxアプリケーションからのrest api呼び出しを介して利用できるファイルストレージ機能が含まれています。たとえば、画像をアップロードするには async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } file security back4appでセキュリティ設定を構成し、必要に応じてファイルオブジェクトにaclを設定することで、誰がファイルをアップロードおよびアクセスできるかを制御します。 step 7 – scheduling tasks with cloud jobs cloud jobs back4appのクラウドジョブを使用すると、古いデータのクリーンアップや定期的なメールの送信など、バックエンドでのルーチンタスクをスケジュールできます。これらのジョブはサーバー側で実行され、必要に応じてhtmxワークフローに統合できます。 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); このジョブをback4appダッシュボードの下でスケジュールします アプリ設定 > サーバー設定 > バックグラウンドジョブ step 8 – integrating webhooks ウェブフック は、特定のイベントが発生するたびに、back4appアプリが外部サービスにhttpリクエストを送信できるようにします。これは、決済ゲートウェイ、メールマーケティングツール、または分析プラットフォームなどのサードパーティシステムとの統合に非常に強力です。 webhook設定に移動する back4appダッシュボードの > その他 > webhooks に移動し、add webhookをクリックします。 エンドポイントを設定する (例 https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) トリガーを設定する どのイベントがあなたのback4appクラスやcloud code関数でウェブフックを発火させるかを指定します。 例えば、新しいtodoが作成されるたびにslackチャンネルに通知するには 受信ウェブフックを受け入れるslackアプリを作成します。 slackのwebhook urlをコピーします。 あなたのback4appダッシュボードで、「todoクラスの新しいレコード」イベントのために、そのslack urlにエンドポイントを設定してください。 必要に応じて、カスタムhttpヘッダーやペイロードを追加します。 トリガーでカスタムhttpリクエストを作成することによって、cloud codeでwebhooksを定義することもできます。 step 9 – exploring the back4app admin panel その back4app管理アプリ は、非技術的なユーザーがコードを書くことなくcrud操作を実行し、日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。データベース管理、カスタムデータ管理、エンタープライズレベルの操作を効率化するモデル中心のユーザーフレンドリーなインターフェースを提供します。 enabling the admin app 有効にする するには、 アプリダッシュボード > その他 > 管理アプリ に移動し、「管理アプリを有効にする」ボタンをクリックします。 最初の管理者ユーザーを作成する （ユーザー名/パスワード）、これにより新しいロール（b4aadminuser）とクラス（b4asetting、b4amenuitem、b4acustomfield）がアプリのスキーマに自動的に生成されます。 サブドメインを選択してください 管理インターフェースにアクセスし、セットアップを完了します。 ログイン あなたが新しい管理アプリのダッシュボードにアクセスするために作成した管理者の資格情報を使用してください。 有効にすると、back4app管理アプリを使用して、parseダッシュボードやバックエンドコードを直接使用することなく、データベースのレコードを簡単に表示、編集、または削除できます。 conclusion htmxを使用してback4appのバックエンドを構築する方法に関するこの包括的なチュートリアルに従うことで、あなたは htmxウェブアプリ向けに特化した安全なバックエンドを作成しました。 クラススキーマ、データ型、および関係を持つデータベースを構成しました。 リアルタイムクエリを統合し、ライブクエリがクライアント側のユーザーエクスペリエンスをどのように向上させるかを考慮しました。 aclとclpを使用してデータアクセスを保護および管理するためのセキュリティ対策を適用しました。 カスタムビジネスロジックをサーバーサイドで実行するためのcloud code関数を実装しました。 ユーザー認証、ファイルストレージ、スケジュールされたクラウドジョブ、および統合されたウェブフックを設定します。 効率的なデータ管理のためにback4app管理パネルを探索しました。 この堅牢なバックエンドを使用することで、htmxの機能を活用して、クライアントサイドの強化と強力なサーバーサイドフレームワークを組み合わせた動的で現代的なウェブアプリケーションを作成できます。このフルスタックアプローチは、全体的なユーザーエクスペリエンスを向上させ、スムーズなhtmlページの更新、効率的なサーバーサイドレンダリング、およびテクノロジースタック全体でのシームレスな統合を提供します。 next steps このバックエンドを拡張する より複雑なデータモデル、高度なテンプレートエンジン、およびカスタムサーバーサイドロジックを組み込むために。 サーバーサイドフレームワークとの統合を探る よりダイナミックでレスポンシブなクライアントサイドの体験を作成するために。 back4appの公式ドキュメントをチェックしてください より深く高度なセキュリティ、パフォーマンス調整、分析について掘り下げます。 htmxと現代のウェブ開発について学び続ける ユーザーフレンドリーでレスポンシブなウェブアプリを構築し、クライアントサイドとサーバーサイドの技術の最良の部分を組み合わせます。 プロジェクトが作成されると、back4appダッシュボードにリストされているのが見えるでしょう。このプロジェクトは、このチュートリアルで説明されるすべてのバックエンド設定の基盤となります。 rest api経由で接続する back4appは、データを管理し、リアルタイム機能を提供し、ユーザー認証を処理するためにparseプラットフォームに依存しています。 htmx自体はクライアントサイドのライブラリですが、htmxフロントエンドをback4appに接続するには、htmlとjavascriptから直接rest api呼び出しを行う必要があります。 parseキーを取得する back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動して、次の情報を見つけます。 アプリケーションid , rest apiキー , および parseサーバーurl （通常は次の形式） https //parseapi back4app com )。 これらのキーを使用して、htmxを使ってバックエンドエンドポイントを呼び出し、htmlテンプレートを適切に操作できます。たとえば、javascriptのfetchリクエストをhtmx属性と組み合わせて、rest呼び出しを介してデータと対話することができます。 ステップ2 – データベースの設定 データの保存とクエリ back4appプロジェクトが設定されたので、rest api呼び出しを使用してデータを保存および取得することができます。これはhtmxリクエストまたはプレーンjavascriptからトリガーできます。レコードを作成する最も簡単な方法は、parseサーバーにpostリクエストを送信することです。 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo 同様に、データをクエリすることもできます。 curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo 必要に応じて、クライアントサイドからデータベースと対話するためにgraphqlクエリを使用することもできます。 スキーマ設計とデータ型 デフォルトでは、parseは スキーマを動的に作成する , しかし、より多くの制御のためにback4appダッシュボードでクラスとデータ型を定義することもできます。 back4appダッシュボードの「データベース」セクションに移動します。 新しいクラスを作成します。 （例：「todo」）およびタイトル（string）やiscompleted（boolean）などの関連するカラムを追加します。 back4appは、次のようなさまざまなデータ型をサポートしています： string , number , boolean , object , date , file , pointer, array, relation , geopoint , そして polygon これらを使用して、htmx駆動のアプリケーションの堅牢なスキーマを設計してください。 back4appは、データモデルの設計を手助けするaiエージェントを提供しています： アプリダッシュボードまたはメニューから aiエージェントを開く データモデルを説明する 簡単な言葉で（例：「新しいtodoアプリをback4appで完全なクラススキーマで作成してください。」）。 aiエージェントにスキーマを作成させる 。 aiエージェントを使用することで、データアーキテクチャの設定にかかる時間を節約し、アプリケーション全体の一貫性を確保できます。 リレーショナルデータ タスクをカテゴリにリンクするなどのリレーショナルデータがある場合、rest api呼び出しを介して pointers または relations をparseで使用できます。たとえば、ポインタを追加する場合： // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } クエリを実行する際は、必要に応じてポインターデータを含めてください // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } ライブクエリ リアルタイムの更新のために、back4appは ライブクエリ を提供しています。htmxはサーバーサイドレンダリングとhtml属性に焦点を当てていますが、ライブ更新を統合することでユーザーエクスペリエンスを大幅に向上させることができます。 ライブクエリを有効にする には、back4appダッシュボードのアプリの サーバー設定 で行います。「ライブクエリ」がオンになっていることを確認してください。 ライブクエリのサブスクリプションを初期化する には、必要に応じてjavascriptとhtmxトリガーを使用します （注 ライブクエリは通常parse sdkを必要としますが、データが変更されたときにページの一部を更新することでhtmxと一緒に動作することもできます。この例はその概念を示しています。） import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } このサブスクリプションは、htmxリクエストをトリガーしたり、クライアント側の変更を反映するためにhtmlテンプレートを動的に更新したりできます。 ステップ3 – aclとclpによるセキュリティの適用 back4appのセキュリティメカニズム back4appは、 アクセス制御リスト (acl) と クラスレベルの権限 (clp) を提供することで、セキュリティを真剣に考えています。これらの機能により、オブジェクトまたはクラスごとにデータの読み取りや書き込みを制限でき、認可されたユーザーのみがデータを変更できるようになります。 アクセス制御リスト (acl) aclは、どのユーザー、役割、または一般の人々が読み取り/書き込み操作を実行できるかを決定するために、個々のオブジェクトに適用されます。例えば async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } オブジェクトを保存すると、それには指定されたユーザー以外の誰も読み取りまたは変更できないようにするaclがあります。 クラスレベルの権限 (clp) clp は、クラスが公開されて読み取り可能か書き込み可能か、または特定の役割のみがアクセスできるかどうかなど、クラス全体のデフォルトの権限を管理します。 back4appダッシュボードに移動します , アプリを選択し、 データベース セクションを開きます。 クラスを選択します （例：「todo」）。 クラスレベルの権限 タブを開きます。 デフォルトを設定します。「読み取りまたは書き込みには認証が必要」や「一般公開にはアクセス不可」など。 これらの権限はベースラインを設定し、aclは個々のオブジェクトの権限を微調整します。堅牢なセキュリティモデルは通常、clp（広範な制限）とacl（オブジェクトごとの細かい制限）を組み合わせます。詳細については、 アプリセキュリティガイドライン https //www back4app com/docs/security/parse security をご覧ください。 ステップ4 – クラウド関数の作成とデプロイ クラウドコードは、サーバー側でカスタムjavascriptコードを実行できるparse server環境の機能です。 cloud codeを書くことで、back4appのバックエンドに追加のビジネスロジック、バリデーション、トリガー、そしてparse server上で安全かつ効率的に実行される統合を拡張できます。 仕組み cloud codeを書くとき、通常はjavascript関数、トリガー、および必要なnpmモジュールを main js ファイルに配置します。このファイルはback4appプロジェクトにデプロイされ、parse server環境内で実行されます。 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); back4app cliまたはダッシュボードを使用してcloud codeをデプロイします。 関数の呼び出し htmx強化インターフェースから、javascriptのfetchを使用してcloud code関数を呼び出し、htmlページの部分を適宜更新できます。例えば async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } htmxトリガーやhtml属性内に同様の呼び出しを統合することで、クライアント側で動的で応答性のある動作を作成し、全体的なユーザー体験を向上させることができます。 ステップ5 – ユーザー認証の設定 back4appにおけるユーザー認証 back4appは、認証の基盤として parse user クラスを活用しています。デフォルトでは、parseはパスワードのハッシュ化、セッショントークン、および安全なストレージを処理します。 htmxアプリケーションの文脈では、ユーザー認証はhtmlフォームの送信やjavascriptのfetchリクエストによって開始されるrest呼び出しを介して管理できます。 ユーザー認証の設定 例えば、新しいユーザーを作成するには async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } 同様に、ユーザーログインの場合 async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } セッション管理 成功したログインの後、parseはセッショントークンを作成し、htmxアプリケーション内で保存および管理して、後続の認証リクエストに使用できます。 ソーシャルログイン統合 htmxがhtml属性とサーバーサイドのインタラクションに焦点を当てている間、googleやfacebookなどのソーシャルログインを統合することは、oauthフローを開始し、サーバーサイドでコールバックを処理することで実現できます。詳細なガイダンスについては、 ソーシャルログインドキュメント https //www back4app com/docs/platform/sign in with apple を参照してください。 メール確認とパスワードリセット メール認証とパスワードリセットを有効にするには バック4アプリダッシュボードの メール設定 メール認証を有効にし 、必要なテンプレートを設定します。 htmxフローでfetchを使用して、必要に応じてパスワードリセットリクエストをトリガーします。 ステップ6 – ファイルストレージの取り扱い ファイルのアップロードと取得 parseにはファイルストレージ機能が含まれており、htmxアプリケーションからのrest api呼び出しを介して利用できます。たとえば、画像をアップロードするには async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } ファイルセキュリティ back4appでセキュリティ設定を構成し、必要に応じてファイルオブジェクトにaclを設定することで、誰がファイルをアップロードおよびアクセスできるかを制御します。 ステップ 7 – クラウドジョブによるタスクのスケジューリング クラウドジョブ back4appのクラウドジョブを使用すると、古いデータのクリーンアップや定期的なメールの送信など、バックエンドでのルーチンタスクをスケジュールできます。 これらのジョブはサーバー側で実行され、必要に応じてhtmxワークフローに統合できます。 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); このジョブをback4appダッシュボードの アプリ設定 > サーバー設定 > バックグラウンドジョブ からスケジュールします。 ステップ 8 – ウェブフックの統合 webhooks は、特定のイベントが発生するたびに、back4appアプリが外部サービスにhttpリクエストを送信できるようにします。これは、決済ゲートウェイ、メールマーケティングツール、または分析プラットフォームなどのサードパーティシステムと統合するために強力です。 webhooks設定に移動 あなたのback4appダッシュボード > その他 > webhooksに行き、add webhookをクリックします。 エンドポイントを設定 (例 https //your external service com/webhook endpoint https //your external service com/webhook endpoint )。 トリガーを設定 して、back4appのクラスやcloud code関数内のどのイベントがwebhookを発火させるかを指定します。 例えば、新しいtodoが作成されるたびにslackチャンネルに通知するには 受信webhookを受け入れるslackアプリを作成します。 slackのwebhook urlをコピーします。 back4appダッシュボードで、イベント「todoクラスの新しいレコード」に対してそのslack urlをエンドポイントとして設定します。 必要に応じて、カスタムhttpヘッダーやペイロードを追加します。 トリガー内でカスタムhttpリクエストを行うことで、cloud codeでもwebhookを定義できます。 ステップ9 – back4app管理パネルの探索 この back4app管理アプリ は、非技術的なユーザーがcrud操作を行い、コードを書くことなく日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。 それは、データベース管理、カスタムデータ管理、エンタープライズレベルの操作を効率化するモデル中心のユーザーフレンドリーなインターフェースを提供します。 管理アプリの有効化 有効にする には、 アプリダッシュボード > その他 > 管理アプリ に移動し、「管理アプリを有効にする」ボタンをクリックします。 最初の管理ユーザーを作成する （ユーザー名/パスワード）を作成すると、新しい役割（b4aadminuser）とクラス（b4asetting、b4amenuitem、b4acustomfield）がアプリのスキーマに自動的に生成されます。 サブドメインを選択する ことで、管理インターフェースにアクセスし、セットアップを完了します。 ログインする には、作成した管理者の資格情報を使用して、新しい管理アプリのダッシュボードにアクセスします。 有効にすると、back4app管理アプリを使用すると、parseダッシュボードやバックエンドコードを直接使用することなく、データベースのレコードを簡単に表示、編集、または削除できます。 結論 back4appを使用してhtmxのバックエンドを構築する方法に関するこの包括的なチュートリアルに従うことで、あなたは htmxウェブアプリ用に特化した安全なバックエンドを作成しました。 クラススキーマ、データ型、関係を持つデータベースを構成しました。 リアルタイムクエリを統合し、live queriesがクライアント側のユーザー体験を向上させる方法を考慮しました。 aclとclpを使用してデータアクセスを保護し、管理するためのセキュリティ対策を適用しました。 カスタムビジネスロジックをサーバー側で実行するためのcloud code関数を実装しました。 ユーザー認証、ファイルストレージ、スケジュールされたcloud jobs、webhooksの統合を設定しました。 効率的なデータ管理のためにback4app管理パネルを探求しました。 この堅牢なバックエンドを使用して、htmxの機能を活用し、クライアント側の強化と強力なサーバー側フレームワークを組み合わせた動的で現代的なウェブアプリケーションを作成できます。 このフルスタックアプローチは、全体的なユーザー体験を向上させ、スムーズなhtmlページの更新、効率的なサーバー側レンダリング、テクノロジースタック全体でのシームレスな統合を提供します。 次のステップ このバックエンドを拡張する より複雑なデータモデル、高度なテンプレートエンジン、カスタムサーバー側ロジックを組み込むために。 サーバー側フレームワークとの統合を探求する より動的で応答性の高いクライアント側の体験を作成するために。 back4appの公式ドキュメントをチェックする 高度なセキュリティ、パフォーマンスチューニング、分析についての詳細を学ぶために。 htmxと現代のウェブ開発について学び続ける クライアント側とサーバー側のテクノロジーの最良の組み合わせを持つユーザーフレンドリーで応答性の高いウェブアプリを構築するために。