メインコンテンツへスキップ

モジュール開発

新規モジュールの作成

モジュールでは、モジュール化されたアセット、ファイル、コードを追加し、バージョン管理システムでプロジェクト にインポートすることができます。 これにより、プロジェクトコードを主要な差別化要因に集中させることができ、作成したモジュールによって共通の機能を簡単にインポートすることができます。

ワークスペースに新しいモジュールを作成する:

  1. ワークスペースのダッシュボードから、「モジュール」タブをクリックします:

ModulesTab

  1. ワークスペースダッシュボードの "モジュール "タブから、"新規モジュールの作成 "をクリックします。

ModulesTab

また、プロジェクトのコンテキスト内で、新しいモジュールを直接作成することもできます。 Cloud EditorのModulesの隣にある「+」ボタンを押します。 そして「モジュールの作成」をクリックし、以下の指示に従います。

  1. モジュールの基本情報を入力します:モジュールID(このIDはワークスペース urlに表示され、プロジェクトコードでモジュールを参照するために使用することができます)、およびモジュールタイトルを入力してください。 モジュールタイトルは、後でモジュール設定ページで編集することができます。

  2. モジュールを作成すると、Cloud Editor内のmodule.jsファイルが表示されます。 ここから、モジュールの開発を始めることができます。 モジュール開発の詳細は、「モジュールの開発」セクションを参照してください。

モジュールの開発

モジュール開発は、プロジェクト開発とは少し違います。 モジュールは単独で実行することはできず、プロジェクトにインポートした後にのみ実行することができます。 モジュールは、Cloud Editorのモジュール固有のビュー、またはプロジェクトのコンテキスト内で開発することができます。 モジュールは、開発されたワークスペースでのみ、 利用可能です。

モジュールをプロジェクトにインポートしたときにのみプレビューできるため、モジュール固有のビューでモジュールを開発する場合、Cloud Editorの トップナビゲーションに「プレビュー」ボタンは表示されません。

モジュールの主な構成要素は以下の通りです:

manifest.json

manifest.json 内に、モジュールをプロジェクトにインポートする際にビジュアルコンフィギュレーターで編集可能なパラメータを作成することができます。 module.jsコードは、モジュールマニフェストで利用可能にしたパラメータをサブスクライブし、プロジェクトのコンテキスト内でモジュールを構成する際に、ユーザー入力に基づいて動的に変更することができます。

モジュールコンフィグビルダーは、自動的に1つのパラメータグループが利用可能な状態で起動します。 パラメータグループは、プロジェクトでモジュールを使用する際に、パラメータを論理的に分割して表現し、視覚的にグループ化するために使用することができます。

  1. グループ名をダブルクリックすると、コンフィググループの名前を変更できます。
  2. 「新規設定グループ」ボタンを押して、新規グループを追加します。
  3. コンフィググループにパラメータを追加する場合は、「+ New parameter」を押してください。

ModulesConfigBuilder

  1. パラメータを新規に作成する場合は、パラメータに名前を付ける必要があります。 この名前は、モジュールやプロジェクトコードで使用される可能性があるため、スペースや特殊文字を含めないようにする必要があります。
  2. パラメータの種類を選択します。 現在サポートされているパラメータタイプは、 String, Number, Boolean, & Resource.
  3. 選択したら、"次へ"を押してください。

ModulesParameterGroup

** 注意:** コンフィググループやグループ内のパラメーターの順番は、プロジェクト内でモジュールを使用する際に、ユーザーに表示される順番を決定するものです。 グループ内のパラメーターの並び替えや、コンフィググループの並び替えは、ドラッグで簡単に行うことができます。 あるグループから別のグループにパラメータを切り替えるには、パラメータフィールドの矢印アイコンを押して、パラメータを移動させたいグループをドロップダウンから選択します。

モジュールパラメーターの種類とオプション

モジュールのモジュールマニフェストを作成する場合、 String, Number, Boolean, & Resourceなどの異なるパラメータタイプから選択することが可能です。 各パラメータータイプの詳細:

String

文字列パラメータには、以下の編集可能な項目があります:

パラメータフィールドタイプ説明
Label (1)Stringモジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。
Default [Optional] (2)Stringモジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトの文字列値です。 デフォルトは""です。

ModulesParameterString

Number

Numberパラメータには、以下の編集可能なフィールドがあります:

