eZeeBaseドキュメント

初めに

コードの埋め込み

eZeeBaseをインストールするには、 <head> タグ内にコードを埋め込んでください。

<script defer src="https://cdn2.likepay.dev/s/PROJECT_ID" charset="utf-8"></script>



コード内に自分の実際のプロジェクトIDを忘れずに置き換えてください。

ログイン機能

eZeeBaseのログイン機能を使うには、Firebase内に承認モージュルを有効にしてください。

フォーム

新規登録とログインフォームを設定することができます。そうするには、<form>要素にカスタム属性を設定する必要があります。

名：



値は、フォーム種類によって異なります。下記はそれぞれの種類の設定について説明されています。

新規登録

フォームを新規登録フォームにするためには、<form>要素にカスタム属性を追加してください。

値



HTML例：

	
<!-- Sign-up form -->
<form data-eb:auth-form="signup">
 <input type="email" name="email"/>
 <input type="password" name="password"/>

 <button type="submit">Sign Up</button>
</form>

更新

フォームを更新フォームにするためには、<form>要素にカスタム属性を追加してください。

値：



HTML例：

	
<!-- Update form -->
<form data-eb:auth-form="update">
 <input type="text" name="displayName"/>
 <input type="text" name="photoURL"/>

 <input type="email" name="email"/>
 <input type="password" name="password"/>

 <button type="submit">Update</button>
</form>

必須入力欄

Email（メールアドレス）とPassword（パスワード）は、フォームの必須入力欄となります。

それぞれの入力欄に対して正しくName属性を設定してください。

Email入力欄：



パスワード入力欄：



任意更新入力欄

更新フォームでは入力欄を追加できます。Photo URL（プロフィール画像のURL）とName（名前）を設定できます。下記のName属性を設定してください。

Name入力欄：



Photo URL入力欄：



ボタン

ボタンやリンクに対してカスタム属性を設定することで、クリックで新規登録・ログインのモジュールを開くように設定できます。そうするには、下記のカスタム属性をボタンやリンク要素に対して設定してください。

名前：



新規登録ボタン

新規登録ボタンに対して下記のカスタム属性を設定してください：

値：



HTML例：

	
<!-- Sign-up button -->
<button data-eb:auth-btn="signup">Sign Up</button>


<!-- Sign-up link -->
<a href="#" data-eb:auth-btn="signup">Sign Up</a>

ログインボタン

ログインボタンに対して下記のカスタム属性を設定してください：

値：



HTML例：

	
<!-- Sign-in button -->
<button data-eb:auth-btn="signin">Sign In</button>


<!-- Sign-in link -->
<a href="#" data-eb:auth-btn="signin">Sign In</a>

ログアウト

ログアウトボタンに対して下記のカスタム属性を設定してください：

値：



HTML例：

	
<!-- Sign-out button -->
<button data-eb:auth-btn="signout">Sign Out</button>


<!-- Sign-out link -->
<a href="#" data-eb:auth-btn="signout">Sign Out</a>

フィールド

ウェブサイト上の要素にカスタム属性を追加することで、authモジュールのフィールドからユーザーデータを表示することができます。データはインナーテキストまたはhtml属性値として表示することができます。

データを表示するには、次のようなname属性を追加します

Name:



次に、どのようなデータを表示したいかに基づいて、値を追加します。
次のセクションを見て、正しい属性を探してください。

要素内のテキスト

ユーザーデータを要素内のテキストとして表示するには、下記のようなカスタム属性を設定してください。

Uid



この設定によって、ユーザーのIDが要素内のテキストとして表示されます。

メールアドレス



この設定によって、ユーザーのメールアドレスが要素内のテキストとして表示されます。

名前



この設定によって、ユーザーの名前が要素内のテキストとして表示されます。

画像URL



この設定によって、ユーザーの画像URLが要素内のテキストとして表示されます。

HTML例：

	
<!-- Fields like inner text -->
<span data-eb:auth="uid"></span>
<span data-eb:auth="email"></span>
<span data-eb:auth="displayName"></span>
<span data-eb:auth="photoURL"></span>

HTML属性

ユーザーデータを要素の属性として表示するには、下記のようなカスタム属性を設定してください。

uid



この設定によって、ユーザーのIDが要素の「value」属性の値として表示されます。

メールアドレス



この設定によって、ユーザーのメールアドレスが要素の「value」属性の値として表示されます。

名前



