Lightning Component

LWCのDatatableをCustom Data Typeで拡張する

概要 Lightning Web ComponentのDatatable（lightning-datatable）は、簡単にテーブル形式でデータを表示することができるコンポーネントです。Datatableでは、標準でサポートしている型（※）がありますが、カスタマイズしたい場合にはLightningDatatableを拡張してCustom Typeを定義することができます。Custom Typeにより例えば行削除ボタンや画像、カスタムのテキストや数値のセルを実装することができます。 ※Summer’23時点actionbooleanbuttonbutton-iconcurrencydatedate-localemaillocationnumberpercentphonetext (default)url Custom Data Typeについて Custom Data Typeを使用するには、LightningDatatableを拡張したコンポーネントを作成する必要があります。今回は、サンプルである一定の条件を満たした際にボタンを表示/非表示を切り替えるCustom Typeを定義してみました。 サンプル 取引先のデータテーブルでカスタムデータタイプで表示条件をつけたボタンを作ってみました。一番右の列のRelated listは取引先に関連するケースが存在する場合にのみ表示されるようにしています。 https://github.com/yhayashi30/lwc-custom-data-type-sample Custom

Continue reading
Lightning Component / Salesforce

LWCにおけるSlotの利用について

Slotとは slotは、親コンポーネントから子コンポーネントにマークアップを渡すための方法です。slotタグを子コンポーネントのHTMLファイルで宣言することで、親コンポーネントから渡されたコンテンツを表示することできます。 サンプル この例では、親コンポーネントでc-child-componentを呼び出し、子コンポーネントのテンプレート内にあるスロットタグのname属性に”content”を指定しています。 その後、親コンポーネント内でタグを定義し、slot属性に”content”を指定しています。これにより、子コンポーネントには親コンポーネントから渡された”Hello, World!”が表示されます。 Slotを利用することのメリット スロットを利用することで、子コンポーネントのHTMLテンプレート内に動的なコンテンツを表示することができます。また、複数のスロットを利用することもでき、それぞれに異なるname属性を指定することができます。スロットを利用することで、コンポーネントの再利用性を高めることができます。 以上、SalesforceのLWCでのSlotの利用方法についてご紹介いたしました。ご参考になれば幸いです。 参考 <slot>: ウェブコンポーネントのスロット要素 https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot スロットにマークアップを渡すhttps://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.create_components_slots

Continue reading
Technical book

2021年6月に読んだ本

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

Continue reading
JavaScript / Vue.js

Vue.js入門を読んで

概要 「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

Continue reading
Lightning Component / Salesforce

コンポーネント間の通信

概要 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

Continue reading
Identity / Salesforce

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

概要 本記事では、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

Continue reading
Identity / Salesforce

SAML認証フロー整理

概要 本記事では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)の両方をサポートしている。

Continue reading
Technical book

「オブジェクト指向でなぜつくるのか 第2版」を読んでみた

概要 Kindle Unlimitedに加入してみて良さそうな技術書を探していたところ一番におすすめで出てきた「オブジェクト指向でなぜつくるのか 第2版」を読んでみたのでそのまとめを書きたいと思います。本書ではオブジェクト指向(以降OOPと記載、Object Oriented Programming language)の特徴を大きく「プログミング技術」と「汎用の整理術」の2面からわかりやすく言語化して記載されていました。特に「プログラミング技術」の部分では他の技術書でよくある現実世界に無理やり置き換えた比喩を極力使わずに言語と図を用いて表現されていた部分がよかったと思います。 「オブジェクト指向でなぜつくるのか 第2版」 内容 プログラミングの歴史 機械語→アセンブリ言語→高級言語→構造化言語(GOTOレス)→オブジェクト指向(OOP) 機械語：コンピュータが解釈できる言語 アセンブリ言語：アセンブリ言語を使って書いたプログラムは、それをコンパイルするアセンブラと呼ばれるプログラムに読み込ませて機械語を生成 高級言語：FORTRANやCOBOLなどの人がわかりやすい言語。 構造化言語(GOTOレスプログラミング)：基本三構造(順次実行、if文による条件分岐、for文やwhile文による繰り返し)。サブルーチンで独立性を高めて、複数サブルーチン間はグローバル変数で共有する。代表的なのはC言語。GOTO文を極力使わないように。 オブジェクト指向(OOP)：グローバル変数問題、貧弱な再利用の2つの課題を解決させるために登場。Simula67→Smalltalk→Javaの流れ。 オブジェクト指向の特徴整理 3大要素 クラス(まとめる、隠す、たくさん作る)

Continue reading
AtCoder

ABC169 B,C問題(2020.5.31)

概要 本記事は、2020/5/31に開催されたABC169のB,C問題を整理した内容を記載します。D問題までの回答を目指しているにもかかわらず、まさかのB,C問題でつまづいてしまいました。非常に不甲斐ない結果ですが、しっかりできなかったポイントを整理していきたいと思います。ただ、TwitterやYoutubeのコメントを見ていると同じようにB,Cで苦戦している人が多かったようなので、少しだけほっとしていました。 B – Multiplication2 問題 https://atcoder.jp/contests/abc169/tasks/abc169_b 解説 PDF https://img.atcoder.jp/abc169/editorial.pdf Youtube 理解 N個の整数Ajを全て掛け合わせして解を求めるという非常にシンプルな問題です。ポイントは2つあって、まず1つはAjは0になることがあるということ。もう1つはAjは最大で10の9乗であり、そのまま全てをかけるとオーバーフローを起こしてしまうということです。python3.0の場合は、int型が多倍長整数であるので基本的にメモリがある分は桁数を使用することができます。なので、単純に毎回掛けて10の18乗を超えていないかをチェックする処理で動作します。 実装 参考 – 任意精度演算 https://ja.m.wikipedia.org/wiki/%E4%BB%BB%E6%84%8F%E7%B2%BE%E5%BA%A6%E6%BC%94%E7%AE%97 C –

Continue reading
Salesforce / 開発ツール

LWC Local Developmentを試してみた

概要 SalesforceのLightning Web Component(LWC)をローカルサーバーで動かせる機能がBeta版でリリースされていたので、どんなものかを触って確かめてみました。 準備 Local Dev Server用のCLIをインストール 最終的にはSalesforce CLIのパッケージに含まれるようですが、現在はBeta版なので含まれていないので、個別にインストールする必要があります。 組織の認証 Devhub組織と認証して、Scratch組織を作成しておきます。どうやら接続先はSandboxではなくScratch組織である必要があるみたいです。この辺は結構前に書いた記事ですが、下記をご参照ください。 Salesforce DXの基礎の基礎https://qiita.com/yhayashi30/items/80dd868f2e15aac67072 ローカルサーバーを起動 下記のコマンドを実行することでnode.jsがローカルサーバーを起動してくれます。 また、VSCodeのコマンドパレットで下記を実行して操作することもできます。 起動して開くSFDX: Open Local

Continue reading