2021年

2021年6月に読んだ本

  • 2021.07.05

概要 毎月最低2冊程度は技術の本とそれ以外の本を1冊づつ読むようにしているが、なかなかアウトプットするための時間もとれず、読んで終わりになってしまうことが多いのでせめて毎月何を読んだかの記録だけでも残していこうと思います。 1冊目 Vue.js入門 有名どころのSPAのフレームワークを勉強してみたいなと思って読んでみた。Vue.jsの基礎的な考え方や文法(構文)も細かく記載されており読みやすかった。後半にかけては最低限アプリケーションを開発するために必要となるプラグイン(Vuex,Vue router,Vue Loader 等)についても説明されており、全部理解すれば簡単なアプリくらいなら作れるようになれそうと思った。前半部分の基礎編は今後のためにメモを下記のブログでも残してみました。 2冊目 君は何のために「働く」のか あまりこういう自己啓発っぽい本は読まないのだが、期間限定のセールで半額だったので思わずタイトルで衝動買いをしてしまった。恥ずかしながら渋沢栄一さんが誰かもわからず読んでおり、時代のギャップはかなり感じつつも感化される部分も多々あった。とりあえず、仕事や勉強に今まで以上に真面目に取り組んでいこうと思った。 3冊目 Software Design 2021年7月号 先駆けに学ぶゼロトラストの現実解TRUST ゼロトラストについて色々書いてありそうだったので、久々にSoftware Designを買ってみた。実際にゼロトラストの有識者が各自の視点でゼロトラストに関する理解や設計について記載されており非常に参考になった。

Vue.js入門を読んで

  • 2021.06.22

