lowcode04_title

【ローコード】各要素タイプの定義/インポート・エクスポート

皆さん、こんにちは。
今回は、引き続き、T-DASHの「画面定義」についてご紹介したいと思います。
主に、各タイプ別の要素定義、インポート/エクスポートについてご紹介致します。

■記事内リンク

1.カテゴリ登録

2.各要素タイプの定義

3.インポート/エクスポート

□1.カテゴリ登録

lowcode04_A

前回は「TEST_A」プロジェクトに、「Google」画面を登録しました。
今回は、その中に「カテゴリ」を登録したいと思います。
カテゴリは、画面定義をより区分けに設定することができます。

画面定義の画面を表示し、画面右上の「画面・カテゴリを追加」のテキストボックスに「検索ページ」と入力し、右のフォルダアイコンを選択します。

lowcode04_01

「画面一覧」の中に、「検索ページ」フォルダが作成されました。
このフォルダ内にGoogleの検索ページ内の各要素を取得していきたいと思います。

lowcode04_02

◇「画面・カテゴリを追加」

まずは前回と同じように、「画面・カテゴリ」を追加していきます。
前回登録した「Google」を選択した後、先ほど作成したカテゴリ「検索ページ」を選択します。

その後、URLテキストボックスの「画面キャプチャ」を選択します。

lowcode04_03

画面キャプチャウィンドウが表示されることを確認します。

lowcode04_04

□2.各要素タイプの定義

lowcode04_B

前回は「ストア」要素を取得しましたので、今回はそれ以外の要素を取得していきたいと思います。

lowcode04_05

◇Googleについて/Gmail/画像(リンクテキスト)

手順①
画面右側の「要素名を入力してください」のテキストボックスで、Googleについて/Gmail/画像/アプリケーションボタンをそれぞれ入力し要素名を登録します。
名称を入力して、Enterを押すことで、要素を登録することができます。

手順②
要素名をそれぞれ入力した後、値のテキストボックスをクリックし、「トラッキング」ボタンを選択します。

手順③
該当する要素にマウスオーバーし、ハイライト表示に成ったらクリックします。
値が登録されることを確認します。

手順④
各要素を同じ手順で、値を設定していきます。
「保存」ボタンを押します。

キャプチャ⑥

◇検索テキストボックス
テキストリンクと同様に、テキストボックスも要素を設定します。
要素名を登録後、トラッキングで値を取得します。

キャプチャ⑦

◇Google検索ボタン/ログインボタン
ボタン要素も同様に、要素名、トラッキングで値を取得します。
ただ私が行った場合、正確にトラッキングできなかったので、「Google検索」「ログイン」の要素名設定後、値は「パス取得実行」で取得しました。
「パスチェック」ボタンを押して、各要素の値が正しいことを確認します。

lowcode04_08

◇注意事項

その①
Googleの検索画面で、要素が取得できない項目を確認しました。
「画像」リンク右のアプリケーションランチャーとその中にある各アプリの一覧です。
例として、アプリケーションランチャー、および「ニュース」をトラッキング、またはパス取得実行を選択したところ、要素の値は取得できませんでした。
これは、T-DASH側でまだ対応できていない部分ではないかと思います。

現状では、アプリケーションランチャーのように取れない部分は、「ニュース」ページ等のURLを指定してからの画面定義を行うと良いかもしれません。
尚、Googleニュースページ先も画面定義では読み込めませんでした。。
今後の更新を待ちましょう。

lowcode04_09

その②
これも注意点として、画面定義で要素名を一度設定すると、キャプチャ画面では削除が行えません。
明確な削除ができないため、要素名を変更して登録等工夫が必要となります。
こちらもT-DASH側で改善してほしいです。

□3.インポート/エクスポート

lowcode04_C

画面定義の設定内容は、インポート、エクスポートを行うことができます。
まずがGoogle検索ページの画面定義内容をエクスポートしてみましょう。

◇エクスポート

①まず画面定義の画面を表示し、「画面エクスポート」を選択します。

lowcode04_10

②画面エクスポートのウィンドウで、エクスポート形式を選択します。
エクスポート形式は、xlsx、csvを選択することができます。
今回はxlsx形式を選択します。

lowcode04_11

③次に保存先のフォルダを選択します。
私はデスクトップのT-Dashフォルダを指定しました。

④その後、エクスポートする画面を選択し、画面右上の「エクスポートする」を選択します。

lowcode04_12

⑤エクスポートの階層を確認し、xlsxファイルが出力されていることを確認します。
ファイルを開いてみると、要素と値が出力されています。

◇インポート

今度は、インポートを行ってみましょう。
サンプルとして、以下ファイルをご利用ください。
Yahoo_要素一覧_20220823_225403.csv

画面定義の画面で、新しく画面を登録します。
今回は一例として、Yahooページの内容をインポートしてみます。

①「画面インポート」を選択します。

lowcode04_14

②画面インポートウィンドウで、「ファイルを選択する」を選択します。

③用意しておいたファイルを選択します。
④インポート設定を以下のように設定します。
・データ開始行:2
・要素名列:A
・値列:B

lowcode04_15

⑤「インポートする」を選択し、インポート結果を確認します。
⑥インポートした内容が表示されていることを確認します。

□最後に

以上、画面定義の基本操作についてご紹介致しました。
次回もT-DASHについて、ご紹介していきたいと思います。

最後まで読んで頂きありがとうございました。

非エンジニアこそ学ぶべきノーコードとは?

ノーコード革命: 小学生でも3時間でアプリ開発できる時代がやってきた!

この記事が気に入ったら
いいね ! しよう

Twitter で
lowcode04_title
最新情報をチェックしよう!