こんにちは！小原です。
サスケWorksの「レコード登録画面」で、レコード項目名からテキストボックスなどの要素を取得したい場合があります。
その場合、次のような手順が必要です。
- ブラウザの開発者ツールを開く
- 取得したい要素のIDやCLASSなどを確認する
- JavaScriptコードで要素を取得するコードを作成・実行
上記は一般的な流れかと思いますが、IDやCLASSを調べるのに少々手間です。
そこでレコード項目名を渡すことで対応する要素を返す関数を作成しました。
>> 先にコードだけ見たい方はこちら
ぜひアプリ開発にお役立てください。
※1 本記事の内容はサスケWorksプレミアムプランへの加入が必要です。
※2 JavaScriptコードに組み入れてお使いいただくことを想定しております。
全体像
今回は次の3種類の関数をご用意しました。
- レコード項目名から対応するddタグを取得する
- ddタグからinput等の要素を取得する
- プルダウンメニューから項目名を取得する
具体的な使い方については、記事の後半で触れます。
実装方法
ここからはコードの追加方法をお伝えします。
最初にアプリの右上のスパナマークをクリック。
サイドバーから「カスタムコード」を選択します。
右上の「新規登録」ボタンをクリックして、設定画面に進みます。
続いての設定は、以下を参考にしてみてください。
- 状態: 公開
- 名称: レコード項目名から要素取得（分かりやすいものでOKです）
- 適用画面: レコード登録画面
- コード種別: JavaScript
入力が終わったら「保存」ボタンをクリックして設定を終了します。
次に以下の画面に遷移するので、「ソースコードの入力」をクリックして先に進みましょう。
次のようなテキストエディタが開きます。
そのうえで以下のコードをコピー＆ペーストします。
/*!
* SaaskeSDK
* Copyright (c) North Torch Co.,ltd. 2023
* Released under the MIT License.
* ライセンスの全文は以下をご参照ください
* LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
* README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/
function getElementsByDisplayText(baseList = []) {
// 引数で受け取った要素が配列かどうかを確認
if (!Array.isArray(baseList)) {
throw new Error('引数は配列である必要があります');
};
// すべてのdlタグを取得
const dlTags = document.getElementsByTagName('dl');
// 結果を格納する配列
let targetElements = [];
// すべてのdlタグをループ
Array.from(dlTags).forEach(dlTag => {
// レコード項目名部分を取得
const dtTag = dlTag.getElementsByTagName('dt')[0]
const dtText = dtTag.textContent.trim()
// テキストボックス等を取得
const ddTag = dlTag.getElementsByTagName('dd')[0]
if (baseList.length == 0) {
// 取得対象が無指定なら全取得
targetElements.push(ddTag);
} else {
// 取得対象の指定ありなら取得対象リストに合致しているもののみ取得
if (dtText.includes(baseList)) {
targetElements.push(ddTag);
};
};
});
return targetElements;
};
function getDetailElms(targetElement) {
// 取得するHTMLタグとtypeを選択
const targetTagAndType = `
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="checkbox"], input[type="radio"],
textarea, select, #tag_group, a
`
// 取得対象となるHTMLタグをすべて取得
const target = targetElement.querySelectorAll(targetTagAndType)
if (target.length == 0) {
// 該当なしならnullを返す
return null;
} else {
// 該当ありなら取得したNodeListを返す
return target;
};
};
function getTextFromSelection(selectTagElm) {
// select2 の元となる要素のidを取得
const targetId = selectTagElm.id
// テキスト部分を抽出
const $originalSelect = $(`#${targetId}`);
const selectedText = $originalSelect.find('option:selected').text();
return selectedText;
}こちらを保存して、設定は完了です。
動作確認
ここでは簡易的に、ブラウザの開発者ツールを使って動きを見てみます。
※ 本来は、他のJavaScriptコードとの組み合わせでお使いいただくことになります
まずはChrome等のブラウザを立ち上げ、F12キーを押します。
すると、画面の右サイドにウィンドウが開きます。
続いて「要素」の一つ右にある「コンソール」をクリックしてください。
コードが入力できるようになっていますので、以下のJavaScriptコードを一行ずつ実行します。
// 「一行テキスト」は例です。
// 取得したいレコード項目名に書き換えてください
let result = getElementsByDisplayText(['一行テキスト'])
// 結果を表示
resultresult という変数の中に、「一行テキスト」に対応する dd タグが格納されていることがわかります。
ここで取得できた要素はあくまで dd タグです。
この dd タグはテキストボックス等の入れ物にすぎないので、これにvalueプロパティを指定しても値は取得できません。
そのため、入力値を取得するにはさらに中にあるテキストボックス（input タグ）を取り出す必要があります。
入力値を取り出す際には、2番目の関数（getDetailElms）を使用します。
引数として、ddタグを含む要素を指定してください。
let inputTag = getDetailElms(result[0])
inputTag[0].valuegetDetailElms() 関数の戻り値は配列です。
そのため、ブラケット記号[]の中に「何番目の要素を取得するか？」を意味するインデックス番号を指定します。
インデックス番号は、0始まりです。
これに対してvalue プロパティを指定することでテキストボックス内の文字列を取得できます。
全要素を取得したい場合
先ほどは「一行テキスト」という項目だけを取得したかったため、次のコードを実行しました。
let result = getElementsByDisplayText(['一行テキスト'])引数を空にして実行することで、すべての dd タグを取得できます。
let result = getElementsByDisplayText()これで、次のようにすべての dd タグが取得できます。
プルダウンのテキストを取得したい場合
プルダウンについては、単にvalueを指定しても文字列が取得できません。
そこで、別途テキストボックス用に文字列を取得する関数をご用意しました。
以下の流れで文字列が取得できます。
// カテゴリのddタグを取得
let category = getElementsByDisplayText(['カテゴリ'])
// 文字列を取得する
let result = getTextFromSelectTag(category[0])
// 結果を表示
result以下のように入力値が取得できていることをご確認いただけると思います。
ソースコード公開中
本記事で紹介したコードは、GitHubからもご覧いただけます。
https://github.com/northtorch/saaske-sdk/blob/main/getElementsByDisplayText.js
サスケWorks関連記事はこちら
本ブログでは、サスケWorksのカスタマイズ系記事も順次アップ予定です。
ぜひ、別記事の方もご覧ください。