AppExchangeアプリ開発/運用Tips

[2020年版8月版]おすすめのAppExchangeアプリ開発方法〜プロジェクト雛形作成編〜

Salesforce DXを使った今おすすめのAppExchangeアプリ開発方法を解説する連載記事の最終回です。読んでいない方は概要編、事前準備編からお読みいただいた方がわかりやすいかと思います。

最終回のコード雛形作成編では、実際のソースコードの雛形を作っていきます。最終的に空っぽですが、パッケージがCUIから作成できるようになります。

作成するのは毎回表示しているこの図のソースコードリポジトリに入れるコードになります。AppExchangeアプリで必ず必要になる以下のような内容のプロジェクトの雛形を作っていきます。

  • 管理パッケージと開発用コードを分けたSFDXプロジェクト
  • パッケージに入れいるのは空の権限セット一つ
  • スクラッチ組織を作るnpmスクリプト
  • ベータパッケージを作成するnpmスクリプト
  • テスト組織を作成するnpmスクリプト

今回はこの雛形をゼロから作る手順を説明していきます。その方が応用が効くのではないかと思いますので。

参考: Salesforce CLI のインストール | Salesforce DX 設定ガイド | Salesforce Developers

雛形作成手順

0. 事前準備

今回の作業は全てローカルPC上で行います。

  • Salesforce CLIをインストールします。
  • Node.js v14の最新版をインストールします。

1. SFDXプロジェクトを作成

作成したいプロジェクトのディレクトリ名とパッケージ開発組織の名前空間を指定して以下のコマンドを実行します。

sfdx force:project:create -n <ディレクトリ名> -s <名前空間> -p sfdx-src

各オプションは以下のような設定です。

  -n, --projectname=projectname
      (required) name of the generated project

  -p, --defaultpackagedir=defaultpackagedir
      [default: force-app] default package directory name

  -s, --namespace=namespace
      project associated namespace

実行すると以下のようなディレクトリ構成になります。

npm install を実行して開発ツールをインストールします。

このディレクトリをgitで管理していくので、 git init もしておきましょう。

2. AppExchageアプリ用に設定変更

この時点ではソースコードを入れるディレクトリは１つだけになっています。しかし、AppExchangeアプリの開発では管理パッケージに入れるコードのディレクトリと管理パッケージに入れないコードのディレクトリで分けると開発がしやすいので、ディレクトリを分けていきます。

現在は sfdx-src/main/default というディレクトリがあると思いますが、これを以下の構成に変更します。

ディレクトリの中身は両方とも元の sfdx-src/main/default と同じにしてください。

sfdx-project.json の packageDirectories を以下のように修正します。

  "packageDirectories": [
    {
      "path": "sfdx-src/managed"
    },
    {
      "path": "sfdx-src/unmanaged",
      "default": true
    }
  ],

unmanaged を default:true にしていますが、これはスクラッチ組織からsource:pullしたときにunmanagedに取得されることを意味します。これは間違ったリソースを managed に入れてしまうことを防ぐための設定です。

3. 権限セットを追加

ほぼすべてのAppExchangeアプリで権限セットを１つは使うので、権限セットも追加してしまいます。後ほど作るスクラッチ組織では自動的に権限セットを付与するようにします。

sfdx-src/managed/main/default/permissionsets に AdminUser.permissionset-meta.xml を以下の内容で作成します。 ＜アプリケーション名＞ は書き換えてください。

<?xml version="1.0" encoding="UTF-8"?>
<PermissionSet xmlns="http://soap.sforce.com/2006/04/metadata">
    <hasActivationRequired>false</hasActivationRequired>
    <label>＜アプリケーション名＞管理ユーザ</label>
</PermissionSet>

4. npmスクリプトの追加

ここからこのAppExchangeアプリ開発方法の場合に必ず使う以下の３種類のnpmスクリプトを追加していきます。

  • スクラッチ組織作成
  • パッケージ作成
  • テスト組織作成

なお、スクリプトはMacを想定して書いています。Windowsの場合は以下の２点を修正すれば大丈夫だと思います。1

  • ${npm_package_name} のように環境変数を参照しているところは %npm_package_name% に書き換える。
  • rm -rf は rd /s /q に書き換える。

スクラッチ組織作成スクリプト追加

