Shadow DOM について
- 概要
- まずはタグを作る
- Shadow DOM の特性
- style 透過性
- 要素の透過性
- イベントの透過性
- Shodow DOM の外側にイベントをバブリングする
- Open Closed の違い
- 弱点
概要
Shadow DOM を実際に作成した上で、どの様な動作をするのかを検証してみる。
コレの続き。
まずはタグを作る
簡単なカスタムタグを用意して EchoTag.js
class EchoTag extends HTMLElement { // コンストラクタ constructor() { super(); this._innerText = null; } // この変数に宣言された属性は、追加/削除/更新されたときに attributeChangedCallback が呼ばれる static observedAttributes = ["message"]; // 属性値が更新されたら呼び出されるコールバック。 attributeChangedCallback(name, oldValue, newValue) { this._innerText = newValue; this._updateRendering(); } // このタグが親のタグに配置されると呼び出されるコールバック connectedCallback() { this._updateRendering(); } // JavaScript でタグ作成したときの属性パラメータ get message() { return this._innerText; } set message(v) { this.setAttribute("message", v); } // カスタム関数。ココでは Shadow DOM を宣言して、span タグを作って表示するだけ。 _updateRendering() { this.attachShadow({mode: 'open'}); // this.innerHTML = null; // append child. const spanElement = document.createElement("span"); spanElement.innerHTML = this._innerText; // this.append(spanElement); this.shadowRoot.append(spanElement); } } // カスタム要素として、ブラウザに登録する customElements.define("echo-tag", EchoTag);
表示してみる。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./EchoTag.js"></script> </head> <body> <div><span>Example!</span></div> <echo-tag message="Welcome to custom tag!"></echo-tag> </body> </html>
簡単に Python3 で python -m http.server 8000 すると
この #shadow-root の中身が Shadow DOM の中身である。
スクラッチ組織のセットアップ時にレコードを CSV で設定できるようにするプラグイン
やりたいこと
スクラッチ組織で開発するとき、テスト用の初期設定データセットアップがめんどくさいから自動化したい。
sfdx の既存コマンドで満足できない
sfdx には正式なコマンドとして force:data:tree が存在するが、このコマンドは JSON を取り込む一方、その方法は SOQL で取得したものを設定する というもの。
SOQL の制限がつくので、あまり複雑なレコード構成ができない…（4階層とか4階層とかリレーションがあるものなど）
どうしたい？
ROR の migrate とかそれに近いことがしたい。
しかし salesforce は insert / update / delete はSQLのような構文式ではないので、ここは諦めて CSV で書きたい。
作ったもの
なのでこんなもの作ってみた。
続きを読むsfdx プラグインを作成してみる
sfdx のインストール
まずは NodeJs をインストールするところから。
下記リンクの中で、Chocolaty を使ったインストールをしている。
この状態で
> nvm list available | CURRENT | LTS | OLD STABLE | OLD UNSTABLE | |--------------|--------------|--------------|--------------| | 19.9.0 | 18.15.0 | 0.12.18 | 0.11.16 | | 19.8.1 | 18.14.2 | 0.12.17 | 0.11.15 | ... 中略 This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases
とりあえず LTS 入れておけばいいので
nvm install 18.15.0 と nvm use 18.15.0 を実行すると
> node --version v18.15.0
そしたら npm update -g npm と打って、NPM を最新化しておこう。
SFDX のインストールはこんな感じ。アップデートも同じコマンドでよい。
上でも下でも好きな方を使えば良い。
尚、下のコマンドをインストールすると、sf がコマンドインターフェースになる。
> npm install sfdx-cli --global > npm install @salesforce/cli --global
ここでは sf コマンド前提で話を進める。
純粋な HTML+JavaScript だけでカスタムタグを作る
カスタムなタグを作成してコンポーネントを作成するフレームワークを使ったことのある人は多いと思う。
と言うかこのサイトで紹介している LWC なんてまんまそれだし…
で、この タグを作るって仕様的にどうなってるん？
て事で調べてみた。
蛇足が多い…！？
でもなんとか成功したのでその作り方をメモする。
- タグを作成して宣言する
- タグとして利用する
- 動かしてみる
タグを作成して宣言する
ここではあくまでタグを宣言して使うことだけを考える。
なので、仕様は最小限で
<echo-tag message="HAHAHA!"></echo-tag>
こんな感じで書いたら、「HAHAHA」と文字列を出力するだけのタグを考える。
まずは、適当に EchoTag.js ファイルを作成して以下のように書く
ServiceWorker について(2)
Firebase で push 通知
目標
Push 通知機能を Firebase を利用して実装してみるテストプログラム。
本当は ServiceWorker を時前実装でやろうとしてたのだけど、そのサンプルで多様されてる Firebase が気づいたら独自フレームワークになってたらしいので、それで試してみた。
- 目標
- Firebase にアカウントを作ろう！
- ローカルアプリの準備
- Firebase SDK の準備
- Firebase プロジェクトの初期化
- Push 通知に対応する
- サンプルを実行してみる
- 最後に
Firebase にアカウントを作ろう！
まずはしれっと Firebase でアカウントを作成する。
アカウント自体は無料で作成できる。
基本は Google アカウントでログイン出来るので、それを自分は行った。
ログインしたら Firebase プロジェクトの作成を行っていく。
Push 通知さえ試せればいいので、Analytics とか要らん…欲しい人はどうぞ
プロジェクトを作ったら、その設定を開く。
マイアプリではアプリを追加。
Web アイコンを選んで
適当な名前で登録しよう。
するとこんな感じになるはず。
次に「Clowd Messaging」のタブを開いて、サービスアカウントを作成します。
特に「ウェブプッシュ証明書」は必須。
ここまできたらコンソールに進みましょう。
続きを読むServiceWorker について(1)
目的
LWC などのフロントエンド技術は、極論調べてフレームワークに従っていれば処理できます。
使うだけならその内部を把握する必要はありませんが、どんな機能をどのように使って処理するのかを把握しておけば、応用が効くかも知れません。
ここでは Service Worker の機能について把握していきます。
代表的な使い方はまずはやはりオフラインキャッシュでしょう。
オフラインキャッシュはネットワークが不安定なモバイル等で特に活躍するもので、接続が途切れようと正しく内容を表示し続けることができます。
試してみる
こちらにサンプルを見つけましたので、これを実行していきます。
nodejs でも python でも何でもいいので、clone してきてサーバを立ち上げるだけですね。
オーソドックスに npx lite-server で実行します。
するとブラウザが起動して、ダースベイダーさんが見えます。
ではここでサーバを Ctrl + c で停止してみます。
ブラウザに戻って更新ボタンを押しても…正しく内容が表示されます。