概要 「Vue.js入門 基礎から実践アプリケーション開発まで」の本を読んだのですが、特に前半パートでのVue.jsの基本的な文法を中心に備忘として整理します。後半パートでは、Vue.jsで使用できるプラグインのVue RouterやVuexなどについても記載されていたましたが、本記事では割愛します。 導入 Webの歴史 1990-2000 Webの誕生、Javascript/CSSのWebブラウザ搭載 2000-2010 サーバサイドベースのアプリケーションフレームワークの誕生Ajax/JQuery/HTML/Node.jsの登場 2010-2018 AltJsの登場、Webフロントエンドライブラリ/フレームワークの登場Babel/ESLint/Webpackなどの様々なツールの登場 AltJsとは ES2015と前後して登場したJavaScriptを変換できるAltJSと呼ばれるプログラミング言語より簡潔な構文を目指したCoffeeSript、型を注釈として付与するTypeScriptが有名 Web Componentsの要素 Custom Elements HTML Template Shadow DOM HTML imports Vue.jsの特徴 コンポーネント指向 リアクティブなデータバインディング(双方向バインディング) プログレッシブフレームワーク 宣言的レンダリング クライアントサイドルーティング = Vue RouterでSPAに対応 大規模向け状態管理 = コンポーネント間で状態の共有方法 リアクティブなデータバインディング(双方向バインディング)は以下のイメージ プログレッシブフレームワークとは=フレームワークはどんな時でも、どんな規模でも、段階的に柔軟に使えるべきである=必要になった時に問題解決するライブラリを適宜導入して問題を解決する 宣言的レンダリングとは=データ変更のたびにリアクティブなDOMレンダリングとユーザによる入力データの同期が可能 Vue.jsはビュー層に焦点があてられたライブラリで、厳密にはフレームワークではない以下のような様々なプラグインで構成されているVue Router:ルーティングプラグインVuex:大規模なWebアプリケーションを構築するための状態管理プラグインVue Loader:webpack向けのローダーライブラリVue CLI:コマンドラインツールVue DevTools:開発ツール 基本構文 UIは、データとそのデータを画面に表示するビュー、データを変更するユーザのアクションの3つから成り立っている コンストラクタ VueインスタンスをDOM要素にマウント(適用)することで、Vue.jsの機能がその要素内で使えるようになる マウント elプロパティで指定したDOM要素をマウント メソッドによるマウントelプロパティを定義せずに、$mountメソッドを用いる UIのデータ定義 dataプロパティには、UIの状態となるデータのオブジェクトを指定するdataプロパティに与えた値はVue.jsのリアクティブシステムに乗るVueインスタンス生成時にdataを与えておき、それをテンプレートで表示するのがVue.jsの表示の基本的な仕組み テンプレート構文 Mustache記法 {{ }}でデータや式を記述 ディレクティブによるHTML要素の拡張 名前がv-で始まる属性(v-bind 等 フィルタ {{ 値 | フィルタ }}フィルタは関数で定義する 算出プロパティ 公開プロパティを算出する関数を定義する ディレクティブ 条件レンダリング(v-if/v-show) 違いは、v-ifは式の結果に応じてDOM要素を追加・削除するのに対して、v-showはスタイルのdisplayプロパティの値を変更することで実現 クラスとスタイルのバインディング v-bind:class=”オブジェクト・配列”v-bind:style=”オブジェクト・配列” リストレンダリング(v-for) 配列あるいはオブジェクトのデータをリストレンダリングv-for=”要素 in 配列” イベントハンドリング v-onはイベントが起きた時に属性値を実行する v-on:イベント名=”式として実行したい属性値” フォーム入力バインディング(v-model) ビュー(DOM)で変更があった時に、その値をVueインスタンスのデータとして更新 ライフサイクルフック created: インスタンスが生成されて、データが初期化された後に呼ばれるmounted: インスタンスにDOM要素が紐づいた後に呼ばれるbeforeDestroy: インスタンスが破棄される前に呼ばれる メソッド(methods) データの変更やサーバーにHTTPリクエストを送る際に利用する コンポーネントの基礎 コンポーネントを作成する Vue.component(tagName, options) コンポーネントを継承する Vue.extend() コンポーネント間の通信 親コンポーネントから子コンポーネントにのみデータを渡すことが可能となっている propsオプションを利用する親からはテンプレートの属性(v-bind)経由で渡すことができる子コンポーネントから親コンポーネントにはカスタムイベントを使用する イベントのリスン:$on(eventName)イベントのトリガー:$emit(eventName)

コンポーネント間の通信

  • 2021.05.03

概要 Lightning Web Componentで複数のコンポーネント間でパラメータを引き渡して連動して動作するための通信を行う仕組みについて整理してみました。Custom EventとLightning Message Serviceの方法を用いて、下記のように殆ど同じ動作をするサンプルを作ってみたので、それぞれでどのような実装になるかを記載します。 デモ ソースコードはこちらhttps://github.com/yhayashi30/lwc-pub-sub Custom Event デモ Lightning Message Service デモ Custom Event Custom Eventは標準のDOMイベントとなります。Custom Eventは、コンポーネント間が階層になっている場合に上位と通信する際に使用することができます。detailパラメータであらゆる型のデータを引き渡すことができます。 Custom EventのPublisher サンプルコード Custom Eventを作成するには、CustomEvent() コンストラクタを使用します。Custom Event() コンストラクタでは、第一引数のイベント名を表す文字列のみが必須のパラメータとなります。(サンプルでは”selected”を使用。onは付けなくて良いので注意。)Custom Eventをディスパッチするには、EventTarget.dispatchEvent() メソッドを引数に作成したCustom Eventをセットして実行します。Custom Event自体にパラメータを設定したい場合には、detailプロパティを用いてJSONで自由に定義して、受信側でeventリスナーを通じてアクセスすることができます。サンプルコードでは選択したContactのSalesforce IDを渡すようになっております。 Custom EventのSubscriber サンプルコード subscriberとなるコンポーネントでは、publisherのコンポーネント(c-custom-event-publisher)を子コンポーネントとして設置します。publisherで作成したCustom Eventのイベント名に”on”を付与して(今回のサンプルコードでは”onselected”となる)リスンします。 Lightning Message Service Lightning Message Serviceを使用することで、Lightningページ内のコンポーネント間でフラットに通信を行うことができます。同じ Lightning ページに組み込まれた Visualforce ページ、Aura コンポーネント、および Lightning Web コンポーネント間で通信を行うこともできます。Lightning Message Serviceを使用するには、各コンポーネントから呼び出すLightning メッセージチャネルが必要となります。Lightning メッセージチャネルを作成するには、LightningMessageChannel メタデータ型を使用します。LightningMessageChannel を作成するには、SFDX プロジェクトを用いて、force-app/main/default/messageChannels/ ディレクトリにXMLの定義を含める必要があります。LightningMessageChannelのファイル名は、messageChannelName.messageChannel-meta.xml 形式とします。これを作成して、対象の組織にデプロイします。 Lightning メッセージチャネルのサンプル SFDXプロジェクトの以下のディレクトリに作成します。/force-app/main/default/messageChannels Record_Selected.messageChannel-meta.xml LMSのPublisher サンプルコード PublisherのコンポーネントからメッセージチャネルでメッセージをPublishするには、範囲設定されたモジュール @salesforce/messageChannel をコンポーネントの JavaScript ファイルに含め、Lightning Message Service の publish() 関数をコールします。 Publisherのコンポーネントの JavaScript ファイルでは、メッセージチャネルと、メッセージチャネルを操作するために必要な Lightning Message Service 関数をインポートします。 上記でインポートした@wire(MessageContext) を使用して MessageContext オブジェクトを作成します。 handleContactClick() メソッドは、Publishするメッセージコンテンツを作成します。Lightning Message Service の publish() 関数は、メッセージコンテキスト、メッセージチャネルの名前、メッセージペイロードの 3 つのパラメータを取ります。メッセージペイロードには自由にパラメータを設定することができるので、今回のサンプルコードではContactのSalesforceIDを設定します。 LMSのSubscriber サンプルコード Subscriberのコンポーネントでも、メッセージチャネルでメッセージの登録および登録解除を行うには、メッセージチャネルを @salesforce/messageChannel 範囲設定されたモジュールから Lightning Web コンポーネントにインポートします。 Lightning Message Service の subscribe() 関数と unsubscribe() 関数をJavaScriptファイルの中で呼び出すことで制御します。@wire(MessageContext) を使用してコンテキストオブジェクトを作成します。 connectedCallback()でコンポーネントの初期化処理で、Lightning Message Service の subscribe() メソッドをコールして subscription に割り当てます。subscribe() メソッドは、メッセージコンテキスト、メッセージチャネルの名前、公開されたメッセージを処理するリスナーメソッドの 3 つの必須パラメータを取ります。 disconnectedCallback()でコンポーネントの削除処理の中で、Lightning Message Service からのメッセージの受信を停止するためにお、登録参照を渡して unsubscribe() をコールします。 Custom Event vs LMSの比較 参考 Communicate with Eventshttps://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events Message Servicehttps://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation Lightning Message Service を使用した DOM 間の通信https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.use_message_channel ライフサイクルフックhttps://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.reference_lifecycle_hooks

ソーシャルサインオンのフロー整理

  • 2021.03.24

概要 本記事では、Salesforceの主に外部サイトの構築のログイン認証で使用するソーシャルサインオンを整理します。ソーシャルサインオンではSalesforceがRP(Relying Party)となり、認証/認可はソーシャル(Facebook/Google/Twitter etc)で行います。基本的にはOpenID Connectを用いたシングルサインオンとなるため、内部ユーザというよりExperience Cloudなどの外部ユーザのログインに使用されるケースが多いかと思います。 内部ユーザ向けに利用されるSAMLの認証フローについては下記の記事を参考にしてください。 OpenID Connectとは RESTベースで実装されており、クラウド系のサービス、アプリケーションに向いた仕組みである。OpenIDに対応した実装を作るプログラマ視点で見るとSAMLよりも容易に実装を構築できる。先にRPにアクセスするユースケースしかサポートしていないため、ログインポータルを作ることはできない。OpenID ConnectはOAuthの技術をベースにしている。OAuthは厳密にはSSOではなく、権限移譲のためのプロトコルである。 OpenID ConnectやOAuthについて、詳細の流れやフローについては下記の記事を参考にしてください。 ソーシャルサインオンの認証フロー ソーシャルサインオンの認証フローはOpenID Connectを用いており、下記のようなシーケンスとなっております。 ソーシャルサインオンの設定 Facebookに認証用のアプリを作成 Facebookの開発者サイトから自分のアカウントにログインしてアプリ作成を行います。https://developers.facebook.com/ アプリIDとapp secretを取得します。 認証プロバイダの作成 FacebookをIDPとする認証を行うためにSalesforceの認証プロバイダを作成します。プロバイダタイプは「Facebook」を選択し、取得したアプリID→コンシューマ鍵、app secret→コンシューマの秘密を入力します。登録ハンドラは、一旦[登録ハンドラテンプレートを自動作成]を選択しておきます。 登録ハンドラーを更新 開発者コンソールから自動生成されたApexを下記のGitHubのサンプルコードで上書きします。なお、プロファイル名やアカウント名などはサンプルなので組織の情報に合わせてアップデートする必要があります。https://github.com/salesforceidentity/IdentityTrail-Module3/blob/master/SimpleFacebookRegistrationHandler.cls 外部サイトへの紐付け Experience Cloudのワークスペース – 管理 – ログイン&登録の設定で先ほど作成した認証プロバイダを有効化します。 FacebookのアプリにリダイレクトURIを登録 動作検証 外部サイトにアクセスしてログイン画面に表示されているFacebookのアイコンを押下します。 Facebookのログイン画面にリダイレクトされます。 Facebookへのログインが成功すると、Facebookの認可の画面が表示されます。 許可するとContactやUserが自動生成されてサイトへログインしている状態となりました。 参考 ソーシャルサインオンの設定https://trailhead.salesforce.com/ja/content/learn/modules/identity_external/identity_external_social 認証プロバイダhttps://help.salesforce.com/articleView?id=sf.sso_authentication_providers.htm&type=5 登録ハンドラーhttps://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_auth_plugin.htm

SAML認証フロー整理

  • 2021.03.21

概要 本記事ではSAML認証フローを用いてシングルサインオンを実現する流れをSalesforceのプラットフォームでの設定を用いて仕組みを整理します。 主な用語の内容は以下の通りになります。 Idp Identity Provider。ユーザーのIDやパスワードなどの認証情報を提供する役割を果たす。 SP Service Provider。IdPに認証を委託し、IdPによる認証情報を信頼してユーザーにサービスを提供する。OpenID Connectの場合には、RP (Relying Party) ともいう。 SAMLとは SAMLは、Security Assertion Markup Languageの略であり、Webサービスベースのシングルサインオンプロトコルである。認証情報のやりとりなどにXMLを利用。企業向けの従来型のソフトウェア製品などで採用されているケースが多い。利用者先にIdpにアクセスするユースケース(Idp Initiated)と、先にSPにアクセスするユースケース(SP Initiated)の両方をサポートしている。 OpenID Connectとの使い分け SAMLはOpenID Connectとは違いIdpとSPが直接通信を行う必要がないという点が一番大きな違いであるため、大体の使い分けは以下の通りになります。 SAML・・・エンタープライズ向け OpenID Connect・・・コンシューマーサービス向け SAMLフロー種類 Idp-Initiated Idp-Initiatedフローは、Idp側が起点となるのでユーザがIdpのログイン画面等にアクセスする処理から始まり、認証を行った後にSAMLレスポンスに含むSAMLアサーションをSPで検証してログイン状態とします。 SP-Initiated SP-Initiatedフローは、SP側が起点となり未ログインであった場合にはIdpへリダイレクトしてIdpで認証を行った後にSAMLレスポンスに含むSAMLアサーションをSPで検証してログイン状態とします。 SalesforceでのSAML SalesforceでのSAML認証フローを用いたシングルサインオンの設定を確認していきます。 統合IDを設定する シングルサインオンでログインするSalesforceのユーザに保持する統合IDを設定します。 SSOプロバイダを作成する シングルサインオン設定で『SAMLを有効化』をチェックします。 SAMLシングルサインオン構成を作成します。 上記のシングルサインオン設定に対してIDプロバイダから返されるSAMLアサーションのサンプルは以下の通りとなります。 Salesforceのログイン画面へIDPを追加 [私のドメイン]の認証設定で上記のIDPを認証サービスとして選択することで、IDPのログイン画面へリダイレクトさせることができるようになります。 参考 内部ユーザのシングルサインオンの設定https://trailhead.salesforce.com/ja/content/learn/modules/identity_login/identity_login_sso SAML シングルサインオンを使用するサービスプロバイダとして Salesforce を設定https://help.salesforce.com/articleView?id=sf.sso_saml.htm&type=5 [私のドメイン] ログインページへの ID プロバイダの追加 https://help.salesforce.com/articleView?id=sf.domain_name_login_id_prov.htm&type=5