package.json の scripts の末尾に以下のスクリプトを追加します。

    "setup": "npm run org:create && npm run deploy && npm run permset:assign",
    "setupd": "npm run org:delete && npm run setup",

    "org:create": "sfdx force:org:create -f ./config/project-scratch-def.json -s -a ${npm_package_name}-SCRATCH -d 30",
    "org:delete": "sfdx force:org:delete -u ${npm_package_name}-SCRATCH -p",
    "deploy": "sfdx force:source:push",
    "permset:assign": "sfdx force:user:permset:assign -n AdminUser -u ${npm_package_name}-SCRATCH"

このスクリプトを追加することで、 npm run setup と npm run setupd が実行できるようになります。

npm run setup

開発用のスクラッチ組織を作成します。このスクリプトで以下の処理を行います。

  1. <パッケージ名>-SCRATCH というエイリアスでスクラッチ組織を作成
  2. ソースコードのデプロイ
  3. システム管理者に AdminUser 権限セットの付与

npm run setupd

スクラッチ組織を削除してから setup を行います。

パッケージ作成スクリプト追加

package.json の description の次の行に以下を追加します。
<パッケージ名>と<パッケージID>は事前準備編においてパッケージ開発組織で作成した空のパッケージのパッケージ名とパッケージIDを設定してください。

  "config": {
    "packagename": "<パッケージ名>",
    "packageid": "<パッケージID>"
  },

package.json の scripts の末尾に以下のスクリプトを追加します。

    "loginp": "npm run login:package",
    "package": "npm run source:convert && npm run mdapi:deploy && npm run package1:create",

    "login:package": "sfdx force:auth:web:login -a ${npm_package_name}-PACKAGE",
    "source:convert": "rm -rf ./mdapi-src/managed && sfdx force:source:convert -d ./mdapi-src/managed -n ${npm_package_config_packagename} -r ./sfdx-src/managed",
    "mdapi:deploy": "sfdx force:mdapi:deploy -d ./mdapi-src/managed -l NoTestRun -u ${npm_package_name}-PACKAGE -w 15",
    "package1:create": "sfdx force:package1:version:create --packageid ${npm_package_config_packageid} --name \"${npm_package_config_packagename}\" -u ${npm_package_name}-PACKAGE -w 15"

このスクリプトを追加することで、 npm run loginp と npm run package が実行できるようになります。

npm run loginp

パッケージ開発組織にログイン。次の package コマンドの事前準備です。

npm run package

ベータパッケージを作成します。

テスト組織作成スクリプト追加

config ディレクトリの下に test-scratch-def.json を以下の内容で作成します。Enterprise Editionのテスト組織を作成するための設定です。

{
  "orgName": "<アプリケーション名>テスト組織",
  "edition": "Enterprise",
  "settings": {
    "lightningExperienceSettings": {
        "enableS1DesktopEnabled": true
    },
    "securitySettings": {
      "enableAdminLoginAsAnyUser": true
    }
  }
}

package.json の scripts の末尾に以下のスクリプトを追加します。

    "demo:create": "sfdx force:org:create -f ./config/test-scratch-def.json -a ${npm_package_name}-TEST -n -d 30",
    "package1:list": "sfdx force:package1:version:list -u ${npm_package_name}-PACKAGE",
    "demo:install": "sfdx force:package:install -p $PACKAGE_VERSION_ID -u ${npm_package_name}-TEST -w 15"

このスクリプトを追加することで、 npm run demo:create と npm run package1:list と npm run demo:install が実行できるようになります。テスト組織と言いながら test はnpmスクリプトで予約語なので demo という単語を使っています。

npm run demo:create

Enterprise Editionの組織を作成します。

npm run package1:list

作成済みのパッケージ一覧を表示します。

npm run demo:install

テスト組織に指定したパッケージをインストールします。
実際使うときはpackage1:listで取得したパッケージIDを環境変数で指定して、PACKAGE_VERSION_ID=XXXXX npm run demo:installのように実行します。

5. 完了

これで雛形は完成です。
npmスクリプトは状況に応じて修正してください。おそらく権限セットをさらに追加したい、初期データを入れたい、Apexで初期化処理を行いたいといった要望が開発を進めていくと出てくると思います。