この設定によって、ユーザーの名前が要素の「value」属性の値として表示されます。

画像URL



この設定によって、ユーザーのIDが要素の「src」属性の値として表示されます。

HTML例：

	
<!-- Fields like HTML attribute -->
<input type="text" data-eb:auth="uid|value"/>
<input type="email" data-eb:auth="email|value"/>
<input type="email" data-eb:auth="displayName|value"/>
<img data-eb:auth="photoURL|src"/>

コンテンツ表示

You can hide and show elements on page based on wether user is authenticated or not. To do so, you need to add custom attributes with the following name to such elements.

ユーザーのログイン状況によって、特定の要素を表示・非表示することができます。そうするには、要素に対して下記のようなカスタム属性を設定してください。

名：



下記の値を設定すると、ログインしている場合は非表示で、ログインしていない場合は表示になります。

名：



HTM例：

	
<!-- Hide if the user is logged in, and show if not -->
<img src="default_user.png" data-eb:auth-display="false"/>

下記の値を設定すると、ログインしている場合は表示で、ログインしていない場合は非表示になります。

値：



HTM例：

	
<!-- Show if the user is logged in, and hide if not -->
<img data-eb:auth="photoURL|src" data-eb:auth-display="true"/>

ロードスクリーン

Firebaseの準備完了までにページを隠すロードスクリーンを設定することができます。

ロードスクリーンを追加するには、コンテンツを隠す要素を作成して、その要素に対して下記のようなカスタム属性を設定してください。

名：



値：



eZeeBaseは自動的にロードスクリーンを表示したり、非表示にしたりします。

HTML例：

	
<div class="preloader" data-eb:auth-loading-screen></div>

‍

Memberstackログイン

eZeeBaseでFirebaseとMemberstackのログインを同期することができます。eZeeBaseは、自動的にサイト上のMemberstack会員を監視し、その会員と同じIDのユーザーをFirebase内で作成し、ログインさせます。

その設定を行うには、Firebaseプロジェクト内にクラウドファンクションを作成することが必要です。

まずは、IAM Service Account Credentials APIを有効化する必要があります。

次は、下記のパラメーターのファンクションを作ってください：

ファンクション名：



地域：



次はRuntime, Connections and Security settingsを開いてください：

下の方から新しい変数（VARIABLE）を追加してください：

下記のデータのVARIABLEを作ってください：

名：



値：


{"projectId":"YOUR_PROJECT_ID",
"storageBucket":"YOUR_PROJECT_ID.appspot.com",
"locationId":"YOUR_FIRESTORE_LOCATION"}

参考： list of Cloud Firestore locations.

次は、ファンクションの作成を続けます。

次のページでは、Index.jsの設定からEntry Pointを下記のデータに設定してください。



そして下記のコードを入力してください。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const jwt = require('jsonwebtoken');
const axios = require('axios');
const publicKeyUrl = 'https://api.memberstack.io/metadata/v1/public-keys';

admin.initializeApp();

exports.getCustomToken = functions.https.onCall(async (data, context) => {
  let decodedJWT;
  let key;

  if (data.jwt) {
    decodedJWT = jwt.decode(data.jwt, {complete: true});

    try {
      const {data} = await axios.get(publicKeyUrl);
      key = data[decodedJWT.header.kid];
    } catch (e) {
      console.error('Error getting MemberStack public key');
      throw new Error('500: Error getting MemberStack public key');
    }

    try {
      decodedJWT = jwt.verify(data.jwt, key);
    } catch (e) {
      console.error('Wrong MemberStack public key');
      throw new Error('500: Wrong MemberStack public key');
    }

    return await admin.auth().createCustomToken(decodedJWT.id);
  } else {
    console.error('JWT not found');
    throw new Error('JWT not found');
  }
});



次は、package.jsonを開いて、下記のコードを入力してください。

{
  "name": "getCustomToken",
  "version": "0.0.1",
	"dependencies": {
		"axios": "^0.21.1",
		"firebase-admin": "^9.2.0",
		"jsonwebtoken": "^8.5.1",
		"firebase-functions": "^3.13.1"
	}
}



次は、ファンクションを開いてRuntime, Connections and Security settingsの下から

Runtime Service account名が下記のような設定になっていることを確認してください。

この状態から変更は不要です。

次は、IAM & Adminをナビゲーションから開きます。

Runtime Service account名をアクセス権限のリストから探して、編集アイコンを押してください。

