Salesforceで JavaScriptを使用する報告をご紹介します

SalesforceでJavaScriptを使用するには？

SalesforceでJavaScriptを使用するとUIのアニメーションの設定やエラー処理等様々なことができます。UIのアニメーションを行う場合は、jQueryというライブラリを使う事をオススメします。エラー処理を行う際も同様になります。具体的な理由は下記に記載させていただきます。

オススメJavaScriptライブラリのjQueryについて

jQueryも様々な種類があります。UIの設定を行うプラグイン・エラー処理を行うプラグインサーバー関係のプラグイン等様々なプラグインがあります。特にweb制作を行う際に、UIの設定を行うライブラリを使う事が多々あります。その中でもweb制作で特に使うプラグインの紹介を行います。

• モーダルウィンドウを作る「jQuery Modal」
• スライドショーを設置する「slick」
• カレンダーを実装する「Calendar.js」
• パララックス効果を実装する「Skrollr」
• スクロール時にフェードイン・アウトさせる「FadeThis」

モーダルウィンドウを作る「jQuery Modal」について

jQuery Modalは、モーダルウィンドウを作るプラグインになります。モーダルウィンドウとはボタンを押すとポップアップする画面のことを指します。主に設定画面やエラー時のウィンドウや何かの処理完了等、様々な箇所で使用されます。特に設定画面は、その画面内で設定したformで設定内容をDBにPOSTすることも可能です。DBにPOSTする場合は、テーブル内のカラム作成と型と大きさの把握が必要です。 Salsesforceでモーダルウィンドウを使用する場合は、企業のPRで使用するといいでしょう。例えば、企業のPRボタンをクリックすると企業の具体的なPR情報が掲載しているポップアップウィンドウが出てくるといった処理に使うと集客効果や企業の事を知ってもらえます。企業のPRをするといった事は、経営戦略的に必須となります。その際にweb内にモーダルウィンドウの使用は、有効な手段となります。

スライドショーを設置する「slick」について

slickは、スライドショーを作るプラグインになります。スライドショーは、自動でスライドする物・ボタンによりスライドする物・アニメーションでスライドする物等様々なスライドショーがあります。その際にJavaScriptでコードを書くと複雑なコードになり可読性が下がるコードになります。そのような事を防いだり、簡単に実装する際にオススメのプラグインがslickになります。 何故slickを使用するのか具体的な理由を記載します。slickは比較的人気なjQueryプラグインになります。その理由はコードが簡単になり、実装がしやすく何より軽いといった事が要因です。やはりwebサイトやシステムを開発するとなると、動きの軽いユーザビリティの高い成果物を作らなければ意味がありません。エンドユーザーに、使いやすい物を提供するのは、開発者の義務です。 Salesforceでslickを使う場合は、バナーのスライドショーを実装すると目に止まり見てもらえる可能性が上がります。直接的な売り上げに繋がったり、他社との繋がりになったりする場合があります。例えば、バナーでキャンペーンの告知をスライドショーで行う事で、どういったキャンペーンをしているか一目でわかります。様々なwebサイト上で確認するとキャンペーンでスライドショーがよく使われています。

カレンダーを実装する「Calendar.js」について

Calendar.jsは、カレンダーを実装するjQueryプラグインになります。もしJavaScriptでカレンダーの処理を実装となると冗長なコードになる場合が多々あります。そうする事を防ぐために簡単なコードでカレンダーを実装する事ができるCalendar.jsは、使用しやすくカレンダー実装時には有効なjQueryプラグインと言えます。また応用すると予約システムも開発できます。 SalseforceでCalendar.jsを使用する際は、スケジュールの管理で使用する事をオススメします。何故かと言うと企業用ホームページは、データ量が大きくなりやすくカレンダーのコードを書くと管理がしにくくなる事があります。Calendar.jsを使用する事で、簡単に実装でき尚且つ軽い企業用ホームページができます。

パララックス効果を実装する「Skrollr」について

パララックス効果は、奥行きのあるサイトや奥行きにアニメーションをつけたりする視差効果のあるwebサイトの実装で使用される技術になります。Skrollrは、スクロールに合わせ画面が動くアニメーションを実現するプラグインになります。主にスクロール時にアニメーションが発生します。面白い動きやユーザーが楽しくなる動きを加えることにより、ページ滞在時間を増やす役目があります。 SalesforceでScrollrを使用すると、ユーザーのページ滞在時間が上がり企業のPRや売り上げにつながる可能性が高まります。実際パララックス効果で、webサイト自体のアニメーションが楽しくなります。パララックス効果は可読性を下げる恐れがあるので、多用するのはオススメしません。パララックス効果で複雑なサイトよりかは、パララックス効果をほどほどに使う事が大切です。

スクロール時にフェードイン・アウトさせる「FadeThis」について

FadeThisは、スクロール時にフェードインやフェードアウトを行うjQueryプラグインです。webサイトにアニメーションを入れ、お洒落にしたい場合によく用いられます。スクロール時に、要素がフェードインしたりフェードアウトすることで要素に注目させます。フェードさせる要素を大きくしたり、小さくすることも可能です。フェードアウトは、特定の要素をスクロール時に非表示に出来ます。 SalesforceでFadeThisを使用した場合は、フェードインで企業紹介を注目させ企業の事を知ってもらうのに使うケースが多いです。要素ごとにフェードインさせたり、フェードアウトさせたり動きのあるwebサイトはユーザーを楽しくする効果があるので、あるのとないのとではユーザーの滞在時間が違います。様々な企業ホームページがある中フェードイン、フェードアウトはよく用いられる技術となっています。

JavaScriptのフレームワークについて

Javascriptでは、様々なフレームワークがあります。その中で代表的なフレームワークは、vue.jsやReacty.jsなどがあります。両方ともJavaScriptでサーバーサイド処理が可能になります。両方ともMVCモデルとなります。MVCとは、M（model）V（view）C（Controller）の略称になります。 JavaScriptでは、主にアニメーションや画面の変化等の処理を作成する事が多かったのですが、両方のフレームワークでJSONを使わずにサーバーサイドの処理が簡単に出来るようになりました。ですが、アニメーションも問題なく出来ます。例えば、webサイトでよく見かける一番下までスクロールした際に一番上に戻るボタンの設置やスライドショーの設置も出来ます。

最後に

Salesforce内で使用されるJavaScriptプラグインやフレームワークを紹介させていただきました。その他にもJavaScriptには様々なjQueryやフレームワークがあります。紹介したフレームワークのvue.jsやReact.jsは、ここ数年出てきた技術となります。IT業界は情報の移り変わりが早く来年には使われなくなる技術もありますが、両フレームワークはまだまだ使われていきそうです。]]>