SFDC：Lightning Web Componentsの開発 - Part 8

Lightning Web Components開発者ガイドの「静的リソース、表示ラベル、Internationalization プロパティ、ユーザ ID、フォーム要素へのアクセス」のところ。Visualforceではこうやってたけど、LWCではどうやるのってなるので重要な内容。

Salesforce リソースへのアクセス | Lightning Web Components 開発者ガイド | Salesforce Developers

静的リソースへのアクセス

静的リソースへのアクセスはjsファイルで「import myResource from "@salesforce/resourceUrl/resourceReference";」というようにインポート処理で読み込めます。読み込み後は指定の変数名で利用できます。

例えば静的リソースの動画ファイルにアクセスしたい場合。次のような宣言となります。

import結果ですが、URL形式で取得できるようです。

サードパーティスクリプトの読み込みのようなZip形式の方はもう少し複雑。import後に変数名+パスを指定する形で、loadScriptとloadStyleを実行します。

Zip形式でも画像ファイルへのアクセスとかはloadScriptみたいな複雑な処理は不要でした。

コンテンツアセットファイルへのアクセス

コンテンツアセットファイルへのアクセスは同じくimportで「@salesforce/contentAssetUrl」を使います。

SVG リソースの使用

SVGの場合は2種類の方法があるとのこと。

SVG リソースを HTML テンプレートに直接追加する

一つはsvgタグを宣言して書く方法。

SVG リソースを静的リソースとしてインポートする

もう一つはSVGリソースを静的リソースにアップして読み込む方法です。

どちらも動作することを確認できました。

表示ラベルへのアクセス

VisualforceやApexのときには、$LabelやSystem.Labelでしたが、LWCでは「import labelName from "@salesforce/label/labelReference";」という感じでインポートして使用します。

importしたあとは、label={}と変数にセットすることで、HTML側で呼び出すことが可能になるようです。

やってみました。import系の処理が増えてきますが慣れるしかなさそう。

国際化

Internationalization プロパティへのアクセスということで、この仕組みを使うとす。Lightning Web コンポーネントには、Internationalization プロパティが用意されています。これらのプロパティを使用すると、コンポーネントを世界中のユーザ、言語、通貨、タイムゾーンに適合させることができるとのことです。後回しで良さそうかな。

現在のユーザに関する情報の取得

覚えないといけない重要な仕様。VisualforceやApexではUserInfoという感じでログインユーザの情報を取得できました。LWCでは「@salesforce/user」をインポートするとのこと。取得できるのはユーザIDとゲストユーザ判定フラグの2種類とのことです。

やってみました。

IDかサイトゲストユーザかの情報が取得できれば後はSOQLクエリ実行するとかで必要な情報を取得すればいいのでやり方把握していれば特に難しいことはない感じ。注意点としては、LWCでは大文字と小文字を識別します。import時のユーザIDは「user/Id」で先頭大文字ですが、ゲストユーザは「/user/isGuest」で先頭は小文字で書かないと認識されません。JS側もHTML側も同じで変数名など大文字小文字を間違えないように注意が必要です。