モジュール開発

新規モジュールの作成

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

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

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

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

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

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

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

モジュールの開発

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

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

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

manifest.json

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

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

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

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

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

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

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

String

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

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

Number

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

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

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です。

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です。

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）」トグルがあります。

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

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

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

モジュールのデプロイ

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

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

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

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

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

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

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

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

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

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

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

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

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