実際の開発の流れ

概要編の説明を再度掲載します。開発の流れは以下のようになっていました。

① DevHub組織にログインし、名前空間付きスクラッチ組織を作成
② 各開発者はソースコードリポジトリとコードを同期しながらスクラッチ組織を使って開発
③ パッケージ開発組織にコードをデプロイ
④ パッケージ開発組織でパッケージを作成
⑤ テスト組織にパッケージをインストール
⑥ AppExchangeにパッケージを公開
⑦ 顧客がAppExchangeから自組織にパッケージをインストール

先ほど作成したプロジェクト雛形で①〜⑤までができるようになりました。実際に試してみましょう。

① DevHub組織にログインし、名前空間付きスクラッチ組織を作成

名前空間を登録したDevHub組織に接続します。
以下のコマンドは一度実行するだけでよいです。

$ sfdx force:auth:web:login -d -a <DevHub組織のエイリアス名>

npmパッケージのインストールします。これも一度だけで問題ありません。

$ npm install

スクラッチ組織を作成します。有効期限を30日にしているので30日後に再度実行する必要があります。

$ npm run setup

② 各開発者はソースコードリポジトリとコードを同期しながらスクラッチ組織を使って開発

Salesforce Extension Packを入れたVS Codeを使ってスクラッチ組織とローカルを同期しながら開発していきます。

実際の開発方法については、Salesforce Extensions for Visual Studio CodeやTrailheadなどをご覧ください。

③④ パッケージ開発組織にコードをデプロイし、パッケージ作成

③④は1つのコマンドになっています。

パッケージ開発組織にログインします。以下のコマンドを実行するとブラウザでログイン画面が表示されるので、パッケージ開発組織のアカウントでログインします。
この操作は一度だけでよいです。

$ npm run loginp

以下のコマンドを実行するとパッケージ開発組織にソースをデプロイし、ベータパッケージを作成します。

$ npm run package

⑤ テスト組織にパッケージをインストール

パッケージインストール用のテスト組織を作成します。
以下のコマンドでEnterprise Editionの名前空間なしの組織が作成されます。
30日間有効なスクラッチ組織なので30日間は再作成しなくても大丈夫です。

$ npm run demo:create

パッケージ一覧を取得します。
次のコマンドで使用するパッケージIDを取得します。

$ npm run package1:list
MetadataPackageVersionId  MetadataPackageId   Name               Version  ReleaseState  BuildNumber
────────────────────────  ──────────────────  ─────────────────  ───────  ────────────  ───────────
04t10000000XXXXXXX        03310000000XXXXXXX  AppName            1.0.0    Beta          1
04t10000000XXXXXXX        03310000000XXXXXXX  AppName            1.0.0    Beta          2

パッケージをテスト組織にインストールします。
上のコマンドで取得したパッケージ一覧からインストールしたいパッケージバージョンIDを環境変数で指定して以下のようにコマンドを実行します。

$ PACKAGE_VERSION_ID=04t10000000XXXXXXX npm run demo:install

①〜⑤を繰り返し

①〜⑤またはその一部を繰り返して開発を進めていきます。

おわりに

さて以上でおすすめのAppExchangeアプリ開発方法３部作完結となります。いかがでしたでしょうか？
なかなかSalesforceの公式ドキュメントからこの方法に辿り着くのは骨が折れると思いますので、弊社で行っている開発方法をまとめてみました。AppExchangeアプリを開発しようとされている皆様のお役に立てば幸いです。

株式会社co-meetingでは、顧問SalesforceプログラマとしてAppExchangeアプリ開発をお手伝いしております。AppExchangeアプリを開発したい企業様はぜひご連絡ください。

  1. Windowsでの動作は未確認です。 クロスプラットフォーム対応も可能ですが、複雑になるのでここでは説明しません。 ↩

ABOUT US
木村篤彦
株式会社co-meeting代表取締役CEO。カレンダーアプリ「Calsket」のなど複数のAppExchangeアプリを開発。顧問Salesforceプログラマとして他社のAppExchangeアプリ開発にも携わる。SWTT登壇3回、Salesforceハックチャレンジ2014最優秀賞。個人では5月にSOQL構築ツール「LWC SOQL Builder」をリリース（ぜひ使ってください）。