記事構成
記事を二部投稿しています。以下の順番で記録しています。
実装編はこちらになります。
実際のコードはこちらになります。
1)当記事のvue.js編
- vue.jsの生成 → 前処理
- vue.jsプロジェクトを作成。
- vue.config.jsを作成
- salesforceとのテスト接続用にプロジェクトを圧縮
2)当記事のsalesforce編 前半部
- salesforceの準備 → テスト接続
- DeveloperEditionの作成
- DeveloperEditionの設定
- 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を追加してあげてください。
~~省略~~
"types": [
"webpack-env",
+ "vuetify"
],
~~省略~~
2. vue.config.jsを作成
上記まででyarn serveすることで、プロジェクトを確認できます。
ですが、yarn buildしてもindex.htmlは真っ白です。
『vue.config.js』という名称でファイルをプロジェクト直下に新規作成します。内容は以下のようにします。
module.exports = {
publicPath: './',
}
3. salesforceとのテスト接続用にプロジェクトを圧縮
yarn build
これでプロジェクト内にdistフォルダが生成されるので、distまで移動して以下を実行
zip -r vue.zip ./*
移動せずに下記でも圧縮はできますが、下記のようにするとsalesforceで表示されません。必ずdistまで移動して圧縮する必要があります。1
zip -r vue.zip ./dist/*
以上でvue.jsの準備は終了となります。
salesforceの準備 → テスト接続
1. DeveloperEditionの作成
今回はDeveloperEditionで作成します。
こちら にアクセスしてDeveloperEditionを作成します。
https://developer.salesforce.com/signup
2.DeveloperEditionの設定
以下の2点を設定します。
設定は特にトリッキーでもなかったので、各々のドキュメントを参照してください。
私のドメイン(My Domain)を設定。
SalesForce 私のドメイン静的リソース(Static Resource)に先ほど作成した圧縮ファイルを登録。
SalesForce 静的リソース
3. Lightning Applicationの作成とvue.jsの表示
開発者コンソール(Developer Console)を開いて、Lightning Applicationを新規作成します。
拡張子が.appで以下のようなコードが入っているファイルが作成されます。
<aura:application >
</aura:application>
以下のように追記します。
『vuejs』となっている部分は先ほど登録した静的リソースの名前になります。圧縮したファイル名ではありません。
<aura:application >
+ <lightning:container src="{! $Resource.vuejs + '/index.html'}"/>
</aura:application>
以上で、Lightning Applicationの右側に表示されているプレビューを押下するとsalesforceドメインでvue.jsが表示されます。
Apexの実装
続けてApexの実装もしてしまいます。Apex Classを新規作成します。
拡張子が.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で外部接続の手続きをしています。