オープンしたページでService Account TokenのRoleを作成してください。

最後は、設定を保存して、デプロイしてください

Firestore

Firebase Firestoreのデータベースを利用するには、eZeeBaseの設定からFirestoreモジュールを有効にしてください。

コレクション

To display Firestore collection, first you need to add a Colleection Wrapper <div> and claim a collection in custom attribute of that <div>:

Firestoreコレクションを表示するには、まずはCollection Wrapperとなる<div>要素が必要です。それに対してカスタム属性を設定します。

名：



コレクションを表示する方法はいくつかあります。

ドキュメントのリストを表示

Set attribute's value to a name of your Firestore collection (e.g. "projects") to display all documents from that collection.

コレクション全体のドキュメントを表示するには、カスタム属性の値をFirestoreコレクション名に設定してください（例：「projects」）

HTML例：

	
<!-- Show all documents from "users" collection -->
<div data-eb:db-collection="users">
 ...
</div>

特定のドキュメントを表示

カスタム属性の値をFirestoreコレクションと表示するドキュメントのIDの組み合わせにしてください（例：「projects/{docId}」）

HTML例：

  
<!-- Show special document from "users" collection -->
<div data-eb:db-collection="users/JEijcJVC3wOX9dqmjSQ">
	...
</div>

ログイン中のユーザーIDのある特定のドキュメントを表示

カスタム属性の値をFirestoreコレクションと表示したいユーザーのuidの組み合わせにしてください（例：「うusers/{uid}」）

HTML例：

  
<!-- Show document with current user's ID from "users" collection -->
<div data-eb:db-collection="users/{uid}">
 ...
</div>

URLパラメーターからIDを取得して、特定のドキュメントを表示

カスタム属性の値を表示したいFirestoreコレクションとドキュメントIDをもつURLパラメーターの組み合わせにしてください（例：「projects/{project_id}」）

HTML例：

  
<!-- Show document with special ID witch got from URL parameter -->
<div data-eb:db-collection="products/{product_id}">
 ...
</div>

変更監視

To set real time listening to changes in collection, add the following custom attribute to Collection Wrapper <div>:

Name:



Value:



HTML example:

  
<!-- Listen changes from all documents from "users" collection -->
<div data-eb:db-collection="users" data-eb:db-watch="true">
 ...
</div>

Snapshot and no-snapshot

Inside of your Collection Wrapper you can create elements, which will be shown when collection has documents to show or when it is empty.

Snapshot

Snapshot element is shown when collection has elements to show at current filters and conditions. Snapshot nests documents inside.

To set Snapshot, add the following custom attribute to an element inside Collection Wrapper:

Name:



Value:



HTML example:

  
<div data-eb:db-collection="users">

 <!-- You will see your documents here -->
 <div data-eb:db-snapshot>
 ...
 <div>
 
</div>

No-snapshot

No-snapshot element is shown when collection has no elements to show at current filters and conditions. It is an empty state for your collection list.

To set No-snapshot, add the following custom attribute to an element inside Collection Wrapper:

Name:



Value:



HTML example:

  
<div data-eb:db-collection="users">

 <!-- If you don't have any documents at all you will see that section -->
 <div data-eb:db-no-snapshot>
  NO USERS
 </div>
 
</div>

Document

Documents are shown inside of the Snapshot. To show documents, you need to create an element inside snapshot, which will serve as a template for all documents in this collection.

To setup that, add the following custom attribute to an element inside of the Snapshot.

Name:



Value:



HTML example:

  
<div data-eb:db-collection="users">
 <div data-eb:db-snapshot>
 
  <!-- That element will be copied for each document in snapshot -->
  <div data-eb:db-doc>
  ...
  <div>
  
 <div>
</div>

Filters

You can set a filter to your Collection list.

To do that, add the following custom attribute to Collection Wrapper:

Name:



Value for the attribute should include your filter condition written in Firestore syntaxis (e.g. [['price','>',500]]).

HTML example:

  
<div data-eb:db-collection="products" data-eb:db-filters="[['price','>',500]]">
	...
</div>

Order

You can set an order for your collection list. To do that, add the following custom attribute to your Collection Wrapper:

Name:



Order by one field

To set order by one field from document collection, set the attribute value to the field name in specific fromat (e.g. [['price']]).

