SkyVisualEditorでJavaScriptを活用する！その３「画面表示時に背景色を指定する」

みなさんこんにちは。

シリーズでSkyVisualEditorのStudio（以後Studio）でのJavaScriptの書き方を解説しております。
その1では、StudioでのJavaScriptの書き方を、その2では、ボタンを押したときに画面上の文字を書き換える方法を説明しました。
過去2回のブログでは、StudioでJavaScriptを記載しましたが、JavaScriptの記述を「ページスクリプト」と「カスタムボタンのプロパティ」とそれぞれ異なるに場所に記載していました。

今回は「ページスクリプト」と「カスタムボタンのプロパティ」の違いについて学び、画面表示時に背景色が指定できるようにしましょう。

次の動画は第一回の「SkyVisualEditorでJavaScriptを活用する！その1「Hello World」」でお見せしたものです。繰り返し見ていると「alertダイアログ」が出ているときに、ブラウザ上にはStudioで作成した画面が消えていることにお気づきでしょうか。

alertが表示される際、下の画面が表示されていない理由はJavaScriptの実行順序が影響しています。JavaScriptは大きく2つのパターンで実行されます。

• 要素の上から順番に処理する
• イベントが実行されたときに処理を実行する

「要素を上から順番に処理する」というのは人が文章を読む際に上から下に読んでいくのと同じで、JavaScriptは「上から順番にプログラムを処理します」
下の図はalertダイアログを表示した際のコードです。先にalert処理が実行され、次に画面上にボタンなどが表示されているのが確認できます。

このようにalert処理は、画面上のボタンや文字などを表現するコードよりも上の方に出力されているため、最初に「alertダイアログ」が表示されます。
そのため、このダイアログを消した後で下の方に記述された要素がブラウザ上に表示されるというわけです。

2つ目の「イベントが実行されたときに処理を実行する」というのは、ブラウザ上でボタンをマウスクリックやテキストにフォーカスを当てる等のイベント操作をした際に実行されるJavaScriptを指します。

その2の「SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」」」で紹介したカスタムボタンのプロパティに記述したJavaScriptがこれに該当し、この場合はクリックしたときに記述した処理を実行しています

JavaScriptのイベント処理の基本を学んだところで、「ページスクリプト」と「カスタムボタンのプロパティ」の違いを学びましょう。
StudioではJavaScriptを記載できる箇所が複数存在しますが、JavaScriptが出力される位置は、下図の通りとなっています。

Studioが自動で出力するコードで、jQueryをはじめとしたライブラリの読み込みなどが記述されています。
コードの最初の方でライブラリの読み込みが自動で出力されるので、ページスクリプトなどでjQueryが利用できるようになっています。

主に、ページを表示するときに処理したいコードを記述します。
また、いろいろなところから処理を呼び出す関数（後述）として利用する場合にも記述します。
※　ページスクリプトに関数を書くことで便利になることがあるのですが、説明すると少し長くなるのでここでは割愛します。

Studioで配置したボタン・入力項目・レイアウトを決めるコンポーネントなど、ブラウザ上で表現するために必要なコードが自動で出力されます。 ここではjQueryなどのライブラリを利用するため、定型的に出力されるコードよりも下に出力されます。

ここで質問です。
その2でご紹介した画面上の文字を操作する処理をページスクリプトに記述した場合、どうなるでしょうか。

答えは、 変わらない です。
上記の動画を見ると「テスト１」の文字はそのまま変わっていないことがわかりますね。
jQueryで要素を操作するには、ブラウザに操作対象となる要素が表示されていることが必要です。
「ページスクリプトに記述したコード」が「Studioで配置したコンポーネントを表現するコード」よりも先に出力されるため、文字を書き換えることができません。

しかし、下記の画面では、画面を表示すると同時に一部の背景色を変えることができています。
JavaScriptでは、コードが出力される順序を変えることはできませんが、処理を実行する順序を変えることができます。
次に、この方法をご説明します。

