カスタムページの開発

JAKA約3分

カスタムページの開発

このページは、開発者がカスタムページ機能を備えた AddOn パッケージを開発する方法を理解するためのガイドです。

ご注意：

本章は入門チュートリアルであり、主な目的は開発者がカスタムページの基礎知識と基本的な開発プロセスを理解することです。

具体的なアプリケーション機能を持ち、特定の作業シナリオに適用される AddOn カスタムページパッケージの開発方法については、後続の完全なケース章を参照してください。

カスタムページについて

カスタムページとは何か

カスタムページとは、開発者が自身のニーズに応じて、Web 開発規範に従い、JAKA App 内に既に存在するページ以外の新しいページを開発したものを指します。

カスタムページの役割

実際の利用シーンでは、異なるアプリ間を行き来したり、JAKA App の異なるページ間を切り替えたり、進行中の作業を停止してサードパーティ機器をデバッグしたりする必要がある場合があります。そのため、作業リズムや効率に影響を与える可能性があります。

AddOn のカスタムページを使用すれば、異なる制御コンポーネントや情報コンポーネントなどを組み合わせ、「行き来の切り替え」という問題をカスタムページ内で解決することができます。

現在、カスタムページを作成するには 2 つの方法を提供しています。 1つ目の方法は、Node-RED の dashboard（ローコード UI モジュール）に基づいてページを生成する方法です。この方法の利点は簡単かつ迅速に作成できることであり、豊富な機能コンポーネントを提供していますが、複雑なロジックやデザインを持つページは作成できません。 2つ目の方法は、フロントエンドの標準プロジェクト形式で開発・デプロイする方法で、より複雑なページを作成することが可能です。この例では、2つの方法それぞれを使用してカスタムページタイプの AddOn を作成します。この AddOn の機能は、ページ上に「Hello JAKA!」を表示することです。

方法1：dashboard モジュールの使用

**dashboard モジュールの紹介： **このモジュールは Node-RED 内で一連のノードを提供し、リアルタイムデータやコントロールパネルを迅速に作成するために使用されます。この後のチュートリアルでは、このモジュールの基礎知識について詳しくは扱いません。詳しくは公式ドキュメント「node-red-dashboardopen in new window」や、オンライン上のサードパーティチュートリアルをご参照ください。

**ステップ1：AddOn フォルダーの作成 ** まず、AddOn の基本フォルダーを作成する必要があります。このフォルダーには .ini 形式の設定ファイルと Node-RED のフローファイルが含まれている必要があります。このファイルを AddOn.json と名付けます。

最初から手動で作成してもよいですし、AddOn 開発パッケージリポジトリ内の「Template」open in new windowディレクトリにある AddOn テンプレートを使用して修正することもできます。

ディレクトリ構造

|—JAKA_UI |—AddOn.json |—JAKA_UI_config.ini

**JAKA_UI_config.ini ** 設定ファイルの内容は以下の通りです：

[AddOnInfo]
convention = 3.0
name = JAKA_UI
description = "ページ上に「Hello JAKA!」を表示"
version = 1.0
type = 3
portal = 10006
url = http://localhost/ui
languagetype = node-red
service = AddOn.json
serviceenabled = 0

ステップ2：パッケージ化とアップロード

次に、ステップ1で作成したフォルダーをパッケージ化し、コントローラーにアップロードします。パッケージ形式は .tar.gz である必要があります。

Windows では、7z などの圧縮ツールを使用して二重圧縮を行うことができます。

アプリ内のアドオン管理ページで AddOn をアップロードします。

ステップ3：dashboard コンポーネントを使用して UI ページを生成

アップロードが完了し AddOn が実行された後、ブラウザーのアドレスバーに現在のロボットの IP アドレス + ":" + AddOn が動作しているポート番号を入力すると、AddOn の node-red 開発ページにアクセスできます。

開発ページに入ったら、左側で dashboard ディレクトリを見つけ、ページ上に「Hello JAKA!」という文字を表示する text ノードを使用します。

上記の手順に従って設定が完了したら、「デプロイ」をクリックします。デプロイが完了したら、ブラウザーのアドレスバーに現在のロボットの IP アドレス + ":" + AddOn のポート番号 + '/ui' を入力すると、AddOn の UI ページにアクセスできます。

ヒント

現在、この方法で作成した UI ページはブラウザーでのみアクセス可能であり、アプリ内の地球ボタンからはアクセスできません。今後、設定ファイルの解析方法を改良し、アプリ内の地球ボタンからもアクセスできるようにする予定です。

まとめ

ここまでで、Node-Red コンポーネントに入る方法と、Dashboard コンポーネントノードを見つける方法を理解しました。その後、text ノードを使用して文字を表示し、ブラウザーから正常にアクセスすることができました。この後、高度なチュートリアル「JAKA Dashboard テンプレートの使用」を読み、事前に用意された Dashboard コンポーネントの使い方やカスタマイズ方法を理解することができます。

方法2：標準的なフロントエンドプロジェクト

ステップ1：AddOn フォルダーを作成する

まず、AddOn の基本フォルダーを作成する必要があります。このフォルダーには .ini 形式の設定ファイルとフロントエンドプロジェクトのファイルが含まれている必要があります。フロントエンドプロジェクトのフォルダー名には client を使用することをお勧めします。

ディレクトリ構造

**index.html **

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>こんにちはJAKA！</title>
    </head>
    <body style="background-color:#f5f6fa;">
        <p style="font-size: 10vh;text-align: center;margin-top: 20%;"> こんにちは JAKA！</p>
    </body>
    </html>

**JAKA_Web_config.ini ** 設定ファイルの内容は以下の通りです：

[AddOnInfo]
convention = 3.0
name = AKA_Web
description = "ページ上に「Hello JAKA!」を表示"
version = 1.0
type = 3
portal = 10006
url = http://localhost/JAKA_Web/client/
languagetype = node-red
service = null
serviceenabled = 0

URL設定

アプリは URL 内の「localhost」フィールドを自動解析し、それを「ロボットの IP アドレス/addon」に置き換えます。
「ロボットの IP アドレス/addon」というパスは、AddOn パッケージの一つ上のディレクトリにナビゲートされます。
エントリーファイルが index.html でない場合は、http://localhost/JAKA_Web/client/myWeb.html のように完全なパスを使用してください。

ステップ2：パッケージ化とアップロード

Windows では、7z などの圧縮ツールを使用して二重圧縮を行うことができます。

アプリ内のアドオン管理ページで AddOn をアップロードします。

ステップ3：ページへアクセス

以下では、以前作成したページにアクセスする2つの方法を紹介します。

方法1：アドオン内で JAKA_Web を見つけて、小さな地球アイコンをクリックして AddOn 内のページにアクセスします。

方法2：ブラウザで http://172.30.2.216/addon/4.3-JAKA_Web/client/ を入力し、リンク内のIPを現在のロボットのIPに置き換えます。

互換性

カスタムページを開発する際は、ターゲットブラウザのバージョンに注意し、バージョンによる非互換が発生しないようにしてください。

JAKA アプリでカスタムページを表示するために使用されている WebView プラグインのブラウザエンジンは Chromium:74.0.3729.157 です。