HTML example:

  
```html
<!-- Order by one field -->
<div data-eb:db-collection="products" data-eb:db-order="[['price']]">
	...
</div>

Descending order

To set a descending order, add that parameter in attribute's value (e.g. [['price', 'desc']]).

HTML example:

  
<!-- Descending order -->
<div data-eb:db-collection="products" 
data-eb:db-order="[['price', 'desc']]">
	...
</div>

Order by two fields

To set an order by two fields, write a condition with multiple parameters (e.g. [['price', 'asc'],['discount','desc']]).

HTML example:

  
<!-- Order by two fields -->
<div data-eb:db-collection="products" 
data-eb:db-order="[['price', 'asc'],['discount','desc']]">
	...
</div>

Fields

Inside of a document you can display document's fields data as an inner text or HTML attributes ("src", "value", "href" etc).

To do that, set custom attributes to elements inside of the document template.

Add an attribute with the following Name:

Name:



Inner text

To display data as an inner text of the element, set value to field name (e.g. "projects").

HTML example:

  
<!-- Fields like inner text -->
<h3 data-eb:db-field="name"></h3>

HTML attribute

To display data as a HTML attribute ("src", "value", "href" etc), set value to field name and attribute name divided by "|" symbol (e.g. "picture_url|src").

HTML example:

  
<!-- Fields like HTML attribute -->
<img data-eb:db-field="picture_url|src"/>

HTML attribute with variable

You can add variables such as document ID ({docId}) inside of a value (e.g. "https://www.shop.com/products/{docId}|href").

HTML example:

  
<!-- Fields like HTML attribute with variable -->
 <a data-eb:db-field="https://www.shop.com/products/{docId}|href">Link</a>
<img data-eb:auth="photo_url|src"/>

Field value from map

To display data from map field, add the map field name before actual field name and divide them with "." (e.g. "name.first").

HTML example:

  
<!-- Field value from map -->
<h3 data-eb:db-field="name.first"></h3>
<h3 data-eb:db-field="name.second"></h3>

Field value from array

To display data from array field, specify array item number in attribute value (e.g. "photos[0]|src").

HTML example:

  
<!-- Field value from array -->
<img data-eb:auth="photos[0]|src"/>
<img data-eb:auth="photos[1]|src"/>

Arrays

To display arrays inside of a document, first you will need to create an Array Wrapper - an element with the following custom attribute:

Name:



Set attribute's value to the name of array field in your document (e.g. "items").

Inside of the Array Wrapper, create a template item for array items by adding the following custom attribute:

Name:



Set attribute's value to the name of array item in your document and the item index (e.g. "item, idx"). This element will be copied as a template for all items in the array.

HTML example:

  
<div data-eb:db-doc>
 <!-- Array wrapper -->
 <ol data-eb:db-array="items">

  <!-- Array item will be copied for each array item
  and defind name of loop variable -->
  <li data-eb:db-array-item="item">
    ...
  </li>

 </ol>

<div>

Display data from array item

You can display data from array item by setting the following attribute to elements inside of the array item template:

Name:



Set attribute's value to the name of a field inside of the array item (e.g. "item").

HTML example:

  
<ol data-eb:db-array="items">
 <li data-eb:db-array-item="item">
 
  <!-- Use an array item in HTML attribute -->
  <a data-eb:db-field="#{item}|href">
  
   <!-- Use an array item in inner text -->
   <span data-eb:db-field="item"></span>
  </a>
  
 </li>
</ol>

Display array item as a map

In case your array object has a map structure, you can display it's data setting attribute value to the name of the map + "." + field name (e.g. "object.name").

HTML example:

  
<ul data-eb:db-array="objects">
 <li data-eb:db-array-item="object">
 
  <!-- Also an array item can be a map -->
  <span data-eb:db-field="object.name"></span>-
  <span data-eb:db-field="object.value"></span>
 </li>
</ul>

Editing array

Here are several important things about working with arrays within document or create from:

Create array item

You can only create array items within a document create or update form.

Add the following custom attribute to the button inside of the array warapper:

Name:



Value:



HTML example:

  
<form data-eb:db-doc data-eb:db-form="update">
 <ol data-eb:db-array="items">
  <li data-eb:db-array-item="item, idx">
   <input type="text" data-eb:db-field="item.str|value">
  </li>
  
  <button data-eb:db-array-item-add type="button" name="button">Add</button>
 </ol>
 
 <button type="submit" name="button">Save</button>
</form>

Delete array item

To delete array item, you can add a delete button or link inside of the array item. It can only be done withing a document update or create form. Add the following custom attribute to this button/link:

Name:



Value:



HTML example:

  
<form data-eb:db-doc data-eb:db-form="update">
 <ol data-eb:db-array="items">
  <li data-eb:db-array-item="item, idx">
   <input type="text" data-eb:db-field="item.str|value">
   
   <a data-eb:db-array-item-delete href="#">X</a>
   
  </li>
 </ol>
 <button type="submit" name="button">Save</button>
</form>

Forms

You can setup forms inside of Collection Wrapper to create or update collection documents. To do that, add a from with the following custom attribute name:

Name:



Then set attribute's value as it is explained in the following paragraphs

Create

For Create form, add the following custom attribute value to the form

Value:



Create form should be outside of the Snapshop.

HTML example:

  
<div data-eb:db-collection="product">
 <!-- The create form shoud be outside of snapshot element -->
 <form data-eb:db-form="create">
  <input type="text" data-eb:db-field="name|value"/>
  <input type="number" data-eb:db-field="price|value"/>
	
  <button type="submit">Create</button>
 </form>
</div>

Update

For Update form, add the following custom attribute value to the form:

Value:



Create form should be inside of the document element.

HTML example:

  
<div data-eb:db-collection="product">
 <div data-eb:db-snapshot>
  <div data-eb:db-doc>
			
   <!-- The update form shoud be inside of snapshot element -->
   <form data-eb:db-form="update">
    <input type="text" data-eb:db-field="name|value"/>
    <input type="number" data-eb:db-field="price|value"/>
			
    <button type="submit">Update</button>
   </form>

  <div>
 <div>
</div>

Delete

To delete document, add a delete button or link inside of the document and set the following attribute to that button or link.

Name:



Value:



HTML example:

  
<div data-eb:db-collection="lists/1UKp0cP4NahXdqG1VTPu">
 <div data-eb:db-snapshot>
  <form data-eb:db-doc data-eb:db-form="update">
   <a href="#" data-eb:db-doc-delete>Delete</a>
  </form>
 </div>
</div>

Form handlers

You can create "before" and "after" handlers for your form, which can be used to call functions.

To create "before" handler, add the following attribute to the form:

Name:



Set attribute's value to the name of your handler (e.g. "addCreatedDate").

To create "after" handler, add the following attribute to the form:

Name:



Set attribute's value to the name of your handler (e.g. "success").

HTML example:

  
<!-- You can use "before" and "after" handlers -->
<form data-eb:db-form="create" data-eb:db-form-before="addCreatedDate" 
 data-eb:db-form-after="success">
 <input type="text" data-eb:db-field="name|value"/>
 <input type="number" data-eb:db-field="price|value"/>

 <button type="submit">Create</button>
</form>

<script>
 function addCreatedDate(doc) {
  doc.created = new Date();
  return doc;
 }

 function success() {
  alert('Document created!');
 }
</script>

初めに

コード埋め込み埋め込み

ログイン機能

フォーム
ボタン
フィールド
コンテンツ表示
ロードスクリーン
Memberstackログイン

Firestore

コレクション
変更監視
Snapshotとno-snapshot
ドキュメント
フィルター
並び順
フィールド
配列
フォーム

eZeeBaseドキュメント

初めに

コードの埋め込み

ログイン機能

フォーム

新規登録

ログイン

更新

必須入力欄

任意更新入力欄

ボタン

新規登録ボタン

ログインボタン

ログアウト

フィールド

要素内のテキスト

Uid

メールアドレス

名前

画像URL

HTML属性

uid

メールアドレス

名前

画像URL

コンテンツ表示

ロードスクリーン

Memberstackログイン

Firestore

コレクション

ドキュメントのリストを表示

特定のドキュメントを表示

ログイン中のユーザーIDのある特定のドキュメントを表示

URLパラメーターからIDを取得して、特定のドキュメントを表示

変更監視

Snapshot and no-snapshot

Snapshot

No-snapshot

Document

Filters

Order

Order by one field

Descending order

Order by two fields

Fields

Inner text

HTML attribute

HTML attribute with variable

Field value from map

Field value from array

Arrays

Display data from array item

Display array item as a map

Editing array

Create array item

Delete array item

Forms

Create

Update

Delete

Form handlers

プライバシー設定

カテゴリ別の許可管理

必須

マーケティング

パーソナライゼーション

分析