vue.jsをlightning containerで連携する(準備編)

記事構成

記事を二部投稿しています。以下の順番で記録しています。
実装編はこちらになります。
実際のコードは[こちら]
(https://github.com/EjiOsa/Container_Connect)になります。

1)当記事のvue.js編

• vue.jsの生成 → 前処理

1. vue.jsプロジェクトを作成。
2. vue.config.jsを作成
3. salesforceとのテスト接続用にプロジェクトを圧縮

2)当記事のsalesforce編　前半部

• salesforceの準備 → テスト接続

1. DeveloperEditionの作成
2. DeveloperEditionの設定
3. Lightning Applicationの作成とvue.jsの表示

3)当記事のsalesforce編　後半部

• Apexの実装

4)実装編記事の前半部

• vue.jsの準備 → 実装

5)実装編記事の後半部

• 仕上げ

vue.jsの生成→前処理

1. vue.jsプロジェクトを作成。

作成方法の詳細は他の方々の記事で詳しく説明されているので割愛します。

vue -V 
3.11.0

vue create salesforce_connect

yarn list vue
vue@2.6.10

今回のプロジェクトでは以下を選択

• Babel
• TypeScript
• Router
• Vuex
• Linter/Formatter
• Use class-style component syntax? Y
• Use Babel alongside TypeScript? Y
• Use history mode for router? n
• Pick a linter / formatter config: TSLint
• Pick additional lint features: Lint on save
• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json

別途、プロジェクトに追加したパッケージ

• vuetify

vue add vuetify

ここは、yarnじゃなくvueです。

で、そのままではsrc/plugins/vuetify.tsでエラーが出ていると思いますので、tsconfig.jsonにvuetifyを追加してあげてください。

tsconfig.json

~~省略~~
"types": [
      "webpack-env",
 +     "vuetify"
    ],
~~省略~~

2. vue.config.jsを作成

上記まででyarn serveすることで、プロジェクトを確認できます。
ですが、yarn buildしてもindex.htmlは真っ白です。

『vue.config.js』という名称でファイルをプロジェクト直下に新規作成します。内容は以下のようにします。

vue.config.js

module.exports = {
    publicPath: './',
    } 

3. salesforceとのテスト接続用にプロジェクトを圧縮

yarn build

これでプロジェクト内にdistフォルダが生成されるので、distまで移動して以下を実行

zip -r vue.zip ./*

移動せずに下記でも圧縮はできますが、下記のようにするとsalesforceで表示されません。必ずdistまで移動して圧縮する必要があります。¹

zip -r vue.zip ./dist/*

以上でvue.jsの準備は終了となります。

salesforceの準備 → テスト接続

1. DeveloperEditionの作成

今回はDeveloperEditionで作成します。
こちら にアクセスしてDeveloperEditionを作成します。
https://developer.salesforce.com/signup

2.DeveloperEditionの設定

以下の2点を設定します。
設定は特にトリッキーでもなかったので、各々のドキュメントを参照してください。

1. 私のドメイン(My Domain)を設定。
   [SalesForce 私のドメイン]
   (https://help.salesforce.com/articleView?id=domain_name_overview.htm&type=5)

2. 静的リソース(Static Resource)に先ほど作成した圧縮ファイルを登録。
   SalesForce 静的リソース

3. Lightning Applicationの作成とvue.jsの表示

開発者コンソール(Developer Console)を開いて、Lightning Applicationを新規作成します。
拡張子が.appで以下のようなコードが入っているファイルが作成されます。

hogehoge.app

<aura:application >
	
</aura:application>

以下のように追記します。
『vuejs』となっている部分は先ほど登録した静的リソースの名前になります。圧縮したファイル名ではありません。

hogehoge.app

<aura:application >
+    <lightning:container src="{! $Resource.vuejs + '/index.html'}"/>
</aura:application>

以上で、Lightning Applicationの右側に表示されているプレビューを押下するとsalesforceドメインでvue.jsが表示されます。

Apexの実装

続けてApexの実装もしてしまいます。Apex Classを新規作成します。
拡張子が.apxcのファイルが生成されると思いますので、以下のようにします。
ファイル名やメソッド名に関しては、次の記事で使用します。

CaseController.apxc

global with sharing class CaseController {
    @RemoteAction
    global static Case[] getCases(Integer limitNum){
        return [SELECT ID, Subject, Type FROM Case Limit :limitNum];
    }
}

ここでは標準オブジェクトを返す単純ばメソッドを実装していますが、global with sharingと@RemoteActionで外部接続の手続きをしています。

以上で終了です。続きはこちらの記事となっています。

1. その節は質問広場では大変お世話になりました。² ↩

2. 質問広場で質問する前に、過去のトピックを検索しようと試みて。虫眼鏡マークを見つけるのに30分ぐらいウロウロしました。あんな中央にあって難易度が高かったです。 ↩