パラメータフィールドタイプ説明
Label (1)Stringモジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。
Default [Optional] (2)Numberモジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトの数値です。 デフォルトは nullです。
Min [Optional] (3)Numberモジュールをプロジェクトにインポートする際に、ユーザーが入力できる最大数値。 デフォルトは nullです。
Max [Optional] (4)Numberモジュールをプロジェクトにインポートする際に、ユーザーが入力できる最小の数値。 デフォルトは nullです。

ModulesParameterNumber

Boolean

Boolean パラメータには、以下の編集可能なフィールドがあります:

パラメータフィールドタイプ概要
Label (1)Stringモジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。
Default [Optional] (2)Booleanモジュールをプロジェクトにインポートする際に、何も指定しなかった場合のデフォルトのブーリアン値です。 デフォルトは falseです。
Trueの場合Label [Optional] (3)Stringモジュールがプロジェクトにインポートされたときに設定UIに表示される、true booleanオプションのラベルです。 デフォルトは true.
Falseの場合Label [Optional] (4)Stringモジュールがプロジェクトにインポートされたときに、設定UIに表示されるfalse booleanオプションのラベルです。 デフォルトは falseです。

ModulesParameterBoolean

Resource

リソースパラメータには、以下の編集可能なフィールドがあります:

パラメータフィールドタイプ説明
Label (1)Stringモジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。
Allow None (2)Booleanモジュールをプロジェクトにインポートする際に、設定UIから明示的にリソースをNULLに設定する機能の有効・無効を設定します。 デフォルトは falseです。
Allowed Asset Extensions [Optional] (3)File Typesモジュールがプロジェクトにインポートされたときに、設定UIに表示される方法で指定されたファイルタイプをアップロードする機能を有効にします。 デフォルトはすべてのファイルタイプです。
Default Resource [Optional] (4)Fileモジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトのリソースです。 デフォルトは nullです。

ModulesParameterResource

module.js

module.js は、8th Wallモジュールのメインエントランスポイントです。 module.js のコードは、プロジェクトがロードされる前に を実行します。 また、他のファイルやアセットを追加して、module.jsの中で参照することもできます。

モジュールは、その目的や開発スタイルによって、大きく異なることがあります。 通常、モジュールは、以下の要素のいくつかを含んでいます:

モジュール設定値のサブスクリプション

import {subscribe} from 'config' // config はモジュールオプションにアクセスする方法です

subscribe((config) => {
// あなたのコードはここで config に何かをします
})

プロジェクトコードで参照されるプロパティをエクスポートする

export {
// プロパティをここにエクスポートする
}.

README.md

モジュールのファイルディレクトリに README.md というファイルを作成するだけで、モジュールにreadmeを含めることができます。 プロジェクトのreadmeと同様に、モジュールのreadmeもマークダウンを使ってフォーマットすることができ、写真やビデオなどのアセットを含めることができます。

注意: モジュールにReadmeがある場合、 バージョンをデプロイするときに、自動的にモジュールと一緒にパッケージ化されます。 この適切なモジュールのreadmeは、プロジェクトで使用されているモジュールのバージョンに応じて、モジュールのコンテキストに表示されます

プロジェクトの文脈の中でモジュールを開発する

ワークスペースが所有するモジュールで、プロジェクトのコンテキスト内で開発モードを有効にするには、モジュール設定ページで「開発モード」(下の画像で赤く表示されている)をオンにします。 開発モードを有効にすると、モジュールの基礎となるコードとファイルが左サイドペインに表示されるようになります。

モジュールがプロジェクトのコンテキスト内で開発モードになっている場合、設定ページに追加オプションが表示されます:モジュールクライアントコントロール(青緑色)、モジュール展開ボタン(ピンク色)、ビジュアル設定ページのコンテンツの編集と設定の使用を切り替えるための「編集モード(Edit mode)」トグルがあります。

ModulesDevelopmentMode

プロジェクトのコンテキスト内でモジュールを開発していて、変更があった場合、クラウドエディターの「変更を放棄・元に戻す」オプションが更新されます。 特定の変更をステージングさせるかどうかを選択することができます。 ステージングさせる変更があるプロジェクトやモジュールは、コードのステージングを完了させる前に、コミットメッセージを追加する必要があります。

ModulesReviewChanges

プロジェクトのコンテキスト内でモジュールを開発しているときに変更があった場合、Cloud Editorの「放棄」 & 「変更を戻す」オプションが更新されます。 プロジェクトの変更のみを放棄/取り消すか、プロジェクトと開発中のモジュールの両方の変更を放棄/取り消すかを選択することができます。

モジュールのデプロイメント

