Adalo カスタムコンポーネント開発　手順書

Last updated at 2024-03-04Posted at 2024-03-04

はじめに

Adaloは、モバイルアプリケーションをノーコードで作成できるプラットフォームです。
この記事では、Adaloのカスタムコンポーネントの開発について説明していきます。

カスタムコンポーネントとは

カスタムコンポーネントとはAdaloの既存のコンポーネントが提供する機能を超えてアプリケーションに独自の機能を追加するためのものです。
今回はサンプルとして、現在時刻をリアルタイムで表示するカスタムコンポーネントを作成していきます。

1. 開発環境の準備

では早速、開発環境の準備から始めていきます。Node.jsとnpmがインストールされていることを確認します。これらはJavaScriptの実行環境とパッケージ管理ツールで、Adaloのカスタムコンポーネント開発に必要です。
以下のコマンドをターミナルで実行して、それぞれのバージョンを確認します。

node -v

npm -v

※もしインストールされていない場合、Node.jsのウェブサイトhttps://nodejs.org/en からダウンロード、インストールしてください

また、Adalo開発者モードを有効にする必要があります
※Adaloにログインし、右上のアイコンからsettings→Accountタブで変更できます

2. カスタムコンポーネントの作成

create-adalo-componentというツールを使って新しいAdaloライブラリを作成します。
このツールは、必要な依存関係のインストール、開発用のスクリプトの追加、基本的なmanifest.jsonとコンポーネントの作成など、Adaloのカスタムコンポーネント開発の基本環境を設定します。以下のコマンドをターミナルで実行して作成していきます

npx create-adalo-component my-component

※実行すると、ライブラリの名前やコンポーネントの名前なども設定する必要があります
※使用するReactコンポーネントの種類を、FunctionalComponents（関数コンポーネント）、ClassComponents（クラスコンポーネント）の2つから選択する必要があります。実装したい機能に合わせて選択してください。

次に、作成したコンポーネントを起動していきます。

cd my-component

で作成したコンポーネントに移動し、

npx adalo login

でログインします
※メールアドレスとパスワードを聞かれるので、Adaloアカウントのメールアドレスとパスワードを入力してください

npx adalo dev

ログインに成功したら、上記コマンドでコンポーネントを起動していきます。

起動後、Adaloのアプリを開くと、コンポーネントパネルの下部に「Development」という新しいタブが表示され、作成したコンポーネントが表示されたら成功です。

3. カスタムコンポーネントの編集

では実際に、作成したコンポーネントを編集し、カスタムコンポーネントを作っていきます。
今回はサンプルとして、リアルタイムで現在時刻を表示するカスタムコンポーネントを作成します。

主に編集するファイルは以下の2つです

manifest.json
このファイルは、Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。
アプリケーションまたは拡張機能の基本情報や設定、アイコンなどのリソースの場所を定義します。
・displayName: コンポーネントの表示名です。
・defaultWidthとdefaultHeight: コンポーネントのデフォルトの幅と高さです。
・components: コンポーネントの実装が含まれているファイルへのパスです。
・icon: コンポーネントのアイコン画像へのパスです。
・props: コンポーネントが受け取ることができるpropsのリストです。各propは、名前、表示名、型、デフォルト値を持ちます。

※今回作成したmanifest.json

{
  "displayName": "TestAdaloComponent",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "text",
      "displayName": "Text",
      "type": "text",
      "default": "TestCustomComponent"
    },
    {
      "name": "color",
      "displayName": "Color",
      "type": "color",
      "default": "#00A898"
    }
  ]
}

index.js
このファイルは、アプリケーションの主要な動作を定義するJavaScriptファイルです。Reactコンポーネントとして実装され、Adaloのカスタムコンポーネントの動作を定義します。

※今回作成したindex.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

class TestAdaloComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
		  currentTime: new Date().toLocaleTimeString(),
		};
	  }
	
	  componentDidMount() {
		this.interval = setInterval(() => {
		  this.setState({
			currentTime: new Date().toLocaleTimeString(),
		  });
		}, 1000);
	  }
	
	  componentWillUnmount() {
		clearInterval(this.interval);
	  }
	
	  render() {
		const { color } = this.props;
		const { currentTime } = this.state;
	
		return (
		  <View style={styles.wrapper}>
			<Text style={{ color }}>{currentTime}</Text>
		  </View>
		);
	  }
	}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
	}
})

export default TestAdaloComponent