JavaScriptで要素の文字や背景色などを変えるには、操作対象となる要素が存在している必要があります。例えるなら「食材を切るにも食材がないと切れない」というわけです。よって、ページスクリプト内で要素を操作する場合、その要素がブラウザに読み込まれるのを待つ必要があります。

この要素が表示されてから何からの処理をするために最も簡単なのはjQueryを利用することです。jQueryの記述は簡単で、jQuery(実行する処理);のように書くだけです。ただし、注意点があります。jQueryで実行するためには、実行する処理を１つのまとまりで書く必要があると言うことです。具体的には、function(){実行する処理}(※)のように書きます。

※ functionについて
funcitonとはJavaScriptでは関数と呼ばれており、複数のプログラミング処理をまとめておくときに使います。

例として、ブログのその1やその2で作成した画面をStudioで表示してください。次に、Studioの「ページスクリプトエディタ」を開いて下記のサンプルコードに置き換えてください。

このコードではjQueryの「cssメソッド」を利用しています。これは指定した要素のスタイルを変更させる処理となります。今回は自由テキストの背景色を緑に変えています。 サンプルコードの「Component3」ですが、配置した自由テキストコンポーネントのIDを指定する必要がありますので、こちらはご利用の環境に合わせて書き換えをお願いします。 Studioでは下記のように確認できます。

JavaScriptを記述した後、「OK」を押してページスクリプトエディタを消し、デプロイします。
Salesforceでデプロイした画面を表示すると、以下のようになっていると思います。

最初、alertダイアログが表示されたとき、ブラウザには何も表示されていませんでしたが、今回はalertダイアログが出るよりも先に画面が表示されています。
また、alertダイアログで「OK」を押してダイアログを閉じると、「テスト1」の文字が「書き換えた文字」に代わり背景色も変わったのが確認できます。

これは、「jQuery(function(){実行する処理});」で処理を囲んだことにより、画面が表示されてから処理が実行され、alertダイアログを表示する処理の次に文字の書き換えと背景色の変更の処理を記述しているためです。

まず、JavaScriptには「function(){実行する処理}」を書くと、読み込み時には処理されず、後で「function()」を呼んだときに実行するというルールがあります。
また、ブラウザ上で要素が読み込み終わった後(※)、読み込んだことを知らせるイベントが発生します。このイベントを検知すると「jQuery();」が呼ばれ、中に記述した処理が実行される仕組みになっているため、画面が表示されてから処理が実行できるようになっています。

※　画像やCSSなどの別ファイルの読み込みは完了していないので、これも含めて読み込みが終了している必要がある場合は別の書き方が必要ですが、ここでは割愛します。

今回はJavaScriptの処理について、下記2つのポイントを説明しました。

• JavaScriptは上から順番に処理が実行される
• jQuery(function(){実行する処理});で要素が表示されてから処理させることができる

ここまで、3回のシリーズでStudioにおけるJavaScriptの書き方と処理の仕組みについて説明しました。
記述されたJavaScriptは標準サポートの対象外とはなりますが、アドミンカフェではSkyVisualEditorの標準機能だけで解決できない動きをフォローさせていただきますので、こちらのご利用もご検討ください。

TerraSkyBaseでは、弊社製品だけでなくSalesforceを活用する上で役に立つ情報を発信しております。最新情報をメールでお知らせしておりますので、この機会に登録いただけますと幸いです。

「SkyVisualEditorでJavaScriptを活用する！」シリーズは下記もご参考ください。

• SkyVisualEditorでJavaScriptを活用する！その１「Hello World」
• SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」
• SkyVisualEditorでJavaScriptを活用する！その３「画面表示時に背景色を指定する」（本ブログ）
• SkyVisualEditorでJavaScriptを活用する！その４「表示内容を出し分ける」
• SkyVisualEditorでJavaScriptを活用する！その５「データテーブルで繰り返し処理を実行する」