モジュールのデプロイ

モジュールをデプロイすることで、安定版を共有することができ、またプロジェクトがモジュールのアップデートをサブスクライブできるようになります。 これによって、壊れないモジュールの更新を自動的にプロジェクトにプッシュすることができます。

モジュールを初めてデプロイする場合

  1. Cloud Editorのモジュール別ビューから開発する場合は、右上の「Deploy」ボタンを押します。 プロジェクトのコンテキスト内からモジュールを開発する場合、モジュール設定ページの右上にある「Deploy」ボタンを押します。

ModulesDeploy

  1. モジュールのタイトルを確認します。
  2. モジュールのバージョンに応じたコミットを選択します。
  3. リリースノートセクションに初期モジュールの機能の説明を書き出す。 このセクションでは、マークダウン形式で記入できます。
  4. 「次へ」をクリックします。

ModulesDeployInitialVersion

  1. オプションで、モジュールの説明やカバー画像を追加することができます。 モジュールをプロジェクトに取り込む際のモジュールインポートフローで、モジュールの説明とカバー画像が表示されます。 説明とカバー画像を追加することでモジュールを差別化し、ワークスペースの他のメンバーにモジュールの使用に関するコンテキストを共有できます。
  2. 「Deploy」をクリックします。

ModulesDeployInitialVersion2

モジュールのアップデートを展開する

モジュールアップデートの展開は、モジュールの初回展開と同様で、さらに2つの 展開オプションがあります。

  1. Version Type: モジュールのアップデートを展開する際に、アップデートがバグフィックス、新機能、メジャーリリースのいずれであるかを選択する画面が表示されます。
    • バグフィックス: 既存の問題に対するリファクタリングコード & 修正に選択されるべきです。 バグフィックスまたは新機能に登録されたモジュールを持つプロジェクトは、新しいバグフィックスモジュールバージョンが利用可能になると、自動的にアップデートを受け取ります。
    • 新機能:モジュールに壊れない機能を追加した場合に選択する。 新機能に登録されたモジュールを持つプロジェクトは、新機能モジュールの新しいバージョンが利用可能になると、自動的にアップデートを受け取ります。
    • メジャーリリース: 大幅な変更があり、既存モジュールが動かなくなる場合に選択するものです。 モジュールを持つプロジェクトは、メジャーリリースの自動更新を受けません。
  2. プレリリースとして設定する: バージョンタイプを選択した後、そのバージョンをプレリリースとしてマークすることができます。 これは、モジュールのバージョンがプレリリースであることを他のユーザーに通知するためのプレリリースバッジを追加します。バージョンのタイプがバグフィックスまたは新機能である場合、バージョンがプレリリースとしてマークされている間は、プロジェクトは自動アップデートを受け取ることもありません。 プロジェクトにインポートされたモジュールでプレリリースバージョンを使用するには、バージョンの固定対象からプレリリースバージョンを手動で選択します。

ModulesDeployNewVersion

モジュールのプレリリース編集

プレリリースが有効な場合、プレリリースを促進するか、放棄するまで、プレリリース版を更新し続けることができます。

モジュールプレリリースを編集するには

  1. 事前に新しいバージョンをプレリリースとして設定した後、Cloud Editorのモジュール別ビューから開発する場合は、右上の「Deploy」ボタンを押します。 新しいバージョンをプレリリースとして設定した後、プロジェクトのコンテキストからモジュールを開発する場合、モジュール設定ページの右上にある「Deploy」ボタンを押します。

ModulesDeploy2

  1. プレリリースの新しいコミットを選択するか、現在のコミットを維持します。
  2. 「リリースノート」のモジュールバージョン機能の説明を変更する。 このセクションでは、マークダウン形式で記入できます。
  3. プレリリースを標準リリースに変換する準備ができた場合は、「リリースに昇格する」チェックボックスをオンにします。
  4. 「プレリリースを破棄する」を押すと、プレリリースを削除することができます。 プレリリースが現在設定されているものとは異なるバージョンタイプを選択するために使用されます(例:バグフィックスからメジャーリリースに移行し、変更を加える)。 現在プレリリースに固定されているモジュールを持つプロジェクトはサブスクライブされたアップデートを受け取るか、手動で変更されるまで、プレリリースバージョンで実行し続けます。
  5. 「Deploy」ボタンを押すと、編集したプレリリースの変更が利用可能になります(プレリリースを更新するか、チェックボックスが選択されている場合はリリースに昇格します):

ModulesEditPreReleaseDeploy