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

### はじめに
Adaloは、モバイルアプリケーションをノーコードで作成できるプラットフォームです。
この記事では、Adaloのカスタムコンポーネントの開発について説明していきます。
### カスタムコンポーネントとは
カスタムコンポーネントとはAdaloの既存のコンポーネントが提供する機能を超えてアプリケーションに独自の機能を追加するためのものです。
今回はサンプルとして、現在時刻をリアルタイムで表示するカスタムコンポーネントを作成していきます。


# 1. 開発環境の準備
では早速、開発環境の準備から始めていきます。Node.jsとnpmがインストールされていることを確認します。これらはJavaScriptの実行環境とパッケージ管理ツールで、Adaloのカスタムコンポーネント開発に必要です。
以下のコマンドをターミナルで実行して、それぞれのバージョンを確認します。
```
node -v
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/7f4e7eff-f8fa-b7df-fb73-fe45fbc4489f.png)
```
npm -v
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/ad9b1cf8-85fc-f5b0-ac0c-97025a4c0482.png)

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

また、Adalo開発者モードを有効にする必要があります
※Adaloにログインし、右上のアイコンからsettings→Accountタブで変更できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/929288cd-4db8-87b5-83e1-148675046167.png)

# 2. カスタムコンポーネントの作成
create-adalo-componentというツールを使って新しいAdaloライブラリを作成します。
このツールは、必要な依存関係のインストール、開発用のスクリプトの追加、基本的なmanifest.jsonとコンポーネントの作成など、Adaloのカスタムコンポーネント開発の基本環境を設定します。以下のコマンドをターミナルで実行して作成していきます
```
npx create-adalo-component my-component
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/0084096f-4e23-65b9-0a93-2dc22fd43129.png)
※実行すると、ライブラリの名前やコンポーネントの名前なども設定する必要があります
※使用するReactコンポーネントの種類を、FunctionalComponents（関数コンポーネント）、ClassComponents（クラスコンポーネント）の2つから選択する必要があります。実装したい機能に合わせて選択してください。

次に、作成したコンポーネントを起動していきます。
```
cd my-component
```
で作成したコンポーネントに移動し、
```
npx adalo login
```
でログインします
※メールアドレスとパスワードを聞かれるので、Adaloアカウントのメールアドレスとパスワードを入力してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/e02c5adf-1c30-a527-26db-87b7c3146896.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/1de1ab2d-439a-fcd5-d6ca-bd20d79b337d.png)

起動後、Adaloのアプリを開くと、コンポーネントパネルの下部に「Development」という新しいタブが表示され、作成したコンポーネントが表示されたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/2a03518b-f367-98e9-ee9a-605e9863aea8.png)

# 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

```
# 4.カスタムコンポーネントを実行
編集したカスタムコンポーネントを画面に配置し、アプリ上で実行していきます。
今回作成したカスタムコンポーネントのフォルダに移動し、
```
npx adalo dev
```
上記コマンドで起動します。
次に、AdaloのADD COMPONENTの中から、Developmentを展開すると、起動したカスタムコンポーネントが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/2a0584f1-aeb0-8f35-3042-cf0ef74db662.png)
あとは、任意のスクリーンに配置し、作成したカスタムコンポーネントが正しく処理、動作できているか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/65420ae4-79f2-9e66-bd84-dc4a69ed5c2d.png)

最後に、VIEW APPで、実際のアプリ画面でも正しく処理、動作できているか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3731289/669aec54-172c-74c5-ed8d-bbddbe5f780f.png)


今回のサンプル、現在時刻をリアルタイムで表示できているので完成です。
# 最後に
記事は以上になります。これからAdaloカスタムコンポーネント開発をしていく方々の助けになれたら幸いです。
最後まで読んでくださりありがとうございます。