Salesforce AppExchangeアプリ開発：Hello World編

最近SalesforceのAppExchangeアプリを開発する機会があったので、備忘録として残しておきます。

AppExchangeとは？

SalesforceのAppExchangeは、Salesforceにインストールできるサードパーティアプリが集まるマーケットプレイスです。

AppExchangeの人気アプリ

AppExchangeアプリ開発は誰でも作成できますが、特に自社SaaSとSalesforceを連携させてユーザーに提供したいような場合におすすめです。

開発環境のセットアップ

ローカル環境で開発環境をセットアップすることもできますが、今回は最も簡単な方法であるCode Builderを紹介します。

Code BuilderはSalesforce公式のクラウドベースのVS Code拡張IDEで、Salesforce CLIがデフォルトでインストールされていたり、手軽に開発を始められるので初心者の方にはおすすめです。

Code Builder

Code Builderのセットアップ手順

1. Code Builderを有効化:
   1. Salesforceの「Setup」から「Code Builder」を検索し、有効化します。

      

   Code Builderの有効化

2. Code Builderを起動:
   1. 開発したい組織にログインし、「App Launcher」からCode Builderを選択して起動

      

   Code Builder起動画面

Lightning Web Components (LWC) でHelloWorldを作成

Lightning Web Components (LWC) は、Salesforceが提供するJavaScriptのフレームワークであり、これを開発するとSalesforceの画面に独自コンポーネントを配置することができます。

使い方を見ていきましょう。

1. LWCを作成:
   1. force-app/main/default/lwc というフォルダを右クリックして、Create Lightning Web Componentを選択
   2. コンポーネント名をHelloWorldとします
2. コードを記述
   1. HelloWorld.js

      import { LightningElement } from 'lwc';
      export default class HelloWorld extends LightningElement {
          message = 'Hello, World!';
      }
      

   2. HelloWorld.html

      <template>
          <div>
              <h1>{message}</h1>
          </div>
      </template>
      

   3. HelloWorld.js-meta.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>"
                                fqn="HelloWorld">
          <apiVersion>58.0</apiVersion>
          <isExposed>true</isExposed>
          <targets>
              <target>lightning__AppPage</target>
              <target>lightning__RecordPage</target>
              <target>lightning__HomePage</target>
          </targets>
      </LightningComponentBundle>
      

3. デプロイ:
   1. Code Builder内で、force-appディレクトリを選択し、右クリックして「SFDX: Deploy Source to Org」を実行。

Lightning App BuilderでHelloWorldを組み込む

アプリをデプロイすると、組織内でカスタムコンポーネントを組み込めるようになります。

組み込み方法はいくつかありますが、今回は Lightning App Builder を使って組み込んでみましょう。

1. Lightning App Builderを開く:
   1. Salesforce組織で「ホーム」右上の歯車アイコンから「このページを編集」を開く

      

   Lightning App Builder

2. HelloWorldコンポーネントを追加:
   1. 左側のコンポーネントリスト「Custom Components」に「HelloWorld」が表示されているはずです
   2. ドラッグ＆ドロップでページに配置します
3. プレビューと保存:
   1. 「保存」をクリックし、「アクティブ化」を選択
   2. ページをプレビューして「Hello, World」が表示されることを確認

      

まとめ

このガイドでは、Lightning Web Componentsを使った基本的な開発プロセスと、AppExchangeアプリの最初のステップを学びました。

AppExchangeアプリをリリースする部分ところはまた別の記事で書けたらなと思っています！