Docker内でAdaloのカスタムコンポーネントを作成

2022年11月22日

目的

  • Linux+VSCode+Dev containersでAdaloのカスタムコンポーネントを作成したい

環境

  • OS: Windows 11 Home上のUbuntu(WSL2)
  • Docker 20.10.20

手順

前提

環境構築

  1. WSLウインドウを開く
  2. Terminalなどからプロジェクトのトップとするディレクトリを作成し、そこに移動
    • ディレクトリの名前と場所は基本的にどこでもいい
    • Terminalでホームディレクトリにadaloというフォルダを作成し、それをプロジェクトのトップにする場合、下記のコマンドで可能
      $ cd
      $ mkdir adalo
      $ cd adalo
  3. VSCode上で2.で作成したフォルダを開く
    • 左側の「Explorer」のアイコンをクリック
    • 「Open Floder」をクリック
    • 作成したフォルダを選択
    • 「OK」をクリック
  4. VSCodeの拡張機能「Dev Containers」をインストール
    • VSCodeのウインドウ左側のExtension(拡張機能)のアイコンをクリック
    • 検索ボックスに「dev con」と入力し、下記のExtensionをインストールする
  5. Dev Containers用のConfiguration Fileを作成する
    • 左下の「><WSL: Ubuntu」をクリック
    • Add Dev Container Configuration Files …をクリック
    • Alpineを選択
    • (default)のバージョンを選択
    • .devcontainerフォルダが作成され、devcontainer.jsonとDockerfileが自動作成される
  6. devcontainer.jsonを下記の内容にすべて書き換え
    {
    "name": "React Native Android Container",
    // Sets the run context to one level up instead of the .devcontainer folder.
    "context": "..",
    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
    "dockerFile": "Dockerfile",
    // The optional 'runArgs' property can be used to specify additional runtime arguments.
    "runArgs": [
    "--privileged", // give all capabilities to a container, in other words, the container can then do almost everything that the host can do
    "--net",
    "host", // forwarding all host machine ports
    "-v",
    "/dev/bus/usb:/dev/bus/usb" // mount connected USB devices to a container
    ],
        "settings": {
          // This will ignore your local shell user setting for Linux since shells like zsh are typically
          // not in base container images. You can also update this to an specific shell to ensure VS Code
          // uses the right one for terminals and tasks. For example, /bin/bash (or /bin/ash for Alpine).
          "terminal.integrated.shell.linux": null
        },
        // Add the IDs of extensions you want installed when the container is created in the array below.
        "extensions": ["msjsdiag.vscode-react-native"]
      }
  7. Dockerfileを下記の内容にすべて書き換え
    FROM reactnativecommunity/react-native-android:latest
    RUN npm install -g expo-cli react-native-cli
  8. コンテナをビルドして環境を移動
    • 左下の「><WSL: Ubuntu」をクリック
    • Open Folder in Containerをクリック
    • 新しいウインドウが開きContainerのビルドが始まる
      • 初回は時間がかかる
      • エラーが出て失敗する場合は、再度左下の「><WSL: Ubuntu」をクリックし、Reopen in Containerをクリックしてみる(たまにこれで解決する)
  9. ビルドが完了したら、VSCodeの拡張機能「Preview.js」をインストール
    • VSCodeのウインドウ左側のExtension(拡張機能)のアイコンをクリック
    • 検索ボックスに「Preview.js」と入力し、下記のExtensionをインストールする

Adaloコンポーネントを作成

  • 以降、前節でビルドしたContainerを参照しているVSCodeのウィンドウでの作業
  • 左下が「>< Dev Container: React Native Android Cont…」となっていればOK
  1. VSCodeのTerminalで、下記のコマンドを実行
    $ npx create-adalo-component <my-component>
    • <my-component>の部分は好きなコンポーネント名(ここでいうコンポーネントは、Reactコンポーネント)を設定できる
    • この名前のフォルダがワーキングディレクトリに作成される
    • コマンドを実行後、下記のように設定項目を聞かれる
      • What is the name of your Adalo Library? : Adaloライブラリ名。次節のpublish後、コンポーネントをAdaloで使うために、このライブラリ名をAdaloプロジェクトにインポートする。
      • What is the name of your Adalo Component? : Adaloコンポーネント名。Adalo上でこのコンポーネント名を選ぶ。以降の手順ではAdaloComponentと設定したと想定。
      • Which type of React component would you like to use? : React Nativeのコンポーネントの記述方式をFunctionalかClassから選ぶ。迷ったらFunctinoalでよい。以降の手順でもFunctionalを選択した場合を想定。
      • Would you like to use Yarn as your package manager? : パッケージマネージャにyarnを使うかどうか。特に理由がなければyesでよい。以降の手順でもyesにした場合を想定。
  2. AdaloにTerminalからログイン
    • 1. のコマンドを実行したときに出るメッセージの通り、下記のコマンドを実行
      $ cd <my-component>
      $ yarn login
    • Adaloに登録しているemailアドレスとパスワードでログインする
  3. コンポーネントを開発する
    • 基本的には、<my-compnent>/src/components/AdaloComponent/index.jsをいろいろカスタマイズする
    • 前節9. でPreview.jsをインストールしている場合、ソースのReactコンポーネント上にOpen ComponentName in Preview.jsというリンクが自動で出る。それをクリックすればVSCode上でコンポーネントがリアルタイムで描画されるためデバッグしやすい。

Adalo上で使えるようにする(publish)

  1. <my-component>/adalo.json"author""description"の値がデフォルトでは空の文字列に設定されているため、これらに文字列を設定する(空のままだと2. ができない)
  2. VSCodeのTerminalで、下記のコマンドを実行
    $ npx adalo publish
    • コマンド実行後、下記のことを聞かれる
      • Is your library public or private? : Marketplace全体に公開する(public)か自分だけ使う(private)かの設定。以降ではprivateに設定したと想定。
      • Link to demo app (optional): 現時点で詳細不明(後日調査するかも)。とりあえずEnterで次に進めた。
  3. ブラウザからAdaloにログインし、右上の自分のアイコンをクリック、Developerをクリック
  4. My librariesタブの中のPrivateに1. で設定したAdaloライブラリがあることを確認し、三点メニューからTeamにAddする
  5. App編集画面からADD COMPONENTタブを選択すると、Privateメニュー内に1. で設定したAdaloコンポーネント名があり、Appに追加することができる

参考にしたサイト